@atlaskit/editor-common 63.0.0 → 65.0.0

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

@@ -9,7 +9,7 @@ exports.annotationSharedStyles = exports.annotationPrefix = exports.AnnotationSh
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -31,22 +31,30 @@ var Y75a = 'rgba(255, 240, 179, 0.5)';
 var Y200a = 'rgba(255, 196, 0, 0.82)';
 var DY75a = 'rgba(111, 92, 37, 0.5)';
 var DY200 = '#82641c';
-var AnnotationSharedCSSByState = {
-  focus: (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    background: ", ";\n    border-bottom: 2px solid ", ";\n    box-shadow: 1px 2px 3px ", ", -1px 2px 3px ", ";\n    cursor: pointer;\n  "])), (0, _components.themed)({
-    light: _colors.Y75,
-    dark: DY75
-  }), (0, _components.themed)({
-    light: _colors.Y300,
-    dark: DY300
-  }), _colors.N60A, _colors.N60A),
-  blur: (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    background: ", ";\n    border-bottom: 2px solid ", ";\n    cursor: pointer;\n  "])), (0, _components.themed)({
-    light: Y75a,
-    dark: DY75a
-  }), (0, _components.themed)({
-    light: Y200a,
-    dark: DY200
-  }))
+
+var AnnotationSharedCSSByState = function AnnotationSharedCSSByState(props) {
+  return {
+    focus: (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    background: ", ";\n    border-bottom: 2px solid ", ";\n    box-shadow: 1px 2px 3px ", ", -1px 2px 3px ", ";\n    cursor: pointer;\n  "])), (0, _components.themed)({
+      light: _colors.Y75,
+      dark: DY75
+    })(props), (0, _components.themed)({
+      light: _colors.Y300,
+      dark: DY300
+    })(props), _colors.N60A, _colors.N60A),
+    blur: (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    background: ", ";\n    border-bottom: 2px solid ", ";\n    cursor: pointer;\n  "])), (0, _components.themed)({
+      light: Y75a,
+      dark: DY75a
+    })(props), (0, _components.themed)({
+      light: Y200a,
+      dark: DY200
+    })(props))
+  };
 };
+
 exports.AnnotationSharedCSSByState = AnnotationSharedCSSByState;
-var annotationSharedStyles = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    .", " {\n      ", ";\n    }\n\n    .", " {\n      ", ";\n      cursor: initial;\n    }\n\n    .", " {\n      ", ";\n    }\n  }\n"])), AnnotationSharedClassNames.focus, AnnotationSharedCSSByState.focus, AnnotationSharedClassNames.draft, AnnotationSharedCSSByState.focus, AnnotationSharedClassNames.blur, AnnotationSharedCSSByState.blur);
+
+var annotationSharedStyles = function annotationSharedStyles(props) {
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    .", " {\n      ", ";\n    }\n\n    .", " {\n      ", ";\n      cursor: initial;\n    }\n\n    .", " {\n      ", ";\n    }\n  }\n"])), AnnotationSharedClassNames.focus, AnnotationSharedCSSByState(props).focus, AnnotationSharedClassNames.draft, AnnotationSharedCSSByState(props).focus, AnnotationSharedClassNames.blur, AnnotationSharedCSSByState(props).blur);
+};
+
 exports.annotationSharedStyles = annotationSharedStyles;

package/dist/cjs/styles/shared/block-marks.js

@@ -9,9 +9,9 @@ exports.blockMarksSharedStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _templateObject;
 
-var blockMarksSharedStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /**\n   * We need to remove margin-top from first item\n   * inside doc, tableCell, tableHeader, blockquote, etc.\n   */\n  *:not(.fabric-editor-block-mark) >,\n  /* For nested block marks */\n  *:not(.fabric-editor-block-mark) > div.fabric-editor-block-mark:first-child {\n    p,\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n      &:first-child {\n        margin-top: 0;\n      }\n    }\n  }\n"])));
+var blockMarksSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /**\n   * We need to remove margin-top from first item\n   * inside doc, tableCell, tableHeader, blockquote, etc.\n   */\n  *:not(.fabric-editor-block-mark) >,\n  /* For nested block marks */\n  *:not(.fabric-editor-block-mark) > div.fabric-editor-block-mark:first-child {\n    p,\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6,\n    .heading-wrapper {\n      &:first-child {\n        margin-top: 0;\n      }\n    }\n  }\n"])));
 exports.blockMarksSharedStyles = blockMarksSharedStyles;

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

@@ -9,7 +9,7 @@ exports.blockquoteSharedStyles = 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");
 
@@ -17,5 +17,5 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _templateObject;
 
-var blockquoteSharedStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & blockquote {\n    box-sizing: border-box;\n    padding-left: ", "px;\n    border-left: 2px solid ", ";\n    margin: ", " 0 0 0;\n    margin-right: 0;\n\n    [dir='rtl'] & {\n      padding-left: 0;\n      padding-right: ", "px;\n    }\n\n    &:first-child {\n      margin-top: 0;\n    }\n\n    &::before {\n      content: '';\n    }\n\n    &::after {\n      content: none;\n    }\n\n    & p {\n      display: block;\n    }\n\n    & table,\n    & table:last-child {\n      display: inline-table;\n    }\n  }\n"])), (0, _constants.gridSize)() * 2, _editorSharedStyles.akEditorBlockquoteBorderColor, _editorSharedStyles.blockNodesVerticalMargin, (0, _constants.gridSize)() * 2);
+var blockquoteSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & blockquote {\n    box-sizing: border-box;\n    padding-left: ", "px;\n    border-left: 2px solid ", ";\n    margin: ", " 0 0 0;\n    margin-right: 0;\n\n    [dir='rtl'] & {\n      padding-left: 0;\n      padding-right: ", "px;\n    }\n\n    &:first-child {\n      margin-top: 0;\n    }\n\n    &::before {\n      content: '';\n    }\n\n    &::after {\n      content: none;\n    }\n\n    & p {\n      display: block;\n    }\n\n    & table,\n    & table:last-child {\n      display: inline-table;\n    }\n  }\n"])), (0, _constants.gridSize)() * 2, _editorSharedStyles.akEditorBlockquoteBorderColor, _editorSharedStyles.blockNodesVerticalMargin, (0, _constants.gridSize)() * 2);
 exports.blockquoteSharedStyles = blockquoteSharedStyles;

package/dist/cjs/styles/shared/code-mark.js

@@ -9,7 +9,7 @@ exports.codeMarkSharedStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _inline = require("@atlaskit/code/inline");
 
@@ -19,8 +19,12 @@ var _components = require("@atlaskit/theme/components");
 
 var _templateObject;
 
-var codeMarkSharedStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .code {\n    --ds--code--bg-color: ", ";\n    ", "\n  }\n"])), (0, _components.themed)({
-  light: _colors.N30A,
-  dark: _colors.DN70
-}), _inline.getCodeStyles);
+var codeMarkSharedStyles = function codeMarkSharedStyles(props) {
+  var theme = (0, _components.getTheme)(props);
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    .code {\n      --ds--code--bg-color: ", ";\n      ", "\n    }\n  "])), (0, _components.themed)({
+    light: _colors.N30A,
+    dark: _colors.DN70
+  })(props), (0, _inline.getCodeStyles)(theme));
+};
+
 exports.codeMarkSharedStyles = codeMarkSharedStyles;

package/dist/cjs/styles/shared/column-layout.js

@@ -9,11 +9,11 @@ exports.columnLayoutSharedStyle = 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");
 
 var _templateObject;
 
-var columnLayoutSharedStyle = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  [data-layout-section] {\n    display: flex;\n    flex-direction: row;\n    & > * {\n      flex: 1;\n      min-width: 0;\n    }\n\n    & > .unsupportedBlockView-content-wrap {\n      min-width: initial;\n    }\n\n    @media screen and (max-width: ", "px) {\n      flex-direction: column;\n    }\n  }\n"])), _editorSharedStyles.gridMediumMaxWidth);
+var columnLayoutSharedStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  [data-layout-section] {\n    display: flex;\n    flex-direction: row;\n    & > * {\n      flex: 1;\n      min-width: 0;\n    }\n\n    & > .unsupportedBlockView-content-wrap {\n      min-width: initial;\n    }\n\n    @media screen and (max-width: ", "px) {\n      flex-direction: column;\n    }\n  }\n"])), _editorSharedStyles.gridMediumMaxWidth);
 exports.columnLayoutSharedStyle = columnLayoutSharedStyle;

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

@@ -9,7 +9,7 @@ exports.dateSharedStyle = exports.DateSharedCssClassName = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _templateObject;
 
@@ -18,5 +18,5 @@ var DateSharedCssClassName = {
   DATE_CONTAINER: 'dateView-content-wrap'
 };
 exports.DateSharedCssClassName = DateSharedCssClassName;
-var dateSharedStyle = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " span {\n    white-space: unset;\n  }\n"])), DateSharedCssClassName.DATE_WRAPPER);
+var dateSharedStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " span {\n    white-space: unset;\n  }\n"])), DateSharedCssClassName.DATE_WRAPPER);
 exports.dateSharedStyle = dateSharedStyle;

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

@@ -9,7 +9,7 @@ exports.headingsSharedStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _typography = require("@atlaskit/theme/typography");
 
@@ -17,5 +17,8 @@ var _templateObject;
 
 // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
 // text sizing prototype: http://proto/fabricrender/
-var headingsSharedStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & h1 {\n    ", ";\n    margin-bottom: 0;\n    margin-top: 1.667em;\n  }\n\n  & h2 {\n    ", ";\n    margin-top: 1.8em;\n    margin-bottom: 0;\n  }\n\n  & h3 {\n    ", ";\n    margin-top: 2em;\n    margin-bottom: 0;\n  }\n\n  & h4 {\n    ", ";\n    margin-top: 1.357em;\n  }\n\n  & h5 {\n    ", ";\n    margin-top: 1.667em;\n    text-transform: none;\n  }\n\n  & h6 {\n    ", ";\n    margin-top: 1.455em;\n    text-transform: none;\n  }\n"])), _typography.h700, _typography.h600, _typography.h500, _typography.h400, _typography.h300, _typography.h100);
+var headingsSharedStyles = function headingsSharedStyles(props) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & h1 {\n    ", ";\n    margin-bottom: 0;\n    margin-top: 1.667em;\n  }\n\n  & h2 {\n    ", ";\n    margin-top: 1.8em;\n    margin-bottom: 0;\n  }\n\n  & h3 {\n    ", ";\n    margin-top: 2em;\n    margin-bottom: 0;\n  }\n\n  & h4 {\n    ", ";\n    margin-top: 1.357em;\n  }\n\n  & h5 {\n    ", ";\n    margin-top: 1.667em;\n    text-transform: none;\n  }\n\n  & h6 {\n    ", ";\n    margin-top: 1.455em;\n    text-transform: none;\n  }\n"])), (0, _typography.h700)(props), (0, _typography.h600)(props), (0, _typography.h500)(props), (0, _typography.h400)(props), (0, _typography.h300)(props), (0, _typography.h100)(props));
+};
+
 exports.headingsSharedStyles = headingsSharedStyles;

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

@@ -9,9 +9,9 @@ exports.indentationSharedStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _templateObject;
 
-var indentationSharedStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .fabric-editor-indentation-mark {\n    &[data-level='1'] {\n      margin-left: 30px;\n    }\n    &[data-level='2'] {\n      margin-left: 60px;\n    }\n    &[data-level='3'] {\n      margin-left: 90px;\n    }\n    &[data-level='4'] {\n      margin-left: 120px;\n    }\n    &[data-level='5'] {\n      margin-left: 150px;\n    }\n    &[data-level='6'] {\n      margin-left: 180px;\n    }\n  }\n"])));
+var indentationSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .fabric-editor-indentation-mark {\n    &[data-level='1'] {\n      margin-left: 30px;\n    }\n    &[data-level='2'] {\n      margin-left: 60px;\n    }\n    &[data-level='3'] {\n      margin-left: 90px;\n    }\n    &[data-level='4'] {\n      margin-left: 120px;\n    }\n    &[data-level='5'] {\n      margin-left: 150px;\n    }\n    &[data-level='6'] {\n      margin-left: 180px;\n    }\n  }\n"])));
 exports.indentationSharedStyles = indentationSharedStyles;

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

@@ -9,11 +9,13 @@ exports.listsSharedStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _adfSchema = require("@atlaskit/adf-schema");
 
+var _browser = _interopRequireDefault(require("../../utils/browser"));
+
 var _templateObject;
 
-var listsSharedStyles = (0, _styledComponents.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  ", ", ", " {\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"])), _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    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);
 exports.listsSharedStyles = listsSharedStyles;

package/dist/cjs/styles/shared/media-single.js

@@ -9,12 +9,12 @@ exports.richMediaClassName = exports.mediaSingleSharedStyle = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _templateObject;
 
 var richMediaClassName = 'rich-media-item';
 exports.richMediaClassName = richMediaClassName;
 var wrappedMediaBreakoutPoint = 410;
-var mediaSingleSharedStyle = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  li .", " {\n    margin: 0;\n  }\n\n  /* Hack for chrome to fix media single position\n     inside a list when media is the first child */\n  &.ua-chrome li > .mediaSingleView-content-wrap::before {\n    content: '';\n    display: block;\n    height: 0;\n  }\n\n  &.ua-firefox {\n    .mediaSingleView-content-wrap {\n      user-select: none;\n    }\n\n    .captionView-content-wrap {\n      user-select: text;\n    }\n  }\n\n  .mediaSingleView-content-wrap[layout='center'] {\n    clear: both;\n  }\n\n  table .", " {\n    margin-top: 12px;\n    margin-bottom: 12px;\n    clear: both;\n  }\n\n  .", ".image-wrap-right\n    + .", ".image-wrap-left {\n    clear: both;\n  }\n\n  .", ".image-wrap-left\n    + .", ".image-wrap-right,\n    .", ".image-wrap-right\n    + .", ".image-wrap-left,\n    .", ".image-wrap-left\n    + .", ".image-wrap-left,\n    .", ".image-wrap-right\n    + .", ".image-wrap-right {\n    margin-right: 0;\n    margin-left: 0;\n  }\n\n  @media all and (max-width: ", "px) {\n    div.mediaSingleView-content-wrap[layout='wrap-left'],\n    div.mediaSingleView-content-wrap[data-layout='wrap-left'],\n    div.mediaSingleView-content-wrap[layout='wrap-right'],\n    div.mediaSingleView-content-wrap[data-layout='wrap-right'] {\n      float: none;\n      overflow: auto;\n      margin: 12px 0;\n    }\n  }\n"])), richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, wrappedMediaBreakoutPoint);
+var mediaSingleSharedStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  li .", " {\n    margin: 0;\n  }\n\n  /* Hack for chrome to fix media single position\n     inside a list when media is the first child */\n  &.ua-chrome li > .mediaSingleView-content-wrap::before {\n    content: '';\n    display: block;\n    height: 0;\n  }\n\n  &.ua-firefox {\n    .mediaSingleView-content-wrap {\n      user-select: none;\n    }\n\n    .captionView-content-wrap {\n      user-select: text;\n    }\n  }\n\n  .mediaSingleView-content-wrap[layout='center'] {\n    clear: both;\n  }\n\n  table .", " {\n    margin-top: 12px;\n    margin-bottom: 12px;\n    clear: both;\n  }\n\n  .", ".image-wrap-right\n    + .", ".image-wrap-left {\n    clear: both;\n  }\n\n  .", ".image-wrap-left\n    + .", ".image-wrap-right,\n    .", ".image-wrap-right\n    + .", ".image-wrap-left,\n    .", ".image-wrap-left\n    + .", ".image-wrap-left,\n    .", ".image-wrap-right\n    + .", ".image-wrap-right {\n    margin-right: 0;\n    margin-left: 0;\n  }\n\n  @media all and (max-width: ", "px) {\n    div.mediaSingleView-content-wrap[layout='wrap-left'],\n    div.mediaSingleView-content-wrap[data-layout='wrap-left'],\n    div.mediaSingleView-content-wrap[layout='wrap-right'],\n    div.mediaSingleView-content-wrap[data-layout='wrap-right'] {\n      float: none;\n      overflow: auto;\n      margin: 12px 0;\n    }\n  }\n"])), richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, wrappedMediaBreakoutPoint);
 exports.mediaSingleSharedStyle = mediaSingleSharedStyle;

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

@@ -9,12 +9,12 @@ exports.paragraphSharedStyles = 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");
 
 var _templateObject;
 
 // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
-var paragraphSharedStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _editorSharedStyles.akEditorLineHeight, _editorSharedStyles.blockNodesVerticalMargin);
+var paragraphSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _editorSharedStyles.akEditorLineHeight, _editorSharedStyles.blockNodesVerticalMargin);
 exports.paragraphSharedStyles = paragraphSharedStyles;

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

@@ -9,7 +9,7 @@ exports.shadowSharedStyle = 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");
 
@@ -34,5 +34,5 @@ var shadowWidth = 8;
  *      background-attachment: local, local, scroll, scroll;
  */
 
-var shadowSharedStyle = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  &\n    .", "::before,\n    .", "::after,\n    .", "::before,\n    .", "::after {\n    display: none;\n    position: absolute;\n    pointer-events: none;\n    z-index: ", ";\n    width: ", "px;\n    content: '';\n    /* Scrollbar is outside the content in IE, inset in other browsers. */\n    height: calc(100%);\n  }\n\n  & .", ", .", " {\n    position: relative;\n  }\n\n  & .", "::before {\n    background: linear-gradient(to left, rgba(99, 114, 130, 0) 0, ", " 100%);\n    top: 0px;\n    left: 0;\n    display: block;\n  }\n\n  & .", "::after {\n    background: linear-gradient(\n      to right,\n      rgba(99, 114, 130, 0) 0,\n      ", " 100%\n    );\n    left: calc(100% - ", "px);\n    top: 0px;\n    display: block;\n  }\n"])), _OverflowShadow.shadowClassNames.RIGHT_SHADOW, _OverflowShadow.shadowClassNames.RIGHT_SHADOW, _OverflowShadow.shadowClassNames.LEFT_SHADOW, _OverflowShadow.shadowClassNames.LEFT_SHADOW, _editorSharedStyles.akEditorShadowZIndex, shadowWidth, _OverflowShadow.shadowClassNames.RIGHT_SHADOW, _OverflowShadow.shadowClassNames.LEFT_SHADOW, _OverflowShadow.shadowClassNames.LEFT_SHADOW, _colors.N40A, _OverflowShadow.shadowClassNames.RIGHT_SHADOW, _colors.N40A, shadowWidth);
+var shadowSharedStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  &\n    .", "::before,\n    .", "::after,\n    .", "::before,\n    .", "::after {\n    display: none;\n    position: absolute;\n    pointer-events: none;\n    z-index: ", ";\n    width: ", "px;\n    content: '';\n    /* Scrollbar is outside the content in IE, inset in other browsers. */\n    height: calc(100%);\n  }\n\n  & .", ", .", " {\n    position: relative;\n  }\n\n  & .", "::before {\n    background: linear-gradient(to left, rgba(99, 114, 130, 0) 0, ", " 100%);\n    top: 0px;\n    left: 0;\n    display: block;\n  }\n\n  & .", "::after {\n    background: linear-gradient(\n      to right,\n      rgba(99, 114, 130, 0) 0,\n      ", " 100%\n    );\n    left: calc(100% - ", "px);\n    top: 0px;\n    display: block;\n  }\n"])), _OverflowShadow.shadowClassNames.RIGHT_SHADOW, _OverflowShadow.shadowClassNames.RIGHT_SHADOW, _OverflowShadow.shadowClassNames.LEFT_SHADOW, _OverflowShadow.shadowClassNames.LEFT_SHADOW, _editorSharedStyles.akEditorShadowZIndex, shadowWidth, _OverflowShadow.shadowClassNames.RIGHT_SHADOW, _OverflowShadow.shadowClassNames.LEFT_SHADOW, _OverflowShadow.shadowClassNames.LEFT_SHADOW, _colors.N40A, _OverflowShadow.shadowClassNames.RIGHT_SHADOW, _colors.N40A, shadowWidth);
 exports.shadowSharedStyle = shadowSharedStyle;

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

@@ -9,7 +9,7 @@ exports.tableSharedStyle = exports.tableResizeHandleWidth = exports.tableNewColu
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _adfSchema = require("@atlaskit/adf-schema");
 
@@ -55,42 +55,46 @@ var TableSharedCssClassName = {
   TABLE_HEADER_CELL_WRAPPER: _adfSchema.tableHeaderSelector
 };
 exports.TableSharedCssClassName = TableSharedCssClassName;
-var tableSharedStyle = (0, _styledComponents.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)({
-  light: _editorSharedStyles.akEditorTableBorder,
-  dark: _editorSharedStyles.akEditorTableBorderDark
-}), tableCellMinWidth, (0, _components.themed)({
-  light: _editorSharedStyles.akEditorTableBorder,
-  dark: _editorSharedStyles.akEditorTableBorderDark
-}), tableCellPadding, _browser.default.gecko || _browser.default.ie || _browser.default.mac && _browser.default.chrome ? 'background-clip: padding-box;' : '', (0, _components.themed)({
-  dark: _editorSharedStyles.getTableCellBackgroundDarkModeColors
-}), (0, _components.themed)({
-  light: _editorSharedStyles.akEditorTableToolbar,
-  dark: _editorSharedStyles.akEditorTableToolbarDark
-}), (0, _editorSharedStyles.overflowShadow)({
-  background: (0, _components.themed)({
+
+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)({
+    light: _editorSharedStyles.akEditorTableBorder,
+    dark: _editorSharedStyles.akEditorTableBorderDark
+  })(props), tableCellMinWidth, (0, _components.themed)({
+    light: _editorSharedStyles.akEditorTableBorder,
+    dark: _editorSharedStyles.akEditorTableBorderDark
+  })(props), tableCellPadding, _browser.default.gecko || _browser.default.ie || _browser.default.mac && _browser.default.chrome ? 'background-clip: padding-box;' : '', (0, _components.themed)({
+    dark: _editorSharedStyles.getTableCellBackgroundDarkModeColors
+  })(props), (0, _components.themed)({
+    light: _editorSharedStyles.akEditorTableToolbar,
+    dark: _editorSharedStyles.akEditorTableToolbarDark
+  })(props), (0, _editorSharedStyles.overflowShadow)({
+    background: (0, _components.themed)({
+      light: 'rgb(235, 237, 240)',
+      dark: 'rgb(36, 47, 66)'
+    })(props),
+    width: "".concat((0, _constants.gridSize)(), "px")
+  }), (0, _components.themed)({
     light: 'rgb(235, 237, 240)',
     dark: 'rgb(36, 47, 66)'
-  }),
-  width: "".concat((0, _constants.gridSize)(), "px")
-}), (0, _components.themed)({
-  light: 'rgb(235, 237, 240)',
-  dark: 'rgb(36, 47, 66)'
-}), (0, _components.themed)({
-  light: 'rgb(226, 229, 233)',
-  dark: _colors.DN20
-}), (0, _editorSharedStyles.overflowShadow)({
-  background: (0, _components.themed)({
+  })(props), (0, _components.themed)({
+    light: 'rgb(226, 229, 233)',
+    dark: _colors.DN20
+  })(props), (0, _editorSharedStyles.overflowShadow)({
+    background: (0, _components.themed)({
+      light: 'rgb(235, 237, 240)',
+      dark: 'rgb(36, 47, 66)'
+    })(props),
+    width: "".concat((0, _constants.gridSize)(), "px")
+  }), (0, _components.themed)({
     light: 'rgb(235, 237, 240)',
     dark: 'rgb(36, 47, 66)'
-  }),
-  width: "".concat((0, _constants.gridSize)(), "px")
-}), (0, _components.themed)({
-  light: 'rgb(235, 237, 240)',
-  dark: 'rgb(36, 47, 66)'
-}), (0, _components.themed)({
-  light: 'rgb(226, 229, 233)',
-  dark: _colors.DN20
-}));
+  })(props), (0, _components.themed)({
+    light: 'rgb(226, 229, 233)',
+    dark: _colors.DN20
+  })(props));
+};
+
 exports.tableSharedStyle = tableSharedStyle;
 
 var calcTableWidth = function calcTableWidth(layout, containerWidth) {

package/dist/cjs/styles/shared/task-decision.js

@@ -9,7 +9,7 @@ exports.tasksAndDecisionsStyles = exports.TaskDecisionSharedCssClassName = void
 
 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");
 
@@ -19,5 +19,5 @@ var TaskDecisionSharedCssClassName = {
   DECISION_CONTAINER: 'decisionItemView-content-wrap'
 };
 exports.TaskDecisionSharedCssClassName = TaskDecisionSharedCssClassName;
-var tasksAndDecisionsStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    .taskItemView-content-wrap,\n    .", " {\n      position: relative;\n      min-width: ", "px;\n    }\n\n    .", " {\n      margin-top: 0;\n    }\n  }\n\n  div[data-task-list-local-id] {\n    margin: 12px 0 0 0;\n  }\n\n  div[data-task-list-local-id]:first-child {\n    margin-top: 0;\n  }\n\n  div[data-task-list-local-id] div[data-task-list-local-id] {\n    margin-top: 0px;\n    margin-left: 24px;\n  }\n"])), TaskDecisionSharedCssClassName.DECISION_CONTAINER, _editorSharedStyles.akEditorTableCellMinWidth, TaskDecisionSharedCssClassName.DECISION_CONTAINER);
+var tasksAndDecisionsStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    .taskItemView-content-wrap,\n    .", " {\n      position: relative;\n      min-width: ", "px;\n    }\n\n    .", " {\n      margin-top: 0;\n    }\n  }\n\n  div[data-task-list-local-id] {\n    margin: 12px 0 0 0;\n  }\n\n  div[data-task-list-local-id]:first-child {\n    margin-top: 0;\n  }\n\n  div[data-task-list-local-id] div[data-task-list-local-id] {\n    margin-top: 0px;\n    margin-left: 24px;\n  }\n"])), TaskDecisionSharedCssClassName.DECISION_CONTAINER, _editorSharedStyles.akEditorTableCellMinWidth, TaskDecisionSharedCssClassName.DECISION_CONTAINER);
 exports.tasksAndDecisionsStyles = tasksAndDecisionsStyles;

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

@@ -9,9 +9,9 @@ exports.textColorStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _templateObject;
 
-var textColorStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])));
+var textColorStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])));
 exports.textColorStyles = textColorStyles;

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

@@ -9,9 +9,9 @@ exports.whitespaceSharedStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _templateObject;
 
-var whitespaceSharedStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  word-wrap: break-word;\n  white-space: pre-wrap;\n"])));
+var whitespaceSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  word-wrap: break-word;\n  white-space: pre-wrap;\n"])));
 exports.whitespaceSharedStyles = whitespaceSharedStyles;

package/dist/cjs/types/collab.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
@@ -9,12 +11,18 @@ exports.BaseTheme = BaseTheme;
 exports.BaseThemeWrapper = BaseThemeWrapper;
 exports.mapBreakpointToLayoutMaxWidth = mapBreakpointToLayoutMaxWidth;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 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");
+
 var _constants = require("@atlaskit/theme/constants");
 
 var _WidthProvider = require("../WidthProvider");
@@ -54,23 +62,31 @@ function BaseThemeWrapper(_ref) {
       dynamicTextSizing = _ref.dynamicTextSizing,
       baseFontSize = _ref.baseFontSize,
       children = _ref.children;
+
+  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
+      mode = _useGlobalTheme.mode;
+
   var memoizedTheme = (0, _react.useMemo)(function () {
-    return {
+    return (0, _defineProperty2.default)({
       baseFontSize: dynamicTextSizing ? mapBreakpointToFontSize(breakpoint) : baseFontSize || mapBreakpointToFontSize('S'),
       layoutMaxWidth: dynamicTextSizing ? mapBreakpointToLayoutMaxWidth(breakpoint) : _editorSharedStyles.akEditorDefaultLayoutWidth
-    };
-  }, [breakpoint, dynamicTextSizing, baseFontSize]);
-  return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
+    }, _constants.CHANNEL, {
+      mode: mode
+    });
+  }, [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(_ref2) {
-  var children = _ref2.children,
-      dynamicTextSizing = _ref2.dynamicTextSizing,
-      baseFontSize = _ref2.baseFontSize;
-  return /*#__PURE__*/_react.default.createElement(_WidthProvider.WidthConsumer, null, function (_ref3) {
-    var breakpoint = _ref3.breakpoint;
+function BaseTheme(_ref3) {
+  var children = _ref3.children,
+      dynamicTextSizing = _ref3.dynamicTextSizing,
+      baseFontSize = _ref3.baseFontSize;
+  return /*#__PURE__*/_react.default.createElement(_WidthProvider.WidthConsumer, null, function (_ref4) {
+    var breakpoint = _ref4.breakpoint;
     return /*#__PURE__*/_react.default.createElement(BaseThemeWrapper, {
       dynamicTextSizing: dynamicTextSizing,
       breakpoint: breakpoint,

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

@@ -23,9 +23,9 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntlNext = require("react-intl-next");
+var _react2 = require("@emotion/react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactIntlNext = require("react-intl-next");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -37,9 +37,8 @@ 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; } }
 
-var CaptionWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 8px;\n  text-align: center;\n  position: relative;\n  color: ", ";\n"])), _colors.N400);
-
-var Placeholder = _styledComponents.default.p(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  position: absolute;\n  top: 0;\n  width: 100%;\n"])), _colors.N200);
+var captionWrapperStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 8px;\n  text-align: center;\n  position: relative;\n  color: ", ";\n"])), _colors.N400);
+var placeholderStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  position: absolute;\n  top: 0;\n  width: 100%;\n"])), _colors.N200);
 
 var CaptionComponent = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(CaptionComponent, _React$Component);
@@ -61,10 +60,14 @@ var CaptionComponent = /*#__PURE__*/function (_React$Component) {
           dataAttributes = _this$props.dataAttributes,
           formatMessage = _this$props.intl.formatMessage;
       var showPlaceholder = !selected && !hasContent;
-      return /*#__PURE__*/_react.default.createElement(CaptionWrapper, (0, _extends2.default)({
+      return (0, _react2.jsx)("div", (0, _extends2.default)({
         "data-media-caption": true,
         "data-testid": "media-caption"
-      }, dataAttributes), showPlaceholder ? /*#__PURE__*/_react.default.createElement(Placeholder, null, formatMessage(_messages.messages.placeholder)) : null, children);
+      }, dataAttributes, {
+        css: captionWrapperStyle
+      }), showPlaceholder ? (0, _react2.jsx)("p", {
+        css: placeholderStyle
+      }, formatMessage(_messages.messages.placeholder)) : null, children);
     }
   }]);
   return CaptionComponent;

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

@@ -50,7 +50,8 @@ function MediaSingle(_ref) {
       fullWidthMode = _ref.fullWidthMode,
       lineLength = _ref.lineLength,
       _ref$hasFallbackConta = _ref.hasFallbackContainer,
-      hasFallbackContainer = _ref$hasFallbackConta === void 0 ? true : _ref$hasFallbackConta;
+      hasFallbackContainer = _ref$hasFallbackConta === void 0 ? true : _ref$hasFallbackConta,
+      handleMediaSingleRef = _ref.handleMediaSingleRef;
 
   var children = _react.default.Children.toArray(propsChildren);
 
@@ -106,6 +107,7 @@ function MediaSingle(_ref) {
       caption = _children[1];
 
   return /*#__PURE__*/_react.default.createElement(_styled.MediaSingleWrapper, {
+    innerRef: handleMediaSingleRef,
     width: width,
     layout: layout,
     containerWidth: containerWidth,

package/dist/cjs/ui/MediaSingle/link.js

@@ -5,15 +5,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MediaLink = void 0;
+exports.mediaLinkStyle = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _templateObject;
 
-var MediaLink = _styledComponents.default.a(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])));
-
-exports.MediaLink = MediaLink;
-MediaLink.displayName = 'MediaLink';
+var mediaLinkStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])));
+exports.mediaLinkStyle = mediaLinkStyle;

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

@@ -52,7 +52,6 @@ var Mention = /*#__PURE__*/function (_PureComponent) {
           accessLevel = _this$props.accessLevel,
           eventHandlers = _this$props.eventHandlers,
           id = _this$props.id,
-          portal = _this$props.portal,
           text = _this$props.text;
       var mentionProvider = providers.mentionProvider,
           profilecardProvider = providers.profilecardProvider;
@@ -62,8 +61,7 @@ var Mention = /*#__PURE__*/function (_PureComponent) {
         accessLevel: accessLevel,
         eventHandlers: eventHandlers,
         mentionProvider: mentionProvider,
-        profilecardProvider: profilecardProvider,
-        portal: portal
+        profilecardProvider: profilecardProvider
       });
     });
     _this.providerFactory = props.providers || new _providerFactory.ProviderFactory();