components: Remove @emotion/css from ZStack (#33053)

* Remove `@emotion/css` from ZStack

* Use a better name

packages/components/src/z-stack/component.tsx

@@ -1,10 +1,6 @@
 /**
  * External dependencies
  */
-// Disable reason: Temporarily disable for existing usages
-// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
-// eslint-disable-next-line no-restricted-imports
-import { css, cx } from '@emotion/css';
 // eslint-disable-next-line no-restricted-imports
 import type { Ref, ReactNode } from 'react';
 
@@ -20,9 +16,7 @@ import { getValidChildren } from '../ui/utils/get-valid-children';
 import { contextConnect, useContextSystem } from '../ui/context';
 // eslint-disable-next-line no-duplicate-imports
 import type { PolymorphicComponentProps } from '../ui/context';
-import { View } from '../view';
-import * as styles from './styles';
-const { ZStackView } = styles;
+import { ZStackView, ZStackChildView } from './styles';
 
 export interface ZStackProps {
 	/**
@@ -69,27 +63,17 @@ function ZStack(
 		const zIndex = isReversed ? childrenLastIndex - index : index;
 		const offsetAmount = offset * index;
 
-		const classes = cx(
-			isLayered ? styles.positionAbsolute : styles.positionRelative,
-			css( {
-				...( isLayered
-					? { marginLeft: offsetAmount }
-					: { right: offsetAmount * -1 } ),
-			} )
-		);
-
 		const key = isValidElement( child ) ? child.key : index;
 
 		return (
-			<View
-				className={ classes }
+			<ZStackChildView
+				isLayered={ isLayered }
+				offsetAmount={ offsetAmount }
+				zIndex={ zIndex }
 				key={ key }
-				style={ {
-					zIndex,
-				} }
 			>
 				{ child }
-			</View>
+			</ZStackChildView>
 		);
 	} );
 

packages/components/src/z-stack/styles.ts

@@ -1,21 +1,34 @@
 /**
  * External dependencies
  */
-// Disable reason: Temporarily disable for existing usages
-// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
-// eslint-disable-next-line no-restricted-imports
-import { css } from '@emotion/css';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 export const ZStackView = styled.div`
 	display: flex;
 	position: relative;
 `;
 
-export const positionAbsolute = css`
+export const ZStackChildView = styled.div< {
+	isLayered: boolean;
+	offsetAmount: number;
+	zIndex: number;
+} >`
+	${ ( { isLayered, offsetAmount } ) =>
+		isLayered
+			? css( { marginLeft: offsetAmount } )
+			: css( { right: offsetAmount * -1 } ) }
+
+	${ ( { isLayered } ) =>
+		isLayered ? positionAbsolute : positionRelative }
+
+	${ ( { zIndex } ) => css( { zIndex } ) }
+`;
+
+const positionAbsolute = css`
 	position: absolute;
 `;
 
-export const positionRelative = css`
+const positionRelative = css`
 	position: relative;
 `;