diff --git a/.eslintrc b/.eslintrc
index a1d9e0450..56d9eecce 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -24,7 +24,7 @@
       "error",
       {
         "components": ["Link"],
-        "specialLink": ["as"]
+        "specialLink": ["as", "to"]
       }
     ],
     "react/display-name": "off",
diff --git a/package.json b/package.json
index 1b6d38c49..599fc5245 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,7 @@
     "@nulogy/icons": "4",
     "react": ">=16.10.2",
     "react-dom": ">=16.10.2",
-    "styled-components": "^5.1.0",
+    "styled-components": "^6.0.0",
     "typescript": "4.9.5"
   },
   "devDependencies": {
@@ -95,7 +95,6 @@
     "@types/react": "^17.0.39",
     "@types/react-datepicker": "^4.1.0",
     "@types/react-dom": "^17.0.20",
-    "@types/styled-components": "^5.1.9",
     "@typescript-eslint/eslint-plugin": "^4.0.0",
     "@typescript-eslint/parser": "^5.30.5",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
@@ -137,7 +136,7 @@
     "semantic-release": "^17.2.1",
     "source-map-loader": "^1.0.1",
     "storybook-addon-performance": "^0.17.1",
-    "styled-components": "^5.3.11",
+    "styled-components": "^6.0.0",
     "svg-sprite-loader": "^6.0.11",
     "ts-jest": "^26.1.1",
     "typescript": "4.9.5",
@@ -146,10 +145,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.9.6",
+    "@emotion/is-prop-valid": "^1.3.1",
     "@nulogy/tokens": "^5.4.0",
     "@reach/dialog": "0.17.0",
     "@styled-system/prop-types": "^5.1.4",
     "@styled-system/theme-get": "^5.1.2",
+    "@types/react-router-dom": "5.3.0",
     "@types/styled-system": "5.1.22",
     "body-scroll-lock": "^3.1.5",
     "core-js": "3",
@@ -170,7 +171,8 @@
     "react-select": "^5.8.0",
     "react-windowed-select": "^5.2.0",
     "smoothscroll-polyfill": "^0.4.4",
-    "styled-system": "^5.1.4"
+    "styled-system": "^5.1.4",
+    "stylis": "^4.0.0"
   },
   "husky": {
     "hooks": {
diff --git a/src/BottomSheet/stories/BottomSheet.features.story.tsx b/src/BottomSheet/stories/BottomSheet.features.story.tsx
index beaafefc1..2c606c008 100644
--- a/src/BottomSheet/stories/BottomSheet.features.story.tsx
+++ b/src/BottomSheet/stories/BottomSheet.features.story.tsx
@@ -21,7 +21,6 @@ export default {
 
 export const WithCustomWidths = () => {
   const [isOpen, setIsOpen] = React.useState(true);
-
   return (
     <>
       <Button onClick={() => setIsOpen(true)}>Open Sheet</Button>
@@ -41,7 +40,6 @@ export const WithCustomWidths = () => {
 
 export const DisableCloseOnOverlayClick = () => {
   const [isOpen, setIsOpen] = React.useState(true);
-
   return (
     <Box>
       <Button onClick={() => setIsOpen(true)}>Open Sheet</Button>
@@ -63,7 +61,6 @@ export const DisableCloseOnOverlayClick = () => {
 
 export const AdvancedUsage = () => {
   const [isOpen, setIsOpen] = React.useState(true);
-
   return (
     <>
       <ToastContainer />
diff --git a/src/BrandedNavBar/MenuTriggerButton.tsx b/src/BrandedNavBar/MenuTriggerButton.tsx
index e6a54d5e9..686eedca6 100644
--- a/src/BrandedNavBar/MenuTriggerButton.tsx
+++ b/src/BrandedNavBar/MenuTriggerButton.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import styled, { CSSObject } from "styled-components";
+import styled from "styled-components";
 import { themeGet } from "@styled-system/theme-get";
 import { Icon } from "../Icon";
 import { DefaultNDSThemeType } from "../theme";
@@ -11,8 +11,8 @@ type StyledButtonProps = React.ComponentPropsWithRef<"button"> & {
   theme?: DefaultNDSThemeType;
 };
 
-const StyledButton = styled.button(
-  ({ color = "white", hoverColor = "lightBlue", hoverBackground = "black", theme }: StyledButtonProps): CSSObject => ({
+const StyledButton = styled.button<StyledButtonProps>(
+  ({ color = "white", hoverColor = "lightBlue", hoverBackground = "black", theme }) => ({
     display: "flex",
     alignItems: "center",
     position: "relative",
diff --git a/src/BrandedNavBar/MobileMenu.tsx b/src/BrandedNavBar/MobileMenu.tsx
index dea366d25..563a96437 100644
--- a/src/BrandedNavBar/MobileMenu.tsx
+++ b/src/BrandedNavBar/MobileMenu.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import type { CSSObject } from "styled-components";
 import { display } from "styled-system";
-import { Text, Heading3 } from "../Type";
+import { Text } from "../Type";
 import { Flex } from "../Flex";
 import { BrandingText } from "../Branding";
 import { DropdownLink, DropdownText } from "../DropdownMenu";
@@ -204,8 +204,8 @@ type NavProps = {
   backgroundColor: string;
 };
 
-const Nav = styled.nav(
-  ({ backgroundColor }: NavProps) => ({
+const Nav = styled.nav<NavProps>(
+  ({ backgroundColor }) => ({
     backgroundColor,
   }),
   {
diff --git a/src/BrandedNavBar/SmallNavBar.tsx b/src/BrandedNavBar/SmallNavBar.tsx
index 49102d2e4..79fbeeed5 100644
--- a/src/BrandedNavBar/SmallNavBar.tsx
+++ b/src/BrandedNavBar/SmallNavBar.tsx
@@ -43,7 +43,7 @@ type SmallHeaderProps = {
   breakpointLower?: string | number;
 };
 
-const SmallHeader = styled.header(
+const SmallHeader = styled.header<SmallHeaderProps>(
   ({ isOpen, theme }: SmallHeaderProps): CSSObject =>
     isOpen
       ? {
diff --git a/src/BrandedNavBar/SubMenuTriggerButton.tsx b/src/BrandedNavBar/SubMenuTriggerButton.tsx
index f5ae5e064..57c5dc3a3 100644
--- a/src/BrandedNavBar/SubMenuTriggerButton.tsx
+++ b/src/BrandedNavBar/SubMenuTriggerButton.tsx
@@ -1,4 +1,4 @@
-import styled, { CSSObject, StyledComponentPropsWithRef } from "styled-components";
+import styled, { CSSObject } from "styled-components";
 import React from "react";
 import { DropdownButton } from "../DropdownMenu";
 import { Icon } from "../Icon";
diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx
index c265fa816..b23ac51e6 100644
--- a/src/Button/Button.tsx
+++ b/src/Button/Button.tsx
@@ -67,6 +67,14 @@ const WrapperButton = styled.button<ButtonProps>(
     },
     padding: `${subPx(theme.space.x1)} ${theme.space.x2}`,
   }),
+  variant({
+    variants: {
+      touch: {
+        fontSize: "md",
+        lineHeight: "base",
+      },
+    },
+  }),
   ({ theme }) =>
     variant({
       prop: "size",
@@ -83,14 +91,6 @@ const WrapperButton = styled.button<ButtonProps>(
         },
       },
     }),
-  variant({
-    variants: {
-      touch: {
-        fontSize: "md",
-        lineHeight: "base",
-      },
-    },
-  }),
   space
 );
 
diff --git a/src/Button/IconicButton.tsx b/src/Button/IconicButton.tsx
index 5184171b0..e666ad818 100644
--- a/src/Button/IconicButton.tsx
+++ b/src/Button/IconicButton.tsx
@@ -26,7 +26,7 @@ interface IconicButtonProps
     SpaceProps,
     Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseProps> {}
 
-const IconWrapper = styled.span(({ theme, size }: { theme: DefaultNDSThemeType; size: string }) => ({
+const IconWrapper = styled.span<{ size: string }>(({ theme, size }) => ({
   display: "inline-flex",
   flexShrink: 0,
   alignItems: "center",
diff --git a/src/DatePicker/DatePickerStyles.ts b/src/DatePicker/DatePickerStyles.ts
index ef2cbd1fc..143988c81 100644
--- a/src/DatePicker/DatePickerStyles.ts
+++ b/src/DatePicker/DatePickerStyles.ts
@@ -1,7 +1,6 @@
 import { createGlobalStyle } from "styled-components";
-import { DefaultNDSThemeType } from "../theme";
 
-export const DatePickerStyles = createGlobalStyle<{ theme: DefaultNDSThemeType }>(({ theme }) => ({
+export const DatePickerStyles = createGlobalStyle(({ theme }) => ({
   ".nds-date-picker": {
     ".react-datepicker-wrapper": {
       width: "fit-content",
@@ -83,10 +82,9 @@ export const DatePickerStyles = createGlobalStyle<{ theme: DefaultNDSThemeType }
         cursor: "pointer",
       },
     },
-    ".react-datepicker__day--disabled:hover,.react-datepicker__month-text--disabled:hover,.react-datepicker__quarter-text--disabled:hover":
-      {
-        backgroundColor: "transparent",
-      },
+    ".react-datepicker__day--disabled:hover,.react-datepicker__month-text--disabled:hover,.react-datepicker__quarter-text--disabled:hover": {
+      backgroundColor: "transparent",
+    },
     ".react-datepicker__day-names, .react-datepicker__week": {
       whiteSpace: "nowrap",
     },
diff --git a/src/DropdownMenu/DropdownLink.tsx b/src/DropdownMenu/DropdownLink.tsx
index 9da5a0863..b41bf6bdb 100644
--- a/src/DropdownMenu/DropdownLink.tsx
+++ b/src/DropdownMenu/DropdownLink.tsx
@@ -12,10 +12,9 @@ interface Props extends React.ComponentPropsWithRef<"a">, StyledProps {
   bgHoverColor?: string;
 }
 
-const DropdownLink = styled.a.withConfig<Props>({
-  shouldForwardProp: (prop, defaultValidatorFn) =>
-    !["hoverColor", "bgHoverColor"].includes(prop) && defaultValidatorFn(prop),
-})(
+const DropdownLink = styled.a.withConfig({
+  shouldForwardProp: (prop) => !["hoverColor", "bgHoverColor"].includes(prop),
+})<Props>(
   ({ theme, color = "darkGrey", hoverColor = "darkBlue", bgHoverColor = "lightBlue" }) => ({
     color: theme.colors[color],
     fontWeight: theme.fontWeights.medium,
diff --git a/src/Modal/ModalHeader.tsx b/src/Modal/ModalHeader.tsx
index 97c5ec3f5..847187afd 100644
--- a/src/Modal/ModalHeader.tsx
+++ b/src/Modal/ModalHeader.tsx
@@ -1,34 +1,28 @@
-import React from "react";
-import styled, { CSSObject } from "styled-components";
+import styled from "styled-components";
 import { transparentize } from "polished";
 import { DefaultNDSThemeType } from "../theme";
 
 const getHeaderPaddingRight = (closeButtonIncluded?: boolean, theme?: DefaultNDSThemeType) =>
   closeButtonIncluded ? theme.space.x8 : theme.space.x3;
 
-type ModalHeaderProps = React.ComponentPropsWithRef<"div"> & {
+const ModalHeader = styled.div<{
   hasCloseButton?: boolean;
-  theme?: DefaultNDSThemeType;
-};
-
-const ModalHeader = styled.div(
-  ({ hasCloseButton, theme }: ModalHeaderProps): CSSObject => ({
-    position: "relative",
-    padding: `${theme.space.x2} ${getHeaderPaddingRight(hasCloseButton, theme)} ${theme.space.x2} ${theme.space.x3}`,
-    backgroundColor: transparentize(0.1, theme.colors.white),
-    zIndex: theme.zIndices.modalHeaderAndFooter,
-    borderRadius: `${theme.radii.medium} ${theme.radii.medium} 0 0`,
-    ":after": {
-      content: "''",
-      position: "absolute",
-      bottom: 0,
-      left: theme.space.x1,
-      right: theme.space.x1,
-      display: "block",
-      margin: "0 auto",
-      borderBottom: `solid 1px ${theme.colors.lightGrey}`,
-    },
-  })
-);
+}>(({ hasCloseButton, theme }) => ({
+  position: "relative",
+  padding: `${theme.space.x2} ${getHeaderPaddingRight(hasCloseButton, theme)} ${theme.space.x2} ${theme.space.x3}`,
+  backgroundColor: transparentize(0.1, theme.colors.white),
+  zIndex: theme.zIndices.modalHeaderAndFooter,
+  borderRadius: `${theme.radii.medium} ${theme.radii.medium} 0 0`,
+  ":after": {
+    content: "''",
+    position: "absolute",
+    bottom: 0,
+    left: theme.space.x1,
+    right: theme.space.x1,
+    display: "block",
+    margin: "0 auto",
+    borderBottom: `solid 1px ${theme.colors.lightGrey}`,
+  },
+}));
 
 export default ModalHeader;
diff --git a/src/NDSProvider/GlobalStyles.tsx b/src/NDSProvider/GlobalStyles.tsx
index a9d42daf9..ea2588f14 100644
--- a/src/NDSProvider/GlobalStyles.tsx
+++ b/src/NDSProvider/GlobalStyles.tsx
@@ -1,12 +1,8 @@
-import styled, { CSSObject } from "styled-components";
-import { DefaultNDSThemeType } from "../theme";
+import styled from "styled-components";
 
-export type GlobalStylesProps = {
-  theme?: DefaultNDSThemeType;
+const GlobalStyles = styled.div<{
   locale?: string;
-};
-
-const GlobalStyles = styled.div(({ theme, locale }: GlobalStylesProps): CSSObject => {
+}>(({ theme, locale }) => {
   const fontFamily = locale === "zh_CN" ? theme.fonts.sc : theme.fonts.base;
   return {
     color: theme.colors.black,
diff --git a/src/NDSProvider/ModalStyleOverride.tsx b/src/NDSProvider/ModalStyleOverride.tsx
index 9830827e7..c780a6621 100644
--- a/src/NDSProvider/ModalStyleOverride.tsx
+++ b/src/NDSProvider/ModalStyleOverride.tsx
@@ -1,7 +1,6 @@
 import { createGlobalStyle } from "styled-components";
-import { GlobalStylesProps } from "./GlobalStyles";
 
-const ModalStyleOverride = createGlobalStyle(({ theme, locale }: GlobalStylesProps) => {
+const ModalStyleOverride = createGlobalStyle<{ locale?: string }>(({ theme, locale }) => {
   const fontFamily = locale === "zh_CN" ? theme.fonts.sc : theme.fonts.base;
   return {
     ".ReactModal__Content, [data-reach-dialog-content]": {
diff --git a/src/Radio/RadioGroup.tsx b/src/Radio/RadioGroup.tsx
index f91881525..bd8ae8145 100644
--- a/src/Radio/RadioGroup.tsx
+++ b/src/Radio/RadioGroup.tsx
@@ -1,5 +1,5 @@
-import React, { useContext } from "react";
-import { CSSObject, ThemeContext, useTheme } from "styled-components";
+import React, { CSSProperties, useContext } from "react";
+import { ThemeContext, useTheme } from "styled-components";
 import { HelpText, RequirementText } from "../FieldLabel";
 import { InlineValidation } from "../Validation";
 import { Fieldset } from "../Form";
@@ -50,7 +50,7 @@ export default function RadioGroup({
   );
 }
 
-const labelTextStyles = (theme: DefaultNDSThemeType): CSSObject => ({
+const labelTextStyles = (theme: DefaultNDSThemeType): CSSProperties => ({
   fontSize: theme.fontSizes.small,
   fontWeight: Number(theme.fontWeights.bold),
   lineHeight: theme.lineHeights.smallTextBase,
diff --git a/src/Select/SelectOption.tsx b/src/Select/SelectOption.tsx
index 92de11d58..6deb355ef 100644
--- a/src/Select/SelectOption.tsx
+++ b/src/Select/SelectOption.tsx
@@ -3,8 +3,8 @@ import styled from "styled-components";
 import { components, OptionProps } from "react-windowed-select";
 import { typography } from "styled-system";
 import { subPx } from "../utils";
+import { variant } from "../StyledProps";
 import { ComponentVariant, useComponentVariant } from "../NDSProvider/ComponentVariantContext";
-import { stylesForVariant } from "./customReactSelectStyles";
 
 type SelectOptionProps = {
   isSelected: boolean;
@@ -33,12 +33,11 @@ export const StyledOption = styled.div<SelectOptionProps>(
       },
     },
   }),
-  ({ theme, variant }) =>
-    stylesForVariant(
-      {
+  ({ theme }) =>
+    variant({
+      variants: {
         touch: {
           div: {
-            // padding: subPx(theme.space.x2),
             padding: subPx(theme.space.x1),
           },
         },
@@ -48,8 +47,7 @@ export const StyledOption = styled.div<SelectOptionProps>(
           },
         },
       },
-      variant
-    )
+    })
 );
 
 interface CustomOptionProps extends OptionProps {
diff --git a/src/Select/customReactSelectStyles.tsx b/src/Select/customReactSelectStyles.tsx
index 7bf63e91d..885acaa59 100644
--- a/src/Select/customReactSelectStyles.tsx
+++ b/src/Select/customReactSelectStyles.tsx
@@ -1,5 +1,4 @@
 import { transparentize } from "polished";
-import type { CSSObject } from "styled-components";
 import type { GroupBase, MenuPlacement, StylesConfig } from "react-select";
 import type { CSSProperties } from "react";
 import type { DefaultNDSThemeType } from "../theme";
@@ -74,7 +73,7 @@ export function getMenuBorderRadius({
 }
 
 type VariantConfig = {
-  [key in ComponentVariant]?: CSSObject;
+  [key in ComponentVariant]?: CSSProperties;
 };
 
 export function stylesForVariant(config: VariantConfig, variant: ComponentVariant = "desktop") {
diff --git a/src/Toggle/ToggleButton.tsx b/src/Toggle/ToggleButton.tsx
index 3f4858861..12e83492d 100644
--- a/src/Toggle/ToggleButton.tsx
+++ b/src/Toggle/ToggleButton.tsx
@@ -105,21 +105,19 @@ const Slider: React.FC<React.PropsWithChildren<SliderProps>> = ({ disabled, chil
   );
 };
 
-const ToggleInput = styled.input(
-  ({ disabled, theme }: ToggleInputProps): CSSObject => ({
-    width: "1px",
-    height: "1px",
-    opacity: 0,
-    position: "absolute",
-    [`&:checked + .slider}`]: {
-      backgroundColor: disabled ? theme.colors.grey : theme.colors.darkBlue,
-    },
-    [`&:focus + .slider`]: {
-      transform: disabled ? null : `scale(${animationConfig.scale})`,
-      boxShadow: disabled ? undefined : theme.shadows.focus,
-    },
-  })
-);
+const ToggleInput = styled.input<ToggleButtonProps>(({ disabled, theme }) => ({
+  width: "1px",
+  height: "1px",
+  opacity: 0,
+  position: "absolute",
+  [`&:checked + .slider}`]: {
+    backgroundColor: disabled ? theme.colors.grey : theme.colors.darkBlue,
+  },
+  [`&:focus + .slider`]: {
+    transform: disabled ? null : `scale(${animationConfig.scale})`,
+    boxShadow: disabled ? undefined : theme.shadows.focus,
+  },
+}));
 
 const ToggleButton = React.forwardRef<React.Ref<HTMLInputElement>, ToggleButtonProps>((props, ref) => {
   const { disabled, defaultToggled, toggled } = props;
diff --git a/src/Tooltip/TooltipContainer.tsx b/src/Tooltip/TooltipContainer.tsx
index 5b957d8cd..5e9d388bc 100644
--- a/src/Tooltip/TooltipContainer.tsx
+++ b/src/Tooltip/TooltipContainer.tsx
@@ -50,7 +50,7 @@ const getTooltipMargin = (placement) => {
   }
 };
 
-const TooltipContainer = styled(Box)(({ theme, dataPlacement, open, position }: TooltipContainerProps): any => ({
+const TooltipContainer = styled(Box)<TooltipContainerProps>(({ theme, dataPlacement, open, position }) => ({
   color: tooltipStyles(theme).textColor,
   display: "flex",
   flexDirection: "column",
diff --git a/src/TopBar/TopBar.tsx b/src/TopBar/TopBar.tsx
index 0dc3385e8..84c0e83a0 100644
--- a/src/TopBar/TopBar.tsx
+++ b/src/TopBar/TopBar.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { BackLink } from "./components/BackLink";
 import { Menu } from "./components/Menu";
 import { MenuItem } from "./components/MenuItem";
+import { MenuItemLink } from "./components/MenuItemLink";
 import { PageTitle } from "./components/PageTitle";
 import { Header, Navigation, NavigationItemsList } from "./TopBar.styled";
 
@@ -25,4 +26,5 @@ export const TopBar = {
   BackLink,
   Menu,
   MenuItem,
+  MenuItemLink,
 };
diff --git a/src/TopBar/components/MenuItem.tsx b/src/TopBar/components/MenuItem.tsx
index 456d3a550..0722d09ec 100644
--- a/src/TopBar/components/MenuItem.tsx
+++ b/src/TopBar/components/MenuItem.tsx
@@ -1,12 +1,5 @@
-import { IconName } from "@nulogy/icons";
-import { motion } from "framer-motion";
-import React, { ComponentProps } from "react";
-import { Flex } from "../../Flex";
-import { Icon } from "../../Icon";
-import { Text } from "../../Type";
-import { StyledMenuItem, TileLink } from "../TopBar.styled";
-
-const MotionText = motion(Text);
+import React from "react";
+import { StyledMenuItem } from "../TopBar.styled";
 
 const fadeInVariants = {
   hidden: {
@@ -31,13 +24,7 @@ const fadeInVariants = {
   },
 };
 
-interface MenuItemProps extends ComponentProps<typeof TileLink> {
-  title: string;
-  description?: string;
-  icon: IconName;
-}
-
-export function MenuItem({ description, title, icon, ...props }: MenuItemProps) {
+export function MenuItem({ children }: React.PropsWithChildren<{}>) {
   return (
     <StyledMenuItem
       data-testid="topbar-menu-item"
@@ -46,17 +33,7 @@ export function MenuItem({ description, title, icon, ...props }: MenuItemProps)
       exit="hidden"
       variants={fadeInVariants}
     >
-      <TileLink {...props}>
-        <Icon icon={icon} size="x3" />
-        <Flex flexDirection="column" justifyContent="center">
-          <MotionText fontWeight="medium" fontSize="md" lineHeight="base">
-            {title}
-          </MotionText>
-          <MotionText fontSize="xs">{description}</MotionText>
-        </Flex>
-      </TileLink>
+      {children}
     </StyledMenuItem>
   );
 }
-
-export type MenuItems = MenuItemProps[];
diff --git a/src/TopBar/stories/TopBar.backButton.story.tsx b/src/TopBar/stories/TopBar.backButton.story.tsx
index fd00058d3..6726d35b8 100644
--- a/src/TopBar/stories/TopBar.backButton.story.tsx
+++ b/src/TopBar/stories/TopBar.backButton.story.tsx
@@ -50,7 +50,9 @@ export const WithACustomMaxWidth = () => (
     <TopBar.PageTitle>Cycle count #3992</TopBar.PageTitle>
     <TopBar.Menu>
       {menuItems.map((props) => (
-        <TopBar.MenuItem key={props.title} {...props} />
+        <TopBar.MenuItem key={props.title}>
+          <TopBar.MenuItemLink {...props} />
+        </TopBar.MenuItem>
       ))}
     </TopBar.Menu>
   </TopBar.Root>
@@ -59,13 +61,15 @@ export const WithACustomMaxWidth = () => (
 export const WithARouterLink = () => (
   <BrowserRouter>
     <TopBar.Root>
-      <TopBar.BackLink as={Link} to="/cycle-counts">
+      <Link component={TopBar.BackLink} to="/cycle-counts">
         Cycle counts
-      </TopBar.BackLink>
+      </Link>
       <TopBar.PageTitle>Cycle count #3992</TopBar.PageTitle>
       <TopBar.Menu>
         {menuItems.map((props) => (
-          <TopBar.MenuItem key={props.title} {...props} />
+          <TopBar.MenuItem key={props.title}>
+            <TopBar.MenuItemLink {...props} />
+          </TopBar.MenuItem>
         ))}
       </TopBar.Menu>
     </TopBar.Root>
diff --git a/src/TopBar/stories/TopBar.menu.story.tsx b/src/TopBar/stories/TopBar.menu.story.tsx
index 927e4bba0..aa077acff 100644
--- a/src/TopBar/stories/TopBar.menu.story.tsx
+++ b/src/TopBar/stories/TopBar.menu.story.tsx
@@ -29,7 +29,9 @@ export const withDefaultOpenMenu = () => (
     <TopBar.PageTitle>Cycle count #3992</TopBar.PageTitle>
     <TopBar.Menu defaultOpened>
       {menuItems.map((props) => (
-        <TopBar.MenuItem key={props.title} {...props} />
+        <TopBar.MenuItem key={props.title}>
+          <TopBar.MenuItemLink {...props} />
+        </TopBar.MenuItem>
       ))}
     </TopBar.Menu>
   </TopBar.Root>
@@ -41,7 +43,9 @@ export const WithOneMenuItem = () => (
     <TopBar.PageTitle>Cycle count #3992</TopBar.PageTitle>
     <TopBar.Menu defaultOpened>
       {menuItems.slice(0, 1).map((props) => (
-        <TopBar.MenuItem key={props.title} {...props} />
+        <TopBar.MenuItem key={props.title}>
+          <TopBar.MenuItemLink {...props} />
+        </TopBar.MenuItem>
       ))}
     </TopBar.Menu>
   </TopBar.Root>
@@ -53,7 +57,9 @@ export const WithTwoItems = () => (
     <TopBar.PageTitle>Cycle count #3992</TopBar.PageTitle>
     <TopBar.Menu defaultOpened>
       {menuItems.slice(0, 2).map((props) => (
-        <TopBar.MenuItem key={props.title} {...props} />
+        <TopBar.MenuItem key={props.title}>
+          <TopBar.MenuItemLink {...props} />
+        </TopBar.MenuItem>
       ))}
     </TopBar.Menu>
   </TopBar.Root>
@@ -65,22 +71,33 @@ export const WithThreeItems = () => (
     <TopBar.PageTitle>Cycle count #3992</TopBar.PageTitle>
     <TopBar.Menu defaultOpened>
       {menuItems.slice(0, 3).map((props) => (
-        <TopBar.MenuItem key={props.title} {...props} />
+        <TopBar.MenuItem key={props.title}>
+          <TopBar.MenuItemLink {...props} />
+        </TopBar.MenuItem>
       ))}
     </TopBar.Menu>
   </TopBar.Root>
 );
 
-export const WithRouterLinks = () => (
-  <TopBar.Root>
-    <TopBar.BackLink href="#">Cycle counts</TopBar.BackLink>
-    <TopBar.PageTitle>Cycle count #3992</TopBar.PageTitle>
-    <TopBar.Menu defaultOpened>
-      <BrowserRouter>
-        {[{ ...menuItems[0], as: Link, to: "/home" }].map((props) => (
-          <TopBar.MenuItem key={props.title} {...props} />
-        ))}
-      </BrowserRouter>
-    </TopBar.Menu>
-  </TopBar.Root>
-);
+export const WithRouterLinks = () => {
+  const routerMenuItems = menuItems.map(({ href, ...item }) => ({
+    ...item,
+    to: href,
+  }));
+
+  return (
+    <TopBar.Root>
+      <TopBar.BackLink href="#">Cycle counts</TopBar.BackLink>
+      <TopBar.PageTitle>Cycle count #3992</TopBar.PageTitle>
+      <TopBar.Menu defaultOpened>
+        <BrowserRouter basename="/">
+          {routerMenuItems.map((item) => (
+            <TopBar.MenuItem key={item.title}>
+              <Link component={TopBar.MenuItemLink} {...item} />
+            </TopBar.MenuItem>
+          ))}
+        </BrowserRouter>
+      </TopBar.Menu>
+    </TopBar.Root>
+  );
+};
diff --git a/src/TopBar/stories/TopBar.story.tsx b/src/TopBar/stories/TopBar.story.tsx
index 79e22adbc..e9bb97585 100644
--- a/src/TopBar/stories/TopBar.story.tsx
+++ b/src/TopBar/stories/TopBar.story.tsx
@@ -29,8 +29,10 @@ export const Default = () => (
     <TopBar.BackLink href="/cycle-counts">Cycle counts</TopBar.BackLink>
     <TopBar.PageTitle>Cycle count #3992</TopBar.PageTitle>
     <TopBar.Menu>
-      {menuItems.map((props, i) => (
-        <TopBar.MenuItem key={props.title} order={i} {...props} />
+      {menuItems.map((props) => (
+        <TopBar.MenuItem key={props.title}>
+          <TopBar.MenuItemLink {...props} />
+        </TopBar.MenuItem>
       ))}
     </TopBar.Menu>
   </TopBar.Root>
@@ -41,8 +43,10 @@ export const WithALongTitle = () => (
     <TopBar.BackLink href="/cycle-counts">Previous page title</TopBar.BackLink>
     <TopBar.PageTitle>A long title that can not fit on smaller screens</TopBar.PageTitle>
     <TopBar.Menu>
-      {menuItems.map((props, i) => (
-        <TopBar.MenuItem key={props.title} order={i} {...props} />
+      {menuItems.map((props) => (
+        <TopBar.MenuItem key={props.title}>
+          <TopBar.MenuItemLink {...props} />
+        </TopBar.MenuItem>
       ))}
     </TopBar.Menu>
   </TopBar.Root>
@@ -56,7 +60,9 @@ export const WithAnApplicationFrame = () => (
         <TopBar.PageTitle>Cycle count #3992</TopBar.PageTitle>
         <TopBar.Menu>
           {menuItems.map((props) => (
-            <TopBar.MenuItem key={props.title} {...props} />
+            <TopBar.MenuItem key={props.title}>
+              <TopBar.MenuItemLink {...props} />
+            </TopBar.MenuItem>
           ))}
         </TopBar.Menu>
       </TopBar.Root>
diff --git a/src/TopBar/stories/fixtures.tsx b/src/TopBar/stories/fixtures.tsx
index de1e15671..03a72d479 100644
--- a/src/TopBar/stories/fixtures.tsx
+++ b/src/TopBar/stories/fixtures.tsx
@@ -1,6 +1,4 @@
-import { MenuItems } from "../components/MenuItem";
-
-export const menuItems: MenuItems = [
+export const menuItems = [
   {
     title: "Home",
     description: "Go to the home page",
diff --git a/src/hooks/useMediaQuery/useMediaQuery.ts b/src/hooks/useMediaQuery/useMediaQuery.ts
index 2aab3f162..9edb8661f 100644
--- a/src/hooks/useMediaQuery/useMediaQuery.ts
+++ b/src/hooks/useMediaQuery/useMediaQuery.ts
@@ -1,12 +1,12 @@
-import { useCallback, useEffect, useState } from "react";
-import { useTheme } from "styled-components";
+import { ThemeContext } from "styled-components";
+import React, { useCallback, useEffect, useState } from "react";
 import { Breakpoints } from "../../theme";
 
 type Query = keyof Breakpoints | (string & {});
 
 function useMediaQuery(q: Query): boolean {
   const isUnsupported = typeof window === "undefined" || typeof window.matchMedia === "undefined";
-  const theme = useTheme();
+  const theme = React.useContext(ThemeContext);
   const query = theme?.breakpoints?.[q] ? `(min-width: ${theme.breakpoints[q]})` : q;
 
   const getMatches = useCallback(
diff --git a/src/index.ts b/src/index.ts
index 671e9e494..e20e1b3eb 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -81,6 +81,7 @@ export { Toast } from "./Toast";
 export { toast, ToastContainer } from "./ToastContainer";
 export { Toggle } from "./Toggle";
 export { Tooltip } from "./Tooltip";
+export { TopBar } from "./TopBar";
 export { TruncatedText } from "./TruncatedText";
 export { Heading1, Heading2, Heading3, Heading4, Text } from "./Type";
 export type { TextProps } from "./Type";
diff --git a/src/theme/NDSThemeProvider.tsx b/src/theme/NDSThemeProvider.tsx
index 397b3d90f..2f7b090f7 100644
--- a/src/theme/NDSThemeProvider.tsx
+++ b/src/theme/NDSThemeProvider.tsx
@@ -1,5 +1,6 @@
 import React from "react";
-import { ThemeProvider } from "styled-components";
+import isPropValid from "@emotion/is-prop-valid";
+import { StyleSheetManager, ThemeProvider } from "styled-components";
 import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
 import { useNDSTheme } from "./useNDSTheme";
 
@@ -7,5 +8,16 @@ export default function NDSThemeProvider({ customTheme, children }) {
   const variant = useComponentVariant();
   const theme = useNDSTheme(variant, customTheme);
 
-  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+  return (
+    <StyleSheetManager enableVendorPrefixes shouldForwardProp={shouldForwardProp}>
+      <ThemeProvider theme={theme}>{children}</ThemeProvider>
+    </StyleSheetManager>
+  );
+}
+
+function shouldForwardProp(propName, target) {
+  if (typeof target === "string") {
+    return isPropValid(propName);
+  }
+  return true;
 }
diff --git a/src/utils/story/dashed.tsx b/src/utils/story/dashed.tsx
index 5d87a1a74..890fbd2e9 100644
--- a/src/utils/story/dashed.tsx
+++ b/src/utils/story/dashed.tsx
@@ -1,18 +1,15 @@
-import styled, { StyledComponent } from "styled-components";
+import styled from "styled-components";
 import { ComponentType } from "react";
-import { DefaultNDSThemeType } from "../../theme";
 
 /**
  * A styled utility that adds a dashed border around a component
  * to highlight its boundaries. To be used in Storybook exclusively.
  * Do not export for production.
  */
-export const dashed = <P extends object>(
-  component: ComponentType<P>
-): StyledComponent<ComponentType<P>, DefaultNDSThemeType> =>
+export const dashed = <P extends Record<string, unknown>>(component: ComponentType<P>) =>
   styled(component)`
-    border-radius: 0.375rem;
-    border-width: 2px;
+    border-radius: ${(props) => props.theme.radii.large};
+    border-width: ${(props) => props.theme.space.x0_25};
     border-style: dashed;
     border-color: ${({ theme }) => theme.colors.lightBlue};
   `;
diff --git a/yarn.lock b/yarn.lock
index 867e0a036..545451b5a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -52,14 +52,6 @@
   dependencies:
     "@babel/highlight" "^7.16.0"
 
-"@babel/code-frame@^7.22.13":
-  version "7.22.13"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.22.13.tgz#e3c1c099402598483b7a8c46a721d1038803755e"
-  integrity sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==
-  dependencies:
-    "@babel/highlight" "^7.22.13"
-    chalk "^2.4.2"
-
 "@babel/code-frame@^7.25.7":
   version "7.25.7"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.25.7.tgz#438f2c524071531d643c6f0188e1e28f130cebc7"
@@ -283,16 +275,6 @@
     "@jridgewell/trace-mapping" "^0.3.17"
     jsesc "^2.5.1"
 
-"@babel/generator@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.3.tgz#86e6e83d95903fbe7613f448613b8b319f330a8e"
-  integrity sha512-keeZWAV4LU3tW0qRi19HRpabC/ilM0HRBBzf9/k8FFiG4KVpiv0FIy4hHfLfFQZNhziCTPTmd59zoyv6DNISzg==
-  dependencies:
-    "@babel/types" "^7.23.3"
-    "@jridgewell/gen-mapping" "^0.3.2"
-    "@jridgewell/trace-mapping" "^0.3.17"
-    jsesc "^2.5.1"
-
 "@babel/generator@^7.25.7":
   version "7.25.7"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.25.7.tgz#de86acbeb975a3e11ee92dd52223e6b03b479c56"
@@ -310,13 +292,6 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
-"@babel/helper-annotate-as-pure@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz#e7f06737b197d580a01edf75d97e2c8be99d3882"
-  integrity sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==
-  dependencies:
-    "@babel/types" "^7.22.5"
-
 "@babel/helper-annotate-as-pure@^7.25.9":
   version "7.25.9"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.9.tgz#d8eac4d2dc0d7b6e11fa6e535332e0d3184f06b4"
@@ -509,11 +484,6 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.21.5.tgz#c769afefd41d171836f7cb63e295bedf689d48ba"
   integrity sha512-IYl4gZ3ETsWocUWgsFZLM5i1BYx9SoemminVEXadgLBa9TdeorzgLKm8wWLA6J1N/kT3Kch8XIk1laNzYoHKvQ==
 
-"@babel/helper-environment-visitor@^7.22.20":
-  version "7.22.20"
-  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz#96159db61d34a29dba454c959f5ae4a649ba9167"
-  integrity sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==
-
 "@babel/helper-explode-assignable-expression@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.14.5.tgz#8aa72e708205c7bb643e45c73b4386cdf2a1f645"
@@ -547,14 +517,6 @@
     "@babel/template" "^7.20.7"
     "@babel/types" "^7.21.0"
 
-"@babel/helper-function-name@^7.23.0":
-  version "7.23.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz#1f9a3cdbd5b2698a670c30d2735f9af95ed52759"
-  integrity sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==
-  dependencies:
-    "@babel/template" "^7.22.15"
-    "@babel/types" "^7.23.0"
-
 "@babel/helper-get-function-arity@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz#25fbfa579b0937eee1f3b805ece4ce398c431815"
@@ -590,13 +552,6 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
-"@babel/helper-hoist-variables@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz#c01a007dac05c085914e8fb652b339db50d823bb"
-  integrity sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==
-  dependencies:
-    "@babel/types" "^7.22.5"
-
 "@babel/helper-member-expression-to-functions@^7.14.5":
   version "7.14.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.7.tgz#97e56244beb94211fe277bd818e3a329c66f7970"
@@ -626,7 +581,7 @@
     "@babel/traverse" "^7.25.9"
     "@babel/types" "^7.25.9"
 
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.14.5", "@babel/helper-module-imports@^7.16.0", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.18.6", "@babel/helper-module-imports@^7.21.4", "@babel/helper-module-imports@^7.22.15", "@babel/helper-module-imports@^7.22.5":
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.14.5", "@babel/helper-module-imports@^7.16.0", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.18.6", "@babel/helper-module-imports@^7.21.4", "@babel/helper-module-imports@^7.22.15":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz#16146307acdc40cc00c3b2c647713076464bdbf0"
   integrity sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==
@@ -899,13 +854,6 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
-"@babel/helper-split-export-declaration@^7.22.6":
-  version "7.22.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz#322c61b7310c0997fe4c323955667f18fcefb91c"
-  integrity sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==
-  dependencies:
-    "@babel/types" "^7.22.5"
-
 "@babel/helper-string-parser@^7.19.4":
   version "7.19.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz#38d3acb654b4701a9b77fb0615a96f775c3a9e63"
@@ -1075,15 +1023,6 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/highlight@^7.22.13":
-  version "7.22.20"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.22.20.tgz#4ca92b71d80554b01427815e06f2df965b9c1f54"
-  integrity sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.22.20"
-    chalk "^2.4.2"
-    js-tokens "^4.0.0"
-
 "@babel/highlight@^7.25.7":
   version "7.25.7"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.25.7.tgz#20383b5f442aa606e7b5e3043b0b1aafe9f37de5"
@@ -1131,11 +1070,6 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.8.tgz#642af7d0333eab9c0ad70b14ac5e76dbde7bfdf8"
   integrity sha512-6zavDGdzG3gUqAdWvlLFfk+36RilI+Pwyuuh7HItyeScCWP3k6i8vKclAQ0bM/0y/Kz/xiwvxhMv9MgTJP5gmA==
 
-"@babel/parser@^7.22.15", "@babel/parser@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.3.tgz#0ce0be31a4ca4f1884b5786057cadcb6c3be58f9"
-  integrity sha512-uVsWNvlVsIninV2prNz/3lHCb+5CJ+e+IUBfbjToAHODtfGYLfCFuY4AU7TskI+dAKk+njsPiBjq1gKTvZOBaw==
-
 "@babel/parser@^7.23.9", "@babel/parser@^7.25.7", "@babel/parser@^7.25.8":
   version "7.25.8"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.8.tgz#f6aaf38e80c36129460c1657c0762db584c9d5e2"
@@ -1530,13 +1464,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-syntax-jsx@^7.22.5":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.23.3.tgz#8f2e4f8a9b5f9aa16067e142c1ac9cd9f810f473"
-  integrity sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
-
 "@babel/plugin-syntax-jsx@^7.25.9":
   version "7.25.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.25.9.tgz#a34313a178ea56f1951599b929c1ceacee719290"
@@ -2849,15 +2776,6 @@
     "@babel/parser" "^7.20.7"
     "@babel/types" "^7.20.7"
 
-"@babel/template@^7.22.15":
-  version "7.22.15"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
-  integrity sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==
-  dependencies:
-    "@babel/code-frame" "^7.22.13"
-    "@babel/parser" "^7.22.15"
-    "@babel/types" "^7.22.15"
-
 "@babel/template@^7.25.7":
   version "7.25.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.7.tgz#27f69ce382855d915b14ab0fe5fb4cbf88fa0769"
@@ -2964,22 +2882,6 @@
     debug "^4.3.1"
     globals "^11.1.0"
 
-"@babel/traverse@^7.4.5":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.3.tgz#26ee5f252e725aa7aca3474aa5b324eaf7908b5b"
-  integrity sha512-+K0yF1/9yR0oHdE0StHuEj3uTPzwwbrLGfNOndVJVV2TqA5+j3oljJUb4nmB954FLGjNem976+B+eDuLIjesiQ==
-  dependencies:
-    "@babel/code-frame" "^7.22.13"
-    "@babel/generator" "^7.23.3"
-    "@babel/helper-environment-visitor" "^7.22.20"
-    "@babel/helper-function-name" "^7.23.0"
-    "@babel/helper-hoist-variables" "^7.22.5"
-    "@babel/helper-split-export-declaration" "^7.22.6"
-    "@babel/parser" "^7.23.3"
-    "@babel/types" "^7.23.3"
-    debug "^4.1.0"
-    globals "^11.1.0"
-
 "@babel/types@^7.0.0", "@babel/types@^7.12.11", "@babel/types@^7.12.7", "@babel/types@^7.14.5", "@babel/types@^7.3.0", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.14.5.tgz#3bb997ba829a2104cedb20689c4a5b8121d383ff"
@@ -3014,7 +2916,7 @@
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.22.15", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.3":
+"@babel/types@^7.22.15":
   version "7.23.3"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.3.tgz#d5ea892c07f2ec371ac704420f4dcdb07b5f9598"
   integrity sha512-OZnvoH2l8PK5eUvEcUyCt/sXgr/h+UWpVuBbOljwcrAgUl6lpchoQ++PHGyQy1AtYnVA6CEq3y5xeEI10brpXw==
@@ -3176,13 +3078,20 @@
   dependencies:
     "@emotion/memoize" "0.7.4"
 
-"@emotion/is-prop-valid@^1.1.0":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc"
-  integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==
+"@emotion/is-prop-valid@1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz#d4175076679c6a26faa92b03bb786f9e52612337"
+  integrity sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==
   dependencies:
     "@emotion/memoize" "^0.8.1"
 
+"@emotion/is-prop-valid@^1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz#8d5cf1132f836d7adbe42cf0b49df7816fc88240"
+  integrity sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==
+  dependencies:
+    "@emotion/memoize" "^0.9.0"
+
 "@emotion/memoize@0.7.4":
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
@@ -3193,6 +3102,11 @@
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17"
   integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==
 
+"@emotion/memoize@^0.9.0":
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.9.0.tgz#745969d649977776b43fc7648c556aaa462b4102"
+  integrity sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==
+
 "@emotion/react@^11.8.1":
   version "11.11.1"
   resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.1.tgz#b2c36afac95b184f73b08da8c214fdf861fa4157"
@@ -3275,17 +3189,17 @@
     "@emotion/styled-base" "^10.0.27"
     babel-plugin-emotion "^10.0.27"
 
-"@emotion/stylis@0.8.5", "@emotion/stylis@^0.8.4":
+"@emotion/stylis@0.8.5":
   version "0.8.5"
   resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
   integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
 
-"@emotion/unitless@0.7.5", "@emotion/unitless@^0.7.4":
+"@emotion/unitless@0.7.5":
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
 
-"@emotion/unitless@^0.8.1":
+"@emotion/unitless@0.8.1", "@emotion/unitless@^0.8.1":
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3"
   integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==
@@ -6437,13 +6351,17 @@
   dependencies:
     "@types/unist" "*"
 
-"@types/hoist-non-react-statics@*":
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
-  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+"@types/history@*":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@types/history/-/history-5.0.0.tgz#29f919f0c8e302763798118f45b19cab4a886f14"
+  integrity sha512-hy8b7Y1J8OGe6LbAjj3xniQrj3v6lsivCcrmf4TzSgPzLkhIeKgc5IZnT7ReIqmEuodjfO8EYAuoFvIrHi/+jQ==
   dependencies:
-    "@types/react" "*"
-    hoist-non-react-statics "^3.3.0"
+    history "*"
+
+"@types/history@^4.7.11":
+  version "4.7.11"
+  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64"
+  integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==
 
 "@types/html-minifier-terser@^5.0.0":
   version "5.1.2"
@@ -6713,6 +6631,23 @@
   dependencies:
     "@types/react" "^17"
 
+"@types/react-router-dom@5.3.0":
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.0.tgz#8c4e0aa0ccaf638ba965829ad29a10ac3cbe2212"
+  integrity sha512-svUzpEpKDwK8nmfV2vpZNSsiijFNKY8+gUqGqvGGOVrXvX58k1JIJubZa5igkwacbq/0umphO5SsQn/BQsnKpw==
+  dependencies:
+    "@types/history" "*"
+    "@types/react" "*"
+    "@types/react-router" "*"
+
+"@types/react-router@*":
+  version "5.1.20"
+  resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.20.tgz#88eccaa122a82405ef3efbcaaa5dcdd9f021387c"
+  integrity sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==
+  dependencies:
+    "@types/history" "^4.7.11"
+    "@types/react" "*"
+
 "@types/react-syntax-highlighter@11.0.4":
   version "11.0.4"
   resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.4.tgz#d86d17697db62f98046874f62fdb3e53a0bbc4cd"
@@ -6833,15 +6768,6 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
   integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
 
-"@types/styled-components@^5.1.9":
-  version "5.1.10"
-  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.10.tgz#b509da9d62be8a02cefd88ec6b820f417429a503"
-  integrity sha512-g3ZfWlTiyXktASIhcfCicZtqB/fFFnq0a7kPYYxKXNggdrohp8m/9bMmmt3zDvHj2gplWDGCkZByfFnEXfbSWg==
-  dependencies:
-    "@types/hoist-non-react-statics" "*"
-    "@types/react" "*"
-    csstype "^3.0.2"
-
 "@types/styled-system@5.1.22":
   version "5.1.22"
   resolved "https://registry.yarnpkg.com/@types/styled-system/-/styled-system-5.1.22.tgz#508499f4c68bb86dde3454693e92f5771edf177f"
@@ -6849,6 +6775,11 @@
   dependencies:
     csstype "^3.0.2"
 
+"@types/stylis@4.2.5":
+  version "4.2.5"
+  resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.2.5.tgz#1daa6456f40959d06157698a653a9ab0a70281df"
+  integrity sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==
+
 "@types/tapable@^1", "@types/tapable@^1.0.5":
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.8.tgz#b94a4391c85666c7b73299fd3ad79d4faa435310"
@@ -8496,17 +8427,6 @@ babel-plugin-styled-components@2.1.3:
     lodash "^4.17.21"
     picomatch "^2.3.1"
 
-"babel-plugin-styled-components@>= 1.12.0":
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz#9a1f37c7f32ef927b4b008b529feb4a2c82b1092"
-  integrity sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.22.5"
-    "@babel/helper-module-imports" "^7.22.5"
-    "@babel/plugin-syntax-jsx" "^7.22.5"
-    lodash "^4.17.21"
-    picomatch "^2.3.1"
-
 babel-plugin-syntax-flow@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
@@ -10536,7 +10456,7 @@ css-select@^4.1.3:
     domutils "^2.6.0"
     nth-check "^2.0.0"
 
-css-to-react-native@^3.0.0:
+css-to-react-native@3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.2.0.tgz#cdd8099f71024e149e4f6fe17a7d46ecd55f1e32"
   integrity sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==
@@ -10596,6 +10516,11 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
+csstype@3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+
 csstype@^2.5.7:
   version "2.6.17"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.17.tgz#4cf30eb87e1d1a005d8b6510f95292413f6a1c0e"
@@ -13738,6 +13663,13 @@ highlight.js@^10.1.1, highlight.js@~10.7.0:
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
   integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==
 
+history@*:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/history/-/history-5.3.0.tgz#1548abaa245ba47992f063a0783db91ef201c73b"
+  integrity sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==
+  dependencies:
+    "@babel/runtime" "^7.7.6"
+
 history@^4.9.0:
   version "4.10.1"
   resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
@@ -13759,7 +13691,7 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -17286,6 +17218,11 @@ nanoid@^3.1.23:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.23.tgz#f744086ce7c2bc47ee0a8472574d5c78e4183a81"
   integrity sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==
 
+nanoid@^3.3.7:
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.8.tgz#b1be3030bee36aaff18bacb375e5cce521684baf"
+  integrity sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==
+
 nanomatch@^1.2.1, nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -19001,6 +18938,15 @@ postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
 
+postcss@8.4.38:
+  version "8.4.38"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.38.tgz#b387d533baf2054288e337066d81c6bee9db9e0e"
+  integrity sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.0.0"
+    source-map-js "^1.2.0"
+
 postcss@^5.2.17:
   version "5.2.18"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.18.tgz#badfa1497d46244f6390f58b319830d9107853c5"
@@ -21158,7 +21104,7 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
-shallowequal@^1.1.0:
+shallowequal@1.1.0, shallowequal@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
   integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
@@ -21414,6 +21360,11 @@ source-map-js@^0.6.2:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
   integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==
 
+source-map-js@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
+
 source-map-loader@^1.0.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/source-map-loader/-/source-map-loader-1.1.3.tgz#7dbc2fe7ea09d3e43c51fd9fc478b7f016c1f820"
@@ -22021,21 +21972,20 @@ style-value-types@4.1.1:
     hey-listen "^1.0.8"
     tslib "^1.10.0"
 
-styled-components@^5.3.11:
-  version "5.3.11"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.11.tgz#9fda7bf1108e39bf3f3e612fcc18170dedcd57a8"
-  integrity sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/traverse" "^7.4.5"
-    "@emotion/is-prop-valid" "^1.1.0"
-    "@emotion/stylis" "^0.8.4"
-    "@emotion/unitless" "^0.7.4"
-    babel-plugin-styled-components ">= 1.12.0"
-    css-to-react-native "^3.0.0"
-    hoist-non-react-statics "^3.0.0"
-    shallowequal "^1.1.0"
-    supports-color "^5.5.0"
+styled-components@^6.0.0:
+  version "6.1.13"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.1.13.tgz#2d777750b773b31469bd79df754a32479e9f475e"
+  integrity sha512-M0+N2xSnAtwcVAQeFEsGWFFxXDftHUD7XrKla06QbpUMmbmtFBMMTcKWvFXtWxuD5qQkB8iU5gk6QASlx2ZRMw==
+  dependencies:
+    "@emotion/is-prop-valid" "1.2.2"
+    "@emotion/unitless" "0.8.1"
+    "@types/stylis" "4.2.5"
+    css-to-react-native "3.2.0"
+    csstype "3.1.3"
+    postcss "8.4.38"
+    shallowequal "1.1.0"
+    stylis "4.3.2"
+    tslib "2.6.2"
 
 styled-system@^5.1.4:
   version "5.1.5"
@@ -22061,6 +22011,16 @@ stylis@4.2.0:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
   integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
 
+stylis@4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.2.tgz#8f76b70777dd53eb669c6f58c997bf0a9972e444"
+  integrity sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==
+
+stylis@^4.0.0:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.4.tgz#ca5c6c4a35c4784e4e93a2a24dc4e9fa075250a4"
+  integrity sha512-osIBl6BGUmSfDkyH2mB7EFvCJntXDrLhKjHTRj/rK6xLH0yuPrHULDRQzKokSOD4VoorhtKpfcfW1GAntu8now==
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -22073,7 +22033,7 @@ supports-color@^3.2.3:
   dependencies:
     has-flag "^1.0.0"
 
-supports-color@^5.3.0, supports-color@^5.5.0:
+supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
@@ -22670,6 +22630,11 @@ tslib@2.1.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a"
   integrity sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==
 
+tslib@2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
+  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+
 tslib@^1.10.0, tslib@^1.13.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"