@atlaskit/editor-common 64.0.0 → 65.0.0

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

@@ -9,9 +9,7 @@ exports.ValidMessage = exports.HelperMessage = exports.ErrorMessage = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _success = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/success"));
 
@@ -23,34 +21,35 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _typography = require("@atlaskit/theme/typography");
 
-var _templateObject, _templateObject2;
-
-var Message = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", " font-weight: normal;\n  color: ", ";\n  margin-top: ", "px;\n  display: flex;\n  justify-content: baseline;\n"])), _typography.h200, function (props) {
-  if (props.error) {
-    return _colors.R400;
-  }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-  if (props.valid) {
-    return _colors.G400;
-  }
+var errorColor = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _colors.R400);
+var validColor = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _colors.G400);
 
-  return _colors.N200;
-}, (0, _constants.gridSize)() / 2);
+var messageStyle = function messageStyle(props) {
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", " font-weight: normal;\n  color: ", ";\n  margin-top: ", "px;\n  display: flex;\n  justify-content: baseline;\n"])), (0, _typography.h200)(props), _colors.N200, (0, _constants.gridSize)() / 2);
+};
 
-var IconWrapper = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-right: 4px;\n"])));
+var iconWrapperStyle = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-right: 4px;\n"])));
 
 var HelperMessage = function HelperMessage(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/_react.default.createElement(Message, null, children);
+  return (0, _react.jsx)("div", {
+    css: messageStyle
+  }, children);
 };
 
 exports.HelperMessage = HelperMessage;
 
 var ErrorMessage = function ErrorMessage(_ref2) {
   var children = _ref2.children;
-  return /*#__PURE__*/_react.default.createElement(Message, {
-    error: true
-  }, /*#__PURE__*/_react.default.createElement(IconWrapper, null, /*#__PURE__*/_react.default.createElement(_error.default, {
+  return (0, _react.jsx)("div", {
+    css: function css(theme) {
+      return [messageStyle(theme), errorColor];
+    }
+  }, (0, _react.jsx)("span", {
+    css: iconWrapperStyle
+  }, (0, _react.jsx)(_error.default, {
     size: "small",
     label: "error",
     "aria-label": "error"
@@ -61,9 +60,13 @@ exports.ErrorMessage = ErrorMessage;
 
 var ValidMessage = function ValidMessage(_ref3) {
   var children = _ref3.children;
-  return /*#__PURE__*/_react.default.createElement(Message, {
-    valid: true
-  }, /*#__PURE__*/_react.default.createElement(IconWrapper, null, /*#__PURE__*/_react.default.createElement(_success.default, {
+  return (0, _react.jsx)("div", {
+    css: function css(theme) {
+      return [messageStyle(theme), validColor];
+    }
+  }, (0, _react.jsx)("span", {
+    css: iconWrapperStyle
+  }, (0, _react.jsx)(_success.default, {
     size: "small",
     label: "success"
   })), children);

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

@@ -13,9 +13,9 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireWildcard(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 _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -41,7 +41,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var BlockNode = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _colors.N30, _colors.N50, (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()));
+var blockNodeStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _colors.N30, _colors.N50, (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()));
 
 var UnsupportedBlockNode = function UnsupportedBlockNode(_ref) {
   var node = _ref.node,
@@ -59,15 +59,18 @@ var UnsupportedBlockNode = function UnsupportedBlockNode(_ref) {
   var tooltipOnShowHandler = (0, _react.useCallback)(function () {
     return dispatchAnalyticsEvent && (0, _trackUnsupportedContent.trackUnsupportedContentTooltipDisplayedFor)(dispatchAnalyticsEvent, _analytics.ACTION_SUBJECT_ID.ON_UNSUPPORTED_BLOCK, originalNodeType);
   }, [dispatchAnalyticsEvent, originalNodeType]);
-  return /*#__PURE__*/_react.default.createElement(BlockNode, null, message, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+  return (0, _react2.jsx)("div", {
+    css: blockNodeStyle,
+    className: "unsupported"
+  }, message, (0, _react2.jsx)(_tooltip.default, {
     content: tooltipContent,
     hideTooltipOnClick: false,
     position: "bottom",
     onShow: tooltipOnShowHandler,
     strategy: "absolute"
-  }, /*#__PURE__*/_react.default.createElement("span", {
+  }, (0, _react2.jsx)("span", {
     style: style
-  }, /*#__PURE__*/_react.default.createElement(_questionCircle.default, {
+  }, (0, _react2.jsx)(_questionCircle.default, {
     label: "?",
     size: "small"
   }))));

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

@@ -13,9 +13,9 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireWildcard(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 _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -41,7 +41,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var InlineNode = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: inline-flex;\n  font-size: ", ";\n  margin: 0 2px;\n  min-height: 24px;\n  padding: 0 10px;\n  vertical-align: middle;\n  white-space: nowrap;\n"])), _colors.N30, _colors.N50, (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()));
+var inlineNodeStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: inline-flex;\n  font-size: ", ";\n  margin: 0 2px;\n  min-height: 24px;\n  padding: 0 10px;\n  vertical-align: middle;\n  white-space: nowrap;\n"])), _colors.N30, _colors.N50, (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()));
 
 var UnsupportedInlineNode = function UnsupportedInlineNode(_ref) {
   var node = _ref.node,
@@ -59,15 +59,17 @@ var UnsupportedInlineNode = function UnsupportedInlineNode(_ref) {
   var tooltipOnShowHandler = (0, _react.useCallback)(function () {
     return dispatchAnalyticsEvent && (0, _trackUnsupportedContent.trackUnsupportedContentTooltipDisplayedFor)(dispatchAnalyticsEvent, _analytics.ACTION_SUBJECT_ID.ON_UNSUPPORTED_INLINE, originalNodeType);
   }, [dispatchAnalyticsEvent, originalNodeType]);
-  return /*#__PURE__*/_react.default.createElement(InlineNode, null, message, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+  return (0, _react2.jsx)("span", {
+    css: inlineNodeStyle
+  }, message, (0, _react2.jsx)(_tooltip.default, {
     content: tooltipContent,
     hideTooltipOnClick: false,
     position: "bottom",
     onShow: tooltipOnShowHandler,
     strategy: "absolute"
-  }, /*#__PURE__*/_react.default.createElement("span", {
+  }, (0, _react2.jsx)("span", {
     style: style
-  }, /*#__PURE__*/_react.default.createElement(_questionCircle.default, {
+  }, (0, _react2.jsx)(_questionCircle.default, {
     label: "?",
     size: "small"
   }))));