diff --git a/centrifuge-app/package.json b/centrifuge-app/package.json
index e20cbc141b..a089fb2fa9 100644
--- a/centrifuge-app/package.json
+++ b/centrifuge-app/package.json
@@ -47,7 +47,7 @@
     "react-router": "6",
     "react-router-dom": "6",
     "recharts": "2.6.2",
-    "styled-components": "^5.3.5",
+    "styled-components": "6.1.12",
     "styled-system": "^5.1.5",
     "typescript": "~5.3.3",
     "vitest": "^1.2.1"
diff --git a/centrifuge-app/src/components/TextLink.tsx b/centrifuge-app/src/components/TextLink.tsx
index 820df816f9..b326046cd1 100644
--- a/centrifuge-app/src/components/TextLink.tsx
+++ b/centrifuge-app/src/components/TextLink.tsx
@@ -31,10 +31,9 @@ export const TextLink = styled.span`
     }
   }
 `
+export const RouterTextLink = (props: any) => <TextLink as={Link} {...props} />
+export const ButtonTextLink = (props: any) => <TextLink as="button" {...props} />
 
-export const RouterTextLink = TextLink.withComponent(Link)
-
-export const ButtonTextLink = TextLink.withComponent('button')
 ButtonTextLink.defaultProps = {
   type: 'button',
 }
diff --git a/centrifuge-app/src/pages/IssuerPool/Investors/LiquidityPools.tsx b/centrifuge-app/src/pages/IssuerPool/Investors/LiquidityPools.tsx
index c3bef66568..1bb0bae16c 100644
--- a/centrifuge-app/src/pages/IssuerPool/Investors/LiquidityPools.tsx
+++ b/centrifuge-app/src/pages/IssuerPool/Investors/LiquidityPools.tsx
@@ -175,7 +175,7 @@ function PoolDomain({ poolId, domain, refetch }: { poolId: string; domain: Domai
           </ConnectionGuard>
         ) : (
           pool.tranches.map((tranche) => (
-            <a href={explorer.address(domain.trancheTokens[tranche.id])} target="_blank">
+            <a href={explorer.address(domain.trancheTokens[tranche.id])} target="_blank" rel="noreferrer">
               <Button variant="secondary" small style={{ width: '100%' }}>
                 <Shelf gap={1}>
                   <span>View {tranche.currency.symbol} token</span>
diff --git a/centrifuge-react/package.json b/centrifuge-react/package.json
index 8e8a01ec4e..85b79c4217 100644
--- a/centrifuge-react/package.json
+++ b/centrifuge-react/package.json
@@ -35,7 +35,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "standard-version": "^9.3.2",
-    "styled-components": "^5.3.6",
+    "styled-components": "6.1.12",
     "typescript": "~5.3.3"
   },
   "peerDependencies": {
diff --git a/centrifuge-react/src/components/WalletProvider/AccountButton.tsx b/centrifuge-react/src/components/WalletProvider/AccountButton.tsx
index 34b47a82c0..162a8bc822 100644
--- a/centrifuge-react/src/components/WalletProvider/AccountButton.tsx
+++ b/centrifuge-react/src/components/WalletProvider/AccountButton.tsx
@@ -22,6 +22,10 @@ type AccountButtonProps = {
   multisig?: ComputedMultisig
 }
 
+const StyledText = styled(Text)`
+  display: block;
+`
+
 const Root = styled(Shelf)<{ selected: boolean }>`
   cursor: pointer;
   border: none;
@@ -138,7 +142,7 @@ export function AccountIcon({ id, theme = 'polkadot' }: { id: string; theme?: Ic
 export function AccountName({ account, proxies }: { account: WalletAccount; proxies?: Proxy[] }) {
   const utils = useCentrifugeUtils()
   return (
-    <Text as="span" variant="body2" fontWeight={300} style={{ display: 'block' }}>
+    <StyledText as="span" variant="body2" fontWeight={300}>
       {account.name && (
         <>
           <Text as="span" fontWeight={500}>
@@ -154,6 +158,6 @@ export function AccountName({ account, proxies }: { account: WalletAccount; prox
           {truncateAddress(utils.formatAddress(p.delegator))}{' '}
         </span>
       ))}
-    </Text>
+    </StyledText>
   )
 }
diff --git a/fabric/package.json b/fabric/package.json
index f816f8db89..fd359f5b27 100644
--- a/fabric/package.json
+++ b/fabric/package.json
@@ -43,7 +43,7 @@
     "react-dom": "^18.2.0",
     "standard-version": "^9.3.2",
     "storybook": "^7.6.10",
-    "styled-components": "^5.3.6",
+    "styled-components": "6.1.12",
     "typescript": "~5.3.3"
   },
   "peerDependencies": {
diff --git a/fabric/src/components/Accordion/index.tsx b/fabric/src/components/Accordion/index.tsx
index a54e3ee653..d44ca9edae 100644
--- a/fabric/src/components/Accordion/index.tsx
+++ b/fabric/src/components/Accordion/index.tsx
@@ -8,6 +8,10 @@ import { Text } from '../Text'
 export type AccordionProps = BoxProps & {
   items: { title: React.ReactNode; body: React.ReactNode }[]
 }
+interface AccordionEntryProps extends Omit<BoxProps, 'title'> {
+  title: React.ReactNode
+  body: React.ReactNode
+}
 
 const Root = styled(Box)`
   list-style: none;
@@ -33,7 +37,6 @@ const Toggle = styled(Shelf)`
 export function Accordion({ items, ...boxProps }: AccordionProps) {
   return (
     <Root
-      as="ul"
       pl={0}
       aria-label="Accordion Control Group Buttons"
       borderRadius="card"
@@ -50,12 +53,12 @@ export function Accordion({ items, ...boxProps }: AccordionProps) {
   )
 }
 
-function AccordionEntry({ title, body, ...boxProps }: AccordionProps['items'][number] & BoxProps) {
+function AccordionEntry({ title, body, ...boxProps }: AccordionEntryProps) {
   const [open, setOpen] = React.useState(false)
   const id = React.useId()
 
   return (
-    <Box as="li" borderStyle="solid" borderWidth={0} borderColor="borderPrimary" {...boxProps}>
+    <Box as="li" borderStyle="solid" borderWidth={0} borderColor="borderPrimary" {...(boxProps as any)}>
       <Toggle
         as="button"
         id={`accordion-control-${id}`}
diff --git a/fabric/src/components/Banner/index.tsx b/fabric/src/components/Banner/index.tsx
index 38d0b3b600..bc0a8ce6d7 100644
--- a/fabric/src/components/Banner/index.tsx
+++ b/fabric/src/components/Banner/index.tsx
@@ -1,6 +1,6 @@
 import { useModal, useOverlay } from '@react-aria/overlays'
 import * as React from 'react'
-import { useTheme } from 'styled-components'
+import styled, { useTheme } from 'styled-components'
 import { IconX } from '../../icon'
 import { Button } from '../Button'
 import { Shelf } from '../Shelf'
@@ -14,6 +14,10 @@ type BannerProps = {
   children?: React.ReactNode
 }
 
+const StyledText = styled(Text)`
+  padding-right: 12px;
+`
+
 export function Banner({ children, title, ...props }: BannerProps) {
   const theme = useTheme()
   const ref = React.useRef<HTMLDivElement>(null)
@@ -54,9 +58,9 @@ export function Banner({ children, title, ...props }: BannerProps) {
             style={{ marginLeft: 'auto' }}
           />
         </Shelf>
-        <Text variant="body1" color={theme.colors.textInverted} style={{ paddingRight: '12px' }}>
+        <StyledText variant="body1" color={theme.colors.textInverted}>
           {children}
-        </Text>
+        </StyledText>
       </Stack>
     </Shelf>
   ) : null
diff --git a/fabric/src/components/Box/index.ts b/fabric/src/components/Box/index.ts
index 58aa9e93b9..b4e9a53897 100644
--- a/fabric/src/components/Box/index.ts
+++ b/fabric/src/components/Box/index.ts
@@ -69,7 +69,6 @@ interface SystemProps
     PositionProps,
     BleedProps,
     AspectProps {}
-
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface StyledBoxProps extends SystemProps {}
 
diff --git a/fabric/src/components/Button/WalletButton.tsx b/fabric/src/components/Button/WalletButton.tsx
index 565bbdbcc9..f2608bc24d 100644
--- a/fabric/src/components/Button/WalletButton.tsx
+++ b/fabric/src/components/Button/WalletButton.tsx
@@ -8,6 +8,20 @@ import { Shelf } from '../Shelf'
 import { Text } from '../Text'
 import { VisualButton, VisualButtonProps } from './VisualButton'
 
+const StyledInteractiveText = styled(Text)`
+  overflow: hidden;
+  text-overflow: ellipsis;
+`
+
+const StyledText = styled(Text)`
+  marginleft: auto;
+`
+
+const StyledBodyText = styled(Text)<{ margin?: string | number }>`
+  margin-left: auto;
+  ${({ margin }) => margin && `margin: ${margin};`}
+`
+
 export type WalletButtonProps = Omit<
   VisualButtonProps & React.ComponentPropsWithoutRef<'button'>,
   'variant' | 'iconRight' | 'type' | 'children' | 'icon'
@@ -72,33 +86,25 @@ export function WalletButton({
         {address && alias ? (
           <Box position="relative" flex="1 1 auto">
             <Shelf position="absolute" top="0" bottom="0" left="0" width="100%" m="auto" height="30px">
-              <Text
-                fontSize={small ? 14 : 16}
-                color="textInteractive"
-                fontWeight={500}
-                style={{
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                }}
-              >
+              <StyledInteractiveText fontSize={small ? 14 : 16} color="textInteractive" fontWeight={500}>
                 {alias}
-              </Text>
+              </StyledInteractiveText>
             </Shelf>
           </Box>
         ) : (
-          <Text
+          <StyledBodyText
+            margin={address ? 0 : 'auto'}
             fontSize={small ? 14 : 16}
             color="textInteractive"
             fontWeight={500}
-            style={{ margin: address ? 0 : 'auto' }}
           >
             {displayAddress ? truncate(displayAddress) : connectLabel}
-          </Text>
+          </StyledBodyText>
         )}
         {address && balance && (
-          <Text variant="body3" color="textInteractive" style={{ marginLeft: 'auto' }}>
+          <StyledText variant="body3" color="textInteractive">
             {balance}
-          </Text>
+          </StyledText>
         )}
       </VisualButton>
     </StyledButton>
diff --git a/fabric/src/components/CurrencyInput/index.tsx b/fabric/src/components/CurrencyInput/index.tsx
index 0e85ff87d0..8a45efe915 100644
--- a/fabric/src/components/CurrencyInput/index.tsx
+++ b/fabric/src/components/CurrencyInput/index.tsx
@@ -13,7 +13,7 @@ export type CurrencyInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement
     decimals?: number
   }
 
-const StyledMaxButton = styled(Box)`
+const StyledMaxButton = styled(Box).attrs({ as: 'button' })`
   padding: 0 8px;
   border: 0;
   border-radius: 12px;
@@ -29,7 +29,7 @@ const StyledMaxButton = styled(Box)`
   &:focus-visible {
     box-shadow: ${({ theme }) => theme.shadows.buttonPrimary};
   }
-`.withComponent('button')
+`
 
 StyledMaxButton.defaultProps = {
   type: 'button',
diff --git a/fabric/src/components/Divider/index.tsx b/fabric/src/components/Divider/index.tsx
index 87cb8227c0..f020cbde22 100644
--- a/fabric/src/components/Divider/index.tsx
+++ b/fabric/src/components/Divider/index.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components'
-import { Box } from '../Box'
+import { Box, BoxProps } from '../Box'
 
-const Hr = Box.withComponent('hr')
+const Hr = styled(Box).attrs<BoxProps>({ as: 'hr' })``
 
 export const Divider = styled(Hr)`
   margin: 0;
diff --git a/fabric/src/components/ImageUpload/index.tsx b/fabric/src/components/ImageUpload/index.tsx
index 0aa1edb918..07ea64400e 100644
--- a/fabric/src/components/ImageUpload/index.tsx
+++ b/fabric/src/components/ImageUpload/index.tsx
@@ -70,6 +70,13 @@ const Container = styled(Grid)<{ $disabled?: boolean; $active: boolean }>`
   }
 `
 
+const StyledText = styled(Text)`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  direction: rtl;
+`
+
 export type ImageUploadProps = Omit<FileUploadProps, 'file' | 'height'> & {
   file?: File | null
   requirements?: string
@@ -227,18 +234,9 @@ export function ImageUpload({
             </Stack>
             <Stack p={2} gridArea="unit" justifySelf="stretch" style={{ visibility: fileUrl ? 'visible' : 'hidden' }}>
               <Shelf px={1} pb={1} justifyContent="space-between">
-                <Text
-                  variant="body1"
-                  color={disabled ? 'textDisabled' : 'textPrimary'}
-                  style={{
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap',
-                    direction: 'rtl',
-                  }}
-                >
+                <StyledText variant="body1" color={disabled ? 'textDisabled' : 'textPrimary'}>
                   {curFile && (typeof curFile === 'string' ? curFile : curFile.name)}
-                </Text>
+                </StyledText>
                 <Flex display="flex" zIndex="3" bleedY={2} bleedX={2}>
                   {!disabled && <Button variant="tertiary" onClick={handleClear} icon={IconX} disabled={disabled} />}
                 </Flex>
diff --git a/fabric/src/components/InputUnit/index.tsx b/fabric/src/components/InputUnit/index.tsx
index 0de1fd4e19..b5cdff098c 100644
--- a/fabric/src/components/InputUnit/index.tsx
+++ b/fabric/src/components/InputUnit/index.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import styled from 'styled-components'
 import { Stack } from '../Stack'
 import { Text } from '../Text'
 
@@ -24,17 +25,9 @@ export function InputUnit({ id, label, secondaryLabel, errorMessage, inputElemen
     <IdContext.Provider value={id}>
       <Stack gap={1}>
         {label && <InputLabel disabled={disabled}>{label}</InputLabel>}
-        <Text
-          variant="body2"
-          color={disabled ? 'textDisabled' : 'textPrimary'}
-          style={{
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-          }}
-        >
+        <StyledText variant="body2" color={disabled ? 'textDisabled' : 'textPrimary'}>
           {inputElement}
-        </Text>
+        </StyledText>
         {secondaryLabel && (
           <Text variant="body3" color={disabled ? 'textDisabled' : 'textSecondary'}>
             {secondaryLabel}
@@ -48,7 +41,12 @@ export function InputUnit({ id, label, secondaryLabel, errorMessage, inputElemen
 
 export function InputLabel({ children, disabled }: { children: React.ReactNode; disabled?: boolean }) {
   return (
-    <Text variant="label2" color={disabled ? 'textDisabled' : 'textSecondary'} as="label" htmlFor={useContextId()}>
+    <Text
+      variant="label2"
+      color={disabled ? 'textDisabled' : 'textSecondary'}
+      as="label"
+      htmlFor={useContextId() as string}
+    >
       {children}
     </Text>
   )
@@ -61,3 +59,9 @@ export function InputErrorMessage({ children }: { children: React.ReactNode }) {
     </Text>
   )
 }
+
+const StyledText = styled(Text)`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
diff --git a/fabric/src/components/Pagination/Pagination.tsx b/fabric/src/components/Pagination/Pagination.tsx
index fdbd35eb92..76eed3d83d 100644
--- a/fabric/src/components/Pagination/Pagination.tsx
+++ b/fabric/src/components/Pagination/Pagination.tsx
@@ -8,6 +8,10 @@ import { Text } from '../Text'
 import { usePaginationContext } from './PaginationContainer'
 import { PaginationState } from './usePagination'
 
+const StyledText = styled(Text)`
+  user-select: none;
+`
+
 const StyledButton = styled.button<{
   $active?: boolean
 }>(
@@ -96,11 +100,7 @@ export function Pagination({ pagination }: { pagination?: PaginationState }) {
           <IconChevronLeft />
         </Flex>
       </StyledButton>
-      {firstShown > 1 && (
-        <Text variant="interactive1" style={{ userSelect: 'none' }}>
-          …
-        </Text>
-      )}
+      {firstShown > 1 && <StyledText variant="interactive1">…</StyledText>}
       {pages.map((n) => (
         <StyledButton
           key={`pagr-nr-${n}`}
@@ -113,11 +113,7 @@ export function Pagination({ pagination }: { pagination?: PaginationState }) {
           </Text>
         </StyledButton>
       ))}
-      {lastShown < pageCount && (
-        <Text variant="interactive1" style={{ userSelect: 'none' }}>
-          …
-        </Text>
-      )}
+      {lastShown < pageCount && <StyledText variant="interactive1">…</StyledText>}
       <StyledButton onClick={() => goToNext()} disabled={!canNextPage} aria-label="next page">
         <Flex bleedX={1} bleedY={1}>
           <IconChevronRight />
diff --git a/fabric/src/components/RadioButton/index.tsx b/fabric/src/components/RadioButton/index.tsx
index d9f016b3b3..d316024805 100644
--- a/fabric/src/components/RadioButton/index.tsx
+++ b/fabric/src/components/RadioButton/index.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import styled from 'styled-components'
+import { DefaultTheme } from 'styled-components/dist/types'
 import { Flex } from '../Flex'
 import { Shelf } from '../Shelf'
 import { Stack } from '../Stack'
@@ -8,7 +9,7 @@ import { Text } from '../Text'
 export type RadioButtonProps = React.InputHTMLAttributes<HTMLInputElement> & {
   label?: string
   errorMessage?: string
-  textStyle?: string
+  textStyle?: keyof DefaultTheme['typography']
 }
 
 export function RadioButton({ label, errorMessage, textStyle, ...radioProps }: RadioButtonProps) {
diff --git a/fabric/src/components/StatusChip/index.tsx b/fabric/src/components/StatusChip/index.tsx
index 76b6af9722..bbbd061d6b 100644
--- a/fabric/src/components/StatusChip/index.tsx
+++ b/fabric/src/components/StatusChip/index.tsx
@@ -27,10 +27,10 @@ const Chip = styled(Text)((props) =>
   css({
     display: 'inline-block',
     px: 1,
-    bg: `${props.backgroundColor}Bg`,
+    bg: `${String(props.backgroundColor)}Bg`,
     borderRadius: 'chip',
     whiteSpace: 'nowrap',
-    color: `${props.color}`,
+    color: `${String(props.color)}`,
   })
 )
 
diff --git a/fabric/src/components/Tabs/index.tsx b/fabric/src/components/Tabs/index.tsx
index acff0a4379..c4b7c045f7 100644
--- a/fabric/src/components/Tabs/index.tsx
+++ b/fabric/src/components/Tabs/index.tsx
@@ -8,7 +8,7 @@ import { Text } from '../Text'
 export type TabsProps = {
   selectedIndex: number
   onChange?: (index: number) => void
-  children: (React.ReactElement<TabsItemProps> | string | boolean | null | undefined)[]
+  children: (React.ReactElement<TabsItemPrivateProps> | string | boolean | null | undefined)[]
 }
 
 export function Tabs({ selectedIndex, onChange, children }: TabsProps) {
diff --git a/fabric/src/components/Text/index.tsx b/fabric/src/components/Text/index.tsx
index c6fa0c8b46..640b4243e9 100644
--- a/fabric/src/components/Text/index.tsx
+++ b/fabric/src/components/Text/index.tsx
@@ -3,15 +3,16 @@ import * as CSS from 'csstype'
 import * as React from 'react'
 import styled, { DefaultTheme, useTheme } from 'styled-components'
 import {
-  color,
   ColorProps,
-  compose,
   ResponsiveValue,
+  SpaceProps,
+  TypographyProps as TypographySystemProps,
+  color,
+  compose,
+  space,
   system,
   typography as typographySystem,
-  TypographyProps as TypographySystemProps,
 } from 'styled-system'
-import { PropsOf } from '../../utils/types'
 
 interface TypographyProps {
   textTransform?: ResponsiveValue<CSS.Property.TextTransform>
@@ -31,13 +32,15 @@ const typography = system({
   },
 })
 
-interface SystemProps extends TypographySystemProps, ColorProps, TypographyProps {}
+interface SystemProps extends TypographySystemProps, ColorProps, SpaceProps, TypographyProps {}
 
-interface StyledTextProps extends SystemProps {}
+interface StyledTextProps extends SystemProps {
+  as?: keyof JSX.IntrinsicElements | React.ComponentType<any>
+}
 
 const StyledText = styled('span').withConfig({
   shouldForwardProp: (prop) => shouldForwardProp(prop),
-})<StyledTextProps>({ margin: 0 }, compose(typographySystem, typography, color))
+})<StyledTextProps>({ margin: 0 }, compose(typographySystem, typography, color, space))
 
 const TextContext = React.createContext(false)
 
@@ -45,12 +48,17 @@ function useTextContext(): React.ContextType<typeof TextContext> {
   return React.useContext(TextContext)
 }
 
-type TextProps = PropsOf<typeof StyledText> & {
+type AnchorProps = React.ComponentPropsWithoutRef<'a'>
+
+interface TextProps extends StyledTextProps, Omit<AnchorProps, keyof StyledTextProps> {
   variant?: keyof DefaultTheme['typography']
   textOverflow?: 'ellipsis'
+  as?: keyof JSX.IntrinsicElements | React.ComponentType<any>
+  children?: React.ReactNode
+  htmlFor?: string
 }
 
-const Text = React.forwardRef<HTMLDivElement, TextProps>((props, ref) => {
+const Text = React.forwardRef<HTMLDivElement | HTMLSpanElement | HTMLAnchorElement, TextProps>((props, ref) => {
   const isInText = useTextContext()
   const theme = useTheme()
 
@@ -60,7 +68,6 @@ const Text = React.forwardRef<HTMLDivElement, TextProps>((props, ref) => {
   }
 
   const {
-    // variant,
     children,
     as = isInText ? 'span' : 'div',
     color = isInText ? 'inherit' : 'textPrimary',
@@ -68,6 +75,7 @@ const Text = React.forwardRef<HTMLDivElement, TextProps>((props, ref) => {
     fontWeight = isInText ? 'inherit' : 400,
     lineHeight = isInText ? 'inherit' : 1.5,
     fontFamily = isInText ? 'inherit' : 'standard',
+    margin,
     ...rest
   } = textProps
 
@@ -77,13 +85,13 @@ const Text = React.forwardRef<HTMLDivElement, TextProps>((props, ref) => {
     <TextContext.Provider value>
       <StyledText
         as={as}
+        ref={ref as React.Ref<HTMLDivElement | HTMLSpanElement | HTMLAnchorElement>}
         color={color}
         fontSize={fontSize}
         fontWeight={fontWeight}
         lineHeight={lineHeight}
         fontFamily={fontFamily}
         style={{ ...overflow }}
-        ref={ref}
         {...rest}
       >
         {children}
@@ -92,4 +100,4 @@ const Text = React.forwardRef<HTMLDivElement, TextProps>((props, ref) => {
   )
 })
 
-export { Text, TextProps, useTextContext, TextContext }
+export { Text, TextContext, TextProps, useTextContext }
diff --git a/fabric/src/components/TextWithPlaceholder/TextWithPlaceholder.stories.tsx b/fabric/src/components/TextWithPlaceholder/TextWithPlaceholder.stories.tsx
index 30d38eab1c..ec4fe9cd29 100644
--- a/fabric/src/components/TextWithPlaceholder/TextWithPlaceholder.stories.tsx
+++ b/fabric/src/components/TextWithPlaceholder/TextWithPlaceholder.stories.tsx
@@ -1,11 +1,15 @@
 import { Meta, StoryFn } from '@storybook/react'
 import * as React from 'react'
-import { useTheme } from 'styled-components'
+import styled, { useTheme } from 'styled-components'
 import { TextWithPlaceholder } from '.'
 import { TextVariantName } from '../../theme'
 import { Stack } from '../Stack'
 import { Text } from '../Text'
 
+const StyledTextWithPlaceholder = styled(TextWithPlaceholder)`
+  max-width: 70ch;
+`
+
 export default {
   title: 'Components/TextWithPlaceholder',
   component: TextWithPlaceholder,
@@ -19,12 +23,12 @@ const ParagraphTemplate: TextWithPlaceholderStory = (args) => (
       <TextWithPlaceholder variant="heading2" isLoading={args.isLoading}>
         Body 1
       </TextWithPlaceholder>
-      <TextWithPlaceholder variant="body1" as="p" {...args} style={{ maxWidth: '70ch' }}>
+      <StyledTextWithPlaceholder variant="body1" as="p" {...args}>
         Lorem ipsum dolor sit amet <Text variant="emphasized">consectetur adipisicing</Text> elit. Corporis, ex?
         Nesciunt consequatur consectetur magnam delectus distinctio ipsa{' '}
         <Text variant="emphasized">tempore maiores</Text> pariatur ipsum necessitatibus harum ea, labore quas impedit id
         iure perferendis.
-      </TextWithPlaceholder>
+      </StyledTextWithPlaceholder>
     </Stack>
   </Stack>
 )
diff --git a/fabric/src/components/TextWithPlaceholder/index.tsx b/fabric/src/components/TextWithPlaceholder/index.tsx
index 5b9d312ded..d8e7454305 100644
--- a/fabric/src/components/TextWithPlaceholder/index.tsx
+++ b/fabric/src/components/TextWithPlaceholder/index.tsx
@@ -47,7 +47,12 @@ export function TextWithPlaceholder({
 }: TextWithPlaceholderProps) {
   const [rand] = React.useState(() => Math.random())
   return (
-    <Text {...textProps} textOverflow="ellipsis" textDecoration={isLoading ? 'none' : textProps.textDecoration}>
+    <Text
+      as="span"
+      {...textProps}
+      textOverflow="ellipsis"
+      textDecoration={isLoading ? 'none' : textProps.textDecoration}
+    >
       {isLoading ? (
         <LoadingWrapper $lines={maxLines} $isLoading={isLoading}>
           {Array.from({ length: words }, (_, i) => (
diff --git a/yarn.lock b/yarn.lock
index fd10b730ab..2df1a60314 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1775,7 +1775,7 @@ __metadata:
     react-router: 6
     react-router-dom: 6
     recharts: 2.6.2
-    styled-components: ^5.3.5
+    styled-components: 6.1.12
     styled-system: ^5.1.5
     typescript: ~5.3.3
     vite: ^5
@@ -1864,7 +1864,7 @@ __metadata:
     react-query: ^3.39.1
     rxjs: ^7.4.0
     standard-version: ^9.3.2
-    styled-components: ^5.3.6
+    styled-components: 6.1.12
     typescript: ~5.3.3
     util: ^0.12.5
   peerDependencies:
@@ -1912,7 +1912,7 @@ __metadata:
     react-dom: ^18.2.0
     standard-version: ^9.3.2
     storybook: ^7.6.10
-    styled-components: ^5.3.6
+    styled-components: 6.1.12
     styled-system: ^5.1.5
     typescript: ~5.3.3
   peerDependencies:
@@ -2151,6 +2151,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/is-prop-valid@npm:1.2.2, @emotion/is-prop-valid@npm:^1.1.0":
+  version: 1.2.2
+  resolution: "@emotion/is-prop-valid@npm:1.2.2"
+  dependencies:
+    "@emotion/memoize": ^0.8.1
+  checksum: 61f6b128ea62b9f76b47955057d5d86fcbe2a6989d2cd1e583daac592901a950475a37d049b9f7a7c6aa8758a33b408735db759fdedfd1f629df0f85ab60ea25
+  languageName: node
+  linkType: hard
+
 "@emotion/is-prop-valid@npm:^0.8.1":
   version: 0.8.8
   resolution: "@emotion/is-prop-valid@npm:0.8.8"
@@ -2160,15 +2169,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/is-prop-valid@npm:^1.1.0":
-  version: 1.2.2
-  resolution: "@emotion/is-prop-valid@npm:1.2.2"
-  dependencies:
-    "@emotion/memoize": ^0.8.1
-  checksum: 61f6b128ea62b9f76b47955057d5d86fcbe2a6989d2cd1e583daac592901a950475a37d049b9f7a7c6aa8758a33b408735db759fdedfd1f629df0f85ab60ea25
-  languageName: node
-  linkType: hard
-
 "@emotion/memoize@npm:0.7.4":
   version: 0.7.4
   resolution: "@emotion/memoize@npm:0.7.4"
@@ -2197,6 +2197,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/unitless@npm:0.8.1":
+  version: 0.8.1
+  resolution: "@emotion/unitless@npm:0.8.1"
+  checksum: 385e21d184d27853bb350999471f00e1429fa4e83182f46cd2c164985999d9b46d558dc8b9cc89975cb337831ce50c31ac2f33b15502e85c299892e67e7b4a88
+  languageName: node
+  linkType: hard
+
 "@emotion/unitless@npm:^0.7.4":
   version: 0.7.5
   resolution: "@emotion/unitless@npm:0.7.5"
@@ -9797,6 +9804,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/stylis@npm:4.2.5":
+  version: 4.2.5
+  resolution: "@types/stylis@npm:4.2.5"
+  checksum: 24f91719db5569979e9e2f197e050ef82e1fd72474e8dc45bca38d48ee56481eae0f0d4a7ac172540d7774b45a2a78d901a4c6d07bba77a33dbccff464ea3edf
+  languageName: node
+  linkType: hard
+
 "@types/tapable@npm:^1, @types/tapable@npm:^1.0.5":
   version: 1.0.12
   resolution: "@types/tapable@npm:1.0.12"
@@ -13815,7 +13829,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-to-react-native@npm:^3.0.0":
+"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:
@@ -13906,7 +13920,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csstype@npm:^3.0.2, csstype@npm:^3.0.9":
+"csstype@npm:3.1.3, csstype@npm:^3.0.2, csstype@npm:^3.0.9":
   version: 3.1.3
   resolution: "csstype@npm:3.1.3"
   checksum: 8db785cc92d259102725b3c694ec0c823f5619a84741b5c7991b8ad135dfaa66093038a1cc63e03361a6cd28d122be48f2106ae72334e067dd619a51f49eddf7
@@ -23415,6 +23429,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss@npm:8.4.38":
+  version: 8.4.38
+  resolution: "postcss@npm:8.4.38"
+  dependencies:
+    nanoid: ^3.3.7
+    picocolors: ^1.0.0
+    source-map-js: ^1.2.0
+  checksum: 649f9e60a763ca4b5a7bbec446a069edf07f057f6d780a5a0070576b841538d1ecf7dd888f2fbfd1f76200e26c969e405aeeae66332e6927dbdc8bdcb90b9451
+  languageName: node
+  linkType: hard
+
 "postcss@npm:^8.4.35":
   version: 8.4.35
   resolution: "postcss@npm:8.4.35"
@@ -25350,7 +25375,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"shallowequal@npm:^1.1.0":
+"shallowequal@npm:1.1.0, shallowequal@npm:^1.1.0":
   version: 1.1.0
   resolution: "shallowequal@npm:1.1.0"
   checksum: f4c1de0837f106d2dbbfd5d0720a5d059d1c66b42b580965c8f06bb1db684be8783538b684092648c981294bf817869f743a066538771dbecb293df78f765e00
@@ -25597,6 +25622,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"source-map-js@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "source-map-js@npm:1.2.0"
+  checksum: 791a43306d9223792e84293b00458bf102a8946e7188f3db0e4e22d8d530b5f80a4ce468eb5ec0bf585443ad55ebbd630bf379c98db0b1f317fd902500217f97
+  languageName: node
+  linkType: hard
+
 "source-map-support@npm:^0.5.16, source-map-support@npm:^0.5.17, source-map-support@npm:^0.5.6, source-map-support@npm:~0.5.12, source-map-support@npm:~0.5.20":
   version: 0.5.21
   resolution: "source-map-support@npm:0.5.21"
@@ -26244,7 +26276,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"styled-components@npm:^5.3.5, styled-components@npm:^5.3.6, styled-components@npm:^5.3.9":
+"styled-components@npm:6.1.12":
+  version: 6.1.12
+  resolution: "styled-components@npm:6.1.12"
+  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
+  peerDependencies:
+    react: ">= 16.8.0"
+    react-dom: ">= 16.8.0"
+  checksum: ce88075297588ee3910e00d9f8dba09a2d31e6dd0b329d96a7c4afed3d6fddddf6cfb4a29e63b91d7a3137a9e774fafeaaf589237269ea6bd5240a838bdf93e9
+  languageName: node
+  linkType: hard
+
+"styled-components@npm:^5.3.6, styled-components@npm:^5.3.9":
   version: 5.3.11
   resolution: "styled-components@npm:5.3.11"
   dependencies:
@@ -26287,6 +26339,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stylis@npm:4.3.2":
+  version: 4.3.2
+  resolution: "stylis@npm:4.3.2"
+  checksum: 0faa8a97ff38369f47354376cd9f0def9bf12846da54c28c5987f64aaf67dcb6f00dce88a8632013bfb823b2c4d1d62a44f4ac20363a3505a7ab4e21b70179fc
+  languageName: node
+  linkType: hard
+
 "superstruct@npm:^1.0.3":
   version: 1.0.4
   resolution: "superstruct@npm:1.0.4"
@@ -26983,7 +27042,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.3.1, tslib@npm:^2.4.0, tslib@npm:^2.4.1, tslib@npm:^2.5.0, tslib@npm:^2.6.2":
+"tslib@npm:2.6.2, tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.3.1, tslib@npm:^2.4.0, tslib@npm:^2.4.1, tslib@npm:^2.5.0, tslib@npm:^2.6.2":
   version: 2.6.2
   resolution: "tslib@npm:2.6.2"
   checksum: 329ea56123005922f39642318e3d1f0f8265d1e7fcb92c633e0809521da75eeaca28d2cf96d7248229deb40e5c19adf408259f4b9640afd20d13aecc1430f3ad