@atlaskit/editor-plugin-table 1.0.1 → 1.0.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-table
 
+## 1.0.3
+
+### Patch Changes
+
+- [`20117f2de5a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/20117f2de5a) - [ux] ED-16204 Fix table cell options floating toolbar context menu closes after clicking on disabled options
+- [`c6c0cab10e0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c6c0cab10e0) - [ux] ED-16205 - Fix missing yellow highlight on merged table cells when hover sort column options on table floating toolbar
+- [`e3b699e5069`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e3b699e5069) - ED-15794 - Fix merged cells in table not highlighting on delete hover when in bottom right corner
+- [`746d7339a88`](https://bitbucket.org/atlassian/atlassian-frontend/commits/746d7339a88) - [ux] ED-15823 - Table cells on the second column would change their color upon unchecking "Header Column" table option when the selection cursor was placed in the 3rd column. This was caused by a view update not identifying the cells to update correctly. This was causing table data cells to be changed to table header cells.
+- Updated dependencies
+
+## 1.0.2
+
+### Patch Changes
+
+- [`6455cf006b3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6455cf006b3) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving performance.
+
 ## 1.0.1
 
 ### Patch Changes

package/dist/cjs/plugins/table/toolbar.js

@@ -264,6 +264,18 @@ var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(editorSta
     options.push({
       id: 'editor.table.sortColumnAsc',
       title: formatMessage(_ContextualMenu.messages.sortColumnASC),
+      onMouseOver: function onMouseOver(state, dispatch) {
+        if ((0, _utils.getMergedCellsPositions)(state.tr).length !== 0) {
+          (0, _commands.hoverMergedCells)()(state, dispatch);
+          return true;
+        }
+
+        return false;
+      },
+      onMouseOut: function onMouseOut(state, dispatch) {
+        (0, _commands.clearHoverSelection)()(state, dispatch);
+        return true;
+      },
       onClick: function onClick(state, dispatch) {
         (0, _commandsWithAnalytics.sortColumnWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB, initialSelectionRect.left, _steps.TableSortOrder.ASC)(state, dispatch);
         return true;
@@ -275,6 +287,18 @@ var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(editorSta
     options.push({
       id: 'editor.table.sortColumnDesc',
       title: formatMessage(_ContextualMenu.messages.sortColumnDESC),
+      onMouseOver: function onMouseOver(state, dispatch) {
+        if ((0, _utils.getMergedCellsPositions)(state.tr).length !== 0) {
+          (0, _commands.hoverMergedCells)()(state, dispatch);
+          return true;
+        }
+
+        return false;
+      },
+      onMouseOut: function onMouseOut(state, dispatch) {
+        (0, _commands.clearHoverSelection)()(state, dispatch);
+        return true;
+      },
       onClick: function onClick(state, dispatch) {
         (0, _commandsWithAnalytics.sortColumnWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB, initialSelectionRect.left, _steps.TableSortOrder.DESC)(state, dispatch);
         return true;

package/dist/cjs/plugins/table/ui/FloatingContextualButton/styles.js

@@ -17,22 +17,20 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _consts = require("../consts");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _components = require("@atlaskit/theme/components");
 
 var _templateObject, _templateObject2;
 
 var tableFloatingCellButtonStyles = function tableFloatingCellButtonStyles(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  > div {\n    // Sits behind button to provide surface-color background\n    background: ", ";\n    border-radius: ", "px;\n    display: flex;\n    height: ", "px;\n    flex-direction: column;\n  }\n  && button {\n    background: ", ";\n    flex-direction: column;\n    margin: 2px;\n    outline: 2px solid ", ";\n    border-radius: 1px;\n    padding: 0;\n    height: calc(100% - 4px);\n    display: flex;\n  }\n  && button:hover {\n    background: ", ";\n  }\n  && button:active {\n    background: ", ";\n  }\n  && button > span {\n    margin: 0px -4px;\n  }\n  && span {\n    pointer-events: none;\n  }\n"])), (0, _tokens.token)('elevation.surface', _colors.N20), (0, _constants.borderRadius)(), _consts.contextualMenuTriggerSize + 2, (0, _components.themed)({
-    light: (0, _tokens.token)('color.background.neutral', 'none'),
-    dark: (0, _tokens.token)('color.background.neutral', 'none')
-  })(props), (0, _tokens.token)('color.border', _colors.N0), (0, _components.themed)({
-    light: (0, _tokens.token)('color.background.neutral.hovered', _colors.N30A),
-    dark: (0, _tokens.token)('color.background.neutral.hovered', _colors.DN60)
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  > div {\n    // Sits behind button to provide surface-color background\n    background: ", ";\n    border-radius: ", "px;\n    display: flex;\n    height: ", "px;\n    flex-direction: column;\n  }\n  && button {\n    background: ", ";\n    flex-direction: column;\n    margin: 2px;\n    outline: 2px solid ", ";\n    border-radius: 1px;\n    padding: 0;\n    height: calc(100% - 4px);\n    display: flex;\n  }\n  && button:hover {\n    background: ", ";\n  }\n  && button:active {\n    background: ", ";\n  }\n  && button > span {\n    margin: 0px -4px;\n  }\n  && span {\n    pointer-events: none;\n  }\n"])), "var(--ds-surface, ".concat(_colors.N20, ")"), (0, _constants.borderRadius)(), _consts.contextualMenuTriggerSize + 2, (0, _components.themed)({
+    light: "var(--ds-background-neutral, none)",
+    dark: "var(--ds-background-neutral, none)"
+  })(props), "var(--ds-border, ".concat(_colors.N0, ")"), (0, _components.themed)({
+    light: "var(--ds-background-neutral-hovered, ".concat(_colors.N30A, ")"),
+    dark: "var(--ds-background-neutral-hovered, ".concat(_colors.DN60, ")")
   })(props), (0, _components.themed)({
-    light: (0, _tokens.token)('color.background.neutral.pressed', 'rgba(179, 212, 255, 0.6)'),
-    dark: (0, _tokens.token)('color.background.neutral.pressed', _colors.B75)
+    light: "var(--ds-background-neutral-pressed, rgba(179, 212, 255, 0.6))",
+    dark: "var(--ds-background-neutral-pressed, ".concat(_colors.B75, ")")
   })(props));
 };
 
@@ -40,14 +38,14 @@ exports.tableFloatingCellButtonStyles = tableFloatingCellButtonStyles;
 
 var tableFloatingCellButtonSelectedStyles = function tableFloatingCellButtonSelectedStyles(props) {
   return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  && button {\n    background: ", ";\n  }\n  && button:hover {\n    background: ", ";\n  }\n  && button:active {\n    background: ", ";\n  }\n"])), (0, _components.themed)({
-    light: (0, _tokens.token)('color.background.selected', _colors.N700),
-    dark: (0, _tokens.token)('color.background.selected', _colors.DN0)
+    light: "var(--ds-background-selected, ".concat(_colors.N700, ")"),
+    dark: "var(--ds-background-selected, ".concat(_colors.DN0, ")")
   })(props), (0, _components.themed)({
-    light: (0, _tokens.token)('color.background.selected.hovered', _colors.N700),
-    dark: (0, _tokens.token)('color.background.selected.hovered', _colors.DN0)
+    light: "var(--ds-background-selected-hovered, ".concat(_colors.N700, ")"),
+    dark: "var(--ds-background-selected-hovered, ".concat(_colors.DN0, ")")
   })(props), (0, _components.themed)({
-    light: (0, _tokens.token)('color.background.selected.pressed', _colors.N700),
-    dark: (0, _tokens.token)('color.background.selected.pressed', _colors.DN0)
+    light: "var(--ds-background-selected-pressed, ".concat(_colors.N700, ")"),
+    dark: "var(--ds-background-selected-pressed, ".concat(_colors.DN0, ")")
   })(props));
 };
 

package/dist/cjs/plugins/table/ui/FloatingContextualMenu/styles.js

@@ -21,8 +21,6 @@ var _types = require("../../types");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2;
 
 var cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
@@ -30,5 +28,5 @@ var cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
 };
 
 exports.cellColourPreviewStyles = cellColourPreviewStyles;
-var tablePopupStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    border-radius: ", "px;\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: 8px;\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", "px;\n      width: 20px;\n      height: 20px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: 4px;\n      line-height: 20px;\n      color: ", ";\n    }\n  }\n"])), _types.TableCssClassName.CONTEXTUAL_SUBMENU, (0, _constants.borderRadius)(), (0, _tokens.token)('elevation.surface.overlay', 'white'), (0, _tokens.token)('elevation.shadow.overlay', "0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A)), _consts.contextualMenuDropdownWidth, _types.TableCssClassName.CONTEXTUAL_MENU_ICON, _adfSchema.tableBackgroundBorderColor, (0, _constants.borderRadius)(), (0, _tokens.token)('color.icon', _colors.N90));
+var tablePopupStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    border-radius: ", "px;\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: 8px;\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", "px;\n      width: 20px;\n      height: 20px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: 4px;\n      line-height: 20px;\n      color: ", ";\n    }\n  }\n"])), _types.TableCssClassName.CONTEXTUAL_SUBMENU, (0, _constants.borderRadius)(), "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), _consts.contextualMenuDropdownWidth, _types.TableCssClassName.CONTEXTUAL_MENU_ICON, _adfSchema.tableBackgroundBorderColor, (0, _constants.borderRadius)(), "var(--ds-icon, ".concat(_colors.N90, ")"));
 exports.tablePopupStyles = tablePopupStyles;

package/dist/cjs/plugins/table/ui/common-styles.js

@@ -27,8 +27,6 @@ var _consts = require("./consts");
 
 var _uiStyles = require("./ui-styles");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3;
 
 var cornerControlHeight = _consts.tableToolbarSize + 1;
@@ -48,7 +46,7 @@ var listLargeNumericMarkersOldStyles = "\n  .ProseMirror .pm-table-cell-content-
 var tableStyles = function tableStyles(props) {
   var _props$featureFlags, _props$featureFlags2;
 
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " button {\n    background: ", ";\n    color: ", ";\n    cursor: none;\n  }\n\n  .", ":not(.", ") button:hover {\n    background: ", ";\n    color: ", " !important;\n    cursor: pointer;\n  }\n\n  .ProseMirror {\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n\n    .", " {\n      margin-bottom: 0;\n    }\n\n    .", " {\n      td.", ", th.", " {\n        position: relative;\n        overflow: visible;\n      }\n\n      td.", " {\n        background-color: ", ";\n\n        // ED-15246: Trello card is visible through a border of a table border\n        // This fixes a border issue caused by relative positioned table cells\n        &::after {\n          height: 100%;\n          content: '';\n          border-left: 1px solid ", ";\n          border-bottom: 1px solid ", ";\n          position: absolute;\n          right: 0px;\n          top: 0px;\n          bottom: 0;\n          width: 100%;\n          display: inline-block;\n          pointer-events: none;\n        }\n      }\n    }\n\n    .", " {\n      ", "\n    }\n\n    .", " {\n      ", "\n    }\n\n    /* Delete button */\n    ", "\n    /* Ends Delete button */\n\n    /* sticky styles */\n    .", " .", " .", ":first-of-type {\n      margin-top: ", "px;\n      width: ", "px;\n\n      position: fixed !important;\n      z-index: ", " !important;\n      box-shadow: 0px -", "px ", ";\n      border-right: 0 none;\n      /* top set by NumberColumn component */\n    }\n\n    .", " .", ".sticky {\n      position: fixed !important;\n      /* needs to be above row controls */\n      z-index: ", " !important;\n      background: ", ";\n\n      width: ", "px;\n      height: ", "px;\n    }\n\n    .", ".sticky .", " {\n      border-bottom: 0px none;\n      border-right: 0px none;\n\n      height: ", "px;\n      width: ", "px;\n    }\n\n    .", " .", " {\n      z-index: 0;\n    }\n\n    .", "\n      .", "\n      .", ".sticky {\n      position: fixed !important;\n      z-index: ", " !important;\n      display: flex;\n      border-left: ", "px solid\n        ", ";\n      margin-left: -", "px;\n    }\n\n    .", " col:first-of-type {\n      /* moving rows out of a table layout does weird things in Chrome */\n      border-right: 1px solid ", ";\n    }\n\n    tr.sticky {\n      padding-top: ", "px;\n      position: fixed;\n      display: grid;\n\n      /* to keep it above cell selection */\n      z-index: ", ";\n\n      overflow-y: visible;\n      overflow-x: hidden;\n\n      grid-auto-flow: column;\n\n      /* background for where controls apply */\n      background: ", ";\n      box-sizing: content-box;\n\n      margin-top: 2px;\n\n      box-shadow: ", ";\n      margin-left: -1px;\n\n      &.no-pointer-events {\n        pointer-events: none;\n      }\n    }\n\n    .", " .", " {\n      left: unset;\n      position: fixed;\n      z-index: ", ";\n    }\n\n    .", ".", "\n      .", " {\n      padding-bottom: ", "px;\n    }\n\n    tr.sticky th {\n      border-bottom: ", "px solid\n        ", ";\n      margin-right: -1px;\n    }\n\n    .", " tr.sticky > th:last-child {\n      border-right-width: 1px;\n    }\n\n    /* add left edge for first cell */\n    .", " tr.sticky > th:first-of-type {\n      margin-left: 0px;\n    }\n\n    /* add a little bit so the scroll lines up with the table */\n    .", " tr.sticky::after {\n      content: ' ';\n      width: ", "px;\n    }\n\n    /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n    .", " .sticky + tr {\n      min-height: 0px;\n    }\n\n    /* move resize line a little in sticky bar */\n    .", ".", " {\n      tr.sticky\n        td.", ",\n        tr.sticky\n        th.", " {\n        .", "::after {\n          right: ", "px;\n        }\n      }\n\n      /* when selected put it back to normal -- :not selector would be nicer */\n      tr.sticky\n        td.", ".", ",\n        tr.sticky\n        th.", ".", " {\n        .", "::after {\n          right: ", "px;\n        }\n      }\n    }\n\n    tr.sticky\n      .", ",\n      tr.sticky\n      .", " {\n      z-index: 1;\n    }\n\n    .", " tr.sticky {\n      padding-top: ", "px;\n    }\n\n    .", ".", "\n      .", "\n      .", ":first-of-type {\n      margin-top: ", "px;\n    }\n\n    .", ".sticky {\n      border-top: ", "px solid\n        ", ";\n    }\n\n    ", "\n    ", "\n\n    .", " .", " {\n      height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n    }\n\n    .less-padding {\n      padding: 0 ", "px;\n\n      .", " {\n        padding: 0 ", "px;\n      }\n\n      &.", "[data-number-column='true'] {\n        padding-left: ", "px;\n      }\n\n      .", " {\n        left: 6px;\n      }\n\n      .", " {\n        left: calc(100% - 6px);\n      }\n    }\n\n    > .", " {\n      /**\n       * Prevent margins collapsing, aids with placing the gap-cursor correctly\n       * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n       *\n       * TODO: Enable this, many tests will fail!\n       * border-top: 1px solid transparent;\n       */\n    }\n\n    /* Breakout only works on top level */\n    > * .", " .", " {\n      margin-left: unset !important;\n      width: 100% !important;\n    }\n\n    ", ";\n\n    /* Corner controls */\n    .", " {\n      width: ", "px;\n      height: ", "px;\n      display: none;\n\n      .", " {\n        position: relative;\n\n        ", ";\n      }\n    }\n\n    .", ".sticky {\n      .", " {\n        /* sticky row insert dot overlaps other row insert and messes things up */\n        display: none !important;\n      }\n    }\n\n    .", " {\n      position: absolute;\n      top: 0;\n      width: ", "px;\n      height: ", "px;\n      border: 1px solid ", ";\n      border-radius: 0;\n      border-top-left-radius: ", "px;\n      background: ", ";\n      box-sizing: border-box;\n      padding: 0;\n      :focus {\n        outline: none;\n      }\n    }\n    .active .", " {\n      border-color: ", ";\n      background: ", ";\n    }\n\n    .", "[data-number-column='true'] {\n      .", ", .", " {\n        width: ", "px;\n      }\n      .", " .", " {\n        border-right-width: 0;\n      }\n    }\n\n    :not(.", ") .", ":hover {\n      border-color: ", ";\n      background: ", ";\n      cursor: pointer;\n    }\n\n    :not(.", ")\n      .", ".", " {\n      border-color: ", ";\n      background: ", ";\n    }\n\n    /* Row controls */\n    .", " {\n      width: ", "px;\n      box-sizing: border-box;\n      display: none;\n      position: relative;\n\n      ", ";\n\n      .", " {\n        display: flex;\n        flex-direction: column;\n      }\n      .", ":last-child > button {\n        border-bottom-left-radius: ", "px;\n      }\n      .", " {\n        position: relative;\n        margin-top: -1px;\n      }\n      .", ":hover,\n        .", ".active,\n        .", ":hover {\n        z-index: ", ";\n      }\n\n      ", "\n    }\n\n    :not(.", ") .", " {\n      ", "\n      ", "\n    }\n\n    /* Numbered column */\n    .", " {\n      position: relative;\n      float: right;\n      margin-left: ", "px;\n      top: ", "px;\n      width: ", "px;\n      box-sizing: border-box;\n    }\n\n    .", " {\n      border: 1px solid ", ";\n      box-sizing: border-box;\n      margin-top: -1px;\n      padding-bottom: 2px;\n      padding: 10px 2px;\n      text-align: center;\n      font-size: ", ";\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n\n      :first-child:not(style),\n      style:first-child + * {\n        margin-top: 0;\n      }\n      :last-child {\n        border-bottom: 1px solid ", ";\n      }\n    }\n\n    .", " {\n      .", ", .", " {\n        display: block;\n      }\n      .", " {\n        padding-left: 1px;\n        .", " {\n          border-left: 0 none;\n        }\n\n        .", ".active {\n          border-bottom: 1px solid ", ";\n          border-color: ", ";\n          background-color: ", ";\n          position: relative;\n          z-index: ", ";\n          color: ", ";\n        }\n      }\n    }\n    :not(.", ") .", " {\n      .", " {\n        cursor: pointer;\n      }\n      .", ":hover {\n        border-bottom: 1px solid ", ";\n        border-color: ", ";\n        background-color: ", ";\n        position: relative;\n        z-index: ", ";\n        color: ", ";\n      }\n      .", ".", " {\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-left: 0;\n        color: ", ";\n        position: relative;\n        z-index: ", ";\n      }\n    }\n\n    /* Table */\n    .", " > table {\n      table-layout: fixed;\n      white-space: normal;\n      border-top: none;\n\n      > tbody > tr {\n        white-space: pre-wrap;\n      }\n\n      .", " + * {\n        margin-top: 0;\n      }\n\n      /*\n       * Headings have a top margin by default, but we don't want this on the\n       * first heading within table header cells.\n       *\n       * This specifically sets margin-top for the first heading within a header\n       * cell when center/right aligned.\n       */\n      th.", " > .fabric-editor-block-mark {\n        > h1:first-of-type,\n        > h2:first-of-type,\n        > h3:first-of-type,\n        > h4:first-of-type,\n        > h5:first-of-type,\n        > h6:first-of-type {\n          margin-top: 0;\n        }\n      }\n\n      .", ", .", " {\n        position: relative;\n      }\n      /* Give selected cells a blue overlay */\n      .", "::after,\n        .", "::after {\n        z-index: ", ";\n        position: absolute;\n        content: '';\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        pointer-events: none;\n      }\n      .", " {\n        border: 1px solid ", ";\n      }\n      .", "::after {\n        background: ", ";\n        z-index: ", ";\n      }\n      th.", "::after,\n        td.", "::after {\n        background: ", ";\n        z-index: ", ";\n      }\n      // ED-15246: Trello card is visible through a border of a table border\n      td.", ", td.", " {\n        &::after {\n          height: 100%;\n          width: 100%;\n          border: 1px solid ", ";\n          content: '';\n          position: absolute;\n          left: -1px;\n          top: -1px;\n          bottom: 0;\n          z-index: ", ";\n          display: inline-block;\n          pointer-events: none;\n        }\n        &.", "::after {\n          border: 1px solid ", ";\n          z-index: ", ";\n        }\n      }\n    }\n    .", " {\n      position: absolute;\n      /* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n      top: ", "px;\n    }\n    .", ".", " {\n      z-index: ", ";\n    }\n    .", " {\n      left: -", "px;\n    }\n    .", " {\n      padding-right: ", "px;\n      margin-right: -", "px;\n      padding-bottom: ", "px;\n      margin-bottom: -", "px;\n      /* fixes gap cursor height */\n      overflow: auto;\n      position: relative;\n    }\n  }\n\n  .ProseMirror.", " {\n    .", " {\n      overflow-x: auto;\n      ", ";\n    }\n  }\n\n  .ProseMirror.", " {\n    cursor: col-resize;\n  }\n\n  /* \n  ED-15882: When custom start numbers is enabled for lists, we have\n  styles that handle this generally (in editor-common) so we can\n  throw away the older table-specific styles here.\n  */\n  ", "\n"])), _types.TableCssClassName.LAYOUT_BUTTON, (0, _tokens.token)('color.background.neutral', _colors.N20A), (0, _tokens.token)('color.icon', _colors.N300), _types.TableCssClassName.LAYOUT_BUTTON, _types.TableCssClassName.IS_RESIZING, (0, _tokens.token)('color.background.neutral.hovered', _colors.B300), (0, _tokens.token)('color.icon', 'white'), (0, _styles.tableSharedStyle)(props), (0, _uiStyles.columnControlsLineMarker)(props), _uiStyles.hoveredDeleteButton, _uiStyles.hoveredCell, _uiStyles.hoveredWarningCell, _uiStyles.resizeHandle, rangeSelectionStyles, _types.TableCssClassName.LAST_ITEM_IN_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_CELL, (0, _consts.tableCellBackgroundColor)(props), (0, _consts.tableBorderColor)(props), (0, _consts.tableBorderColor)(props), _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN, _uiStyles.insertColumnButtonWrapper, _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW, _uiStyles.insertRowButtonWrapper, _uiStyles.DeleteButton, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.stickyRowOffsetTop + 2, _editorSharedStyles.akEditorTableNumberColumnWidth, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.stickyRowOffsetTop, (0, _tokens.token)('elevation.surface', 'white'), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.CORNER_CONTROLS, _editorSharedStyles.akEditorSmallZIndex, (0, _tokens.token)('elevation.surface', 'white'), _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.tableToolbarSize, (0, _tokens.token)('elevation.surface', 'white'), _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, (0, _tokens.token)('elevation.surface', 'green'), _consts.stickyRowOffsetTop, _consts.stickyRowZIndex, (0, _tokens.token)('elevation.surface', 'white'), (0, _tokens.token)('elevation.shadow.overflow', "0 6px 4px -4px ".concat(_colors.N40A)), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.stickyRowZIndex + 1, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tableToolbarSize, _consts.stickyHeaderBorderBottomWidth, (0, _consts.tableBorderColor)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, insertColumnButtonOffset + 1, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2 + 1, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_CONTROLS, _consts.tableControlsSpacing, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableControlsSpacing + 2, _types.TableCssClassName.CORNER_CONTROLS, _consts.tableControlsSpacing - _consts.tableToolbarSize + 2, (0, _tokens.token)('elevation.surface', 'white'), (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : '', (0, _uiStyles.OverflowShadow)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tablePadding, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tablePadding, _types.TableCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts.tablePadding - 1, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.NODEVIEW_WRAPPER, _types.TableCssClassName.NODEVIEW_WRAPPER, _types.TableCssClassName.TABLE_CONTAINER, (0, _uiStyles.columnControlsDecoration)(props), _types.TableCssClassName.CORNER_CONTROLS, _consts.tableToolbarSize + 1, cornerControlHeight, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, (0, _uiStyles.InsertMarker)(props, "\n          left: -11px;\n          top: 9px;\n        "), _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize + 1, _consts.tableToolbarSize + 1, (0, _consts.tableBorderColor)(props), _consts.tableBorderRadiusSize, (0, _consts.tableToolbarColor)(props), _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, (0, _tokens.token)('color.background.selected', _consts.tableToolbarSelectedColor), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _editorSharedStyles.akEditorTableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.CONTROLS_BUTTON, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, (0, _tokens.token)('color.background.selected', _consts.tableToolbarSelectedColor), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableBorderDeleteColor, (0, _tokens.token)('color.background.danger', _consts.tableToolbarDeleteColor), _types.TableCssClassName.ROW_CONTROLS, _consts.tableToolbarSize, (0, _uiStyles.InsertMarker)(props, "\n        bottom: -1px;\n        left: -11px;\n      "), _types.TableCssClassName.ROW_CONTROLS_INNER, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _consts.tableBorderRadiusSize, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_BUTTON, _editorSharedStyles.akEditorUnitZIndex, (0, _uiStyles.HeaderButton)(props, "\n        border-bottom: 1px solid ".concat((0, _consts.tableBorderColor)(props), ";\n        border-right: 0px;\n        border-radius: 0;\n        height: 100%;\n        width: ").concat(_consts.tableToolbarSize, "px;\n\n        .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, " {\n          position: absolute;\n          width: 30px;\n          height: 50%;\n          right: 0;\n          bottom: 0;\n        }\n        .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n          top: 0;\n        }\n      ")), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.ROW_CONTROLS, (0, _uiStyles.HeaderButtonHover)(), (0, _uiStyles.HeaderButtonDanger)(), _types.TableCssClassName.NUMBERED_COLUMN, _editorSharedStyles.akEditorTableToolbarSize - 1, _editorSharedStyles.akEditorTableToolbarSize, _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, (0, _consts.tableBorderColor)(props), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _consts.tableToolbarColor)(props), (0, _consts.tableTextColor)(props), (0, _consts.tableBorderColor)(props), (0, _consts.tableBorderColor)(props), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, (0, _tokens.token)('color.background.selected', _consts.tableToolbarSelectedColor), _editorSharedStyles.akEditorUnitZIndex, (0, _tokens.token)('color.text.selected', _colors.N0), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, (0, _tokens.token)('color.background.selected', _consts.tableToolbarSelectedColor), _editorSharedStyles.akEditorUnitZIndex, (0, _tokens.token)('color.text.selected', _colors.N0), _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, (0, _tokens.token)('color.background.danger', _consts.tableToolbarDeleteColor), _consts.tableBorderDeleteColor, (0, _tokens.token)('color.text.danger', _colors.R500), _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.SELECTED_CELL, _consts.tableBorderSelectedColor, _types.TableCssClassName.SELECTED_CELL, _consts.tableCellSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableCellDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _consts.tableBorderSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _styles.tableMarginTop - cornerControlHeight + 1, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_NODE_WRAPPER, insertColumnButtonOffset, insertColumnButtonOffset, _consts.tableScrollbarOffset, _consts.tableScrollbarOffset, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_NODE_WRAPPER, _scrollbar.scrollbarStyles, _types.TableCssClassName.RESIZE_CURSOR, props !== null && props !== void 0 && (_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.restartNumberedLists ? "" : listLargeNumericMarkersOldStyles);
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " button {\n    background: ", ";\n    color: ", ";\n    cursor: none;\n  }\n\n  .", ":not(.", ") button:hover {\n    background: ", ";\n    color: ", " !important;\n    cursor: pointer;\n  }\n\n  .ProseMirror {\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n\n    .", " {\n      margin-bottom: 0;\n    }\n\n    .", " {\n      td.", ", th.", " {\n        position: relative;\n        overflow: visible;\n      }\n\n      td.", " {\n        background-color: ", ";\n\n        // ED-15246: Trello card is visible through a border of a table border\n        // This fixes a border issue caused by relative positioned table cells\n        &::after {\n          height: 100%;\n          content: '';\n          border-left: 1px solid ", ";\n          border-bottom: 1px solid ", ";\n          position: absolute;\n          right: 0px;\n          top: 0px;\n          bottom: 0;\n          width: 100%;\n          display: inline-block;\n          pointer-events: none;\n        }\n      }\n    }\n\n    .", " {\n      ", "\n    }\n\n    .", " {\n      ", "\n    }\n\n    /* Delete button */\n    ", "\n    /* Ends Delete button */\n\n    /* sticky styles */\n    .", " .", " .", ":first-of-type {\n      margin-top: ", "px;\n      width: ", "px;\n\n      position: fixed !important;\n      z-index: ", " !important;\n      box-shadow: 0px -", "px ", ";\n      border-right: 0 none;\n      /* top set by NumberColumn component */\n    }\n\n    .", " .", ".sticky {\n      position: fixed !important;\n      /* needs to be above row controls */\n      z-index: ", " !important;\n      background: ", ";\n\n      width: ", "px;\n      height: ", "px;\n    }\n\n    .", ".sticky .", " {\n      border-bottom: 0px none;\n      border-right: 0px none;\n\n      height: ", "px;\n      width: ", "px;\n    }\n\n    .", " .", " {\n      z-index: 0;\n    }\n\n    .", "\n      .", "\n      .", ".sticky {\n      position: fixed !important;\n      z-index: ", " !important;\n      display: flex;\n      border-left: ", "px solid\n        ", ";\n      margin-left: -", "px;\n    }\n\n    .", " col:first-of-type {\n      /* moving rows out of a table layout does weird things in Chrome */\n      border-right: 1px solid ", ";\n    }\n\n    tr.sticky {\n      padding-top: ", "px;\n      position: fixed;\n      display: grid;\n\n      /* to keep it above cell selection */\n      z-index: ", ";\n\n      overflow-y: visible;\n      overflow-x: hidden;\n\n      grid-auto-flow: column;\n\n      /* background for where controls apply */\n      background: ", ";\n      box-sizing: content-box;\n\n      margin-top: 2px;\n\n      box-shadow: ", ";\n      margin-left: -1px;\n\n      &.no-pointer-events {\n        pointer-events: none;\n      }\n    }\n\n    .", " .", " {\n      left: unset;\n      position: fixed;\n      z-index: ", ";\n    }\n\n    .", ".", "\n      .", " {\n      padding-bottom: ", "px;\n    }\n\n    tr.sticky th {\n      border-bottom: ", "px solid\n        ", ";\n      margin-right: -1px;\n    }\n\n    .", " tr.sticky > th:last-child {\n      border-right-width: 1px;\n    }\n\n    /* add left edge for first cell */\n    .", " tr.sticky > th:first-of-type {\n      margin-left: 0px;\n    }\n\n    /* add a little bit so the scroll lines up with the table */\n    .", " tr.sticky::after {\n      content: ' ';\n      width: ", "px;\n    }\n\n    /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n    .", " .sticky + tr {\n      min-height: 0px;\n    }\n\n    /* move resize line a little in sticky bar */\n    .", ".", " {\n      tr.sticky\n        td.", ",\n        tr.sticky\n        th.", " {\n        .", "::after {\n          right: ", "px;\n        }\n      }\n\n      /* when selected put it back to normal -- :not selector would be nicer */\n      tr.sticky\n        td.", ".", ",\n        tr.sticky\n        th.", ".", " {\n        .", "::after {\n          right: ", "px;\n        }\n      }\n    }\n\n    tr.sticky\n      .", ",\n      tr.sticky\n      .", " {\n      z-index: 1;\n    }\n\n    .", " tr.sticky {\n      padding-top: ", "px;\n    }\n\n    .", ".", "\n      .", "\n      .", ":first-of-type {\n      margin-top: ", "px;\n    }\n\n    .", ".sticky {\n      border-top: ", "px solid\n        ", ";\n    }\n\n    ", "\n    ", "\n\n    .", " .", " {\n      height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n    }\n\n    .less-padding {\n      padding: 0 ", "px;\n\n      .", " {\n        padding: 0 ", "px;\n      }\n\n      &.", "[data-number-column='true'] {\n        padding-left: ", "px;\n      }\n\n      .", " {\n        left: 6px;\n      }\n\n      .", " {\n        left: calc(100% - 6px);\n      }\n    }\n\n    > .", " {\n      /**\n       * Prevent margins collapsing, aids with placing the gap-cursor correctly\n       * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n       *\n       * TODO: Enable this, many tests will fail!\n       * border-top: 1px solid transparent;\n       */\n    }\n\n    /* Breakout only works on top level */\n    > * .", " .", " {\n      margin-left: unset !important;\n      width: 100% !important;\n    }\n\n    ", ";\n\n    /* Corner controls */\n    .", " {\n      width: ", "px;\n      height: ", "px;\n      display: none;\n\n      .", " {\n        position: relative;\n\n        ", ";\n      }\n    }\n\n    .", ".sticky {\n      .", " {\n        /* sticky row insert dot overlaps other row insert and messes things up */\n        display: none !important;\n      }\n    }\n\n    .", " {\n      position: absolute;\n      top: 0;\n      width: ", "px;\n      height: ", "px;\n      border: 1px solid ", ";\n      border-radius: 0;\n      border-top-left-radius: ", "px;\n      background: ", ";\n      box-sizing: border-box;\n      padding: 0;\n      :focus {\n        outline: none;\n      }\n    }\n    .active .", " {\n      border-color: ", ";\n      background: ", ";\n    }\n\n    .", "[data-number-column='true'] {\n      .", ", .", " {\n        width: ", "px;\n      }\n      .", " .", " {\n        border-right-width: 0;\n      }\n    }\n\n    :not(.", ") .", ":hover {\n      border-color: ", ";\n      background: ", ";\n      cursor: pointer;\n    }\n\n    :not(.", ")\n      .", ".", " {\n      border-color: ", ";\n      background: ", ";\n    }\n\n    /* Row controls */\n    .", " {\n      width: ", "px;\n      box-sizing: border-box;\n      display: none;\n      position: relative;\n\n      ", ";\n\n      .", " {\n        display: flex;\n        flex-direction: column;\n      }\n      .", ":last-child > button {\n        border-bottom-left-radius: ", "px;\n      }\n      .", " {\n        position: relative;\n        margin-top: -1px;\n      }\n      .", ":hover,\n        .", ".active,\n        .", ":hover {\n        z-index: ", ";\n      }\n\n      ", "\n    }\n\n    :not(.", ") .", " {\n      ", "\n      ", "\n    }\n\n    /* Numbered column */\n    .", " {\n      position: relative;\n      float: right;\n      margin-left: ", "px;\n      top: ", "px;\n      width: ", "px;\n      box-sizing: border-box;\n    }\n\n    .", " {\n      border: 1px solid ", ";\n      box-sizing: border-box;\n      margin-top: -1px;\n      padding-bottom: 2px;\n      padding: 10px 2px;\n      text-align: center;\n      font-size: ", ";\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n\n      :first-child:not(style),\n      style:first-child + * {\n        margin-top: 0;\n      }\n      :last-child {\n        border-bottom: 1px solid ", ";\n      }\n    }\n\n    .", " {\n      .", ", .", " {\n        display: block;\n      }\n      .", " {\n        padding-left: 1px;\n        .", " {\n          border-left: 0 none;\n        }\n\n        .", ".active {\n          border-bottom: 1px solid ", ";\n          border-color: ", ";\n          background-color: ", ";\n          position: relative;\n          z-index: ", ";\n          color: ", ";\n        }\n      }\n    }\n    :not(.", ") .", " {\n      .", " {\n        cursor: pointer;\n      }\n      .", ":hover {\n        border-bottom: 1px solid ", ";\n        border-color: ", ";\n        background-color: ", ";\n        position: relative;\n        z-index: ", ";\n        color: ", ";\n      }\n      .", ".", " {\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-left: 0;\n        color: ", ";\n        position: relative;\n        z-index: ", ";\n      }\n    }\n\n    /* Table */\n    .", " > table {\n      table-layout: fixed;\n      white-space: normal;\n      border-top: none;\n\n      > tbody > tr {\n        white-space: pre-wrap;\n      }\n\n      .", " + * {\n        margin-top: 0;\n      }\n\n      /*\n       * Headings have a top margin by default, but we don't want this on the\n       * first heading within table header cells.\n       *\n       * This specifically sets margin-top for the first heading within a header\n       * cell when center/right aligned.\n       */\n      th.", " > .fabric-editor-block-mark {\n        > h1:first-of-type,\n        > h2:first-of-type,\n        > h3:first-of-type,\n        > h4:first-of-type,\n        > h5:first-of-type,\n        > h6:first-of-type {\n          margin-top: 0;\n        }\n      }\n\n      .", ", .", " {\n        position: relative;\n      }\n      /* Give selected cells a blue overlay */\n      .", "::after,\n        .", "::after {\n        z-index: ", ";\n        position: absolute;\n        content: '';\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        pointer-events: none;\n      }\n      .", " {\n        border: 1px solid ", ";\n      }\n      .", "::after {\n        background: ", ";\n        z-index: ", ";\n      }\n      th.", "::after,\n        td.", "::after {\n        background: ", ";\n        z-index: ", ";\n      }\n      // ED-15246: Trello card is visible through a border of a table border\n      td.", ", td.", " {\n        &::after {\n          height: 100%;\n          width: 100%;\n          border: 1px solid ", ";\n          content: '';\n          position: absolute;\n          left: -1px;\n          top: -1px;\n          bottom: 0;\n          z-index: ", ";\n          display: inline-block;\n          pointer-events: none;\n        }\n        &.", "::after {\n          border: 1px solid ", ";\n          z-index: ", ";\n        }\n      }\n    }\n    .", " {\n      position: absolute;\n      /* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n      top: ", "px;\n    }\n    .", ".", " {\n      z-index: ", ";\n    }\n    .", " {\n      left: -", "px;\n    }\n    .", " {\n      padding-right: ", "px;\n      margin-right: -", "px;\n      padding-bottom: ", "px;\n      margin-bottom: -", "px;\n      /* fixes gap cursor height */\n      overflow: auto;\n      position: relative;\n    }\n  }\n\n  .ProseMirror.", " {\n    .", " {\n      overflow-x: auto;\n      ", ";\n    }\n  }\n\n  .ProseMirror.", " {\n    cursor: col-resize;\n  }\n\n  /* \n  ED-15882: When custom start numbers is enabled for lists, we have\n  styles that handle this generally (in editor-common) so we can\n  throw away the older table-specific styles here.\n  */\n  ", "\n"])), _types.TableCssClassName.LAYOUT_BUTTON, "var(--ds-background-neutral, ".concat(_colors.N20A, ")"), "var(--ds-icon, ".concat(_colors.N300, ")"), _types.TableCssClassName.LAYOUT_BUTTON, _types.TableCssClassName.IS_RESIZING, "var(--ds-background-neutral-hovered, ".concat(_colors.B300, ")"), "var(--ds-icon, white)", (0, _styles.tableSharedStyle)(props), (0, _uiStyles.columnControlsLineMarker)(props), _uiStyles.hoveredDeleteButton, _uiStyles.hoveredCell, _uiStyles.hoveredWarningCell, _uiStyles.resizeHandle, rangeSelectionStyles, _types.TableCssClassName.LAST_ITEM_IN_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_CELL, (0, _consts.tableCellBackgroundColor)(props), (0, _consts.tableBorderColor)(props), (0, _consts.tableBorderColor)(props), _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN, _uiStyles.insertColumnButtonWrapper, _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW, _uiStyles.insertRowButtonWrapper, _uiStyles.DeleteButton, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.stickyRowOffsetTop + 2, _editorSharedStyles.akEditorTableNumberColumnWidth, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.stickyRowOffsetTop, "var(--ds-surface, white)", _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.CORNER_CONTROLS, _editorSharedStyles.akEditorSmallZIndex, "var(--ds-surface, white)", _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.tableToolbarSize, "var(--ds-surface, white)", _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, "var(--ds-surface, green)", _consts.stickyRowOffsetTop, _consts.stickyRowZIndex, "var(--ds-surface, white)", "var(--ds-shadow-overflow, ".concat("0 6px 4px -4px ".concat(_colors.N40A), ")"), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.stickyRowZIndex + 1, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tableToolbarSize, _consts.stickyHeaderBorderBottomWidth, (0, _consts.tableBorderColor)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, insertColumnButtonOffset + 1, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2 + 1, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_CONTROLS, _consts.tableControlsSpacing, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableControlsSpacing + 2, _types.TableCssClassName.CORNER_CONTROLS, _consts.tableControlsSpacing - _consts.tableToolbarSize + 2, "var(--ds-surface, white)", (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : '', (0, _uiStyles.OverflowShadow)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tablePadding, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tablePadding, _types.TableCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts.tablePadding - 1, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.NODEVIEW_WRAPPER, _types.TableCssClassName.NODEVIEW_WRAPPER, _types.TableCssClassName.TABLE_CONTAINER, (0, _uiStyles.columnControlsDecoration)(props), _types.TableCssClassName.CORNER_CONTROLS, _consts.tableToolbarSize + 1, cornerControlHeight, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, (0, _uiStyles.InsertMarker)(props, "\n          left: -11px;\n          top: 9px;\n        "), _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize + 1, _consts.tableToolbarSize + 1, (0, _consts.tableBorderColor)(props), _consts.tableBorderRadiusSize, (0, _consts.tableToolbarColor)(props), _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, "var(--ds-background-selected, ".concat(_consts.tableToolbarSelectedColor, ")"), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _editorSharedStyles.akEditorTableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.CONTROLS_BUTTON, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, "var(--ds-background-selected, ".concat(_consts.tableToolbarSelectedColor, ")"), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableBorderDeleteColor, "var(--ds-background-danger, ".concat(_consts.tableToolbarDeleteColor, ")"), _types.TableCssClassName.ROW_CONTROLS, _consts.tableToolbarSize, (0, _uiStyles.InsertMarker)(props, "\n        bottom: -1px;\n        left: -11px;\n      "), _types.TableCssClassName.ROW_CONTROLS_INNER, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _consts.tableBorderRadiusSize, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_BUTTON, _editorSharedStyles.akEditorUnitZIndex, (0, _uiStyles.HeaderButton)(props, "\n        border-bottom: 1px solid ".concat((0, _consts.tableBorderColor)(props), ";\n        border-right: 0px;\n        border-radius: 0;\n        height: 100%;\n        width: ").concat(_consts.tableToolbarSize, "px;\n\n        .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, " {\n          position: absolute;\n          width: 30px;\n          height: 50%;\n          right: 0;\n          bottom: 0;\n        }\n        .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n          top: 0;\n        }\n      ")), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.ROW_CONTROLS, (0, _uiStyles.HeaderButtonHover)(), (0, _uiStyles.HeaderButtonDanger)(), _types.TableCssClassName.NUMBERED_COLUMN, _editorSharedStyles.akEditorTableToolbarSize - 1, _editorSharedStyles.akEditorTableToolbarSize, _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, (0, _consts.tableBorderColor)(props), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _consts.tableToolbarColor)(props), (0, _consts.tableTextColor)(props), (0, _consts.tableBorderColor)(props), (0, _consts.tableBorderColor)(props), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, "var(--ds-background-selected, ".concat(_consts.tableToolbarSelectedColor, ")"), _editorSharedStyles.akEditorUnitZIndex, "var(--ds-text-selected, ".concat(_colors.N0, ")"), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, "var(--ds-background-selected, ".concat(_consts.tableToolbarSelectedColor, ")"), _editorSharedStyles.akEditorUnitZIndex, "var(--ds-text-selected, ".concat(_colors.N0, ")"), _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, "var(--ds-background-danger, ".concat(_consts.tableToolbarDeleteColor, ")"), _consts.tableBorderDeleteColor, "var(--ds-text-danger, ".concat(_colors.R500, ")"), _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.SELECTED_CELL, _consts.tableBorderSelectedColor, _types.TableCssClassName.SELECTED_CELL, _consts.tableCellSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableCellDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _consts.tableBorderSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _styles.tableMarginTop - cornerControlHeight + 1, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_NODE_WRAPPER, insertColumnButtonOffset, insertColumnButtonOffset, _consts.tableScrollbarOffset, _consts.tableScrollbarOffset, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_NODE_WRAPPER, _scrollbar.scrollbarStyles, _types.TableCssClassName.RESIZE_CURSOR, props !== null && props !== void 0 && (_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.restartNumberedLists ? "" : listLargeNumericMarkersOldStyles);
 };
 
 exports.tableStyles = tableStyles;

package/dist/cjs/plugins/table/ui/consts.js

@@ -11,8 +11,6 @@ var _styles = require("@atlaskit/editor-common/styles");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _types = require("../types");
 
 var _components = require("@atlaskit/theme/components");
@@ -23,39 +21,39 @@ var _components = require("@atlaskit/theme/components");
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4135
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 var tableCellBackgroundColor = (0, _components.themed)({
-  light: (0, _tokens.token)('elevation.surface', _colors.N0),
-  dark: (0, _tokens.token)('elevation.surface', _colors.DN30)
+  light: "var(--ds-surface, ".concat(_colors.N0, ")"),
+  dark: "var(--ds-surface, ".concat(_colors.DN30, ")")
 });
 exports.tableCellBackgroundColor = tableCellBackgroundColor;
 var tableToolbarColor = (0, _components.themed)({
-  light: (0, _tokens.token)('color.background.neutral.subtle', _editorSharedStyles.akEditorTableToolbar),
-  dark: (0, _tokens.token)('color.background.neutral.subtle', _editorSharedStyles.akEditorTableToolbarDark)
+  light: "var(--ds-background-neutral-subtle, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"),
+  dark: "var(--ds-background-neutral-subtle, ".concat(_editorSharedStyles.akEditorTableToolbarDark, ")")
 });
 exports.tableToolbarColor = tableToolbarColor;
 var tableTextColor = (0, _components.themed)({
-  light: (0, _tokens.token)('color.text.subtlest', _colors.N200),
-  dark: (0, _tokens.token)('color.text.subtlest', _colors.DN400)
+  light: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
+  dark: "var(--ds-text-subtlest, ".concat(_colors.DN400, ")")
 });
 exports.tableTextColor = tableTextColor;
 var tableBorderColor = (0, _components.themed)({
-  light: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorder),
-  dark: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorderDark)
+  light: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableBorder, ")"),
+  dark: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableBorderDark, ")")
 });
 exports.tableBorderColor = tableBorderColor;
-var tableFloatingControlsColor = (0, _tokens.token)('color.background.neutral', _colors.N20); // TODO: https://product-fabric.atlassian.net/browse/DSP-4461
+var tableFloatingControlsColor = "var(--ds-background-neutral, ".concat(_colors.N20, ")"); // TODO: https://product-fabric.atlassian.net/browse/DSP-4461
 
 exports.tableFloatingControlsColor = tableFloatingControlsColor;
-var tableCellSelectedColor = (0, _tokens.token)('color.blanket.selected', 'rgba(179, 212, 255, 0.3)');
+var tableCellSelectedColor = "var(--ds-blanket-selected, rgba(179, 212, 255, 0.3))";
 exports.tableCellSelectedColor = tableCellSelectedColor;
-var tableToolbarSelectedColor = (0, _tokens.token)('color.background.selected.bold', _colors.B200);
+var tableToolbarSelectedColor = "var(--ds-background-selected-bold, ".concat(_colors.B200, ")");
 exports.tableToolbarSelectedColor = tableToolbarSelectedColor;
-var tableBorderSelectedColor = (0, _tokens.token)('color.border.selected', _colors.B300);
+var tableBorderSelectedColor = "var(--ds-border-selected, ".concat(_colors.B300, ")");
 exports.tableBorderSelectedColor = tableBorderSelectedColor;
-var tableCellDeleteColor = (0, _tokens.token)('color.blanket.danger', 'rgba(255, 235, 230, 0.3)');
+var tableCellDeleteColor = "var(--ds-blanket-danger, rgba(255, 235, 230, 0.3))";
 exports.tableCellDeleteColor = tableCellDeleteColor;
-var tableBorderDeleteColor = (0, _tokens.token)('color.border.danger', _colors.R400);
+var tableBorderDeleteColor = "var(--ds-border-danger, ".concat(_colors.R400, ")");
 exports.tableBorderDeleteColor = tableBorderDeleteColor;
-var tableToolbarDeleteColor = (0, _tokens.token)('color.background.danger.bold', _colors.R75);
+var tableToolbarDeleteColor = "var(--ds-background-danger-bold, ".concat(_colors.R75, ")");
 exports.tableToolbarDeleteColor = tableToolbarDeleteColor;
 var tableBorderRadiusSize = 3;
 exports.tableBorderRadiusSize = tableBorderRadiusSize;

package/dist/cjs/plugins/table/ui/ui-styles.js

@@ -23,8 +23,6 @@ var _types = require("../types");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
 
 var InsertLine = function InsertLine(cssString) {
@@ -46,29 +44,29 @@ var Button = function Button(cssString) {
 };
 
 var HeaderButton = function HeaderButton(props, cssString) {
-  return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    background: ", ";\n    border: 1px solid ", ";\n    display: block;\n    box-sizing: border-box;\n    padding: 0;\n\n    :focus {\n      outline: none;\n    }\n    ", "\n  }\n\n  .", "::after {\n    content: ' ';\n    background-color: transparent;\n    left: -15px;\n    top: 0;\n    position: absolute;\n    width: 15px;\n    height: 100%;\n    z-index: 1;\n  }\n\n  .active .", " {\n    color: ", ";\n    background-color: ", ";\n    border-color: ", ";\n  }\n"])), _types.TableCssClassName.CONTROLS_BUTTON, (0, _consts.tableToolbarColor)(props), (0, _consts.tableBorderColor)(props), cssString, _types.TableCssClassName.ROW_CONTROLS_BUTTON, _types.TableCssClassName.CONTROLS_BUTTON, (0, _tokens.token)('color.icon.inverse', _colors.N0), (0, _tokens.token)('color.background.selected', _consts.tableToolbarSelectedColor), _consts.tableBorderSelectedColor);
+  return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    background: ", ";\n    border: 1px solid ", ";\n    display: block;\n    box-sizing: border-box;\n    padding: 0;\n\n    :focus {\n      outline: none;\n    }\n    ", "\n  }\n\n  .", "::after {\n    content: ' ';\n    background-color: transparent;\n    left: -15px;\n    top: 0;\n    position: absolute;\n    width: 15px;\n    height: 100%;\n    z-index: 1;\n  }\n\n  .active .", " {\n    color: ", ";\n    background-color: ", ";\n    border-color: ", ";\n  }\n"])), _types.TableCssClassName.CONTROLS_BUTTON, (0, _consts.tableToolbarColor)(props), (0, _consts.tableBorderColor)(props), cssString, _types.TableCssClassName.ROW_CONTROLS_BUTTON, _types.TableCssClassName.CONTROLS_BUTTON, "var(--ds-icon-inverse, ".concat(_colors.N0, ")"), "var(--ds-background-selected, ".concat(_consts.tableToolbarSelectedColor, ")"), _consts.tableBorderSelectedColor);
 };
 
 exports.HeaderButton = HeaderButton;
 
 var HeaderButtonHover = function HeaderButtonHover() {
-  return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  .", ":hover {\n    color: ", ";\n    background-color: ", ";\n    border-color: ", ";\n    cursor: pointer;\n  }\n"])), _types.TableCssClassName.CONTROLS_BUTTON, (0, _tokens.token)('color.icon.inverse', _colors.N0), (0, _tokens.token)('color.background.selected', _consts.tableToolbarSelectedColor), _consts.tableBorderSelectedColor);
+  return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  .", ":hover {\n    color: ", ";\n    background-color: ", ";\n    border-color: ", ";\n    cursor: pointer;\n  }\n"])), _types.TableCssClassName.CONTROLS_BUTTON, "var(--ds-icon-inverse, ".concat(_colors.N0, ")"), "var(--ds-background-selected, ".concat(_consts.tableToolbarSelectedColor, ")"), _consts.tableBorderSelectedColor);
 };
 
 exports.HeaderButtonHover = HeaderButtonHover;
 
 var HeaderButtonDanger = function HeaderButtonDanger() {
-  return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  .", " .", " {\n    background-color: ", ";\n    border-color: ", ";\n    position: relative;\n    z-index: ", ";\n  }\n"])), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.CONTROLS_BUTTON, (0, _tokens.token)('color.background.danger', _consts.tableToolbarDeleteColor), _consts.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex);
+  return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  .", " .", " {\n    background-color: ", ";\n    border-color: ", ";\n    position: relative;\n    z-index: ", ";\n  }\n"])), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.CONTROLS_BUTTON, "var(--ds-background-danger, ".concat(_consts.tableToolbarDeleteColor, ")"), _consts.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex);
 };
 
 exports.HeaderButtonDanger = HeaderButtonDanger;
 
 var InsertButton = function InsertButton() {
-  return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    position: absolute;\n    z-index: ", ";\n    bottom: 0;\n  }\n  .", ",\n    .", " {\n    height: ", "px;\n    width: ", "px;\n  }\n  .", " {\n    ", "\n  }\n  .", " {\n    display: none;\n  }\n  &:hover .", " {\n    display: flex;\n  }\n"])), _types.TableCssClassName.CONTROLS_INSERT_BUTTON_INNER, _editorSharedStyles.akEditorUnitZIndex + 10, _types.TableCssClassName.CONTROLS_INSERT_BUTTON_INNER, _types.TableCssClassName.CONTROLS_INSERT_BUTTON, _consts.tableInsertColumnButtonSize, _consts.tableInsertColumnButtonSize, _types.TableCssClassName.CONTROLS_INSERT_BUTTON, Button("\n      background: ".concat((0, _tokens.token)('elevation.surface.overlay', 'white'), ";\n      box-shadow: ").concat((0, _tokens.token)('elevation.shadow.overlay', "0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A)), ";\n      color: ").concat((0, _tokens.token)('color.icon', _colors.N300), ";\n    ")), _types.TableCssClassName.CONTROLS_INSERT_LINE, _types.TableCssClassName.CONTROLS_INSERT_LINE);
+  return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    position: absolute;\n    z-index: ", ";\n    bottom: 0;\n  }\n  .", ",\n    .", " {\n    height: ", "px;\n    width: ", "px;\n  }\n  .", " {\n    ", "\n  }\n  .", " {\n    display: none;\n  }\n  &:hover .", " {\n    display: flex;\n  }\n"])), _types.TableCssClassName.CONTROLS_INSERT_BUTTON_INNER, _editorSharedStyles.akEditorUnitZIndex + 10, _types.TableCssClassName.CONTROLS_INSERT_BUTTON_INNER, _types.TableCssClassName.CONTROLS_INSERT_BUTTON, _consts.tableInsertColumnButtonSize, _consts.tableInsertColumnButtonSize, _types.TableCssClassName.CONTROLS_INSERT_BUTTON, Button("\n      background: ".concat("var(--ds-surface-overlay, white)", ";\n      box-shadow: ", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), ";\n      color: ", "var(--ds-icon, ".concat(_colors.N300, ")"), ";\n    ")), _types.TableCssClassName.CONTROLS_INSERT_LINE, _types.TableCssClassName.CONTROLS_INSERT_LINE);
 };
 
 var InsertButtonHover = function InsertButtonHover() {
-  return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  .", ":hover {\n    background: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), _types.TableCssClassName.CONTROLS_INSERT_BUTTON, (0, _tokens.token)('color.background.brand.bold', _colors.B300), (0, _tokens.token)('color.icon.inverse', 'white'));
+  return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  .", ":hover {\n    background: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), _types.TableCssClassName.CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, ".concat(_colors.B300, ")"), "var(--ds-icon-inverse, white)");
 };
 
 var insertColumnButtonWrapper = (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  ", "\n"])), InsertButton(), InsertButtonHover(), InsertLine("\n    width: 2px;\n    left: 9px;\n  "));
@@ -81,11 +79,11 @@ var columnControlsLineMarker = function columnControlsLineMarker(props) {
 };
 
 exports.columnControlsLineMarker = columnControlsLineMarker;
-var DeleteButton = (0, _react.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  .", ",\n    .", " {\n    height: ", "px;\n    width: ", "px;\n  }\n  .", " {\n    .", " {\n      ", "\n    }\n  }\n\n  .", ":hover {\n    background: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, _consts.tableDeleteButtonSize, _consts.tableDeleteButtonSize, _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, Button("\n        background: ".concat((0, _tokens.token)('color.background.neutral', _colors.N20A), ";\n        color: ").concat((0, _tokens.token)('color.icon', _colors.N300), ";\n      ")), _types.TableCssClassName.CONTROLS_DELETE_BUTTON, (0, _tokens.token)('color.background.danger.bold', _colors.R300), (0, _tokens.token)('color.icon.inverse', 'white'));
+var DeleteButton = (0, _react.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  .", ",\n    .", " {\n    height: ", "px;\n    width: ", "px;\n  }\n  .", " {\n    .", " {\n      ", "\n    }\n  }\n\n  .", ":hover {\n    background: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, _consts.tableDeleteButtonSize, _consts.tableDeleteButtonSize, _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, Button("\n        background: ".concat("var(--ds-background-neutral, ".concat(_colors.N20A, ")"), ";\n        color: ", "var(--ds-icon, ".concat(_colors.N300, ")"), ";\n      ")), _types.TableCssClassName.CONTROLS_DELETE_BUTTON, "var(--ds-background-danger-bold, ".concat(_colors.R300, ")"), "var(--ds-icon-inverse, white)");
 exports.DeleteButton = DeleteButton;
 
 var OverflowShadow = function OverflowShadow(props) {
-  return (0, _react.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  .", ", .", " {\n    display: block;\n    height: calc(100% - ", "px);\n    position: absolute;\n    pointer-events: none;\n    top: ", "px;\n    z-index: ", ";\n    width: 8px;\n  }\n  .", " {\n    background: linear-gradient(\n        to left,\n        transparent 0,\n        ", " 100%\n      ),\n      linear-gradient(\n        to right,\n        ", " 0px,\n        transparent 1px\n      );\n    left: 0px;\n  }\n  .", "[data-number-column='true'] > :not(.", ").", " {\n    left: ", "px;\n  }\n  .", " {\n    background: linear-gradient(\n        to right,\n        transparent 0,\n        ", " 100%\n      ),\n      linear-gradient(\n        to left,\n        ", " 0px,\n        transparent 1px\n      );\n    left: calc(100% + 2px);\n  }\n  .", " {\n    .", ", .", " {\n      height: calc(100% - ", "px);\n      top: ", "px;\n    }\n    .", " {\n      border-left: 1px solid ", ";\n    }\n  }\n"])), _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTop + _styles.tableMarginBottom, _styles.tableMarginTop, _editorSharedStyles.akEditorShadowZIndex, _types.TableCssClassName.TABLE_LEFT_SHADOW, (0, _tokens.token)('elevation.shadow.overflow.spread', _colors.N40A), (0, _tokens.token)('elevation.shadow.overflow.perimeter', 'transparent'), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, _types.TableCssClassName.TABLE_RIGHT_SHADOW, (0, _tokens.token)('elevation.shadow.overflow.spread', _colors.N40A), (0, _tokens.token)('elevation.shadow.overflow.perimeter', 'transparent'), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTop + _styles.tableMarginBottom, _styles.tableMarginTop, _types.TableCssClassName.TABLE_LEFT_SHADOW, (0, _consts.tableBorderColor)(props));
+  return (0, _react.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  .", ", .", " {\n    display: block;\n    height: calc(100% - ", "px);\n    position: absolute;\n    pointer-events: none;\n    top: ", "px;\n    z-index: ", ";\n    width: 8px;\n  }\n  .", " {\n    background: linear-gradient(\n        to left,\n        transparent 0,\n        ", " 100%\n      ),\n      linear-gradient(\n        to right,\n        ", " 0px,\n        transparent 1px\n      );\n    left: 0px;\n  }\n  .", "[data-number-column='true'] > :not(.", ").", " {\n    left: ", "px;\n  }\n  .", " {\n    background: linear-gradient(\n        to right,\n        transparent 0,\n        ", " 100%\n      ),\n      linear-gradient(\n        to left,\n        ", " 0px,\n        transparent 1px\n      );\n    left: calc(100% + 2px);\n  }\n  .", " {\n    .", ", .", " {\n      height: calc(100% - ", "px);\n      top: ", "px;\n    }\n    .", " {\n      border-left: 1px solid ", ";\n    }\n  }\n"])), _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTop + _styles.tableMarginBottom, _styles.tableMarginTop, _editorSharedStyles.akEditorShadowZIndex, _types.TableCssClassName.TABLE_LEFT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, _types.TableCssClassName.TABLE_RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTop + _styles.tableMarginBottom, _styles.tableMarginTop, _types.TableCssClassName.TABLE_LEFT_SHADOW, (0, _consts.tableBorderColor)(props));
 };
 
 exports.OverflowShadow = OverflowShadow;
@@ -94,10 +92,10 @@ var columnHeaderButton = function columnHeaderButton(props, cssString) {
   return (0, _react.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border: 1px solid ", ";\n  display: block;\n  box-sizing: border-box;\n  padding: 0;\n\n  :focus {\n    outline: none;\n  }\n\n  ", "\n"])), (0, _consts.tableToolbarColor)(props), (0, _consts.tableBorderColor)(props), cssString);
 };
 
-var columnHeaderButtonSelected = (0, _react.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  background-color: ", ";\n  border-color: ", ";\n  z-index: ", ";\n"])), (0, _tokens.token)('color.text.inverse', _colors.N0), (0, _tokens.token)('color.background.selected', _consts.tableToolbarSelectedColor), _consts.tableBorderSelectedColor, _consts.columnControlsSelectedZIndex);
+var columnHeaderButtonSelected = (0, _react.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  background-color: ", ";\n  border-color: ", ";\n  z-index: ", ";\n"])), "var(--ds-text-inverse, ".concat(_colors.N0, ")"), "var(--ds-background-selected, ".concat(_consts.tableToolbarSelectedColor, ")"), _consts.tableBorderSelectedColor, _consts.columnControlsSelectedZIndex);
 
 var columnControlsDecoration = function columnControlsDecoration(props) {
-  return (0, _react.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    display: none;\n    cursor: pointer;\n    position: absolute;\n    width: calc(100% + ", "px);\n    left: -1px;\n    top: -", "px;\n    height: ", "px;\n\n    &::before {\n      content: ' ';\n      background-color: ", ";\n      position: absolute;\n      height: ", "px;\n      width: ", "px;\n      border-radius: 50%;\n      pointer-events: none;\n      top: 2px;\n      right: -1px;\n    }\n\n    &::after {\n      content: ' ';\n\n      ", "\n    }\n  }\n\n  div.", ">.", "::after {\n    content: ' ';\n    background-color: ", ";\n    position: absolute;\n    height: ", "px;\n    width: ", "px;\n    border-radius: 50%;\n    pointer-events: none;\n    top: -", "px;\n    right: -1px;\n  }\n\n  .", " .", " {\n    display: block;\n  }\n\n  table\n    tr:first-of-type\n    td.", ",\n    table\n    tr:first-of-type\n    th.", " {\n    &.", ",\n      &.", ",\n      &.", " {\n      .", "::after {\n        ", ";\n      }\n\n      &.", "\n        .", "::after {\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-bottom: none;\n        z-index: ", ";\n      }\n    }\n  }\n\n  .", "\n    table\n    tr:first-of-type\n    td.", ",\n    .", "\n    table\n    tr:first-of-type\n    th.", " {\n    .", "::after {\n      ", ";\n    }\n  }\n"])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _styles.tableCellBorderWidth * 2, _consts.columnControlsDecorationHeight + _styles.tableCellBorderWidth, _consts.columnControlsDecorationHeight, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, columnHeaderButton(props, "\n        border-right: ".concat(_styles.tableCellBorderWidth, "px solid ").concat((0, _consts.tableBorderColor)(props), ";\n        border-bottom: none;\n        height: ").concat(_consts.tableToolbarSize, "px;\n        width: 100%;\n        position: absolute;\n        top: ").concat(_consts.columnControlsDecorationHeight - _consts.tableToolbarSize, "px;\n        left: 0px;\n        z-index: ").concat(_consts.columnControlsZIndex, ";\n      ")), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.HOVERED_TABLE, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, (0, _tokens.token)('color.background.danger', _consts.tableToolbarDeleteColor), _consts.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected);
+  return (0, _react.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    display: none;\n    cursor: pointer;\n    position: absolute;\n    width: calc(100% + ", "px);\n    left: -1px;\n    top: -", "px;\n    height: ", "px;\n\n    &::before {\n      content: ' ';\n      background-color: ", ";\n      position: absolute;\n      height: ", "px;\n      width: ", "px;\n      border-radius: 50%;\n      pointer-events: none;\n      top: 2px;\n      right: -1px;\n    }\n\n    &::after {\n      content: ' ';\n\n      ", "\n    }\n  }\n\n  div.", ">.", "::after {\n    content: ' ';\n    background-color: ", ";\n    position: absolute;\n    height: ", "px;\n    width: ", "px;\n    border-radius: 50%;\n    pointer-events: none;\n    top: -", "px;\n    right: -1px;\n  }\n\n  .", " .", " {\n    display: block;\n  }\n\n  table\n    tr:first-of-type\n    td.", ",\n    table\n    tr:first-of-type\n    th.", " {\n    &.", ",\n      &.", ",\n      &.", " {\n      .", "::after {\n        ", ";\n      }\n\n      &.", "\n        .", "::after {\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-bottom: none;\n        z-index: ", ";\n      }\n    }\n  }\n\n  .", "\n    table\n    tr:first-of-type\n    td.", ",\n    .", "\n    table\n    tr:first-of-type\n    th.", " {\n    .", "::after {\n      ", ";\n    }\n  }\n"])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _styles.tableCellBorderWidth * 2, _consts.columnControlsDecorationHeight + _styles.tableCellBorderWidth, _consts.columnControlsDecorationHeight, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, columnHeaderButton(props, "\n        border-right: ".concat(_styles.tableCellBorderWidth, "px solid ").concat((0, _consts.tableBorderColor)(props), ";\n        border-bottom: none;\n        height: ").concat(_consts.tableToolbarSize, "px;\n        width: 100%;\n        position: absolute;\n        top: ").concat(_consts.columnControlsDecorationHeight - _consts.tableToolbarSize, "px;\n        left: 0px;\n        z-index: ").concat(_consts.columnControlsZIndex, ";\n      ")), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.HOVERED_TABLE, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, "var(--ds-background-danger, ".concat(_consts.tableToolbarDeleteColor, ")"), _consts.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected);
 };
 
 exports.columnControlsDecoration = columnControlsDecoration;
@@ -105,7 +103,7 @@ var hoveredDeleteButton = (0, _react.css)(_templateObject18 || (_templateObject1
 exports.hoveredDeleteButton = hoveredDeleteButton;
 var hoveredCell = (0, _react.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n  :not(.", ")\n    .", ":not(.", ") {\n    .", " {\n      position: relative;\n      border: 1px solid ", ";\n    }\n  }\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL, _consts.tableBorderSelectedColor);
 exports.hoveredCell = hoveredCell;
-var hoveredWarningCell = (0, _react.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n  :not(.", ")\n    .", ":not(.", ") {\n    td.", " {\n      background-color: ", " !important; // We need to override the background-color added to the cell\n      border: 1px solid ", ";\n    }\n  }\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL_WARNING, (0, _tokens.token)('color.background.warning', _colors.Y50), (0, _tokens.token)('color.border.warning', _colors.Y200));
+var hoveredWarningCell = (0, _react.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n  :not(.", ")\n    .", ":not(.", ") {\n    td.", " {\n      background-color: ", " !important; // We need to override the background-color added to the cell\n      border: 1px solid ", ";\n    }\n  }\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL_WARNING, "var(--ds-background-warning, ".concat(_colors.Y50, ")"), "var(--ds-border-warning, ".concat(_colors.Y200, ")"));
 exports.hoveredWarningCell = hoveredWarningCell;
 var resizeHandle = (0, _react.css)(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    .", " {\n      background-color: transparent;\n      position: absolute;\n      width: ", "px;\n      height: 100%;\n      top: 0;\n      right: -", "px;\n      cursor: col-resize;\n      z-index: ", ";\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: -2px;\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + 2px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: -2px;\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      right: -1px;\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + 2px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      right: -1px;\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    table\n      tr:first-of-type\n      th.", "\n      .", "::after,\n      table\n      tr:first-of-type\n      td.", "\n      .", "::after {\n      top: -", "px;\n      height: calc(100% + ", "px);\n    }\n  }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex, _types.TableCssClassName.WITH_RESIZE_LINE, _consts.resizeLineWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE, _consts.resizeLineWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
 exports.resizeHandle = resizeHandle;

package/dist/cjs/plugins/table/utils/decoration.js

@@ -89,7 +89,37 @@ var createControlsHoverDecoration = function createControlsHoverDecoration(cells
   // to match the "clicked" selection
 
   if (danger) {
-    var rect = map.rectBetween(min - table.start, max - table.start);
+    // Find the bounding rectangle of all the given cells, also considering
+    // merged cells.
+    var _cells$reduce3 = cells.reduce(function (acc, cell) {
+      var _map$findCell = map.findCell(cell.pos - table.start),
+          left = _map$findCell.left,
+          right = _map$findCell.right,
+          bottom = _map$findCell.bottom,
+          top = _map$findCell.top; // Finding the bounding rect requires finding the min left and top positions,
+      // and the max right and bottom positions of the cells
+
+
+      return {
+        recLeft: Math.min(acc.recLeft, left),
+        recTop: Math.min(acc.recTop, top),
+        recRight: Math.max(acc.recRight, right),
+        recBottom: Math.max(acc.recBottom, bottom)
+      };
+    }, // +-Infinity as initialisation vars which will always be overwritten
+    // by smaller/larger values respectively
+    {
+      recLeft: Infinity,
+      recTop: Infinity,
+      recRight: -Infinity,
+      recBottom: -Infinity
+    }),
+        recLeft = _cells$reduce3.recLeft,
+        recTop = _cells$reduce3.recTop,
+        recRight = _cells$reduce3.recRight,
+        recBottom = _cells$reduce3.recBottom;
+
+    var rect = new _tableMap.Rect(recLeft, recTop, recRight, recBottom);
     updatedCells = map.cellsInRect(rect).map(function (x) {
       return x + table.start;
     });

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "1.0.1",
+	"version": "1.0.3",
 	"sideEffects": false
 }

package/dist/es2019/plugins/table/toolbar.js

@@ -3,7 +3,7 @@ import { jsx } from '@emotion/react';
 import { defineMessages } from 'react-intl-next';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import commonMessages from '@atlaskit/editor-common/messages';
-import { clearHoverSelection, hoverTable, hoverColumns, hoverRows, removeDescendantNodes } from './commands';
+import { clearHoverSelection, hoverTable, hoverColumns, hoverRows, removeDescendantNodes, hoverMergedCells } from './commands';
 import { deleteTableWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, insertRowWithAnalytics, deleteRowsWithAnalytics, mergeCellsWithAnalytics, splitCellWithAnalytics, deleteColumnsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, wrapTableInExpandWithAnalytics, sortColumnWithAnalytics, setColorWithAnalytics, distributeColumnsWidthsWithAnalytics } from './commands-with-analytics';
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
@@ -229,6 +229,18 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
     options.push({
       id: 'editor.table.sortColumnAsc',
       title: formatMessage(ContextualMenuMessages.sortColumnASC),
+      onMouseOver: (state, dispatch) => {
+        if (getMergedCellsPositions(state.tr).length !== 0) {
+          hoverMergedCells()(state, dispatch);
+          return true;
+        }
+
+        return false;
+      },
+      onMouseOut: (state, dispatch) => {
+        clearHoverSelection()(state, dispatch);
+        return true;
+      },
       onClick: (state, dispatch) => {
         sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, initialSelectionRect.left, SortOrder.ASC)(state, dispatch);
         return true;
@@ -240,6 +252,18 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
     options.push({
       id: 'editor.table.sortColumnDesc',
       title: formatMessage(ContextualMenuMessages.sortColumnDESC),
+      onMouseOver: (state, dispatch) => {
+        if (getMergedCellsPositions(state.tr).length !== 0) {
+          hoverMergedCells()(state, dispatch);
+          return true;
+        }
+
+        return false;
+      },
+      onMouseOut: (state, dispatch) => {
+        clearHoverSelection()(state, dispatch);
+        return true;
+      },
       onClick: (state, dispatch) => {
         sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, initialSelectionRect.left, SortOrder.DESC)(state, dispatch);
         return true;