@atlaskit/editor-common 64.0.0 → 65.0.0

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

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { tableCellContentDomSelector, tableCellSelector, tableHeaderSelector, tablePrefixSelector } from '@atlaskit/adf-schema';
 import { akEditorBreakoutPadding, akEditorFullWidthLayoutWidth, akEditorTableBorder, akEditorTableBorderDark, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarDark, akEditorWideLayoutWidth, getTableCellBackgroundDarkModeColors, overflowShadow } from '@atlaskit/editor-shared-styles';
 import { DN20 } from '@atlaskit/theme/colors';
@@ -30,42 +30,46 @@ export var TableSharedCssClassName = {
   TABLE_CELL_WRAPPER: tableCellSelector,
   TABLE_HEADER_CELL_WRAPPER: tableHeaderSelector
 };
-var tableSharedStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    position: relative;\n    margin: 0 auto ", "px;\n    box-sizing: border-box;\n\n    /**\n     * Fix block top alignment inside table cells.\n     */\n    .decisionItemView-content-wrap:first-child > div {\n      margin-top: 0;\n    }\n  }\n  .", "[data-number-column='true'] {\n    padding-left: ", "px;\n    clear: both;\n  }\n  /* avoid applying styles to nested tables (possible via extensions) */\n  .", " > table,\n  .", " > table,\n  .", " > table {\n    border-collapse: collapse;\n    margin: ", "px ", "px 0 0;\n    border: ", "px solid\n      ", ";\n    table-layout: fixed;\n    font-size: 1em;\n    width: 100%;\n\n    &[data-autosize='true'] {\n      table-layout: auto;\n    }\n\n    & {\n      * {\n        box-sizing: border-box;\n      }\n      hr {\n        box-sizing: content-box;\n      }\n\n      tbody {\n        border-bottom: none;\n      }\n      th td {\n        background-color: white;\n      }\n      th,\n      td {\n        min-width: ", "px;\n        font-weight: normal;\n        vertical-align: top;\n        border: 1px solid\n          ", ";\n        border-right-width: 0;\n        border-bottom-width: 0;\n        padding: ", "px;\n        /* https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o */\n        ", "\n\n        ", ";\n\n        > *:first-child {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor.-right:first-child + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + * {\n          margin-top: 0;\n        }\n\n        th p:not(:first-of-type),\n        td p:not(:first-of-type) {\n          margin-top: 12px;\n        }\n      }\n      th {\n        background-color: ", ";\n        text-align: left;\n\n        /* only apply this styling to codeblocks in default background headercells */\n        /* TODO this needs to be overhauled as it relies on unsafe selectors */\n        &:not([style]) {\n          .code-block {\n            background-image: ", ";\n            background-attachment: local, scroll, scroll;\n            background-position: 100% 0, 100% 0, 0 0;\n            background-color: ", ";\n\n            .line-number-gutter {\n              background-color: ", ";\n            }\n\n            /* this is only relevant to the element taken care of by renderer */\n            > [data-ds--code--code-block] {\n              background-image: ", "!important;\n\n              background-color: ", "!important;\n\n              // selector lives inside @atlaskit/code\n              --ds--code--line-number-bg-color: ", ";\n            }\n          }\n        }\n      }\n    }\n  }\n"])), TableSharedCssClassName.TABLE_CONTAINER, tableMarginBottom, TableSharedCssClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth - 1, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableMarginTop, tableMarginSides, tableCellBorderWidth, themed({
-  light: akEditorTableBorder,
-  dark: akEditorTableBorderDark
-}), tableCellMinWidth, themed({
-  light: akEditorTableBorder,
-  dark: akEditorTableBorderDark
-}), tableCellPadding, browser.gecko || browser.ie || browser.mac && browser.chrome ? 'background-clip: padding-box;' : '', themed({
-  dark: getTableCellBackgroundDarkModeColors
-}), themed({
-  light: akEditorTableToolbar,
-  dark: akEditorTableToolbarDark
-}), overflowShadow({
-  background: themed({
+
+var tableSharedStyle = function tableSharedStyle(props) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    position: relative;\n    margin: 0 auto ", "px;\n    box-sizing: border-box;\n\n    /**\n     * Fix block top alignment inside table cells.\n     */\n    .decisionItemView-content-wrap:first-child > div {\n      margin-top: 0;\n    }\n  }\n  .", "[data-number-column='true'] {\n    padding-left: ", "px;\n    clear: both;\n  }\n  /* avoid applying styles to nested tables (possible via extensions) */\n  .", " > table,\n  .", " > table,\n  .", " > table {\n    border-collapse: collapse;\n    margin: ", "px ", "px 0 0;\n    border: ", "px solid\n      ", ";\n    table-layout: fixed;\n    font-size: 1em;\n    width: 100%;\n\n    &[data-autosize='true'] {\n      table-layout: auto;\n    }\n\n    & {\n      * {\n        box-sizing: border-box;\n      }\n      hr {\n        box-sizing: content-box;\n      }\n\n      tbody {\n        border-bottom: none;\n      }\n      th td {\n        background-color: white;\n      }\n      th,\n      td {\n        min-width: ", "px;\n        font-weight: normal;\n        vertical-align: top;\n        border: 1px solid\n          ", ";\n        border-right-width: 0;\n        border-bottom-width: 0;\n        padding: ", "px;\n        /* https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o */\n        ", "\n\n        ", ";\n\n        > *:first-child {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor.-right:first-child + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + * {\n          margin-top: 0;\n        }\n\n        th p:not(:first-of-type),\n        td p:not(:first-of-type) {\n          margin-top: 12px;\n        }\n      }\n      th {\n        background-color: ", ";\n        text-align: left;\n\n        /* only apply this styling to codeblocks in default background headercells */\n        /* TODO this needs to be overhauled as it relies on unsafe selectors */\n        &:not([style]) {\n          .code-block {\n            background-image: ", ";\n            background-attachment: local, scroll, scroll;\n            background-position: 100% 0, 100% 0, 0 0;\n            background-color: ", ";\n\n            .line-number-gutter {\n              background-color: ", ";\n            }\n\n            /* this is only relevant to the element taken care of by renderer */\n            > [data-ds--code--code-block] {\n              background-image: ", "!important;\n\n              background-color: ", "!important;\n\n              // selector lives inside @atlaskit/code\n              --ds--code--line-number-bg-color: ", ";\n            }\n          }\n        }\n      }\n    }\n  }\n"])), TableSharedCssClassName.TABLE_CONTAINER, tableMarginBottom, TableSharedCssClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth - 1, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableMarginTop, tableMarginSides, tableCellBorderWidth, themed({
+    light: akEditorTableBorder,
+    dark: akEditorTableBorderDark
+  })(props), tableCellMinWidth, themed({
+    light: akEditorTableBorder,
+    dark: akEditorTableBorderDark
+  })(props), tableCellPadding, browser.gecko || browser.ie || browser.mac && browser.chrome ? 'background-clip: padding-box;' : '', themed({
+    dark: getTableCellBackgroundDarkModeColors
+  })(props), themed({
+    light: akEditorTableToolbar,
+    dark: akEditorTableToolbarDark
+  })(props), overflowShadow({
+    background: themed({
+      light: 'rgb(235, 237, 240)',
+      dark: 'rgb(36, 47, 66)'
+    })(props),
+    width: "".concat(gridSize(), "px")
+  }), themed({
     light: 'rgb(235, 237, 240)',
     dark: 'rgb(36, 47, 66)'
-  }),
-  width: "".concat(gridSize(), "px")
-}), themed({
-  light: 'rgb(235, 237, 240)',
-  dark: 'rgb(36, 47, 66)'
-}), themed({
-  light: 'rgb(226, 229, 233)',
-  dark: DN20
-}), overflowShadow({
-  background: themed({
+  })(props), themed({
+    light: 'rgb(226, 229, 233)',
+    dark: DN20
+  })(props), overflowShadow({
+    background: themed({
+      light: 'rgb(235, 237, 240)',
+      dark: 'rgb(36, 47, 66)'
+    })(props),
+    width: "".concat(gridSize(), "px")
+  }), themed({
     light: 'rgb(235, 237, 240)',
     dark: 'rgb(36, 47, 66)'
-  }),
-  width: "".concat(gridSize(), "px")
-}), themed({
-  light: 'rgb(235, 237, 240)',
-  dark: 'rgb(36, 47, 66)'
-}), themed({
-  light: 'rgb(226, 229, 233)',
-  dark: DN20
-}));
+  })(props), themed({
+    light: 'rgb(226, 229, 233)',
+    dark: DN20
+  })(props));
+};
+
 export var calcTableWidth = function calcTableWidth(layout, containerWidth) {
   var addControllerPadding = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
 

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

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { akEditorTableCellMinWidth } from '@atlaskit/editor-shared-styles';
 export var TaskDecisionSharedCssClassName = {
   DECISION_CONTAINER: 'decisionItemView-content-wrap'

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

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

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

@@ -2,6 +2,6 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 var whitespaceSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  word-wrap: break-word;\n  white-space: pre-wrap;\n"])));
 export { whitespaceSharedStyles };

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

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

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

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

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

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

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

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

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

@@ -2,9 +2,10 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
+/** @jsx jsx */
 import React, { useCallback, useRef } from 'react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import QuestionsIcon from '@atlaskit/icon/glyph/question-circle';
 import { N30, N50 } from '@atlaskit/theme/colors';
@@ -14,7 +15,7 @@ import { unsupportedContentMessages } from '../../messages/unsupportedContent';
 import { ACTION_SUBJECT_ID } from '../../utils/analytics';
 import { trackUnsupportedContentTooltipDisplayedFor } from '../../utils/track-unsupported-content';
 import { getUnsupportedContent } from '../unsupported-content-helper';
-var BlockNode = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: flex;\n  font-size: ", ";\n  margin: 10px 0;\n  min-height: 24px;\n  padding: 10px;\n  text-align: center;\n  vertical-align: text-bottom;\n  min-width: 120px;\n  align-items: center;\n  justify-content: center;\n"])), N30, N50, borderRadius(), relativeFontSizeToBase16(fontSize()));
+var blockNodeStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: flex;\n  font-size: ", ";\n  margin: 10px 0;\n  min-height: 24px;\n  padding: 10px;\n  text-align: center;\n  vertical-align: text-bottom;\n  min-width: 120px;\n  align-items: center;\n  justify-content: center;\n"])), N30, N50, borderRadius(), relativeFontSizeToBase16(fontSize()));
 
 var UnsupportedBlockNode = function UnsupportedBlockNode(_ref) {
   var node = _ref.node,
@@ -32,15 +33,18 @@ var UnsupportedBlockNode = function UnsupportedBlockNode(_ref) {
   var tooltipOnShowHandler = useCallback(function () {
     return dispatchAnalyticsEvent && trackUnsupportedContentTooltipDisplayedFor(dispatchAnalyticsEvent, ACTION_SUBJECT_ID.ON_UNSUPPORTED_BLOCK, originalNodeType);
   }, [dispatchAnalyticsEvent, originalNodeType]);
-  return /*#__PURE__*/React.createElement(BlockNode, null, message, /*#__PURE__*/React.createElement(Tooltip, {
+  return jsx("div", {
+    css: blockNodeStyle,
+    className: "unsupported"
+  }, message, jsx(Tooltip, {
     content: tooltipContent,
     hideTooltipOnClick: false,
     position: "bottom",
     onShow: tooltipOnShowHandler,
     strategy: "absolute"
-  }, /*#__PURE__*/React.createElement("span", {
+  }, jsx("span", {
     style: style
-  }, /*#__PURE__*/React.createElement(QuestionsIcon, {
+  }, jsx(QuestionsIcon, {
     label: "?",
     size: "small"
   }))));

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

@@ -2,9 +2,10 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
+/** @jsx jsx */
 import React, { useCallback, useRef } from 'react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import QuestionsIcon from '@atlaskit/icon/glyph/question-circle';
 import { N30, N50 } from '@atlaskit/theme/colors';
@@ -14,7 +15,7 @@ import { unsupportedContentMessages } from '../../messages/unsupportedContent';
 import { ACTION_SUBJECT_ID } from '../../utils/analytics';
 import { trackUnsupportedContentTooltipDisplayedFor } from '../../utils/track-unsupported-content';
 import { getUnsupportedContent } from '../unsupported-content-helper';
-var InlineNode = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: 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"])), N30, N50, borderRadius(), relativeFontSizeToBase16(fontSize()));
+var inlineNodeStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: 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"])), N30, N50, borderRadius(), relativeFontSizeToBase16(fontSize()));
 
 var UnsupportedInlineNode = function UnsupportedInlineNode(_ref) {
   var node = _ref.node,
@@ -32,15 +33,17 @@ var UnsupportedInlineNode = function UnsupportedInlineNode(_ref) {
   var tooltipOnShowHandler = useCallback(function () {
     return dispatchAnalyticsEvent && trackUnsupportedContentTooltipDisplayedFor(dispatchAnalyticsEvent, ACTION_SUBJECT_ID.ON_UNSUPPORTED_INLINE, originalNodeType);
   }, [dispatchAnalyticsEvent, originalNodeType]);
-  return /*#__PURE__*/React.createElement(InlineNode, null, message, /*#__PURE__*/React.createElement(Tooltip, {
+  return jsx("span", {
+    css: inlineNodeStyle
+  }, message, jsx(Tooltip, {
     content: tooltipContent,
     hideTooltipOnClick: false,
     position: "bottom",
     onShow: tooltipOnShowHandler,
     strategy: "absolute"
-  }, /*#__PURE__*/React.createElement("span", {
+  }, jsx("span", {
     style: style
-  }, /*#__PURE__*/React.createElement(QuestionsIcon, {
+  }, jsx(QuestionsIcon, {
     label: "?",
     size: "small"
   }))));

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

@@ -1,3 +1,4 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -5,7 +6,6 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
 var _templateObject;
 
@@ -13,9 +13,10 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/react';
 import rafSchedule from 'raf-schd';
-import styled from 'styled-components';
 import { WidthObserver } from '@atlaskit/width-detector';
 var SCROLLBAR_WIDTH = 30;
 export function getBreakpoint() {
@@ -41,7 +42,6 @@ export function createWidthContext() {
 export var WidthContext = /*#__PURE__*/React.createContext(createWidthContext());
 var Provider = WidthContext.Provider,
     Consumer = WidthContext.Consumer;
-var RelativeContainer = /*#__PURE__*/React.memo(styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n"]))));
 export var WidthProvider = /*#__PURE__*/function (_React$Component) {
   _inherits(WidthProvider, _React$Component);
 
@@ -76,12 +76,13 @@ export var WidthProvider = /*#__PURE__*/function (_React$Component) {
   _createClass(WidthProvider, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(RelativeContainer, {
+      return jsx("div", {
+        css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          position: relative;\n          width: 100%;\n        "]))),
         className: this.props.className
-      }, /*#__PURE__*/React.createElement(WidthObserver, {
+      }, jsx(WidthObserver, {
         setWidth: this.setWidth,
         offscreen: true
-      }), /*#__PURE__*/React.createElement(Provider, {
+      }), jsx(Provider, {
         value: createWidthContext(this.state.width)
       }, this.props.children));
     }

package/dist/esm/ui/clear-next-sibling-margin-top.js

@@ -2,6 +2,6 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import styled from 'styled-components'; // We use !important to ensure next sibling gets the margin reset no matter what
+import { css } from '@emotion/react'; // We use !important to ensure next sibling gets the margin reset no matter what
 
-export var ClearNextSiblingMarginTop = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & + * {\n    margin-top: 0 !important;\n  }\n"])));
+export var clearNextSiblingMarginTopStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & + * {\n    margin-top: 0 !important;\n  }\n"])));

package/dist/esm/ui/index.js

@@ -2,7 +2,7 @@ export { default as Caption } from './Caption';
 export { default as MediaSingle, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, wrappedLayouts, shouldAddDefaultWrappedWidth } from './MediaSingle';
 export { MediaSingleDimensionHelper } from './MediaSingle/styled';
 export { layoutSupportsWidth, calcPxFromColumns, calcPctFromPx, calcPxFromPct, calcColumnsFromPx, snapToGrid } from './MediaSingle/grid';
-export { MediaLink } from './MediaSingle/link';
+export { mediaLinkStyle } from './MediaSingle/link';
 export { default as Popup, findOverflowScrollParent } from './Popup';
 export { default as UnsupportedBlock } from './UnsupportedBlock';
 export { default as UnsupportedInline } from './UnsupportedInline';
@@ -13,7 +13,7 @@ export { default as overflowShadow, shadowClassNames } from './OverflowShadow';
 export { WithCreateAnalyticsEvent } from './WithCreateAnalyticsEvent';
 export { messages as expandMessages, sharedExpandStyles, ExpandIconWrapper, ExpandLayoutWrapper } from './Expand';
 export { ErrorMessage, HelperMessage, ValidMessage } from './Messages';
-export { ClearNextSiblingMarginTop } from './clear-next-sibling-margin-top';
+export { clearNextSiblingMarginTopStyle } from './clear-next-sibling-margin-top';
 export { IntlNextErrorBoundary, REACT_INTL_ERROR_MESSAGE } from './IntlNextErrorBoundary';
 export { IntlLegacyFallbackProvider } from './IntlLegacyFallbackProvider';
 export { LegacyToNextIntlProvider } from './LegacyToNextIntlProvider';

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "64.0.0",
+	"version": "65.0.0",
 	"sideEffects": false
 }

package/dist/types/__tests_external__/page-objects/Editor.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="cypress" />
-/// <reference types="jquery" />
 import { InProductTestPageObject } from '@atlaskit/in-product-testing';
 import { EditorTestCaseOpts } from '../cases/types';
 import { RendererPageObject } from './Renderer';

package/dist/types/__tests_external__/page-objects/EditorMedia.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="cypress" />
-/// <reference types="jquery" />
 import { CypressType, InProductTestPageObject } from '@atlaskit/in-product-testing';
 export declare class EditorMediaPageObject extends InProductTestPageObject {
     protected cy: CypressType;

package/dist/types/__tests_external__/page-objects/EditorSmartLink.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="cypress" />
-/// <reference types="jquery" />
 import { CypressType, InProductTestPageObject } from '@atlaskit/in-product-testing';
 import { CardAppearance } from '@atlaskit/smart-card';
 import { EditorPageObject } from './Editor';

package/dist/types/__tests_external__/page-objects/Renderer.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="cypress" />
-/// <reference types="jquery" />
 import { InProductTestPageObject } from '@atlaskit/in-product-testing';
 export declare class RendererPageObject extends InProductTestPageObject {
     getContent(): Cypress.Chainable<JQuery<HTMLElement>>;

package/dist/types/collab/types.d.ts

@@ -60,8 +60,8 @@ export interface CollabEventData {
     'local-steps': any;
     entity: any;
 }
-export declare type ResolvedEditorState = {
-    content: JSONDocNode;
+export declare type ResolvedEditorState<T = any> = {
+    content: JSONDocNode | T;
     title: string | null;
     stepVersion: number;
 };

package/dist/types/i18n/cs.d.ts

@@ -1,6 +1,6 @@
 declare const _default: {
-    'fabric.editor.codeBidiWarningLabel': string;
     'fabric.editor.captionPlaceholder': string;
+    'fabric.editor.codeBidiWarningLabel': string;
     'fabric.editor.collapseNode': string;
     'fabric.editor.expandDefaultTitle': string;
     'fabric.editor.expandNode': string;
@@ -13,7 +13,7 @@ declare const _default: {
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
 export default _default;

package/dist/types/i18n/da.d.ts

@@ -1,6 +1,6 @@
 declare const _default: {
-    'fabric.editor.codeBidiWarningLabel': string;
     'fabric.editor.captionPlaceholder': string;
+    'fabric.editor.codeBidiWarningLabel': string;
     'fabric.editor.collapseNode': string;
     'fabric.editor.expandDefaultTitle': string;
     'fabric.editor.expandNode': string;
@@ -13,7 +13,7 @@ declare const _default: {
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
 export default _default;

package/dist/types/i18n/de.d.ts

@@ -1,6 +1,6 @@
 declare const _default: {
-    'fabric.editor.codeBidiWarningLabel': string;
     'fabric.editor.captionPlaceholder': string;
+    'fabric.editor.codeBidiWarningLabel': string;
     'fabric.editor.collapseNode': string;
     'fabric.editor.expandDefaultTitle': string;
     'fabric.editor.expandNode': string;
@@ -13,7 +13,7 @@ declare const _default: {
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
 export default _default;

package/dist/types/i18n/en_ZZ.d.ts

@@ -0,0 +1,19 @@
+declare const _default: {
+    'fabric.editor.captionPlaceholder': string;
+    'fabric.editor.codeBidiWarningLabel': string;
+    'fabric.editor.collapseNode': string;
+    'fabric.editor.expandDefaultTitle': string;
+    'fabric.editor.expandNode': string;
+    'fabric.editor.expandPlaceholder': string;
+    'fabric.editor.openLink': string;
+    'fabric.editor.unsupportedBlockContent': string;
+    'fabric.editor.unsupportedContentTooltip': string;
+    'fabric.editor.unsupportedInlineContent': string;
+};
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+export default _default;

package/dist/types/i18n/es.d.ts

@@ -1,6 +1,6 @@
 declare const _default: {
-    'fabric.editor.codeBidiWarningLabel': string;
     'fabric.editor.captionPlaceholder': string;
+    'fabric.editor.codeBidiWarningLabel': string;
     'fabric.editor.collapseNode': string;
     'fabric.editor.expandDefaultTitle': string;
     'fabric.editor.expandNode': string;
@@ -13,7 +13,7 @@ declare const _default: {
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
 export default _default;

package/dist/types/i18n/fi.d.ts

@@ -1,6 +1,6 @@
 declare const _default: {
-    'fabric.editor.codeBidiWarningLabel': string;
     'fabric.editor.captionPlaceholder': string;
+    'fabric.editor.codeBidiWarningLabel': string;
     'fabric.editor.collapseNode': string;
     'fabric.editor.expandDefaultTitle': string;
     'fabric.editor.expandNode': string;
@@ -13,7 +13,7 @@ declare const _default: {
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
 export default _default;