@atlaskit/editor-common 63.0.1 → 66.0.0

package/dist/cjs/{ui/IntlLegacyFallbackProvider → safe-plugin}/index.js

@@ -5,56 +5,38 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IntlLegacyFallbackProvider = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+exports.SafePlugin = void 0;
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _reactIntl = require("react-intl");
+var _prosemirrorState = require("prosemirror-state");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 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 IntlLegacyFallbackProvider = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(IntlLegacyFallbackProvider, _React$Component);
+var SafePlugin = /*#__PURE__*/function (_Plugin) {
+  (0, _inherits2.default)(SafePlugin, _Plugin);
 
-  var _super = _createSuper(IntlLegacyFallbackProvider);
+  var _super = _createSuper(SafePlugin);
 
-  function IntlLegacyFallbackProvider() {
-    (0, _classCallCheck2.default)(this, IntlLegacyFallbackProvider);
-    return _super.apply(this, arguments);
+  // This variable isn't (and shouldn't) be used anywhere. Its purpose is
+  // to distinguish Plugin from SafePlugin, thus ensuring that an 'unsafe'
+  // Plugin cannot be assigned as an item in EditorPlugin → pmPlugins.
+  function SafePlugin(spec) {
+    (0, _classCallCheck2.default)(this, SafePlugin);
+    return _super.call(this, spec);
   }
 
-  (0, _createClass2.default)(IntlLegacyFallbackProvider, [{
-    key: "render",
-    value: function render() {
-      var oldIntl = this.context.intl;
-
-      if (!oldIntl) {
-        return /*#__PURE__*/_react.default.createElement(_reactIntl.IntlProvider, {
-          locale: "en"
-        }, this.props.children);
-      }
-
-      return this.props.children;
-    }
-  }]);
-  return IntlLegacyFallbackProvider;
-}(_react.default.Component);
-
-exports.IntlLegacyFallbackProvider = IntlLegacyFallbackProvider;
-(0, _defineProperty2.default)(IntlLegacyFallbackProvider, "contextTypes", {
-  intl: _reactIntl.intlShape
-});
+  return (0, _createClass2.default)(SafePlugin);
+}(_prosemirrorState.Plugin);
+
+exports.SafePlugin = SafePlugin;

package/dist/cjs/styles/index.js

@@ -135,12 +135,6 @@ Object.defineProperty(exports, "indentationSharedStyles", {
     return _indentation.indentationSharedStyles;
   }
 });
-Object.defineProperty(exports, "inlineNodeSharedStyle", {
-  enumerable: true,
-  get: function get() {
-    return _inlineNodes.inlineNodeSharedStyle;
-  }
-});
 Object.defineProperty(exports, "linkSharedStyle", {
   enumerable: true,
   get: function get() {
@@ -290,8 +284,6 @@ var _whitespace = require("./shared/whitespace");
 
 var _paragraph = require("./shared/paragraph");
 
-var _inlineNodes = require("./shared/inline-nodes");
-
 var _link = require("./shared/link");
 
 var _lists = require("./shared/lists");

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/link.js

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

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

@@ -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    /* stylelint-disable declaration-block-no-duplicate-properties */\n    display: table;\n    display: flow-root;\n    /* stylelint-enable declaration-block-no-duplicate-properties */\n  }\n\n  /* =============== INDENTATION AESTHETICS ========= */\n\n  /**\n        We support nested lists up to six levels deep.\n    **/\n\n  /* LEGACY LISTS */\n\n  ul,\n  ul ul ul ul {\n    list-style-type: disc;\n  }\n\n  ul ul,\n  ul ul ul ul ul {\n    list-style-type: circle;\n  }\n\n  ul ul ul,\n  ul ul ul ul ul ul {\n    list-style-type: square;\n  }\n\n  ol,\n  ol ol ol ol {\n    list-style-type: decimal;\n  }\n  ol ol,\n  ol ol ol ol ol {\n    list-style-type: lower-alpha;\n  }\n  ol ol ol,\n  ol ol ol ol ol ol {\n    list-style-type: lower-roman;\n  }\n\n  /* PREDICTABLE LISTS */\n\n  ol[data-indent-level='1'],\n  ol[data-indent-level='4'] {\n    list-style-type: decimal;\n  }\n\n  ol[data-indent-level='2'],\n  ol[data-indent-level='5'] {\n    list-style-type: lower-alpha;\n  }\n\n  ol[data-indent-level='3'],\n  ol[data-indent-level='6'] {\n    list-style-type: lower-roman;\n  }\n\n  ul[data-indent-level='1'],\n  ul[data-indent-level='4'] {\n    list-style-type: disc;\n  }\n\n  ul[data-indent-level='2'],\n  ul[data-indent-level='5'] {\n    list-style-type: circle;\n  }\n\n  ul[data-indent-level='3'],\n  ul[data-indent-level='6'] {\n    list-style-type: square;\n  }\n"])), _browser.default.gecko ? 'display: inline-block;' : '', _adfSchema.orderedListSelector, _adfSchema.bulletListSelector);
 exports.listsSharedStyles = listsSharedStyles;

package/dist/cjs/styles/shared/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/panel.js

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

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/rule.js

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

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