@atlaskit/editor-common 78.30.0 → 78.30.2

package/dist/esm/card/LinkToolbarButtonGroup.js

@@ -1,7 +1,5 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["disabled"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
@@ -11,8 +9,12 @@ import { FloatingToolbarButton as Button } from '../ui';
 /**
  * Applying `pointer-events: none;` when disabled allows the Tooltip to be displayed
  */
-var buttonStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  pointer-events: auto;\n"])));
-var buttonStyleNoneEvent = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  pointer-events: none;\n"])));
+var buttonStyle = css({
+  pointerEvents: 'auto'
+});
+var buttonStyleNoneEvent = css({
+  pointerEvents: 'none'
+});
 var DisallowedWrapper = function DisallowedWrapper(_ref) {
   var disabled = _ref.disabled,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -23,8 +25,12 @@ var DisallowedWrapper = function DisallowedWrapper(_ref) {
  * The button requires `pointer-events: none;` in order to fix the tooltip, hence
  * leaving us without a disabled cursor, the following fixes this:
  */
-var defaultWrapperStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  cursor: pointer;\n"])));
-var disallowedWrapperStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  cursor: not-allowed;\n"])));
+var defaultWrapperStyle = css({
+  cursor: 'pointer'
+});
+var disallowedWrapperStyle = css({
+  cursor: 'not-allowed'
+});
 export var LinkToolbarButtonGroup = function LinkToolbarButtonGroup(_ref2) {
   var options = _ref2.options;
   return jsx(ButtonGroup, null, options.map(function (_ref3) {

package/dist/esm/element-browser/ViewMore.js

@@ -1,10 +1,16 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
 /** @jsx jsx */
 import { useEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { ButtonItem, Section } from '@atlaskit/menu';
-var itemBefore = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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: ", ";\n"])), "var(--ds-space-050, 4px)");
+var itemBefore = css({
+  width: '40px',
+  height: '40px',
+  boxSizing: 'border-box',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  marginRight: "var(--ds-space-050, 4px)"
+});
 export var ViewMore = function ViewMore(_ref) {
   var item = _ref.item,
     focus = _ref.focus;
@@ -25,7 +31,9 @@ export var ViewMore = function ViewMore(_ref) {
     "data-testid": "view-more-elements-item"
     // @ts-ignore Overriding Menu styles is not supported
     ,
-    css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          padding: 0px ", ";\n        "])), "var(--ds-space-150, 12px)"),
+    css: css({
+      padding: "0px ".concat("var(--ds-space-150, 12px)")
+    }),
     ref: ref
   }, item.title));
 };

package/dist/esm/element-browser/components/ElementBrowserLoader.js

@@ -1,11 +1,15 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import Loadable from 'react-loadable';
 import Spinner from '@atlaskit/spinner';
-var spinnerContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n"])));
+var spinnerContainer = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: '100%',
+  width: '100%'
+});
 var ElementBrowserLoader = Loadable({
   loader: function loader() {
     return import( /* webpackChunkName: "@atlaskit-internal_editor-element-browser" */'../ElementBrowser').then(function (module) {

package/dist/esm/element-browser/components/ElementList/NotFoundIllustration.js

@@ -1,8 +1,10 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
-var imageContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 120px;\n  height: 111px;\n  margin-top: ", ";\n"])), "var(--ds-space-600, 48px)");
+var imageContainer = css({
+  width: '120px',
+  height: '111px',
+  marginTop: "var(--ds-space-600, 48px)"
+});
 
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 export default function NotFoundIllustration() {

package/dist/esm/element-browser/hooks/use-container-width.js

@@ -1,6 +1,4 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 import React, { memo, useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -32,7 +30,9 @@ import { WidthObserver } from '@atlaskit/width-detector';
  *
  */
 
-var widthObserverWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+var widthObserverWrapper = css({
+  position: 'relative'
+});
 export default function useContainerWidth() {
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),

package/dist/esm/expand/index.js

@@ -1,2 +1,8 @@
 // Used to store the state of the new single player expand node
-export var expandedState = new WeakMap();
+export var expandedState = new WeakMap();
+
+// used to determine if the expand is expanded or collapsed
+export var isExpandCollapsed = function isExpandCollapsed(node) {
+  var _expandedState$get;
+  return (_expandedState$get = !expandedState.get(node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false;
+};

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

@@ -8,8 +8,6 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
@@ -39,14 +37,44 @@ import { filterUniqueItems, mapContentTypeToIcon, sha1, wordCount } from './util
  * Visible only to screenreaders. Use when there is a need
  * to provide more context to a non-sighted user.
  */
-export var visuallyHiddenStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  clip: rect(1px, 1px, 1px, 1px);\n  clip-path: inset(50%);\n  height: 1px;\n  width: 1px;\n  margin: ", ";\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n"])), "var(--ds-space-negative-025, -2px)");
+export var visuallyHiddenStyles = css({
+  clip: 'rect(1px, 1px, 1px, 1px)',
+  clipPath: 'inset(50%)',
+  height: '1px',
+  width: '1px',
+  margin: "var(--ds-space-negative-025, -2px)",
+  overflow: 'hidden',
+  padding: 0,
+  position: 'absolute'
+});
 export var RECENT_SEARCH_LIST_SIZE = 5;
-var clearText = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  padding: 0;\n  margin-right: ", ";\n  color: ", ";\n  background: transparent;\n  border: none;\n"])), "var(--ds-space-100, 8px)", "var(--ds-icon-subtle, ".concat(N90, ")"));
-var clearTextWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 0;\n"])));
-var containerPadding = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: ", " ", ";\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-100, 8px)");
-var textLabelMargin = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n"])), "var(--ds-space-150, 12px)");
-var inputLabel = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  font-size: ", "px;\n  color: ", ";\n  font-weight: 500;\n  padding-bottom: ", ";\n"])), fontSizeSmall(), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-space-050, 4px)");
-var inputWrapperPosition = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+var clearText = css({
+  cursor: 'pointer',
+  padding: 0,
+  marginRight: "var(--ds-space-100, 8px)",
+  color: "var(--ds-icon-subtle, ".concat(N90, ")"),
+  background: 'transparent',
+  border: 'none'
+});
+var clearTextWrapper = css({
+  position: 'absolute',
+  right: 0
+});
+var containerPadding = css({
+  padding: "var(--ds-space-150, 12px)".concat(" ", "var(--ds-space-100, 8px)")
+});
+var textLabelMargin = css({
+  marginTop: "var(--ds-space-150, 12px)"
+});
+var inputLabel = css({
+  fontSize: "".concat(fontSizeSmall(), "px"),
+  color: "var(--ds-text-subtlest, ".concat(N200, ")"),
+  fontWeight: 500,
+  paddingBottom: "var(--ds-space-050, 4px)"
+});
+var inputWrapperPosition = css({
+  position: 'relative'
+});
 export var messages = defineMessages({
   displayText: {
     id: 'fabric.editor.displayText',

package/dist/esm/messages/table.js

@@ -215,6 +215,16 @@ export var messages = defineMessages({
     defaultMessage: "Distribute columns",
     description: "Distribute widths between selected columns"
   },
+  lockColumnWidths: {
+    id: 'fabric.editor.lockColumns',
+    defaultMessage: 'Fixed column widths',
+    description: 'Toggle button to enable fixed column widths'
+  },
+  unlockColumnWidths: {
+    id: 'fabric.editor.unLockColumns',
+    defaultMessage: 'Variable column widths',
+    description: 'Toggle button to enable variable column widths'
+  },
   rowControl: {
     id: 'fabric.editor.rowControl',
     defaultMessage: 'Highlight row',

package/dist/esm/monitoring/error.js

@@ -6,7 +6,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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) { _defineProperty(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 SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "78.30.0";
+var packageVersion = "78.30.2";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -4,8 +4,6 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /** @jsx jsx */
@@ -14,8 +12,18 @@ import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { N200, N400 } from '@atlaskit/theme/colors';
 import { messages } from './messages';
-var captionWrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  text-align: center;\n  position: relative;\n  color: ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-text-subtle, ".concat(N400, ")"));
-var placeholderStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  position: absolute;\n  top: 0;\n  width: 100%;\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"));
+var captionWrapperStyle = css({
+  marginTop: "var(--ds-space-100, 8px)",
+  textAlign: 'center',
+  position: 'relative',
+  color: "var(--ds-text-subtle, ".concat(N400, ")")
+});
+var placeholderStyle = css({
+  color: "var(--ds-text-subtlest, ".concat(N200, ")"),
+  position: 'absolute',
+  top: 0,
+  width: '100%'
+});
 export var CaptionComponent = /*#__PURE__*/function (_React$Component) {
   _inherits(CaptionComponent, _React$Component);
   var _super = _createSuper(CaptionComponent);

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

@@ -1,4 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -6,7 +5,6 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _templateObject, _templateObject2, _templateObject3;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /** @jsx jsx */
@@ -17,7 +15,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "78.30.0";
+var packageVersion = "78.30.2";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {
@@ -30,11 +28,30 @@ var DropList = /*#__PURE__*/function (_Component) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "wrapperStyles", css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", "\n    transition-duration: 0.2s;\n    transition: box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);\n  "])), _this.props.shouldFitContainer ? 'display: block; flex: 1 1 auto;' : 'display: inline-flex;'));
-    _defineProperty(_assertThisInitialized(_this), "triggerStyles", css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    transition-duration: 0.2s;\n    transition: box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);\n    ", "\n  "])), _this.props.shouldFitContainer ? 'display: block; box-sizing: border-box;' : 'display: inline-flex;'));
+    _defineProperty(_assertThisInitialized(_this), "wrapperStyles", css({
+      display: _this.props.shouldFitContainer ? 'block' : 'inline-flex',
+      flex: _this.props.shouldFitContainer ? '1 1 auto' : undefined,
+      transitionDuration: '0.2s',
+      transition: 'box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)'
+    }));
+    _defineProperty(_assertThisInitialized(_this), "triggerStyles", css({
+      transitionDuration: '0.2s',
+      transition: 'box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
+      display: _this.props.shouldFitContainer ? 'block' : 'inline-flex',
+      boxSizing: _this.props.shouldFitContainer ? 'border-box' : undefined
+    }));
     /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
     _defineProperty(_assertThisInitialized(_this), "menuWrapper", function () {
-      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      color: ", ";\n      background-color: ", ";\n      border-radius: ", ";\n      box-shadow: ", ";\n      box-sizing: border-box;\n      overflow: auto;\n      padding: ", " 0;\n      max-height: 90vh;\n    "])), "var(--ds-text, ".concat(N900, ")"), "var(--ds-surface-overlay, ".concat(N0, ")"), "var(--ds-border-radius, 3px)", "var(--ds-shadow-overlay, ".concat("0 4px 8px calc(-1 * 2px) ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"), "var(--ds-space-050, 4px)");
+      return css({
+        color: "var(--ds-text, ".concat(N900, ")"),
+        backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
+        borderRadius: "var(--ds-border-radius, 3px)",
+        boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px calc(-1 * 2px) ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"),
+        boxSizing: 'border-box',
+        overflow: 'auto',
+        padding: "var(--ds-space-050, 4px)".concat(" 0"),
+        maxHeight: '90vh'
+      });
     });
     /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
     _defineProperty(_assertThisInitialized(_this), "componentDidMount", function () {

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

@@ -1,8 +1,8 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
 var _excluded = ["children"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 /** @jsx jsx */
 
 import React, { forwardRef } from 'react';
@@ -50,10 +50,30 @@ export var ExpandIconWrapper = function ExpandIconWrapper(_ref) {
   }, children);
 };
 var expandIconWrapperStyle = function expandIconWrapperStyle() {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  display: flex;\n  color: ", ";\n  border-radius: ", ";\n  width: 24px;\n  height: 24px;\n\n  &:hover {\n    background: ", ";\n  }\n\n  svg {\n    transition: transform 0.2s ", ";\n  }\n"])), "var(--ds-icon, ".concat(N90, ")"), "var(--ds-border-radius-100, 4px)", "var(--ds-background-neutral-subtle-hovered, ".concat(N30A, ")"), akEditorSwoopCubicBezier);
+  return css({
+    cursor: 'pointer',
+    display: 'flex',
+    color: "var(--ds-icon, ".concat(N90, ")"),
+    borderRadius: "var(--ds-border-radius-100, 4px)",
+    width: '24px',
+    height: '24px',
+    '&:hover': {
+      background: "var(--ds-background-neutral-subtle-hovered, ".concat(N30A, ")")
+    },
+    svg: {
+      transition: "transform 0.2s ".concat(akEditorSwoopCubicBezier)
+    }
+  });
 };
-var expandIconWrapperExpandedStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  svg {\n    transform: rotate(90deg);\n  }\n"])));
-export var expandLayoutWrapperStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: ", ";\n  height: ", ";\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
+var expandIconWrapperExpandedStyle = css({
+  svg: {
+    transform: 'rotate(90deg)'
+  }
+});
+export var expandLayoutWrapperStyle = css({
+  width: "var(--ds-space-300, 24px)",
+  height: "var(--ds-space-300, 24px)"
+});
 export var ExpandLayoutWrapperWithRef = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
     rest = _objectWithoutProperties(props, _excluded);
@@ -73,19 +93,71 @@ var containerStyles = function containerStyles(styleProps) {
   var marginHorizontal = styleProps['data-node-type'] === 'expand' ? "-".concat(akLayoutGutterOffset, "px") : 0;
   var margin = "".concat(marginTop, " ").concat(marginHorizontal, " ").concat(marginBottom);
   return function () {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    border-width: 1px;\n    border-style: solid;\n    border-color: ", ";\n    border-radius: ", ";\n    min-height: 25px;\n    background: ", ";\n    margin: ", ";\n\n    transition: background 0.3s ", ",\n      border-color 0.3s ", ";\n    padding: ", ";\n\n    &:hover {\n      // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n      // This is because the default state already uses the same token and, as such, the hover style won't change anything.\n      // https://product-fabric.atlassian.net/browse/DSP-4152\n      border: 1px solid ", ";\n      background: ", ";\n    }\n\n    td > :not(style):first-child,\n    td > style:first-child + * {\n      margin-top: 0;\n    }\n  "])), focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR : EXPAND_COLLAPSED_BORDER_COLOR, BORDER_RADIUS, !expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND, margin, akEditorSwoopCubicBezier, akEditorSwoopCubicBezier, "var(--ds-space-100, 8px)", "var(--ds-border, ".concat(N50A, ")"), EXPAND_SELECTED_BACKGROUND);
+    return css({
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR : EXPAND_COLLAPSED_BORDER_COLOR,
+      borderRadius: BORDER_RADIUS,
+      minHeight: '25px',
+      background: !expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND,
+      margin: margin,
+      transition: "background 0.3s ".concat(akEditorSwoopCubicBezier, ", border-color 0.3s ").concat(akEditorSwoopCubicBezier),
+      padding: "var(--ds-space-100, 8px)",
+      '&:hover': {
+        // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.
+        // This is because the default state already uses the same token and, as such, the hover style won't change anything.
+        // https://product-fabric.atlassian.net/browse/DSP-4152
+        border: "1px solid ".concat("var(--ds-border, ".concat(N50A, ")")),
+        background: EXPAND_SELECTED_BACKGROUND
+      },
+      'td > :not(style):first-child, td > style:first-child + *': {
+        marginTop: 0
+      }
+    });
   };
 };
 var contentStyles = function contentStyles(styleProps) {
   return function () {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding-top: ", ";\n    padding-right: ", ";\n    padding-left: ", ";\n    margin-left: ", ";\n    display: flow-root;\n\n    // The follow rules inside @supports block are added as a part of ED-8893\n    // The fix is targeting mobile bridge on iOS 12 or below,\n    // We should consider remove this fix when we no longer support iOS 12\n    @supports not (display: flow-root) {\n      width: 100%;\n      box-sizing: border-box;\n    }\n\n    ", "\n  "])), styleProps.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)", "var(--ds-space-100, 8px)", "var(--ds-space-300, 24px)", "var(--ds-space-050, 4px)", !styleProps.expanded ? "\n        .expand-content-wrapper, .nestedExpand-content-wrapper {\n          /* We visually hide the content here to preserve the content during copy+paste */\n          /* Do not add text nowrap here because inline comment navigation depends on the location of the text */\n          width: 100%;\n          display: block;\n          height: 0;\n          overflow: hidden;\n          clip: rect(1px, 1px, 1px, 1px);\n          user-select: none;\n        }\n      " : '');
+    return (// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+      css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding-top: ", ";\n    padding-right: ", ";\n    padding-left: ", ";\n    margin-left: ", ";\n    display: flow-root;\n\n    // The follow rules inside @supports block are added as a part of ED-8893\n    // The fix is targeting mobile bridge on iOS 12 or below,\n    // We should consider remove this fix when we no longer support iOS 12\n    @supports not (display: flow-root) {\n      width: 100%;\n      box-sizing: border-box;\n    }\n\n    ", "\n  "])), styleProps.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)", "var(--ds-space-100, 8px)", "var(--ds-space-300, 24px)", "var(--ds-space-050, 4px)", !styleProps.expanded ? "\n        .expand-content-wrapper, .nestedExpand-content-wrapper {\n          /* We visually hide the content here to preserve the content during copy+paste */\n          /* Do not add text nowrap here because inline comment navigation depends on the location of the text */\n          width: 100%;\n          display: block;\n          height: 0;\n          overflow: hidden;\n          clip: rect(1px, 1px, 1px, 1px);\n          user-select: none;\n        }\n      " : '')
+    );
   };
 };
 var titleInputStyles = function titleInputStyles() {
-  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  outline: none;\n  border: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: normal;\n  color: ", ";\n  background: transparent;\n  display: flex;\n  flex: 1;\n  padding: 0 0 0 ", ";\n  width: 100%;\n\n  &::placeholder {\n    opacity: 1;\n    color: ", ";\n  }\n"])), relativeFontSizeToBase16(fontSize()), akEditorLineHeight, "var(--ds-text-subtlest, ".concat(N200A, ")"), "var(--ds-space-050, 4px)", "var(--ds-text-subtlest, ".concat(N200, ")"));
+  return css({
+    outline: 'none',
+    border: 'none',
+    fontSize: relativeFontSizeToBase16(fontSize()),
+    lineHeight: akEditorLineHeight,
+    fontWeight: 'normal',
+    color: "var(--ds-text-subtlest, ".concat(N200A, ")"),
+    background: 'transparent',
+    display: 'flex',
+    flex: 1,
+    padding: "0 0 0 ".concat("var(--ds-space-050, 4px)"),
+    width: '100%',
+    '&::placeholder': {
+      opacity: 1,
+      color: "var(--ds-text-subtlest, ".concat(N200, ")")
+    }
+  });
 };
 var titleContainerStyles = function titleContainerStyles() {
-  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  padding: 0;\n  display: flex;\n  align-items: flex-start;\n  background: none;\n  border: none;\n  font-size: ", ";\n  width: 100%;\n  color: ", ";\n  overflow: hidden;\n  cursor: pointer;\n\n  &:focus {\n    outline: 0;\n  }\n"])), relativeFontSizeToBase16(fontSize()), "var(--ds-text-subtle, ".concat(N300A, ")"));
+  return css({
+    padding: 0,
+    display: 'flex',
+    alignItems: 'flex-start',
+    background: 'none',
+    border: 'none',
+    fontSize: relativeFontSizeToBase16(fontSize()),
+    width: '100%',
+    color: "var(--ds-text-subtle, ".concat(N300A, ")"),
+    overflow: 'hidden',
+    cursor: 'pointer',
+    '&:focus': {
+      outline: 0
+    }
+  });
 };
 export var sharedExpandStyles = {
   titleInputStyles: titleInputStyles,

package/dist/esm/ui/FloatingToolbar/Separator.js

@@ -1,9 +1,13 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
-var separator = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  width: 1px;\n  height: 20px;\n  margin: 0 ", ";\n  align-self: center;\n"])), "var(--ds-border, ".concat(N30, ")"), "var(--ds-space-050, 4px)");
+var separator = css({
+  background: "var(--ds-border, ".concat(N30, ")"),
+  width: '1px',
+  height: '20px',
+  margin: "0 ".concat("var(--ds-space-050, 4px)"),
+  alignSelf: 'center'
+});
 export default (function () {
   return jsx("div", {
     css: separator,

package/dist/esm/ui/FloatingToolbar/SmallerEditIcon.js

@@ -1,9 +1,9 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import EditIcon from '@atlaskit/icon/glyph/edit';
-var editIconStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 20px;\n"])));
+var editIconStyles = css({
+  width: '20px'
+});
 
 /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
 export var SmallerEditIcon = function SmallerEditIcon() {

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

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

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

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
@@ -7,12 +5,25 @@ import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { G400, N200, R400 } from '@atlaskit/theme/colors';
 import { h200 } from '@atlaskit/theme/typography';
-var errorColor = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n"])), "var(--ds-text-danger, ".concat(R400, ")"));
-var validColor = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), "var(--ds-text-success, ".concat(G400, ")"));
+var errorColor = css({
+  color: "var(--ds-text-danger, ".concat(R400, ")")
+});
+var validColor = css({
+  color: "var(--ds-text-success, ".concat(G400, ")")
+});
 var messageStyle = function messageStyle() {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", " font-weight: normal;\n  color: ", ";\n  margin-top: ", ";\n  display: flex;\n  justify-content: baseline;\n"])), h200(), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-space-050, 4px)");
+  return css(h200(), {
+    fontWeight: 'normal',
+    color: "var(--ds-text-subtlest, ".concat(N200, ")"),
+    marginTop: "var(--ds-space-050, 4px)",
+    display: 'flex',
+    justifyContent: 'baseline'
+  });
 };
-var iconWrapperStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-right: ", ";\n"])), "var(--ds-space-050, 4px)");
+var iconWrapperStyle = css({
+  display: 'flex',
+  marginRight: "var(--ds-space-050, 4px)"
+});
 export var HelperMessage = function HelperMessage(_ref) {
   var children = _ref.children;
   return jsx("div", {

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

@@ -1,10 +1,36 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
 import { css } from '@emotion/react';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { B100, N100, N30, N400 } from '@atlaskit/theme/colors';
 // Normal .className gets overridden by input[type=text] hence this hack to produce input.className
-export var panelTextInput = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  input& {\n    background: transparent;\n    border: 2px solid ", ";\n    border-radius: 0;\n    box-sizing: content-box;\n    color: ", ";\n    flex-grow: 1;\n    font-size: ", ";\n    line-height: 20px;\n    padding: ", " ", "\n      ", " ", ";\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      border-color: ", ";\n    }\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"])), "var(--ds-border, ".concat(N30, ")"), "var(--ds-text-subtle, ".concat(N400, ")"), relativeFontSizeToBase16(13), "var(--ds-space-075, 6px)", "var(--ds-space-400, 32px)", "var(--ds-space-075, 6px)", "var(--ds-space-100, 8px)", "var(--ds-border-focused, ".concat(B100, ")"), "var(--ds-text-subtlest, ".concat(N100, ")"));
+export var panelTextInput = css({
+  'input&': {
+    background: 'transparent',
+    border: "2px solid ".concat("var(--ds-border, ".concat(N30, ")")),
+    borderRadius: 0,
+    boxSizing: 'content-box',
+    color: "var(--ds-text-subtle, ".concat(N400, ")"),
+    flexGrow: 1,
+    fontSize: relativeFontSizeToBase16(13),
+    lineHeight: '20px',
+    padding: "var(--ds-space-075, 6px)".concat(" ", "var(--ds-space-400, 32px)", " ", "var(--ds-space-075, 6px)", " ", "var(--ds-space-100, 8px)"),
+    minWidth: '145px',
+    /* Hides IE10+ built-in [x] clear input button */
+    '&::-ms-clear': {
+      display: 'none'
+    },
+    '&:focus': {
+      outline: 'none',
+      borderColor: "var(--ds-border-focused, ".concat(B100, ")")
+    },
+    '&::placeholder': {
+      color: "var(--ds-text-subtlest, ".concat(N100, ")")
+    }
+  }
+});
 export var panelTextInputWithCustomWidth = function panelTextInputWithCustomWidth(width) {
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  input& {\n    width: ", "px;\n  }\n"])), width);
+  return css({
+    'input&': {
+      width: "".concat(width, "px")
+    }
+  });
 };

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

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 import React, { useCallback, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -13,7 +11,23 @@ import { ACTION_SUBJECT_ID } from '../../analytics';
 import { unsupportedContentMessages } from '../../messages/unsupportedContent';
 import { trackUnsupportedContentTooltipDisplayedFor } from '../../utils/track-unsupported-content';
 import { getUnsupportedContent } from '../unsupported-content-helper';
-var blockNodeStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: flex;\n  font-size: ", ";\n  margin: ", " 0;\n  min-height: 24px;\n  padding: ", ";\n  text-align: center;\n  vertical-align: text-bottom;\n  min-width: 120px;\n  align-items: center;\n  justify-content: center;\n"])), "var(--ds-background-disabled, ".concat(N30, ")"), "var(--ds-border-disabled, ".concat(N50, ")"), borderRadius(), relativeFontSizeToBase16(fontSize()), "var(--ds-space-100, 8px)", "var(--ds-space-150, 12px)");
+var blockNodeStyle = css({
+  background: "var(--ds-background-disabled, ".concat(N30, ")"),
+  border: "1px dashed ".concat("var(--ds-border-disabled, ".concat(N50, ")")),
+  borderRadius: "".concat(borderRadius(), "px"),
+  boxSizing: 'border-box',
+  cursor: 'default',
+  display: 'flex',
+  fontSize: relativeFontSizeToBase16(fontSize()),
+  margin: "var(--ds-space-100, 8px)".concat(" 0"),
+  minHeight: '24px',
+  padding: "var(--ds-space-150, 12px)",
+  textAlign: 'center',
+  verticalAlign: 'text-bottom',
+  minWidth: '120px',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
 var UnsupportedBlockNode = function UnsupportedBlockNode(_ref) {
   var node = _ref.node,
     intl = _ref.intl,

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

@@ -1,11 +1,13 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _templateObject;
 /** @jsx jsx */
 import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import rafSchedule from 'raf-schd';
 import { WidthObserver } from '@atlaskit/width-detector';
+var styles = css({
+  position: 'relative',
+  width: '100%'
+});
 var SCROLLBAR_WIDTH = 30;
 export function getBreakpoint() {
   var width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
@@ -49,7 +51,7 @@ export var WidthProvider = function WidthProvider(_ref) {
   });
   var skipWidthDetection = shouldCheckExistingValue && existingContextValue.width > 0;
   return jsx("div", {
-    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        position: relative;\n        width: 100%;\n      "]))),
+    css: styles,
     className: className
   }, !skipWidthDetection && jsx(Fragment, null, jsx(WidthObserver, {
     setWidth: updateWidth,