@atlaskit/editor-common 60.0.0 → 61.0.0

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

@@ -7,16 +7,21 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.panelSharedStyles = exports.getPanelTypeBackground = exports.PanelSharedSelectors = exports.PanelSharedCssClassName = void 0;
+exports.getPanelDarkModeCSS = getPanelDarkModeCSS;
+exports.panelSharedStyles = exports.getPanelTypeBackground = exports.PanelSharedSelectors = exports.PanelSharedCssClassName = exports.getPanelBackgroundDarkModeColors = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _styledComponents = require("styled-components");
 
 var _adfSchema = require("@atlaskit/adf-schema");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
+var _consts = require("@atlaskit/editor-shared-styles/consts");
+
 var _emoji = require("@atlaskit/emoji");
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
@@ -39,22 +44,67 @@ var lightPanelColor = {
   warning: colors.Y50,
   error: colors.R50
 };
-var darkPanelOpacity = 0.64;
-var darkPanelColor = {
-  info: colors.B500,
-  note: colors.P500,
-  tip: colors.G500,
-  success: colors.G500,
-  warning: colors.Y500,
-  error: colors.R500
-};
-var darkPanelBorderColor = {
-  info: colors.B400,
-  note: colors.P400,
-  tip: colors.G400,
-  success: colors.G400,
-  warning: colors.Y400,
-  error: colors.R400
+var darkPanelColors = {
+  // standard panels
+  info: '#0C294F',
+  error: "#441C13",
+  warning: "#413001",
+  tip: "#052E21",
+  success: "#052E21",
+  note: "#282249",
+  // Reds
+  R900: '#601D16',
+  // Red Saturated
+  R100S: "#FFEFEB",
+  R300S: "#FFB5A3",
+  R500S: "#FF6B47",
+  R800S: "#C4320E",
+  R1200S: "#441C13",
+  // Yellows
+  Y900: '#533F04',
+  // Yellow Saturated
+  Y100S: "#FFF3D1",
+  Y300S: "#FFDC7A",
+  Y500S: "#FFC933",
+  Y800S: "#D8A003",
+  Y1200S: "#413001",
+  // Greens
+  G900: '#164B35',
+  // Green Saturated
+  G100S: "#E3FCF0",
+  G300S: "#95EEC5",
+  G400S: "#60DCA8",
+  G900S: "#086848",
+  G1200S: "#052E21",
+  // Blues
+  B900: '#09326C',
+  // Saturated Blues
+  B100S: '#E5F0FF',
+  B300S: '#A3C9FF',
+  B500S: '#4794FF',
+  B800S: '#0055CC',
+  B1200S: '#0C294F',
+  // Purples
+  P900: "#352C63",
+  // Purple Saturated
+  P100S: "#EEEBFF",
+  P300S: "#CCC3FE",
+  P500S: "#A292F7",
+  P800S: "#5E49CA",
+  P1200S: "#282249",
+  // Teals
+  T900: '#1D474C',
+  // Teal Saturated
+  T100S: "#DBFAFF",
+  T300S: "#78EBFC",
+  T400S: "#3AD6EE",
+  T900S: "#056270",
+  T1200S: "#0B3037",
+  // Dark Mode Alpha
+  DNA20A: 'rgba(150, 176, 210, 0.53)',
+  DNA40A: 'rgba(134, 156, 180, 0.29)',
+  DNA80A: '#161A1D',
+  TextColor: '#D9DDE3'
 };
 var lightIconColor = {
   info: colors.B400,
@@ -71,15 +121,24 @@ var darkIconColor = {
   success: colors.G200,
   warning: colors.Y100,
   error: colors.R200
-};
-var darkTextColor = {
-  info: colors.B75,
-  note: colors.P75,
-  tip: colors.G75,
-  success: colors.G75,
-  warning: colors.Y75,
-  error: colors.R75
-};
+}; // New custom icons are a little smaller than predefined icons.
+// To fix alignment issues with custom icons, vertical alignment is updated.
+
+var panelEmojiSpriteVerticalAlignment = -((0, _constants.gridSize)() * 3 - _consts.akEditorCustomIconSize) / 2;
+var panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1;
+var getPanelBackgroundDarkModeColors = [[colors.B50, darkPanelColors.B1200S], [colors.B75, darkPanelColors.B900], [colors.B100, darkPanelColors.B800S], [colors.N0, darkPanelColors.DNA80A], [colors.N20, darkPanelColors.DNA40A], [colors.N60, darkPanelColors.DNA20A], [colors.T50, darkPanelColors.T1200S], [colors.T75, darkPanelColors.T900], [colors.T100, darkPanelColors.T900S], [colors.G50, darkPanelColors.G1200S], [colors.G75, darkPanelColors.G900], [colors.G200, darkPanelColors.G900S], [colors.Y50, darkPanelColors.Y1200S], [colors.Y75, darkPanelColors.Y900], [colors.Y200, darkPanelColors.Y800S], [colors.R50, darkPanelColors.R1200S], [colors.R75, darkPanelColors.R900], [colors.R100, darkPanelColors.R800S], [colors.P50, darkPanelColors.P1200S], [colors.P75, darkPanelColors.P900], [colors.P100, darkPanelColors.P800S]].map(function (_ref) {
+  var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+      colorName = _ref2[0],
+      colorValue = _ref2[1];
+
+  return getPanelDarkModeCSS(colorName, colorValue);
+}).join('\n');
+exports.getPanelBackgroundDarkModeColors = getPanelBackgroundDarkModeColors;
+
+function getPanelDarkModeCSS(colorName, colorValue) {
+  return "\n  &[data-panel-color=\"".concat(colorName, "\"] {\n    background-color: ").concat(colorValue, " !important; // !important to override default style color\n    color: ").concat(darkPanelColors.TextColor, ";\n  }\n  ");
+}
+
 var prefix = 'ak-editor-panel';
 var PanelSharedCssClassName = {
   prefix: prefix,
@@ -97,7 +156,7 @@ var PanelSharedSelectors = {
   removeButton: "button[aria-label=\"Remove\"]",
   colorPalette: "[aria-label=\"Background color\"]",
   selectedColor: "[aria-label=\"The smell\"]",
-  hideEmojiIcon: "[aria-label=\"Hide emoji\"]",
+  removeEmojiIcon: "[aria-label=\"Remove emoji\"]",
   emojiIcon: "[aria-label=\"editor-add-emoji\"]",
   selectedEmoji: "[aria-label=\":grinning:\"]",
   title: "#editor-title"
@@ -119,7 +178,7 @@ var iconDynamicStyles = function iconDynamicStyles(panelType) {
 var getPanelTypeBackground = function getPanelTypeBackground(panelType) {
   var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var light = lightPanelColor[panelType];
-  var dark = (0, _adfSchema.hexToRgba)(darkPanelColor[panelType], darkPanelOpacity);
+  var dark = darkPanelColors[panelType];
   var background = (0, _components.themed)({
     light: light,
     dark: dark
@@ -132,19 +191,15 @@ exports.getPanelTypeBackground = getPanelTypeBackground;
 var mainDynamicStyles = function mainDynamicStyles(panelType) {
   return function (props) {
     var background = getPanelTypeBackground(panelType, props);
-    var darkText = darkTextColor[panelType];
-    var darkBorder = '1px solid ' + darkPanelBorderColor[panelType];
-    var border = (0, _components.themed)({
-      light: 'none',
-      dark: darkBorder
-    })(props);
     var text = (0, _components.themed)({
       light: 'inherit',
-      dark: darkText
+      dark: darkPanelColors.TextColor
     })(props);
-    return "\n    background-color: ".concat(background, ";\n    border: ").concat(border, ";\n    color: ").concat(text, ";\n  ");
+    return "\n    background-color: ".concat(background, ";\n    color: ").concat(text, ";\n  ");
   };
 };
 
-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    align-items: baseline;\n    word-break: break-word;\n\n    ", "\n\n    .", " {\n      display: block;\n      flex-shrink: 0;\n      height: ", "px;\n      width: ", "px;\n      box-sizing: content-box;\n      padding-right: ", "px;\n      text-align: center;\n      ", "\n\n      > span {\n        vertical-align: middle;\n        display: inline;\n      }\n\n      .", " {\n        vertical-align: -2px;\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"])), 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, _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));
+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;\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
+}));
 exports.panelSharedStyles = panelSharedStyles;

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

@@ -54,13 +54,13 @@ var TableSharedCssClassName = {
   TABLE_CELL_WRAPPER: _adfSchema.tableCellSelector
 };
 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  }\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)({
+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 ? 'background-clip: padding-box;' : '', (0, _components.themed)({
+}), 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,

package/dist/cjs/ufo/experience-store.js

@@ -0,0 +1,160 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExperienceStore = exports.RELIABILITY_INTERVAL = exports.EditorExperience = exports.experienceConfig = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _ufo = require("@atlaskit/ufo");
+
+var experienceConfig = {
+  type: _ufo.ExperienceTypes.Operation,
+  performanceType: _ufo.ExperiencePerformanceTypes.Custom,
+  platform: {
+    component: 'editor'
+  }
+};
+exports.experienceConfig = experienceConfig;
+var EditorExperience;
+exports.EditorExperience = EditorExperience;
+
+(function (EditorExperience) {
+  EditorExperience["loadEditor"] = "load";
+  EditorExperience["typing"] = "type";
+  EditorExperience["interaction"] = "interact";
+  EditorExperience["editSession"] = "editSession";
+})(EditorExperience || (exports.EditorExperience = EditorExperience = {}));
+
+var RELIABILITY_INTERVAL = 30000;
+exports.RELIABILITY_INTERVAL = RELIABILITY_INTERVAL;
+
+var ExperienceStore = /*#__PURE__*/function () {
+  function ExperienceStore() {
+    (0, _classCallCheck2.default)(this, ExperienceStore);
+    this.experiences = new Map();
+
+    for (var _i = 0, _Object$values = Object.values(EditorExperience); _i < _Object$values.length; _i++) {
+      var experienceId = _Object$values[_i];
+      var experience = new _ufo.UFOExperience(experienceId, experienceConfig);
+      this.experiences.set(experienceId, experience);
+    }
+  }
+
+  (0, _createClass2.default)(ExperienceStore, [{
+    key: "get",
+    value: function get(experienceId) {
+      return this.experiences.get(experienceId);
+    }
+  }, {
+    key: "getActive",
+    value: function getActive(experienceId) {
+      var experience = this.experiences.get(experienceId);
+
+      if (!(experience !== null && experience !== void 0 && experience.state.final)) {
+        return experience;
+      }
+    }
+  }, {
+    key: "getAll",
+    value: function getAll() {
+      return Array.from(this.experiences.values());
+    }
+  }, {
+    key: "start",
+    value: function start(experienceId, startTime) {
+      var _this$get;
+
+      (_this$get = this.get(experienceId)) === null || _this$get === void 0 ? void 0 : _this$get.start(startTime);
+    }
+  }, {
+    key: "addMetadata",
+    value: function addMetadata(experienceId, metadata) {
+      var _this$get2;
+
+      (_this$get2 = this.get(experienceId)) === null || _this$get2 === void 0 ? void 0 : _this$get2.addMetadata(metadata);
+    }
+  }, {
+    key: "mark",
+    value: function mark(experienceId, _mark, value) {
+      var _this$get3;
+
+      (_this$get3 = this.get(experienceId)) === null || _this$get3 === void 0 ? void 0 : _this$get3.mark(_mark, value);
+    }
+  }, {
+    key: "success",
+    value: function success(experienceId, metadata) {
+      var _this$getActive;
+
+      return (_this$getActive = this.getActive(experienceId)) === null || _this$getActive === void 0 ? void 0 : _this$getActive.success({
+        metadata: metadata
+      });
+    }
+  }, {
+    key: "fail",
+    value: function fail(experienceId, metadata) {
+      var _this$getActive2;
+
+      (_this$getActive2 = this.getActive(experienceId)) === null || _this$getActive2 === void 0 ? void 0 : _this$getActive2.failure({
+        metadata: metadata
+      });
+    }
+  }, {
+    key: "abort",
+    value: function abort(experienceId, metadata) {
+      var _this = this;
+
+      // We add this wait in here because when React catches an error it unmounts the component
+      // before the error boundary's componentDidCatch is called
+      // In this case we want to fail the experience, but without this wait, abort is called first
+      setTimeout(function () {
+        var _this$getActive3;
+
+        (_this$getActive3 = _this.getActive(experienceId)) === null || _this$getActive3 === void 0 ? void 0 : _this$getActive3.abort({
+          metadata: metadata
+        });
+      }, 0);
+    }
+  }, {
+    key: "abortAll",
+    value: function abortAll(metadata) {
+      var _this2 = this;
+
+      this.experiences.forEach(function (experience) {
+        _this2.abort(experience.id, metadata);
+      });
+    }
+  }, {
+    key: "failAll",
+    value: function failAll(metadata) {
+      var _this3 = this;
+
+      this.experiences.forEach(function (experience) {
+        _this3.fail(experience.id, metadata);
+      });
+    }
+  }], [{
+    key: "getInstance",
+    value: function getInstance(view) {
+      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+      if (!this.stores.get(view) || options !== null && options !== void 0 && options.forceNewInstance) {
+        var store = new ExperienceStore();
+        this.stores.set(view, store);
+      }
+
+      return this.stores.get(view);
+    }
+  }]);
+  return ExperienceStore;
+}();
+
+exports.ExperienceStore = ExperienceStore;
+(0, _defineProperty2.default)(ExperienceStore, "stores", new WeakMap());

package/dist/cjs/ufo/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ExperienceStore", {
+  enumerable: true,
+  get: function get() {
+    return _experienceStore.ExperienceStore;
+  }
+});
+Object.defineProperty(exports, "EditorExperience", {
+  enumerable: true,
+  get: function get() {
+    return _experienceStore.EditorExperience;
+  }
+});
+Object.defineProperty(exports, "RELIABILITY_INTERVAL", {
+  enumerable: true,
+  get: function get() {
+    return _experienceStore.RELIABILITY_INTERVAL;
+  }
+});
+
+var _experienceStore = require("./experience-store");

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

@@ -21,8 +21,6 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _math = require("@atlaskit/theme/math");
-
 var _typography = require("@atlaskit/theme/typography");
 
 var _templateObject, _templateObject2;
@@ -37,7 +35,7 @@ var Message = _styledComponents.default.div(_templateObject || (_templateObject
   }
 
   return _colors.N200;
-}, (0, _math.multiply)(_constants.gridSize, 0.5));
+}, (0, _constants.gridSize)() / 2);
 
 var IconWrapper = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-right: 4px;\n"])));
 

package/dist/cjs/utils/compareNodes.js

@@ -146,6 +146,12 @@ function compareValue(valueA, valueB) {
     return 0;
   }
 
+  if (typeof valueA === 'string' && typeof valueB === 'string') {
+    return valueA.localeCompare(valueB, window.navigator.language, {
+      caseFirst: 'upper'
+    });
+  }
+
   return valueA > valueB ? 1 : -1;
 }
 /**

package/dist/cjs/utils/index.js

@@ -335,6 +335,24 @@ Object.defineProperty(exports, "sniffUserBrowserExtensions", {
     return _browserExtensions.sniffUserBrowserExtensions;
   }
 });
+Object.defineProperty(exports, "RenderCountProfiler", {
+  enumerable: true,
+  get: function get() {
+    return _renderCount.RenderCountProfiler;
+  }
+});
+Object.defineProperty(exports, "validateADFEntity", {
+  enumerable: true,
+  get: function get() {
+    return _validateUsingSpec.validateADFEntity;
+  }
+});
+Object.defineProperty(exports, "validationErrorHandler", {
+  enumerable: true,
+  get: function get() {
+    return _validateUsingSpec.validationErrorHandler;
+  }
+});
 
 var _annotation = require("./annotation");
 
@@ -382,4 +400,8 @@ var _shouldForceTracking = require("./should-force-tracking");
 
 var _getModeFromTheme = require("./getModeFromTheme");
 
-var _browserExtensions = require("./browser-extensions");
+var _browserExtensions = require("./browser-extensions");
+
+var _renderCount = require("./profiler/render-count");
+
+var _validateUsingSpec = require("./validate-using-spec");

package/dist/cjs/utils/profiler/render-count.js

@@ -0,0 +1,135 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RenderCountProfiler = exports.PROFILER_KEY = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var PROFILER_KEY = '__editorRenderCountProfiler';
+exports.PROFILER_KEY = PROFILER_KEY;
+
+var RenderCountProfiler = /*#__PURE__*/function () {
+  /**
+   * The singleton/cached instance of RenderCountProfiler that will be shared
+   * betweenRenderCountProfiler.getInstance() calls
+   */
+  function RenderCountProfiler(_ref) {
+    var store = _ref.store;
+    (0, _classCallCheck2.default)(this, RenderCountProfiler);
+    this.store = store;
+  }
+  /**
+   * Returns the singleton/cached instance of RenderCountProfiler that
+   * currently exists. If it hasn't been instantiated yet, the singleton
+   * instance will be created using the given params. Returns the latest
+   * singleton/instance.
+   */
+
+
+  (0, _createClass2.default)(RenderCountProfiler, [{
+    key: "getData",
+    value: function getData(profilerKey) {
+      var _this$store;
+
+      return (_this$store = this.store) === null || _this$store === void 0 ? void 0 : _this$store[profilerKey];
+    }
+  }, {
+    key: "enable",
+    value: function enable() {
+      this.store[PROFILER_KEY] = _objectSpread(_objectSpread({}, this.store[PROFILER_KEY]), {}, {
+        enabled: true
+      });
+    }
+  }, {
+    key: "remove",
+    value: function remove() {
+      delete this.store[PROFILER_KEY];
+    }
+  }, {
+    key: "isEnabled",
+    value: function isEnabled() {
+      var _this$store2, _this$store2$PROFILER;
+
+      return Boolean((_this$store2 = this.store) === null || _this$store2 === void 0 ? void 0 : (_this$store2$PROFILER = _this$store2[PROFILER_KEY]) === null || _this$store2$PROFILER === void 0 ? void 0 : _this$store2$PROFILER.enabled);
+    }
+  }, {
+    key: "setRenderCount",
+    value: function setRenderCount(_ref2) {
+      var componentId = _ref2.componentId,
+          renderCount = _ref2.renderCount,
+          instanceId = _ref2.instanceId;
+      var profilerData = this.store[PROFILER_KEY];
+      var instance = {
+        count: renderCount
+      };
+      var existingComponents = profilerData === null || profilerData === void 0 ? void 0 : profilerData.components;
+      var existingInstances = existingComponents === null || existingComponents === void 0 ? void 0 : existingComponents[componentId];
+
+      var updatedComponent = _objectSpread(_objectSpread({}, existingInstances), {}, (0, _defineProperty2.default)({}, instanceId, instance));
+
+      this.store[PROFILER_KEY] = _objectSpread(_objectSpread({}, profilerData), {}, {
+        components: _objectSpread(_objectSpread({}, existingComponents), {}, (0, _defineProperty2.default)({}, componentId, updatedComponent))
+      });
+    }
+  }, {
+    key: "getInstanceRenderCounters",
+    value: function getInstanceRenderCounters(_ref3) {
+      var _this$store$PROFILER_, _this$store3, _this$store3$PROFILER, _this$store3$PROFILER2;
+
+      var componentId = _ref3.componentId;
+      var component = (_this$store$PROFILER_ = (_this$store3 = this.store) === null || _this$store3 === void 0 ? void 0 : (_this$store3$PROFILER = _this$store3[PROFILER_KEY]) === null || _this$store3$PROFILER === void 0 ? void 0 : (_this$store3$PROFILER2 = _this$store3$PROFILER.components) === null || _this$store3$PROFILER2 === void 0 ? void 0 : _this$store3$PROFILER2[componentId]) !== null && _this$store$PROFILER_ !== void 0 ? _this$store$PROFILER_ : {};
+      var counters = [];
+
+      for (var _instanceId in component) {
+        var counter = {
+          instanceId: _instanceId,
+          count: component[_instanceId].count
+        };
+        counters.push(counter);
+      }
+
+      return counters;
+    }
+  }, {
+    key: "getRenderCount",
+    value: function getRenderCount(_ref4) {
+      var _this$store$PROFILER_2, _this$store4, _this$store4$PROFILER, _this$store4$PROFILER2;
+
+      var componentId = _ref4.componentId;
+      var component = (_this$store$PROFILER_2 = (_this$store4 = this.store) === null || _this$store4 === void 0 ? void 0 : (_this$store4$PROFILER = _this$store4[PROFILER_KEY]) === null || _this$store4$PROFILER === void 0 ? void 0 : (_this$store4$PROFILER2 = _this$store4$PROFILER.components) === null || _this$store4$PROFILER2 === void 0 ? void 0 : _this$store4$PROFILER2[componentId]) !== null && _this$store$PROFILER_2 !== void 0 ? _this$store$PROFILER_2 : {};
+      var total = 0;
+
+      for (var _instanceId2 in component) {
+        total += component[_instanceId2].count;
+      }
+
+      return total;
+    }
+  }], [{
+    key: "getInstance",
+    value: function getInstance(params) {
+      if (!RenderCountProfiler.instance) {
+        RenderCountProfiler.instance = new RenderCountProfiler({
+          store: params.store
+        });
+      }
+
+      return RenderCountProfiler.instance;
+    }
+  }]);
+  return RenderCountProfiler;
+}();
+
+exports.RenderCountProfiler = RenderCountProfiler;