/**
* @jsxRuntime classic
* @jsx jsx
*
* IMPORTANT: This file MUST keep the emotion JSX pragma (@jsx jsx from @emotion/react).
* This is intentional — it allows the HOC to apply emotion styles via the css prop
* at the call site (where emotion's JSX runtime intercepts it), without requiring
* the wrapped component to use the emotion pragma itself.
*
* This file is part of the Emotion → Compiled CSS-in-JS migration infrastructure.
* It is temporary and should be removed once the migration is complete.
*
* @see https://hello.atlassian.net/wiki/spaces/~712020e6f24689f2da470b80ba6873df7b44a2/pages/6788274038/Emotion+-+Compiled+Feature+Gating+Strategy
*/
import type { ComponentType } from 'react';
import { jsx, type SerializedStyles } from '@emotion/react';
/**
* A HOC that enables per-component feature-gated migration from Emotion to Compiled CSS-in-JS.
*
* When the `platform_editor_static_css` experiment is ON:
* - Renders the component directly. Compiled's statically-extracted CSS classes are applied
* via the component's own `css` prop (using the Compiled pragma in the component file).
* - No Emotion code runs at all.
*
* When the experiment is OFF:
* - Renders the component with `css={emotionStyles}`. Because THIS file has the Emotion pragma,
* Emotion's JSX runtime intercepts the css prop here, converts it to a className string,
* and passes it to the component as `className`. No wrapper div, no ClassNames render prop.
*
* @example
* ```tsx
* // button.tsx — the base component is style-agnostic, it just accepts className.
* export function Button({ className }: { className?: string }) {
* return ;
* }
*
* // app.tsx — the call site handles both compiled and emotion styles.
* import { css } from '@compiled/react';
* import { css as emotionCss } from '@emotion/react';
* import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
* import { withCompiledMigration } from '@atlaskit/editor-common/compiled-migration';
* import { Button } from './button';
*
* const compiledStyles = css({ border: '1px solid red' });
* const emotionStyles = emotionCss({ border: '1px solid red' });
*
* // Wrap the component — the HOC applies emotion styles when the experiment is off.
* const StyledButton = withCompiledMigration(Button, emotionStyles);
*
* // At the call site, apply compiled styles conditionally:
* export function App() {
* return (
*
(WrappedComponent: ComponentType
, emotionStyles: SerializedStyles): { (props: P): jsx.JSX.Element; displayName: string; };