fix type issues

code/addons/a11y/src/components/VisionSimulator.tsx

@@ -42,13 +42,13 @@ const getFilter = (filterName: string) => {
   return `url('#${filterName}')`;
 };
 
-const Hidden = styled.div(() => ({
+const Hidden = styled.div({
   '&, & svg': {
     position: 'absolute',
     width: 0,
     height: 0,
   },
-}));
+});
 
 const ColorIcon = styled.span<{ filter: string }>(
   {

code/addons/interactions/src/components/Interaction.tsx

@@ -14,12 +14,12 @@ import { MatcherResult } from './MatcherResult';
 import { MethodCall } from './MethodCall';
 import { StatusIcon } from './StatusIcon';
 
-const MethodCallWrapper = styled.div(() => ({
+const MethodCallWrapper = styled.div({
   fontFamily: typography.fonts.mono,
   fontSize: typography.size.s1,
   overflowWrap: 'break-word',
   inlineSize: 'calc( 100% - 40px )',
-}));
+});
 
 const RowContainer = styled('div', {
   shouldForwardProp: (prop) => !['call', 'pausedAt'].includes(prop.toString()),

code/addons/onboarding/src/components/List/List.styled.tsx

@@ -1,9 +1,9 @@
 import { styled } from 'storybook/internal/theming';
 
-export const ListWrapper = styled.ul(() => ({
+export const ListWrapper = styled.ul({
   display: 'flex',
   flexDirection: 'column',
   rowGap: 16,
   padding: 0,
   margin: 0,
-}));
+});

code/addons/test/src/components/Interaction.tsx

@@ -14,12 +14,12 @@ import { MatcherResult } from './MatcherResult';
 import { MethodCall } from './MethodCall';
 import { StatusIcon } from './StatusIcon';
 
-const MethodCallWrapper = styled.div(() => ({
+const MethodCallWrapper = styled.div({
   fontFamily: typography.fonts.mono,
   fontSize: typography.size.s1,
   overflowWrap: 'break-word',
   inlineSize: 'calc( 100% - 40px )',
-}));
+});
 
 const RowContainer = styled('div', {
   shouldForwardProp: (prop) => !['call', 'pausedAt'].includes(prop.toString()),

code/addons/test/src/components/TestProviderRender.tsx

@@ -355,7 +355,8 @@ export const TestProviderRender: FC<
             icon={
               state.crashed ? (
                 <TestStatusIcon status="critical" aria-label="status: crashed" />
-              ) : status === 'unknown' ? (
+              ) : // @ts-expect-error @ghengeveld should check whether this is a bug or not
+              status === 'unknown' ? (
                 <TestStatusIcon status="unknown" aria-label="status: unknown" />
               ) : (
                 <TestStatusIcon status={statusMap[status]} aria-label={`status: ${status}`} />

code/addons/viewport/src/legacy/ToolLegacy.tsx

@@ -74,10 +74,10 @@ const flip = ({ width, height, ...styles }: ViewportStyles) => ({
   width: height,
 });
 
-const ActiveViewportSize = styled.div(() => ({
+const ActiveViewportSize = styled.div({
   display: 'inline-flex',
   alignItems: 'center',
-}));
+});
 
 const ActiveViewportLabel = styled.div(({ theme }) => ({
   display: 'inline-block',

code/addons/viewport/src/utils.tsx

@@ -7,10 +7,10 @@ import { BrowserIcon, MobileIcon, TabletIcon } from '@storybook/icons';
 
 import type { Viewport, ViewportMap } from './types';
 
-export const ActiveViewportSize = styled.div(() => ({
+export const ActiveViewportSize = styled.div({
   display: 'inline-flex',
   alignItems: 'center',
-}));
+});
 
 export const ActiveViewportLabel = styled.div(({ theme }) => ({
   display: 'inline-block',

code/core/src/components/components/bar/button.tsx

@@ -140,11 +140,11 @@ const IconPlaceholder = styled.div(({ theme }) => ({
   animation: `${theme.animation.glow} 1.5s ease-in-out infinite`,
 }));
 
-const IconButtonSkeletonWrapper = styled.div(() => ({
+const IconButtonSkeletonWrapper = styled.div({
   marginTop: 6,
   padding: 7,
   height: 28,
-}));
+});
 
 /** @deprecated This component will be removed in Storybook 9.0 */
 export const IconButtonSkeleton = () => (

code/core/src/manager/components/notifications/NotificationItem.tsx

@@ -93,7 +93,7 @@ const NotificationWithInteractiveStates = styled(Notification)({
 const NotificationButton = NotificationWithInteractiveStates.withComponent('div');
 const NotificationLink = NotificationWithInteractiveStates.withComponent(Link);
 
-const NotificationIconWrapper = styled.div(() => ({
+const NotificationIconWrapper = styled.div({
   display: 'flex',
   marginRight: 10,
   alignItems: 'center',
@@ -102,7 +102,7 @@ const NotificationIconWrapper = styled.div(() => ({
     width: 16,
     height: 16,
   },
-}));
+});
 
 const NotificationTextWrapper = styled.div(({ theme }) => ({
   width: '100%',

code/lib/blocks/src/components/ArgsTable/SectionRow.tsx

@@ -74,9 +74,9 @@ const Subsection = styled.td(({ theme }) => ({
   background: theme.background.app,
 }));
 
-const StyledTd = styled.td(() => ({
+const StyledTd = styled.td({
   position: 'relative',
-}));
+});
 
 const StyledTr = styled.tr(({ theme }) => ({
   '&:hover > td': {
@@ -86,7 +86,7 @@ const StyledTr = styled.tr(({ theme }) => ({
   },
 }));
 
-const ClickIntercept = styled.button(() => ({
+const ClickIntercept = styled.button({
   // reset button style
   background: 'none',
   border: 'none',
@@ -103,7 +103,7 @@ const ClickIntercept = styled.button(() => ({
   width: '100%',
   color: 'transparent',
   cursor: 'row-resize !important',
-}));
+});
 
 export const SectionRow: FC<SectionRowProps> = ({
   level = 'section',