@atlaskit/editor-common 65.0.0 → 66.0.2

package/CHANGELOG.md

@@ -1,5 +1,75 @@
 # @atlaskit/editor-common
 
+## 66.0.2
+
+### Patch Changes
+
+- [`c827226316a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c827226316a) - ED-14291 removed deprecated themeProvider
+- [`b29ce16dad8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b29ce16dad8) - [ED-14606] Move bitbucket schema, confluence schema, jira schema, and default schema from @atlaskit/adf-schema to their own entry points. These new entry points are as follows
+
+  @atlaskit/adf-schema/schema-bitbucket for:
+
+  - bitbucketSchema
+
+  @atlaskit/adf-schema/schema-confluence for:
+
+  - confluenceSchema
+  - confluenceSchemaWithMediaSingle
+
+  @atlaskit/adf-schema/schema-jira for:
+
+  - default as createJIRASchema
+  - isSchemaWithLists
+  - isSchemaWithMentions
+  - isSchemaWithEmojis
+  - isSchemaWithLinks
+  - isSchemaWithAdvancedTextFormattingMarks
+  - isSchemaWithCodeBlock
+  - isSchemaWithBlockQuotes
+  - isSchemaWithMedia
+  - isSchemaWithSubSupMark
+  - isSchemaWithTextColor
+  - isSchemaWithTables
+
+  @atlaskit/adf-schema/schema-default for:
+
+  - defaultSchema
+  - getSchemaBasedOnStage
+  - defaultSchemaConfig
+
+  This change also includes codemods in @atlaskit/adf-schema to update these entry points. It also introduces a new util function "changeImportEntryPoint" to @atlaskit/codemod-utils to handle this scenario.
+
+- [`3ef794dc11f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3ef794dc11f) - Removed emoji and media packages dependencies from renderer initial load.
+- Updated dependencies
+
+## 66.0.1
+
+### Patch Changes
+
+- [`209fdaab573`](https://bitbucket.org/atlassian/atlassian-frontend/commits/209fdaab573) - export in product tests
+
+## 66.0.0
+
+### Major Changes
+
+- [`2ec99bf6f9f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2ec99bf6f9f) - [ux] ED-14651: removed react-intl v2 fallback helpers IntlLegacyFallbackProvider and IntlNextCompat
+- [`2ec99bf6f9f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2ec99bf6f9f) - [ux] ED-14651: removed react-intl v2.
+
+### Minor Changes
+
+- [`bceab5fa97d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bceab5fa97d) - ED-14632: Add render count tracking reRendered event in Renderer
+
+### Patch Changes
+
+- [`ced96eebe47`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ced96eebe47) - Minor changes in MarkWrapper and Expand styles.
+- [`44c6c36d8d9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/44c6c36d8d9) - ED-14263 replaced styled usages
+- [`de79d0babc9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/de79d0babc9) - ED-14663 Fixed horizontal scrollbar appearing in table in chrome version 99 issue.
+- [`fd5028f6751`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fd5028f6751) - EDM-2873: Promote MediaInline to full schema
+- [`1e2086467f1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1e2086467f1) - [ED-13775] Added resize observer on scroll parent element to realign popup components when template context panel is opened/closed.
+- [`78aec52dea0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/78aec52dea0) - use latest SmartUserPicker in Editor packages
+- [`5c6607ee0e7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5c6607ee0e7) - Migrated link, rule, panel and expand styles in editor-common to emotion.
+- Updated dependencies
+
 ## 65.0.0
 
 ### Major Changes

package/build/tsconfig.json

@@ -11,8 +11,7 @@
   ],
   "exclude": [
     "../src/**/__tests__/*",
-    "../src/**/__tests_external__/*",
     "../src/**/*.test.*",
     "../src/**/test.*"
   ]
-}
+}

package/dist/cjs/i18n/en.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//
+var _default = {
+  'fabric.editor.captionPlaceholder': 'Add a caption',
+  'fabric.editor.codeBidiWarningLabel': 'Bidirectional characters change the order that text is rendered. This could be used to obscure malicious code.',
+  'fabric.editor.collapseNode': 'Collapse content',
+  'fabric.editor.expandDefaultTitle': 'Click here to expand...',
+  'fabric.editor.expandNode': 'Expand content',
+  'fabric.editor.expandPlaceholder': 'Give this expand a title...',
+  'fabric.editor.openLink': 'Open link in a new tab',
+  'fabric.editor.unsupportedBlockContent': 'This editor does not support displaying this content',
+  'fabric.editor.unsupportedContentTooltip': 'Content is not available in this editor, this will be preserved when you edit and save',
+  'fabric.editor.unsupportedInlineContent': 'Unsupported content'
+};
+exports.default = _default;

package/dist/cjs/i18n/en_GB.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//English (United Kingdom)
+var _default = {
+  'fabric.editor.captionPlaceholder': 'Add a caption',
+  'fabric.editor.codeBidiWarningLabel': 'Bidirectional characters change the order that text is rendered. This could be used to obscure malicious code.',
+  'fabric.editor.collapseNode': 'Collapse content',
+  'fabric.editor.expandDefaultTitle': 'Click here to expand...',
+  'fabric.editor.expandNode': 'Expand content',
+  'fabric.editor.expandPlaceholder': 'Give this expand a title...',
+  'fabric.editor.openLink': 'Open link in a new tab',
+  'fabric.editor.unsupportedBlockContent': 'This editor does not support displaying this content',
+  'fabric.editor.unsupportedContentTooltip': 'Content is not available in this editor, this will be preserved when you edit and save',
+  'fabric.editor.unsupportedInlineContent': 'Unsupported content'
+};
+exports.default = _default;

package/dist/cjs/normalize-feature-flags.js

@@ -9,11 +9,31 @@ exports.normalizeFeatureFlags = normalizeFeatureFlags;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
 var _camelCase = _interopRequireDefault(require("lodash/camelCase"));
 
 var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
 
 var EMPTY = {};
+
+function isObjectFlagKey(key, value, objectFlagKeys) {
+  return Boolean(typeof value === 'string' && (objectFlagKeys === null || objectFlagKeys === void 0 ? void 0 : objectFlagKeys.includes(key)));
+}
+
+function isValidJSONObject(value) {
+  try {
+    var result = JSON.parse(value);
+
+    if ((0, _typeof2.default)(result) === 'object' && result !== null) {
+      return true;
+    }
+
+    return false;
+  } catch (err) {
+    return false;
+  }
+}
 /**
  * Normalise and filter a free Record<string, unknown> to match
  * the rules for feature flags in editor and renderer
@@ -24,18 +44,27 @@ var EMPTY = {};
  *
  * Output matches
  * 1. cased in camelCase (match [a-zA-Z])
- * 2. has boolean value
+ * 2. has boolean value or object {} value
  *
  * @param rawFeatureFlags
  */
 
-function normalizeFeatureFlags(rawFeatureFlags) {
+
+function normalizeFeatureFlags(rawFeatureFlags, options) {
   if (!rawFeatureFlags) {
     return EMPTY;
   }
 
   return Object.entries(rawFeatureFlags).filter(function (e) {
-    return typeof e[1] === 'boolean';
+    if (typeof e[1] === 'boolean') {
+      return true;
+    }
+
+    if (isObjectFlagKey((0, _camelCase.default)(e[0]), e[1], options === null || options === void 0 ? void 0 : options.objectFlagKeys) && isValidJSONObject(e[1])) {
+      return true;
+    }
+
+    return false;
   }).filter(function (_ref) {
     var _ref2 = (0, _slicedToArray2.default)(_ref, 1),
         key = _ref2[0];
@@ -52,7 +81,14 @@ function normalizeFeatureFlags(rawFeatureFlags) {
         key = _ref6[0],
         value = _ref6[1];
 
-    flags[key] = value;
+    if (isObjectFlagKey(key, value, options === null || options === void 0 ? void 0 : options.objectFlagKeys)) {
+      flags[key] = JSON.parse(value);
+    }
+
+    if (typeof value === 'boolean') {
+      flags[key] = value;
+    }
+
     return flags;
   }, {});
 }

package/dist/cjs/panel.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "PanelSharedCssClassName", {
+  enumerable: true,
+  get: function get() {
+    return _panel.PanelSharedCssClassName;
+  }
+});
+Object.defineProperty(exports, "PanelSharedSelectors", {
+  enumerable: true,
+  get: function get() {
+    return _panel.PanelSharedSelectors;
+  }
+});
+Object.defineProperty(exports, "darkPanelColors", {
+  enumerable: true,
+  get: function get() {
+    return _panel.darkPanelColors;
+  }
+});
+Object.defineProperty(exports, "getPanelBackgroundDarkModeColors", {
+  enumerable: true,
+  get: function get() {
+    return _panel.getPanelBackgroundDarkModeColors;
+  }
+});
+Object.defineProperty(exports, "getPanelDarkColor", {
+  enumerable: true,
+  get: function get() {
+    return _panel.getPanelDarkColor;
+  }
+});
+Object.defineProperty(exports, "getPanelTypeBackground", {
+  enumerable: true,
+  get: function get() {
+    return _panel.getPanelTypeBackground;
+  }
+});
+Object.defineProperty(exports, "panelSharedStyles", {
+  enumerable: true,
+  get: function get() {
+    return _panel.panelSharedStyles;
+  }
+});
+Object.defineProperty(exports, "panelSharedStylesWithoutPrefix", {
+  enumerable: true,
+  get: function get() {
+    return _panel.panelSharedStylesWithoutPrefix;
+  }
+});
+
+var _panel = require("./styles/shared/panel");

package/dist/cjs/styles/index.js

@@ -21,18 +21,6 @@ Object.defineProperty(exports, "DateSharedCssClassName", {
     return _date.DateSharedCssClassName;
   }
 });
-Object.defineProperty(exports, "PanelSharedCssClassName", {
-  enumerable: true,
-  get: function get() {
-    return _panel.PanelSharedCssClassName;
-  }
-});
-Object.defineProperty(exports, "PanelSharedSelectors", {
-  enumerable: true,
-  get: function get() {
-    return _panel.PanelSharedSelectors;
-  }
-});
 Object.defineProperty(exports, "SmartCardSharedCssClassName", {
   enumerable: true,
   get: function get() {
@@ -93,36 +81,12 @@ Object.defineProperty(exports, "columnLayoutSharedStyle", {
     return _columnLayout.columnLayoutSharedStyle;
   }
 });
-Object.defineProperty(exports, "darkPanelColors", {
-  enumerable: true,
-  get: function get() {
-    return _panel.darkPanelColors;
-  }
-});
 Object.defineProperty(exports, "dateSharedStyle", {
   enumerable: true,
   get: function get() {
     return _date.dateSharedStyle;
   }
 });
-Object.defineProperty(exports, "getPanelBackgroundDarkModeColors", {
-  enumerable: true,
-  get: function get() {
-    return _panel.getPanelBackgroundDarkModeColors;
-  }
-});
-Object.defineProperty(exports, "getPanelDarkColor", {
-  enumerable: true,
-  get: function get() {
-    return _panel.getPanelDarkColor;
-  }
-});
-Object.defineProperty(exports, "getPanelTypeBackground", {
-  enumerable: true,
-  get: function get() {
-    return _panel.getPanelTypeBackground;
-  }
-});
 Object.defineProperty(exports, "headingsSharedStyles", {
   enumerable: true,
   get: function get() {
@@ -153,12 +117,6 @@ Object.defineProperty(exports, "mediaSingleSharedStyle", {
     return _mediaSingle.mediaSingleSharedStyle;
   }
 });
-Object.defineProperty(exports, "panelSharedStyles", {
-  enumerable: true,
-  get: function get() {
-    return _panel.panelSharedStyles;
-  }
-});
 Object.defineProperty(exports, "paragraphSharedStyles", {
   enumerable: true,
   get: function get() {
@@ -276,8 +234,6 @@ var _blockquote = require("./shared/blockquote");
 
 var _headings = require("./shared/headings");
 
-var _panel = require("./shared/panel");
-
 var _rule = require("./shared/rule");
 
 var _whitespace = require("./shared/whitespace");

package/dist/cjs/styles/shared/link.js

@@ -9,9 +9,9 @@ exports.linkSharedStyle = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _templateObject;
 
-var linkSharedStyle = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  a.blockLink {\n    display: block;\n  }\n"])));
+var linkSharedStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  a.blockLink {\n    display: block;\n  }\n"])));
 exports.linkSharedStyle = linkSharedStyle;

package/dist/cjs/styles/shared/lists.js

@@ -17,5 +17,5 @@ var _browser = _interopRequireDefault(require("../../utils/browser"));
 
 var _templateObject;
 
-var listsSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* =============== INDENTATION SPACING ========= */\n\n  ul,\n  ol {\n    box-sizing: border-box;\n    padding-left: 24px;\n\n    /*\n    Firefox does not handle empty block element inside li tag.\n    If there is not block element inside li tag,\n      then firefox sets inherited height to li\n    However, if there is any block element and if it's empty\n      (or has empty inline element) then\n    firefox sets li tag height to zero.\n    More details at\n    https://product-fabric.atlassian.net/wiki/spaces/~455502413/pages/3149365890/ED-14110+Investigation\n    */\n    li p:empty,\n    li p > span:empty {\n      ", "\n    }\n  }\n\n  ", ", ", " {\n    /*\n      Ensures list item content adheres to the list's margin instead\n      of filling the entire block row. This is important to allow\n      clicking interactive elements which are floated next to a list.\n\n      For some history and context on this block, see PRs related to tickets.:\n      @see ED-6551 - original issue.\n      @see ED-7015 - follow up issue.\n      @see ED-7447 - flow-root change.\n\n      We use 'display: table' (old clear fix / new block formatting context hack)\n      for older browsers and 'flow-root' for modern browsers.\n\n      @see https://css-tricks.com/display-flow-root/\n    */\n    // For older browsers the do not support flow-root.\n    display: table;\n    display: flow-root;\n  }\n\n  /* =============== INDENTATION AESTHETICS ========= */\n\n  /**\n        We support nested lists up to six levels deep.\n    **/\n\n  /* LEGACY LISTS */\n\n  ul,\n  ul ul ul ul {\n    list-style-type: disc;\n  }\n\n  ul ul,\n  ul ul ul ul ul {\n    list-style-type: circle;\n  }\n\n  ul ul ul,\n  ul ul ul ul ul ul {\n    list-style-type: square;\n  }\n\n  ol,\n  ol ol ol ol {\n    list-style-type: decimal;\n  }\n  ol ol,\n  ol ol ol ol ol {\n    list-style-type: lower-alpha;\n  }\n  ol ol ol,\n  ol ol ol ol ol ol {\n    list-style-type: lower-roman;\n  }\n\n  /* PREDICTABLE LISTS */\n\n  ol[data-indent-level='1'],\n  ol[data-indent-level='4'] {\n    list-style-type: decimal;\n  }\n\n  ol[data-indent-level='2'],\n  ol[data-indent-level='5'] {\n    list-style-type: lower-alpha;\n  }\n\n  ol[data-indent-level='3'],\n  ol[data-indent-level='6'] {\n    list-style-type: lower-roman;\n  }\n\n  ul[data-indent-level='1'],\n  ul[data-indent-level='4'] {\n    list-style-type: disc;\n  }\n\n  ul[data-indent-level='2'],\n  ul[data-indent-level='5'] {\n    list-style-type: circle;\n  }\n\n  ul[data-indent-level='3'],\n  ul[data-indent-level='6'] {\n    list-style-type: square;\n  }\n"])), _browser.default.gecko ? 'display: inline-block;' : '', _adfSchema.orderedListSelector, _adfSchema.bulletListSelector);
+var listsSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* =============== INDENTATION SPACING ========= */\n\n  ul,\n  ol {\n    box-sizing: border-box;\n    padding-left: 24px;\n\n    /*\n    Firefox does not handle empty block element inside li tag.\n    If there is not block element inside li tag,\n      then firefox sets inherited height to li\n    However, if there is any block element and if it's empty\n      (or has empty inline element) then\n    firefox sets li tag height to zero.\n    More details at\n    https://product-fabric.atlassian.net/wiki/spaces/~455502413/pages/3149365890/ED-14110+Investigation\n    */\n    li p:empty,\n    li p > span:empty {\n      ", "\n    }\n  }\n\n  ", ", ", " {\n    /*\n      Ensures list item content adheres to the list's margin instead\n      of filling the entire block row. This is important to allow\n      clicking interactive elements which are floated next to a list.\n\n      For some history and context on this block, see PRs related to tickets.:\n      @see ED-6551 - original issue.\n      @see ED-7015 - follow up issue.\n      @see ED-7447 - flow-root change.\n\n      We use 'display: table' (old clear fix / new block formatting context hack)\n      for older browsers and 'flow-root' for modern browsers.\n\n      @see https://css-tricks.com/display-flow-root/\n    */\n    // For older browsers the do not support flow-root.\n    /* stylelint-disable declaration-block-no-duplicate-properties */\n    display: table;\n    display: flow-root;\n    /* stylelint-enable declaration-block-no-duplicate-properties */\n  }\n\n  /* =============== INDENTATION AESTHETICS ========= */\n\n  /**\n        We support nested lists up to six levels deep.\n    **/\n\n  /* LEGACY LISTS */\n\n  ul,\n  ul ul ul ul {\n    list-style-type: disc;\n  }\n\n  ul ul,\n  ul ul ul ul ul {\n    list-style-type: circle;\n  }\n\n  ul ul ul,\n  ul ul ul ul ul ul {\n    list-style-type: square;\n  }\n\n  ol,\n  ol ol ol ol {\n    list-style-type: decimal;\n  }\n  ol ol,\n  ol ol ol ol ol {\n    list-style-type: lower-alpha;\n  }\n  ol ol ol,\n  ol ol ol ol ol ol {\n    list-style-type: lower-roman;\n  }\n\n  /* PREDICTABLE LISTS */\n\n  ol[data-indent-level='1'],\n  ol[data-indent-level='4'] {\n    list-style-type: decimal;\n  }\n\n  ol[data-indent-level='2'],\n  ol[data-indent-level='5'] {\n    list-style-type: lower-alpha;\n  }\n\n  ol[data-indent-level='3'],\n  ol[data-indent-level='6'] {\n    list-style-type: lower-roman;\n  }\n\n  ul[data-indent-level='1'],\n  ul[data-indent-level='4'] {\n    list-style-type: disc;\n  }\n\n  ul[data-indent-level='2'],\n  ul[data-indent-level='5'] {\n    list-style-type: circle;\n  }\n\n  ul[data-indent-level='3'],\n  ul[data-indent-level='6'] {\n    list-style-type: square;\n  }\n"])), _browser.default.gecko ? 'display: inline-block;' : '', _adfSchema.orderedListSelector, _adfSchema.bulletListSelector);
 exports.listsSharedStyles = listsSharedStyles;

package/dist/cjs/styles/shared/panel.js

@@ -9,13 +9,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getPanelDarkColor = exports.getPanelBackgroundDarkModeColors = exports.darkPanelColors = exports.PanelSharedSelectors = exports.PanelSharedCssClassName = void 0;
 exports.getPanelDarkModeCSS = getPanelDarkModeCSS;
-exports.panelSharedStyles = exports.getPanelTypeBackground = void 0;
+exports.panelSharedStylesWithoutPrefix = exports.panelSharedStyles = exports.getPanelTypeBackground = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _adfSchema = require("@atlaskit/adf-schema");
 
@@ -31,7 +31,7 @@ var _components = require("@atlaskit/theme/components");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -218,7 +218,16 @@ var mainDynamicStyles = function mainDynamicStyles(panelType) {
   };
 };
 
-var panelSharedStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    border-radius: ", "px;\n    margin: ", " 0 0;\n    padding: ", "px;\n    min-width: ", "px;\n    display: flex;\n    position: relative;\n    align-items: baseline;\n    word-break: break-word;\n\n    ", "\n\n    .", " {\n      flex-shrink: 0;\n      height: ", "px;\n      width: ", "px;\n      box-sizing: content-box;\n      padding-right: ", "px;\n      text-align: center;\n      user-select: none;\n      -moz-user-select: none;\n      -webkit-user-select: none;\n      -ms-user-select: none;\n      ", "\n\n      > span {\n        vertical-align: middle;\n        display: inline-flex;\n      }\n\n      .", " {\n        vertical-align: ", "px;\n      }\n\n      .", " {\n        vertical-align: ", "px;\n\n        // Vertical align only works for inline-block elements in Firefox\n        @-moz-document url-prefix() {\n          img {\n            display: inline-block;\n          }\n        }\n      }\n    }\n\n    .ak-editor-panel__content {\n      margin: 1px 0 1px;\n      flex: 1 0 0;\n      /*\n        https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox\n        The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn\u2019t compute to zero. The minimum size of a flex item is equal to the size of its contents.\n      */\n      min-width: 0;\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n\n    &[data-panel-type='", "'] {\n      ", ";\n    }\n  }\n"])), PanelSharedCssClassName.prefix, (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, (0, _constants.gridSize)(), _editorSharedStyles.akEditorTableCellMinWidth, mainDynamicStyles(_adfSchema.PanelType.INFO), PanelSharedCssClassName.icon, (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 3, (0, _constants.gridSize)(), iconDynamicStyles(_adfSchema.PanelType.INFO), _emoji.emojiSprite, panelEmojiSpriteVerticalAlignment, _emoji.emojiImage, panelEmojiImageVerticalAlignment, _adfSchema.PanelType.NOTE, mainDynamicStyles(_adfSchema.PanelType.NOTE), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.NOTE), _adfSchema.PanelType.TIP, mainDynamicStyles(_adfSchema.PanelType.TIP), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.TIP), _adfSchema.PanelType.WARNING, mainDynamicStyles(_adfSchema.PanelType.WARNING), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.WARNING), _adfSchema.PanelType.ERROR, mainDynamicStyles(_adfSchema.PanelType.ERROR), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.ERROR), _adfSchema.PanelType.SUCCESS, mainDynamicStyles(_adfSchema.PanelType.SUCCESS), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.SUCCESS), _adfSchema.PanelType.CUSTOM, (0, _components.themed)({
-  dark: getPanelBackgroundDarkModeColors
-}));
+var panelSharedStylesWithoutPrefix = function panelSharedStylesWithoutPrefix(props) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  margin: ", " 0 0;\n  padding: ", "px;\n  min-width: ", "px;\n  display: flex;\n  position: relative;\n  align-items: baseline;\n  word-break: break-word;\n\n  ", "\n\n  .", " {\n    flex-shrink: 0;\n    height: ", "px;\n    width: ", "px;\n    box-sizing: content-box;\n    padding-right: ", "px;\n    text-align: center;\n    user-select: none;\n    -moz-user-select: none;\n    -webkit-user-select: none;\n    -ms-user-select: none;\n    ", "\n\n    > span {\n      vertical-align: middle;\n      display: inline-flex;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n\n      // Vertical align only works for inline-block elements in Firefox\n      @-moz-document url-prefix() {\n        img {\n          display: inline-block;\n        }\n      }\n    }\n  }\n\n  .ak-editor-panel__content {\n    margin: 1px 0 1px;\n    flex: 1 0 0;\n    /*\n      https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox\n      The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn\u2019t compute to zero. The minimum size of a flex item is equal to the size of its contents.\n    */\n    min-width: 0;\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", ";\n  }\n"])), (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, (0, _constants.gridSize)(), _editorSharedStyles.akEditorTableCellMinWidth, mainDynamicStyles(_adfSchema.PanelType.INFO)(props), PanelSharedCssClassName.icon, (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 3, (0, _constants.gridSize)(), iconDynamicStyles(_adfSchema.PanelType.INFO)(props), _emoji.emojiSprite, panelEmojiSpriteVerticalAlignment, _emoji.emojiImage, panelEmojiImageVerticalAlignment, _adfSchema.PanelType.NOTE, mainDynamicStyles(_adfSchema.PanelType.NOTE)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.NOTE)(props), _adfSchema.PanelType.TIP, mainDynamicStyles(_adfSchema.PanelType.TIP)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.TIP)(props), _adfSchema.PanelType.WARNING, mainDynamicStyles(_adfSchema.PanelType.WARNING)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.WARNING)(props), _adfSchema.PanelType.ERROR, mainDynamicStyles(_adfSchema.PanelType.ERROR)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.ERROR)(props), _adfSchema.PanelType.SUCCESS, mainDynamicStyles(_adfSchema.PanelType.SUCCESS)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.SUCCESS)(props), _adfSchema.PanelType.CUSTOM, (0, _components.themed)({
+    dark: getPanelBackgroundDarkModeColors
+  })(props));
+};
+
+exports.panelSharedStylesWithoutPrefix = panelSharedStylesWithoutPrefix;
+
+var panelSharedStyles = function panelSharedStyles(props) {
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    ", "\n  }\n"])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix(props));
+};
+
 exports.panelSharedStyles = panelSharedStyles;

package/dist/cjs/styles/shared/rule.js

@@ -9,7 +9,7 @@ exports.ruleSharedStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -24,5 +24,8 @@ var divider = (0, _components.themed)({
   dark: _colors.DN50
 }); // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
 
-var ruleSharedStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & hr {\n    border: none;\n    background-color: ", ";\n    margin: ", "em 0;\n    height: 2px;\n    border-radius: 1px;\n  }\n"])), divider, _editorSharedStyles.akEditorLineHeight);
+var ruleSharedStyles = function ruleSharedStyles(props) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & hr {\n    border: none;\n    background-color: ", ";\n    margin: ", "em 0;\n    height: 2px;\n    border-radius: 1px;\n  }\n"])), divider(props), _editorSharedStyles.akEditorLineHeight);
+};
+
 exports.ruleSharedStyles = ruleSharedStyles;

package/dist/cjs/styles/shared/table.js

@@ -57,7 +57,7 @@ var TableSharedCssClassName = {
 exports.TableSharedCssClassName = TableSharedCssClassName;
 
 var tableSharedStyle = function tableSharedStyle(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    position: relative;\n    margin: 0 auto ", "px;\n    box-sizing: border-box;\n\n    /**\n     * Fix block top alignment inside table cells.\n     */\n    .decisionItemView-content-wrap:first-child > div {\n      margin-top: 0;\n    }\n  }\n  .", "[data-number-column='true'] {\n    padding-left: ", "px;\n    clear: both;\n  }\n  /* avoid applying styles to nested tables (possible via extensions) */\n  .", " > table,\n  .", " > table,\n  .", " > table {\n    border-collapse: collapse;\n    margin: ", "px ", "px 0 0;\n    border: ", "px solid\n      ", ";\n    table-layout: fixed;\n    font-size: 1em;\n    width: 100%;\n\n    &[data-autosize='true'] {\n      table-layout: auto;\n    }\n\n    & {\n      * {\n        box-sizing: border-box;\n      }\n      hr {\n        box-sizing: content-box;\n      }\n\n      tbody {\n        border-bottom: none;\n      }\n      th td {\n        background-color: white;\n      }\n      th,\n      td {\n        min-width: ", "px;\n        font-weight: normal;\n        vertical-align: top;\n        border: 1px solid\n          ", ";\n        border-right-width: 0;\n        border-bottom-width: 0;\n        padding: ", "px;\n        /* https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o */\n        ", "\n\n        ", ";\n\n        > *:first-child {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor.-right:first-child + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + * {\n          margin-top: 0;\n        }\n\n        th p:not(:first-of-type),\n        td p:not(:first-of-type) {\n          margin-top: 12px;\n        }\n      }\n      th {\n        background-color: ", ";\n        text-align: left;\n\n        /* only apply this styling to codeblocks in default background headercells */\n        /* TODO this needs to be overhauled as it relies on unsafe selectors */\n        &:not([style]) {\n          .code-block {\n            background-image: ", ";\n            background-attachment: local, scroll, scroll;\n            background-position: 100% 0, 100% 0, 0 0;\n            background-color: ", ";\n\n            .line-number-gutter {\n              background-color: ", ";\n            }\n\n            /* this is only relevant to the element taken care of by renderer */\n            > [data-ds--code--code-block] {\n              background-image: ", "!important;\n\n              background-color: ", "!important;\n\n              // selector lives inside @atlaskit/code\n              --ds--code--line-number-bg-color: ", ";\n            }\n          }\n        }\n      }\n    }\n  }\n"])), TableSharedCssClassName.TABLE_CONTAINER, tableMarginBottom, TableSharedCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableMarginTop, tableMarginSides, tableCellBorderWidth, (0, _components.themed)({
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    position: relative;\n    margin: 0 auto ", "px;\n    box-sizing: border-box;\n\n    /**\n     * Fix block top alignment inside table cells.\n     */\n    .decisionItemView-content-wrap:first-child > div {\n      margin-top: 0;\n    }\n  }\n  .", "[data-number-column='true'] {\n    padding-left: ", "px;\n    clear: both;\n  }\n  .", " > table {\n    margin: ", "px 0 0 0;\n  }\n\n  .", " > table,\n  .", " > table {\n    margin: ", "px ", "px 0 0;\n  }\n\n  /* avoid applying styles to nested tables (possible via extensions) */\n  .", " > table,\n  .", " > table,\n  .", " > table {\n    border-collapse: collapse;\n    border: ", "px solid\n      ", ";\n    table-layout: fixed;\n    font-size: 1em;\n    width: 100%;\n\n    &[data-autosize='true'] {\n      table-layout: auto;\n    }\n\n    & {\n      * {\n        box-sizing: border-box;\n      }\n      hr {\n        box-sizing: content-box;\n      }\n\n      tbody {\n        border-bottom: none;\n      }\n      th td {\n        background-color: white;\n      }\n      th,\n      td {\n        min-width: ", "px;\n        font-weight: normal;\n        vertical-align: top;\n        border: 1px solid\n          ", ";\n        border-right-width: 0;\n        border-bottom-width: 0;\n        padding: ", "px;\n        /* https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o */\n        ", "\n\n        ", ";\n\n        > *:first-child {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor.-right:first-child + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + * {\n          margin-top: 0;\n        }\n\n        th p:not(:first-of-type),\n        td p:not(:first-of-type) {\n          margin-top: 12px;\n        }\n      }\n      th {\n        background-color: ", ";\n        text-align: left;\n\n        /* only apply this styling to codeblocks in default background headercells */\n        /* TODO this needs to be overhauled as it relies on unsafe selectors */\n        &:not([style]) {\n          .code-block {\n            background-image: ", ";\n            background-attachment: local, scroll, scroll;\n            background-position: 100% 0, 100% 0, 0 0;\n            background-color: ", ";\n\n            .line-number-gutter {\n              background-color: ", ";\n            }\n\n            /* this is only relevant to the element taken care of by renderer */\n            > [data-ds--code--code-block] {\n              background-image: ", "!important;\n\n              background-color: ", "!important;\n\n              // selector lives inside @atlaskit/code\n              --ds--code--line-number-bg-color: ", ";\n            }\n          }\n        }\n      }\n    }\n  }\n"])), TableSharedCssClassName.TABLE_CONTAINER, tableMarginBottom, TableSharedCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableMarginTop, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableMarginTop, tableMarginSides, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableCellBorderWidth, (0, _components.themed)({
     light: _editorSharedStyles.akEditorTableBorder,
     dark: _editorSharedStyles.akEditorTableBorderDark
   })(props), tableCellMinWidth, (0, _components.themed)({

package/dist/cjs/ui/BaseTheme/index.js

@@ -17,8 +17,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@emotion/react");
 
-var _styledComponents = require("styled-components");
-
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _components = require("@atlaskit/theme/components");
@@ -76,9 +74,7 @@ function BaseThemeWrapper(_ref) {
   }, [breakpoint, dynamicTextSizing, baseFontSize, mode]);
   return /*#__PURE__*/_react.default.createElement(_react2.ThemeProvider, {
     theme: memoizedTheme
-  }, /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
-    theme: memoizedTheme
-  }, children));
+  }, children);
 }
 
 function BaseTheme(_ref3) {