@atlaskit/editor-common 78.11.4 → 78.11.6

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

@@ -14,8 +14,8 @@ var _ui = require("../../ui");
 var _templateObject;
 /** @jsx jsx */
 /* eslint-disable no-console */
-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); }
-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; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /*
  **  The context is used to handle the keydown events of submenus.
  **  Because the keyboard navigation is explicitly managed for main toolbar items

package/dist/cjs/ui-menu/ToolbarButton/index.js

@@ -18,8 +18,8 @@ var _templateObject; // This file is copied to `packages/editor/editor-plugin-ai
 // If you make any change here, copy it to above file as well
 // and notify about the change in #team-fc-editor-ai-dev channel.
 /** @jsx jsx */
-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); }
-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; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var TOOLBAR_BUTTON = exports.TOOLBAR_BUTTON = _analytics.TOOLBAR_ACTION_SUBJECT_ID;

package/dist/cjs/ui-menu/index.js

@@ -92,5 +92,5 @@ var _ColorPaletteArrowKeyNavigationProvider = require("./ArrowKeyNavigationProvi
 var _Dropdown = _interopRequireDefault(require("./Dropdown"));
 var _ColorPickerButton = _interopRequireDefault(require("./ColorPickerButton"));
 var _DropdownContainer = require("./DropdownContainer");
-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); }
-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; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/dist/cjs/ui-react/with-react-editor-view-outer-listeners.js

@@ -19,10 +19,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _ReactEditorViewContext = _interopRequireDefault(require("./ReactEditorViewContext"));
 var _excluded = ["handleClickOutside", "handleEnterKeydown", "handleEscapeKeydown", "closeOnTab"];
-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); }
-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; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 // This needs exporting to be used alongisde `withReactEditorViewOuterListeners`
 var WithOutsideClick = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(WithOutsideClick, _PureComponent);

package/dist/cjs/utils/imageLoader.js

@@ -15,10 +15,10 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
-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); }
-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; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var withImageLoader = exports.withImageLoader = function withImageLoader(Wrapped) {
   return /*#__PURE__*/function (_Component) {
     (0, _inherits2.default)(WithImageLoader, _Component);

package/dist/cjs/with-plugin-state/index.js

@@ -20,7 +20,7 @@ var _utils = require("../utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var DEFAULT_SAMPLING_RATE = 100;
 var DEFAULT_SLOW_THRESHOLD = 4;
 

package/dist/es2019/analytics/types/enums.js

@@ -164,6 +164,7 @@ export let INPUT_METHOD = /*#__PURE__*/function (INPUT_METHOD) {
   INPUT_METHOD["TYPEAHEAD"] = "typeAhead";
   INPUT_METHOD["DATASOURCE"] = "datasource_config";
   INPUT_METHOD["TABLE_CONTEXT_MENU"] = "tableContextMenu";
+  INPUT_METHOD["MOUSE"] = "mouse";
   return INPUT_METHOD;
 }({});
 export let TRIGGER_METHOD = /*#__PURE__*/function (TRIGGER_METHOD) {

package/dist/es2019/analytics/types/table-events.js

@@ -23,6 +23,7 @@ export let TABLE_ACTION = /*#__PURE__*/function (TABLE_ACTION) {
   TABLE_ACTION["FIXED"] = "fixed";
   TABLE_ACTION["RESIZED"] = "resized";
   TABLE_ACTION["RESIZE_PERF_SAMPLING"] = "resizePerfSampling";
+  TABLE_ACTION["COLUMN_RESIZED"] = "columnResized";
   TABLE_ACTION["OVERFLOW_CHANGED"] = "overflowChanged";
   TABLE_ACTION["INITIAL_OVERFLOW_CAPTURED"] = "initialOverflowCaptured";
   TABLE_ACTION["MOVED_ROW"] = "movedRow";

package/dist/es2019/card/MediaAndEmbedsToolbar/index.js

@@ -16,6 +16,7 @@ import { alignAttributes, isInLayoutColumn, nonWrappedLayouts } from '../../util
 
 // Workaround as we don't want to import this package into `editor-common`
 // We'll get type errors if this gets out of sync with `editor-plugin-width`.
+
 export const alignmentIcons = [{
   id: 'editor.media.alignLeft',
   value: 'align-start',

package/dist/es2019/collab/index.js

@@ -5,8 +5,10 @@ import * as themeColors from '@atlaskit/theme/colors';
 
 // Format of the payload returned by the callback function passed to the collab provider
 // that gets called when syncing with the back-end service fails.
+
 // Format of the document and its metadata returned from the collab provider
 // after editing and for draft sync
+
 // Provider Errors
 // Emitted errors
 export let PROVIDER_ERROR_CODE = /*#__PURE__*/function (PROVIDER_ERROR_CODE) {
@@ -130,48 +132,44 @@ export const colors = [themeColors.R100, themeColors.R300, themeColors.R500, the
   solid,
   selection: hexToRgba(solid, 0.2)
 }));
-const telepointerColorStyle = (color, index) => `
-  &.color-${index} {
-    background-color: ${color.selection};
-    &::after {
-      background-color: ${color.solid};
-      color: ${"var(--ds-text-inverse, #fff)"};
-      border-color: ${color.solid};
-    }
-  }
-`;
 export const TELEPOINTER_DIM_CLASS = 'telepointer-dim';
-export const telepointerStyle = css`
-  .ProseMirror .telepointer {
-    position: relative;
-    transition: opacity 200ms;
-
-    &.telepointer-selection {
-      line-height: 1.2;
-      pointer-events: none;
-      user-select: none;
+export const telepointerStyle = css({
+  '.ProseMirror .telepointer': {
+    position: 'relative',
+    transition: 'opacity 200ms',
+    '&.telepointer-selection': {
+      lineHeight: 1.2,
+      pointerEvents: 'none',
+      userSelect: 'none'
+    },
+    '&.telepointer-selection-badge::after': {
+      content: 'attr(data-initial)',
+      position: 'absolute',
+      display: 'block',
+      // Disable top: -14px since it is necessary to align to cursor
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      top: '-14px',
+      fontSize: relativeFontSizeToBase16(9),
+      padding: "var(--ds-space-025, 2px)",
+      color: "var(--ds-text-inverse, white)",
+      left: '0px',
+      borderRadius: '2px 2px 2px 0',
+      lineHeight: 'initial'
+    },
+    [`&.${TELEPOINTER_DIM_CLASS}`]: {
+      opacity: 0.2
     }
-
-    &.telepointer-selection-badge::after {
-      content: attr(data-initial);
-      position: absolute;
-      display: block;
-      top: -14px;
-      font-size: ${relativeFontSizeToBase16(9)};
-      padding: ${"var(--ds-space-025, 2px)"};
-      color: ${"var(--ds-text-inverse, white)"};
-      left: -1px;
-      border-radius: 2px 2px 2px 0;
-      line-height: initial;
-    }
-
-    &.${TELEPOINTER_DIM_CLASS} {
-      opacity: 0.2;
+  }
+}, ...colors.map((color, index) => ({
+  [`&.color-${index}`]: {
+    backgroundColor: color.selection,
+    '&::after': {
+      backgroundColor: color.solid,
+      color: "var(--ds-text-inverse, #fff)",
+      borderColor: color.solid
     }
-
-    ${colors.map((color, index) => telepointerColorStyle(color, index))};
   }
-`;
+})));
 const tintKey = 'collab:isDirtyTransaction';
 export const isDirtyTransaction = tr => {
   return Boolean(tr.getMeta(tintKey));

package/dist/es2019/element-browser/components/ElementList/ElementList.js

@@ -22,23 +22,21 @@ import EmptyState from './EmptyState';
 import { getColumnCount, getScrollbarWidth } from './utils';
 export const ICON_HEIGHT = 40;
 export const ICON_WIDTH = 40;
-export const itemIcon = css`
-  width: ${ICON_WIDTH}px;
-  height: ${ICON_HEIGHT}px;
-  overflow: hidden;
-  border: 1px solid ${"var(--ds-border, rgba(223, 225, 229, 0.5))"}; /* N60 at 50% */
-  border-radius: ${borderRadius()}px;
-  box-sizing: border-box;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  div {
-    width: ${ICON_WIDTH}px;
-    height: ${ICON_HEIGHT}px;
+export const itemIcon = css({
+  width: `${ICON_WIDTH}px`,
+  height: `${ICON_HEIGHT}px`,
+  overflow: 'hidden',
+  border: `1px solid ${"var(--ds-border, rgba(223, 225, 229, 0.5))"}`,
+  borderRadius: `${borderRadius()}px`,
+  boxSizing: 'border-box',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  div: {
+    width: `${ICON_WIDTH}px`,
+    height: `${ICON_HEIGHT}px`
   }
-`;
+});
 function ElementList({
   items,
   mode,
@@ -230,95 +228,86 @@ const ItemContent = /*#__PURE__*/memo(({
 }, keyshortcut))), description && jsx("p", {
   css: itemDescription
 }, description))));
-const elementItemsWrapper = css`
-  flex: 1;
-  flex-flow: row wrap;
-  align-items: flex-start;
-  justify-content: flex-start;
-  overflow: hidden;
-  padding: ${ELEMENT_LIST_PADDING}px; // For Focus outline
-
-  .ReactVirtualized__Collection {
-    border-radius: 3px; // Standard border-radius across other components like Search or Item.
-    outline: none;
-
-    :focus {
-      box-shadow: 0 0 0 ${ELEMENT_LIST_PADDING}px
-        ${`var(--ds-border-focused, ${B100})`};
+const elementItemsWrapper = css({
+  flex: 1,
+  flexFlow: 'row wrap',
+  alignItems: 'flex-start',
+  justifyContent: 'flex-start',
+  overflow: 'hidden',
+  padding: "var(--ds-space-025, 2px)",
+  '.ReactVirtualized__Collection': {
+    borderRadius: '3px',
+    outline: 'none',
+    ':focus': {
+      boxShadow: `0 0 0 ${ELEMENT_LIST_PADDING}px ${`var(--ds-border-focused, ${B100})`}`
     }
-  }
-  .ReactVirtualized__Collection__innerScrollContainer {
-    div[class='element-item-wrapper']:last-child {
-      padding-bottom: ${"var(--ds-space-050, 4px)"};
+  },
+  '.ReactVirtualized__Collection__innerScrollContainer': {
+    "div[class='element-item-wrapper']:last-child": {
+      paddingBottom: "var(--ds-space-050, 4px)"
     }
   }
-`;
-const elementItemWrapper = css`
-  div {
-    button {
-      height: 75px;
-      align-items: flex-start;
-      padding: ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-150, 12px)"} 11px;
+});
+const elementItemWrapper = css({
+  div: {
+    button: {
+      height: '75px',
+      alignItems: 'flex-start',
+      padding: "var(--ds-space-150, 12px)"
     }
   }
-`;
-const itemBody = css`
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  line-height: 1.4;
-  width: 100%;
-
-  margin-top: ${"var(--ds-space-negative-025, -2px)"}; // Fixes the Item Icon and text's alignment issue
-`;
+});
+const itemBody = css({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'nowrap',
+  justifyContent: 'space-between',
+  lineHeight: 1.4,
+  width: '100%',
+  marginTop: "var(--ds-space-negative-025, -2px)"
+});
 
 /*
  * -webkit-line-clamp is also supported by firefox 🎉
  * https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/68#CSS
  */
-const multilineStyle = css`
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-`;
-const itemDescription = css`
-  ${multilineStyle};
-
-  overflow: hidden;
-  font-size: ${relativeFontSizeToBase16(11.67)};
-  color: ${`var(--ds-text-subtle, ${N200})`};
-  margin-top: ${"var(--ds-space-025, 2px)"};
-`;
-const itemText = css`
-  width: inherit;
-  white-space: initial;
-`;
-const itemTitleWrapper = css`
-  display: flex;
-  justify-content: space-between; // Title and keyboardshortcut are rendered in the same block
-`;
-const itemTitle = css`
-  width: 100%;
-  overflow: hidden;
-
-  white-space: nowrap;
-  text-overflow: ellipsis;
-`;
-const itemAfter = css`
-  flex: 0 0 auto;
-
-  // Prevents item from being cut off due to negative margin
-  padding-top: ${"var(--ds-space-025, 2px)"};
-  margin-bottom: ${"var(--ds-space-negative-025, -2px)"};
-`;
-const itemIconStyle = css`
-  img {
-    height: 40px;
-    width: 40px;
-    object-fit: cover;
+const multilineStyle = css({
+  display: '-webkit-box',
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: 'vertical'
+});
+const itemDescription = css(multilineStyle, {
+  overflow: 'hidden',
+  fontSize: relativeFontSizeToBase16(11.67),
+  color: `var(--ds-text-subtle, ${N200})`,
+  marginTop: "var(--ds-space-025, 2px)"
+});
+const itemText = css({
+  width: 'inherit',
+  whiteSpace: 'initial'
+});
+const itemTitleWrapper = css({
+  display: 'flex',
+  justifyContent: 'space-between'
+});
+const itemTitle = css({
+  width: '100%',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis'
+});
+const itemAfter = css({
+  flex: '0 0 auto',
+  paddingTop: "var(--ds-space-025, 2px)",
+  marginBottom: "var(--ds-space-negative-025, -2px)"
+});
+const itemIconStyle = css({
+  img: {
+    height: '40px',
+    width: '40px',
+    objectFit: 'cover'
   }
-`;
+});
 const MemoizedElementListWithAnalytics = /*#__PURE__*/memo(withAnalyticsContext({
   component: 'ElementList'
 })(ElementList));

package/dist/es2019/element-browser/components/ElementList/EmptyState.js

@@ -2,6 +2,7 @@
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button';
+import { Box, xcss } from '@atlaskit/primitives';
 import NotFoundIllustration from './NotFoundIllustration';
 export default function EmptyState({
   onExternalLinkClick
@@ -21,8 +22,8 @@ export default function EmptyState({
     id: "fabric.editor.elementbrowser.search.empty-state.sub-heading",
     defaultMessage: "Try searching with a different term or discover new apps for Atlassian products.",
     description: "Empty state sub-heading"
-  })), jsx("div", {
-    css: externalLinkWrapper
+  })), jsx(Box, {
+    xcss: externalLinkWrapper
   }, jsx(Button, {
     appearance: "primary",
     target: "_blank",
@@ -40,7 +41,7 @@ const emptyStateHeading = css({
   color: "var(--ds-text, rgb(23, 43, 77))",
   fontWeight: 500,
   letterSpacing: '-0.008em',
-  marginTop: '28px'
+  marginTop: "var(--ds-space-300, 24px)"
 });
 const emptyStateSubHeading = css({
   marginTop: "var(--ds-space-200, 16px)",
@@ -54,6 +55,6 @@ const emptyStateWrapper = css({
   alignItems: 'center',
   width: '100%'
 });
-const externalLinkWrapper = css({
-  marginTop: '14px'
+const externalLinkWrapper = xcss({
+  marginTop: "var(--ds-space-150, 12px)"
 });

package/dist/es2019/element-browser/components/ElementSearch.js

@@ -114,8 +114,8 @@ function ElementSearch({
   }, assistiveMessage));
 }
 const styledShortcut = css(shortcutStyle, {
-  padding: `${GRID_SIZE / 2}px ${GRID_SIZE}px`,
-  width: `${GRID_SIZE * 6}px`
+  padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"}`,
+  width: "var(--ds-space-600, 48px)"
 });
 const wrapper = css({
   '& > [data-ds--text-field--container]': {
@@ -124,9 +124,8 @@ const wrapper = css({
     flex: '1 1 100%',
     overflow: 'visible',
     '& > [data-ds--text-field--input]': {
-      marginBottom: '3px',
       fontSize: relativeFontSizeToBase16(14),
-      padding: `${GRID_SIZE}px ${"var(--ds-space-075, 6px)"} ${GRID_SIZE}px 0`
+      padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-075, 6px)"} ${"var(--ds-space-100, 8px)"} 0`
     }
   }
 });

package/dist/es2019/extensibility/Extension/Extension/styles.js

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
-import { padding, wrapperDefault } from '../styles';
+import { wrapperDefault } from '../styles';
 export const widerLayoutClassName = 'wider-layout';
 export const wrapperStyle = css(wrapperDefault, {
   '&.without-frame': {
@@ -13,7 +13,7 @@ export const wrapperStyle = css(wrapperDefault, {
   }
 });
 export const header = css({
-  padding: `${padding / 2}px ${padding / 2}px 0px`,
+  padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-050, 4px)"} 0px`,
   verticalAlign: 'middle',
   '&.with-children:not(.without-frame)': {
     padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"}`
@@ -23,7 +23,7 @@ export const header = css({
   }
 });
 export const content = css({
-  padding: `${padding}px`,
+  padding: "var(--ds-space-100, 8px)",
   background: "var(--ds-surface, white)",
   border: `1px solid ${`var(--ds-border, ${N30})`}`,
   borderRadius: "var(--ds-border-radius, 3px)",
@@ -31,7 +31,7 @@ export const content = css({
   width: '100%'
 });
 export const contentWrapper = css({
-  padding: `0 ${padding}px ${padding}px`,
+  padding: `0 ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"}`,
   display: 'flex',
   justifyContent: 'center',
   '&.remove-padding': {

package/dist/es2019/extensibility/Extension/styles.js

@@ -43,7 +43,7 @@ export const placeholderFallback = css({
 export const placeholderFallbackParams = css({
   display: 'inline-block',
   maxWidth: '200px',
-  marginLeft: '5px',
+  marginLeft: "var(--ds-space-050, 4px)",
   color: `var(--ds-text-subtlest, ${N70})`,
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',

package/dist/es2019/extensibility/ExtensionComponent.js

@@ -210,7 +210,6 @@ export class ExtensionComponent extends Component {
       /** We don't want this error to block renderer */
       /** We keep rendering the default content */
     }
-
     return null;
   }
 }

package/dist/es2019/extensions/types/field-definitions.js

@@ -2,6 +2,7 @@
 //   Thereby they _always_ need a value for submission
 //
 // You can do that through `defaultValue`, or `isRequired: true`
+
 export const isFieldset = field => {
   return field.type === 'fieldset';
 };

package/dist/es2019/keymaps/index.js

@@ -90,17 +90,13 @@ const arrowKeysMap = {
   ARROWUP: '\u2191',
   ARROWDOWN: '\u2193'
 };
-const tooltipShortcutStyle = css`
-  border-radius: 2px;
-  background-color: ${`var(--ds-background-inverse-subtle, ${N400})`};
-  padding: 0 ${"var(--ds-space-025, 2px)"};
-
-  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
-  /* stylelint-disable-next-line */
-  label: tooltip-shortcut;
-`;
-/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
-
+const tooltipShortcutStyle = css({
+  borderRadius: '2px',
+  backgroundColor: `var(--ds-background-inverse-subtle, ${N400})`,
+  padding: `0 ${"var(--ds-space-025, 2px)"}`,
+  // NOTE: This might not actually do anything: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E
+  label: 'tooltip-shortcut'
+});
 function formatShortcut(keymap) {
   let shortcut;
   if (browser.mac) {

package/dist/es2019/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -30,7 +30,7 @@ export const visuallyHiddenStyles = css`
   clip-path: inset(50%);
   height: 1px;
   width: 1px;
-  margin: -1px;
+  margin: ${"var(--ds-space-negative-025, -2px)"};
   overflow: hidden;
   padding: 0;
   position: absolute;

package/dist/es2019/link/LinkSearch/LinkSearchList.js

@@ -4,20 +4,20 @@ import { css, jsx } from '@emotion/react';
 import Spinner from '@atlaskit/spinner';
 import { N30 } from '@atlaskit/theme/colors';
 import LinkSearchListItem from './LinkSearchListItem';
-const listContainer = css`
-  padding-top: 0;
-  margin-top: ${"var(--ds-space-150, 12px)"};
-  border-top: 1px solid ${`var(--ds-border, ${N30})`};
-`;
-const spinnerContainer = css`
-  text-align: center;
-  min-height: 80px;
-  margin-top: 30px;
-`;
-export const linkSearchList = css`
-  padding: 0;
-  list-style: none;
-`;
+const listContainer = css({
+  paddingTop: 0,
+  marginTop: "var(--ds-space-150, 12px)",
+  borderTop: `1px solid ${`var(--ds-border, ${N30})`}`
+});
+const spinnerContainer = css({
+  textAlign: 'center',
+  minHeight: '80px',
+  marginTop: "var(--ds-space-400, 32px)"
+});
+export const linkSearchList = css({
+  padding: 0,
+  listStyle: 'none'
+});
 export default class LinkSearchList extends PureComponent {
   render() {
     const {