@atlaskit/editor-common 63.0.0 → 65.0.0

package/dist/esm/styles/shared/column-layout.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 { gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
 var columnLayoutSharedStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), gridMediumMaxWidth);
 export { columnLayoutSharedStyle };

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

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 export var DateSharedCssClassName = {
   DATE_WRAPPER: "date-lozenger-container",
   DATE_CONTAINER: 'dateView-content-wrap'

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

@@ -2,8 +2,10 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { h100, h300, h400, h500, h600, h700 } from '@atlaskit/theme/typography'; // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
 // text sizing prototype: http://proto/fabricrender/
 
-export var headingsSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), h700, h600, h500, h400, h300, h100);
+export var headingsSharedStyles = function headingsSharedStyles(props) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), h700(props), h600(props), h500(props), h400(props), h300(props), h100(props));
+};

package/dist/esm/styles/shared/indentation.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 indentationSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])));

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

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

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

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 var richMediaClassName = 'rich-media-item';
 var wrappedMediaBreakoutPoint = 410;
 var mediaSingleSharedStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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);

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

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { akEditorLineHeight, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles'; // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
 
 export var paragraphSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & p {\n    font-size: 1em;\n    line-height: ", ";\n    font-weight: normal;\n    margin-top: ", ";\n    margin-bottom: 0;\n    letter-spacing: -0.005em;\n  }\n"])), akEditorLineHeight, blockNodesVerticalMargin);

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

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { akEditorShadowZIndex } from '@atlaskit/editor-shared-styles';
 import { N40A } from '@atlaskit/theme/colors';
 import { shadowClassNames } from '../../ui/OverflowShadow';

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

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

@@ -0,0 +1 @@
+export {};

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

@@ -26,7 +26,8 @@ export default function MediaSingle(_ref) {
       fullWidthMode = _ref.fullWidthMode,
       lineLength = _ref.lineLength,
       _ref$hasFallbackConta = _ref.hasFallbackContainer,
-      hasFallbackContainer = _ref$hasFallbackConta === void 0 ? true : _ref$hasFallbackConta;
+      hasFallbackContainer = _ref$hasFallbackConta === void 0 ? true : _ref$hasFallbackConta,
+      handleMediaSingleRef = _ref.handleMediaSingleRef;
   var children = React.Children.toArray(propsChildren);
 
   if (!pctWidth && shouldAddDefaultWrappedWidth(layout, width, lineLength)) {
@@ -81,6 +82,7 @@ export default function MediaSingle(_ref) {
       caption = _children[1];
 
   return /*#__PURE__*/React.createElement(MediaSingleWrapper, {
+    innerRef: handleMediaSingleRef,
     width: width,
     layout: layout,
     containerWidth: containerWidth,

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

@@ -31,7 +31,6 @@ var Mention = /*#__PURE__*/function (_PureComponent) {
           accessLevel = _this$props.accessLevel,
           eventHandlers = _this$props.eventHandlers,
           id = _this$props.id,
-          portal = _this$props.portal,
           text = _this$props.text;
       var mentionProvider = providers.mentionProvider,
           profilecardProvider = providers.profilecardProvider;
@@ -41,8 +40,7 @@ var Mention = /*#__PURE__*/function (_PureComponent) {
         accessLevel: accessLevel,
         eventHandlers: eventHandlers,
         mentionProvider: mentionProvider,
-        profilecardProvider: profilecardProvider,
-        portal: portal
+        profilecardProvider: profilecardProvider
       });
     });
 

package/dist/esm/ui/Mention/mention-with-profilecard.js

@@ -1,190 +1,34 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-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";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
-
-import React, { PureComponent } from 'react';
-import { findDOMNode } from 'react-dom';
+import React, { useMemo } from 'react';
 import { ResourcedMention } from '@atlaskit/mention';
-import ProfileCard from '@atlaskit/profilecard';
-import Popup from '../Popup';
-import withOuterListeners from '../with-outer-listeners';
-var ProfilecardResourcedWithListeners = withOuterListeners(ProfileCard);
-
-var MentionWithProfileCard = /*#__PURE__*/function (_PureComponent) {
-  _inherits(MentionWithProfileCard, _PureComponent);
-
-  var _super = _createSuper(MentionWithProfileCard);
-
-  function MentionWithProfileCard() {
-    var _this;
-
-    _classCallCheck(this, MentionWithProfileCard);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      target: null,
-      visible: false,
-      popupAlignX: 'left',
-      popupAlignY: 'top'
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleRef", function (target) {
-      _this.setState({
-        target: target
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleMentionNodeRef", function (component) {
-      if (!component) {
-        _this.domNode = null;
-      } else {
-        _this.domNode = findDOMNode(component);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "showProfilecard", function (event) {
-      if (!_this.domNode) {
-        return;
-      }
-
-      event.stopPropagation();
-
-      var _this$calculateLayerP = _this.calculateLayerPosition(),
-          _this$calculateLayerP2 = _slicedToArray(_this$calculateLayerP, 2),
-          popupAlignX = _this$calculateLayerP2[0],
-          popupAlignY = _this$calculateLayerP2[1];
-
-      _this.setState({
-        popupAlignX: popupAlignX,
-        popupAlignY: popupAlignY,
-        visible: true
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "hideProfilecard", function () {
-      _this.setState({
-        visible: false
-      });
-    });
-
-    return _this;
-  }
-
-  _createClass(MentionWithProfileCard, [{
-    key: "calculateLayerPosition",
-    value: function calculateLayerPosition() {
-      var domNodeCentreCoords = this.getDomNodeCenterCoords();
-      var visibleAreaCentreCoords = this.getVisibleAreaCentreCoords();
-      var popupAlignY = domNodeCentreCoords.y > visibleAreaCentreCoords.y ? 'top' : 'bottom';
-      var popupAlignX = domNodeCentreCoords.x > visibleAreaCentreCoords.x ? 'right' : 'left';
-      return [popupAlignX, popupAlignY];
-    }
-  }, {
-    key: "getDomNodeCenterCoords",
-    value: function getDomNodeCenterCoords() {
-      var rect = this.domNode.getBoundingClientRect();
-      return {
-        x: rect.left + rect.width / 2,
-        y: rect.top + rect.height / 2
-      };
-    }
-  }, {
-    key: "getVisibleAreaCentreCoords",
-    value: function getVisibleAreaCentreCoords() {
-      return {
-        x: window.innerWidth / 2,
-        y: window.innerHeight / 2
-      };
-    }
-  }, {
-    key: "getActions",
-    value: function getActions(id, text, accessLevel) {
-      var _this2 = this;
-
-      var profilecardProvider = this.props.profilecardProvider;
-      var actions = profilecardProvider.getActions(id, text, accessLevel);
-      return actions.map(function (action) {
-        return _objectSpread(_objectSpread({}, action), {}, {
-          callback: function callback() {
-            _this2.setState({
-              visible: false
-            });
-
-            if (action && action.callback) {
-              action.callback();
-            }
-          }
-        });
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          accessLevel = _this$props.accessLevel,
-          id = _this$props.id,
-          mentionProvider = _this$props.mentionProvider,
-          profilecardProvider = _this$props.profilecardProvider,
-          text = _this$props.text,
-          onClick = _this$props.onClick,
-          onMouseEnter = _this$props.onMouseEnter,
-          onMouseLeave = _this$props.onMouseLeave,
-          portal = _this$props.portal;
-      var _this$state = this.state,
-          popupAlignX = _this$state.popupAlignX,
-          popupAlignY = _this$state.popupAlignY,
-          target = _this$state.target,
-          visible = _this$state.visible;
-      var cloudId = profilecardProvider.cloudId,
-          resourceClient = profilecardProvider.resourceClient;
-      return /*#__PURE__*/React.createElement("span", {
-        ref: this.handleRef,
-        onClick: this.showProfilecard
-      }, /*#__PURE__*/React.createElement(ResourcedMention, {
-        ref: this.handleMentionNodeRef,
-        id: id,
-        text: text,
-        accessLevel: accessLevel,
-        mentionProvider: mentionProvider,
-        onClick: onClick,
-        onMouseEnter: onMouseEnter,
-        onMouseLeave: onMouseLeave
-      }), target && portal && visible && /*#__PURE__*/React.createElement(Popup, {
-        offset: [0, 8],
-        target: target,
-        mountTo: portal,
-        alignX: popupAlignX,
-        alignY: popupAlignY
-      }, /*#__PURE__*/React.createElement(ProfilecardResourcedWithListeners, {
-        handleClickOutside: this.hideProfilecard,
-        handleEscapeKeydown: this.hideProfilecard,
-        cloudId: cloudId,
-        userId: id,
-        resourceClient: resourceClient,
-        actions: this.getActions(id, text, accessLevel)
-      })));
-    }
-  }]);
-
-  return MentionWithProfileCard;
-}(PureComponent);
-
-export { MentionWithProfileCard as default };
+import { ProfileCardTrigger } from '@atlaskit/profilecard';
+export default function MentionWithProfileCard(_ref) {
+  var id = _ref.id,
+      text = _ref.text,
+      accessLevel = _ref.accessLevel,
+      mentionProvider = _ref.mentionProvider,
+      profilecardProvider = _ref.profilecardProvider,
+      onClick = _ref.onClick,
+      onMouseEnter = _ref.onMouseEnter,
+      onMouseLeave = _ref.onMouseLeave;
+  var cloudId = profilecardProvider.cloudId,
+      resourceClient = profilecardProvider.resourceClient;
+  var actions = useMemo(function () {
+    return profilecardProvider.getActions(id, text, accessLevel);
+  }, [accessLevel, id, profilecardProvider, text]);
+  return /*#__PURE__*/React.createElement(ProfileCardTrigger, {
+    cloudId: cloudId,
+    userId: id,
+    resourceClient: resourceClient,
+    actions: actions,
+    trigger: "click",
+    position: "bottom-end"
+  }, /*#__PURE__*/React.createElement(ResourcedMention, {
+    id: id,
+    text: text,
+    accessLevel: accessLevel,
+    mentionProvider: mentionProvider,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }));
+}

package/dist/esm/ui/Mention/mention-with-providers.js

@@ -83,11 +83,9 @@ var MentionWithProviders = /*#__PURE__*/function (_PureComponent) {
     value: function render() {
       var _this$props = this.props,
           accessLevel = _this$props.accessLevel,
-          userType = _this$props.userType,
           eventHandlers = _this$props.eventHandlers,
           id = _this$props.id,
           mentionProvider = _this$props.mentionProvider,
-          portal = _this$props.portal,
           text = _this$props.text;
       var profilecardProvider = this.state.profilecardProvider;
       var actionHandlers = {};
@@ -99,10 +97,8 @@ var MentionWithProviders = /*#__PURE__*/function (_PureComponent) {
         id: id,
         text: text,
         accessLevel: accessLevel,
-        userType: userType,
         mentionProvider: mentionProvider,
-        profilecardProvider: profilecardProvider,
-        portal: portal
+        profilecardProvider: profilecardProvider
       }, actionHandlers));
     }
   }]);