@atlaskit/editor-core 219.9.16 → 219.9.17

package/dist/es2019/ui/Appearance/FullPage/MainToolbarWrapper.js

@@ -1,63 +1,5 @@
-/**
- * @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 { akEditorFloatingDialogZIndex, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
-import { MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT } from './MainToolbar';
-
-// Base styles that don't depend on feature flags
-const baseToolbarStyles = css({
-  position: 'relative',
-  alignItems: 'center',
-  boxShadow: 'none',
-  borderBottom: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border, #0B120E24)"}`,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-  transition: `box-shadow 200ms ${akEditorSwoopCubicBezier}`,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-  zIndex: akEditorFloatingDialogZIndex,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-  display: 'flex',
-  height: 'var(--ak-editor-fullpage-toolbar-height)',
-  flexShrink: 0,
-  backgroundColor: "var(--ds-surface, #FFFFFF)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '& object': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-    height: '0 !important'
-  }
-});
-const flexibleIconSize = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '& span svg': {
-    maxWidth: '100%'
-  }
-});
-// box-shadow is overriden by the mainToolbar
-const mainToolbarWithKeyline = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  boxShadow: `${"var(--ds-shadow-overflow, 0px 0px 8px #1E1F2128, 0px 0px 1px #1E1F211e)"}`
-});
-const mainToolbarTwoLineStyle = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  [`@media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px)`]: {
-    flexWrap: 'wrap',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    height: `calc(var(--ak-editor-fullpage-toolbar-height) * 2)`
-  }
-});
-export const MainToolbarWrapper = ({
-  showKeyline,
-  twoLineEditorToolbar,
-  children,
-  'data-testid': testId
-}) => {
-  return jsx("div", {
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    css: [baseToolbarStyles, flexibleIconSize, showKeyline && mainToolbarWithKeyline, twoLineEditorToolbar && mainToolbarTwoLineStyle],
-    "data-testid": testId
-  }, children);
-};
+import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { MainToolbarWrapperCompiled } from './MainToolbarWrapper-compiled';
+import { MainToolbarWrapperEmotion } from './MainToolbarWrapper-emotion';
+export const MainToolbarWrapper = componentWithCondition(() => expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true), MainToolbarWrapperCompiled, MainToolbarWrapperEmotion);

package/dist/es2019/version-wrapper.js

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

package/dist/esm/composable-editor/core-editor.js

@@ -3,14 +3,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { useCallback, useMemo, useRef, 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 { jsx } from '@emotion/react';
+import React, { useCallback, useMemo, useRef, Fragment } from 'react';
 import isEqual from 'lodash/isEqual';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid/v4';
@@ -92,7 +85,7 @@ function Editor(passedProps) {
     }
   }, [onSaveFromProps]);
   var isFullPageAppearance = Boolean(props.appearance && ['full-page', 'full-width'].concat(_toConsumableArray(editorExperiment('platform_synced_block', true) ? ['max'] : [])).includes(props.appearance));
-  return jsx(Fragment, null, isFullPageAppearance ? jsx(EditorINPMetrics, null) : null, jsx(EditorInternal, {
+  return /*#__PURE__*/React.createElement(Fragment, null, isFullPageAppearance ? /*#__PURE__*/React.createElement(EditorINPMetrics, null) : null, /*#__PURE__*/React.createElement(EditorInternal, {
     props: props,
     handleAnalyticsEvent: handleAnalyticsEvent,
     createAnalyticsEvent: createAnalyticsEvent,
@@ -131,11 +124,11 @@ export function CoreEditor(props) {
     };
   }, [props.appearance]);
   var memodEditorFeatureFlags = useMemoEditorFeatureFlags(props.featureFlags);
-  return jsx(FabricEditorAnalyticsContext
+  return /*#__PURE__*/React.createElement(FabricEditorAnalyticsContext
   // @ts-expect-error Type 'string' is not assignable to type '"editorCore" | "renderer"'.
   , {
     data: data
-  }, jsx(Editor
+  }, /*#__PURE__*/React.createElement(Editor
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
   , _extends({}, props, {

package/dist/esm/composable-editor/editor-internal-compiled.compiled.css

@@ -0,0 +1,3 @@
+._1bsb1osq{width:100%}
+._4t3i1osq{height:100%}
+._kqswh2mm{position:relative}

package/dist/esm/composable-editor/editor-internal-compiled.js

@@ -0,0 +1,19 @@
+/* editor-internal-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 `editor-internal.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+import "./editor-internal-compiled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+var editorContainerCompiledStyles = {
+  root: "_kqswh2mm _1bsb1osq _4t3i1osq"
+};
+export var EditorInternalContainerCompiled = function EditorInternalContainerCompiled(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax([editorContainerCompiledStyles.root])
+  }, children);
+};

package/dist/esm/composable-editor/editor-internal-emotion.js

@@ -0,0 +1,24 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/**
+ * Emotion fallback branch of the `platform_editor_core_non_ecc_static_css` experiment.
+ * Used via `componentWithCondition` in `editor-internal.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 editorContainerEmotionStyles = css({
+  position: 'relative',
+  width: '100%',
+  height: '100%'
+});
+export var EditorInternalContainerEmotion = function EditorInternalContainerEmotion(_ref) {
+  var children = _ref.children;
+  return jsx("div", {
+    css: editorContainerEmotionStyles
+  }, children);
+};

package/dist/esm/composable-editor/editor-internal.js

@@ -2,16 +2,11 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { Fragment, memo } from 'react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+import React, { Fragment, memo } from 'react';
 import { ACTION, ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import { usePortalProvider } from '@atlaskit/editor-common/portal';
 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 ErrorBoundary from '../create-editor/ErrorBoundary';
 import ReactEditorViewNext from '../create-editor/ReactEditorView';
@@ -20,12 +15,12 @@ import { IntlProviderIfMissingWrapper } from '../ui/IntlProviderIfMissingWrapper
 import { createFeatureFlagsFromProps } from '../utils/feature-flags-from-props';
 import { RenderTracking } from '../utils/performance/components/RenderTracking';
 import { BaseThemeWrapper } from './BaseThemeWrapper';
+import { EditorInternalContainerCompiled } from './editor-internal-compiled';
+import { EditorInternalContainerEmotion } from './editor-internal-emotion';
 import { getBaseFontSize } from './utils/getBaseFontSize';
-var editorContainerStyles = css({
-  position: 'relative',
-  width: '100%',
-  height: '100%'
-});
+var EditorInternalContainerMigration = componentWithCondition(function () {
+  return expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true);
+}, EditorInternalContainerCompiled, EditorInternalContainerEmotion);
 var DEFAULT_VALUE_PROP_TO_IGNORE = ['defaultValue'];
 
 /**
@@ -63,23 +58,21 @@ export var EditorInternal = /*#__PURE__*/memo(function (_ref) {
     nodeViewPortalProviderAPI = _usePortalProvider4[0],
     NodeViewPortalRenderer = _usePortalProvider4[1];
   var propsToIgnore = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? DEFAULT_VALUE_PROP_TO_IGNORE : ['defaultValue'];
-  return jsx(Fragment, null, renderTrackingEnabled && jsx(RenderTracking, {
+  return /*#__PURE__*/React.createElement(Fragment, null, renderTrackingEnabled && /*#__PURE__*/React.createElement(RenderTracking, {
     componentProps: props,
     action: ACTION.RE_RENDERED,
     actionSubject: ACTION_SUBJECT.EDITOR,
     handleAnalyticsEvent: handleAnalyticsEvent,
     propsToIgnore: propsToIgnore,
     useShallow: useShallow
-  }), jsx(ErrorBoundary, {
+  }), /*#__PURE__*/React.createElement(ErrorBoundary, {
     errorTracking: true,
     createAnalyticsEvent: createAnalyticsEvent,
     contextIdentifierProvider: props.contextIdentifierProvider,
     featureFlags: featureFlags
-  }, jsx("div", {
-    css: editorContainerStyles
-  }, jsx(EditorContext, {
+  }, /*#__PURE__*/React.createElement(EditorInternalContainerMigration, null, /*#__PURE__*/React.createElement(EditorContext, {
     editorActions: editorActions
-  }, jsx(IntlProviderIfMissingWrapper, null, jsx(Fragment, null, jsx(ReactEditorViewNext, {
+  }, /*#__PURE__*/React.createElement(IntlProviderIfMissingWrapper, null, /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ReactEditorViewNext, {
     editorProps: overriddenEditorProps,
     createAnalyticsEvent: createAnalyticsEvent,
     portalProviderAPI: portalProviderAPI,
@@ -100,9 +93,9 @@ export var EditorInternal = /*#__PURE__*/memo(function (_ref) {
         dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
         editorRef = _ref2.editorRef,
         editorAPI = _ref2.editorAPI;
-      return jsx(BaseThemeWrapper, {
+      return /*#__PURE__*/React.createElement(BaseThemeWrapper, {
         baseFontSize: getBaseFontSize(props.appearance, props.contentMode)
-      }, jsx(AppearanceComponent, {
+      }, /*#__PURE__*/React.createElement(AppearanceComponent, {
         innerRef: editorRef,
         editorAPI: editorAPI
         // Ignored via go/ees005
@@ -143,5 +136,5 @@ export var EditorInternal = /*#__PURE__*/memo(function (_ref) {
         preset: preset
       }));
     }
-  }), jsx(PortalRenderer, null), jsx(NodeViewPortalRenderer, null)))))));
+  }), /*#__PURE__*/React.createElement(PortalRenderer, null), /*#__PURE__*/React.createElement(NodeViewPortalRenderer, null)))))));
 });

package/dist/esm/ui/Appearance/FullPage/FullPageToolbar.js

@@ -4,26 +4,13 @@ import { injectIntl } from 'react-intl';
 import { ContextPanelConsumer } from '@atlaskit/editor-common/context-panel';
 import { fullPageMessages as messages } from '@atlaskit/editor-common/messages';
 import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
-import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { ToolbarPortalMountPoint, useToolbarPortal } from '../../Toolbar/ToolbarPortal';
 import { ToolbarWithSizeDetector as Toolbar } from '../../Toolbar/ToolbarWithSizeDetector';
 import { BeforePrimaryToolbarWrapper } from './BeforeWrapper';
 import { MainToolbarForFirstChildWrapper, MainToolbarForSecondChildWrapper } from './CustomToolbarWrapper';
-import { CustomToolbarWrapperCompiled, MainToolbarIconBeforeCompiled, NonCustomToolbarWrapperCompiled } from './FullPageToolbar-compiled';
-import { CustomToolbarWrapperEmotion, MainToolbarIconBeforeEmotion, NonCustomToolbarWrapperEmotion } from './FullPageToolbar-emotion';
-import { MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT } from './MainToolbar';
+import { CustomToolbarWrapperMigration, MainToolbarIconBeforeMigration, MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, NonCustomToolbarWrapperMigration } from './MainToolbar';
 import { MainToolbarWrapper } from './MainToolbarWrapper';
-var NonCustomToolbarWrapperMigration = componentWithCondition(function () {
-  return expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true);
-}, NonCustomToolbarWrapperCompiled, NonCustomToolbarWrapperEmotion);
-var MainToolbarIconBeforeMigration = componentWithCondition(function () {
-  return expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true);
-}, MainToolbarIconBeforeCompiled, MainToolbarIconBeforeEmotion);
-var CustomToolbarWrapperMigration = componentWithCondition(function () {
-  return expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true);
-}, CustomToolbarWrapperCompiled, CustomToolbarWrapperEmotion);
 export var EditorToolbar = /*#__PURE__*/React.memo(function (props) {
   var _props$primaryToolbar, _useToolbarPortal, _props$customPrimaryT;
   var _useState = useState(false),

package/dist/esm/ui/Appearance/FullPage/{FullPageToolbar-compiled.js → MainToolbar-compiled.js}

@@ -1,37 +1,40 @@
-/* FullPageToolbar-compiled.tsx generated by @compiled/babel-plugin v0.39.1 */
+/* MainToolbar-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 `FullPageToolbar.tsx`.
+ * Used via `componentWithCondition` in `MainToolbar.tsx`.
  *
  * Cleanup: delete this file once the experiment has shipped.
  */
-import "./FullPageToolbar-compiled.compiled.css";
-import * as React from 'react';
+import "./MainToolbar-compiled.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-var nonCustomToolbarCompiledStyles = {
+import React from 'react';
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+
+var nonCustomToolbarWrapperCompiledStyles = {
   root: "_4cvr1h6o _1e0c1txw _16jlkb7n"
 };
-var mainToolbarIconBeforeCompiledStyles = {
-  root: "_19pkpxbi _2hwxpxbi _otyrpxbi _18u0pxbi _4t3ixy5q _1bsbxy5q _mlgzkb7n _tuuhkb7n"
-};
-var customToolbarCompiledStyles = {
-  root: "_4cvr1h6o _1e0c1txw"
-};
 export var NonCustomToolbarWrapperCompiled = function NonCustomToolbarWrapperCompiled(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
-    className: ax([nonCustomToolbarCompiledStyles.root])
+    className: ax([nonCustomToolbarWrapperCompiledStyles.root])
   }, children);
 };
-export var MainToolbarIconBeforeCompiled = function MainToolbarIconBeforeCompiled(_ref2) {
+var customToolbarWrapperCompiledStyles = {
+  root: "_4cvr1h6o _1e0c1txw"
+};
+export var CustomToolbarWrapperCompiled = function CustomToolbarWrapperCompiled(_ref2) {
   var children = _ref2.children;
   return /*#__PURE__*/React.createElement("div", {
-    className: ax([mainToolbarIconBeforeCompiledStyles.root])
+    className: ax([customToolbarWrapperCompiledStyles.root])
   }, children);
 };
-export var CustomToolbarWrapperCompiled = function CustomToolbarWrapperCompiled(_ref3) {
+var mainToolbarIconBeforeCompiledStyles = {
+  root: "_19pkpxbi _2hwxpxbi _otyrpxbi _18u0pxbi _4t3ixy5q _1bsbxy5q _mlgzkb7n _tuuhkb7n"
+};
+export var MainToolbarIconBeforeCompiled = function MainToolbarIconBeforeCompiled(_ref3) {
   var children = _ref3.children;
   return /*#__PURE__*/React.createElement("div", {
-    className: ax([customToolbarCompiledStyles.root])
+    className: ax([mainToolbarIconBeforeCompiledStyles.root])
   }, children);
 };

package/dist/esm/ui/Appearance/FullPage/{FullPageToolbar-emotion.js → MainToolbar-emotion.js}

@@ -5,46 +5,47 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  */
 /**
  * Emotion fallback branch of the `platform_editor_core_non_ecc_static_css` experiment.
- * Used via `componentWithCondition` in `FullPageToolbar.tsx`.
+ * Used via `componentWithCondition` in `MainToolbar.tsx`.
  *
  * Cleanup: delete this file once the experiment has shipped.
  */
+import React from 'react';
 
-// 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
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- intentional: emotion fallback for compiled migration
 import { css, jsx } from '@emotion/react';
 import { akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
-var nonCustomToolbarWrapperStyle = css({
+var nonCustomToolbarWrapperEmotionStyles = css({
   alignItems: 'center',
   display: 'flex',
   flexGrow: 1
 });
-var mainToolbarIconBeforeStyle = css(_defineProperty({
-  margin: "var(--ds-space-200, 16px)",
-  height: "var(--ds-space-400, 32px)",
-  width: "var(--ds-space-400, 32px)"
-}, "@media (max-width: ".concat(akEditorMobileMaxWidth, "px)"), {
-  gridColumn: 1,
-  gridRow: 1
-}));
-var customToolbarWrapperStyle = css({
-  alignItems: 'center',
-  display: 'flex'
-});
 export var NonCustomToolbarWrapperEmotion = function NonCustomToolbarWrapperEmotion(_ref) {
   var children = _ref.children;
   return jsx("div", {
-    css: nonCustomToolbarWrapperStyle
+    css: nonCustomToolbarWrapperEmotionStyles
   }, children);
 };
-export var MainToolbarIconBeforeEmotion = function MainToolbarIconBeforeEmotion(_ref2) {
+var customToolbarWrapperEmotionStyles = css({
+  alignItems: 'center',
+  display: 'flex'
+});
+export var CustomToolbarWrapperEmotion = function CustomToolbarWrapperEmotion(_ref2) {
   var children = _ref2.children;
   return jsx("div", {
-    css: mainToolbarIconBeforeStyle
+    css: customToolbarWrapperEmotionStyles
   }, children);
 };
-export var CustomToolbarWrapperEmotion = function CustomToolbarWrapperEmotion(_ref3) {
+var mainToolbarIconBeforeEmotionStyles = css(_defineProperty({
+  margin: "var(--ds-space-200, 16px)",
+  height: "var(--ds-space-400, 32px)",
+  width: "var(--ds-space-400, 32px)"
+}, "@media (max-width: ".concat(akEditorMobileMaxWidth, "px)"), {
+  gridColumn: 1,
+  gridRow: 1
+}));
+export var MainToolbarIconBeforeEmotion = function MainToolbarIconBeforeEmotion(_ref3) {
   var children = _ref3.children;
   return jsx("div", {
-    css: customToolbarWrapperStyle
+    css: mainToolbarIconBeforeEmotionStyles
   }, children);
 };

package/dist/esm/ui/Appearance/FullPage/MainToolbar.js

@@ -1,66 +1,14 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/* eslint-disable @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766 */
-import { css } from '@emotion/react';
-import { akEditorMobileMaxWidth, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT } from '@atlaskit/editor-shared-styles';
+import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { CustomToolbarWrapperCompiled, MainToolbarIconBeforeCompiled, NonCustomToolbarWrapperCompiled } from './MainToolbar-compiled';
+import { CustomToolbarWrapperEmotion, MainToolbarIconBeforeEmotion, NonCustomToolbarWrapperEmotion } from './MainToolbar-emotion';
 export var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 868;
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var mainToolbarIconBeforeStyle = css(_defineProperty({
-  margin: "var(--ds-space-200, 16px)",
-  height: "var(--ds-space-400, 32px)",
-  width: "var(--ds-space-400, 32px)"
-}, "@media (max-width: ".concat(akEditorMobileMaxWidth, "px)"), {
-  gridColumn: 1,
-  gridRow: 1
-}));
-var mainToolbarFirstChild = css(_defineProperty({
-  display: 'flex',
-  flexGrow: 1
-}, "@media (max-width: ".concat(akEditorMobileMaxWidth, "px)"), {
-  gridColumn: 1,
-  gridRow: 1
-}));
-var mainToolbarFirstChildTowLine = function mainToolbarFirstChildTowLine() {
-  var editorToolbarHeight = FULL_PAGE_EDITOR_TOOLBAR_HEIGHT();
-  return css(_defineProperty({}, "@media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px)"), {
-    flex: '1 1 100%',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    height: editorToolbarHeight,
-    justifyContent: 'flex-end',
-    minWidth: 'fit-content'
-  }));
-};
-export var mainToolbarFirstChildStyle = function mainToolbarFirstChildStyle(twoLineEditorToolbar) {
-  return [mainToolbarFirstChild, twoLineEditorToolbar && mainToolbarFirstChildTowLine];
-};
-var mainToolbarSecondChild = css({
-  minWidth: 'fit-content'
-});
-var mainToolbarSecondChildTwoLine = function mainToolbarSecondChildTwoLine() {
-  var editorToolbarHeight = FULL_PAGE_EDITOR_TOOLBAR_HEIGHT();
-  return css(_defineProperty({}, "@media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px)"), {
-    display: 'flex',
-    flexGrow: 1,
-    flex: '1 1 100%',
-    margin: 'auto',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    height: editorToolbarHeight,
-    minWidth: 0
-  }));
-};
-export var mainToolbarSecondChildStyle = function mainToolbarSecondChildStyle(twoLineEditorToolbar) {
-  return [mainToolbarSecondChild, twoLineEditorToolbar && mainToolbarSecondChildTwoLine];
-};
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var nonCustomToolbarWrapperStyle = css({
-  alignItems: 'center',
-  display: 'flex',
-  flexGrow: 1
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var customToolbarWrapperStyle = css({
-  alignItems: 'center',
-  display: 'flex'
-});
+export var NonCustomToolbarWrapperMigration = componentWithCondition(function () {
+  return expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true);
+}, NonCustomToolbarWrapperCompiled, NonCustomToolbarWrapperEmotion);
+export var CustomToolbarWrapperMigration = componentWithCondition(function () {
+  return expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true);
+}, CustomToolbarWrapperCompiled, CustomToolbarWrapperEmotion);
+export var MainToolbarIconBeforeMigration = componentWithCondition(function () {
+  return expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true);
+}, MainToolbarIconBeforeCompiled, MainToolbarIconBeforeEmotion);

package/dist/esm/ui/Appearance/FullPage/MainToolbarWrapper-compiled.compiled.css

@@ -0,0 +1,14 @@
+
+._v56419ab{transition:box-shadow .2s cubic-bezier(.15,1,.3,1)}
+._n7zlia51{border-bottom:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._16qs1nax{box-shadow:var(--ds-shadow-overflow,0 0 8px #1e1f2128,0 0 1px #1e1f211e)}
+._16qsglyw{box-shadow:none}
+._1e0c1txw{display:flex}
+._1krdgrf3 object{height:0!important}
+._1o9zidpf{flex-shrink:0}
+._1pby16oo{z-index:510}
+._3pwj1osq span svg{max-width:100%}
+._4cvr1h6o{align-items:center}
+._4t3i17qo{height:var(--ak-editor-fullpage-toolbar-height)}
+._bfhkvuon{background-color:var(--ds-surface,#fff)}
+._kqswh2mm{position:relative}
+@media (max-width:868px){._1s5v1g80{flex-wrap:wrap}._8o38zpre{height:calc(var(--ak-editor-fullpage-toolbar-height)*2)}}

package/dist/esm/ui/Appearance/FullPage/MainToolbarWrapper-compiled.js

@@ -0,0 +1,29 @@
+/* MainToolbarWrapper-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 `MainToolbarWrapper.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+import "./MainToolbarWrapper-compiled.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+
+var styles = {
+  base: "_v56419ab _n7zlia51 _kqswh2mm _4cvr1h6o _16qsglyw _1pby16oo _1e0c1txw _4t3i17qo _1o9zidpf _bfhkvuon _1krdgrf3",
+  flexibleIconSize: "_3pwj1osq",
+  keyline: "_16qs1nax",
+  twoLine: "_1s5v1g80 _8o38zpre"
+};
+export var MainToolbarWrapperCompiled = function MainToolbarWrapperCompiled(_ref) {
+  var showKeyline = _ref.showKeyline,
+    twoLineEditorToolbar = _ref.twoLineEditorToolbar,
+    children = _ref.children,
+    testId = _ref['data-testid'];
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId,
+    className: ax([styles.base, styles.flexibleIconSize, showKeyline && styles.keyline, twoLineEditorToolbar && styles.twoLine])
+  }, children);
+};

package/dist/esm/ui/Appearance/FullPage/MainToolbarWrapper-emotion.js

@@ -0,0 +1,62 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/**
+ * Emotion fallback branch of the `platform_editor_core_non_ecc_static_css` experiment.
+ * Used via `componentWithCondition` in `MainToolbarWrapper.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+import React from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- intentional: emotion fallback for compiled migration
+import { css, jsx } from '@emotion/react';
+import { akEditorFloatingDialogZIndex, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
+import { MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT } from './MainToolbar';
+var baseToolbarStyles = css({
+  position: 'relative',
+  alignItems: 'center',
+  boxShadow: 'none',
+  borderBottom: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #0B120E24)"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  transition: "box-shadow 200ms ".concat(akEditorSwoopCubicBezier),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  zIndex: akEditorFloatingDialogZIndex,
+  display: 'flex',
+  height: 'var(--ak-editor-fullpage-toolbar-height)',
+  flexShrink: 0,
+  backgroundColor: "var(--ds-surface, #FFFFFF)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& object': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    height: '0 !important'
+  }
+});
+var flexibleIconSize = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& span svg': {
+    maxWidth: '100%'
+  }
+});
+var mainToolbarWithKeyline = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  boxShadow: "var(--ds-shadow-overflow, 0px 0px 8px #1E1F2128, 0px 0px 1px #1E1F211e)"
+});
+var mainToolbarTwoLineStyle = css(_defineProperty({}, "@media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px)"), {
+  flexWrap: 'wrap',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  height: "calc(var(--ak-editor-fullpage-toolbar-height) * 2)"
+}));
+export var MainToolbarWrapperEmotion = function MainToolbarWrapperEmotion(_ref) {
+  var showKeyline = _ref.showKeyline,
+    twoLineEditorToolbar = _ref.twoLineEditorToolbar,
+    children = _ref.children,
+    testId = _ref['data-testid'];
+  return jsx("div", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    css: [baseToolbarStyles, flexibleIconSize, showKeyline && mainToolbarWithKeyline, twoLineEditorToolbar && mainToolbarTwoLineStyle],
+    "data-testid": testId
+  }, children);
+};