@atlaskit/editor-common 64.0.0 → 66.0.1

package/dist/esm/styles/shared/paragraph.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, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles'; // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
 
 export var paragraphSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & p {\n    font-size: 1em;\n    line-height: ", ";\n    font-weight: normal;\n    margin-top: ", ";\n    margin-bottom: 0;\n    letter-spacing: -0.005em;\n  }\n"])), akEditorLineHeight, blockNodesVerticalMargin);

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/shadow.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 { akEditorShadowZIndex } from '@atlaskit/editor-shared-styles';
 import { N40A } from '@atlaskit/theme/colors';
 import { shadowClassNames } from '../../ui/OverflowShadow';

package/dist/esm/styles/shared/table.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 { tableCellContentDomSelector, tableCellSelector, tableHeaderSelector, tablePrefixSelector } from '@atlaskit/adf-schema';
 import { akEditorBreakoutPadding, akEditorFullWidthLayoutWidth, akEditorTableBorder, akEditorTableBorderDark, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarDark, akEditorWideLayoutWidth, getTableCellBackgroundDarkModeColors, overflowShadow } from '@atlaskit/editor-shared-styles';
 import { DN20 } from '@atlaskit/theme/colors';
@@ -30,42 +30,46 @@ export var TableSharedCssClassName = {
   TABLE_CELL_WRAPPER: tableCellSelector,
   TABLE_HEADER_CELL_WRAPPER: tableHeaderSelector
 };
-var tableSharedStyle = 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({
-  light: akEditorTableBorder,
-  dark: akEditorTableBorderDark
-}), tableCellMinWidth, themed({
-  light: akEditorTableBorder,
-  dark: akEditorTableBorderDark
-}), tableCellPadding, browser.gecko || browser.ie || browser.mac && browser.chrome ? 'background-clip: padding-box;' : '', themed({
-  dark: getTableCellBackgroundDarkModeColors
-}), themed({
-  light: akEditorTableToolbar,
-  dark: akEditorTableToolbarDark
-}), overflowShadow({
-  background: themed({
+
+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  .", " > 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({
+    light: akEditorTableBorder,
+    dark: akEditorTableBorderDark
+  })(props), tableCellPadding, browser.gecko || browser.ie || browser.mac && browser.chrome ? 'background-clip: padding-box;' : '', themed({
+    dark: getTableCellBackgroundDarkModeColors
+  })(props), themed({
+    light: akEditorTableToolbar,
+    dark: akEditorTableToolbarDark
+  })(props), overflowShadow({
+    background: themed({
+      light: 'rgb(235, 237, 240)',
+      dark: 'rgb(36, 47, 66)'
+    })(props),
+    width: "".concat(gridSize(), "px")
+  }), themed({
     light: 'rgb(235, 237, 240)',
     dark: 'rgb(36, 47, 66)'
-  }),
-  width: "".concat(gridSize(), "px")
-}), themed({
-  light: 'rgb(235, 237, 240)',
-  dark: 'rgb(36, 47, 66)'
-}), themed({
-  light: 'rgb(226, 229, 233)',
-  dark: DN20
-}), overflowShadow({
-  background: themed({
+  })(props), themed({
+    light: 'rgb(226, 229, 233)',
+    dark: DN20
+  })(props), overflowShadow({
+    background: themed({
+      light: 'rgb(235, 237, 240)',
+      dark: 'rgb(36, 47, 66)'
+    })(props),
+    width: "".concat(gridSize(), "px")
+  }), themed({
     light: 'rgb(235, 237, 240)',
     dark: 'rgb(36, 47, 66)'
-  }),
-  width: "".concat(gridSize(), "px")
-}), themed({
-  light: 'rgb(235, 237, 240)',
-  dark: 'rgb(36, 47, 66)'
-}), themed({
-  light: 'rgb(226, 229, 233)',
-  dark: DN20
-}));
+  })(props), themed({
+    light: 'rgb(226, 229, 233)',
+    dark: DN20
+  })(props));
+};
+
 export var calcTableWidth = function calcTableWidth(layout, containerWidth) {
   var addControllerPadding = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
 

package/dist/esm/styles/shared/task-decision.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 { akEditorTableCellMinWidth } from '@atlaskit/editor-shared-styles';
 export var TaskDecisionSharedCssClassName = {
   DECISION_CONTAINER: 'decisionItemView-content-wrap'

package/dist/esm/styles/shared/text-color.js

@@ -2,5 +2,5 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 export var textColorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .fabric-text-color-mark {\n    color: var(--custom-text-color, inherit);\n  }\n\n  a .fabric-text-color-mark {\n    color: unset;\n  }\n"])));

package/dist/esm/styles/shared/whitespace.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 whitespaceSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  word-wrap: break-word;\n  white-space: pre-wrap;\n"])));
 export { whitespaceSharedStyles };

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

@@ -1,7 +1,10 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { useMemo } from 'react';
-import { ThemeProvider } from 'styled-components';
+import { ThemeProvider } from '@emotion/react';
+import { ThemeProvider as DeprecatedThemeProvider } from 'styled-components';
 import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
-import { fontSize } from '@atlaskit/theme/constants';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+import { CHANNEL, fontSize } from '@atlaskit/theme/constants';
 import { WidthConsumer } from '../WidthProvider';
 
 function mapBreakpointToFontSize(breakpoint) {
@@ -34,22 +37,30 @@ export function BaseThemeWrapper(_ref) {
       dynamicTextSizing = _ref.dynamicTextSizing,
       baseFontSize = _ref.baseFontSize,
       children = _ref.children;
+
+  var _useGlobalTheme = useGlobalTheme(),
+      mode = _useGlobalTheme.mode;
+
   var memoizedTheme = useMemo(function () {
-    return {
+    return _defineProperty({
       baseFontSize: dynamicTextSizing ? mapBreakpointToFontSize(breakpoint) : baseFontSize || mapBreakpointToFontSize('S'),
       layoutMaxWidth: dynamicTextSizing ? mapBreakpointToLayoutMaxWidth(breakpoint) : akEditorDefaultLayoutWidth
-    };
-  }, [breakpoint, dynamicTextSizing, baseFontSize]);
+    }, CHANNEL, {
+      mode: mode
+    });
+  }, [breakpoint, dynamicTextSizing, baseFontSize, mode]);
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: memoizedTheme
-  }, children);
+  }, /*#__PURE__*/React.createElement(DeprecatedThemeProvider, {
+    theme: memoizedTheme
+  }, children));
 }
-export function BaseTheme(_ref2) {
-  var children = _ref2.children,
-      dynamicTextSizing = _ref2.dynamicTextSizing,
-      baseFontSize = _ref2.baseFontSize;
-  return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref3) {
-    var breakpoint = _ref3.breakpoint;
+export function BaseTheme(_ref3) {
+  var children = _ref3.children,
+      dynamicTextSizing = _ref3.dynamicTextSizing,
+      baseFontSize = _ref3.baseFontSize;
+  return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref4) {
+    var breakpoint = _ref4.breakpoint;
     return /*#__PURE__*/React.createElement(BaseThemeWrapper, {
       dynamicTextSizing: dynamicTextSizing,
       breakpoint: breakpoint,

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

@@ -12,13 +12,14 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import { N200, N400 } from '@atlaskit/theme/colors';
 import { messages } from './messages';
-var CaptionWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: 8px;\n  text-align: center;\n  position: relative;\n  color: ", ";\n"])), N400);
-var Placeholder = styled.p(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  position: absolute;\n  top: 0;\n  width: 100%;\n"])), N200);
+var captionWrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: 8px;\n  text-align: center;\n  position: relative;\n  color: ", ";\n"])), N400);
+var placeholderStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  position: absolute;\n  top: 0;\n  width: 100%;\n"])), N200);
 export var CaptionComponent = /*#__PURE__*/function (_React$Component) {
   _inherits(CaptionComponent, _React$Component);
 
@@ -40,10 +41,14 @@ export var CaptionComponent = /*#__PURE__*/function (_React$Component) {
           dataAttributes = _this$props.dataAttributes,
           formatMessage = _this$props.intl.formatMessage;
       var showPlaceholder = !selected && !hasContent;
-      return /*#__PURE__*/React.createElement(CaptionWrapper, _extends({
+      return jsx("div", _extends({
         "data-media-caption": true,
         "data-testid": "media-caption"
-      }, dataAttributes), showPlaceholder ? /*#__PURE__*/React.createElement(Placeholder, null, formatMessage(messages.placeholder)) : null, children);
+      }, dataAttributes, {
+        css: captionWrapperStyle
+      }), showPlaceholder ? jsx("p", {
+        css: placeholderStyle
+      }, formatMessage(messages.placeholder)) : null, 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/link.js

@@ -2,6 +2,5 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import styled from 'styled-components';
-export var MediaLink = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  background: transparent;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  cursor: pointer;\n  width: 100%;\n  height: 100%;\n"])));
-MediaLink.displayName = 'MediaLink';
+import { css } from '@emotion/react';
+export var mediaLinkStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  background: transparent;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  cursor: pointer;\n  width: 100%;\n  height: 100%;\n"])));

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/Messages/index.js

@@ -1,35 +1,37 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-import React from 'react';
-import styled from 'styled-components';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { G400, N200, R400 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
-var Message = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", " font-weight: normal;\n  color: ", ";\n  margin-top: ", "px;\n  display: flex;\n  justify-content: baseline;\n"])), h200, function (props) {
-  if (props.error) {
-    return R400;
-  }
+var errorColor = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n"])), R400);
+var validColor = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), G400);
 
-  if (props.valid) {
-    return G400;
-  }
+var messageStyle = function messageStyle(props) {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", " font-weight: normal;\n  color: ", ";\n  margin-top: ", "px;\n  display: flex;\n  justify-content: baseline;\n"])), h200(props), N200, gridSize() / 2);
+};
 
-  return N200;
-}, gridSize() / 2);
-var IconWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-right: 4px;\n"])));
+var iconWrapperStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-right: 4px;\n"])));
 export var HelperMessage = function HelperMessage(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/React.createElement(Message, null, children);
+  return jsx("div", {
+    css: messageStyle
+  }, children);
 };
 export var ErrorMessage = function ErrorMessage(_ref2) {
   var children = _ref2.children;
-  return /*#__PURE__*/React.createElement(Message, {
-    error: true
-  }, /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
+  return jsx("div", {
+    css: function css(theme) {
+      return [messageStyle(theme), errorColor];
+    }
+  }, jsx("span", {
+    css: iconWrapperStyle
+  }, jsx(ErrorIcon, {
     size: "small",
     label: "error",
     "aria-label": "error"
@@ -37,9 +39,13 @@ export var ErrorMessage = function ErrorMessage(_ref2) {
 };
 export var ValidMessage = function ValidMessage(_ref3) {
   var children = _ref3.children;
-  return /*#__PURE__*/React.createElement(Message, {
-    valid: true
-  }, /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(SuccessIcon, {
+  return jsx("div", {
+    css: function css(theme) {
+      return [messageStyle(theme), validColor];
+    }
+  }, jsx("span", {
+    css: iconWrapperStyle
+  }, jsx(SuccessIcon, {
     size: "small",
     label: "success"
   })), children);