Core: Revert Emotion :first-child (etc) workarounds

code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx

@@ -1,8 +1,8 @@
 import type { FC } from 'react';
 import React from 'react';
 import pickBy from 'lodash/pickBy.js';
-import { styled } from '@storybook/theming';
-import { transparentize } from 'polished';
+import { styled, ignoreSsrWarning } from '@storybook/theming';
+import { transparentize, darken, lighten } from 'polished';
 import { includeConditionalArg } from '@storybook/csf';
 import { once } from '@storybook/client-logger';
 import { IconButton, Icons, Link, ResetWrapper } from '@storybook/components';
@@ -107,6 +107,24 @@ export const TableWrapper = styled.table<{
       marginLeft: inAddonPanel ? 0 : 1,
       marginRight: inAddonPanel ? 0 : 1,
 
+      [`tr:first-child${ignoreSsrWarning}`]: {
+        [`td:first-child${ignoreSsrWarning}, th:first-child${ignoreSsrWarning}`]: {
+          borderTopLeftRadius: inAddonPanel ? 0 : theme.appBorderRadius,
+        },
+        [`td:last-child${ignoreSsrWarning}, th:last-child${ignoreSsrWarning}`]: {
+          borderTopRightRadius: inAddonPanel ? 0 : theme.appBorderRadius,
+        },
+      },
+
+      [`tr:last-child${ignoreSsrWarning}`]: {
+        [`td:first-child${ignoreSsrWarning}, th:first-child${ignoreSsrWarning}`]: {
+          borderBottomLeftRadius: inAddonPanel ? 0 : theme.appBorderRadius,
+        },
+        [`td:last-child${ignoreSsrWarning}, th:last-child${ignoreSsrWarning}`]: {
+          borderBottomRightRadius: inAddonPanel ? 0 : theme.appBorderRadius,
+        },
+      },
+
       tbody: {
         // Safari doesn't love shadows on tbody so we need to use a shadow filter. In order to do this,
         // the table cells all need to be solid so they have a background color applied.
@@ -121,8 +139,31 @@ export const TableWrapper = styled.table<{
                   : `drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.20))`,
             }),
 
-        '> tr > *': {
-          // For filter to work properly, the table cells all need to be opaque.
+        tr: {
+          background: 'transparent',
+          overflow: 'hidden',
+          ...(inAddonPanel
+            ? {
+                borderTopWidth: 1,
+                borderTopStyle: 'solid',
+                borderTopColor:
+                  theme.base === 'light'
+                    ? darken(0.1, theme.background.content)
+                    : lighten(0.05, theme.background.content),
+              }
+            : {
+                [`&:not(:first-child)${ignoreSsrWarning}`]: {
+                  borderTopWidth: 1,
+                  borderTopStyle: 'solid',
+                  borderTopColor:
+                    theme.base === 'light'
+                      ? darken(0.1, theme.background.content)
+                      : lighten(0.05, theme.background.content),
+                },
+              }),
+        },
+
+        td: {
           background: theme.background.content,
           borderTop: `1px solid ${theme.appBorderColor}`,
         },

code/ui/blocks/src/components/Source.tsx

@@ -1,6 +1,6 @@
 import type { ComponentProps, FunctionComponent } from 'react';
 import React from 'react';
-import { styled, ThemeProvider, convert, themes } from '@storybook/theming';
+import { styled, ThemeProvider, convert, themes, ignoreSsrWarning } from '@storybook/theming';
 import { SyntaxHighlighter } from '@storybook/components';
 
 import { EmptyBlock } from './EmptyBlock';
@@ -69,7 +69,7 @@ const SourceSkeletonPlaceholder = styled.div(({ theme }) => ({
   marginTop: 1,
   width: '60%',
 
-  [`&:first-child`]: {
+  [`&:first-child${ignoreSsrWarning}`]: {
     margin: 0,
   },
 }));

code/ui/components/src/spaced/Spaced.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import React from 'react';
-import { styled } from '@storybook/theming';
+import { styled, ignoreSsrWarning } from '@storybook/theming';
 
 const toNumber = (input: any) => (typeof input === 'number' ? input : Number(input));
 
@@ -20,15 +20,15 @@ const Container = styled.div<ContainerProps>(
             marginLeft: col * theme.layoutMargin,
             verticalAlign: 'inherit',
           },
-          [`& > *:first-child`]: {
+          [`& > *:first-child${ignoreSsrWarning}`]: {
             marginLeft: 0,
           },
         }
       : {
           '& > *': {
             marginTop: row * theme.layoutMargin,
           },
-          [`& > *:first-child`]: {
+          [`& > *:first-child${ignoreSsrWarning}`]: {
             marginTop: 0,
           },
         },

code/ui/components/src/tabs/tabs.tsx

@@ -10,6 +10,9 @@ import type { ChildrenList } from './tabs.helpers';
 import { childrenToList, VisuallyHidden } from './tabs.helpers';
 import { useList } from './tabs.hooks';
 
+const ignoreSsrWarning =
+  '/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */';
+
 export interface WrapperProps {
   bordered?: boolean;
   absolute?: boolean;
@@ -84,7 +87,7 @@ const Content = styled.div<ContentProps>(
           bottom: 0 + (bordered ? 1 : 0),
           top: 40 + (bordered ? 1 : 0),
           overflow: 'auto',
-          [`& > *:first-child`]: {
+          [`& > *:first-child${ignoreSsrWarning}`]: {
             position: 'absolute',
             left: 0 + (bordered ? 1 : 0),
             right: 0 + (bordered ? 1 : 0),

code/ui/manager/src/index.tsx

@@ -6,21 +6,14 @@ import ReactDOM from 'react-dom';
 import { Location, LocationProvider, useNavigate } from '@storybook/router';
 import { Provider as ManagerProvider } from '@storybook/manager-api';
 import type { Combo } from '@storybook/manager-api';
-import {
-  ThemeProvider,
-  ensure as ensureTheme,
-  CacheProvider,
-  createCache,
-} from '@storybook/theming';
+import { ThemeProvider, ensure as ensureTheme } from '@storybook/theming';
+
 import { HelmetProvider } from 'react-helmet-async';
 
 import App from './app';
 
 import Provider from './provider';
 
-const emotionCache = createCache({ key: 'sto' });
-emotionCache.compat = true;
-
 // @ts-expect-error (Converted from ts-ignore)
 ThemeProvider.displayName = 'ThemeProvider';
 // @ts-expect-error (Converted from ts-ignore)
@@ -59,16 +52,14 @@ const Main: FC<{ provider: Provider }> = ({ provider }) => {
               : !state.previewInitialized;
 
             return (
-              <CacheProvider value={emotionCache}>
-                <ThemeProvider key="theme.provider" theme={ensureTheme(state.theme)}>
-                  <App
-                    key="app"
-                    viewMode={state.viewMode}
-                    layout={isLoading ? { ...state.layout, showPanel: false } : state.layout}
-                    panelCount={panelCount}
-                  />
-                </ThemeProvider>
-              </CacheProvider>
+              <ThemeProvider key="theme.provider" theme={ensureTheme(state.theme)}>
+                <App
+                  key="app"
+                  viewMode={state.viewMode}
+                  layout={isLoading ? { ...state.layout, showPanel: false } : state.layout}
+                  panelCount={panelCount}
+                />
+              </ThemeProvider>
             );
           }}
         </ManagerProvider>