diff --git a/code/addons/docs/src/blocks/components/DocsPage.tsx b/code/addons/docs/src/blocks/components/DocsPage.tsx
index 11e01c2c5765..72f17a246ab9 100644
--- a/code/addons/docs/src/blocks/components/DocsPage.tsx
+++ b/code/addons/docs/src/blocks/components/DocsPage.tsx
@@ -26,7 +26,8 @@ const toGlobalSelector = (element: string): string =>
 
 const breakpoint = 600;
 
-export const Title = styled.h1(withReset, ({ theme }) => ({
+export const Title = styled.h1(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
   color: theme.color.defaultText,
   fontSize: theme.typography.size.m3,
   fontWeight: theme.typography.weight.bold,
@@ -39,7 +40,8 @@ export const Title = styled.h1(withReset, ({ theme }) => ({
   },
 }));
 
-export const Subtitle = styled.h2(withReset, ({ theme }) => ({
+export const Subtitle = styled.h2(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
   fontWeight: theme.typography.weight.regular,
   fontSize: theme.typography.size.s3,
   lineHeight: '20px',
diff --git a/code/addons/docs/src/blocks/components/Title.tsx b/code/addons/docs/src/blocks/components/Title.tsx
index 7bfb0c71af63..16107d06aab7 100644
--- a/code/addons/docs/src/blocks/components/Title.tsx
+++ b/code/addons/docs/src/blocks/components/Title.tsx
@@ -1,10 +1,12 @@
 import { withReset } from 'storybook/internal/components';
 
+import type { CSSObject } from 'storybook/theming';
 import { styled } from 'storybook/theming';
 
 const breakpoint = 600;
 
-export const Title = styled.h1(withReset, ({ theme }) => ({
+export const Title = styled.h1(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
   color: theme.color.defaultText,
   fontSize: theme.typography.size.m3,
   fontWeight: theme.typography.weight.bold,
diff --git a/code/core/src/components/components/typography/elements/A.tsx b/code/core/src/components/components/typography/elements/A.tsx
index e91833da6cfc..27e59c64ac82 100644
--- a/code/core/src/components/components/typography/elements/A.tsx
+++ b/code/core/src/components/components/typography/elements/A.tsx
@@ -1,9 +1,11 @@
+import type { CSSObject } from 'storybook/theming';
 import { styled } from 'storybook/theming';
 
 import { withReset } from '../lib/common';
 import { Link } from './Link';
 
-export const A = styled(Link)(withReset, ({ theme }) => ({
+export const A = styled(Link)(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
   fontSize: 'inherit',
   lineHeight: '24px',
 
diff --git a/code/core/src/components/components/typography/elements/Blockquote.tsx b/code/core/src/components/components/typography/elements/Blockquote.tsx
index f0904b078c0a..b89736cc2ec1 100644
--- a/code/core/src/components/components/typography/elements/Blockquote.tsx
+++ b/code/core/src/components/components/typography/elements/Blockquote.tsx
@@ -1,8 +1,11 @@
+import type { CSSObject } from 'storybook/theming';
 import { styled } from 'storybook/theming';
 
 import { withMargin, withReset } from '../lib/common';
 
-export const Blockquote = styled.blockquote(withReset, withMargin, ({ theme }) => ({
+export const Blockquote = styled.blockquote(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
+  ...withMargin,
   borderLeft: `4px solid ${theme.color.medium}`,
   padding: '0 15px',
   color: theme.color.dark,
diff --git a/code/core/src/components/components/typography/elements/Code.tsx b/code/core/src/components/components/typography/elements/Code.tsx
index b59b22c98184..2c37b22fae01 100644
--- a/code/core/src/components/components/typography/elements/Code.tsx
+++ b/code/core/src/components/components/typography/elements/Code.tsx
@@ -1,6 +1,7 @@
 import type { ComponentProps } from 'react';
 import React, { Children } from 'react';
 
+import type { CSSObject } from 'storybook/theming';
 import { styled } from 'storybook/theming';
 
 import { SyntaxHighlighter } from '../../syntaxhighlighter/lazy-syntaxhighlighter';
@@ -10,20 +11,18 @@ import { isReactChildString } from '../lib/isReactChildString';
 
 const isInlineCodeRegex = /[\n\r]/g;
 
-const DefaultCodeBlock = styled.code(
-  ({ theme }) => ({
-    // from reset
-    fontFamily: theme.typography.fonts.mono,
-    WebkitFontSmoothing: 'antialiased',
-    MozOsxFontSmoothing: 'grayscale',
-    display: 'inline-block',
-    paddingLeft: 2,
-    paddingRight: 2,
-    verticalAlign: 'baseline',
-    color: 'inherit',
-  }),
-  codeCommon
-);
+const DefaultCodeBlock = styled.code(({ theme }) => ({
+  // from reset
+  fontFamily: theme.typography.fonts.mono,
+  WebkitFontSmoothing: 'antialiased',
+  MozOsxFontSmoothing: 'grayscale',
+  display: 'inline-block',
+  paddingLeft: 2,
+  paddingRight: 2,
+  verticalAlign: 'baseline',
+  color: 'inherit',
+  ...(codeCommon({ theme }) as CSSObject),
+}));
 
 const StyledSyntaxHighlighter = styled(SyntaxHighlighter)(({ theme }) => ({
   // DocBlocks-specific styling and overrides
diff --git a/code/core/src/components/components/typography/elements/DL.tsx b/code/core/src/components/components/typography/elements/DL.tsx
index a91991ca79fa..7f7128e792c3 100644
--- a/code/core/src/components/components/typography/elements/DL.tsx
+++ b/code/core/src/components/components/typography/elements/DL.tsx
@@ -1,8 +1,11 @@
+import type { CSSObject } from 'storybook/theming';
 import { styled } from 'storybook/theming';
 
 import { withMargin, withReset } from '../lib/common';
 
-export const DL = styled.dl(withReset, withMargin, {
+export const DL = styled.dl(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
+  ...withMargin,
   padding: 0,
   '& dt': {
     fontSize: '14px',
@@ -34,4 +37,4 @@ export const DL = styled.dl(withReset, withMargin, {
   '& dd > :last-child': {
     marginBottom: 0,
   },
-});
+}));
diff --git a/code/core/src/components/components/typography/elements/H1.tsx b/code/core/src/components/components/typography/elements/H1.tsx
index 83ff20ebf270..ec6130edfbc2 100644
--- a/code/core/src/components/components/typography/elements/H1.tsx
+++ b/code/core/src/components/components/typography/elements/H1.tsx
@@ -1,8 +1,11 @@
+import type { CSSObject } from 'storybook/theming';
 import { styled } from 'storybook/theming';
 
 import { headerCommon, withReset } from '../lib/common';
 
-export const H1 = styled.h1(withReset, headerCommon, ({ theme }) => ({
+export const H1 = styled.h1(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
+  ...(headerCommon({ theme }) as CSSObject),
   fontSize: `${theme.typography.size.l1}px`,
   fontWeight: theme.typography.weight.bold,
 }));
diff --git a/code/core/src/components/components/typography/elements/H2.tsx b/code/core/src/components/components/typography/elements/H2.tsx
index fe99631b7c01..21f48af7ae28 100644
--- a/code/core/src/components/components/typography/elements/H2.tsx
+++ b/code/core/src/components/components/typography/elements/H2.tsx
@@ -1,8 +1,11 @@
+import type { CSSObject } from 'storybook/theming';
 import { styled } from 'storybook/theming';
 
 import { headerCommon, withReset } from '../lib/common';
 
-export const H2 = styled.h2(withReset, headerCommon, ({ theme }) => ({
+export const H2 = styled.h2(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
+  ...(headerCommon({ theme }) as CSSObject),
   fontSize: `${theme.typography.size.m2}px`,
   paddingBottom: 4,
   borderBottom: `1px solid ${theme.appBorderColor}`,
diff --git a/code/core/src/components/components/typography/elements/H3.tsx b/code/core/src/components/components/typography/elements/H3.tsx
index 18e91649d968..255bbbe3a552 100644
--- a/code/core/src/components/components/typography/elements/H3.tsx
+++ b/code/core/src/components/components/typography/elements/H3.tsx
@@ -1,7 +1,10 @@
+import type { CSSObject } from 'storybook/theming';
 import { styled } from 'storybook/theming';
 
 import { headerCommon, withReset } from '../lib/common';
 
-export const H3 = styled.h3(withReset, headerCommon, ({ theme }) => ({
+export const H3 = styled.h3(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
+  ...(headerCommon({ theme }) as CSSObject),
   fontSize: `${theme.typography.size.m1}px`,
 }));
diff --git a/code/core/src/components/components/typography/elements/H4.tsx b/code/core/src/components/components/typography/elements/H4.tsx
index ab07e958e966..0734c8897d3a 100644
--- a/code/core/src/components/components/typography/elements/H4.tsx
+++ b/code/core/src/components/components/typography/elements/H4.tsx
@@ -1,7 +1,10 @@
+import type { CSSObject } from 'storybook/theming';
 import { styled } from 'storybook/theming';
 
 import { headerCommon, withReset } from '../lib/common';
 
-export const H4 = styled.h4(withReset, headerCommon, ({ theme }) => ({
+export const H4 = styled.h4(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
+  ...(headerCommon({ theme }) as CSSObject),
   fontSize: `${theme.typography.size.s3}px`,
 }));
diff --git a/code/core/src/components/components/typography/elements/H5.tsx b/code/core/src/components/components/typography/elements/H5.tsx
index 816deae8a5bd..71e6a8249cf6 100644
--- a/code/core/src/components/components/typography/elements/H5.tsx
+++ b/code/core/src/components/components/typography/elements/H5.tsx
@@ -1,7 +1,10 @@
+import type { CSSObject } from 'storybook/theming';
 import { styled } from 'storybook/theming';
 
 import { headerCommon, withReset } from '../lib/common';
 
-export const H5 = styled.h5(withReset, headerCommon, ({ theme }) => ({
+export const H5 = styled.h5(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
+  ...(headerCommon({ theme }) as CSSObject),
   fontSize: `${theme.typography.size.s2}px`,
 }));
diff --git a/code/core/src/components/components/typography/elements/H6.tsx b/code/core/src/components/components/typography/elements/H6.tsx
index 0a7ca673735a..39be66f7672a 100644
--- a/code/core/src/components/components/typography/elements/H6.tsx
+++ b/code/core/src/components/components/typography/elements/H6.tsx
@@ -1,8 +1,11 @@
+import type { CSSObject } from 'storybook/theming';
 import { styled } from 'storybook/theming';
 
 import { headerCommon, withReset } from '../lib/common';
 
-export const H6 = styled.h6(withReset, headerCommon, ({ theme }) => ({
+export const H6 = styled.h6(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
+  ...(headerCommon({ theme }) as CSSObject),
   fontSize: `${theme.typography.size.s2}px`,
   color: theme.color.dark,
 }));
diff --git a/code/core/src/components/components/typography/elements/LI.tsx b/code/core/src/components/components/typography/elements/LI.tsx
index 66465cf9df67..898d0d628940 100644
--- a/code/core/src/components/components/typography/elements/LI.tsx
+++ b/code/core/src/components/components/typography/elements/LI.tsx
@@ -3,7 +3,8 @@ import { styled } from 'storybook/theming';
 
 import { codeCommon, withReset } from '../lib/common';
 
-export const LI = styled.li(withReset, ({ theme }) => ({
+export const LI = styled.li(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
   fontSize: theme.typography.size.s2,
   color: theme.color.defaultText,
   lineHeight: '24px',
diff --git a/code/core/src/components/components/typography/elements/OL.tsx b/code/core/src/components/components/typography/elements/OL.tsx
index a68b38f52f9e..ac697965cb31 100644
--- a/code/core/src/components/components/typography/elements/OL.tsx
+++ b/code/core/src/components/components/typography/elements/OL.tsx
@@ -1,9 +1,9 @@
-import type { Interpolation } from 'storybook/theming';
+import type { CSSObject } from 'storybook/theming';
 import { styled } from 'storybook/theming';
 
 import { withMargin, withReset } from '../lib/common';
 
-const listCommon: Interpolation = {
+const listCommon = {
   paddingLeft: 30,
   '& :first-of-type': {
     marginTop: 0,
@@ -13,6 +13,9 @@ const listCommon: Interpolation = {
   },
 };
 
-export const OL = styled.ol(withReset, withMargin, listCommon, {
+export const OL = styled.ol(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
+  ...withMargin,
+  ...listCommon,
   listStyle: 'decimal',
-});
+}));
diff --git a/code/core/src/components/components/typography/elements/P.tsx b/code/core/src/components/components/typography/elements/P.tsx
index 57dd66bbbe55..4e4f0e6ebf43 100644
--- a/code/core/src/components/components/typography/elements/P.tsx
+++ b/code/core/src/components/components/typography/elements/P.tsx
@@ -3,7 +3,9 @@ import { styled } from 'storybook/theming';
 
 import { codeCommon, withMargin, withReset } from '../lib/common';
 
-export const P = styled.p(withReset, withMargin, ({ theme }) => ({
+export const P = styled.p(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
+  ...withMargin,
   fontSize: theme.typography.size.s2,
   lineHeight: '24px',
   color: theme.color.defaultText,
diff --git a/code/core/src/components/components/typography/elements/Pre.tsx b/code/core/src/components/components/typography/elements/Pre.tsx
index f08c986003c5..e308ab28b302 100644
--- a/code/core/src/components/components/typography/elements/Pre.tsx
+++ b/code/core/src/components/components/typography/elements/Pre.tsx
@@ -1,8 +1,11 @@
+import type { CSSObject } from 'storybook/theming';
 import { styled } from 'storybook/theming';
 
 import { withMargin, withReset } from '../lib/common';
 
-export const Pre = styled.pre(withReset, withMargin, ({ theme }) => ({
+export const Pre = styled.pre(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
+  ...withMargin,
   // reset
   fontFamily: theme.typography.fonts.mono,
   WebkitFontSmoothing: 'antialiased',
diff --git a/code/core/src/components/components/typography/elements/Span.tsx b/code/core/src/components/components/typography/elements/Span.tsx
index 836370e8f46b..6e9ebc0a537c 100644
--- a/code/core/src/components/components/typography/elements/Span.tsx
+++ b/code/core/src/components/components/typography/elements/Span.tsx
@@ -1,8 +1,10 @@
+import type { CSSObject } from 'storybook/theming';
 import { styled } from 'storybook/theming';
 
 import { withReset } from '../lib/common';
 
-export const Span = styled.span(withReset, ({ theme }) => ({
+export const Span = styled.span(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
   '&.frame': {
     display: 'block',
     overflow: 'hidden',
diff --git a/code/core/src/components/components/typography/elements/Table.tsx b/code/core/src/components/components/typography/elements/Table.tsx
index 349430b696be..87d510a24756 100644
--- a/code/core/src/components/components/typography/elements/Table.tsx
+++ b/code/core/src/components/components/typography/elements/Table.tsx
@@ -1,8 +1,11 @@
+import type { CSSObject } from 'storybook/theming';
 import { styled } from 'storybook/theming';
 
 import { withMargin, withReset } from '../lib/common';
 
-export const Table = styled.table(withReset, withMargin, ({ theme }) => ({
+export const Table = styled.table(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
+  ...withMargin,
   fontSize: theme.typography.size.s2,
   lineHeight: '24px',
   padding: 0,
diff --git a/code/core/src/components/components/typography/elements/UL.tsx b/code/core/src/components/components/typography/elements/UL.tsx
index a3edef90968a..8f52c2b033ee 100644
--- a/code/core/src/components/components/typography/elements/UL.tsx
+++ b/code/core/src/components/components/typography/elements/UL.tsx
@@ -1,9 +1,9 @@
-import type { Interpolation } from 'storybook/theming';
+import type { CSSObject } from 'storybook/theming';
 import { styled } from 'storybook/theming';
 
 import { withMargin, withReset } from '../lib/common';
 
-const listCommon: Interpolation = {
+const listCommon = {
   paddingLeft: 30,
   '& :first-of-type': {
     marginTop: 0,
@@ -13,4 +13,9 @@ const listCommon: Interpolation = {
   },
 };
 
-export const UL = styled.ul(withReset, withMargin, listCommon, { listStyle: 'disc' });
+export const UL = styled.ul(({ theme }) => ({
+  ...(withReset({ theme }) as CSSObject),
+  ...withMargin,
+  ...listCommon,
+  listStyle: 'disc',
+}));