@atlaskit/editor-core 219.9.6 → 219.9.7

package/dist/es2019/ui/Addon/ClickAreaBlock/index.js

@@ -1,16 +1,10 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import React from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
-import { css, jsx } from '@emotion/react';
+import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { clickAreaClickHandler } from '../click-area-helper';
-const clickWrapper = css({
-  flexGrow: 1,
-  height: '100%'
-});
+import { ClickAreaBlockContainerCompiled } from './clickAreaBlock-compiled';
+import { ClickAreaBlockContainerEmotion } from './clickAreaBlock-emotion';
+const ClickAreaBlockContainerMigration = componentWithCondition(() => expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true), ClickAreaBlockContainerCompiled, ClickAreaBlockContainerEmotion);
 export const ClickAreaBlock = ({
   editorView,
   editorDisabled,
@@ -24,10 +18,9 @@ export const ClickAreaBlock = ({
       clickAreaClickHandler(editorView, event);
     }
   }, [editorView, editorDisabled]);
-  return jsx("div", {
+  return /*#__PURE__*/React.createElement(ClickAreaBlockContainerMigration, {
     "data-editor-click-wrapper": true,
     "data-testid": "click-wrapper",
-    css: clickWrapper,
     onMouseDown: handleMouseDown
     // This div is a presentational container that captures mouse events
     // for programmatic editor focus management, not user interaction.

package/dist/es2019/ui/Appearance/Chromeless-compiled.compiled.css

@@ -0,0 +1,27 @@
+
+._1khk1mok:hover::-webkit-scrollbar-thumb{border-radius:var(--ds-radius-large,8px)}._123b1aqn:hover::-webkit-scrollbar-thumb{background-color:var(--ds-background-neutral-bold,#292a2e)}
+._15gyze3t .ProseMirror>p:last-of-type{margin-bottom:var(--ds-space-0,0)}
+._18m91wug{overflow-y:auto}
+._1awku2gc div>.ProseMirror>:last-child{padding-bottom:var(--ds-space-100,8px)}
+._1fpfolhs{ms-overflow-style:-ms-autohiding-scrollbar}
+._1gfdidpf div>.ProseMirror{margin-bottom:0}
+._1itkidpf div>.ProseMirror{margin-left:0}
+._1nhbidpf div>.ProseMirror{margin-top:0}
+._1q5yidpf div>.ProseMirror{margin-right:0}
+._1reo15vq{overflow-x:hidden}
+._1yt4idpf div>.ProseMirror{padding-top:0}
+._4t3i1wug{height:auto}
+._7fa7idpf div>.ProseMirror{padding-bottom:0}
+._7fkv1jtm div>.ProseMirror{white-space:pre-wrap}
+._8wn3idpf div>.ProseMirror{padding-left:0}
+._aaynsm61::-webkit-scrollbar-thumb{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._fpqb1r31 div>.ProseMirror{outline-color:currentColor}
+._jaboglyw::-webkit-scrollbar-corner{display:none}
+._l5dlglyw div>.ProseMirror{outline-style:none}
+._p12f1kw7{max-width:inherit}
+._slp31hna{word-wrap:break-word}
+._tjxn1o36 div>.ProseMirror{outline-width:medium}
+._vchhusvi{box-sizing:border-box}
+._vwz4gktf{line-height:20px}
+._y826idpf div>.ProseMirror{padding-right:0}
+._1ogl1ibz::-webkit-scrollbar-thumb:hover{background-color:var(--ds-background-neutral-bold-hovered,#3b3d42)}

package/dist/es2019/ui/Appearance/Chromeless-compiled.js

@@ -0,0 +1,32 @@
+/* Chromeless-compiled.tsx generated by @compiled/babel-plugin v0.39.1 */
+/**
+ * Compiled branch of the `platform_editor_core_non_ecc_static_css` experiment.
+ * Used via `componentWithCondition` in `Chromeless.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+import "./Chromeless-compiled.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+const chromelessStyles = {
+  scrollbar: "_1fpfolhs _1khk1mok _123b1aqn _jaboglyw _aaynsm61 _1ogl1ibz",
+  editor: "_vwz4gktf _4t3i1wug _1reo15vq _18m91wug _p12f1kw7 _vchhusvi _slp31hna _fpqb1r31 _l5dlglyw _tjxn1o36 _1yt4idpf _y826idpf _7fa7idpf _8wn3idpf _1nhbidpf _1q5yidpf _1gfdidpf _1itkidpf _7fkv1jtm _1awku2gc _15gyze3t"
+};
+export const ChromelessEditorContainerCompiled = ({
+  children,
+  containerRef,
+  maxHeight,
+  minHeight
+}) => /*#__PURE__*/React.createElement("div", {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  className: ax([chromelessStyles.editor, chromelessStyles.scrollbar, fg('platform_editor_chromeless_akeditor_class') || expValEquals('create_work_item_modernization_exp', 'isEnabled', true) ? 'akEditor' : undefined]),
+  style: {
+    maxHeight: maxHeight ? `${maxHeight}px` : undefined,
+    minHeight: `${minHeight}px`
+  },
+  ref: containerRef,
+  "data-testid": "chromeless-editor",
+  id: "chromeless-editor"
+}, children);

package/dist/es2019/ui/Appearance/Chromeless-emotion.js

@@ -0,0 +1,82 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/**
+ * Emotion fallback branch of the `platform_editor_core_non_ecc_static_css` experiment.
+ * Used via `componentWithCondition` in `Chromeless.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- intentional: emotion fallback; jsx required at runtime for @jsxRuntime classic
+import { css, jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+const scrollbarStylesNew = css({
+  msOverflowStyle: '-ms-autohiding-scrollbar',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '&::-webkit-scrollbar-corner': {
+    display: 'none'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '&::-webkit-scrollbar-thumb': {
+    backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '&:hover::-webkit-scrollbar-thumb': {
+    backgroundColor: "var(--ds-background-neutral-bold, #292A2E)",
+    borderRadius: "var(--ds-radius-large, 8px)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '&::-webkit-scrollbar-thumb:hover': {
+    backgroundColor: "var(--ds-background-neutral-bold-hovered, #3B3D42)"
+  }
+});
+const chromelessEditorStylesNew = css({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: '20px',
+  height: 'auto',
+  overflowX: 'hidden',
+  overflowY: 'auto',
+  maxWidth: 'inherit',
+  boxSizing: 'border-box',
+  wordWrap: 'break-word',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  'div > .ProseMirror': {
+    outline: 'none',
+    whiteSpace: 'pre-wrap',
+    padding: 0,
+    margin: 0,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '& > :last-child': {
+      paddingBottom: "var(--ds-space-100, 8px)"
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '& > p:last-of-type': {
+      marginBottom: "var(--ds-space-0, 0px)"
+    }
+  }
+});
+export const ChromelessEditorContainerEmotion = ({
+  children,
+  containerRef,
+  maxHeight,
+  minHeight,
+  ...rest
+}) => jsx("div", {
+  css: [chromelessEditorStylesNew, scrollbarStylesNew]
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  ,
+  className: fg('platform_editor_chromeless_akeditor_class') || expValEquals('create_work_item_modernization_exp', 'isEnabled', true) ? 'akEditor' : undefined,
+  style: {
+    maxHeight: maxHeight ? `${maxHeight}px` : undefined,
+    minHeight: `${minHeight}px`
+  },
+  ref: containerRef,
+  "data-testid": "chromeless-editor",
+  id: "chromeless-editor"
+}, children);

package/dist/es2019/ui/Appearance/Chromeless.js

@@ -1,66 +1,13 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import React, { Fragment } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
-import { css, jsx } from '@emotion/react';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import EditorContentContainer from '../EditorContentContainer/EditorContentContainer';
 import PluginSlot from '../PluginSlot';
 import WithFlash from '../WithFlash';
-const scrollbarStylesNew = css({
-  msOverflowStyle: '-ms-autohiding-scrollbar',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '&::-webkit-scrollbar-corner': {
-    display: 'none'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '&::-webkit-scrollbar-thumb': {
-    backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '&:hover::-webkit-scrollbar-thumb': {
-    backgroundColor: "var(--ds-background-neutral-bold, #292A2E)",
-    borderRadius: "var(--ds-radius-large, 8px)"
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '&::-webkit-scrollbar-thumb:hover': {
-    backgroundColor: "var(--ds-background-neutral-bold-hovered, #3B3D42)"
-  }
-});
-const chromelessEditorStylesNew = css({
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: '20px',
-  height: 'auto',
-  overflowX: 'hidden',
-  overflowY: 'auto',
-  maxWidth: 'inherit',
-  boxSizing: 'border-box',
-  wordWrap: 'break-word',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  'div > .ProseMirror': {
-    outline: 'none',
-    whiteSpace: 'pre-wrap',
-    padding: 0,
-    margin: 0,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    '& > :last-child': {
-      paddingBottom: "var(--ds-space-100, 8px)"
-    }
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '.ProseMirror': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    '& > p:last-of-type': {
-      marginBottom: "var(--ds-space-0, 0px)"
-    }
-  }
-});
+import { ChromelessEditorContainerCompiled } from './Chromeless-compiled';
+import { ChromelessEditorContainerEmotion } from './Chromeless-emotion';
 /**
  * Render the editor in a chromeless appearance.
  * Example use is the inline comment editor, which doesn't have editor toolbar
@@ -102,20 +49,20 @@ export default class Editor extends React.Component {
         return states === null || states === void 0 ? void 0 : (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode;
       });
       const containerRef = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? this.setContainerElement : ref => this.containerElement = ref;
-      return jsx(WithFlash, {
+      return /*#__PURE__*/React.createElement(WithFlash, {
         animate: maxContentSizeReached
-      }, jsx(ChromelessEditorContainer, {
+      }, /*#__PURE__*/React.createElement(ChromelessEditorContainer, {
         maxHeight: maxHeight,
         minHeight: minHeight,
         containerRef: containerRef
-      }, jsx(EditorContentContainer
+      }, /*#__PURE__*/React.createElement(EditorContentContainer
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       , {
         className: "ak-editor-content-area",
         featureFlags: featureFlags,
         viewMode: editorViewMode,
         appearance: this.appearance
-      }, customContentComponents && 'before' in customContentComponents ? customContentComponents.before : customContentComponents, jsx(PluginSlot, {
+      }, customContentComponents && 'before' in customContentComponents ? customContentComponents.before : customContentComponents, /*#__PURE__*/React.createElement(PluginSlot, {
         editorView: editorView,
         editorActions: editorActions,
         eventDispatcher: eventDispatcher,
@@ -134,7 +81,7 @@ export default class Editor extends React.Component {
     });
   }
   render() {
-    return jsx(RenderWithPluginState, {
+    return /*#__PURE__*/React.createElement(RenderWithPluginState, {
       editorAPI: this.props.editorAPI,
       renderChrome: this.renderChrome
     });
@@ -155,27 +102,15 @@ function RenderWithPluginState({
   const maxContentSize = maxContentSizeReached === undefined ? undefined : {
     maxContentSizeReached
   };
-  return jsx(Fragment, null, renderChrome({
+  return /*#__PURE__*/React.createElement(Fragment, null, renderChrome({
     maxContentSize
   }));
 }
-export function ChromelessEditorContainer({
-  maxHeight,
-  minHeight,
-  children,
-  containerRef
-}) {
-  return jsx("div", {
-    css: [chromelessEditorStylesNew, scrollbarStylesNew]
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: fg('platform_editor_chromeless_akeditor_class') || expValEquals('create_work_item_modernization_exp', 'isEnabled', true) ? 'akEditor' : undefined,
-    style: {
-      maxHeight: maxHeight ? `${maxHeight}px` : undefined,
-      minHeight: `${minHeight}px`
-    },
-    "data-testid": "chromeless-editor",
-    id: "chromeless-editor",
-    ref: containerRef
-  }, children);
-}
+
+/**
+ * Container for the chromeless editor appearance. This is used to set the max and min height
+ * of the editor content area, and to provide a ref to the container element for the popups.
+ * @param param0 props for the chromeless editor container
+ * @returns JSX element representing the chromeless editor container
+ */
+export const ChromelessEditorContainer = componentWithCondition(() => expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true), ChromelessEditorContainerCompiled, ChromelessEditorContainerEmotion);

package/dist/es2019/ui/EditorContentContainer/EditorContentContainer-emotion.js

@@ -369,7 +369,7 @@ export const EditorContentContainerEmotion = /*#__PURE__*/React.forwardRef((prop
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     unsupportedStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    resizerStyles, expValEquals('databases-native-embeds-v2', 'isEnabled', true) &&
+    resizerStyles, expValEqualsNoExposure('cc-maui-experiment', 'isEnabled', true) && expValEquals('databases-native-embeds-v2', 'isEnabled', true) &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     resizerBottomHandleStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values

package/dist/es2019/ui/PluginSlot/PluginSlot-compiled.compiled.css

@@ -0,0 +1 @@
+._1e0c1txw{display:flex}

package/dist/es2019/ui/PluginSlot/PluginSlot-compiled.js

@@ -0,0 +1,21 @@
+/* PluginSlot-compiled.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./PluginSlot-compiled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+/**
+ * Compiled branch of the `platform_editor_core_non_ecc_static_css` experiment.
+ * Used via `componentWithCondition` in `index.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+
+const pluginsComponentsWrapperCompiledStyles = {
+  root: "_1e0c1txw"
+};
+export const PluginsComponentsWrapperCompiled = ({
+  children,
+  ...rest
+}) => /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+  className: ax([pluginsComponentsWrapperCompiledStyles.root])
+}), children);

package/dist/es2019/ui/PluginSlot/PluginSlot-emotion.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/**
+ * Emotion fallback branch of the `platform_editor_core_non_ecc_static_css` experiment.
+ * Used via `componentWithCondition` in `index.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- intentional: emotion fallback for compiled migration
+import { css, jsx } from '@emotion/react';
+const pluginsComponentsWrapperEmotionStyles = css({
+  display: 'flex'
+});
+export const PluginsComponentsWrapperEmotion = ({
+  children,
+  ...rest
+}) =>
+// eslint-disable-next-line react/jsx-props-no-spreading
+jsx("div", _extends({
+  css: pluginsComponentsWrapperEmotionStyles
+}, rest), children);

package/dist/es2019/ui/PluginSlot/index.js

@@ -1,18 +1,13 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import React from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
-import { css, jsx } from '@emotion/react';
 import isEqual from 'lodash/isEqual';
 import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
+import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { ErrorBoundary } from '../ErrorBoundary';
 import { MountPluginHooks } from './mount-plugin-hooks';
-const pluginsComponentsWrapper = css({
-  display: 'flex'
-});
+import { PluginsComponentsWrapperCompiled } from './PluginSlot-compiled';
+import { PluginsComponentsWrapperEmotion } from './PluginSlot-emotion';
+const PluginsComponentsWrapperMigration = componentWithCondition(() => expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true), PluginsComponentsWrapperCompiled, PluginsComponentsWrapperEmotion);
 const PluginSlot = ({
   items,
   editorView,
@@ -32,15 +27,14 @@ const PluginSlot = ({
   if (!items && !pluginHooks) {
     return null;
   }
-  return jsx(ErrorBoundary, {
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
     component: ACTION_SUBJECT.PLUGIN_SLOT,
     fallbackComponent: null
-  }, jsx(MountPluginHooks, {
+  }, /*#__PURE__*/React.createElement(MountPluginHooks, {
     editorView: editorView,
     pluginHooks: pluginHooks,
     containerElement: containerElement
-  }), jsx("div", {
-    css: pluginsComponentsWrapper,
+  }), /*#__PURE__*/React.createElement(PluginsComponentsWrapperMigration, {
     "data-testid": "plugins-components-wrapper"
   }, items === null || items === void 0 ? void 0 : items.map((component, key) => {
     const props = {

package/dist/es2019/version-wrapper.js

@@ -1,2 +1,2 @@
 export const name = "@atlaskit/editor-core";
-export const version = "219.9.5";
+export const version = "219.9.6";

package/dist/esm/ui/Addon/ClickAreaBlock/clickAreaBlock-compiled.compiled.css

@@ -0,0 +1,2 @@
+._16jlkb7n{flex-grow:1}
+._4t3i1osq{height:100%}

package/dist/esm/ui/Addon/ClickAreaBlock/clickAreaBlock-compiled.js

@@ -0,0 +1,22 @@
+/* clickAreaBlock-compiled.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+import "./clickAreaBlock-compiled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+/**
+ * Compiled branch of the `platform_editor_core_non_ecc_static_css` experiment.
+ * Used via `componentWithCondition` in `index.tsx`.
+ */
+
+var clickWrapperCompiledStyles = {
+  root: "_16jlkb7n _4t3i1osq"
+};
+export var ClickAreaBlockContainerCompiled = function ClickAreaBlockContainerCompiled(_ref) {
+  var children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: ax([clickWrapperCompiledStyles.root])
+  }), children);
+};

package/dist/esm/ui/Addon/ClickAreaBlock/clickAreaBlock-emotion.js

@@ -0,0 +1,30 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/**
+ * Emotion fallback branch of the `platform_editor_core_non_ecc_static_css` experiment.
+ * Used via `componentWithCondition` in `index.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- intentional: emotion fallback for compiled migration
+import { css, jsx } from '@emotion/react';
+var clickWrapperEmotionStyles = css({
+  flexGrow: 1,
+  height: '100%'
+});
+export var ClickAreaBlockContainerEmotion = function ClickAreaBlockContainerEmotion(_ref) {
+  var children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    jsx("div", _extends({
+      css: clickWrapperEmotionStyles
+    }, rest), children)
+  );
+};

package/dist/esm/ui/Addon/ClickAreaBlock/index.js

@@ -1,16 +1,12 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import React from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
-import { css, jsx } from '@emotion/react';
+import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { clickAreaClickHandler } from '../click-area-helper';
-var clickWrapper = css({
-  flexGrow: 1,
-  height: '100%'
-});
+import { ClickAreaBlockContainerCompiled } from './clickAreaBlock-compiled';
+import { ClickAreaBlockContainerEmotion } from './clickAreaBlock-emotion';
+var ClickAreaBlockContainerMigration = componentWithCondition(function () {
+  return expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true);
+}, ClickAreaBlockContainerCompiled, ClickAreaBlockContainerEmotion);
 export var ClickAreaBlock = function ClickAreaBlock(_ref) {
   var editorView = _ref.editorView,
     editorDisabled = _ref.editorDisabled,
@@ -23,10 +19,9 @@ export var ClickAreaBlock = function ClickAreaBlock(_ref) {
       clickAreaClickHandler(editorView, event);
     }
   }, [editorView, editorDisabled]);
-  return jsx("div", {
+  return /*#__PURE__*/React.createElement(ClickAreaBlockContainerMigration, {
     "data-editor-click-wrapper": true,
     "data-testid": "click-wrapper",
-    css: clickWrapper,
     onMouseDown: handleMouseDown
     // This div is a presentational container that captures mouse events
     // for programmatic editor focus management, not user interaction.

package/dist/esm/ui/Appearance/Chromeless-compiled.compiled.css

@@ -0,0 +1,27 @@
+
+._1khk1mok:hover::-webkit-scrollbar-thumb{border-radius:var(--ds-radius-large,8px)}._123b1aqn:hover::-webkit-scrollbar-thumb{background-color:var(--ds-background-neutral-bold,#292a2e)}
+._15gyze3t .ProseMirror>p:last-of-type{margin-bottom:var(--ds-space-0,0)}
+._18m91wug{overflow-y:auto}
+._1awku2gc div>.ProseMirror>:last-child{padding-bottom:var(--ds-space-100,8px)}
+._1fpfolhs{ms-overflow-style:-ms-autohiding-scrollbar}
+._1gfdidpf div>.ProseMirror{margin-bottom:0}
+._1itkidpf div>.ProseMirror{margin-left:0}
+._1nhbidpf div>.ProseMirror{margin-top:0}
+._1q5yidpf div>.ProseMirror{margin-right:0}
+._1reo15vq{overflow-x:hidden}
+._1yt4idpf div>.ProseMirror{padding-top:0}
+._4t3i1wug{height:auto}
+._7fa7idpf div>.ProseMirror{padding-bottom:0}
+._7fkv1jtm div>.ProseMirror{white-space:pre-wrap}
+._8wn3idpf div>.ProseMirror{padding-left:0}
+._aaynsm61::-webkit-scrollbar-thumb{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._fpqb1r31 div>.ProseMirror{outline-color:currentColor}
+._jaboglyw::-webkit-scrollbar-corner{display:none}
+._l5dlglyw div>.ProseMirror{outline-style:none}
+._p12f1kw7{max-width:inherit}
+._slp31hna{word-wrap:break-word}
+._tjxn1o36 div>.ProseMirror{outline-width:medium}
+._vchhusvi{box-sizing:border-box}
+._vwz4gktf{line-height:20px}
+._y826idpf div>.ProseMirror{padding-right:0}
+._1ogl1ibz::-webkit-scrollbar-thumb:hover{background-color:var(--ds-background-neutral-bold-hovered,#3b3d42)}

package/dist/esm/ui/Appearance/Chromeless-compiled.js

@@ -0,0 +1,33 @@
+/* Chromeless-compiled.tsx generated by @compiled/babel-plugin v0.39.1 */
+/**
+ * Compiled branch of the `platform_editor_core_non_ecc_static_css` experiment.
+ * Used via `componentWithCondition` in `Chromeless.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+import "./Chromeless-compiled.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+var chromelessStyles = {
+  scrollbar: "_1fpfolhs _1khk1mok _123b1aqn _jaboglyw _aaynsm61 _1ogl1ibz",
+  editor: "_vwz4gktf _4t3i1wug _1reo15vq _18m91wug _p12f1kw7 _vchhusvi _slp31hna _fpqb1r31 _l5dlglyw _tjxn1o36 _1yt4idpf _y826idpf _7fa7idpf _8wn3idpf _1nhbidpf _1q5yidpf _1gfdidpf _1itkidpf _7fkv1jtm _1awku2gc _15gyze3t"
+};
+export var ChromelessEditorContainerCompiled = function ChromelessEditorContainerCompiled(_ref) {
+  var children = _ref.children,
+    containerRef = _ref.containerRef,
+    maxHeight = _ref.maxHeight,
+    minHeight = _ref.minHeight;
+  return /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: ax([chromelessStyles.editor, chromelessStyles.scrollbar, fg('platform_editor_chromeless_akeditor_class') || expValEquals('create_work_item_modernization_exp', 'isEnabled', true) ? 'akEditor' : undefined]),
+    style: {
+      maxHeight: maxHeight ? "".concat(maxHeight, "px") : undefined,
+      minHeight: "".concat(minHeight, "px")
+    },
+    ref: containerRef,
+    "data-testid": "chromeless-editor",
+    id: "chromeless-editor"
+  }, children);
+};