@atlaskit/editor-core 176.0.3 → 177.0.1

package/dist/cjs/ui/ConfigPanel/Fields/CheckboxGroup.js

@@ -23,8 +23,6 @@ var _checkbox = require("@atlaskit/checkbox");
 
 var _form = require("@atlaskit/form");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _types = require("../types");
 
 var _FieldMessages = _interopRequireDefault(require("../FieldMessages"));
@@ -39,7 +37,7 @@ function _validate(value, isRequired) {
   }
 }
 
-var requiredIndicator = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), (0, _tokens.token)('color.text.danger', '#bf2600'));
+var requiredIndicator = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), "var(--ds-text-danger, #bf2600)");
 
 function CheckboxGroupInner(_ref) {
   var label = _ref.label,

package/dist/cjs/ui/ConfigPanel/Fields/Expand.js

@@ -21,8 +21,6 @@ var _reactIntlNext = require("react-intl-next");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right"));
@@ -39,7 +37,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var expandContainer = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-bottom: 1px solid ", ";\n"])), (0, _tokens.token)('color.border', _colors.N40));
+var expandContainer = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-bottom: 1px solid ", ";\n"])), "var(--ds-border, ".concat(_colors.N40, ")"));
 exports.expandContainer = expandContainer;
 var expandControl = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: ", "px;\n  justify-content: center;\n  padding-right: ", "px;\n"])), (0, _constants.gridSize)() * 6, (0, _constants.gridSize)());
 exports.expandControl = expandControl;

package/dist/cjs/ui/ConfigPanel/Fields/Fieldset.js

@@ -45,16 +45,12 @@ var _addCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/add-circle
 
 var _messages = require("../messages");
 
-var _FormContent = _interopRequireDefault(require("../FormContent"));
-
 var _utils = require("../utils");
 
 var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -69,7 +65,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var actionsWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-top: 1px solid ", ";\n  margin-top: ", "px;\n  padding-top: ", "px;\n"])), (0, _tokens.token)('color.border', _colors.N40A), (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 2);
+var actionsWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-top: 1px solid ", ";\n  margin-top: ", "px;\n  padding-top: ", "px;\n"])), "var(--ds-border, ".concat(_colors.N40A, ")"), (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 2);
 
 var populateFromParameters = function populateFromParameters(parameters, fields) {
   if (Object.keys(parameters).length) {
@@ -291,7 +287,8 @@ var FieldsetField = /*#__PURE__*/function (_React$Component) {
           extensionManifest = _this$props.extensionManifest,
           onFieldChange = _this$props.onFieldChange,
           firstVisibleFieldName = _this$props.firstVisibleFieldName,
-          error = _this$props.error;
+          error = _this$props.error,
+          FormComponent = _this$props.formComponent;
       var label = field.label,
           options = field.options;
       var _this$state3 = this.state,
@@ -301,7 +298,7 @@ var FieldsetField = /*#__PURE__*/function (_React$Component) {
       var children = this.renderActions();
       return (0, _react2.jsx)(_react.Fragment, null, error && (0, _react2.jsx)(FieldsetError, {
         message: error
-      }), (0, _react2.jsx)("div", null, options.showTitle && (0, _react2.jsx)("h5", null, label), (0, _react2.jsx)(_FormContent.default, {
+      }), (0, _react2.jsx)("div", null, options.showTitle && (0, _react2.jsx)("h5", null, label), (0, _react2.jsx)(FormComponent, {
         fields: selectedFields,
         parentName: name,
         extensionManifest: extensionManifest,

package/dist/cjs/ui/ConfigPanel/Fields/common/RequiredIndicator.js

@@ -13,9 +13,7 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
 
-var requiredIndicator = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), (0, _tokens.token)('color.text.danger', _colors.R500));
+var requiredIndicator = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), "var(--ds-text-danger, ".concat(_colors.R500, ")"));
 exports.requiredIndicator = requiredIndicator;

package/dist/cjs/ui/ConfigPanel/FormContent.js

@@ -152,7 +152,8 @@ function FieldComponent(_ref) {
         onFieldChange: onFieldChange,
         extensionManifest: extensionManifest,
         parameters: defaultValue || {},
-        error: error
+        error: error,
+        formComponent: FormContent
       });
 
     case 'user':

package/dist/cjs/ui/ConfigPanel/Header.js

@@ -25,8 +25,6 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _messages = require("./messages");
@@ -38,10 +36,10 @@ var buttonWidth = 40;
 var margin = 16;
 var gapSizeForEllipsis = iconWidth + buttonWidth + margin * 2;
 var item = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-bottom: 24px;\n"])));
-var itemIcon = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  height: ", "px;\n  overflow: hidden;\n  border: 1px solid ", "; /* N60 at 50% */\n  border-radius: ", "px;\n  box-sizing: border-box;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  div {\n    width: ", "px;\n    height: ", "px;\n  }\n"])), iconWidth, iconWidth, (0, _tokens.token)('color.border', 'rgba(223, 225, 229, 0.5)'), (0, _constants.borderRadius)(), iconWidth, iconWidth);
+var itemIcon = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  height: ", "px;\n  overflow: hidden;\n  border: 1px solid ", "; /* N60 at 50% */\n  border-radius: ", "px;\n  box-sizing: border-box;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  div {\n    width: ", "px;\n    height: ", "px;\n  }\n"])), iconWidth, iconWidth, "var(--ds-border, rgba(223, 225, 229, 0.5))", (0, _constants.borderRadius)(), iconWidth, iconWidth);
 var itemBody = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  line-height: 1.4;\n  margin: 0 16px;\n  flex-grow: 3;\n  max-width: calc(100% - ", "px);\n"])), gapSizeForEllipsis);
 var centeredItemTitle = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
-var itemText = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  max-width: 100%;\n  white-space: initial;\n  .item-summary {\n    font-size: ", ";\n    color: ", ";\n    margin-top: 4px;\n\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)(11.67), (0, _tokens.token)('color.text.subtlest', _colors.N200));
+var itemText = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  max-width: 100%;\n  white-space: initial;\n  .item-summary {\n    font-size: ", ";\n    color: ", ";\n    margin-top: 4px;\n\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)(11.67), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"));
 var descriptionStyle = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: 24px;\n"])));
 var closeButtonWrapper = (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  text-align: right;\n"])), buttonWidth);
 

package/dist/cjs/ui/ConfigPanel/NestedForms/RemovableField.js

@@ -23,15 +23,13 @@ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _messages = require("../messages");
 
 var _templateObject, _templateObject2, _templateObject3;
 
 var removableFieldWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  margin-bottom: 0;\n"])));
 var wrapperWithMarginBottom = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: ", "px;\n"])), (0, _constants.gridSize)() * 2);
-var removeButtonWrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: 0;\n  top: 0;\n  cursor: pointer;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"])), (0, _tokens.token)('color.icon.subtle', _colors.N80), (0, _tokens.token)('color.icon.danger', _colors.R300));
+var removeButtonWrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: 0;\n  top: 0;\n  cursor: pointer;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"])), "var(--ds-icon-subtle, ".concat(_colors.N80, ")"), "var(--ds-icon-danger, ".concat(_colors.R300, ")"));
 
 var RemovableField = function RemovableField(_ref) {
   var _children$props$field;

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

@@ -19,8 +19,6 @@ var _styles = require("@atlaskit/editor-common/styles");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _styles2 = require("../../plugins/unsupported-content/styles");
 
 var _styles3 = require("../../plugins/collab-edit/styles");
@@ -88,9 +86,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var contentStyles = function contentStyles(props) {
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    outline: none;\n    font-size: ", "px;\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n    pointer-events: none;\n    opacity: 0.7;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection *::-moz-selection {\n    background: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: none;\n  }\n\n  .ProseMirror-selectednode:empty {\n    outline: 2px solid ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n    box-sizing: border-box;\n  }\n\n  .mediaGroupView-content-wrap ul {\n    padding: 0;\n  }\n\n  /** Needed to override any cleared floats, e.g. image wrapping */\n\n  div.fabric-editor-block-mark[class^='fabric-editor-align'] {\n    clear: none !important;\n  }\n\n  .fabric-editor-align-end {\n    text-align: right;\n  }\n\n  .fabric-editor-align-start {\n    text-align: left;\n  }\n\n  .fabric-editor-align-center {\n    text-align: center;\n  }\n\n  .pm-table-header-content-wrap,\n  .pm-table-cell-content-wrap div.fabric-editor-block-mark {\n    p:first-of-type {\n      margin-top: 0;\n    }\n  }\n\n  .hyperlink-floating-toolbar,\n  .", " {\n    padding: 0;\n  }\n\n  /* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n  .hyperlink-open-link {\n    svg {\n      max-width: 18px;\n    }\n    &[href] {\n      padding: 0 4px;\n    }\n  }\n"])), (0, _editorSharedStyles.editorFontSize)({
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    outline: none;\n    font-size: ", "px;\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n    pointer-events: none;\n    opacity: 0.7;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection *::-moz-selection {\n    background: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: none;\n  }\n\n  .ProseMirror-selectednode:empty {\n    outline: 2px solid ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n    box-sizing: border-box;\n  }\n\n  .mediaGroupView-content-wrap ul {\n    padding: 0;\n  }\n\n  /** Needed to override any cleared floats, e.g. image wrapping */\n\n  div.fabric-editor-block-mark[class^='fabric-editor-align'] {\n    clear: none !important;\n  }\n\n  .fabric-editor-align-end {\n    text-align: right;\n  }\n\n  .fabric-editor-align-start {\n    text-align: left;\n  }\n\n  .fabric-editor-align-center {\n    text-align: center;\n  }\n\n  .pm-table-header-content-wrap :not(.fabric-editor-alignment),\n  .pm-table-header-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark,\n  .pm-table-cell-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark {\n    p:first-of-type {\n      margin-top: 0;\n    }\n  }\n\n  .hyperlink-floating-toolbar,\n  .", " {\n    padding: 0;\n  }\n\n  /* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n  .hyperlink-open-link {\n    svg {\n      max-width: 18px;\n    }\n    &[href] {\n      padding: 0 4px;\n    }\n  }\n"])), (0, _editorSharedStyles.editorFontSize)({
     theme: props.theme
-  }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _tokens.token)('color.border.focused', '#8cf'), _styles17.placeholderTextStyles, _styles5.placeholderStyles, (0, _styles7.codeBlockStyles)(props), (0, _styles6.blocktypeStyles)(props), (0, _styles16.textFormattingStyles)(props), _styles.textColorStyles, _styles8.listsStyles, (0, _styles9.ruleStyles)(props), _styles10.mediaStyles, _styles11.layoutStyles, _styles3.telepointerStyle, _styles4.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _styles12.panelStyles)(props), _styles13.fakeCursorStyles, _styles14.mentionsStyles, _styles15.emojiStyles, _styles.tasksAndDecisionsStyles, _styles18.gridStyles, _styles19.linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _styles20.extensionStyles, (0, _styles21.expandStyles)(props), _styles22.findReplaceStyles, _styles23.taskDecisionStyles, _styles24.statusStyles, (0, _styles.annotationSharedStyles)(props), _styles25.smartCardStyles, _styles.smartCardSharedStyles, _styles26.dateStyles, _styled.embedCardStyles, _styles2.unsupportedStyles, _style.ClassNames.FLOATING_TOOLBAR_COMPONENT);
+  }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", _styles17.placeholderTextStyles, _styles5.placeholderStyles, (0, _styles7.codeBlockStyles)(props), (0, _styles6.blocktypeStyles)(props), (0, _styles16.textFormattingStyles)(props), _styles.textColorStyles, _styles8.listsStyles, (0, _styles9.ruleStyles)(props), _styles10.mediaStyles, _styles11.layoutStyles, _styles3.telepointerStyle, _styles4.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _styles12.panelStyles)(props), _styles13.fakeCursorStyles, _styles14.mentionsStyles, _styles15.emojiStyles, _styles.tasksAndDecisionsStyles, _styles18.gridStyles, _styles19.linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _styles20.extensionStyles, (0, _styles21.expandStyles)(props), _styles22.findReplaceStyles, _styles23.taskDecisionStyles, _styles24.statusStyles, (0, _styles.annotationSharedStyles)(props), _styles25.smartCardStyles, _styles.smartCardSharedStyles, _styles26.dateStyles, _styled.embedCardStyles, _styles2.unsupportedStyles, _style.ClassNames.FLOATING_TOOLBAR_COMPONENT);
 };
 
 var createEditorContentStyle = function createEditorContentStyle(styles) {

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

@@ -47,8 +47,6 @@ var _WithEditorActions = _interopRequireDefault(require("../WithEditorActions"))
 
 var _document = require("../../utils/document");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 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; }
@@ -79,7 +77,7 @@ var shouldPanelBePositionedOverEditor = function shouldPanelBePositionedOverEdit
 
 exports.shouldPanelBePositionedOverEditor = shouldPanelBePositionedOverEditor;
 var panelHidden = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 0;\n"])));
-var panel = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  height: 100%;\n  transition: width ", "ms ", ";\n  overflow: hidden;\n  box-shadow: inset 2px 0 0 0 ", ";\n"])), _editorSharedStyles.akEditorContextPanelWidth, ANIM_SPEED_MS, _editorSharedStyles.akEditorSwoopCubicBezier, (0, _tokens.token)('color.border', _colors.N30));
+var panel = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  height: 100%;\n  transition: width ", "ms ", ";\n  overflow: hidden;\n  box-shadow: inset 2px 0 0 0 ", ";\n"])), _editorSharedStyles.akEditorContextPanelWidth, ANIM_SPEED_MS, _editorSharedStyles.akEditorSwoopCubicBezier, "var(--ds-border, ".concat(_colors.N30, ")"));
 exports.panel = panel;
 var content = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  transition: width 600ms ", ";\n  box-sizing: border-box;\n  padding: 16px 16px 0px;\n  width: ", "px;\n  height: 100%;\n  overflow-y: auto;\n"])), _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorContextPanelWidth);
 exports.content = content;

package/dist/cjs/ui/ElementBrowser/InsertMenu.js

@@ -43,8 +43,6 @@ var _ElementBrowserLoader = _interopRequireDefault(require("./components/Element
 
 var _constants = require("./constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _excluded = ["children"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
@@ -184,9 +182,9 @@ var insertMenuWrapper = function insertMenuWrapper(theme, itemCount) {
   return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  width: 320px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n"])), getInsertMenuHeight({
     itemCount: itemCount
   }), (0, _components.themed)({
-    light: (0, _tokens.token)('elevation.surface.overlay', _colors.N0),
-    dark: (0, _tokens.token)('elevation.surface.overlay', _colors.DN50)
-  })(theme), (0, _theme.borderRadius)(), (0, _tokens.token)('elevation.shadow.overlay', "0 0 0 1px ".concat(_colors.N30A, ",\n    0 2px 1px ").concat(_colors.N30A, ",\n    0 0 20px -6px ").concat(_colors.N60A)));
+    light: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-surface-overlay, ".concat(_colors.DN50, ")")
+  })(theme), (0, _theme.borderRadius)(), "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(_colors.N30A, ",\n    0 2px 1px ").concat(_colors.N30A, ",\n    0 0 20px -6px ").concat(_colors.N60A), ")"));
 };
 
 var itemBefore = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 40px;\n  height: 40px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-right: ", "px;\n"])), (0, _theme.gridSize)() / 2);

package/dist/cjs/ui/ElementBrowser/ModalElementBrowser.js

@@ -39,8 +39,6 @@ var _constants2 = require("./constants");
 
 var _messages = require("./messages");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -50,8 +48,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var actions = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  margin: 0 -4px;\n"])));
 var actionItem = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 0 auto;\n  margin: 0 4px;\n"])));
 var wrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1 1 auto;\n  box-sizing: border-box;\n  padding: ", "px ", "px 0 10px;\n  overflow: hidden;\n  background-color: ", ";\n  border-radius: ", "px;\n"])), _constants2.MODAL_WRAPPER_PADDING, _constants2.MODAL_WRAPPER_PADDING, (0, _components.themed)({
-  light: (0, _tokens.token)('elevation.surface.overlay', _colors.N0),
-  dark: (0, _tokens.token)('elevation.surface.overlay', _colors.DN50)
+  light: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
+  dark: "var(--ds-surface-overlay, ".concat(_colors.DN50, ")")
 })(), (0, _constants.borderRadius)());
 var modalFooter = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: ", "px;\n\n  position: relative;\n  align-items: center;\n  justify-content: space-between;\n"])), _constants2.MODAL_WRAPPER_PADDING);
 

package/dist/cjs/ui/ElementBrowser/components/CategoryList.js

@@ -35,8 +35,6 @@ var _useFocus = _interopRequireDefault(require("../hooks/use-focus"));
 
 var _analytics = require("../../../plugins/analytics");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
 
 var _excluded = ["categories"],
@@ -117,9 +115,9 @@ function CategoryListItem(_ref2) {
         marginLeft: '2px',
         height: '100%',
         width: '100%',
-        color: category.name !== selectedCategory ? (0, _tokens.token)('color.text', _colors.N800) : (0, _tokens.token)('color.text.selected', _colors.B400)
+        color: category.name !== selectedCategory ? "var(--ds-text, ".concat(_colors.N800, ")") : "var(--ds-text-selected, ".concat(_colors.B400, ")")
       }, category.name === selectedCategory && {
-        background: (0, _tokens.token)('color.background.selected', _colors.B50)
+        background: "var(--ds-background-selected, ".concat(_colors.B50, ")")
       })
     }, rest);
   }, [category.name, selectedCategory]);

package/dist/cjs/ui/ElementBrowser/components/ElementList/ElementList.js

@@ -34,8 +34,6 @@ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _analytics = require("../../../../plugins/analytics");
@@ -277,7 +275,7 @@ var ItemContent = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
     css: itemDescription
   }, description)));
 });
-var elementItemsWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  flex-flow: row wrap;\n  align-items: flex-start;\n  justify-content: flex-start;\n  overflow: hidden;\n  padding: ", "px; // For Focus outline\n\n  .ReactVirtualized__Collection {\n    border-radius: 3px; // Standard border-radius across other components like Search or Item.\n    outline: none;\n\n    :focus {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n    }\n  }\n  .ReactVirtualized__Collection__innerScrollContainer {\n    div[class='element-item-wrapper']:last-child {\n      padding-bottom: 4px;\n    }\n  }\n"])), _constants.ELEMENT_LIST_PADDING, _constants.ELEMENT_LIST_PADDING, (0, _tokens.token)('color.border.focused', _colors.B100));
+var elementItemsWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  flex-flow: row wrap;\n  align-items: flex-start;\n  justify-content: flex-start;\n  overflow: hidden;\n  padding: ", "px; // For Focus outline\n\n  .ReactVirtualized__Collection {\n    border-radius: 3px; // Standard border-radius across other components like Search or Item.\n    outline: none;\n\n    :focus {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n    }\n  }\n  .ReactVirtualized__Collection__innerScrollContainer {\n    div[class='element-item-wrapper']:last-child {\n      padding-bottom: 4px;\n    }\n  }\n"])), _constants.ELEMENT_LIST_PADDING, _constants.ELEMENT_LIST_PADDING, "var(--ds-border-focused, ".concat(_colors.B100, ")"));
 var elementItemWrapper = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  div {\n    button {\n      height: 75px;\n      align-items: flex-start;\n      padding: 12px 12px 11px;\n    }\n  }\n"])));
 var itemBody = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  line-height: 1.4;\n  width: 100%;\n\n  margin-top: -2px; // Fixes the Item Icon and text's alignment issue\n"])));
 /*
@@ -286,7 +284,7 @@ var itemBody = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _tag
  */
 
 var multilineStyle = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n"])));
-var itemDescription = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n\n  overflow: hidden;\n  font-size: ", ";\n  color: ", ";\n  margin-top: 2px;\n"])), multilineStyle, (0, _editorSharedStyles.relativeFontSizeToBase16)(11.67), (0, _tokens.token)('color.text.subtle', _colors.N200));
+var itemDescription = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n\n  overflow: hidden;\n  font-size: ", ";\n  color: ", ";\n  margin-top: 2px;\n"])), multilineStyle, (0, _editorSharedStyles.relativeFontSizeToBase16)(11.67), "var(--ds-text-subtle, ".concat(_colors.N200, ")"));
 var itemText = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  width: inherit;\n  white-space: initial;\n"])));
 var itemTitleWrapper = (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between; // Title and keyboardshortcut are rendered in the same block\n"])));
 var itemTitle = (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  overflow: hidden;\n\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"])));

package/dist/cjs/ui/ElementBrowser/components/ElementList/EmptyState.js

@@ -17,8 +17,6 @@ var _button = _interopRequireDefault(require("@atlaskit/button"));
 
 var _NotFoundIllustration = _interopRequireDefault(require("./NotFoundIllustration"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 function EmptyState(_ref) {
@@ -51,7 +49,7 @@ function EmptyState(_ref) {
   })))));
 }
 
-var emptyStateHeading = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 1.42857em;\n  line-height: 1.2;\n  color: ", ";\n  font-weight: 500;\n  letter-spacing: -0.008em;\n  margin-top: 28px;\n"])), (0, _tokens.token)('color.text', 'rgb(23, 43, 77)'));
+var emptyStateHeading = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 1.42857em;\n  line-height: 1.2;\n  color: ", ";\n  font-weight: 500;\n  letter-spacing: -0.008em;\n  margin-top: 28px;\n"])), "var(--ds-text, rgb(23, 43, 77))");
 var emptyStateSubHeading = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 16px;\n  max-width: 400px;\n  text-align: center;\n"])));
 var emptyStateWrapper = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n"])));
 var externalLinkWrapper = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 14px;\n"])));

package/dist/cjs/ui/ElementBrowser/components/ElementSearch.js

@@ -35,8 +35,6 @@ var _types = require("../types");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -102,7 +100,7 @@ var placeHolderMessage = {
 var styledShortcut = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  padding: ", "px ", "px;\n  width: ", "px;\n"])), _styles.shortcutStyle, _constants.GRID_SIZE / 2, _constants.GRID_SIZE, _constants.GRID_SIZE * 6);
 var wrapper = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  & > [data-ds--text-field--container] {\n    height: ", "px;\n    border-radius: ", "px;\n    flex: 1 1 100%;\n    overflow: visible;\n    & > [data-ds--text-field--input] {\n      margin-bottom: 3px;\n      font-size: ", ";\n      padding: ", "px 6px ", "px 0;\n    }\n  }\n"])), _constants.GRID_SIZE * 6, _constants.GRID_SIZE, (0, _editorSharedStyles.relativeFontSizeToBase16)(14), _constants.GRID_SIZE, _constants.GRID_SIZE);
 var wrapperInline = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  & > [data-ds--text-field--container] {\n    height: ", "px;\n    flex: none;\n    overflow: revert;\n  }\n"])), _constants.GRID_SIZE * 5);
-var elementBeforeInput = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 1px 6px 0 8px;\n  color: ", ";\n\n  // Custom SearchIcon style\n  span,\n  svg {\n    height: 20px;\n    width: 20px;\n  }\n"])), (0, _tokens.token)('color.icon', _colors.N200));
+var elementBeforeInput = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 1px 6px 0 8px;\n  color: ", ";\n\n  // Custom SearchIcon style\n  span,\n  svg {\n    height: 20px;\n    width: 20px;\n  }\n"])), "var(--ds-icon, ".concat(_colors.N200, ")"));
 var elementAfterInput = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 8px;\n  height: ", ";\n  text-align: center;\n"])), _constants.SEARCH_ITEM_HEIGHT_WIDTH);
 var MemoizedElementSearchWithAnalytics = /*#__PURE__*/(0, _react.memo)((0, _analyticsNext.withAnalyticsContext)({
   component: 'Searchbar'

package/dist/cjs/ui/FloatingToolbar/styles.js

@@ -15,12 +15,10 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2;
 
 var container = function container(height) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  box-shadow: ", ";\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  padding: 4px 8px;\n  background-color: ", ";\n  ", ";\n"])), (0, _constants.borderRadius)(), (0, _tokens.token)('elevation.shadow.overlay', "0 12px 24px -6px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A)), (0, _tokens.token)('color.background.input', _colors.N0), height ? (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        height: ", "px;\n      "])), height) : '');
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  box-shadow: ", ";\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  padding: 4px 8px;\n  background-color: ", ";\n  ", ";\n"])), (0, _constants.borderRadius)(), "var(--ds-shadow-overlay, ".concat("0 12px 24px -6px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"), "var(--ds-background-input, ".concat(_colors.N0, ")"), height ? (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        height: ", "px;\n      "])), height) : '');
 };
 
 exports.container = container;

package/dist/cjs/ui/LinkSearch/LinkSearchListItem.js

@@ -31,8 +31,6 @@ var _react2 = require("@emotion/react");
 
 var _theme = require("@atlaskit/theme");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _colors = require("@atlaskit/theme/colors");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -55,12 +53,12 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 var container = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: transparent;\n  padding: 8px 12px;\n  cursor: pointer;\n  display: flex;\n  margin-top: 0;\n"])));
 exports.container = container;
-var containerSelected = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), (0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N20));
+var containerSelected = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")"));
 exports.containerSelected = containerSelected;
 var nameWrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n"])));
-var nameStyle = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 20px;\n"])), (0, _tokens.token)('color.text', _colors.N800));
+var nameStyle = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 20px;\n"])), "var(--ds-text, ".concat(_colors.N800, ")"));
 exports.nameStyle = nameStyle;
-var containerName = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  line-height: 14px;\n  font-size: ", ";\n"])), (0, _tokens.token)('color.text.subtlest', _colors.N300), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _theme.fontSizeSmall)()));
+var containerName = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  line-height: 14px;\n  font-size: ", ";\n"])), "var(--ds-text-subtlest, ".concat(_colors.N300, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _theme.fontSizeSmall)()));
 exports.containerName = containerName;
 var iconStyle = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: 16px;\n  margin-top: 3px;\n  margin-right: 12px;\n\n  img {\n    max-width: 16px;\n  }\n"])));
 

package/dist/cjs/ui/LinkSearch/ToolbarComponents.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.inputWrapper = exports.containerWithProvider = exports.container = exports.RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX = exports.RECENT_SEARCH_WIDTH_IN_PX = exports.RECENT_SEARCH_HEIGHT_IN_PX = void 0;
+exports.inputWrapper = exports.containerWithProvider = exports.container = exports.RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX = exports.RECENT_SEARCH_WIDTH_IN_PX = exports.RECENT_SEARCH_HEIGHT_IN_PX = exports.LINKPICKER_HEIGHT_IN_PX = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -19,6 +19,8 @@ var RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX = 360;
 exports.RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX = RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX;
 var RECENT_SEARCH_HEIGHT_IN_PX = 360;
 exports.RECENT_SEARCH_HEIGHT_IN_PX = RECENT_SEARCH_HEIGHT_IN_PX;
+var LINKPICKER_HEIGHT_IN_PX = 570;
+exports.LINKPICKER_HEIGHT_IN_PX = LINKPICKER_HEIGHT_IN_PX;
 var inputWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  line-height: 0;\n  padding: 5px 0;\n  align-items: center;\n"])));
 exports.inputWrapper = inputWrapper;
 var container = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  padding: 0;\n\n  width: ", "px;\n  line-height: initial;\n"])), RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX);

package/dist/cjs/ui/PanelTextInput/styles.js

@@ -15,12 +15,10 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2;
 
 // Normal .className gets overridden by input[type=text] hence this hack to produce input.className
-var panelTextInput = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  input& {\n    background: transparent;\n    border: 0;\n    border-radius: 0;\n    box-sizing: content-box;\n    color: ", ";\n    flex-grow: 1;\n    font-size: ", ";\n    line-height: 20px;\n    padding: 0;\n    min-width: 145px;\n\n    /* Hides IE10+ built-in [x] clear input button */\n    &::-ms-clear {\n      display: none;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"])), (0, _tokens.token)('color.text.subtle', _colors.N400), (0, _editorSharedStyles.relativeFontSizeToBase16)(13), (0, _tokens.token)('color.text.subtlest', _colors.N100));
+var panelTextInput = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  input& {\n    background: transparent;\n    border: 0;\n    border-radius: 0;\n    box-sizing: content-box;\n    color: ", ";\n    flex-grow: 1;\n    font-size: ", ";\n    line-height: 20px;\n    padding: 0;\n    min-width: 145px;\n\n    /* Hides IE10+ built-in [x] clear input button */\n    &::-ms-clear {\n      display: none;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"])), "var(--ds-text-subtle, ".concat(_colors.N400, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)(13), "var(--ds-text-subtlest, ".concat(_colors.N100, ")"));
 exports.panelTextInput = panelTextInput;
 
 var panelTextInputWithCustomWidth = function panelTextInputWithCustomWidth(width) {

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

@@ -37,32 +37,33 @@ exports.KeyDownHandlerContext = KeyDownHandlerContext;
 
 var ToolbarArrowKeyNavigationProvider = function ToolbarArrowKeyNavigationProvider(_ref) {
   var children = _ref.children,
-      editorView = _ref.editorView;
+      editorView = _ref.editorView,
+      childComponentSelector = _ref.childComponentSelector,
+      handleEscape = _ref.handleEscape,
+      disableArrowKeyNavigation = _ref.disableArrowKeyNavigation;
   var wrapperRef = (0, _react.useRef)(null);
-  var currentSelectedItemIndex = (0, _react.useRef)(0);
-
-  var incrementIndex = function incrementIndex(list) {
-    if (currentSelectedItemIndex.current === list.length - 1) {
-      currentSelectedItemIndex.current = 0;
+  var selectedItemIndex = (0, _react.useRef)(0);
+  var incrementIndex = (0, _react.useCallback)(function (list) {
+    if (selectedItemIndex.current === list.length - 1) {
+      selectedItemIndex.current = 0;
     } else {
-      currentSelectedItemIndex.current = currentSelectedItemIndex.current + 1;
+      selectedItemIndex.current = selectedItemIndex.current + 1;
     }
-  };
-
-  var decrementIndex = function decrementIndex(list) {
-    if (currentSelectedItemIndex.current === 0) {
-      currentSelectedItemIndex.current = list.length - 1;
+  }, []);
+  var decrementIndex = (0, _react.useCallback)(function (list) {
+    if (selectedItemIndex.current === 0) {
+      selectedItemIndex.current = list.length - 1;
     } else {
-      currentSelectedItemIndex.current = currentSelectedItemIndex.current - 1;
+      selectedItemIndex.current = selectedItemIndex.current - 1;
     }
-  };
+  }, []);
 
   var handleArrowRight = function handleArrowRight() {
     var _filteredFocusableEle;
 
     var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
     incrementIndex(filteredFocusableElements);
-    (_filteredFocusableEle = filteredFocusableElements[currentSelectedItemIndex.current]) === null || _filteredFocusableEle === void 0 ? void 0 : _filteredFocusableEle.focus();
+    (_filteredFocusableEle = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle === void 0 ? void 0 : _filteredFocusableEle.focus();
   };
 
   var handleArrowLeft = function handleArrowLeft() {
@@ -70,14 +71,23 @@ var ToolbarArrowKeyNavigationProvider = function ToolbarArrowKeyNavigationProvid
 
     var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
     decrementIndex(filteredFocusableElements);
-    (_filteredFocusableEle2 = filteredFocusableElements[currentSelectedItemIndex.current]) === null || _filteredFocusableEle2 === void 0 ? void 0 : _filteredFocusableEle2.focus();
+    (_filteredFocusableEle2 = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle2 === void 0 ? void 0 : _filteredFocusableEle2.focus();
   };
 
   var handleTab = function handleTab() {
     var _filteredFocusableEle3;
 
     var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
-    (_filteredFocusableEle3 = filteredFocusableElements[currentSelectedItemIndex.current]) === null || _filteredFocusableEle3 === void 0 ? void 0 : _filteredFocusableEle3.focus();
+    (_filteredFocusableEle3 = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle3 === void 0 ? void 0 : _filteredFocusableEle3.focus();
+  };
+
+  var focusAndScrollToElement = function focusAndScrollToElement(element) {
+    element === null || element === void 0 ? void 0 : element.scrollIntoView({
+      behavior: 'smooth',
+      block: 'center',
+      inline: 'nearest'
+    });
+    element.focus();
   };
 
   var submenuKeydownHandleContext = {
@@ -86,7 +96,7 @@ var ToolbarArrowKeyNavigationProvider = function ToolbarArrowKeyNavigationProvid
     handleTab: handleTab
   };
   (0, _react.useLayoutEffect)(function () {
-    if (!wrapperRef.current) {
+    if (!wrapperRef.current || disableArrowKeyNavigation) {
       return;
     }
 
@@ -97,17 +107,17 @@ var ToolbarArrowKeyNavigationProvider = function ToolbarArrowKeyNavigationProvid
      */
 
     var handleKeyDown = function handleKeyDown(event) {
-      var _document$querySelect, _wrapperRef$current, _filteredFocusableEle4;
+      var _document$querySelect, _document$querySelect2, _wrapperRef$current;
 
-      //To trap the focus inside the horizontal main toolbar for left and right arrow keys
-      var targetElement = event.target; //To filter out the events outside the main toolbar
+      //To trap the focus inside the horizontal toolbar for left and right arrow keys
+      var targetElement = event.target; //To filter out the events outside the child component
 
-      if (!targetElement.closest("[data-testid='ak-editor-main-toolbar']")) {
+      if (!targetElement.closest("".concat(childComponentSelector))) {
         return;
       } //The key events are from child components such as dropdown menus / popups are ignored
 
 
-      if ((_document$querySelect = document.querySelector('[data-role="droplistContent"], [data-test-id="color-picker-menu"], [data-emoji-picker-container="true"]')) !== null && _document$querySelect !== void 0 && _document$querySelect.contains(targetElement) || event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+      if ((_document$querySelect = document.querySelector('[data-role="droplistContent"], [data-test-id="color-picker-menu"], [data-emoji-picker-container="true"]')) !== null && _document$querySelect !== void 0 && _document$querySelect.contains(targetElement) || (_document$querySelect2 = document.querySelector('[data-test-id="color-picker-menu"]')) !== null && _document$querySelect2 !== void 0 && _document$querySelect2.contains(targetElement) || event.key === 'ArrowUp' || event.key === 'ArrowDown' || disableArrowKeyNavigation) {
         return;
       }
 
@@ -120,25 +130,37 @@ var ToolbarArrowKeyNavigationProvider = function ToolbarArrowKeyNavigationProvid
 
 
       if (!((_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(targetElement))) {
-        currentSelectedItemIndex.current = -1;
+        selectedItemIndex.current = -1;
       } else {
-        currentSelectedItemIndex.current = filteredFocusableElements.indexOf(targetElement) > -1 ? filteredFocusableElements.indexOf(targetElement) : currentSelectedItemIndex.current;
+        selectedItemIndex.current = filteredFocusableElements.indexOf(targetElement) > -1 ? filteredFocusableElements.indexOf(targetElement) : selectedItemIndex.current;
       }
 
-      if (event.key === 'ArrowRight') {
-        incrementIndex(filteredFocusableElements);
-      } else if (event.key === 'ArrowLeft') {
-        decrementIndex(filteredFocusableElements);
-      }
+      switch (event.key) {
+        case 'ArrowRight':
+          incrementIndex(filteredFocusableElements);
+          focusAndScrollToElement(filteredFocusableElements[selectedItemIndex.current]);
+          event.preventDefault();
+          break;
+
+        case 'ArrowLeft':
+          decrementIndex(filteredFocusableElements);
+          focusAndScrollToElement(filteredFocusableElements[selectedItemIndex.current]);
+          event.preventDefault();
+          break;
 
-      (_filteredFocusableEle4 = filteredFocusableElements[currentSelectedItemIndex.current]) === null || _filteredFocusableEle4 === void 0 ? void 0 : _filteredFocusableEle4.focus();
+        case 'Escape':
+          handleEscape(event);
+          break;
+
+        default:
+      }
     };
 
     element === null || element === void 0 ? void 0 : element.addEventListener('keydown', handleKeyDown);
     return function () {
       element === null || element === void 0 ? void 0 : element.removeEventListener('keydown', handleKeyDown);
     };
-  }, [currentSelectedItemIndex, wrapperRef, editorView]);
+  }, [selectedItemIndex, wrapperRef, editorView, disableArrowKeyNavigation, handleEscape, childComponentSelector, incrementIndex, decrementIndex]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "custom-key-handler-wrapper",
     ref: wrapperRef
@@ -161,6 +183,6 @@ function getFocusableElements(rootNode) {
 function getFilteredFocusableElements(rootNode) {
   //The focusable elements from child components such as dropdown menus / popups are ignored
   return getFocusableElements(rootNode).filter(function (elm) {
-    return !elm.closest('[data-role="droplistContent"]') && !elm.closest('[data-emoji-picker-container="true"]') && !elm.closest('[data-test-id="color-picker-menu"]');
+    return !elm.closest('[data-role="droplistContent"]') && !elm.closest('[data-emoji-picker-container="true"]') && !elm.closest('[data-test-id="color-picker-menu"]') && !elm.closest('.scroll-buttons');
   });
 }