@atlaskit/editor-common 78.11.4 → 78.11.5

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

@@ -1,7 +1,32 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import { css } from '@emotion/react';
 import { akEditorGridLineZIndex } from '@atlaskit/editor-shared-styles';
 import { B200, N30A } from '@atlaskit/theme/colors';
 export var GRID_GUTTER = 12;
-export var gridStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .gridParent {\n    width: calc(100% + ", "px);\n    margin-left: ", "; // Negative GRID_GUTTER\n    margin-right: ", "; // Negative GRID_GUTTER\n    transform: scale(1);\n    z-index: ", ";\n  }\n\n  .gridContainer {\n    position: fixed;\n    height: 100vh;\n    width: 100%;\n    pointer-events: none;\n  }\n\n  // TODO: https://product-fabric.atlassian.net/browse/DSP-4352\n  .gridLine {\n    border-left: 1px solid ", ";\n    display: inline-block;\n    box-sizing: border-box;\n    height: 100%;\n    margin-left: -1px;\n\n    transition: border-color 0.15s linear;\n    z-index: 0;\n  }\n\n  .highlight {\n    border-left: 1px solid ", ";\n  }\n"])), GRID_GUTTER * 2, "var(--ds-space-negative-150, -12px)", "var(--ds-space-negative-150, -12px)", akEditorGridLineZIndex, "var(--ds-border, ".concat(N30A, ")"), "var(--ds-border-focused, ".concat(B200, ")"));
+export var gridStyles = css({
+  '.gridParent': {
+    width: "calc(100% + ".concat(GRID_GUTTER * 2, "px)"),
+    marginLeft: "var(--ds-space-negative-150, -12px)",
+    marginRight: "var(--ds-space-negative-150, -12px)",
+    transform: 'scale(1)',
+    zIndex: akEditorGridLineZIndex
+  },
+  '.gridContainer': {
+    position: 'fixed',
+    height: '100vh',
+    width: '100%',
+    pointerEvents: 'none'
+  },
+  '.gridLine': {
+    borderLeft: "1px solid ".concat("var(--ds-border, ".concat(N30A, ")")),
+    display: 'inline-block',
+    boxSizing: 'border-box',
+    height: '100%',
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    marginLeft: '-1px',
+    transition: 'border-color 0.15s linear',
+    zIndex: 0
+  },
+  '.highlight': {
+    borderLeft: "1px solid ".concat("var(--ds-border-focused, ".concat(B200, ")"))
+  }
+});

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

@@ -1,4 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
 import { css } from '@emotion/react';
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 export var indentationSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .fabric-editor-indentation-mark {\n    &[data-level='1'] {\n      margin-left: 30px;\n    }\n    &[data-level='2'] {\n      margin-left: 60px;\n    }\n    &[data-level='3'] {\n      margin-left: 90px;\n    }\n    &[data-level='4'] {\n      margin-left: 120px;\n    }\n    &[data-level='5'] {\n      margin-left: 150px;\n    }\n    &[data-level='6'] {\n      margin-left: 180px;\n    }\n  }\n"])));

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

@@ -158,7 +158,7 @@ var mainDynamicStyles = function mainDynamicStyles(panelType) {
   return "\n    background-color: ".concat(getPanelTypeBackground(panelType), ";\n    color: inherit;\n  ");
 };
 export var panelSharedStylesWithoutPrefix = function panelSharedStylesWithoutPrefix() {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  margin: ", " 0 0;\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  min-width: ", "px;\n  display: flex;\n  position: relative;\n  align-items: normal;\n  word-break: break-word;\n\n  ", "\n\n  .", " {\n    flex-shrink: 0;\n    height: ", ";\n    width: ", ";\n    box-sizing: content-box;\n    padding-right: ", ";\n    text-align: center;\n    user-select: none;\n    -moz-user-select: none;\n    -webkit-user-select: none;\n    -ms-user-select: none;\n    margin-top: 0.1em;\n    ", "\n\n    > span {\n      vertical-align: middle;\n      display: inline-flex;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n\n      // Vertical align only works for inline-block elements in Firefox\n      @-moz-document url-prefix() {\n        img {\n          display: inline-block;\n        }\n      }\n    }\n  }\n\n  .ak-editor-panel__content {\n    margin: 1px 0 1px;\n    flex: 1 0 0;\n    /*\n      https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox\n      The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn\u2019t compute to zero. The minimum size of a flex item is equal to the size of its contents.\n    */\n    min-width: 0;\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n"])), "var(--ds-border-radius, 3px)", blockNodesVerticalMargin, "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", akEditorTableCellMinWidth, mainDynamicStyles(PanelType.INFO), PanelSharedCssClassName.icon, "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", iconDynamicStyles(PanelType.INFO), emojiSprite, panelEmojiSpriteVerticalAlignment, emojiImage, panelEmojiImageVerticalAlignment, PanelType.NOTE, mainDynamicStyles(PanelType.NOTE), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.NOTE), PanelType.TIP, mainDynamicStyles(PanelType.TIP), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.TIP), PanelType.WARNING, mainDynamicStyles(PanelType.WARNING), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.WARNING), PanelType.ERROR, mainDynamicStyles(PanelType.ERROR), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.ERROR), PanelType.SUCCESS, mainDynamicStyles(PanelType.SUCCESS), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.SUCCESS));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  margin: ", " 0 0;\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  min-width: ", "px;\n  display: flex;\n  position: relative;\n  align-items: normal;\n  word-break: break-word;\n\n  ", "\n\n  .", " {\n    flex-shrink: 0;\n    height: ", ";\n    width: ", ";\n    box-sizing: content-box;\n    padding-right: ", ";\n    text-align: center;\n    user-select: none;\n    -moz-user-select: none;\n    -webkit-user-select: none;\n    -ms-user-select: none;\n    margin-top: 0.1em;\n    ", "\n\n    > span {\n      vertical-align: middle;\n      display: inline-flex;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n\n      // Vertical align only works for inline-block elements in Firefox\n      @-moz-document url-prefix() {\n        img {\n          display: inline-block;\n        }\n      }\n    }\n  }\n\n  .ak-editor-panel__content {\n    margin: ", " 0 ", ";\n    flex: 1 0 0;\n    /*\n      https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox\n      The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn\u2019t compute to zero. The minimum size of a flex item is equal to the size of its contents.\n    */\n    min-width: 0;\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n"])), "var(--ds-border-radius, 3px)", blockNodesVerticalMargin, "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", akEditorTableCellMinWidth, mainDynamicStyles(PanelType.INFO), PanelSharedCssClassName.icon, "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", iconDynamicStyles(PanelType.INFO), emojiSprite, panelEmojiSpriteVerticalAlignment, emojiImage, panelEmojiImageVerticalAlignment, "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", PanelType.NOTE, mainDynamicStyles(PanelType.NOTE), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.NOTE), PanelType.TIP, mainDynamicStyles(PanelType.TIP), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.TIP), PanelType.WARNING, mainDynamicStyles(PanelType.WARNING), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.WARNING), PanelType.ERROR, mainDynamicStyles(PanelType.ERROR), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.ERROR), PanelType.SUCCESS, mainDynamicStyles(PanelType.SUCCESS), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.SUCCESS));
 };
 export var panelSharedStyles = function panelSharedStyles() {
   return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .", " {\n    ", "\n  }\n"])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix());

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

@@ -7,9 +7,9 @@ import { B200, B50, N60 } from '@atlaskit/theme/colors';
   Styles in this file are based on
   packages/editor/editor-core/src/plugins/media/styles.ts
 */
-
 export var resizerItemClassName = 'resizer-item';
 export var resizerHoverZoneClassName = 'resizer-hover-zone';
+export var resizerExtendedZone = 'resizer-is-extended';
 export var resizerHandleClassName = 'resizer-handle';
 export var resizerHandleTrackClassName = "".concat(resizerHandleClassName, "-track");
 export var resizerHandleThumbClassName = "".concat(resizerHandleClassName, "-thumb");
@@ -19,4 +19,4 @@ export var resizerDangerClassName = "".concat(resizerHandleClassName, "-danger")
 var akEditorSelectedNodeClassName = 'ak-editor-selected-node';
 export var handleWrapperClass = 'resizer-handle-wrapper';
 export var resizerHandleZIndex = 1;
-export var resizerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    will-change: width;\n\n    &:hover,\n    &.display-handle {\n      & > .", " > .", " {\n        visibility: visible;\n        opacity: 1;\n      }\n    }\n\n    &.is-resizing {\n      & .", " {\n        background: ", ";\n      }\n    }\n\n    &.", " {\n      & .", " {\n        transition: none;\n        background: ", ";\n      }\n    }\n  }\n\n  .", " {\n    display: flex;\n    visibility: hidden;\n    opacity: 0;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    width: 7px;\n    transition: visibility 0.2s, opacity 0.2s;\n\n    /*\n      NOTE: The below style is targeted at the div element added by the tooltip. We don't have any means of injecting styles\n      into the tooltip\n    */\n    & div[role='presentation'] {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      margin-top: ", ";\n      white-space: normal;\n    }\n\n    /*\n      Handle Positions\n    */\n    &.left {\n      align-items: flex-start;\n    }\n    &.right {\n      align-items: flex-end;\n    }\n\n    /*\n      Handle Sizing\n    */\n    &.small {\n      & .", " {\n        height: 43px;\n      }\n    }\n    &.medium {\n      & .", " {\n        height: 64px;\n      }\n    }\n    &.large {\n      & .", " {\n        height: 96px;\n      }\n    }\n\n    /*\n      Handle Alignment\n    */\n    &.sticky {\n      & .", " {\n        position: sticky;\n        top: ", ";\n        bottom: ", ";\n      }\n    }\n\n    &:hover {\n      & .", " {\n        background: ", ";\n      }\n\n      & .", " {\n        visibility: visible;\n        opacity: 0.5;\n      }\n    }\n  }\n\n  .", " {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    margin: 0 ", ";\n    height: 64px;\n    transition: background-color 0.2s;\n    border-radius: 6px;\n    border: 0;\n    padding: 0;\n    z-index: 2;\n    outline: none;\n    min-height: 24px;\n    background: ", ";\n\n    &:hover {\n      cursor: col-resize;\n    }\n\n    &:focus {\n      background: ", ";\n\n      &::after {\n        content: '';\n        position: absolute;\n        top: ", ";\n        right: ", ";\n        bottom: ", ";\n        left: ", ";\n        border: 2px solid ", ";\n        border-radius: inherit;\n        z-index: -1;\n      }\n    }\n  }\n\n  .", " {\n    visibility: hidden;\n    position: absolute;\n    width: 7px;\n    height: calc(100% - 40px);\n    border-radius: 4px;\n    opacity: 0;\n    transition: background-color 0.2s, visibility 0.2s, opacity 0.2s;\n\n    &.none {\n      background: none;\n    }\n\n    &.shadow {\n      background: ", ";\n    }\n\n    &.full-height {\n      background: ", ";\n      height: 100%;\n      min-height: 36px;\n    }\n  }\n\n  .", " {\n    & .", " {\n      background: ", ";\n    }\n  }\n\n  .", " {\n    position: relative;\n    display: inline-block;\n    width: 100%;\n\n    &.is-extended {\n      padding: 0 ", ";\n      left: ", ";\n    }\n  }\n\n  // This below style is here to make sure the image width is correct when nested in a table\n  table .", " {\n    padding: unset;\n    left: unset;\n  }\n"])), resizerItemClassName, handleWrapperClass, resizerHandleClassName, resizerHandleThumbClassName, "var(--ds-border-focused, ".concat(B200, ")"), resizerDangerClassName, resizerHandleThumbClassName, "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), resizerHandleClassName, "var(--ds-space-negative-200, -16px)", resizerHandleThumbClassName, resizerHandleThumbClassName, resizerHandleThumbClassName, resizerHandleThumbClassName, "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", resizerHandleThumbClassName, "var(--ds-border-focused, ".concat(B200, ")"), resizerHandleTrackClassName, resizerHandleThumbClassName, "var(--ds-space-025, 2px)", "var(--ds-border, ".concat(N60, ")"), "var(--ds-border-selected, #0C66E4)", "var(--ds-space-negative-050, -4px)", "var(--ds-space-negative-050, -4px)", "var(--ds-space-negative-050, -4px)", "var(--ds-space-negative-050, -4px)", "var(--ds-border-focused, #388BFF)", resizerHandleTrackClassName, "var(--ds-background-selected, ".concat(B50, ")"), "var(--ds-background-selected, ".concat(B50, ")"), akEditorSelectedNodeClassName, resizerHandleThumbClassName, "var(--ds-border-focused, ".concat(B200, ")"), resizerHoverZoneClassName, "var(--ds-space-150, 12px)", "var(--ds-space-negative-150, -12px)", resizerHoverZoneClassName);
+export var resizerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    will-change: width;\n\n    &:hover,\n    &.display-handle {\n      & > .", " > .", " {\n        visibility: visible;\n        opacity: 1;\n      }\n    }\n\n    &.is-resizing {\n      & .", " {\n        background: ", ";\n      }\n    }\n\n    &.", " {\n      & .", " {\n        transition: none;\n        background: ", ";\n      }\n    }\n  }\n\n  .", " {\n    display: flex;\n    visibility: hidden;\n    opacity: 0;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    width: 7px;\n    transition: visibility 0.2s, opacity 0.2s;\n\n    /*\n      NOTE: The below style is targeted at the div element added by the tooltip. We don't have any means of injecting styles\n      into the tooltip\n    */\n    & div[role='presentation'] {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      margin-top: ", ";\n      white-space: normal;\n    }\n\n    /*\n      Handle Positions\n    */\n    &.left {\n      align-items: flex-start;\n    }\n    &.right {\n      align-items: flex-end;\n    }\n\n    /*\n      Handle Sizing\n    */\n    &.small {\n      & .", " {\n        height: 43px;\n      }\n    }\n    &.medium {\n      & .", " {\n        height: 64px;\n      }\n    }\n    &.large {\n      & .", " {\n        height: 96px;\n      }\n    }\n\n    /*\n      Handle Alignment\n    */\n    &.sticky {\n      & .", " {\n        position: sticky;\n        top: ", ";\n        bottom: ", ";\n      }\n    }\n\n    &:hover {\n      & .", " {\n        background: ", ";\n      }\n\n      & .", " {\n        visibility: visible;\n        opacity: 0.5;\n      }\n    }\n  }\n\n  .", " {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    margin: 0 ", ";\n    height: 64px;\n    transition: background-color 0.2s;\n    border-radius: 6px;\n    border: 0;\n    padding: 0;\n    z-index: 2;\n    outline: none;\n    min-height: 24px;\n    background: ", ";\n\n    &:hover {\n      cursor: col-resize;\n    }\n\n    &:focus {\n      background: ", ";\n\n      &::after {\n        content: '';\n        position: absolute;\n        top: ", ";\n        right: ", ";\n        bottom: ", ";\n        left: ", ";\n        border: 2px solid ", ";\n        border-radius: inherit;\n        z-index: -1;\n      }\n    }\n  }\n\n  .", " {\n    visibility: hidden;\n    position: absolute;\n    width: 7px;\n    height: calc(100% - 40px);\n    border-radius: 4px;\n    opacity: 0;\n    transition: background-color 0.2s, visibility 0.2s, opacity 0.2s;\n\n    &.none {\n      background: none;\n    }\n\n    &.shadow {\n      background: ", ";\n    }\n\n    &.full-height {\n      background: ", ";\n      height: 100%;\n      min-height: 36px;\n    }\n  }\n\n  .", " {\n    & .", " {\n      background: ", ";\n    }\n  }\n\n  .", " {\n    position: relative;\n    display: inline-block;\n    width: 100%;\n\n    &.", " {\n      padding: 0 ", ";\n      left: ", ";\n    }\n  }\n\n  // This below style is here to make sure the image width is correct when nested in a table\n  table\n    .", ",\n    table\n    .", ".", " {\n    padding: unset;\n    left: unset;\n  }\n"])), resizerItemClassName, handleWrapperClass, resizerHandleClassName, resizerHandleThumbClassName, "var(--ds-border-focused, ".concat(B200, ")"), resizerDangerClassName, resizerHandleThumbClassName, "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), resizerHandleClassName, "var(--ds-space-negative-200, -16px)", resizerHandleThumbClassName, resizerHandleThumbClassName, resizerHandleThumbClassName, resizerHandleThumbClassName, "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", resizerHandleThumbClassName, "var(--ds-border-focused, ".concat(B200, ")"), resizerHandleTrackClassName, resizerHandleThumbClassName, "var(--ds-space-025, 2px)", "var(--ds-border, ".concat(N60, ")"), "var(--ds-border-selected, #0C66E4)", "var(--ds-space-negative-050, -4px)", "var(--ds-space-negative-050, -4px)", "var(--ds-space-negative-050, -4px)", "var(--ds-space-negative-050, -4px)", "var(--ds-border-focused, #388BFF)", resizerHandleTrackClassName, "var(--ds-background-selected, ".concat(B50, ")"), "var(--ds-background-selected, ".concat(B50, ")"), akEditorSelectedNodeClassName, resizerHandleThumbClassName, "var(--ds-border-focused, ".concat(B200, ")"), resizerHoverZoneClassName, resizerExtendedZone, "var(--ds-space-150, 12px)", "var(--ds-space-negative-150, -12px)", resizerHoverZoneClassName, resizerHoverZoneClassName, resizerExtendedZone);

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

@@ -1,5 +1,5 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _css;
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
 import { css } from '@emotion/react';
@@ -24,5 +24,34 @@ var shadowWidth = 8;
  *      background-attachment: local, local, scroll, scroll;
  */
 
-var shadowSharedStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &\n    .", "::before,\n    .", "::after,\n    .", "::before,\n    .", "::after {\n    display: none;\n    position: absolute;\n    pointer-events: none;\n    z-index: ", ";\n    width: ", "px;\n    content: '';\n    /* Scrollbar is outside the content in IE, inset in other browsers. */\n    height: calc(100%);\n  }\n\n  & .", ", .", " {\n    position: relative;\n  }\n\n  & .", "::before {\n    background: linear-gradient(\n        to left,\n        transparent 0,\n        ", "\n          ", "%\n      ),\n      linear-gradient(\n        to right,\n        ", " 0px,\n        transparent 1px\n      );\n    top: 0px;\n    left: 0;\n    display: block;\n  }\n\n  & .", "::after {\n    background: linear-gradient(\n        to right,\n        transparent 0,\n        ", "\n          ", "%\n      ),\n      linear-gradient(\n        to left,\n        ", " 0px,\n        transparent 1px\n      );\n    left: calc(100% - ", "px);\n    top: 0px;\n    display: block;\n  }\n\n  & .", " {\n    height: 100%;\n    width: 0px;\n    min-width: 0px;\n  }\n\n  & .", " {\n    height: 100%;\n    width: 0px;\n    min-width: 0px;\n  }\n"])), shadowClassNames.RIGHT_SHADOW, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, shadowClassNames.LEFT_SHADOW, akEditorShadowZIndex, shadowWidth, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, shadowClassNames.LEFT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100, "var(--ds-shadow-overflow-perimeter, transparent)", shadowClassNames.RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100, "var(--ds-shadow-overflow-perimeter, transparent)", shadowWidth, shadowObserverClassNames.SENTINEL_LEFT, shadowObserverClassNames.SENTINEL_RIGHT);
+var shadowSharedStyle = css((_css = {}, _defineProperty(_css, "& .".concat(shadowClassNames.RIGHT_SHADOW, "::before, .").concat(shadowClassNames.RIGHT_SHADOW, "::after, .").concat(shadowClassNames.LEFT_SHADOW, "::before, .").concat(shadowClassNames.LEFT_SHADOW, "::after"), {
+  display: 'none',
+  position: 'absolute',
+  pointerEvents: 'none',
+  zIndex: akEditorShadowZIndex,
+  width: "".concat(shadowWidth, "px"),
+  content: "''",
+  height: 'calc(100%)'
+}), _defineProperty(_css, "& .".concat(shadowClassNames.RIGHT_SHADOW, ", .").concat(shadowClassNames.LEFT_SHADOW), {
+  position: 'relative'
+}), _defineProperty(_css, "& .".concat(shadowClassNames.LEFT_SHADOW, "::before"), {
+  background: "linear-gradient( to left, transparent 0, ".concat("var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), " ", getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100, "% ), linear-gradient( to right, ", "var(--ds-shadow-overflow-perimeter, transparent)", " 0px, transparent 1px )"),
+  top: '0px',
+  left: 0,
+  display: 'block'
+}), _defineProperty(_css, "& .".concat(shadowClassNames.RIGHT_SHADOW, "::after"), {
+  background: "linear-gradient( to right, transparent 0, ".concat("var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), " ", getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100, "% ), linear-gradient( to left, ", "var(--ds-shadow-overflow-perimeter, transparent)", " 0px, transparent 1px )"),
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+  left: "calc(100% - ".concat(shadowWidth, "px)"),
+  top: '0px',
+  display: 'block'
+}), _defineProperty(_css, "& .".concat(shadowObserverClassNames.SENTINEL_LEFT), {
+  height: '100%',
+  width: '0px',
+  minWidth: '0px'
+}), _defineProperty(_css, "& .".concat(shadowObserverClassNames.SENTINEL_RIGHT), {
+  height: '100%',
+  width: '0px',
+  minWidth: '0px'
+}), _css));
 export { shadowSharedStyle };

package/dist/esm/ui/Announcer/announcer.js

@@ -10,8 +10,10 @@ import React, { forwardRef, memo, useEffect, useState } from 'react';
 
 // Note: Text won't be announced if the text message doesn't change after the render.
 // For using a forced announcement in this case, set the 'key' attribute - key={Date.now()}
+
 // Note: Flag 'contentRendered' resolves bug with duplicates messages (NVDA + Firefox)
 // https://github.com/nvaccess/nvda/labels/bug%2Fdouble-speaking
+
 var timer;
 var Announcer = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$ariaAtomic = _ref.ariaAtomic,

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

@@ -7,7 +7,7 @@ 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() { 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; })(); }
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';

package/dist/esm/ui/ContextPanel/context.js

@@ -6,7 +6,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 
 // React context to communicate the active context panel width up and down the tree.
@@ -23,6 +23,7 @@ import React from 'react';
 // positionedOverEditor is used to determine whether the context panel is positioned over the Editor so we are
 // able to position and add margins to handle certain elements like inline comment dialogues overlapping the context
 // panel
+
 export var ContextPanel = /*#__PURE__*/React.createContext({
   width: 0,
   positionedOverEditor: false,

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

@@ -8,7 +8,7 @@ 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() { 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; })(); }
 /** @jsx jsx */
 
 import { Component } from 'react';
@@ -17,7 +17,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.11.4";
+var packageVersion = "78.11.5";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -6,7 +6,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React, { PureComponent } from 'react';
 import { ResourcedEmoji } from '@atlaskit/emoji/element';
 import { ProviderFactory, WithProviders } from '../../provider-factory';

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

@@ -6,7 +6,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import { ACTION, EVENT_TYPE } from '../../analytics';
 import { logException } from '../../monitoring/error';

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

@@ -11,7 +11,7 @@ import { defineMessages } from 'react-intl-next';
 import { akEditorLineHeight, akEditorSwoopCubicBezier, akLayoutGutterOffset, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { B300, N200, N200A, N300A, N30A, N40A, N50A, N90 } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { fontSize, gridSize } from '@atlaskit/theme/constants';
+import { fontSize } from '@atlaskit/theme/constants';
 export var messages = defineMessages({
   collapseNode: {
     id: 'fabric.editor.collapseNode',
@@ -78,7 +78,7 @@ var containerStyles = function containerStyles(styleProps) {
 };
 var contentStyles = function contentStyles(styleProps) {
   return function () {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding-top: ", ";\n    padding-right: ", ";\n    // TODO: Migrate away from gridSize\n    // Recommendation: Replace gridSize with 8 if important to highlight 8*4 - 8/2, or directly replace with 28px\n    padding-left: ", "px;\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)", gridSize() * 4 - gridSize() / 2, !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 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      " : '');
   };
 };
 var titleInputStyles = function titleInputStyles() {

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

@@ -6,7 +6,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import { IntlProvider } from 'react-intl-next';
 export var REACT_INTL_ERROR_MESSAGE = '<IntlProvider> needs to exist in the component ancestry';

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

@@ -8,7 +8,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _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; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React, { Component } from 'react';
 import Popper from 'popper.js'; // eslint-disable-line import/extensions
 import rafSchedule from 'raf-schd';
@@ -151,7 +151,6 @@ var Layer = /*#__PURE__*/function (_Component) {
             boundariesElement: 'viewport',
             padding: 0 // leave 0 pixels between popper and the boundariesElement
           },
-
           preventOverflow: {
             enabled: false,
             escapeWithReference: true

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

@@ -6,7 +6,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React, { PureComponent } from 'react';
 import { ProviderFactory, WithProviders } from '../../provider-factory';
 import MentionWithProviders from './mention-with-providers';

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

@@ -7,7 +7,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React, { PureComponent } from 'react';
 import { ResourcedMention } from '@atlaskit/mention/element';
 import ResourcedMentionWithProfilecard from './mention-with-profilecard';

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

@@ -2,8 +2,6 @@
 
 import { css } from '@emotion/react';
 import { N30, N40 } from '@atlaskit/theme/colors';
-import { BODIED_EXT_MBE_MARGIN_TOP } from '../../styles';
-
 // Wraps the navigation bar and extensionFrames
 var mbeExtensionContainer = css({
   background: 'transparent !important',
@@ -62,7 +60,7 @@ var extensionFrameContent = css({
     paddingRight: "var(--ds-space-150, 12px)".concat(" !important")
   },
   '.bodiedExtensionView-content-wrap': {
-    marginTop: "".concat(BODIED_EXT_MBE_MARGIN_TOP, "px !important")
+    marginTop: "var(--ds-space-150, 12px)".concat(" !important")
   },
   '.extensionView-content-wrap': {
     marginTop: "var(--ds-space-100, 8px)".concat(" !important")

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

@@ -7,7 +7,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import { ShadowObserver, shadowObserverClassNames } from './shadowObserver';
 export var shadowClassNames = {

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

@@ -7,7 +7,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /** @jsx jsx */
 
 import { PureComponent } from 'react';

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

@@ -8,7 +8,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _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; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import createFocusTrap from 'focus-trap';
 import rafSchedule from 'raf-schd';

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

@@ -8,7 +8,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _class4;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import PropTypes from 'prop-types';
 import { createPortal, unmountComponentAtNode, unstable_renderSubtreeIntoContainer } from 'react-dom';

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

@@ -8,7 +8,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _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; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import classnames from 'classnames';
 import { Resizable } from 're-resizable';

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

@@ -13,7 +13,7 @@ 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: 10px 0;\n  min-height: 24px;\n  padding: 10px;\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 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 UnsupportedBlockNode = function UnsupportedBlockNode(_ref) {
   var node = _ref.node,
     intl = _ref.intl,

package/dist/esm/ui/UnsupportedInline/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,21 @@ 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 inlineNodeStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: inline-flex;\n  font-size: ", ";\n  margin: 0 ", ";\n  min-height: 24px;\n  padding: 0 10px;\n  vertical-align: middle;\n  white-space: nowrap;\n"])), "var(--ds-background-disabled, ".concat(N30, ")"), "var(--ds-border-disabled, ".concat(N50, ")"), borderRadius(), relativeFontSizeToBase16(fontSize()), "var(--ds-space-025, 2px)");
+var inlineNodeStyle = css({
+  alignItems: 'center',
+  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: 'inline-flex',
+  fontSize: relativeFontSizeToBase16(fontSize()),
+  margin: "0 ".concat("var(--ds-space-025, 2px)"),
+  minHeight: '24px',
+  padding: "0 ".concat("var(--ds-space-100, 8px)"),
+  verticalAlign: 'middle',
+  whiteSpace: 'nowrap'
+});
 var UnsupportedInlineNode = function UnsupportedInlineNode(_ref) {
   var node = _ref.node,
     intl = _ref.intl,

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

@@ -4,7 +4,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 export var WithCreateAnalyticsEvent = withAnalyticsEvents()( /*#__PURE__*/function (_React$Component) {

package/dist/esm/ui/with-outer-listeners.js

@@ -6,7 +6,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React, { PureComponent } from 'react';
 import ReactDOM from 'react-dom';
 export default function withOuterListeners(Component) {

package/dist/esm/ui-color/ColorPalette/Color/index.js

@@ -6,7 +6,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /** @jsx jsx */
 import React, { PureComponent } from 'react';
 import { jsx } from '@emotion/react';

package/dist/esm/ui-color/ColorPalette/Color/styles.js

@@ -1,14 +1,30 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
 import { css } from '@emotion/react';
 import { N0, N50, N900 } from '@atlaskit/theme/colors';
-
 /** this is not new usage - old code extracted from editor-core */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-export var buttonStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 26px;\n  width: 26px;\n  background: ", ";\n  padding: 0;\n  border-radius: 4px;\n  border: 1px solid ", ";\n  cursor: pointer;\n  display: block;\n"])), N900, N0);
+export var buttonStyle = css({
+  height: '26px',
+  width: '26px',
+  background: "var(--ds-background-neutral, ".concat(N900, ")"),
+  padding: 0,
+  borderRadius: '4px',
+  border: "1px solid ".concat("var(--ds-border-inverse, ".concat(N0, ")")),
+  cursor: 'pointer',
+  display: 'block'
+});
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 /** this is not new usage - old code extracted from editor-core */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-export var buttonWrapperStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border: 1px solid transparent;\n  margin: 1px;\n  font-size: 0;\n  display: flex;\n  align-items: center;\n  padding: 1px;\n  border-radius: 6px;\n  &:focus-within,\n  &:focus,\n  &:hover {\n    border-color: ", " !important;\n  }\n"])), N50);
+export var buttonWrapperStyle = css({
+  border: '1px solid transparent',
+  fontSize: 0,
+  display: 'flex',
+  alignItems: 'center',
+  padding: "var(--ds-space-025, 2px)",
+  borderRadius: '6px',
+  '&:focus-within, &:focus, &:hover': {
+    borderColor: "".concat("var(--ds-border, ".concat(N50, ")"), " !important")
+  }
+});
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */

package/dist/esm/ui-menu/ColorPickerButton/index.js

@@ -1,6 +1,4 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
@@ -17,14 +15,23 @@ import { ArrowKeyNavigationProvider } from '../ArrowKeyNavigationProvider';
 import { ArrowKeyNavigationType } from '../ArrowKeyNavigationProvider/types';
 
 // helps adjusts position of popup
-var colorPickerButtonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-var colorPickerExpandContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: 0px ", ";\n"])), "var(--ds-space-negative-050, -4px)");
+var colorPickerButtonWrapper = css({
+  position: 'relative'
+});
+var colorPickerExpandContainer = css({
+  margin: "0px ".concat("var(--ds-space-negative-050, -4px)")
+});
 
 // Control the size of color picker buttons and preview
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4134
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 var colorPickerWrapper = function colorPickerWrapper() {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  background-color: ", ";\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  padding: ", " 0px;\n"])), "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, ".concat(N0, ")"), N60A, N60A, "var(--ds-space-100, 8px)");
+  return css({
+    borderRadius: "var(--ds-border-radius, 3px)",
+    backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
+    boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"),
+    padding: "var(--ds-space-100, 8px)".concat(" 0px")
+  });
 };
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
@@ -157,8 +164,28 @@ var ColorPickerButton = function ColorPickerButton(props) {
   var currentColor = props.currentColor && props.hexToPaletteColor ? props.hexToPaletteColor(props.currentColor) : props.currentColor;
   var buttonStyle = function buttonStyle() {
     var _props$size, _props$size2, _props$size3;
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    padding: ", " 10px;\n    background-color: ", ";\n    ", "\n    &:before {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      align-self: center;\n      content: '';\n      border: 1px solid ", ";\n      border-radius: ", ";\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      padding: 0;\n      margin: 0px ", ";\n    }\n    &:hover {\n      background: ", ";\n    }\n  "])), "var(--ds-space-075, 6px)", "var(--ds-background-neutral-subtle, transparent)", /* If custom props size height, override the button base height property */
-    !!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) && "height: inherit;", DEFAULT_BORDER_COLOR, "var(--ds-border-radius, 3px)", currentColor || 'transparent', ((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.width) || '14px', ((_props$size3 = props.size) === null || _props$size3 === void 0 ? void 0 : _props$size3.height) || '14px', "var(--ds-space-025, 2px)", "var(--ds-background-neutral-subtle-hovered, ".concat(N30A, ")"));
+    return css({
+      padding: "var(--ds-space-075, 6px)".concat(" 10px"),
+      backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
+      height: "".concat(!!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) ? 'inherit' : ''),
+      '&:before': {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        alignSelf: 'center',
+        content: "''",
+        border: "1px solid ".concat(DEFAULT_BORDER_COLOR),
+        borderRadius: "var(--ds-border-radius, 3px)",
+        backgroundColor: currentColor || 'transparent',
+        width: ((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.width) || '14px',
+        height: ((_props$size3 = props.size) === null || _props$size3 === void 0 ? void 0 : _props$size3.height) || '14px',
+        padding: 0,
+        margin: "0px ".concat("var(--ds-space-025, 2px)")
+      },
+      '&:hover': {
+        background: "var(--ds-background-neutral-subtle-hovered, ".concat(N30A, ")")
+      }
+    });
   };
   return jsx("div", {
     css: colorPickerButtonWrapper