@atlaskit/editor-plugin-extension 1.14.17 → 1.15.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @atlaskit/editor-plugin-extension
 
+## 1.15.0
+
+### Minor Changes
+
+- [#151190](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/151190)
+  [`a3723b1cdede2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a3723b1cdede2) -
+  [ux] [ED-25037] this change bumps @atlaskit/adf-schema from 40.9.0 to 40.9.4 which makes the
+  blockquote selectable, adds missing marks to the PM node spec and fixes a bug that converted
+  pasted external images to media groups.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.14.18
+
+### Patch Changes
+
+- [#149558](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/149558)
+  [`5e8619ac0f6e4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5e8619ac0f6e4) -
+  [ux] [ED-25085] Migrate typography \
+
+  editor-plugin-media:
+
+  - replace caption placeholder span with button
+  - replace x between width and height pixel entry with symbol × \
+
+  tmp-editor-statsig:
+
+  - Add experiment `platform_editor_typography_migration_ugc`
+
+- Updated dependencies
+
 ## 1.14.17
 
 ### Patch Changes

package/dist/cjs/ui/ConfigPanel/FieldMessages.js

@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _extensions = require("@atlaskit/editor-common/extensions");
 var _form = require("@atlaskit/form");
+var _primitives = require("@atlaskit/primitives");
 var _types = require("./types");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -42,11 +43,17 @@ function makeMarkup(fragment, key) {
         key: key
       }, children);
     case 'STRONG':
-      return /*#__PURE__*/_react.default.createElement("strong", {
+      return /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+        as: "strong",
+        color: "color.text.subtlest",
+        size: "UNSAFE_small",
         key: key
       }, children);
     case 'EM':
-      return /*#__PURE__*/_react.default.createElement("em", {
+      return /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+        as: "em",
+        color: "color.text.subtlest",
+        size: "UNSAFE_small",
         key: key
       }, children);
     case 'CODE':

package/dist/cjs/ui/ConfigPanel/Fields/Boolean.js

@@ -12,10 +12,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _checkbox = require("@atlaskit/checkbox");
 var _form = require("@atlaskit/form");
+var _primitives = require("@atlaskit/primitives");
 var _toggle = _interopRequireDefault(require("@atlaskit/toggle"));
 var _FieldMessages = _interopRequireDefault(require("../FieldMessages"));
 var _types = require("../types");
-var _RequiredIndicator = require("./common/RequiredIndicator");
 var _excluded = ["value"],
   _excluded2 = ["id", "value"];
 /**
@@ -119,10 +119,8 @@ function Toggle(_ref3) {
       css: toggleLabelStyles,
       id: id,
       htmlFor: id
-    }, label, isRequired ?
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    (0, _react2.jsx)("span", {
-      css: _RequiredIndicator.requiredIndicator,
+    }, label, isRequired ? (0, _react2.jsx)(_primitives.Text, {
+      color: "color.text.danger",
       "aria-hidden": "true"
     }, "*") : null), (0, _react2.jsx)(_toggle.default, (0, _extends2.default)({}, restFieldProps, {
       onChange: function onChange(event) {

package/dist/cjs/ui/ConfigPanel/Fields/ColorPicker.js

@@ -11,10 +11,10 @@ var _react2 = require("@emotion/react");
 var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _form = require("@atlaskit/form");
+var _primitives = require("@atlaskit/primitives");
 var _typography = require("@atlaskit/theme/typography");
 var _FieldMessages = _interopRequireDefault(require("../FieldMessages"));
 var _utils = require("../utils");
-var _RequiredIndicator = require("./common/RequiredIndicator");
 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) { (0, _defineProperty2.default)(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
@@ -398,10 +398,8 @@ var ColorPickerField = function ColorPickerField(_ref) {
       css: colorPickerWrapperStyles
     }, (0, _react2.jsx)("label", {
       css: colorPickerLabelStyles
-    }, label, isRequired &&
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    (0, _react2.jsx)("span", {
-      css: _RequiredIndicator.requiredIndicator,
+    }, label, isRequired && (0, _react2.jsx)(_primitives.Text, {
+      color: "color.text.danger",
       "aria-hidden": "true"
     }, "*")), (0, _react2.jsx)(ColorPicker, {
       name: name,

package/dist/cjs/ui/ConfigPanel/Fields/Fieldset.js

@@ -21,6 +21,7 @@ var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _extensions = require("@atlaskit/editor-common/extensions");
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _addCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/add-circle"));
 var _primitives = require("@atlaskit/primitives");
 var _sectionMessage = _interopRequireDefault(require("@atlaskit/section-message"));
@@ -246,7 +247,9 @@ var FieldsetField = /*#__PURE__*/function (_React$Component) {
       var children = this.renderActions();
       return (0, _react2.jsx)(_react.Fragment, null, error && (0, _react2.jsx)(FieldsetError, {
         message: error
-      }), (0, _react2.jsx)("div", null, options.showTitle && (0, _react2.jsx)("h5", null, label), (0, _react2.jsx)(FormComponent, {
+      }), (0, _react2.jsx)("div", null, (options === null || options === void 0 ? void 0 : options.showTitle) && (0, _react2.jsx)(_heading.default, {
+        size: "xsmall"
+      }, label), (0, _react2.jsx)(FormComponent, {
         fields: selectedFields,
         parentName: name,
         extensionManifest: extensionManifest,

package/dist/cjs/ui/ConfigPanel/Header.js

@@ -13,6 +13,7 @@ var _new = require("@atlaskit/button/new");
 var _extensions = require("@atlaskit/editor-common/extensions");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
+var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 /**
@@ -77,11 +78,11 @@ var itemTextStyles = (0, _react2.css)({
     textOverflow: 'ellipsis'
   }
 });
-var descriptionStyles = (0, _react2.css)({
-  marginBottom: "var(--ds-space-300, 24px)"
+var descriptionStyles = (0, _primitives.xcss)({
+  marginBottom: 'space.300'
 });
-var helpLinkStyles = (0, _react2.css)({
-  paddingTop: "var(--ds-space-150, 12px)"
+var helpLinkStyles = (0, _primitives.xcss)({
+  paddingTop: 'space.150'
 });
 var closeButtonWrapperStyles = (0, _react2.css)({
   width: buttonWidth,
@@ -131,18 +132,22 @@ var Header = function Header(_ref) {
     label: intl.formatMessage(_extensions.configPanelMessages.close),
     icon: _cross.default,
     onClick: onClose
-  }))), (description || documentationUrl) && (0, _react2.jsx)("p", {
-    css: descriptionStyles,
-    "data-testid": "config-panel-header-description"
-  }, description && (0, _react2.jsx)(_react.Fragment, null, description.replace(/([^.])$/, '$1.'), " "), documentationUrl && (enableHelpCTA ? (0, _react2.jsx)("p", {
-    css: helpLinkStyles
+  }))), (description || documentationUrl) && (0, _react2.jsx)(_primitives.Box, {
+    xcss: descriptionStyles
+  }, (0, _react2.jsx)(_primitives.Text, {
+    as: "p",
+    testId: "config-panel-header-description"
+  }, description && (0, _react2.jsx)(_react.Fragment, null, description.replace(/([^.])$/, '$1.'), " "), documentationUrl && (enableHelpCTA ? (0, _react2.jsx)(_primitives.Box, {
+    xcss: helpLinkStyles
+  }, (0, _react2.jsx)(_primitives.Text, {
+    as: "p"
   }, (0, _react2.jsx)(HelpLink, {
     documentationUrl: documentationUrl,
     label: intl.formatMessage(_extensions.configPanelMessages.help)
-  })) : (0, _react2.jsx)(HelpLink, {
+  }))) : (0, _react2.jsx)(HelpLink, {
     documentationUrl: documentationUrl,
     label: intl.formatMessage(_extensions.configPanelMessages.documentation)
-  }))));
+  })))));
 };
 var HelpLink = function HelpLink(_ref2) {
   var documentationUrl = _ref2.documentationUrl,

package/dist/cjs/ui/SaveIndicator/SaveIndicator.js

@@ -11,6 +11,7 @@ var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _extensions = require("@atlaskit/editor-common/extensions");
 var _checkCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/check-circle"));
+var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 /**
  * @jsxRuntime classic
@@ -37,8 +38,8 @@ var saveIndicatorContentStyles = (0, _react2.css)({
   boxShadow: "var(--ds-shadow-overlay, ".concat("0px 8px 12px rgba(9, 30, 66, 0.15), 0px 0px 1px rgba(9, 30, 66, 0.31)", ")"),
   borderRadius: '16px'
 });
-var saveIndicatorTextStyles = (0, _react2.css)({
-  paddingLeft: "var(--ds-space-075, 6px)"
+var saveIndicatorTextStyles = (0, _primitives.xcss)({
+  paddingLeft: 'space.075'
 });
 var SaveIndicator = exports.SaveIndicator = function SaveIndicator(_ref) {
   var children = _ref.children,
@@ -78,7 +79,7 @@ var SaveIndicator = exports.SaveIndicator = function SaveIndicator(_ref) {
     label: "Saving",
     primaryColor: "var(--ds-icon-success, ".concat(_colors.G300, ")"),
     size: "small"
-  }), (0, _react2.jsx)("span", {
-    css: saveIndicatorTextStyles
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _extensions.messages.saveIndicator)))));
+  }), (0, _react2.jsx)(_primitives.Box, {
+    xcss: saveIndicatorTextStyles
+  }, (0, _react2.jsx)(_primitives.Text, null, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _extensions.messages.saveIndicator))))));
 };

package/dist/es2019/ui/ConfigPanel/FieldMessages.js

@@ -2,6 +2,7 @@ import React, { Fragment, useMemo } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { configPanelMessages as messages } from '@atlaskit/editor-common/extensions';
 import { ErrorMessage, HelperMessage } from '@atlaskit/form';
+import { Text } from '@atlaskit/primitives';
 import { FieldTypeError, ValidationError } from './types';
 
 // sidestep XSS issues
@@ -36,11 +37,17 @@ function makeMarkup(fragment, key) {
         key: key
       }, children);
     case 'STRONG':
-      return /*#__PURE__*/React.createElement("strong", {
+      return /*#__PURE__*/React.createElement(Text, {
+        as: "strong",
+        color: "color.text.subtlest",
+        size: "UNSAFE_small",
         key: key
       }, children);
     case 'EM':
-      return /*#__PURE__*/React.createElement("em", {
+      return /*#__PURE__*/React.createElement(Text, {
+        as: "em",
+        color: "color.text.subtlest",
+        size: "UNSAFE_small",
         key: key
       }, children);
     case 'CODE':

package/dist/es2019/ui/ConfigPanel/Fields/Boolean.js

@@ -9,10 +9,10 @@ import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import { Checkbox as AKCheckbox } from '@atlaskit/checkbox';
 import { Field } from '@atlaskit/form';
+import { Text } from '@atlaskit/primitives';
 import AKToggle from '@atlaskit/toggle';
 import FieldMessages from '../FieldMessages';
 import { ValidationError } from '../types';
-import { requiredIndicator } from './common/RequiredIndicator';
 const toggleFieldWrapperStyles = css({
   display: 'flex'
 });
@@ -109,10 +109,8 @@ function Toggle({
       css: toggleLabelStyles,
       id: id,
       htmlFor: id
-    }, label, isRequired ?
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    jsx("span", {
-      css: requiredIndicator,
+    }, label, isRequired ? jsx(Text, {
+      color: "color.text.danger",
       "aria-hidden": "true"
     }, "*") : null), jsx(AKToggle, _extends({}, restFieldProps, {
       onChange: event => handleOnChange(fieldProps.onChange, onFieldChange, event),

package/dist/es2019/ui/ConfigPanel/Fields/ColorPicker.js

@@ -9,10 +9,11 @@ import { css, jsx } from '@emotion/react';
 import { chartsColorPaletteTooltipMessages, DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
 import { ColorPickerButton } from '@atlaskit/editor-common/ui-menu';
 import { Field } from '@atlaskit/form';
+import { Text } from '@atlaskit/primitives';
 import { headingSizes } from '@atlaskit/theme/typography';
 import FieldMessages from '../FieldMessages';
 import { validate } from '../utils';
-import { requiredIndicator } from './common/RequiredIndicator';
+
 /*
     NOTE: color used here are not yet in atlaskit code
     this is part of extended color pack from ADG, which is yet to be release
@@ -392,10 +393,8 @@ const ColorPickerField = ({
     css: colorPickerWrapperStyles
   }, jsx("label", {
     css: colorPickerLabelStyles
-  }, label, isRequired &&
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  jsx("span", {
-    css: requiredIndicator,
+  }, label, isRequired && jsx(Text, {
+    color: "color.text.danger",
     "aria-hidden": "true"
   }, "*")), jsx(ColorPicker, {
     name: name,

package/dist/es2019/ui/ConfigPanel/Fields/Fieldset.js

@@ -11,6 +11,7 @@ import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
 import { configPanelMessages as messages } from '@atlaskit/editor-common/extensions';
+import Heading from '@atlaskit/heading';
 import AddCircleIcon from '@atlaskit/icon/glyph/add-circle';
 import { Box, Text, xcss } from '@atlaskit/primitives';
 import SectionMessage from '@atlaskit/section-message';
@@ -204,7 +205,9 @@ class FieldsetField extends React.Component {
     const children = this.renderActions();
     return jsx(Fragment, null, error && jsx(FieldsetError, {
       message: error
-    }), jsx("div", null, options.showTitle && jsx("h5", null, label), jsx(FormComponent, {
+    }), jsx("div", null, (options === null || options === void 0 ? void 0 : options.showTitle) && jsx(Heading, {
+      size: "xsmall"
+    }, label), jsx(FormComponent, {
       fields: selectedFields,
       parentName: name,
       extensionManifest: extensionManifest,

package/dist/es2019/ui/ConfigPanel/Header.js

@@ -12,6 +12,7 @@ import { IconButton } from '@atlaskit/button/new';
 import { configPanelMessages as messages } from '@atlaskit/editor-common/extensions';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
+import { Box, Text, xcss } from '@atlaskit/primitives';
 import { N200 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 const iconWidth = 40;
@@ -69,11 +70,11 @@ const itemTextStyles = css({
     textOverflow: 'ellipsis'
   }
 });
-const descriptionStyles = css({
-  marginBottom: "var(--ds-space-300, 24px)"
+const descriptionStyles = xcss({
+  marginBottom: 'space.300'
 });
-const helpLinkStyles = css({
-  paddingTop: "var(--ds-space-150, 12px)"
+const helpLinkStyles = xcss({
+  paddingTop: 'space.150'
 });
 const closeButtonWrapperStyles = css({
   width: buttonWidth,
@@ -122,18 +123,22 @@ const Header = ({
     label: intl.formatMessage(messages.close),
     icon: CrossIcon,
     onClick: onClose
-  }))), (description || documentationUrl) && jsx("p", {
-    css: descriptionStyles,
-    "data-testid": "config-panel-header-description"
-  }, description && jsx(Fragment, null, description.replace(/([^.])$/, '$1.'), " "), documentationUrl && (enableHelpCTA ? jsx("p", {
-    css: helpLinkStyles
+  }))), (description || documentationUrl) && jsx(Box, {
+    xcss: descriptionStyles
+  }, jsx(Text, {
+    as: "p",
+    testId: "config-panel-header-description"
+  }, description && jsx(Fragment, null, description.replace(/([^.])$/, '$1.'), " "), documentationUrl && (enableHelpCTA ? jsx(Box, {
+    xcss: helpLinkStyles
+  }, jsx(Text, {
+    as: "p"
   }, jsx(HelpLink, {
     documentationUrl: documentationUrl,
     label: intl.formatMessage(messages.help)
-  })) : jsx(HelpLink, {
+  }))) : jsx(HelpLink, {
     documentationUrl: documentationUrl,
     label: intl.formatMessage(messages.documentation)
-  }))));
+  })))));
 };
 const HelpLink = ({
   documentationUrl,

package/dist/es2019/ui/SaveIndicator/SaveIndicator.js

@@ -9,6 +9,7 @@ import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '@atlaskit/editor-common/extensions';
 import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
+import { Box, Text, xcss } from '@atlaskit/primitives';
 import { G300, N0 } from '@atlaskit/theme/colors';
 const noop = () => {};
 const saveIndicatorWrapperStyles = css({
@@ -28,8 +29,8 @@ const saveIndicatorContentStyles = css({
   boxShadow: `var(--ds-shadow-overlay, ${`0px 8px 12px rgba(9, 30, 66, 0.15), 0px 0px 1px rgba(9, 30, 66, 0.31)`})`,
   borderRadius: '16px'
 });
-const saveIndicatorTextStyles = css({
-  paddingLeft: "var(--ds-space-075, 6px)"
+const saveIndicatorTextStyles = xcss({
+  paddingLeft: 'space.075'
 });
 export const SaveIndicator = ({
   children,
@@ -64,7 +65,7 @@ export const SaveIndicator = ({
     label: "Saving",
     primaryColor: `var(--ds-icon-success, ${G300})`,
     size: "small"
-  }), jsx("span", {
-    css: saveIndicatorTextStyles
-  }, jsx(FormattedMessage, messages.saveIndicator)))));
+  }), jsx(Box, {
+    xcss: saveIndicatorTextStyles
+  }, jsx(Text, null, jsx(FormattedMessage, messages.saveIndicator))))));
 };

package/dist/esm/ui/ConfigPanel/FieldMessages.js

@@ -2,6 +2,7 @@ import React, { Fragment, useMemo } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { configPanelMessages as messages } from '@atlaskit/editor-common/extensions';
 import { ErrorMessage, HelperMessage } from '@atlaskit/form';
+import { Text } from '@atlaskit/primitives';
 import { FieldTypeError, ValidationError } from './types';
 
 // sidestep XSS issues
@@ -34,11 +35,17 @@ function makeMarkup(fragment, key) {
         key: key
       }, children);
     case 'STRONG':
-      return /*#__PURE__*/React.createElement("strong", {
+      return /*#__PURE__*/React.createElement(Text, {
+        as: "strong",
+        color: "color.text.subtlest",
+        size: "UNSAFE_small",
         key: key
       }, children);
     case 'EM':
-      return /*#__PURE__*/React.createElement("em", {
+      return /*#__PURE__*/React.createElement(Text, {
+        as: "em",
+        color: "color.text.subtlest",
+        size: "UNSAFE_small",
         key: key
       }, children);
     case 'CODE':

package/dist/esm/ui/ConfigPanel/Fields/Boolean.js

@@ -12,10 +12,10 @@ import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import { Checkbox as AKCheckbox } from '@atlaskit/checkbox';
 import { Field } from '@atlaskit/form';
+import { Text } from '@atlaskit/primitives';
 import AKToggle from '@atlaskit/toggle';
 import FieldMessages from '../FieldMessages';
 import { ValidationError } from '../types';
-import { requiredIndicator } from './common/RequiredIndicator';
 var toggleFieldWrapperStyles = css({
   display: 'flex'
 });
@@ -110,10 +110,8 @@ function Toggle(_ref3) {
       css: toggleLabelStyles,
       id: id,
       htmlFor: id
-    }, label, isRequired ?
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    jsx("span", {
-      css: requiredIndicator,
+    }, label, isRequired ? jsx(Text, {
+      color: "color.text.danger",
       "aria-hidden": "true"
     }, "*") : null), jsx(AKToggle, _extends({}, restFieldProps, {
       onChange: function onChange(event) {

package/dist/esm/ui/ConfigPanel/Fields/ColorPicker.js

@@ -12,10 +12,11 @@ import { css, jsx } from '@emotion/react';
 import { chartsColorPaletteTooltipMessages, DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
 import { ColorPickerButton } from '@atlaskit/editor-common/ui-menu';
 import { Field } from '@atlaskit/form';
+import { Text } from '@atlaskit/primitives';
 import { headingSizes } from '@atlaskit/theme/typography';
 import FieldMessages from '../FieldMessages';
 import { validate as _validate } from '../utils';
-import { requiredIndicator } from './common/RequiredIndicator';
+
 /*
     NOTE: color used here are not yet in atlaskit code
     this is part of extended color pack from ADG, which is yet to be release
@@ -394,10 +395,8 @@ var ColorPickerField = function ColorPickerField(_ref) {
       css: colorPickerWrapperStyles
     }, jsx("label", {
       css: colorPickerLabelStyles
-    }, label, isRequired &&
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    jsx("span", {
-      css: requiredIndicator,
+    }, label, isRequired && jsx(Text, {
+      color: "color.text.danger",
       "aria-hidden": "true"
     }, "*")), jsx(ColorPicker, {
       name: name,

package/dist/esm/ui/ConfigPanel/Fields/Fieldset.js

@@ -23,6 +23,7 @@ import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
 import { configPanelMessages as messages } from '@atlaskit/editor-common/extensions';
+import Heading from '@atlaskit/heading';
 import AddCircleIcon from '@atlaskit/icon/glyph/add-circle';
 import { Box, Text, xcss } from '@atlaskit/primitives';
 import SectionMessage from '@atlaskit/section-message';
@@ -239,7 +240,9 @@ var FieldsetField = /*#__PURE__*/function (_React$Component) {
       var children = this.renderActions();
       return jsx(Fragment, null, error && jsx(FieldsetError, {
         message: error
-      }), jsx("div", null, options.showTitle && jsx("h5", null, label), jsx(FormComponent, {
+      }), jsx("div", null, (options === null || options === void 0 ? void 0 : options.showTitle) && jsx(Heading, {
+        size: "xsmall"
+      }, label), jsx(FormComponent, {
         fields: selectedFields,
         parentName: name,
         extensionManifest: extensionManifest,

package/dist/esm/ui/ConfigPanel/Header.js

@@ -12,6 +12,7 @@ import { IconButton } from '@atlaskit/button/new';
 import { configPanelMessages as messages } from '@atlaskit/editor-common/extensions';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
+import { Box, Text, xcss } from '@atlaskit/primitives';
 import { N200 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 var iconWidth = 40;
@@ -69,11 +70,11 @@ var itemTextStyles = css({
     textOverflow: 'ellipsis'
   }
 });
-var descriptionStyles = css({
-  marginBottom: "var(--ds-space-300, 24px)"
+var descriptionStyles = xcss({
+  marginBottom: 'space.300'
 });
-var helpLinkStyles = css({
-  paddingTop: "var(--ds-space-150, 12px)"
+var helpLinkStyles = xcss({
+  paddingTop: 'space.150'
 });
 var closeButtonWrapperStyles = css({
   width: buttonWidth,
@@ -123,18 +124,22 @@ var Header = function Header(_ref) {
     label: intl.formatMessage(messages.close),
     icon: CrossIcon,
     onClick: onClose
-  }))), (description || documentationUrl) && jsx("p", {
-    css: descriptionStyles,
-    "data-testid": "config-panel-header-description"
-  }, description && jsx(Fragment, null, description.replace(/([^.])$/, '$1.'), " "), documentationUrl && (enableHelpCTA ? jsx("p", {
-    css: helpLinkStyles
+  }))), (description || documentationUrl) && jsx(Box, {
+    xcss: descriptionStyles
+  }, jsx(Text, {
+    as: "p",
+    testId: "config-panel-header-description"
+  }, description && jsx(Fragment, null, description.replace(/([^.])$/, '$1.'), " "), documentationUrl && (enableHelpCTA ? jsx(Box, {
+    xcss: helpLinkStyles
+  }, jsx(Text, {
+    as: "p"
   }, jsx(HelpLink, {
     documentationUrl: documentationUrl,
     label: intl.formatMessage(messages.help)
-  })) : jsx(HelpLink, {
+  }))) : jsx(HelpLink, {
     documentationUrl: documentationUrl,
     label: intl.formatMessage(messages.documentation)
-  }))));
+  })))));
 };
 var HelpLink = function HelpLink(_ref2) {
   var documentationUrl = _ref2.documentationUrl,

package/dist/esm/ui/SaveIndicator/SaveIndicator.js

@@ -10,6 +10,7 @@ import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '@atlaskit/editor-common/extensions';
 import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
+import { Box, Text, xcss } from '@atlaskit/primitives';
 import { G300, N0 } from '@atlaskit/theme/colors';
 var noop = function noop() {};
 var saveIndicatorWrapperStyles = css({
@@ -29,8 +30,8 @@ var saveIndicatorContentStyles = css({
   boxShadow: "var(--ds-shadow-overlay, ".concat("0px 8px 12px rgba(9, 30, 66, 0.15), 0px 0px 1px rgba(9, 30, 66, 0.31)", ")"),
   borderRadius: '16px'
 });
-var saveIndicatorTextStyles = css({
-  paddingLeft: "var(--ds-space-075, 6px)"
+var saveIndicatorTextStyles = xcss({
+  paddingLeft: 'space.075'
 });
 export var SaveIndicator = function SaveIndicator(_ref) {
   var children = _ref.children,
@@ -70,7 +71,7 @@ export var SaveIndicator = function SaveIndicator(_ref) {
     label: "Saving",
     primaryColor: "var(--ds-icon-success, ".concat(G300, ")"),
     size: "small"
-  }), jsx("span", {
-    css: saveIndicatorTextStyles
-  }, jsx(FormattedMessage, messages.saveIndicator)))));
+  }), jsx(Box, {
+    xcss: saveIndicatorTextStyles
+  }, jsx(Text, null, jsx(FormattedMessage, messages.saveIndicator))))));
 };

package/dist/types/ui/ConfigPanel/ConfigPanel.d.ts

@@ -1,22 +1,72 @@
 import React from 'react';
 import type { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import type { ExtensionManifest, FieldDefinition, OnSaveCallback, Parameters } from '@atlaskit/editor-common/extensions';
-import type { ExtractInjectionAPI, FeatureFlags } from '@atlaskit/editor-common/types';
-import type { ExtensionPlugin, RejectSave } from '../../types';
-type Props = {
-    extensionManifest?: ExtensionManifest;
-    fields?: FieldDefinition[];
-    parameters?: Parameters;
-    autoSaveTrigger?: () => void;
-    autoSaveReject?: RejectSave;
-    showHeader?: boolean;
-    closeOnEsc?: boolean;
+import type { FeatureFlags } from '@atlaskit/editor-common/types';
+import type { RejectSave } from '../../types';
+declare const _default: React.ForwardRefExoticComponent<Pick<Omit<{
+    extensionManifest?: ExtensionManifest | undefined;
+    fields?: FieldDefinition[] | undefined;
+    parameters?: Parameters | undefined;
+    autoSaveTrigger?: (() => void) | undefined;
+    autoSaveReject?: RejectSave | undefined;
+    showHeader?: boolean | undefined;
+    closeOnEsc?: boolean | undefined;
     onChange: OnSaveCallback;
     onCancel: () => void;
     errorMessage: string | null;
-    isLoading?: boolean;
-    featureFlags?: FeatureFlags;
-    api: ExtractInjectionAPI<ExtensionPlugin> | undefined;
-} & WithAnalyticsEventsProps;
-declare const _default: React.ForwardRefExoticComponent<Pick<Omit<Props, keyof WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "featureFlags" | "api" | "autoSaveReject" | "parameters" | "key" | "onChange" | "errorMessage" | "analyticsContext" | "fields" | "extensionManifest" | "isLoading" | "onCancel" | "autoSaveTrigger" | "showHeader" | "closeOnEsc"> & React.RefAttributes<any>>;
+    isLoading?: boolean | undefined;
+    featureFlags?: FeatureFlags | undefined;
+    api: import("@atlaskit/editor-common/types").EditorInjectionAPI<"extension", {
+        pluginConfiguration: import("../../types").ExtensionPluginOptions | undefined;
+        dependencies: [import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
+            pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
+            sharedState: {
+                createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent | null;
+                attachAnalyticsEvent: import("@atlaskit/editor-plugin-analytics").CreateAttachPayloadIntoTransaction | null;
+                performanceTracking: import("@atlaskit/editor-common/types").PerformanceTracking | undefined;
+            };
+            dependencies: [import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
+                pluginConfiguration: FeatureFlags;
+                sharedState: FeatureFlags;
+            }, FeatureFlags>>];
+            actions: import("@atlaskit/editor-common/analytics").EditorAnalyticsAPI;
+        }, import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
+            pluginConfiguration: FeatureFlags;
+            sharedState: FeatureFlags;
+        }, FeatureFlags>>, import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"width", {
+            sharedState: import("@atlaskit/editor-common/types").EditorContainerWidth | undefined;
+        }, undefined>, import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"decorations", {
+            sharedState: import("@atlaskit/editor-plugin-decorations").DecorationState;
+            actions: {
+                hoverDecoration: (nodeType: import("prosemirror-model").NodeType | import("prosemirror-model").NodeType[], add: boolean, className?: string | undefined) => import("@atlaskit/editor-common/types").Command;
+                removeDecoration: import("@atlaskit/editor-common/types").Command;
+            };
+        }, undefined>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"contextPanel", {
+            actions: {
+                applyChange: (tr: import("prosemirror-state").Transaction) => import("prosemirror-state").Transaction;
+            };
+            sharedState: {
+                contents: React.ReactNode[] | undefined;
+            } | undefined;
+        }, undefined>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"contextIdentifier", {
+            pluginConfiguration: import("@atlaskit/editor-plugin-context-identifier").PluginConfiguration | undefined;
+            sharedState: import("@atlaskit/editor-plugin-context-identifier").ContextIdentifierConfiguration | undefined;
+            commands: {
+                setProvider: (config: import("@atlaskit/editor-plugin-context-identifier").ContextIdentifierConfiguration) => import("@atlaskit/editor-common/types").EditorCommand;
+            };
+        }, import("@atlaskit/editor-plugin-context-identifier").PluginConfiguration | undefined>>];
+        sharedState: {
+            showContextPanel: boolean | undefined;
+        } | undefined;
+        actions: {
+            editSelectedExtension: () => boolean;
+            api: () => import("@atlaskit/editor-common/extensions").ExtensionAPI;
+            insertMacroFromMacroBrowser: (macroProvider: import("@atlaskit/editor-common/provider-factory").MacroProvider, macroNode?: import("prosemirror-model").Node | undefined, isEditing?: boolean | undefined) => (view: import("prosemirror-view").EditorView) => Promise<boolean>;
+            insertOrReplaceExtension: ({ editorView, action, attrs, content, position, size, tr, }: import("../../types").InsertOrReplaceExtensionType) => import("prosemirror-state").Transaction;
+            insertOrReplaceBodiedExtension: ({ editorView, action, attrs, content, position, size, tr, }: import("../../types").InsertOrReplaceExtensionType) => import("prosemirror-state").Transaction;
+            runMacroAutoConvert: import("../../types").RunMacroAutoConvert;
+            forceAutoSave: (applyChangeToContextPanel: import("@atlaskit/editor-plugin-context-panel").ApplyChangeHandler | undefined) => (resolve: () => void, reject?: RejectSave | undefined) => import("@atlaskit/editor-common/types").Command;
+        };
+    }> | undefined;
+}, keyof WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "featureFlags" | "api" | "autoSaveReject" | "parameters" | "key" | "onChange" | "errorMessage" | "analyticsContext" | "fields" | "extensionManifest" | "isLoading" | "onCancel" | "autoSaveTrigger" | "showHeader" | "closeOnEsc"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types/ui/ConfigPanel/FormErrorBoundary.d.ts

@@ -12,5 +12,7 @@ interface Props {
 export declare const FormErrorBoundaryImpl: React.FC<import("react-intl-next").WithIntlProps<Props & WithAnalyticsEventsProps & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<Props & WithAnalyticsEventsProps & WrappedComponentProps>;
 };
-export declare const FormErrorBoundary: React.ForwardRefExoticComponent<Pick<Omit<import("react-intl-next").WithIntlProps<Props & WithAnalyticsEventsProps & WrappedComponentProps>, keyof WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "key" | "analyticsContext" | "forwardedRef" | keyof Props> & React.RefAttributes<any>>;
+export declare const FormErrorBoundary: React.ForwardRefExoticComponent<Pick<Omit<Omit<Props & WithAnalyticsEventsProps & WrappedComponentProps, "intl"> & {
+    forwardedRef?: React.Ref<any> | undefined;
+}, keyof WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "key" | "analyticsContext" | "forwardedRef" | keyof Props> & React.RefAttributes<any>>;
 export {};

package/dist/types-ts4.5/ui/ConfigPanel/ConfigPanel.d.ts

@@ -1,22 +1,81 @@
 import React from 'react';
 import type { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import type { ExtensionManifest, FieldDefinition, OnSaveCallback, Parameters } from '@atlaskit/editor-common/extensions';
-import type { ExtractInjectionAPI, FeatureFlags } from '@atlaskit/editor-common/types';
-import type { ExtensionPlugin, RejectSave } from '../../types';
-type Props = {
-    extensionManifest?: ExtensionManifest;
-    fields?: FieldDefinition[];
-    parameters?: Parameters;
-    autoSaveTrigger?: () => void;
-    autoSaveReject?: RejectSave;
-    showHeader?: boolean;
-    closeOnEsc?: boolean;
+import type { FeatureFlags } from '@atlaskit/editor-common/types';
+import type { RejectSave } from '../../types';
+declare const _default: React.ForwardRefExoticComponent<Pick<Omit<{
+    extensionManifest?: ExtensionManifest | undefined;
+    fields?: FieldDefinition[] | undefined;
+    parameters?: Parameters | undefined;
+    autoSaveTrigger?: (() => void) | undefined;
+    autoSaveReject?: RejectSave | undefined;
+    showHeader?: boolean | undefined;
+    closeOnEsc?: boolean | undefined;
     onChange: OnSaveCallback;
     onCancel: () => void;
     errorMessage: string | null;
-    isLoading?: boolean;
-    featureFlags?: FeatureFlags;
-    api: ExtractInjectionAPI<ExtensionPlugin> | undefined;
-} & WithAnalyticsEventsProps;
-declare const _default: React.ForwardRefExoticComponent<Pick<Omit<Props, keyof WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "featureFlags" | "api" | "autoSaveReject" | "parameters" | "key" | "onChange" | "errorMessage" | "analyticsContext" | "fields" | "extensionManifest" | "isLoading" | "onCancel" | "autoSaveTrigger" | "showHeader" | "closeOnEsc"> & React.RefAttributes<any>>;
+    isLoading?: boolean | undefined;
+    featureFlags?: FeatureFlags | undefined;
+    api: import("@atlaskit/editor-common/types").EditorInjectionAPI<"extension", {
+        pluginConfiguration: import("../../types").ExtensionPluginOptions | undefined;
+        dependencies: [
+            import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
+                pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
+                sharedState: {
+                    createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent | null;
+                    attachAnalyticsEvent: import("@atlaskit/editor-plugin-analytics").CreateAttachPayloadIntoTransaction | null;
+                    performanceTracking: import("@atlaskit/editor-common/types").PerformanceTracking | undefined;
+                };
+                dependencies: [
+                    import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
+                        pluginConfiguration: FeatureFlags;
+                        sharedState: FeatureFlags;
+                    }, FeatureFlags>>
+                ];
+                actions: import("@atlaskit/editor-common/analytics").EditorAnalyticsAPI;
+            }, import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions>>,
+            import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
+                pluginConfiguration: FeatureFlags;
+                sharedState: FeatureFlags;
+            }, FeatureFlags>>,
+            import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"width", {
+                sharedState: import("@atlaskit/editor-common/types").EditorContainerWidth | undefined;
+            }, undefined>,
+            import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"decorations", {
+                sharedState: import("@atlaskit/editor-plugin-decorations").DecorationState;
+                actions: {
+                    hoverDecoration: (nodeType: import("prosemirror-model").NodeType | import("prosemirror-model").NodeType[], add: boolean, className?: string | undefined) => import("@atlaskit/editor-common/types").Command;
+                    removeDecoration: import("@atlaskit/editor-common/types").Command;
+                };
+            }, undefined>,
+            import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"contextPanel", {
+                actions: {
+                    applyChange: (tr: import("prosemirror-state").Transaction) => import("prosemirror-state").Transaction;
+                };
+                sharedState: {
+                    contents: React.ReactNode[] | undefined;
+                } | undefined;
+            }, undefined>>,
+            import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"contextIdentifier", {
+                pluginConfiguration: import("@atlaskit/editor-plugin-context-identifier").PluginConfiguration | undefined;
+                sharedState: import("@atlaskit/editor-plugin-context-identifier").ContextIdentifierConfiguration | undefined;
+                commands: {
+                    setProvider: (config: import("@atlaskit/editor-plugin-context-identifier").ContextIdentifierConfiguration) => import("@atlaskit/editor-common/types").EditorCommand;
+                };
+            }, import("@atlaskit/editor-plugin-context-identifier").PluginConfiguration | undefined>>
+        ];
+        sharedState: {
+            showContextPanel: boolean | undefined;
+        } | undefined;
+        actions: {
+            editSelectedExtension: () => boolean;
+            api: () => import("@atlaskit/editor-common/extensions").ExtensionAPI;
+            insertMacroFromMacroBrowser: (macroProvider: import("@atlaskit/editor-common/provider-factory").MacroProvider, macroNode?: import("prosemirror-model").Node | undefined, isEditing?: boolean | undefined) => (view: import("prosemirror-view").EditorView) => Promise<boolean>;
+            insertOrReplaceExtension: ({ editorView, action, attrs, content, position, size, tr, }: import("../../types").InsertOrReplaceExtensionType) => import("prosemirror-state").Transaction;
+            insertOrReplaceBodiedExtension: ({ editorView, action, attrs, content, position, size, tr, }: import("../../types").InsertOrReplaceExtensionType) => import("prosemirror-state").Transaction;
+            runMacroAutoConvert: import("../../types").RunMacroAutoConvert;
+            forceAutoSave: (applyChangeToContextPanel: import("@atlaskit/editor-plugin-context-panel").ApplyChangeHandler | undefined) => (resolve: () => void, reject?: RejectSave | undefined) => import("@atlaskit/editor-common/types").Command;
+        };
+    }> | undefined;
+}, keyof WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "featureFlags" | "api" | "autoSaveReject" | "parameters" | "key" | "onChange" | "errorMessage" | "analyticsContext" | "fields" | "extensionManifest" | "isLoading" | "onCancel" | "autoSaveTrigger" | "showHeader" | "closeOnEsc"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types-ts4.5/ui/ConfigPanel/FormErrorBoundary.d.ts

@@ -12,5 +12,7 @@ interface Props {
 export declare const FormErrorBoundaryImpl: React.FC<import("react-intl-next").WithIntlProps<Props & WithAnalyticsEventsProps & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<Props & WithAnalyticsEventsProps & WrappedComponentProps>;
 };
-export declare const FormErrorBoundary: React.ForwardRefExoticComponent<Pick<Omit<import("react-intl-next").WithIntlProps<Props & WithAnalyticsEventsProps & WrappedComponentProps>, keyof WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "key" | "analyticsContext" | "forwardedRef" | keyof Props> & React.RefAttributes<any>>;
+export declare const FormErrorBoundary: React.ForwardRefExoticComponent<Pick<Omit<Omit<Props & WithAnalyticsEventsProps & WrappedComponentProps, "intl"> & {
+    forwardedRef?: React.Ref<any> | undefined;
+}, keyof WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "key" | "analyticsContext" | "forwardedRef" | keyof Props> & React.RefAttributes<any>>;
 export {};

package/example-utils/config-panel/ConfigPanelWithExtensionPicker.tsx

@@ -17,6 +17,7 @@ import type {
 	Parameters,
 } from '@atlaskit/editor-common/extensions';
 import { getExtensionKeyAndNodeKey } from '@atlaskit/editor-common/extensions';
+import Heading from '@atlaskit/heading';
 import { Box, xcss } from '@atlaskit/primitives';
 import TextArea from '@atlaskit/textarea';
 import * as colors from '@atlaskit/theme/colors';
@@ -97,7 +98,7 @@ function ExtensionConfigPanel({
 		<div css={exampleWrapperStyles}>
 			{/* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */}
 			<div css={column(400)} key="config-panel">
-				<h3>Config panel:</h3>
+				<Heading size="medium">Config panel:</Heading>
 				<ConfigPanelWithProviders
 					extensionType={extension.type}
 					extensionKey={extension.key}
@@ -109,11 +110,11 @@ function ExtensionConfigPanel({
 			</div>
 			{/* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */}
 			<div css={column(500)} key="parameters">
-				<h3>Initial Parameters:</h3>
+				<Heading size="medium">Initial Parameters:</Heading>
 				<div css={codeWrapperStyles}>
 					{parameters && <TextArea onChange={onChangeParametersJson} value={parametersJson} />}
 				</div>
-				<h3>State:</h3>
+				<Heading size="medium">State:</Heading>
 				<div css={codeWrapperStyles}>
 					{parameters && (
 						<CodeBlock
@@ -126,7 +127,7 @@ function ExtensionConfigPanel({
 			</div>
 			{/* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */}
 			<div css={column(500)} key="fields-definition">
-				<h3>Fields definition:</h3>
+				<Heading size="medium">Fields definition:</Heading>
 				<div css={codeWrapperStyles}>
 					<CodeBlock
 						language="json"

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-extension",
-	"version": "1.14.17",
+	"version": "1.15.0",
 	"description": "editor-plugin-extension plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -23,16 +23,16 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/adf-schema": "^40.9.0",
-		"@atlaskit/adf-utils": "^19.8.0",
+		"@atlaskit/adf-schema": "^40.9.4",
+		"@atlaskit/adf-utils": "^19.9.0",
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/avatar": "^21.15.0",
 		"@atlaskit/button": "^20.2.0",
 		"@atlaskit/checkbox": "^14.0.0",
-		"@atlaskit/datetime-picker": "^15.1.0",
-		"@atlaskit/editor-common": "^93.1.0",
-		"@atlaskit/editor-json-transformer": "^8.18.0",
-		"@atlaskit/editor-plugin-analytics": "^1.8.0",
+		"@atlaskit/datetime-picker": "^15.3.0",
+		"@atlaskit/editor-common": "^93.3.0",
+		"@atlaskit/editor-json-transformer": "^8.19.0",
+		"@atlaskit/editor-plugin-analytics": "^1.9.0",
 		"@atlaskit/editor-plugin-context-identifier": "^1.3.0",
 		"@atlaskit/editor-plugin-context-panel": "^1.3.0",
 		"@atlaskit/editor-plugin-decorations": "^1.3.0",
@@ -43,19 +43,20 @@
 		"@atlaskit/editor-tables": "^2.8.0",
 		"@atlaskit/empty-state": "^7.11.0",
 		"@atlaskit/form": "^10.5.0",
-		"@atlaskit/icon": "^22.20.0",
+		"@atlaskit/heading": "2.4.6",
+		"@atlaskit/icon": "^22.22.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^12.2.0",
 		"@atlaskit/radio": "^6.5.0",
 		"@atlaskit/section-message": "^6.6.0",
-		"@atlaskit/select": "^18.0.0",
+		"@atlaskit/select": "^18.1.0",
 		"@atlaskit/smart-user-picker": "^6.10.0",
 		"@atlaskit/spinner": "^16.3.0",
-		"@atlaskit/tabs": "^16.4.0",
+		"@atlaskit/tabs": "^16.5.0",
 		"@atlaskit/textarea": "^5.6.0",
 		"@atlaskit/textfield": "^6.5.0",
 		"@atlaskit/theme": "^13.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.2.0",
+		"@atlaskit/tmp-editor-statsig": "^2.3.0",
 		"@atlaskit/toggle": "^13.4.0",
 		"@atlaskit/tokens": "^2.0.0",
 		"@atlaskit/tooltip": "^18.8.0",

package/dist/cjs/ui/ConfigPanel/Fields/common/RequiredIndicator.js

@@ -1,14 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.requiredIndicator = void 0;
-var _react = require("@emotion/react");
-var _colors = require("@atlaskit/theme/colors");
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var requiredIndicator = exports.requiredIndicator = (0, _react.css)({
-  color: "var(--ds-text-danger, ".concat(_colors.R500, ")")
-});

package/dist/es2019/ui/ConfigPanel/Fields/common/RequiredIndicator.js

@@ -1,7 +0,0 @@
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
-import { R500 } from '@atlaskit/theme/colors';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const requiredIndicator = css({
-  color: `var(--ds-text-danger, ${R500})`
-});

package/dist/esm/ui/ConfigPanel/Fields/common/RequiredIndicator.js

@@ -1,7 +0,0 @@
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
-import { R500 } from '@atlaskit/theme/colors';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var requiredIndicator = css({
-  color: "var(--ds-text-danger, ".concat(R500, ")")
-});

package/dist/types/ui/ConfigPanel/Fields/common/RequiredIndicator.d.ts

@@ -1 +0,0 @@
-export declare const requiredIndicator: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/ui/ConfigPanel/Fields/common/RequiredIndicator.d.ts

@@ -1 +0,0 @@
-export declare const requiredIndicator: import("@emotion/react").SerializedStyles;