@atlaskit/editor-common 65.0.0 → 66.0.2

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

@@ -1,7 +1,26 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _typeof from "@babel/runtime/helpers/typeof";
 import camelCase from 'lodash/camelCase';
 import kebabCase from '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 (_typeof(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
@@ -12,18 +31,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
  */
 
-export function normalizeFeatureFlags(rawFeatureFlags) {
+
+export 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(camelCase(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 = _slicedToArray(_ref, 1),
         key = _ref2[0];
@@ -40,7 +68,14 @@ export 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/esm/panel.js

@@ -0,0 +1 @@
+export { getPanelTypeBackground, darkPanelColors, getPanelDarkColor, panelSharedStyles, panelSharedStylesWithoutPrefix, PanelSharedCssClassName, PanelSharedSelectors, getPanelBackgroundDarkModeColors } from './styles/shared/panel';

package/dist/esm/styles/index.js

@@ -5,7 +5,6 @@ export { columnLayoutSharedStyle } from './shared/column-layout';
 export { mediaSingleSharedStyle, richMediaClassName } from './shared/media-single';
 export { blockquoteSharedStyles } from './shared/blockquote';
 export { headingsSharedStyles } from './shared/headings';
-export { getPanelTypeBackground, darkPanelColors, getPanelDarkColor, panelSharedStyles, PanelSharedCssClassName, PanelSharedSelectors, getPanelBackgroundDarkModeColors } from './shared/panel';
 export { ruleSharedStyles } from './shared/rule';
 export { whitespaceSharedStyles } from './shared/whitespace';
 export { paragraphSharedStyles } from './shared/paragraph';

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

@@ -2,6 +2,6 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 var linkSharedStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  a.blockLink {\n    display: block;\n  }\n"])));
 export { linkSharedStyle };

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

@@ -5,4 +5,4 @@ var _templateObject;
 import { css } from '@emotion/react';
 import { bulletListSelector, orderedListSelector } from '@atlaskit/adf-schema';
 import browser from '../../utils/browser';
-export var listsSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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.gecko ? 'display: inline-block;' : '', orderedListSelector, bulletListSelector);
+export var listsSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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.gecko ? 'display: inline-block;' : '', orderedListSelector, bulletListSelector);

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

@@ -1,9 +1,9 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { PanelType } from '@atlaskit/adf-schema';
 import { akEditorTableCellMinWidth, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
@@ -181,6 +181,11 @@ var mainDynamicStyles = function mainDynamicStyles(panelType) {
   };
 };
 
-export var panelSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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, borderRadius(), blockNodesVerticalMargin, gridSize(), akEditorTableCellMinWidth, mainDynamicStyles(PanelType.INFO), PanelSharedCssClassName.icon, gridSize() * 3, gridSize() * 3, gridSize(), iconDynamicStyles(PanelType.INFO), emojiSprite, panelEmojiSpriteVerticalAlignment, emojiImage, panelEmojiImageVerticalAlignment, PanelType.NOTE, mainDynamicStyles(PanelType.NOTE), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.NOTE), PanelType.TIP, mainDynamicStyles(PanelType.TIP), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.TIP), PanelType.WARNING, mainDynamicStyles(PanelType.WARNING), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.WARNING), PanelType.ERROR, mainDynamicStyles(PanelType.ERROR), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.ERROR), PanelType.SUCCESS, mainDynamicStyles(PanelType.SUCCESS), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.SUCCESS), PanelType.CUSTOM, themed({
-  dark: getPanelBackgroundDarkModeColors
-}));
+export var panelSharedStylesWithoutPrefix = function panelSharedStylesWithoutPrefix(props) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), borderRadius(), blockNodesVerticalMargin, gridSize(), akEditorTableCellMinWidth, mainDynamicStyles(PanelType.INFO)(props), PanelSharedCssClassName.icon, gridSize() * 3, gridSize() * 3, gridSize(), iconDynamicStyles(PanelType.INFO)(props), emojiSprite, panelEmojiSpriteVerticalAlignment, emojiImage, panelEmojiImageVerticalAlignment, PanelType.NOTE, mainDynamicStyles(PanelType.NOTE)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.NOTE)(props), PanelType.TIP, mainDynamicStyles(PanelType.TIP)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.TIP)(props), PanelType.WARNING, mainDynamicStyles(PanelType.WARNING)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.WARNING)(props), PanelType.ERROR, mainDynamicStyles(PanelType.ERROR)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.ERROR)(props), PanelType.SUCCESS, mainDynamicStyles(PanelType.SUCCESS)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.SUCCESS)(props), PanelType.CUSTOM, themed({
+    dark: getPanelBackgroundDarkModeColors
+  })(props));
+};
+export var panelSharedStyles = function panelSharedStyles(props) {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .", " {\n    ", "\n  }\n"])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix(props));
+};

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

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { akEditorLineHeight } from '@atlaskit/editor-shared-styles';
 import { DN50, N30A } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
@@ -11,4 +11,6 @@ var divider = themed({
   dark: DN50
 }); // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
 
-export var ruleSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & hr {\n    border: none;\n    background-color: ", ";\n    margin: ", "em 0;\n    height: 2px;\n    border-radius: 1px;\n  }\n"])), divider, akEditorLineHeight);
+export var ruleSharedStyles = function ruleSharedStyles(props) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & hr {\n    border: none;\n    background-color: ", ";\n    margin: ", "em 0;\n    height: 2px;\n    border-radius: 1px;\n  }\n"])), divider(props), akEditorLineHeight);
+};

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

@@ -32,7 +32,7 @@ export var TableSharedCssClassName = {
 };
 
 var tableSharedStyle = function tableSharedStyle(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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, akEditorTableNumberColumnWidth - 1, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableMarginTop, tableMarginSides, tableCellBorderWidth, themed({
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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, 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, themed({
     light: akEditorTableBorder,
     dark: akEditorTableBorderDark
   })(props), tableCellMinWidth, themed({

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

@@ -1,7 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { useMemo } from 'react';
 import { ThemeProvider } from '@emotion/react';
-import { ThemeProvider as DeprecatedThemeProvider } from 'styled-components';
 import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { CHANNEL, fontSize } from '@atlaskit/theme/constants';
@@ -51,9 +50,7 @@ export function BaseThemeWrapper(_ref) {
   }, [breakpoint, dynamicTextSizing, baseFontSize, mode]);
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: memoizedTheme
-  }, /*#__PURE__*/React.createElement(DeprecatedThemeProvider, {
-    theme: memoizedTheme
-  }, children));
+  }, children);
 }
 export function BaseTheme(_ref3) {
   var children = _ref3.children,

package/dist/esm/ui/Expand/index.js

@@ -1,9 +1,14 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["children"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
+/** @jsx jsx */
+import React, { forwardRef } from 'react';
+import { css, jsx } from '@emotion/react';
 import { defineMessages } from 'react-intl-next';
-import styled, { css } from 'styled-components';
 import { akEditorLineHeight, akEditorSwoopCubicBezier, akLayoutGutterOffset, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import * as colors from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
@@ -42,47 +47,79 @@ var EXPAND_EXPANDED_BORDER_COLOR = themed({
   light: colors.N40A,
   dark: colors.DN50
 });
-export var ExpandIconWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  display: flex;\n  color: ", ";\n  border-radius: ", "px;\n  width: 24px;\n  height: 24px;\n\n  &:hover {\n    background: ", ";\n  }\n\n  svg {\n    ", "\n    transition: transform 0.2s ", ";\n  }\n"])), themed({
-  light: colors.N90,
-  dark: '#d9dde3'
-}), gridSize() / 2, colors.N30A, function (props) {
-  return props.expanded ? 'transform: rotate(90deg);' : '';
-}, akEditorSwoopCubicBezier);
-export var ExpandLayoutWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: ", "px;\n  height: ", "px;\n"])), gridSize() * 3, gridSize() * 3);
-var ContainerStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  border-radius: ", "px;\n  min-height: 25px;\n  background: ", ";\n  margin: ", ";\n\n  transition: background 0.3s ", ",\n    border-color 0.3s ", ";\n  padding: ", "px;\n\n  &:hover {\n    border: 1px solid ", ";\n    background: ", ";\n  }\n\n  td > &:first-child {\n    margin-top: 0;\n  }\n"])), function (_ref) {
-  var expanded = _ref.expanded,
-      focused = _ref.focused;
-  var expandedBorderColor = expanded ? EXPAND_EXPANDED_BORDER_COLOR : EXPAND_COLLAPSED_BORDER_COLOR;
-  return focused ? EXPAND_FOCUSED_BORDER_COLOR : expandedBorderColor;
-}, BORDER_RADIUS, function (_ref2) {
-  var expanded = _ref2.expanded;
-  return !expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND;
-}, function (props) {
-  return "".concat(gridSize() / 2 / fontSize(), "rem ").concat( // Only only these margins if the expand isn't editable
-  // and is the root level expand.
-  props['data-node-type'] === 'expand' ? "-".concat(akLayoutGutterOffset, "px") : "0", " 0");
-}, akEditorSwoopCubicBezier, akEditorSwoopCubicBezier, gridSize, themed({
-  light: colors.N50A,
-  dark: colors.DN50
-}), EXPAND_SELECTED_BACKGROUND);
-var ContentStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n"])), function (_ref3) {
-  var expanded = _ref3.expanded;
-  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      padding-top: ", "px;\n      padding-right: ", "px;\n      padding-left: ", "px;\n      display: table;\n      display: flow-root;\n\n      // The follow rules inside @supports block are added as a part of ED-8893\n      // The fix is targeting mobile bridge on iOS 12 or below,\n      // We should consider remove this fix when we no longer support iOS 12\n      @supports not (display: flow-root) {\n        width: 100%;\n        box-sizing: border-box;\n      }\n\n      ", "\n    "])), expanded ? gridSize() : 0, gridSize(), gridSize() * 4 - gridSize() / 2, !expanded ? "\n        .expand-content-wrapper, .nestedExpand-content-wrapper {\n          /* We visually hide the content here to preserve the content during copy+paste */\n          width: 100%;\n          display: block;\n          height: 0;\n          overflow: hidden;\n          clip: rect(1px, 1px, 1px, 1px);\n          white-space: nowrap;\n          user-select: none;\n        }\n      " : '');
+export var ExpandIconWrapper = function ExpandIconWrapper(_ref) {
+  var children = _ref.children,
+      expanded = _ref.expanded;
+  return jsx("div", {
+    css: function css(props) {
+      return expanded ? [expandIconWrapperStyle(props), expandIconWrapperExpandedStyle] : expandIconWrapperStyle(props);
+    }
+  }, children);
+};
+
+var expandIconWrapperStyle = function expandIconWrapperStyle(props) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  display: flex;\n  color: ", ";\n  border-radius: ", "px;\n  width: 24px;\n  height: 24px;\n\n  &:hover {\n    background: ", ";\n  }\n\n  svg {\n    transition: transform 0.2s ", ";\n  }\n"])), themed({
+    light: colors.N90,
+    dark: '#d9dde3'
+  })(props), gridSize() / 2, colors.N30A, akEditorSwoopCubicBezier);
+};
+
+var expandIconWrapperExpandedStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  svg {\n    transform: rotate(90deg);\n  }\n"])));
+export var expandLayoutWrapperStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: ", "px;\n  height: ", "px;\n"])), gridSize() * 3, gridSize() * 3);
+export var ExpandLayoutWrapperWithRef = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  return jsx("div", _extends({
+    css: expandLayoutWrapperStyle
+  }, rest, {
+    ref: ref
+  }), children);
 });
-var TitleInputStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  outline: none;\n  border: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: normal;\n  color: ", ";\n  background: transparent;\n  display: flex;\n  flex: 1;\n  padding: 0 0 0 ", "px;\n  width: 100%;\n\n  &::placeholder {\n    opacity: 0.6;\n    color: ", ";\n  }\n"])), relativeFontSizeToBase16(fontSize()), akEditorLineHeight, themed({
-  light: colors.N200A,
-  dark: colors.DN600
-}), gridSize() / 2, themed({
-  light: colors.N200A,
-  dark: colors.DN600
-}));
-var TitleContainerStyles = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  padding: 0;\n  display: flex;\n  align-items: flex-start;\n  background: none;\n  border: none;\n  font-size: ", ";\n  width: 100%;\n  color: ", ";\n  overflow: hidden;\n  cursor: pointer;\n  // Prevent browser selection being inside the title container\n  user-select: none;\n\n  &:focus {\n    outline: 0;\n  }\n"])), relativeFontSizeToBase16(fontSize()), themed({
-  light: colors.N300A,
-  dark: colors.DN600
-}));
+
+var containerStyles = function containerStyles(styleProps) {
+  var expanded = styleProps.expanded,
+      focused = styleProps.focused;
+  var marginTop = "".concat(gridSize() / 2 / fontSize(), "rem");
+  var marginBottom = 0; // Only only these margins if the expand isn't editable
+  // and is the root level expand.
+
+  var marginHorizontal = styleProps['data-node-type'] === 'expand' ? "-".concat(akLayoutGutterOffset, "px") : 0;
+  var margin = "".concat(marginTop, " ").concat(marginHorizontal, " ").concat(marginBottom);
+  return function (themeProps) {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    border-width: 1px;\n    border-style: solid;\n    border-color: ", ";\n    border-radius: ", "px;\n    min-height: 25px;\n    background: ", ";\n    margin: ", ";\n\n    transition: background 0.3s ", ",\n      border-color 0.3s ", ";\n    padding: ", "px;\n\n    &:hover {\n      border: 1px solid\n        ", ";\n      background: ", ";\n    }\n\n    td > &:first-child {\n      margin-top: 0;\n    }\n  "])), focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR(themeProps) : EXPAND_COLLAPSED_BORDER_COLOR, BORDER_RADIUS, !expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND(themeProps), margin, akEditorSwoopCubicBezier, akEditorSwoopCubicBezier, gridSize(), themed({
+      light: colors.N50A,
+      dark: colors.DN50
+    })(themeProps), EXPAND_SELECTED_BACKGROUND(themeProps));
+  };
+};
+
+var contentStyles = function contentStyles(styleProps) {
+  return function (themeProps) {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding-top: ", "px;\n  padding-right: ", "px;\n  padding-left: ", "px;\n  display: flow-root;\n\n  // The follow rules inside @supports block are added as a part of ED-8893\n  // The fix is targeting mobile bridge on iOS 12 or below,\n  // We should consider remove this fix when we no longer support iOS 12\n  @supports not (display: flow-root) {\n    width: 100%;\n    box-sizing: border-box;\n  }\n\n  ", "\n"])), styleProps.expanded ? gridSize() : 0, gridSize(), gridSize() * 4 - gridSize() / 2, !styleProps.expanded ? "\n        .expand-content-wrapper, .nestedExpand-content-wrapper {\n          /* We visually hide the content here to preserve the content during copy+paste */\n          width: 100%;\n          display: block;\n          height: 0;\n          overflow: hidden;\n          clip: rect(1px, 1px, 1px, 1px);\n          white-space: nowrap;\n          user-select: none;\n        }\n      " : '');
+  };
+};
+
+var titleInputStyles = function titleInputStyles(props) {
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  outline: none;\n  border: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: normal;\n  color: ", ";\n  background: transparent;\n  display: flex;\n  flex: 1;\n  padding: 0 0 0 ", "px;\n  width: 100%;\n\n  &::placeholder {\n    opacity: 0.6;\n    color: ", ";\n  }\n"])), relativeFontSizeToBase16(fontSize()), akEditorLineHeight, themed({
+    light: colors.N200A,
+    dark: colors.DN600
+  })(props), gridSize() / 2, themed({
+    light: colors.N200A,
+    dark: colors.DN600
+  })(props));
+};
+
+var titleContainerStyles = function titleContainerStyles(props) {
+  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  padding: 0;\n  display: flex;\n  align-items: flex-start;\n  background: none;\n  border: none;\n  font-size: ", ";\n  width: 100%;\n  color: ", ";\n  overflow: hidden;\n  cursor: pointer;\n  // Prevent browser selection being inside the title container\n  user-select: none;\n\n  &:focus {\n    outline: 0;\n  }\n"])), relativeFontSizeToBase16(fontSize()), themed({
+    light: colors.N300A,
+    dark: colors.DN600
+  })(props));
+};
+
 export var sharedExpandStyles = {
-  TitleInputStyles: TitleInputStyles,
-  TitleContainerStyles: TitleContainerStyles,
-  ContainerStyles: ContainerStyles,
-  ContentStyles: ContentStyles
+  titleInputStyles: titleInputStyles,
+  titleContainerStyles: titleContainerStyles,
+  containerStyles: containerStyles,
+  contentStyles: contentStyles
 };

package/dist/esm/ui/{IntlNextErrorBoundary → IntlErrorBoundary}/index.js

@@ -20,15 +20,15 @@ var isMissingIntlProviderInAncestryError = function isMissingIntlProviderInAnces
   return err === null || err === void 0 ? void 0 : (_err$toString = err.toString()) === null || _err$toString === void 0 ? void 0 : _err$toString.includes('<IntlProvider> needs to exist in the component ancestry');
 };
 
-export var IntlNextErrorBoundary = /*#__PURE__*/function (_React$Component) {
-  _inherits(IntlNextErrorBoundary, _React$Component);
+export var IntlErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  _inherits(IntlErrorBoundary, _React$Component);
 
-  var _super = _createSuper(IntlNextErrorBoundary);
+  var _super = _createSuper(IntlErrorBoundary);
 
-  function IntlNextErrorBoundary() {
+  function IntlErrorBoundary() {
     var _this;
 
-    _classCallCheck(this, IntlNextErrorBoundary);
+    _classCallCheck(this, IntlErrorBoundary);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -43,7 +43,7 @@ export var IntlNextErrorBoundary = /*#__PURE__*/function (_React$Component) {
     return _this;
   }
 
-  _createClass(IntlNextErrorBoundary, [{
+  _createClass(IntlErrorBoundary, [{
     key: "componentDidCatch",
     value: function componentDidCatch(error, errorInfo) {
       // if missing IntlProvider in ancestry, we setup a fallback IntlProvider ourselves
@@ -69,5 +69,5 @@ export var IntlNextErrorBoundary = /*#__PURE__*/function (_React$Component) {
     }
   }]);
 
-  return IntlNextErrorBoundary;
+  return IntlErrorBoundary;
 }(React.Component);

package/dist/esm/ui/MediaSingle/index.js

@@ -1,9 +1,12 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import classnames from 'classnames';
 import { akEditorMediaResizeHandlerPaddingWide, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { calcPxFromPct } from './grid';
-import { MediaSingleWrapper, MediaWrapper } from './styled';
+import { MediaSingleDimensionHelper, MediaWrapper } from './styled';
 export var DEFAULT_IMAGE_WIDTH = 250;
 export var DEFAULT_IMAGE_HEIGHT = 200;
 export var wrappedLayouts = ['wrap-left', 'wrap-right', 'align-end', 'align-start'];
@@ -81,13 +84,15 @@ export default function MediaSingle(_ref) {
       media = _children[0],
       caption = _children[1];
 
-  return /*#__PURE__*/React.createElement(MediaSingleWrapper, {
-    innerRef: handleMediaSingleRef,
-    width: width,
-    layout: layout,
-    containerWidth: containerWidth,
-    pctWidth: pctWidth,
-    fullWidthMode: fullWidthMode,
+  return jsx("div", {
+    ref: handleMediaSingleRef,
+    css: MediaSingleDimensionHelper({
+      width: width,
+      layout: layout,
+      containerWidth: containerWidth,
+      pctWidth: pctWidth,
+      fullWidthMode: fullWidthMode
+    }),
     "data-layout": layout,
     "data-width": pctWidth,
     "data-node-type": nodeType,
@@ -95,7 +100,7 @@ export default function MediaSingle(_ref) {
       'is-loading': isLoading,
       'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
     })
-  }, /*#__PURE__*/React.createElement(MediaWrapper, {
+  }, jsx(MediaWrapper, {
     hasFallbackContainer: hasFallbackContainer,
     height: mediaWrapperHeight,
     paddingBottom: paddingBottom

package/dist/esm/ui/MediaSingle/styled.js

@@ -1,8 +1,12 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["children"];
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3;
 
-import styled, { css } from 'styled-components';
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/react';
 import { akEditorFullPageMaxWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { calcBreakoutWidth, calcWideWidth } from '../../utils/breakout';
 
@@ -140,12 +144,15 @@ var RenderFallbackContainer = function RenderFallbackContainer(_ref2) {
   return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n"])), hasFallbackContainer ? "\n  &::after {\n    content: '';\n    display: block;\n    ".concat(height ? "height: ".concat(height, "px;") : paddingBottom ? "padding-bottom: ".concat(paddingBottom, ";") : '', "\n\n    /* Fixes extra padding problem in Firefox */\n    font-size: 0;\n    line-height: 0;\n  }\n  ") : '');
 };
 
-export var MediaWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n\n  ", "\n\n  /* Editor */\n  & > figure {\n    position: ", ";\n    height: 100%;\n    width: 100%;\n  }\n\n  & > div {\n    position: ", ";\n    height: 100%;\n    width: 100%;\n  }\n\n  &[data-node-type='embedCard'] > div {\n    width: 100%;\n  }\n\n  /* Renderer */\n  [data-node-type='media'] {\n    position: static !important;\n\n    > div {\n      position: absolute;\n      height: 100%;\n    }\n  }\n"])), RenderFallbackContainer, function (_ref3) {
-  var hasFallbackContainer = _ref3.hasFallbackContainer;
-  return hasFallbackContainer ? 'absolute' : 'relative';
-}, function (_ref4) {
-  var hasFallbackContainer = _ref4.hasFallbackContainer;
-  return hasFallbackContainer ? 'absolute' : 'relative';
-});
-export var MediaSingleWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n"])), MediaSingleDimensionHelper);
+export var mediaWrapperStyle = function mediaWrapperStyle(props) {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n\n  ", "\n\n  /* Editor */\n  & > figure {\n    position: ", ";\n    height: 100%;\n    width: 100%;\n  }\n\n  & > div {\n    position: ", ";\n    height: 100%;\n    width: 100%;\n  }\n\n  &[data-node-type='embedCard'] > div {\n    width: 100%;\n  }\n\n  /* Renderer */\n  [data-node-type='media'] {\n    position: static !important;\n\n    > div {\n      position: absolute;\n      height: 100%;\n    }\n  }\n"])), RenderFallbackContainer(props), props.hasFallbackContainer ? 'absolute' : 'relative', props.hasFallbackContainer ? 'absolute' : 'relative');
+};
+export var MediaWrapper = function MediaWrapper(_ref3) {
+  var children = _ref3.children,
+      rest = _objectWithoutProperties(_ref3, _excluded);
+
+  return jsx("div", {
+    css: mediaWrapperStyle(rest)
+  }, children);
+};
 MediaWrapper.displayName = 'WrapperMediaSingle';

package/dist/esm/ui/Popup/index.js

@@ -26,6 +26,8 @@ var Popup = /*#__PURE__*/function (_React$Component) {
   var _super = _createSuper(Popup);
 
   function Popup() {
+    var _window;
+
     var _this;
 
     _classCallCheck(this, Popup);
@@ -58,6 +60,10 @@ var Popup = /*#__PURE__*/function (_React$Component) {
       return _this.scheduledUpdatePosition(_this.props);
     });
 
+    _defineProperty(_assertThisInitialized(_this), "resizeObserver", (_window = window) !== null && _window !== void 0 && _window.ResizeObserver ? new ResizeObserver(function () {
+      _this.scheduledUpdatePosition(_this.props);
+    }) : undefined);
+
     return _this;
   }
 
@@ -184,9 +190,14 @@ var Popup = /*#__PURE__*/function (_React$Component) {
     value: function componentDidMount() {
       window.addEventListener('resize', this.onResize);
       var stick = this.props.stick;
+      this.scrollParentElement = findOverflowScrollParent(this.props.target);
+
+      if (this.scrollParentElement && this.resizeObserver) {
+        this.resizeObserver.observe(this.scrollParentElement);
+      }
 
       if (stick) {
-        this.scrollElement = findOverflowScrollParent(this.props.target);
+        this.scrollElement = this.scrollParentElement;
       } else {
         this.scrollElement = this.props.scrollableElement;
       }
@@ -204,6 +215,10 @@ var Popup = /*#__PURE__*/function (_React$Component) {
         this.scrollElement.removeEventListener('scroll', this.onResize);
       }
 
+      if (this.scrollParentElement && this.resizeObserver) {
+        this.resizeObserver.unobserve(this.scrollParentElement);
+      }
+
       this.scheduledUpdatePosition.cancel();
     }
   }, {

package/dist/esm/ui/UnsupportedBlock/index.js

@@ -15,7 +15,7 @@ import { unsupportedContentMessages } from '../../messages/unsupportedContent';
 import { ACTION_SUBJECT_ID } from '../../utils/analytics';
 import { trackUnsupportedContentTooltipDisplayedFor } from '../../utils/track-unsupported-content';
 import { getUnsupportedContent } from '../unsupported-content-helper';
-var blockNodeStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: flex;\n  font-size: ", ";\n  margin: 10px 0;\n  min-height: 24px;\n  padding: 10px;\n  text-align: center;\n  vertical-align: text-bottom;\n  min-width: 120px;\n  align-items: center;\n  justify-content: center;\n"])), N30, N50, borderRadius(), relativeFontSizeToBase16(fontSize()));
+var blockNodeStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: flex;\n  font-size: ", ";\n  margin: 10px 0;\n  min-height: 24px;\n  padding: 10px;\n  text-align: center;\n  vertical-align: text-bottom;\n  min-width: 120px;\n  align-items: center;\n  justify-content: center;\n"])), N30, N50, borderRadius(), relativeFontSizeToBase16(fontSize()));
 
 var UnsupportedBlockNode = function UnsupportedBlockNode(_ref) {
   var node = _ref.node,

package/dist/esm/ui/index.js

@@ -11,9 +11,7 @@ export { default as withOuterListeners } from './with-outer-listeners';
 export { WidthConsumer, WidthProvider, getBreakpoint } from './WidthProvider';
 export { default as overflowShadow, shadowClassNames } from './OverflowShadow';
 export { WithCreateAnalyticsEvent } from './WithCreateAnalyticsEvent';
-export { messages as expandMessages, sharedExpandStyles, ExpandIconWrapper, ExpandLayoutWrapper } from './Expand';
+export { messages as expandMessages, sharedExpandStyles, ExpandIconWrapper, expandLayoutWrapperStyle, ExpandLayoutWrapperWithRef } from './Expand';
 export { ErrorMessage, HelperMessage, ValidMessage } from './Messages';
 export { clearNextSiblingMarginTopStyle } from './clear-next-sibling-margin-top';
-export { IntlNextErrorBoundary, REACT_INTL_ERROR_MESSAGE } from './IntlNextErrorBoundary';
-export { IntlLegacyFallbackProvider } from './IntlLegacyFallbackProvider';
-export { LegacyToNextIntlProvider } from './LegacyToNextIntlProvider';
+export { IntlErrorBoundary, REACT_INTL_ERROR_MESSAGE } from './IntlErrorBoundary';