@atlaskit/editor-plugin-table 5.6.6 → 5.7.0

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

@@ -5,29 +5,28 @@ import { tableCellBorderWidth, tableMarginTop, tableMarginTopWithControl } from
 import { akEditorShadowZIndex, akEditorTableNumberColumnWidth, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B300, N0, N300, N40A, N60A, Y200, Y50 } from '@atlaskit/theme/colors';
-import { borderRadius } from '@atlaskit/theme/constants';
 import { TableCssClassName as ClassName } from '../types';
 import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, dragTableInsertColumnButtonSize, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tableOverflowShadowWidthWide, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
-var InsertLine = function InsertLine(props, cssString) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    background: ", ";\n    display: none;\n    position: absolute;\n    z-index: ", ";\n    ", "\n  }\n"])), ClassName.CONTROLS_INSERT_LINE, tableBorderSelectedColor(props), akEditorUnitZIndex, cssString);
+var InsertLine = function InsertLine(cssString) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    background: ", ";\n    display: none;\n    position: absolute;\n    z-index: ", ";\n    ", "\n  }\n"])), ClassName.CONTROLS_INSERT_LINE, tableBorderSelectedColor, akEditorUnitZIndex, cssString);
 };
-var Marker = function Marker(props) {
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  position: absolute;\n  height: ", "px;\n  width: ", "px;\n  border-radius: 50%;\n  pointer-events: none;\n"])), tableBorderColor(props), lineMarkerSize, lineMarkerSize);
+var Marker = function Marker() {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  position: absolute;\n  height: ", "px;\n  width: ", "px;\n  border-radius: 50%;\n  pointer-events: none;\n"])), tableBorderColor, lineMarkerSize, lineMarkerSize);
 };
-export var InsertMarker = function InsertMarker(props, cssString) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .", " {\n    ", ";\n    ", "\n  }\n"])), ClassName.CONTROLS_INSERT_MARKER, Marker(props), cssString);
+export var InsertMarker = function InsertMarker(cssString) {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .", " {\n    ", ";\n    ", "\n  }\n"])), ClassName.CONTROLS_INSERT_MARKER, Marker(), cssString);
 };
 var Button = function Button(cssString) {
-  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  border-width: 0px;\n  display: inline-flex;\n  max-width: 100%;\n  text-align: center;\n  margin: 0px;\n  padding: 0px;\n  text-decoration: none;\n  transition: background 0.1s ease-out 0s,\n    box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\n  outline: none !important;\n  cursor: none;\n\n  > .", " {\n    display: inline-flex;\n    max-height: 100%;\n    max-width: 100%;\n  }\n  ", "\n"])), borderRadius(), ClassName.CONTROLS_BUTTON_ICON, cssString);
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  border-width: 0px;\n  display: inline-flex;\n  max-width: 100%;\n  text-align: center;\n  margin: 0px;\n  padding: 0px;\n  text-decoration: none;\n  transition: background 0.1s ease-out 0s,\n    box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\n  outline: none !important;\n  cursor: none;\n\n  > .", " {\n    display: inline-flex;\n    max-height: 100%;\n    max-width: 100%;\n  }\n  ", "\n"])), "var(--ds-border-radius, 3px)", ClassName.CONTROLS_BUTTON_ICON, cssString);
 };
-export var HeaderButton = function HeaderButton(props, cssString) {
-  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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"])), ClassName.CONTROLS_BUTTON, tableHeaderCellBackgroundColor(props), tableBorderColor(props), cssString, ClassName.ROW_CONTROLS_BUTTON, ClassName.CONTROLS_BUTTON, "var(--ds-icon-inverse, ".concat(N0, ")"), tableToolbarSelectedColor(props), tableBorderSelectedColor(props));
+export var HeaderButton = function HeaderButton(cssString) {
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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"])), ClassName.CONTROLS_BUTTON, tableHeaderCellBackgroundColor, tableBorderColor, cssString, ClassName.ROW_CONTROLS_BUTTON, ClassName.CONTROLS_BUTTON, "var(--ds-icon-inverse, ".concat(N0, ")"), tableToolbarSelectedColor, tableBorderSelectedColor);
 };
-export var HeaderButtonHover = function HeaderButtonHover(props) {
-  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  .", ":hover {\n    color: ", ";\n    background-color: ", ";\n    border-color: ", ";\n    cursor: pointer;\n  }\n"])), ClassName.CONTROLS_BUTTON, "var(--ds-icon-inverse, ".concat(N0, ")"), tableToolbarSelectedColor(props), tableBorderSelectedColor(props));
+export var HeaderButtonHover = function HeaderButtonHover() {
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  .", ":hover {\n    color: ", ";\n    background-color: ", ";\n    border-color: ", ";\n    cursor: pointer;\n  }\n"])), ClassName.CONTROLS_BUTTON, "var(--ds-icon-inverse, ".concat(N0, ")"), tableToolbarSelectedColor, tableBorderSelectedColor);
 };
-export var HeaderButtonDanger = function HeaderButtonDanger(props) {
-  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  .", " .", " {\n    background-color: ", ";\n    border-color: ", ";\n    position: relative;\n    z-index: ", ";\n  }\n"])), ClassName.HOVERED_CELL_IN_DANGER, ClassName.CONTROLS_BUTTON, tableToolbarDeleteColor(props), tableBorderDeleteColor(props), akEditorUnitZIndex);
+export var HeaderButtonDanger = function HeaderButtonDanger() {
+  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  .", " .", " {\n    background-color: ", ";\n    border-color: ", ";\n    position: relative;\n    z-index: ", ";\n  }\n"])), ClassName.HOVERED_CELL_IN_DANGER, ClassName.CONTROLS_BUTTON, tableToolbarDeleteColor, tableBorderDeleteColor, akEditorUnitZIndex);
 };
 var InsertButton = function InsertButton() {
   return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\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"])), ClassName.CONTROLS_INSERT_BUTTON_INNER, akEditorUnitZIndex + 10, ClassName.CONTROLS_INSERT_BUTTON_INNER, ClassName.CONTROLS_INSERT_BUTTON, tableInsertColumnButtonSize, tableInsertColumnButtonSize, ClassName.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(N60A, ", 0 0 1px ").concat(N60A), ")"), ";\n      color: ", "var(--ds-icon, ".concat(N300, ")"), ";\n    ")), ClassName.CONTROLS_INSERT_LINE, ClassName.CONTROLS_INSERT_LINE);
@@ -35,66 +34,66 @@ var InsertButton = function InsertButton() {
 var InsertButtonHover = function InsertButtonHover() {
   return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  .", ":hover {\n    background: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), ClassName.CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, ".concat(B300, ")"), "var(--ds-icon-inverse, white)");
 };
-export var dragInsertButtonWrapper = function dragInsertButtonWrapper(props) {
+export var dragInsertButtonWrapper = function dragInsertButtonWrapper() {
   return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  .", " {\n    position: absolute;\n    z-index: ", ";\n  }\n\n  .", " {\n    bottom: -3px;\n    left: 2px;\n  }\n\n  .", " {\n    left: -3px;\n    bottom: -2px;\n  }\n\n  .", " {\n    ", "\n  }\n\n  .", ":hover {\n    background: ", ";\n    border: 1px solid ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, akEditorUnitZIndex + 10, ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN, ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW, ClassName.DRAG_CONTROLS_INSERT_BUTTON, Button("\n    background: ".concat("var(--ds-surface-overlay, white)", ";\n    color: ", "var(--ds-icon, ".concat(N300, ")"), ";\n    border: 1px solid ", "var(--ds-background-accent-gray-subtler, #C1C7D0)", ";\n    border-radius: 50%;\n    height: ", dragTableInsertColumnButtonSize, "px;\n    width: ").concat(dragTableInsertColumnButtonSize, "px;\n  ")), ClassName.DRAG_CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, ".concat(B300, ")"), "var(--ds-background-brand-bold, ".concat(B300, ")"), "var(--ds-icon-inverse, white)");
 };
 
 // Explicit pixel values required here to ensure corner button aligns correctly
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-export var dragCornerControlButton = function dragCornerControlButton(props) {
+export var dragCornerControlButton = function dragCornerControlButton() {
   return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  .", " {\n    width: 15px;\n    height: 15px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: absolute;\n    top: -17px;\n    left: -5px;\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    outline: none;\n    z-index: ", ";\n\n    &.active .", " {\n      background-color: ", ";\n      width: 10px;\n      height: 10px;\n      border-width: 2px;\n      border-radius: 4px;\n\n      top: 3px;\n      left: 2px;\n    }\n\n    &:hover {\n      cursor: pointer;\n\n      .", " {\n        width: 10px;\n        height: 10px;\n        border-radius: 4px;\n        top: 3px;\n        left: 2px;\n      }\n    }\n  }\n\n  .", " {\n    border: 1px solid ", ";\n    background-color: ", ";\n    border-radius: 2px;\n    width: 5px;\n    height: 5px;\n    position: relative;\n  }\n"])), ClassName.DRAG_CORNER_BUTTON, akEditorUnitZIndex * 99, ClassName.DRAG_CORNER_BUTTON_INNER, "var(--ds-border-selected, #0C66E4)", ClassName.DRAG_CORNER_BUTTON_INNER, ClassName.DRAG_CORNER_BUTTON_INNER, "var(--ds-border-inverse, #FFF)", "var(--ds-background-accent-gray-subtler, #DCDFE4)");
 };
-export var insertColumnButtonWrapper = function insertColumnButtonWrapper(props) {
-  return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", "\n"])), InsertButton(), InsertButtonHover(), InsertLine(props, "\n    width: 2px;\n    left: 9px;\n  "));
+export var insertColumnButtonWrapper = function insertColumnButtonWrapper() {
+  return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", "\n"])), InsertButton(), InsertButtonHover(), InsertLine("\n    width: 2px;\n    left: 9px;\n  "));
 };
-export var insertRowButtonWrapper = function insertRowButtonWrapper(props) {
-  return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", "\n"])), InsertButton(), InsertButtonHover(), InsertLine(props, "\n    height: 2px;\n    top: -11px;\n    left: ".concat(tableInsertColumnButtonSize - 1, "px;\n  ")));
+export var insertRowButtonWrapper = function insertRowButtonWrapper() {
+  return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", "\n"])), InsertButton(), InsertButtonHover(), InsertLine("\n    height: 2px;\n    top: -11px;\n    left: ".concat(tableInsertColumnButtonSize - 1, "px;\n  ")));
 };
 export var columnControlsLineMarker = function columnControlsLineMarker() {
   return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  .", ".", "\n    table\n    tr:first-of-type\n    td,\n  .", ".", "\n    table\n    tr:first-of-type\n    th {\n    position: relative;\n  }\n"])), ClassName.TABLE_CONTAINER, ClassName.WITH_CONTROLS, ClassName.TABLE_CONTAINER, ClassName.WITH_CONTROLS);
 };
-export var DeleteButton = function DeleteButton(props) {
-  return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\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"])), ClassName.CONTROLS_DELETE_BUTTON_WRAP, ClassName.CONTROLS_DELETE_BUTTON, tableDeleteButtonSize, tableDeleteButtonSize, ClassName.CONTROLS_DELETE_BUTTON_WRAP, ClassName.CONTROLS_DELETE_BUTTON, Button("\n        background: ".concat(tableCellSelectedDeleteIconBackground(props), ";\n        color: ").concat(tableCellSelectedDeleteIconColor(props), ";\n      ")), ClassName.CONTROLS_DELETE_BUTTON, tableCellHoverDeleteIconBackground(props), tableCellHoverDeleteIconColor(props));
+export var DeleteButton = function DeleteButton() {
+  return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\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"])), ClassName.CONTROLS_DELETE_BUTTON_WRAP, ClassName.CONTROLS_DELETE_BUTTON, tableDeleteButtonSize, tableDeleteButtonSize, ClassName.CONTROLS_DELETE_BUTTON_WRAP, ClassName.CONTROLS_DELETE_BUTTON, Button("\n        background: ".concat(tableCellSelectedDeleteIconBackground, ";\n        color: ").concat(tableCellSelectedDeleteIconColor, ";\n      ")), ClassName.CONTROLS_DELETE_BUTTON, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor);
 };
-export var OverflowShadow = function OverflowShadow(props) {
-  return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  .", ", .", " {\n    display: block;\n    height: calc(100% - ", "px);\n    position: absolute;\n    pointer-events: none;\n    top: ", "px;\n    z-index: ", ";\n    width: ", "px;\n  }\n  .", " {\n    background: linear-gradient(\n        to left,\n        transparent 0,\n        ", "\n          ", "%\n      ),\n      linear-gradient(\n        to right,\n        ", " 0px,\n        transparent 1px\n      );\n    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        ", "\n          ", "%\n      ),\n      linear-gradient(\n        to left,\n        ", " 0px,\n        transparent 1px\n      );\n    left: ", ";\n  }\n  .", " {\n    ", "\n    .", " {\n      border-left: 1px solid ", ";\n    }\n  }\n"])), ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_LEFT_SHADOW, tableMarginTop, tableMarginTop, akEditorShadowZIndex, getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? tableOverflowShadowWidthWide : tableOverflowShadowWidth, ClassName.TABLE_LEFT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100, "var(--ds-shadow-overflow-perimeter, transparent)", ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY_SHADOW, ClassName.TABLE_LEFT_SHADOW, akEditorTableNumberColumnWidth - 1, ClassName.TABLE_RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100, "var(--ds-shadow-overflow-perimeter, transparent)", getBooleanFF('platform.editor.custom-table-width') ? "calc(100% - ".concat(getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? tableOverflowShadowWidthWide : tableOverflowShadowWidth, "px)") : "calc(100% - ".concat(getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? tableOverflowShadowWidthWide - 10 : -2, "px)"), ClassName.WITH_CONTROLS, overflowShadowWidhoutDnD(), ClassName.TABLE_LEFT_SHADOW, tableBorderColor(props));
+export var OverflowShadow = function OverflowShadow() {
+  return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  .", ", .", " {\n    display: block;\n    height: calc(100% - ", "px);\n    position: absolute;\n    pointer-events: none;\n    top: ", "px;\n    z-index: ", ";\n    width: ", "px;\n  }\n  .", " {\n    background: linear-gradient(\n        to left,\n        transparent 0,\n        ", "\n          ", "%\n      ),\n      linear-gradient(\n        to right,\n        ", " 0px,\n        transparent 1px\n      );\n    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        ", "\n          ", "%\n      ),\n      linear-gradient(\n        to left,\n        ", " 0px,\n        transparent 1px\n      );\n    left: ", ";\n  }\n  .", " {\n    ", "\n    .", " {\n      border-left: 1px solid ", ";\n    }\n  }\n"])), ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_LEFT_SHADOW, tableMarginTop, tableMarginTop, akEditorShadowZIndex, getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? tableOverflowShadowWidthWide : tableOverflowShadowWidth, ClassName.TABLE_LEFT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100, "var(--ds-shadow-overflow-perimeter, transparent)", ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY_SHADOW, ClassName.TABLE_LEFT_SHADOW, akEditorTableNumberColumnWidth - 1, ClassName.TABLE_RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100, "var(--ds-shadow-overflow-perimeter, transparent)", getBooleanFF('platform.editor.custom-table-width') ? "calc(100% - ".concat(getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? tableOverflowShadowWidthWide : tableOverflowShadowWidth, "px)") : "calc(100% - ".concat(getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? tableOverflowShadowWidthWide - 10 : -2, "px)"), ClassName.WITH_CONTROLS, overflowShadowWidhoutDnD(), ClassName.TABLE_LEFT_SHADOW, tableBorderColor);
 };
 var overflowShadowWidhoutDnD = function overflowShadowWidhoutDnD() {
   if (!getBooleanFF('platform.editor.table.drag-and-drop')) {
     return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n      .", ", .", " {\n        height: calc(100% - ", "px);\n        top: ", "px;\n      }\n    "])), ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_LEFT_SHADOW, tableMarginTopWithControl, tableMarginTopWithControl);
   }
 };
-var columnHeaderButton = function columnHeaderButton(props, cssString) {
+var columnHeaderButton = function columnHeaderButton(cssString) {
   if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
-    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n      background: ", ";\n      display: block;\n      box-sizing: border-box;\n      padding: 0;\n\n      :focus {\n        outline: none;\n      }\n\n      ", "\n    "])), tableHeaderCellBackgroundColor(props), cssString);
+    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n      background: ", ";\n      display: block;\n      box-sizing: border-box;\n      padding: 0;\n\n      :focus {\n        outline: none;\n      }\n\n      ", "\n    "])), tableHeaderCellBackgroundColor, cssString);
   } else {
-    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\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    "])), tableHeaderCellBackgroundColor(props), tableBorderColor(props), cssString);
+    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\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    "])), tableHeaderCellBackgroundColor, tableBorderColor, cssString);
   }
 };
-var columnHeaderButtonSelected = function columnHeaderButtonSelected(props) {
-  return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  color: ", ";\n  background-color: ", ";\n  border-color: ", ";\n  z-index: ", ";\n"])), "var(--ds-text-inverse, ".concat(N0, ")"), tableToolbarSelectedColor(props), tableBorderSelectedColor(props), columnControlsSelectedZIndex);
+var columnHeaderButtonSelected = function columnHeaderButtonSelected() {
+  return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  color: ", ";\n  background-color: ", ";\n  border-color: ", ";\n  z-index: ", ";\n"])), "var(--ds-text-inverse, ".concat(N0, ")"), tableToolbarSelectedColor, tableBorderSelectedColor, columnControlsSelectedZIndex);
 };
-var getFloatingDotOverrides = function getFloatingDotOverrides(props) {
-  return getBooleanFF('platform.editor.custom-table-width') ? css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n        tr\n          th:last-child\n          .", "::before,\n          tr\n          td:last-child\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: ", ";\n          right: 0px;\n        }\n      "])), ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.COLUMN_CONTROLS_DECORATIONS, tableBorderColor(props), lineMarkerSize, lineMarkerSize, "var(--ds-space-025, 2px)") : '';
+var getFloatingDotOverrides = function getFloatingDotOverrides() {
+  return getBooleanFF('platform.editor.custom-table-width') ? css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n        tr\n          th:last-child\n          .", "::before,\n          tr\n          td:last-child\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: ", ";\n          right: 0px;\n        }\n      "])), ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.COLUMN_CONTROLS_DECORATIONS, tableBorderColor, lineMarkerSize, lineMarkerSize, "var(--ds-space-025, 2px)") : '';
 };
-export var floatingColumnControls = function floatingColumnControls(props) {
+export var floatingColumnControls = function floatingColumnControls() {
   return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n    .", " {\n      box-sizing: border-box;\n      position: absolute;\n      top: 0;\n\n      .", " {\n        display: flex;\n        flex-direction: row;\n      }\n    }\n\n    .", " {\n      box-sizing: border-box;\n\n      .", " {\n        display: grid;\n        justify-items: center;\n      }\n    }\n  "])), ClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS, ClassName.DRAG_COLUMN_CONTROLS_INNER, ClassName.DRAG_COLUMN_CONTROLS, ClassName.DRAG_COLUMN_CONTROLS_INNER);
 };
-export var rowControlsWrapperDotStyle = function rowControlsWrapperDotStyle(props) {
-  return css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n    // override for DnD controls\n    div.", ">.", "::after {\n      display: none;\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  "])), ClassName.WITH_CONTROLS, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.WITH_CONTROLS, ClassName.ROW_CONTROLS_WRAPPER, tableBorderColor(props), lineMarkerSize, lineMarkerSize, tableToolbarSize + tableCellBorderWidth);
+export var rowControlsWrapperDotStyle = function rowControlsWrapperDotStyle() {
+  return css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n    // override for DnD controls\n    div.", ">.", "::after {\n      display: none;\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  "])), ClassName.WITH_CONTROLS, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.WITH_CONTROLS, ClassName.ROW_CONTROLS_WRAPPER, tableBorderColor, lineMarkerSize, lineMarkerSize, tableToolbarSize + tableCellBorderWidth);
 };
-export var columnControlsDecoration = function columnControlsDecoration(props) {
+export var columnControlsDecoration = function columnControlsDecoration() {
   if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
-    return css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n      .", " {\n        display: none;\n        cursor: pointer;\n        position: absolute;\n        width: 100%;\n        left: 0;\n        top: -", "px;\n        height: ", "px;\n        // floating dot for adding column button\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      // floating dot for adding column button - overriding style on last column to avoid scroll\n      ", "\n\n      .", " .", " {\n        display: block;\n      }\n\n      table tr:first-of-type th.", " {\n        &.", ", &.", " {\n          .", "::after {\n            ", ";\n          }\n\n          &.", "\n            .", "::after {\n            background-color: ", ";\n            border-color: ", ";\n            z-index: ", ";\n          }\n        }\n      }\n\n      table tr:first-of-type th.", " {\n        &.", ", &.", " {\n          .", "::after {\n            ", ";\n            border-left: ", "px solid\n              ", ";\n            left: -", "px;\n          }\n        }\n      }\n\n      table tr:first-of-type th.", " {\n        &.", " {\n          .", "::after {\n            ", ";\n          }\n\n          &.", "\n            .", "::after {\n            background-color: ", ";\n            border-color: ", ";\n            border-left: ", "px solid\n              ", ";\n            left: -", "px;\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    "])), ClassName.COLUMN_CONTROLS_DECORATIONS, columnControlsDecorationHeight + tableCellBorderWidth, columnControlsDecorationHeight, tableBorderColor(props), lineMarkerSize, lineMarkerSize, columnHeaderButton(props, "\n        border-right: ".concat(tableCellBorderWidth, "px solid ").concat(tableBorderColor(props), ";\n        border-top: ").concat(tableCellBorderWidth, "px solid ").concat(tableBorderColor(props), ";\n        border-bottom: ").concat(tableCellBorderWidth, "px solid ").concat(tableBorderColor(props), ";\n        box-sizing: content-box;\n        height: ").concat(tableToolbarSize - 1, "px;\n        width: 100%;\n        position: absolute;\n        top: ").concat(columnControlsDecorationHeight - tableToolbarSize, "px;\n        left: 0px;\n        z-index: ").concat(columnControlsZIndex, ";\n      ")), getFloatingDotOverrides(props), ClassName.WITH_CONTROLS, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_TABLE, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), ClassName.HOVERED_CELL_IN_DANGER, ClassName.COLUMN_CONTROLS_DECORATIONS, tableToolbarDeleteColor(props), tableBorderDeleteColor(props), akEditorUnitZIndex * 100, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_COLUMN, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), tableCellBorderWidth, tableBorderSelectedColor(props), tableCellBorderWidth, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_COLUMN, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), ClassName.HOVERED_CELL_IN_DANGER, ClassName.COLUMN_CONTROLS_DECORATIONS, tableToolbarDeleteColor(props), tableBorderDeleteColor(props), tableCellBorderWidth, tableBorderDeleteColor(props), tableCellBorderWidth, akEditorUnitZIndex * 100, ClassName.TABLE_SELECTED, ClassName.TABLE_CELL, ClassName.TABLE_SELECTED, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props));
+    return css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n      .", " {\n        display: none;\n        cursor: pointer;\n        position: absolute;\n        width: 100%;\n        left: 0;\n        top: -", "px;\n        height: ", "px;\n        // floating dot for adding column button\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      // floating dot for adding column button - overriding style on last column to avoid scroll\n      ", "\n\n      .", " .", " {\n        display: block;\n      }\n\n      table tr:first-of-type th.", " {\n        &.", ", &.", " {\n          .", "::after {\n            ", ";\n          }\n\n          &.", "\n            .", "::after {\n            background-color: ", ";\n            border-color: ", ";\n            z-index: ", ";\n          }\n        }\n      }\n\n      table tr:first-of-type th.", " {\n        &.", ", &.", " {\n          .", "::after {\n            ", ";\n            border-left: ", "px solid\n              ", ";\n            left: -", "px;\n          }\n        }\n      }\n\n      table tr:first-of-type th.", " {\n        &.", " {\n          .", "::after {\n            ", ";\n          }\n\n          &.", "\n            .", "::after {\n            background-color: ", ";\n            border-color: ", ";\n            border-left: ", "px solid\n              ", ";\n            left: -", "px;\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    "])), ClassName.COLUMN_CONTROLS_DECORATIONS, columnControlsDecorationHeight + tableCellBorderWidth, columnControlsDecorationHeight, tableBorderColor, lineMarkerSize, lineMarkerSize, columnHeaderButton("\n        border-right: ".concat(tableCellBorderWidth, "px solid ").concat(tableBorderColor, ";\n        border-top: ").concat(tableCellBorderWidth, "px solid ").concat(tableBorderColor, ";\n        border-bottom: ").concat(tableCellBorderWidth, "px solid ").concat(tableBorderColor, ";\n        box-sizing: content-box;\n        height: ").concat(tableToolbarSize - 1, "px;\n        width: 100%;\n        position: absolute;\n        top: ").concat(columnControlsDecorationHeight - tableToolbarSize, "px;\n        left: 0px;\n        z-index: ").concat(columnControlsZIndex, ";\n      ")), getFloatingDotOverrides(), ClassName.WITH_CONTROLS, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_TABLE, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(), ClassName.HOVERED_CELL_IN_DANGER, ClassName.COLUMN_CONTROLS_DECORATIONS, tableToolbarDeleteColor, tableBorderDeleteColor, akEditorUnitZIndex * 100, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_COLUMN, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(), tableCellBorderWidth, tableBorderSelectedColor, tableCellBorderWidth, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_COLUMN, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(), ClassName.HOVERED_CELL_IN_DANGER, ClassName.COLUMN_CONTROLS_DECORATIONS, tableToolbarDeleteColor, tableBorderDeleteColor, tableCellBorderWidth, tableBorderDeleteColor, tableCellBorderWidth, akEditorUnitZIndex * 100, ClassName.TABLE_SELECTED, ClassName.TABLE_CELL, ClassName.TABLE_SELECTED, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected());
   } else {
-    return css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\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        // floating dot for adding column button\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      // floating dot for adding column button - overriding style on last column to avoid scroll\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    "])), ClassName.COLUMN_CONTROLS_DECORATIONS, tableCellBorderWidth * 2, columnControlsDecorationHeight + tableCellBorderWidth, columnControlsDecorationHeight, tableBorderColor(props), lineMarkerSize, lineMarkerSize, columnHeaderButton(props, "\n        border-right: ".concat(tableCellBorderWidth, "px solid ").concat(tableBorderColor(props), ";\n        border-bottom: none;\n        height: ").concat(tableToolbarSize, "px;\n        width: 100%;\n        position: absolute;\n        top: ").concat(columnControlsDecorationHeight - tableToolbarSize, "px;\n        left: 0px;\n        z-index: ").concat(columnControlsZIndex, ";\n      ")), getFloatingDotOverrides(props), ClassName.WITH_CONTROLS, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_COLUMN, ClassName.HOVERED_TABLE, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), ClassName.HOVERED_CELL_IN_DANGER, ClassName.COLUMN_CONTROLS_DECORATIONS, tableToolbarDeleteColor(props), tableBorderDeleteColor(props), akEditorUnitZIndex * 100, ClassName.TABLE_SELECTED, ClassName.TABLE_CELL, ClassName.TABLE_SELECTED, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props));
+    return css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\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        // floating dot for adding column button\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      // floating dot for adding column button - overriding style on last column to avoid scroll\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    "])), ClassName.COLUMN_CONTROLS_DECORATIONS, tableCellBorderWidth * 2, columnControlsDecorationHeight + tableCellBorderWidth, columnControlsDecorationHeight, tableBorderColor, lineMarkerSize, lineMarkerSize, columnHeaderButton("\n        border-right: ".concat(tableCellBorderWidth, "px solid ").concat(tableBorderColor, ";\n        border-bottom: none;\n        height: ").concat(tableToolbarSize, "px;\n        width: 100%;\n        position: absolute;\n        top: ").concat(columnControlsDecorationHeight - tableToolbarSize, "px;\n        left: 0px;\n        z-index: ").concat(columnControlsZIndex, ";\n      ")), getFloatingDotOverrides(), ClassName.WITH_CONTROLS, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_COLUMN, ClassName.HOVERED_TABLE, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(), ClassName.HOVERED_CELL_IN_DANGER, ClassName.COLUMN_CONTROLS_DECORATIONS, tableToolbarDeleteColor, tableBorderDeleteColor, akEditorUnitZIndex * 100, ClassName.TABLE_SELECTED, ClassName.TABLE_CELL, ClassName.TABLE_SELECTED, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected());
   }
 };
-export var hoveredDeleteButton = function hoveredDeleteButton(props) {
-  return css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  .", ".", " {\n    .", ",\n      .", ",\n      .", " {\n      border: 1px solid ", ";\n    }\n    .", "::after {\n      background: ", ";\n    }\n\n    .", " > table {\n      td.", "::after {\n        background: ", ";\n        border: 1px solid ", ";\n      }\n      th.", " {\n        background-color: unset;\n      }\n      th.", "::after {\n        background: ", ";\n        border: 1px solid ", ";\n      }\n    }\n  }\n"])), ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.SELECTED_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_CELL, tableBorderDeleteColor(props), ClassName.SELECTED_CELL, tableCellDeleteColor(props), ClassName.TABLE_NODE_WRAPPER, ClassName.HOVERED_NO_HIGHLIGHT, tableCellDeleteColor(props), tableBorderDeleteColor(props), ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_NO_HIGHLIGHT, tableCellDeleteColor(props), tableBorderDeleteColor(props));
+export var hoveredDeleteButton = function hoveredDeleteButton() {
+  return css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  .", ".", " {\n    .", ",\n      .", ",\n      .", " {\n      border: 1px solid ", ";\n    }\n    .", "::after {\n      background: ", ";\n    }\n\n    .", " > table {\n      td.", "::after {\n        background: ", ";\n        border: 1px solid ", ";\n      }\n      th.", " {\n        background-color: unset;\n      }\n      th.", "::after {\n        background: ", ";\n        border: 1px solid ", ";\n      }\n    }\n  }\n"])), ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.SELECTED_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_CELL, tableBorderDeleteColor, ClassName.SELECTED_CELL, tableCellDeleteColor, ClassName.TABLE_NODE_WRAPPER, ClassName.HOVERED_NO_HIGHLIGHT, tableCellDeleteColor, tableBorderDeleteColor, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_NO_HIGHLIGHT, tableCellDeleteColor, tableBorderDeleteColor);
 };
-export var hoveredCell = function hoveredCell(props) {
-  return css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n  :not(.", ")\n    .", ":not(.", ") {\n    .", " {\n      position: relative;\n      border: 1px solid ", ";\n    }\n    .", ".", " {\n      position: relative;\n      border: 1px solid ", ";\n    }\n  }\n"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL, tableBorderSelectedColor(props), ClassName.HOVERED_CELL, ClassName.HOVERED_NO_HIGHLIGHT, tableBorderColor(props));
+export var hoveredCell = function hoveredCell() {
+  return css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n  :not(.", ")\n    .", ":not(.", ") {\n    .", " {\n      position: relative;\n      border: 1px solid ", ";\n    }\n    .", ".", " {\n      position: relative;\n      border: 1px solid ", ";\n    }\n  }\n"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL, tableBorderSelectedColor, ClassName.HOVERED_CELL, ClassName.HOVERED_NO_HIGHLIGHT, tableBorderColor);
 };
 export var hoveredWarningCell = css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\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"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL_WARNING, "var(--ds-background-warning, ".concat(Y50, ")"), "var(--ds-border-warning, ".concat(Y200, ")"));
 
@@ -102,17 +101,17 @@ export var hoveredWarningCell = css(_templateObject28 || (_templateObject28 = _t
 var getLastColumnResizerOverrides = function getLastColumnResizerOverrides() {
   return getBooleanFF('platform.editor.custom-table-width') ? css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n        tr\n          th:last-child\n          .", ",\n          tr\n          td:last-child\n          .", " {\n          background-color: transparent;\n          position: absolute;\n          width: ", "px;\n          height: 100%;\n          top: 0;\n          right: 0;\n          cursor: col-resize;\n          z-index: ", ";\n        }\n      "])), ClassName.RESIZE_HANDLE_DECORATION, ClassName.RESIZE_HANDLE_DECORATION, resizeHandlerAreaWidth / 2, resizeHandlerZIndex) : '';
 };
-var resizeHandleOverrides = function resizeHandleOverrides(props) {
+var resizeHandleOverrides = function resizeHandleOverrides() {
   if (getBooleanFF('platform.editor.table.drag-and-drop')) {
-    return css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n      th.", "::before,\n        td.", "::before {\n        content: ' ';\n        position: absolute;\n        left: ", ";\n        top: -1px;\n        width: ", "px;\n        height: calc(100% + 2px);\n        background-color: ", ";\n        z-index: ", ";\n      }\n\n      th.", "::before,\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    "])), ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", resizeLineWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, resizeLineWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2);
+    return css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n      th.", "::before,\n        td.", "::before {\n        content: ' ';\n        position: absolute;\n        left: ", ";\n        top: -1px;\n        width: ", "px;\n        height: calc(100% + 2px);\n        background-color: ", ";\n        z-index: ", ";\n      }\n\n      th.", "::before,\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    "])), ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", resizeLineWidth, tableBorderSelectedColor, columnControlsZIndex * 2, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, resizeLineWidth, tableBorderSelectedColor, columnControlsZIndex * 2);
   }
-  return css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\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: ", ";\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  "])), ClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", resizeLineWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", resizeLineWidth, tableToolbarSize + tableCellBorderWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, tableToolbarSize + tableCellBorderWidth, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, resizeLineWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, resizeLineWidth, tableToolbarSize + tableCellBorderWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, tableToolbarSize + tableCellBorderWidth);
+  return css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\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: ", ";\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  "])), ClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", resizeLineWidth, tableBorderSelectedColor, columnControlsZIndex * 2, ClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", resizeLineWidth, tableToolbarSize + tableCellBorderWidth, tableBorderSelectedColor, columnControlsZIndex * 2, tableToolbarSize + tableCellBorderWidth, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, resizeLineWidth, tableBorderSelectedColor, columnControlsZIndex * 2, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, resizeLineWidth, tableToolbarSize + tableCellBorderWidth, tableBorderSelectedColor, columnControlsZIndex * 2, tableToolbarSize + tableCellBorderWidth);
 };
-export var resizeHandle = function resizeHandle(props) {
-  return css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\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    ", "\n\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"])), ClassName.TABLE_CONTAINER, ClassName.RESIZE_HANDLE_DECORATION, resizeHandlerAreaWidth, resizeHandlerAreaWidth / 2, resizeHandlerZIndex, getLastColumnResizerOverrides(), resizeHandleOverrides(props), ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, tableToolbarSize + tableCellBorderWidth, tableToolbarSize + tableCellBorderWidth);
+export var resizeHandle = function resizeHandle() {
+  return css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\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    ", "\n\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"])), ClassName.TABLE_CONTAINER, ClassName.RESIZE_HANDLE_DECORATION, resizeHandlerAreaWidth, resizeHandlerAreaWidth / 2, resizeHandlerZIndex, getLastColumnResizerOverrides(), resizeHandleOverrides(), ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, tableToolbarSize + tableCellBorderWidth, tableToolbarSize + tableCellBorderWidth);
 };
 
 // Drag and Drop: drop target insert line
-export var insertLine = function insertLine(props) {
-  return css(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n  .", " {\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: -1px;\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: -1px;\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      left: ", ";\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\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% + ", "px);\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    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      top: -1px;\n      height: ", "px;\n      width: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      position: absolute;\n      height: ", "px;\n      width: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -1px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      bottom: 0;\n      height: ", "px;\n      width: calc(100% + 2px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      bottom: 0;\n      position: absolute;\n      height: ", "px;\n      width: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n  }\n"])), ClassName.TABLE_CONTAINER, ClassName.WITH_FIRST_COLUMN_INSERT_LINE, insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_FIRST_COLUMN_INSERT_LINE, insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, tableCellBorderWidth, ClassName.WITH_COLUMN_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_COLUMN_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, tableCellBorderWidth, ClassName.WITH_LAST_COLUMN_INSERT_LINE, insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_LAST_COLUMN_INSERT_LINE, insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, tableCellBorderWidth, ClassName.WITH_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_LAST_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_LAST_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor(props), columnControlsZIndex * 2);
+export var insertLine = function insertLine() {
+  return css(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n  .", " {\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: -1px;\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: -1px;\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      left: ", ";\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\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% + ", "px);\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    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      top: -1px;\n      height: ", "px;\n      width: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      position: absolute;\n      height: ", "px;\n      width: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -1px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      bottom: 0;\n      height: ", "px;\n      width: calc(100% + 2px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      bottom: 0;\n      position: absolute;\n      height: ", "px;\n      width: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n  }\n"])), ClassName.TABLE_CONTAINER, ClassName.WITH_FIRST_COLUMN_INSERT_LINE, insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor, columnControlsZIndex * 2, ClassName.WITH_FIRST_COLUMN_INSERT_LINE, insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor, columnControlsZIndex * 2, tableCellBorderWidth, ClassName.WITH_COLUMN_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor, columnControlsZIndex * 2, ClassName.WITH_COLUMN_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor, columnControlsZIndex * 2, tableCellBorderWidth, ClassName.WITH_LAST_COLUMN_INSERT_LINE, insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor, columnControlsZIndex * 2, ClassName.WITH_LAST_COLUMN_INSERT_LINE, insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor, columnControlsZIndex * 2, tableCellBorderWidth, ClassName.WITH_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor, columnControlsZIndex * 2, ClassName.WITH_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor, columnControlsZIndex * 2, ClassName.WITH_LAST_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableBorderSelectedColor, columnControlsZIndex * 2, ClassName.WITH_LAST_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", insertLineWidth, tableCellBorderWidth * 2, tableBorderSelectedColor, columnControlsZIndex * 2);
 };

package/dist/types/types.d.ts

@@ -329,6 +329,7 @@ export declare const TableCssClassName: {
     CONTEXTUAL_MENU_BUTTON: string;
     CONTEXTUAL_MENU_BUTTON_FIXED: string;
     CONTEXTUAL_MENU_ICON: string;
+    CONTEXTUAL_MENU_ICON_SMALL: string;
     SELECTED_CELL: string;
     NODEVIEW_WRAPPER: string;
     TABLE_SELECTED: string;

package/dist/types/ui/FloatingContextualButton/styles.d.ts

@@ -1,3 +1,2 @@
-import type { ThemeProps } from '@atlaskit/theme/types';
-export declare const tableFloatingCellButtonStyles: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const tableFloatingCellButtonSelectedStyles: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const tableFloatingCellButtonStyles: () => import("@emotion/react").SerializedStyles;
+export declare const tableFloatingCellButtonSelectedStyles: () => import("@emotion/react").SerializedStyles;

package/dist/types/ui/FloatingContextualMenu/ContextualMenu.d.ts

@@ -28,9 +28,19 @@ export declare class ContextualMenu extends Component<Props & WrappedComponentPr
     static defaultProps: {
         boundariesElement: HTMLElement | undefined;
     };
-    render(): jsx.JSX.Element | null;
+    render(): jsx.JSX.Element;
     private handleSubMenuRef;
-    private createItems;
+    private createBackgroundColorItem;
+    private createMergeSplitCellItems;
+    private createInsertColumnItem;
+    private createInsertRowItem;
+    private createClearCellsItem;
+    private createDeleteColumnItem;
+    private createDeleteRowItem;
+    private createDistributeColumnsItem;
+    private createSortColumnItems;
+    private createOriginalContextMenuItems;
+    private createNewContextMenuItems;
     private onMenuItemActivated;
     private toggleOpen;
     private handleOpenChange;

package/dist/types/ui/common-styles.d.ts

@@ -1,8 +1,7 @@
 import type { FeatureFlags } from '@atlaskit/editor-common/types';
-import type { ThemeProps } from '@atlaskit/theme/types';
 export declare const insertColumnButtonOffset: number;
 export declare const tableRowHeight = 44;
-export declare const tableStyles: (props: ThemeProps & {
+export declare const tableStyles: (props: {
     featureFlags?: FeatureFlags;
 }) => import("@emotion/react").SerializedStyles;
 export declare const tableFullPageEditorStyles: import("@emotion/react").SerializedStyles;

package/dist/types/ui/consts.d.ts

@@ -1,22 +1,22 @@
 /**
  * Basic colors added to prevent content overflow in table cells.
  */
-export declare const tableCellBackgroundColor: import("@atlaskit/theme").ThemedValue<"var(--ds-surface)">;
-export declare const tableHeaderCellBackgroundColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-accent-gray-subtlest)">;
-export declare const tableToolbarColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-neutral-subtle)">;
-export declare const tableTextColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text-subtlest)">;
-export declare const tableBorderColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-accent-gray-subtler)">;
+export declare const tableCellBackgroundColor: "var(--ds-surface)";
+export declare const tableHeaderCellBackgroundColor: "var(--ds-background-accent-gray-subtlest)";
+export declare const tableToolbarColor: "var(--ds-background-neutral-subtle)";
+export declare const tableTextColor: "var(--ds-text-subtlest)";
+export declare const tableBorderColor: "var(--ds-background-accent-gray-subtler)";
 export declare const tableFloatingControlsColor: "var(--ds-background-neutral)";
-export declare const tableCellSelectedColor: import("@atlaskit/theme").ThemedValue<"var(--ds-blanket-selected)">;
-export declare const tableToolbarSelectedColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-selected-pressed)">;
-export declare const tableBorderSelectedColor: import("@atlaskit/theme").ThemedValue<"var(--ds-border-focused)">;
-export declare const tableCellSelectedDeleteIconColor: import("@atlaskit/theme").ThemedValue<"var(--ds-icon-subtle)">;
-export declare const tableCellSelectedDeleteIconBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-accent-gray-subtlest)">;
-export declare const tableCellDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-blanket-danger)">;
-export declare const tableBorderDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-border-danger)">;
-export declare const tableToolbarDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-danger-pressed)">;
-export declare const tableCellHoverDeleteIconColor: import("@atlaskit/theme").ThemedValue<"var(--ds-icon-inverse)">;
-export declare const tableCellHoverDeleteIconBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-danger-bold)">;
+export declare const tableCellSelectedColor: "var(--ds-blanket-selected)";
+export declare const tableToolbarSelectedColor: "var(--ds-background-selected-pressed)";
+export declare const tableBorderSelectedColor: "var(--ds-border-focused)";
+export declare const tableCellSelectedDeleteIconColor: "var(--ds-icon-subtle)";
+export declare const tableCellSelectedDeleteIconBackground: "var(--ds-background-accent-gray-subtlest)";
+export declare const tableCellDeleteColor: "var(--ds-blanket-danger)";
+export declare const tableBorderDeleteColor: "var(--ds-border-danger)";
+export declare const tableToolbarDeleteColor: "var(--ds-background-danger-pressed)";
+export declare const tableCellHoverDeleteIconColor: "var(--ds-icon-inverse)";
+export declare const tableCellHoverDeleteIconBackground: "var(--ds-background-danger-bold)";
 export declare const tableBorderRadiusSize = 3;
 export declare const tablePadding = 8;
 export declare const tableScrollbarOffset = 15;

package/dist/types/ui/icons/MergeCellsIcon.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const MergeCellsIcon: () => JSX.Element;

package/dist/types/ui/icons/SplitCellIcon.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SplitCellIcon: () => JSX.Element;

package/dist/types/ui/icons/index.d.ts

@@ -2,6 +2,8 @@ export { DragHandleIcon } from './DragHandleIcon';
 export { DragInMotionIcon } from './DragInMotionIcon';
 export { DragHandleDisabledIcon } from './DragHandleDisabledIcon';
 export { MinimisedHandleIcon } from './MinimisedHandle';
+export { MergeCellsIcon } from './MergeCellsIcon';
+export { SplitCellIcon } from './SplitCellIcon';
 export { AddRowAboveIcon } from './AddRowAboveIcon';
 export { AddRowBelowIcon } from './AddRowBelowIcon';
 export { AddColLeftIcon } from './AddColLeftIcon';

package/dist/types/ui/ui-styles.d.ts

@@ -1,20 +1,19 @@
-import type { ThemeProps } from '@atlaskit/theme/types';
-export declare const InsertMarker: (props: ThemeProps, cssString?: string) => import("@emotion/react").SerializedStyles;
-export declare const HeaderButton: (props: ThemeProps, cssString?: string) => import("@emotion/react").SerializedStyles;
-export declare const HeaderButtonHover: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const HeaderButtonDanger: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const dragInsertButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const dragCornerControlButton: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const insertColumnButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const insertRowButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const InsertMarker: (cssString?: string) => import("@emotion/react").SerializedStyles;
+export declare const HeaderButton: (cssString?: string) => import("@emotion/react").SerializedStyles;
+export declare const HeaderButtonHover: () => import("@emotion/react").SerializedStyles;
+export declare const HeaderButtonDanger: () => import("@emotion/react").SerializedStyles;
+export declare const dragInsertButtonWrapper: () => import("@emotion/react").SerializedStyles;
+export declare const dragCornerControlButton: () => import("@emotion/react").SerializedStyles;
+export declare const insertColumnButtonWrapper: () => import("@emotion/react").SerializedStyles;
+export declare const insertRowButtonWrapper: () => import("@emotion/react").SerializedStyles;
 export declare const columnControlsLineMarker: () => import("@emotion/react").SerializedStyles;
-export declare const DeleteButton: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const OverflowShadow: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const floatingColumnControls: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const rowControlsWrapperDotStyle: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const columnControlsDecoration: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const hoveredDeleteButton: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const hoveredCell: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const DeleteButton: () => import("@emotion/react").SerializedStyles;
+export declare const OverflowShadow: () => import("@emotion/react").SerializedStyles;
+export declare const floatingColumnControls: () => import("@emotion/react").SerializedStyles;
+export declare const rowControlsWrapperDotStyle: () => import("@emotion/react").SerializedStyles;
+export declare const columnControlsDecoration: () => import("@emotion/react").SerializedStyles;
+export declare const hoveredDeleteButton: () => import("@emotion/react").SerializedStyles;
+export declare const hoveredCell: () => import("@emotion/react").SerializedStyles;
 export declare const hoveredWarningCell: import("@emotion/react").SerializedStyles;
-export declare const resizeHandle: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const insertLine: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const resizeHandle: () => import("@emotion/react").SerializedStyles;
+export declare const insertLine: () => import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/types.d.ts

@@ -329,6 +329,7 @@ export declare const TableCssClassName: {
     CONTEXTUAL_MENU_BUTTON: string;
     CONTEXTUAL_MENU_BUTTON_FIXED: string;
     CONTEXTUAL_MENU_ICON: string;
+    CONTEXTUAL_MENU_ICON_SMALL: string;
     SELECTED_CELL: string;
     NODEVIEW_WRAPPER: string;
     TABLE_SELECTED: string;

package/dist/types-ts4.5/ui/FloatingContextualButton/styles.d.ts

@@ -1,3 +1,2 @@
-import type { ThemeProps } from '@atlaskit/theme/types';
-export declare const tableFloatingCellButtonStyles: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const tableFloatingCellButtonSelectedStyles: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const tableFloatingCellButtonStyles: () => import("@emotion/react").SerializedStyles;
+export declare const tableFloatingCellButtonSelectedStyles: () => import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/ui/FloatingContextualMenu/ContextualMenu.d.ts

@@ -28,9 +28,19 @@ export declare class ContextualMenu extends Component<Props & WrappedComponentPr
     static defaultProps: {
         boundariesElement: HTMLElement | undefined;
     };
-    render(): jsx.JSX.Element | null;
+    render(): jsx.JSX.Element;
     private handleSubMenuRef;
-    private createItems;
+    private createBackgroundColorItem;
+    private createMergeSplitCellItems;
+    private createInsertColumnItem;
+    private createInsertRowItem;
+    private createClearCellsItem;
+    private createDeleteColumnItem;
+    private createDeleteRowItem;
+    private createDistributeColumnsItem;
+    private createSortColumnItems;
+    private createOriginalContextMenuItems;
+    private createNewContextMenuItems;
     private onMenuItemActivated;
     private toggleOpen;
     private handleOpenChange;

package/dist/types-ts4.5/ui/common-styles.d.ts

@@ -1,8 +1,7 @@
 import type { FeatureFlags } from '@atlaskit/editor-common/types';
-import type { ThemeProps } from '@atlaskit/theme/types';
 export declare const insertColumnButtonOffset: number;
 export declare const tableRowHeight = 44;
-export declare const tableStyles: (props: ThemeProps & {
+export declare const tableStyles: (props: {
     featureFlags?: FeatureFlags;
 }) => import("@emotion/react").SerializedStyles;
 export declare const tableFullPageEditorStyles: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/ui/consts.d.ts

@@ -1,22 +1,22 @@
 /**
  * Basic colors added to prevent content overflow in table cells.
  */
-export declare const tableCellBackgroundColor: import("@atlaskit/theme").ThemedValue<"var(--ds-surface)">;
-export declare const tableHeaderCellBackgroundColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-accent-gray-subtlest)">;
-export declare const tableToolbarColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-neutral-subtle)">;
-export declare const tableTextColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text-subtlest)">;
-export declare const tableBorderColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-accent-gray-subtler)">;
+export declare const tableCellBackgroundColor: "var(--ds-surface)";
+export declare const tableHeaderCellBackgroundColor: "var(--ds-background-accent-gray-subtlest)";
+export declare const tableToolbarColor: "var(--ds-background-neutral-subtle)";
+export declare const tableTextColor: "var(--ds-text-subtlest)";
+export declare const tableBorderColor: "var(--ds-background-accent-gray-subtler)";
 export declare const tableFloatingControlsColor: "var(--ds-background-neutral)";
-export declare const tableCellSelectedColor: import("@atlaskit/theme").ThemedValue<"var(--ds-blanket-selected)">;
-export declare const tableToolbarSelectedColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-selected-pressed)">;
-export declare const tableBorderSelectedColor: import("@atlaskit/theme").ThemedValue<"var(--ds-border-focused)">;
-export declare const tableCellSelectedDeleteIconColor: import("@atlaskit/theme").ThemedValue<"var(--ds-icon-subtle)">;
-export declare const tableCellSelectedDeleteIconBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-accent-gray-subtlest)">;
-export declare const tableCellDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-blanket-danger)">;
-export declare const tableBorderDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-border-danger)">;
-export declare const tableToolbarDeleteColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-danger-pressed)">;
-export declare const tableCellHoverDeleteIconColor: import("@atlaskit/theme").ThemedValue<"var(--ds-icon-inverse)">;
-export declare const tableCellHoverDeleteIconBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-danger-bold)">;
+export declare const tableCellSelectedColor: "var(--ds-blanket-selected)";
+export declare const tableToolbarSelectedColor: "var(--ds-background-selected-pressed)";
+export declare const tableBorderSelectedColor: "var(--ds-border-focused)";
+export declare const tableCellSelectedDeleteIconColor: "var(--ds-icon-subtle)";
+export declare const tableCellSelectedDeleteIconBackground: "var(--ds-background-accent-gray-subtlest)";
+export declare const tableCellDeleteColor: "var(--ds-blanket-danger)";
+export declare const tableBorderDeleteColor: "var(--ds-border-danger)";
+export declare const tableToolbarDeleteColor: "var(--ds-background-danger-pressed)";
+export declare const tableCellHoverDeleteIconColor: "var(--ds-icon-inverse)";
+export declare const tableCellHoverDeleteIconBackground: "var(--ds-background-danger-bold)";
 export declare const tableBorderRadiusSize = 3;
 export declare const tablePadding = 8;
 export declare const tableScrollbarOffset = 15;

package/dist/types-ts4.5/ui/icons/MergeCellsIcon.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const MergeCellsIcon: () => JSX.Element;

package/dist/types-ts4.5/ui/icons/SplitCellIcon.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SplitCellIcon: () => JSX.Element;

package/dist/types-ts4.5/ui/icons/index.d.ts

@@ -2,6 +2,8 @@ export { DragHandleIcon } from './DragHandleIcon';
 export { DragInMotionIcon } from './DragInMotionIcon';
 export { DragHandleDisabledIcon } from './DragHandleDisabledIcon';
 export { MinimisedHandleIcon } from './MinimisedHandle';
+export { MergeCellsIcon } from './MergeCellsIcon';
+export { SplitCellIcon } from './SplitCellIcon';
 export { AddRowAboveIcon } from './AddRowAboveIcon';
 export { AddRowBelowIcon } from './AddRowBelowIcon';
 export { AddColLeftIcon } from './AddColLeftIcon';

package/dist/types-ts4.5/ui/ui-styles.d.ts

@@ -1,20 +1,19 @@
-import type { ThemeProps } from '@atlaskit/theme/types';
-export declare const InsertMarker: (props: ThemeProps, cssString?: string) => import("@emotion/react").SerializedStyles;
-export declare const HeaderButton: (props: ThemeProps, cssString?: string) => import("@emotion/react").SerializedStyles;
-export declare const HeaderButtonHover: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const HeaderButtonDanger: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const dragInsertButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const dragCornerControlButton: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const insertColumnButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const insertRowButtonWrapper: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const InsertMarker: (cssString?: string) => import("@emotion/react").SerializedStyles;
+export declare const HeaderButton: (cssString?: string) => import("@emotion/react").SerializedStyles;
+export declare const HeaderButtonHover: () => import("@emotion/react").SerializedStyles;
+export declare const HeaderButtonDanger: () => import("@emotion/react").SerializedStyles;
+export declare const dragInsertButtonWrapper: () => import("@emotion/react").SerializedStyles;
+export declare const dragCornerControlButton: () => import("@emotion/react").SerializedStyles;
+export declare const insertColumnButtonWrapper: () => import("@emotion/react").SerializedStyles;
+export declare const insertRowButtonWrapper: () => import("@emotion/react").SerializedStyles;
 export declare const columnControlsLineMarker: () => import("@emotion/react").SerializedStyles;
-export declare const DeleteButton: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const OverflowShadow: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const floatingColumnControls: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const rowControlsWrapperDotStyle: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const columnControlsDecoration: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const hoveredDeleteButton: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const hoveredCell: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const DeleteButton: () => import("@emotion/react").SerializedStyles;
+export declare const OverflowShadow: () => import("@emotion/react").SerializedStyles;
+export declare const floatingColumnControls: () => import("@emotion/react").SerializedStyles;
+export declare const rowControlsWrapperDotStyle: () => import("@emotion/react").SerializedStyles;
+export declare const columnControlsDecoration: () => import("@emotion/react").SerializedStyles;
+export declare const hoveredDeleteButton: () => import("@emotion/react").SerializedStyles;
+export declare const hoveredCell: () => import("@emotion/react").SerializedStyles;
 export declare const hoveredWarningCell: import("@emotion/react").SerializedStyles;
-export declare const resizeHandle: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
-export declare const insertLine: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const resizeHandle: () => import("@emotion/react").SerializedStyles;
+export declare const insertLine: () => import("@emotion/react").SerializedStyles;