/** * @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 ( * * ); * } * ``` */ export declare function withCompiledMigration

(WrappedComponent: ComponentType

, emotionStyles: SerializedStyles): { (props: P): jsx.JSX.Element; displayName: string; };