@atlaskit/editor-core 219.9.14 → 219.9.15

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-core
 
+## 219.9.15
+
+### Patch Changes
+
+- [`e9de5e5d2942f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e9de5e5d2942f) -
+  Migrate UI appearance fullpage styles
+- Updated dependencies
+
 ## 219.9.14
 
 ### Patch Changes

package/dist/cjs/ui/Appearance/FullPage/BeforeWrapper-compiled.compiled.css

@@ -0,0 +1,4 @@
+._16jlkb7n{flex-grow:1}
+._1bahesu3{justify-content:flex-end}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}

package/dist/cjs/ui/Appearance/FullPage/BeforeWrapper-compiled.js

@@ -0,0 +1,29 @@
+/* BeforeWrapper-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 `BeforeWrapper.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BeforePrimaryToolbarWrapperCompiled = void 0;
+require("./BeforeWrapper-compiled.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var styles = {
+  beforePrimaryToolbarPluginWrapper: "_1e0c1txw _16jlkb7n _1bahesu3 _4cvr1h6o"
+};
+// Duplicate of the wrapper from `editor-plugins/before-primary-toolbar` used
+// only in `FullPageToolbar` to decouple the plugin from the main toolbar
+var BeforePrimaryToolbarWrapperCompiled = exports.BeforePrimaryToolbarWrapperCompiled = function BeforePrimaryToolbarWrapperCompiled(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": 'before-primary-toolbar-components-plugin',
+    className: (0, _runtime.ax)([styles.beforePrimaryToolbarPluginWrapper])
+  }, props.beforePrimaryToolbarComponents);
+};

package/dist/cjs/ui/Appearance/FullPage/BeforeWrapper-emotion.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BeforePrimaryToolbarWrapperEmotion = void 0;
+var _react = require("@emotion/react");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/**
+ * Emotion fallback branch of the `platform_editor_core_non_ecc_static_css` experiment.
+ * Used via `componentWithCondition` in `BeforeWrapper.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
+
+var beforePrimaryToolbarPluginWrapperStyles = (0, _react.css)({
+  display: 'flex',
+  flexGrow: 1,
+  justifyContent: 'flex-end',
+  alignItems: 'center'
+});
+// Duplicate of the wrapper from `editor-plugins/before-primary-toolbar` used
+// only in `FullPageToolbar` to decouple the plugin from the main toolbar
+var BeforePrimaryToolbarWrapperEmotion = exports.BeforePrimaryToolbarWrapperEmotion = function BeforePrimaryToolbarWrapperEmotion(props) {
+  return (0, _react.jsx)("div", {
+    css: beforePrimaryToolbarPluginWrapperStyles,
+    "data-testid": 'before-primary-toolbar-components-plugin'
+  }, props.beforePrimaryToolbarComponents);
+};

package/dist/cjs/ui/Appearance/FullPage/BeforeWrapper.js

@@ -4,25 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BeforePrimaryToolbarWrapper = void 0;
-var _react = require("@emotion/react");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// 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
-
-var beforePrimaryToolbarPluginWrapperStyles = (0, _react.css)({
-  display: 'flex',
-  flexGrow: 1,
-  justifyContent: 'flex-end',
-  alignItems: 'center'
-});
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _BeforeWrapperCompiled = require("./BeforeWrapper-compiled");
+var _BeforeWrapperEmotion = require("./BeforeWrapper-emotion");
 // Duplicate of the wrapper from `editor-plugins/before-primary-toolbar` used
 // only in `FullPageToolbar` to decouple the plugin from the main toolbar
-var BeforePrimaryToolbarWrapper = exports.BeforePrimaryToolbarWrapper = function BeforePrimaryToolbarWrapper(props) {
-  return (0, _react.jsx)("div", {
-    css: beforePrimaryToolbarPluginWrapperStyles,
-    "data-testid": 'before-primary-toolbar-components-plugin'
-  }, props.beforePrimaryToolbarComponents);
-};
+var BeforePrimaryToolbarWrapper = exports.BeforePrimaryToolbarWrapper = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
+  return (0, _expValEquals.expValEquals)('platform_editor_core_non_ecc_static_css', 'isEnabled', true);
+}, _BeforeWrapperCompiled.BeforePrimaryToolbarWrapperCompiled, _BeforeWrapperEmotion.BeforePrimaryToolbarWrapperEmotion);

package/dist/cjs/ui/Appearance/FullPage/CustomToolbarWrapper-compiled.compiled.css

@@ -0,0 +1,4 @@
+._16jlkb7n{flex-grow:1}
+._1e0c1txw{display:flex}
+._1ul91ns9{min-width:-moz-fit-content;min-width:fit-content}
+@media (max-width:868px){._u89dkb7n{flex-grow:1}._9gudkb7n{flex-shrink:1}._1hoh1osq{flex-basis:100%}._1tjb1wug{margin-top:auto}._1rg31wug{margin-right:auto}._1jzq1wug{margin-bottom:auto}._cn5x1wug{margin-left:auto}._87t41txw{display:flex}._8o3817qo{height:var(--ak-editor-fullpage-toolbar-height)}._1s2pidpf{min-width:0}._lhl4esu3{justify-content:flex-end}._1s2p1ns9{min-width:-moz-fit-content;min-width:fit-content}}

package/dist/cjs/ui/Appearance/FullPage/CustomToolbarWrapper-compiled.js

@@ -0,0 +1,56 @@
+/* CustomToolbarWrapper-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 `CustomToolbarWrapper.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MainToolbarForSecondChildWrapperCompiled = exports.MainToolbarForFirstChildWrapperCompiled = void 0;
+require("./CustomToolbarWrapper-compiled.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var firstChildStyles = {
+  base: "_1e0c1txw _16jlkb7n",
+  twoLine: "_u89dkb7n _9gudkb7n _1hoh1osq _8o3817qo _lhl4esu3 _1s2p1ns9"
+};
+var secondChildStyles = {
+  base: "_1ul91ns9",
+  twoLine: "_u89dkb7n _9gudkb7n _1hoh1osq _1tjb1wug _1rg31wug _1jzq1wug _cn5x1wug _87t41txw _8o3817qo _1s2pidpf"
+};
+
+// ---------------- First child wrapper ----------------
+var MainToolbarForFirstChildWrapperCompiled = exports.MainToolbarForFirstChildWrapperCompiled = function MainToolbarForFirstChildWrapperCompiled(_ref) {
+  var twoLineEditorToolbar = _ref.twoLineEditorToolbar,
+    children = _ref.children,
+    role = _ref.role,
+    ariaLabel = _ref['aria-label'],
+    testId = _ref['data-testid'];
+  return /*#__PURE__*/React.createElement("div", {
+    role: role,
+    "aria-label": ariaLabel,
+    "data-testid": testId,
+    className: (0, _runtime.ax)([firstChildStyles.base, twoLineEditorToolbar && firstChildStyles.twoLine])
+  }, children);
+};
+
+// ---------------- Second child wrapper ----------------
+var MainToolbarForSecondChildWrapperCompiled = exports.MainToolbarForSecondChildWrapperCompiled = function MainToolbarForSecondChildWrapperCompiled(_ref2) {
+  var twoLineEditorToolbar = _ref2.twoLineEditorToolbar,
+    children = _ref2.children,
+    role = _ref2.role,
+    ariaLabel = _ref2['aria-label'],
+    testId = _ref2['data-testid'];
+  return /*#__PURE__*/React.createElement("div", {
+    role: role,
+    "aria-label": ariaLabel,
+    "data-testid": testId,
+    className: (0, _runtime.ax)([secondChildStyles.base, twoLineEditorToolbar && secondChildStyles.twoLine])
+  }, children);
+};

package/dist/cjs/ui/Appearance/FullPage/CustomToolbarWrapper-emotion.js

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MainToolbarForSecondChildWrapperEmotion = exports.MainToolbarForFirstChildWrapperEmotion = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/**
+ * Emotion fallback branch of the `platform_editor_core_non_ecc_static_css` experiment.
+ * Used via `componentWithCondition` in `CustomToolbarWrapper.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
+
+// Pre-computed static styles for first- and second-child wrappers.
+// These contain no runtime logic and are safe for static-emotion mode.
+
+var firstChildStaticBase = (0, _react2.css)({
+  display: 'flex',
+  flexGrow: 1
+});
+
+// we can't avoid some kind of function call here, so we need to disable the rule
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+var firstChildStaticTwoLine = (0, _react2.css)({
+  '@media (max-width: 868px)': {
+    flex: '1 1 100%',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    height: 'var(--ak-editor-fullpage-toolbar-height)',
+    justifyContent: 'flex-end',
+    minWidth: 'fit-content'
+  }
+});
+var secondChildStaticBase = (0, _react2.css)({
+  minWidth: 'fit-content'
+});
+
+// we can't avoid some kind of function call here, so we need to disable the rule
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+var secondChildStaticTwoLine = (0, _react2.css)({
+  '@media (max-width: 868px)': {
+    display: 'flex',
+    flexGrow: 1,
+    flex: '1 1 100%',
+    margin: 'auto',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    height: 'var(--ak-editor-fullpage-toolbar-height)',
+    minWidth: 0
+  }
+});
+
+// ---------------- First child wrapper ----------------
+var MainToolbarForFirstChildWrapperEmotion = exports.MainToolbarForFirstChildWrapperEmotion = function MainToolbarForFirstChildWrapperEmotion(_ref) {
+  var twoLineEditorToolbar = _ref.twoLineEditorToolbar,
+    children = _ref.children,
+    role = _ref.role,
+    ariaLabel = _ref['aria-label'],
+    testId = _ref['data-testid'];
+  return (0, _react2.jsx)("div", {
+    css: [firstChildStaticBase, twoLineEditorToolbar && firstChildStaticTwoLine],
+    role: role,
+    "aria-label": ariaLabel,
+    "data-testid": testId
+  }, children);
+};
+
+// ---------------- Second child wrapper ----------------
+var MainToolbarForSecondChildWrapperEmotion = exports.MainToolbarForSecondChildWrapperEmotion = function MainToolbarForSecondChildWrapperEmotion(_ref2) {
+  var twoLineEditorToolbar = _ref2.twoLineEditorToolbar,
+    children = _ref2.children,
+    role = _ref2.role,
+    ariaLabel = _ref2['aria-label'],
+    testId = _ref2['data-testid'];
+  return (0, _react2.jsx)("div", {
+    css: [secondChildStaticBase, twoLineEditorToolbar && secondChildStaticTwoLine],
+    role: role,
+    "aria-label": ariaLabel,
+    "data-testid": testId
+  }, children);
+};

package/dist/cjs/ui/Appearance/FullPage/CustomToolbarWrapper.js

@@ -1,82 +1,19 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MainToolbarForSecondChildWrapper = exports.MainToolbarForFirstChildWrapper = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@emotion/react");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// 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
-
-// Pre-computed static styles for first- and second-child wrappers.
-// These contain no runtime logic and are safe for static-emotion mode.
-
-var firstChildStaticBase = (0, _react2.css)({
-  display: 'flex',
-  flexGrow: 1
-});
-
-// we can't avoid some kind of function call here, so we need to disable the rule
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-var firstChildStaticTwoLine = (0, _react2.css)({
-  '@media (max-width: 868px)': {
-    flex: '1 1 100%',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    height: 'var(--ak-editor-fullpage-toolbar-height)',
-    justifyContent: 'flex-end',
-    minWidth: 'fit-content'
-  }
-});
-var secondChildStaticBase = (0, _react2.css)({
-  minWidth: 'fit-content'
-});
-
-// we can't avoid some kind of function call here, so we need to disable the rule
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-var secondChildStaticTwoLine = (0, _react2.css)({
-  '@media (max-width: 868px)': {
-    display: 'flex',
-    flexGrow: 1,
-    flex: '1 1 100%',
-    margin: 'auto',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    height: 'var(--ak-editor-fullpage-toolbar-height)',
-    minWidth: 0
-  }
-});
-
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _CustomToolbarWrapperCompiled = require("./CustomToolbarWrapper-compiled");
+var _CustomToolbarWrapperEmotion = require("./CustomToolbarWrapper-emotion");
 // ---------------- First child wrapper ----------------
-var MainToolbarForFirstChildWrapper = exports.MainToolbarForFirstChildWrapper = function MainToolbarForFirstChildWrapper(_ref) {
-  var twoLineEditorToolbar = _ref.twoLineEditorToolbar,
-    children = _ref.children,
-    role = _ref.role,
-    ariaLabel = _ref['aria-label'],
-    testId = _ref['data-testid'];
-  return (0, _react2.jsx)("div", {
-    css: [firstChildStaticBase, twoLineEditorToolbar && firstChildStaticTwoLine],
-    role: role,
-    "aria-label": ariaLabel,
-    "data-testid": testId
-  }, children);
-};
+var MainToolbarForFirstChildWrapper = exports.MainToolbarForFirstChildWrapper = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
+  return (0, _expValEquals.expValEquals)('platform_editor_core_non_ecc_static_css', 'isEnabled', true);
+}, _CustomToolbarWrapperCompiled.MainToolbarForFirstChildWrapperCompiled, _CustomToolbarWrapperEmotion.MainToolbarForFirstChildWrapperEmotion);
 
 // ---------------- Second child wrapper ----------------
-var MainToolbarForSecondChildWrapper = exports.MainToolbarForSecondChildWrapper = function MainToolbarForSecondChildWrapper(_ref2) {
-  var twoLineEditorToolbar = _ref2.twoLineEditorToolbar,
-    children = _ref2.children,
-    role = _ref2.role,
-    ariaLabel = _ref2['aria-label'],
-    testId = _ref2['data-testid'];
-  return (0, _react2.jsx)("div", {
-    css: [secondChildStaticBase, twoLineEditorToolbar && secondChildStaticTwoLine],
-    role: role,
-    "aria-label": ariaLabel,
-    "data-testid": testId
-  }, children);
-};
+var MainToolbarForSecondChildWrapper = exports.MainToolbarForSecondChildWrapper = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
+  return (0, _expValEquals.expValEquals)('platform_editor_core_non_ecc_static_css', 'isEnabled', true);
+}, _CustomToolbarWrapperCompiled.MainToolbarForSecondChildWrapperCompiled, _CustomToolbarWrapperEmotion.MainToolbarForSecondChildWrapperEmotion);

package/dist/cjs/ui/Appearance/FullPage/FullPage-compiled.compiled.css

@@ -0,0 +1,5 @@
+._1e0c1txw{display:flex}
+._1ul95x59{min-width:340px}
+._2lx21bp4{flex-direction:column}
+._4t3i1osq{height:100%}
+._vchhusvi{box-sizing:border-box}

package/dist/cjs/ui/Appearance/FullPage/FullPage-compiled.js

@@ -0,0 +1,32 @@
+/* FullPage-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 `FullPage.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FullPageEditorWrapperCompiled = void 0;
+require("./FullPage-compiled.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var styles = {
+  root: "_1ul95x59 _4t3i1osq _1e0c1txw _2lx21bp4 _vchhusvi"
+};
+var FullPageEditorWrapperCompiled = exports.FullPageEditorWrapperCompiled = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    style = _ref.style;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: (0, _runtime.ax)([styles.root, className]),
+    style: style
+  }, children);
+});

package/dist/cjs/ui/Appearance/FullPage/FullPage-emotion.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FullPageEditorWrapperEmotion = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _StyledComponents = require("./StyledComponents");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/**
+ * Emotion fallback branch of the `platform_editor_core_non_ecc_static_css` experiment.
+ * Used via `componentWithCondition` in `FullPage.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
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- intentional: emotion fallback branch imports from StyledComponents
+
+var FullPageEditorWrapperEmotion = exports.FullPageEditorWrapperEmotion = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    style = _ref.style;
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-classname-prop -- intentional: emotion fallback branch reuses StyledComponents style
+    (0, _react2.jsx)("div", {
+      css: _StyledComponents.fullPageEditorWrapper,
+      ref: ref,
+      className: className,
+      style: style
+    }, children)
+  );
+});

package/dist/cjs/ui/Appearance/FullPage/FullPage.js

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.FullPageEditor = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
 var _browser = require("@atlaskit/editor-common/browser");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _ssrMeasures = require("@atlaskit/editor-common/performance/ssr-measures");
@@ -16,22 +15,20 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _getPrimaryToolbarComponents = require("../../Toolbar/getPrimaryToolbarComponents");
+var _FullPageCompiled = require("./FullPage-compiled");
+var _FullPageEmotion = require("./FullPage-emotion");
 var _FullPageContentArea = require("./FullPageContentArea");
 var _FullPageToolbar = require("./FullPageToolbar");
 var _FullPageToolbarNext = require("./FullPageToolbarNext");
-var _StyledComponents = require("./StyledComponents");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// 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
-
 var SSR_TRACE_SEGMENT_NAME = 'reactEditorView/fullPageAppearance';
+var FullPageEditorWrapperMigration = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
+  return (0, _expValEquals.expValEquals)('platform_editor_core_non_ecc_static_css', 'isEnabled', true);
+}, _FullPageCompiled.FullPageEditorWrapperCompiled, _FullPageEmotion.FullPageEditorWrapperEmotion);
 var useShowKeyline = function useShowKeyline(contentAreaRef) {
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -154,23 +151,25 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
   }
   var isToolbarAIFCEnabled = Boolean(editorAPI === null || editorAPI === void 0 ? void 0 : editorAPI.toolbar);
   var popupsBoundariesElement = props.popupsBoundariesElement || (scrollContentContainerRef === null || scrollContentContainerRef === void 0 || (_scrollContentContain = scrollContentContainerRef.current) === null || _scrollContentContain === void 0 ? void 0 : _scrollContentContain.containerArea) || undefined;
-  return (0, _react2.jsx)(_ssrMeasures.SSRRenderMeasure, {
+  return /*#__PURE__*/_react.default.createElement(_ssrMeasures.SSRRenderMeasure, {
     segmentName: SSR_TRACE_SEGMENT_NAME,
     startTimestampRef: firstRenderStartTimestampRef,
     onSSRMeasure: props.onSSRMeasure
-  }, (0, _react2.jsx)(_ui.ContextPanelWidthProvider, null, (0, _react2.jsx)("div", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    css: _StyledComponents.fullPageEditorWrapper
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
+  }, /*#__PURE__*/_react.default.createElement(_ui.ContextPanelWidthProvider, null, /*#__PURE__*/_react.default.createElement(FullPageEditorWrapperMigration
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , {
     className: "akEditor",
-    ref: wrapperElementRef,
-    style: {
+    ref: wrapperElementRef
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style:
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props
+    {
       '--ak-editor-fullpage-toolbar-height':
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       (0, _editorSharedStyles.FULL_PAGE_EDITOR_TOOLBAR_HEIGHT)(isToolbarAIFCEnabled)
     }
-  }, !isEditorToolbarHidden && (isToolbarAIFCEnabled ? (0, _react2.jsx)(_FullPageToolbarNext.FullPageToolbarNext, {
+  }, !isEditorToolbarHidden && (isToolbarAIFCEnabled ? /*#__PURE__*/_react.default.createElement(_FullPageToolbarNext.FullPageToolbarNext, {
     disabled: !!props.disabled || !hasHadInteraction && (0, _expValEquals.expValEquals)('platform_editor_default_toolbar_state', 'isEnabled', true),
     disabledWithoutInteractionLogic: !!props.disabled,
     toolbarDockingPosition: toolbarDockingPosition !== null && toolbarDockingPosition !== void 0 ? toolbarDockingPosition : toolbarDocking,
@@ -182,7 +181,7 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
     popupsScrollableElement: props.popupsScrollableElement,
     showKeyline: showKeyline,
     customPrimaryToolbarComponents: props.customPrimaryToolbarComponents
-  }) : (0, _react2.jsx)(_FullPageToolbar.FullPageToolbar, {
+  }) : /*#__PURE__*/_react.default.createElement(_FullPageToolbar.FullPageToolbar, {
     appearance: props.appearance,
     editorAPI: editorAPI,
     beforeIcon: props.primaryToolbarIconBefore,
@@ -209,7 +208,7 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
     providerFactory: props.providerFactory,
     showKeyline: showKeyline,
     featureFlags: props.featureFlags
-  })), (0, _react2.jsx)(_FullPageContentArea.FullPageContentArea, {
+  })), /*#__PURE__*/_react.default.createElement(_FullPageContentArea.FullPageContentArea, {
     editorAPI: editorAPI,
     ref: scrollContentContainerRef,
     appearance: props.appearance,

package/dist/cjs/ui/Appearance/FullPage/FullPageToolbar-compiled.compiled.css

@@ -0,0 +1,10 @@
+._16jlkb7n{flex-grow:1}
+._18u0pxbi{margin-left:var(--ds-space-200,1pc)}
+._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
+._1bsbxy5q{width:var(--ds-space-400,2pc)}
+._1e0c1txw{display:flex}
+._2hwxpxbi{margin-right:var(--ds-space-200,1pc)}
+._4cvr1h6o{align-items:center}
+._4t3ixy5q{height:var(--ds-space-400,2pc)}
+._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}
+@media (max-width:0px){._mlgzkb7n{grid-column:1}._tuuhkb7n{grid-row:1}}

package/dist/cjs/ui/Appearance/FullPage/FullPageToolbar-compiled.js

@@ -0,0 +1,45 @@
+/* FullPageToolbar-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`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NonCustomToolbarWrapperCompiled = exports.MainToolbarIconBeforeCompiled = exports.CustomToolbarWrapperCompiled = void 0;
+require("./FullPageToolbar-compiled.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var nonCustomToolbarCompiledStyles = {
+  root: "_4cvr1h6o _1e0c1txw _16jlkb7n"
+};
+var mainToolbarIconBeforeCompiledStyles = {
+  root: "_19pkpxbi _2hwxpxbi _otyrpxbi _18u0pxbi _4t3ixy5q _1bsbxy5q _mlgzkb7n _tuuhkb7n"
+};
+var customToolbarCompiledStyles = {
+  root: "_4cvr1h6o _1e0c1txw"
+};
+var NonCustomToolbarWrapperCompiled = exports.NonCustomToolbarWrapperCompiled = function NonCustomToolbarWrapperCompiled(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([nonCustomToolbarCompiledStyles.root])
+  }, children);
+};
+var MainToolbarIconBeforeCompiled = exports.MainToolbarIconBeforeCompiled = function MainToolbarIconBeforeCompiled(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([mainToolbarIconBeforeCompiledStyles.root])
+  }, children);
+};
+var CustomToolbarWrapperCompiled = exports.CustomToolbarWrapperCompiled = function CustomToolbarWrapperCompiled(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([customToolbarCompiledStyles.root])
+  }, children);
+};