@atlaskit/editor-plugin-table 7.16.11 → 7.16.12

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

@@ -15,7 +15,7 @@ var _consts = require("./consts");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25;
 /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs mahual remediation */
 var InsertLine = function InsertLine(cssString) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    background: ", ";\n    display: none;\n    position: absolute;\n    z-index: ", ";\n    ", "\n  }\n"])), _types.TableCssClassName.CONTROLS_INSERT_LINE, _consts.tableBorderSelectedColor, _editorSharedStyles.akEditorUnitZIndex, cssString);
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tbackground: ", ";\n\t\tdisplay: none;\n\t\tposition: absolute;\n\t\tz-index: ", ";\n\t\t", "\n\t}\n"])), _types.TableCssClassName.CONTROLS_INSERT_LINE, _consts.tableBorderSelectedColor, _editorSharedStyles.akEditorUnitZIndex, cssString);
 };
 var Marker = function Marker() {
   return (0, _react.css)({
@@ -28,37 +28,37 @@ var Marker = function Marker() {
   });
 };
 var InsertMarker = exports.InsertMarker = function InsertMarker(cssString) {
-  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    ", ";\n    ", "\n  }\n"])), _types.TableCssClassName.CONTROLS_INSERT_MARKER, Marker(), cssString);
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\t", ";\n\t\t", "\n\t}\n"])), _types.TableCssClassName.CONTROLS_INSERT_MARKER, Marker(), cssString);
 };
 var Button = function Button(cssString) {
-  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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)", _types.TableCssClassName.CONTROLS_BUTTON_ICON, cssString);
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\tborder-radius: ", ";\n\tborder-width: 0px;\n\tdisplay: inline-flex;\n\tmax-width: 100%;\n\ttext-align: center;\n\tmargin: 0px;\n\tpadding: 0px;\n\ttext-decoration: none;\n\ttransition:\n\t\tbackground 0.1s ease-out 0s,\n\t\tbox-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\n\toutline: none !important;\n\tcursor: none;\n\n\t> .", " {\n\t\tdisplay: inline-flex;\n\t\tmax-height: 100%;\n\t\tmax-width: 100%;\n\t}\n\t", "\n"])), "var(--ds-border-radius, 3px)", _types.TableCssClassName.CONTROLS_BUTTON_ICON, cssString);
 };
 
 // Explicit pixel values required here to ensure classic row controls align correctly
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 var HeaderButton = exports.HeaderButton = function HeaderButton(cssString) {
-  return (0, _react.css)(_templateObject4 || (_templateObject4 = (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, _consts.tableHeaderCellBackgroundColor, _consts.tableBorderColor, cssString, _types.TableCssClassName.ROW_CONTROLS_BUTTON, _types.TableCssClassName.CONTROLS_BUTTON, "var(--ds-icon-inverse, ".concat(_colors.N0, ")"), _consts.tableToolbarSelectedColor, _consts.tableBorderSelectedColor);
+  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tbackground: ", ";\n\t\tborder: 1px solid ", ";\n\t\tdisplay: block;\n\t\tbox-sizing: border-box;\n\t\tpadding: 0;\n\n\t\t:focus {\n\t\t\toutline: none;\n\t\t}\n\t\t", "\n\t}\n\n\t.", "::after {\n\t\tcontent: ' ';\n\t\tbackground-color: transparent;\n\t\tleft: -15px;\n\t\ttop: 0;\n\t\tposition: absolute;\n\t\twidth: 15px;\n\t\theight: 100%;\n\t\tz-index: 1;\n\t}\n\n\t.active .", " {\n\t\tcolor: ", ";\n\t\tbackground-color: ", ";\n\t\tborder-color: ", ";\n\t}\n"])), _types.TableCssClassName.CONTROLS_BUTTON, _consts.tableHeaderCellBackgroundColor, _consts.tableBorderColor, cssString, _types.TableCssClassName.ROW_CONTROLS_BUTTON, _types.TableCssClassName.CONTROLS_BUTTON, "var(--ds-icon-inverse, ".concat(_colors.N0, ")"), _consts.tableToolbarSelectedColor, _consts.tableBorderSelectedColor);
 };
 var HeaderButtonHover = exports.HeaderButtonHover = function HeaderButtonHover() {
-  return (0, _react.css)(_templateObject5 || (_templateObject5 = (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, ")"), _consts.tableToolbarSelectedColor, _consts.tableBorderSelectedColor);
+  return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t.", ":hover {\n\t\tcolor: ", ";\n\t\tbackground-color: ", ";\n\t\tborder-color: ", ";\n\t\tcursor: pointer;\n\t}\n"])), _types.TableCssClassName.CONTROLS_BUTTON, "var(--ds-icon-inverse, ".concat(_colors.N0, ")"), _consts.tableToolbarSelectedColor, _consts.tableBorderSelectedColor);
 };
 var HeaderButtonDanger = exports.HeaderButtonDanger = function HeaderButtonDanger() {
-  return (0, _react.css)(_templateObject6 || (_templateObject6 = (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, _consts.tableToolbarDeleteColor, _consts.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex);
+  return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " .", " {\n\t\tbackground-color: ", ";\n\t\tborder-color: ", ";\n\t\tposition: relative;\n\t\tz-index: ", ";\n\t}\n"])), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.CONTROLS_BUTTON, _consts.tableToolbarDeleteColor, _consts.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex);
 };
 var InsertButton = function InsertButton() {
-  return (0, _react.css)(_templateObject7 || (_templateObject7 = (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);
+  return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tposition: absolute;\n\t\tz-index: ", ";\n\t\tbottom: 0;\n\t}\n\t.", ", .", " {\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t}\n\t.", " {\n\t\t", "\n\t}\n\t.", " {\n\t\tdisplay: none;\n\t}\n\t&:hover .", " {\n\t\tdisplay: flex;\n\t}\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)(_templateObject8 || (_templateObject8 = (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)");
+  return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t.", ":hover {\n\t\tbackground: ", ";\n\t\tcolor: ", ";\n\t\tcursor: pointer;\n\t}\n"])), _types.TableCssClassName.CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, ".concat(_colors.B300, ")"), "var(--ds-icon-inverse, white)");
 };
 var dragInsertButtonWrapper = exports.dragInsertButtonWrapper = function dragInsertButtonWrapper() {
-  return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\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"])), _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, _editorSharedStyles.akEditorUnitZIndex + 10, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON, Button("\n    background: ".concat("var(--ds-surface-overlay, white)", ";\n    color: ", "var(--ds-icon, ".concat(_colors.N300, ")"), ";\n    border: 1px solid ", "var(--ds-background-accent-gray-subtler, #C1C7D0)", ";\n    border-radius: 50%;\n    height: ", _consts.dragTableInsertColumnButtonSize, "px;\n    width: ").concat(_consts.dragTableInsertColumnButtonSize, "px;\n  ")), _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, ".concat(_colors.B300, ")"), "var(--ds-background-brand-bold, ".concat(_colors.B300, ")"), "var(--ds-icon-inverse, white)");
+  return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tposition: absolute;\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tbottom: -3px;\n\t\tleft: 2px;\n\t}\n\n\t.", " {\n\t\tleft: -3px;\n\t\tbottom: -2px;\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", ":hover {\n\t\tbackground: ", ";\n\t\tborder: 1px solid ", ";\n\t\tcolor: ", ";\n\t\tcursor: pointer;\n\t}\n"])), _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, _editorSharedStyles.akEditorUnitZIndex + 10, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON, Button("\n    background: ".concat("var(--ds-surface-overlay, white)", ";\n    color: ", "var(--ds-icon, ".concat(_colors.N300, ")"), ";\n    border: 1px solid ", "var(--ds-background-accent-gray-subtler, #C1C7D0)", ";\n    border-radius: 50%;\n    height: ", _consts.dragTableInsertColumnButtonSize, "px;\n    width: ").concat(_consts.dragTableInsertColumnButtonSize, "px;\n  ")), _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, ".concat(_colors.B300, ")"), "var(--ds-background-brand-bold, ".concat(_colors.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
 var dragCornerControlButton = exports.dragCornerControlButton = function dragCornerControlButton() {
-  return (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\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"])), _types.TableCssClassName.DRAG_CORNER_BUTTON, _editorSharedStyles.akEditorUnitZIndex * 99, _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER, "var(--ds-border-selected, #0C66E4)", _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER, _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER, "var(--ds-border-inverse, #FFF)", "var(--ds-background-accent-gray-subtler, #DCDFE4)");
+  return (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\twidth: 15px;\n\t\theight: 15px;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tposition: absolute;\n\t\ttop: -17px;\n\t\tleft: -5px;\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tpadding: 0;\n\t\toutline: none;\n\t\tz-index: ", ";\n\n\t\t&.active .", " {\n\t\t\tbackground-color: ", ";\n\t\t\twidth: 10px;\n\t\t\theight: 10px;\n\t\t\tborder-width: 2px;\n\t\t\tborder-radius: 4px;\n\n\t\t\ttop: 3px;\n\t\t\tleft: 2px;\n\t\t}\n\n\t\t&:hover {\n\t\t\tcursor: pointer;\n\n\t\t\t.", " {\n\t\t\t\twidth: 10px;\n\t\t\t\theight: 10px;\n\t\t\t\tborder-radius: 4px;\n\t\t\t\ttop: 3px;\n\t\t\t\tleft: 2px;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\tborder: 1px solid ", ";\n\t\tbackground-color: ", ";\n\t\tborder-radius: 2px;\n\t\twidth: 5px;\n\t\theight: 5px;\n\t\tposition: relative;\n\t}\n"])), _types.TableCssClassName.DRAG_CORNER_BUTTON, _editorSharedStyles.akEditorUnitZIndex * 99, _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER, "var(--ds-border-selected, #0C66E4)", _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER, _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER, "var(--ds-border-inverse, #FFF)", "var(--ds-background-accent-gray-subtler, #DCDFE4)");
 };
 var insertColumnButtonWrapper = exports.insertColumnButtonWrapper = function insertColumnButtonWrapper() {
   return (0, _react.css)(InsertButton(), InsertButtonHover(), InsertLine("\n    width: 2px;\n    left: 9px;\n  "));
@@ -67,17 +67,17 @@ var insertRowButtonWrapper = exports.insertRowButtonWrapper = function insertRow
   return (0, _react.css)(InsertButton(), InsertButtonHover(), InsertLine("\n    height: 2px;\n    top: -11px;\n    left: ".concat(_consts.tableInsertColumnButtonSize - 1, "px;\n  ")));
 };
 var columnControlsLineMarker = exports.columnControlsLineMarker = function columnControlsLineMarker() {
-  return (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\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"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_CONTROLS);
+  return (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n\t.", ".", " table tr:first-of-type td,\n\t.", ".", " table tr:first-of-type th {\n\t\tposition: relative;\n\t}\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_CONTROLS);
 };
 var DeleteButton = exports.DeleteButton = function DeleteButton() {
-  return (0, _react.css)(_templateObject12 || (_templateObject12 = (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(_consts.tableCellSelectedDeleteIconBackground, ";\n        color: ").concat(_consts.tableCellSelectedDeleteIconColor, ";\n      ")), _types.TableCssClassName.CONTROLS_DELETE_BUTTON, _consts.tableCellHoverDeleteIconBackground, _consts.tableCellHoverDeleteIconColor);
+  return (0, _react.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n\t.", ", .", " {\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t}\n\t.", " {\n\t\t.", " {\n\t\t\t", "\n\t\t}\n\t}\n\n\t.", ":hover {\n\t\tbackground: ", ";\n\t\tcolor: ", ";\n\t\tcursor: pointer;\n\t}\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(_consts.tableCellSelectedDeleteIconBackground, ";\n        color: ").concat(_consts.tableCellSelectedDeleteIconColor, ";\n      ")), _types.TableCssClassName.CONTROLS_DELETE_BUTTON, _consts.tableCellHoverDeleteIconBackground, _consts.tableCellHoverDeleteIconColor);
 };
 var OverflowShadow = exports.OverflowShadow = function OverflowShadow(isDragAndDropEnabled) {
-  return (0, _react.css)(_templateObject13 || (_templateObject13 = (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: ", "px;\n  }\n  .", " {\n    background: linear-gradient(\n        to left,\n        transparent 0,\n        ", " 140%\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        ", " 140%\n      ),\n      linear-gradient(\n        to left,\n        ", " 0px,\n        transparent 1px\n      );\n    left: calc(100% - ", "px);\n  }\n  .", " {\n    ", "\n    .", " {\n      border-left: 1px solid ", ";\n    }\n  }\n"])), _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTop, _styles.tableMarginTop, _editorSharedStyles.akEditorShadowZIndex, _consts.tableOverflowShadowWidthWide, _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)", _consts.tableOverflowShadowWidthWide, _types.TableCssClassName.WITH_CONTROLS, overflowShadowWidhoutDnD(isDragAndDropEnabled), _types.TableCssClassName.TABLE_LEFT_SHADOW, _consts.tableBorderColor);
+  return (0, _react.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n\t.", ", .", " {\n\t\tdisplay: block;\n\t\theight: calc(100% - ", "px);\n\t\tposition: absolute;\n\t\tpointer-events: none;\n\t\ttop: ", "px;\n\t\tz-index: ", ";\n\t\twidth: ", "px;\n\t}\n\t.", " {\n\t\tbackground: linear-gradient(\n\t\t\t\tto left,\n\t\t\t\ttransparent 0,\n\t\t\t\t", " 140%\n\t\t\t),\n\t\t\tlinear-gradient(\n\t\t\t\tto right,\n\t\t\t\t", " 0px,\n\t\t\t\ttransparent 1px\n\t\t\t);\n\t\tleft: 0px;\n\t}\n\t.", "[data-number-column='true'] > :not(.", ").", " {\n\t\tleft: ", "px;\n\t}\n\t.", " {\n\t\tbackground: linear-gradient(\n\t\t\t\tto right,\n\t\t\t\ttransparent 0,\n\t\t\t\t", " 140%\n\t\t\t),\n\t\t\tlinear-gradient(\n\t\t\t\tto left,\n\t\t\t\t", " 0px,\n\t\t\t\ttransparent 1px\n\t\t\t);\n\t\tleft: calc(100% - ", "px);\n\t}\n\t.", " {\n\t\t", "\n\t\t.", " {\n\t\t\tborder-left: 1px solid ", ";\n\t\t}\n\t}\n"])), _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTop, _styles.tableMarginTop, _editorSharedStyles.akEditorShadowZIndex, _consts.tableOverflowShadowWidthWide, _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)", _consts.tableOverflowShadowWidthWide, _types.TableCssClassName.WITH_CONTROLS, overflowShadowWidhoutDnD(isDragAndDropEnabled), _types.TableCssClassName.TABLE_LEFT_SHADOW, _consts.tableBorderColor);
 };
 var overflowShadowWidhoutDnD = function overflowShadowWidhoutDnD(isDragAndDropEnabled) {
   if (!isDragAndDropEnabled) {
-    return (0, _react.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n      .", ", .", " {\n        height: calc(100% - ", "px);\n        top: ", "px;\n      }\n    "])), _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTopWithControl, _styles.tableMarginTopWithControl);
+    return (0, _react.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t.", ", .", " {\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t\ttop: ", "px;\n\t\t\t}\n\t\t"])), _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTopWithControl, _styles.tableMarginTopWithControl);
   }
 };
 var columnHeaderButton = function columnHeaderButton(cssString) {
@@ -100,35 +100,35 @@ var columnHeaderButtonSelected = function columnHeaderButtonSelected() {
   });
 };
 var getFloatingDotOverrides = function getFloatingDotOverrides() {
-  return (0, _react.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\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  "])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _consts.tableBorderColor, _consts.lineMarkerSize, _consts.lineMarkerSize, "var(--ds-space-025, 2px)");
+  return (0, _react.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n\t\ttr\n\t\t\tth:last-child\n\t\t\t.", "::before,\n\t\t\ttr\n\t\t\ttd:last-child\n\t\t\t.", "::before {\n\t\t\tcontent: '';\n\t\t\tbackground-color: ", ";\n\t\t\tposition: absolute;\n\t\t\theight: ", "px;\n\t\t\twidth: ", "px;\n\t\t\tborder-radius: 50%;\n\t\t\tpointer-events: none;\n\t\t\ttop: ", ";\n\t\t\tright: 0px;\n\t\t}\n\t"])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _consts.tableBorderColor, _consts.lineMarkerSize, _consts.lineMarkerSize, "var(--ds-space-025, 2px)");
 };
 var floatingColumnControls = exports.floatingColumnControls = function floatingColumnControls() {
-  return (0, _react.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\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  "])), _types.TableCssClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER, _types.TableCssClassName.DRAG_COLUMN_CONTROLS, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER);
+  return (0, _react.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.", " {\n\t\t\tbox-sizing: border-box;\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\n\t\t\t.", " {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: row;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tbox-sizing: border-box;\n\n\t\t\t.", " {\n\t\t\t\tdisplay: grid;\n\t\t\t\tjustify-items: center;\n\t\t\t}\n\t\t}\n\t"])), _types.TableCssClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER, _types.TableCssClassName.DRAG_COLUMN_CONTROLS, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER);
 };
 var rowControlsWrapperDotStyle = exports.rowControlsWrapperDotStyle = function rowControlsWrapperDotStyle() {
-  return (0, _react.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\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  "])), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tableBorderColor, _consts.lineMarkerSize, _consts.lineMarkerSize, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
+  return (0, _react.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n\t\t// override for DnD controls\n\t\tdiv.", ">.", "::after {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\tdiv.", ">.", "::after {\n\t\t\tcontent: ' ';\n\t\t\tbackground-color: ", ";\n\t\t\tposition: absolute;\n\t\t\theight: ", "px;\n\t\t\twidth: ", "px;\n\t\t\tborder-radius: 50%;\n\t\t\tpointer-events: none;\n\t\t\ttop: -", "px;\n\t\t\tright: -1px;\n\t\t}\n\t"])), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tableBorderColor, _consts.lineMarkerSize, _consts.lineMarkerSize, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
 };
 var columnControlsDecoration = exports.columnControlsDecoration = function columnControlsDecoration() {
-  return (0, _react.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\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: ", ";\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.", ",table\n      tr:first-of-type\n      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\n      tr:first-of-type\n      td.", ",table\n      tr:first-of-type\n      th.", " {\n      &.", ", &.", " {\n        .", "::after {\n          ", ";\n          border-left: ", "px solid\n            ", ";\n          left: -", "px;\n        }\n      }\n    }\n\n    table\n      tr:first-of-type\n      td.", ",\n      table\n      tr:first-of-type\n      th.", " {\n      &.", " {\n        .", "::after {\n          ", ";\n        }\n\n        &.", "\n          .", "::after {\n          background-color: ", ";\n          border-color: ", ";\n          border-left: ", "px solid ", ";\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  "])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _consts.columnControlsDecorationHeight + _styles.tableCellBorderWidth, _consts.columnControlsDecorationHeight, _consts.tableBorderColor, _consts.lineMarkerSize, _consts.lineMarkerSize, "var(--ds-space-negative-025, -2px)", columnHeaderButton("\n        border-right: ".concat(_styles.tableCellBorderWidth, "px solid ").concat(_consts.tableBorderColor, ";\n        border-top: ").concat(_styles.tableCellBorderWidth, "px solid ").concat(_consts.tableBorderColor, ";\n        border-bottom: ").concat(_styles.tableCellBorderWidth, "px solid ").concat(_consts.tableBorderColor, ";\n        box-sizing: content-box;\n        height: ").concat(_consts.tableToolbarSize - 1, "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      ")), getFloatingDotOverrides(), _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_TABLE, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _consts.tableToolbarDeleteColor, _consts.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(), _styles.tableCellBorderWidth, _consts.tableBorderSelectedColor, _styles.tableCellBorderWidth, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _consts.tableToolbarDeleteColor, _consts.tableBorderDeleteColor, _styles.tableCellBorderWidth, _consts.tableBorderDeleteColor, _styles.tableCellBorderWidth, _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)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.", " {\n\t\t\tdisplay: none;\n\t\t\tcursor: pointer;\n\t\t\tposition: absolute;\n\t\t\twidth: 100%;\n\t\t\tleft: 0;\n\t\t\ttop: -", "px;\n\t\t\theight: ", "px;\n\t\t\t// floating dot for adding column button\n\t\t\t&::before {\n\t\t\t\tcontent: ' ';\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tposition: absolute;\n\t\t\t\theight: ", "px;\n\t\t\t\twidth: ", "px;\n\t\t\t\tborder-radius: 50%;\n\t\t\t\tpointer-events: none;\n\t\t\t\ttop: 2px;\n\t\t\t\tright: ", ";\n\t\t\t}\n\n\t\t\t&::after {\n\t\t\t\tcontent: ' ';\n\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t// floating dot for adding column button - overriding style on last column to avoid scroll\n\t\t", "\n\n\t\t.", " .", " {\n\t\t\tdisplay: block;\n\t\t}\n\n\t\ttable\n\t\t\ttr:first-of-type\n\t\t\ttd.", ",table\n\t\t\ttr:first-of-type\n\t\t\tth.", " {\n\t\t\t&.", ", &.", " {\n\t\t\t\t.", "::after {\n\t\t\t\t\t", ";\n\t\t\t\t}\n\n\t\t\t\t&.", " .", "::after {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\tz-index: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\ttable\n\t\t\ttr:first-of-type\n\t\t\ttd.", ",table\n\t\t\ttr:first-of-type\n\t\t\tth.", " {\n\t\t\t&.", ", &.", " {\n\t\t\t\t.", "::after {\n\t\t\t\t\t", ";\n\t\t\t\t\tborder-left: ", "px solid ", ";\n\t\t\t\t\tleft: -", "px;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\ttable\n\t\t\ttr:first-of-type\n\t\t\ttd.", ",\n\t\t\ttable\n\t\t\ttr:first-of-type\n\t\t\tth.", " {\n\t\t\t&.", " {\n\t\t\t\t.", "::after {\n\t\t\t\t\t", ";\n\t\t\t\t}\n\n\t\t\t\t&.", " .", "::after {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\tborder-left: ", "px solid ", ";\n\t\t\t\t\tleft: -", "px;\n\t\t\t\t\tz-index: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.", "\n\t\t\ttable\n\t\t\ttr:first-of-type\n\t\t\ttd.", ",\n\t\t\t.", "\n\t\t\ttable\n\t\t\ttr:first-of-type\n\t\t\tth.", " {\n\t\t\t.", "::after {\n\t\t\t\t", ";\n\t\t\t}\n\t\t}\n\t"])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _consts.columnControlsDecorationHeight + _styles.tableCellBorderWidth, _consts.columnControlsDecorationHeight, _consts.tableBorderColor, _consts.lineMarkerSize, _consts.lineMarkerSize, "var(--ds-space-negative-025, -2px)", columnHeaderButton("\n        border-right: ".concat(_styles.tableCellBorderWidth, "px solid ").concat(_consts.tableBorderColor, ";\n        border-top: ").concat(_styles.tableCellBorderWidth, "px solid ").concat(_consts.tableBorderColor, ";\n        border-bottom: ").concat(_styles.tableCellBorderWidth, "px solid ").concat(_consts.tableBorderColor, ";\n        box-sizing: content-box;\n        height: ").concat(_consts.tableToolbarSize - 1, "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      ")), getFloatingDotOverrides(), _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_TABLE, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _consts.tableToolbarDeleteColor, _consts.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(), _styles.tableCellBorderWidth, _consts.tableBorderSelectedColor, _styles.tableCellBorderWidth, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _consts.tableToolbarDeleteColor, _consts.tableBorderDeleteColor, _styles.tableCellBorderWidth, _consts.tableBorderDeleteColor, _styles.tableCellBorderWidth, _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());
 };
 var hoveredDeleteButton = exports.hoveredDeleteButton = function hoveredDeleteButton() {
-  return (0, _react.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\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"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_CELL, _consts.tableBorderDeleteColor, _types.TableCssClassName.SELECTED_CELL, _consts.tableCellDeleteColor, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _consts.tableCellDeleteColor, _consts.tableBorderDeleteColor, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _consts.tableCellDeleteColor, _consts.tableBorderDeleteColor);
+  return (0, _react.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n\t.", ".", " {\n\t\t.", ", .", ", .", " {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t.", "::after {\n\t\t\tbackground: ", ";\n\t\t}\n\n\t\t.", " > table {\n\t\t\ttd.", "::after {\n\t\t\t\tbackground: ", ";\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t}\n\t\t\tth.", " {\n\t\t\t\tbackground-color: unset;\n\t\t\t}\n\t\t\tth.", "::after {\n\t\t\t\tbackground: ", ";\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_CELL, _consts.tableBorderDeleteColor, _types.TableCssClassName.SELECTED_CELL, _consts.tableCellDeleteColor, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _consts.tableCellDeleteColor, _consts.tableBorderDeleteColor, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _consts.tableCellDeleteColor, _consts.tableBorderDeleteColor);
 };
 var hoveredCell = exports.hoveredCell = function hoveredCell() {
-  return (0, _react.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n  :not(.", ")\n    .", ":not(.", ") {\n    .", " {\n      position: relative;\n      border: 1px solid ", ";\n    }\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, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _consts.tableBorderColor);
+  return (0, _react.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n\t:not(.", ")\n\t\t.", ":not(.", ") {\n\t\t.", " {\n\t\t\tposition: relative;\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t.", ".", " {\n\t\t\tposition: relative;\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t}\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL, _consts.tableBorderSelectedColor, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _consts.tableBorderColor);
 };
-var hoveredWarningCell = exports.hoveredWarningCell = (0, _react.css)(_templateObject21 || (_templateObject21 = (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, ")"));
+var hoveredWarningCell = exports.hoveredWarningCell = (0, _react.css)(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n\t:not(.", ")\n\t\t.", ":not(.", ") {\n\t\ttd.", " {\n\t\t\tbackground-color: ", " !important; // We need to override the background-color added to the cell\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t}\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, ")"));
 
 // Explicit pixel values required here to ensure correct positioning and sizes of column resize handle
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 var resizeHandleOverrides = function resizeHandleOverrides(isDragAndDropEnabled) {
   if (isDragAndDropEnabled) {
-    return (0, _react.css)(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2.default)(["\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    "])), _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2);
+    return (0, _react.css)(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\tth.", "::before, td.", "::before {\n\t\t\t\tcontent: ' ';\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: ", ";\n\t\t\t\ttop: -1px;\n\t\t\t\twidth: ", "px;\n\t\t\t\theight: calc(100% + 2px);\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\tth.", "::before,\n\t\t\t\ttd.", "::before {\n\t\t\t\tcontent: ' ';\n\t\t\t\tposition: absolute;\n\t\t\t\tright: -1px;\n\t\t\t\ttop: -1px;\n\t\t\t\twidth: ", "px;\n\t\t\t\theight: calc(100% + 2px);\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\t\t"])), _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2);
   }
-  return (0, _react.css)(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2.default)(["\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  "])), _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _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);
+  return (0, _react.css)(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2.default)(["\n\t\ttd.", "::before {\n\t\t\tcontent: ' ';\n\t\t\tposition: absolute;\n\t\t\tleft: ", ";\n\t\t\ttop: -1px;\n\t\t\twidth: ", "px;\n\t\t\theight: calc(100% + 2px);\n\t\t\tbackground-color: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\tth.", "::before {\n\t\t\tcontent: ' ';\n\t\t\tleft: ", ";\n\t\t\tposition: absolute;\n\t\t\twidth: ", "px;\n\t\t\theight: calc(100% + ", "px);\n\t\t\tbackground-color: ", ";\n\t\t\tz-index: ", ";\n\t\t\ttop: -", "px;\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\tcontent: ' ';\n\t\t\tposition: absolute;\n\t\t\tright: -1px;\n\t\t\ttop: -1px;\n\t\t\twidth: ", "px;\n\t\t\theight: calc(100% + 2px);\n\t\t\tbackground-color: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\tth.", "::before {\n\t\t\tcontent: ' ';\n\t\t\tright: -1px;\n\t\t\tposition: absolute;\n\t\t\twidth: ", "px;\n\t\t\theight: calc(100% + ", "px);\n\t\t\tbackground-color: ", ";\n\t\t\tz-index: ", ";\n\t\t\ttop: -", "px;\n\t\t}\n\t"])), _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _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);
 };
 var resizeHandle = exports.resizeHandle = function resizeHandle(isDragAndDropEnabled) {
-  return (0, _react.css)(_templateObject24 || (_templateObject24 = (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    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\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.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex, resizeHandleOverrides(isDragAndDropEnabled), _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);
+  return (0, _react.css)(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\t.", " {\n\t\t\tbackground-color: transparent;\n\t\t\tposition: absolute;\n\t\t\twidth: ", "px;\n\t\t\theight: 100%;\n\t\t\ttop: 0;\n\t\t\tright: -", "px;\n\t\t\tcursor: col-resize;\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\ttr\n\t\t\tth:last-child\n\t\t\t.", ",\n\t\t\ttr\n\t\t\ttd:last-child\n\t\t\t.", " {\n\t\t\tbackground-color: transparent;\n\t\t\tposition: absolute;\n\t\t\twidth: ", "px;\n\t\t\theight: 100%;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\tcursor: col-resize;\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t", "\n\n\t\ttable\n      tr:first-of-type\n      th.", "\n      .", "::after,\n      table\n      tr:first-of-type\n      td.", "\n      .", "::after {\n\t\t\ttop: -", "px;\n\t\t\theight: calc(100% + ", "px);\n\t\t}\n\t}\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex, resizeHandleOverrides(isDragAndDropEnabled), _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);
 };
 
 // Drag and Drop: drop target insert line
@@ -158,5 +158,5 @@ var insertLineInactiveColor = (0, _react.css)({
 // or column drag
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 var insertLine = exports.insertLine = function insertLine() {
-  return (0, _react.css)(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    td.", "::before {\n      ", "\n      left: -1px;\n      top: -1px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      left: -1px;\n      top: -1px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      left: -1px;\n      top: -", "px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      left: -1px;\n      top: -", "px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      left: ", ";\n      top: -1px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      left: ", ";\n      top: -1px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      left: ", ";\n      top: -", "px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      left: ", ";\n      top: -", "px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      right: -1px;\n      top: -1px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      right: -1px;\n      top: -1px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      right: -1px;\n      top: -", "px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      right: -1px;\n      top: -", "px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      top: -1px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      top: -1px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      top: -1px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      top: -1px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      bottom: 0;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      bottom: 0;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      bottom: 0;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      bottom: 0;\n      ", "\n    }\n  }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, _styles.tableCellBorderWidth, insertLineActiveColor, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, _styles.tableCellBorderWidth, insertLineInactiveColor, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", insertLineActiveColor, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", insertLineInactiveColor, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", _styles.tableCellBorderWidth, insertLineActiveColor, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", _styles.tableCellBorderWidth, insertLineInactiveColor, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, _styles.tableCellBorderWidth, insertLineActiveColor, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, _styles.tableCellBorderWidth, insertLineInactiveColor, _types.TableCssClassName.WITH_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor);
+  return (0, _react.css)(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\tleft: -1px;\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\tleft: -1px;\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\tleft: -1px;\n\t\t\ttop: -", "px;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\tleft: -1px;\n\t\t\ttop: -", "px;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\tleft: ", ";\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\tleft: ", ";\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\tleft: ", ";\n\t\t\ttop: -", "px;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\tleft: ", ";\n\t\t\ttop: -", "px;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\tright: -1px;\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\tright: -1px;\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\tright: -1px;\n\t\t\ttop: -", "px;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\tright: -1px;\n\t\t\ttop: -", "px;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\tbottom: 0;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\tbottom: 0;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\tbottom: 0;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\tbottom: 0;\n\t\t\t", "\n\t\t}\n\t}\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, _styles.tableCellBorderWidth, insertLineActiveColor, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, _styles.tableCellBorderWidth, insertLineInactiveColor, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", insertLineActiveColor, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", insertLineInactiveColor, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", _styles.tableCellBorderWidth, insertLineActiveColor, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", _styles.tableCellBorderWidth, insertLineInactiveColor, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, _styles.tableCellBorderWidth, insertLineActiveColor, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, _styles.tableCellBorderWidth, insertLineInactiveColor, _types.TableCssClassName.WITH_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor);
 };

package/dist/cjs/utils/merged-cells.js

@@ -235,9 +235,9 @@ var checkEdgeHasMergedCells = exports.checkEdgeHasMergedCells = function checkEd
   var isBottomSideHaveMergedCells = false;
 
   /**
-   * this is to check if the cell position from last focused table is overflow. since if you selection from a cell in 6th row and 7th column cell in a 7x8 table to 3x3 table, the cell position will be overflow because new table dont have this cell at all.
-   TODO: ED-22335 this should better called only when hover over the drag handle.
-  */
+    * this is to check if the cell position from last focused table is overflow. since if you selection from a cell in 6th row and 7th column cell in a 7x8 table to 3x3 table, the cell position will be overflow because new table dont have this cell at all.
+    TODO: ED-22335 this should better called only when hover over the drag handle.
+   */
   var isOldMinIndex = !map[minIndex - 1] || !map[minIndex];
   var isOldMaxIndex = !map[maxIndex + 1] || !map[maxIndex];
   if (minIndex > 0 && !isOldMinIndex) {

package/dist/es2019/commands/misc.js

@@ -278,9 +278,9 @@ export const moveCursorBackward = (state, dispatch) => {
   }
 
   /*
-    ensure we're just at a top level paragraph
-    otherwise, perform regular backspace behaviour
-   */
+     ensure we're just at a top level paragraph
+     otherwise, perform regular backspace behaviour
+    */
   const grandparent = $cursor.node($cursor.depth - 1);
   if ($cursor.parent.type !== state.schema.nodes.paragraph || grandparent && grandparent.type !== state.schema.nodes.doc) {
     return false;

package/dist/es2019/nodeviews/TableContainer.js

@@ -1,8 +1,9 @@
-import React, { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { akEditorDefaultLayoutWidth, akEditorGutterPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
+import { setTableAlignmentWithTableContentWithPos } from '../commands/misc';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 import { TableCssClassName as ClassName } from '../types';
 import { TableResizer } from './TableResizer';
@@ -35,9 +36,37 @@ const leftAlignStyle = {
 };
 const AlignmentTableContainer = ({
   node,
-  children
+  children,
+  pluginInjectionApi,
+  getPos,
+  editorView
 }) => {
   const alignment = node.attrs.layout;
+  const {
+    tableState
+  } = useSharedPluginState(pluginInjectionApi, ['table']);
+  useEffect(() => {
+    if (tableState && editorView && getPos) {
+      const {
+        wasFullWidthModeEnabled,
+        isFullWidthModeEnabled
+      } = tableState;
+      if (wasFullWidthModeEnabled && !isFullWidthModeEnabled && node.attrs.width > akEditorDefaultLayoutWidth) {
+        const pos = getPos && getPos();
+        if (typeof pos !== 'number') {
+          return;
+        }
+        const tr = setTableAlignmentWithTableContentWithPos('center', {
+          pos,
+          node
+        })(editorView.state);
+        if (tr) {
+          editorView.dispatch(tr);
+        }
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editorView, tableState, node]);
   const style = useMemo(() => {
     return alignment === 'align-start' ? leftAlignStyle : centerAlignStyle;
   }, [alignment]);
@@ -53,7 +82,10 @@ const AlignmentTableContainer = ({
 const AlignmentTableContainerWrapper = ({
   isTableAlignmentEnabled,
   node,
-  children
+  children,
+  pluginInjectionApi,
+  getPos,
+  editorView
 }) => {
   if (!isTableAlignmentEnabled) {
     return /*#__PURE__*/React.createElement("div", {
@@ -67,7 +99,10 @@ const AlignmentTableContainerWrapper = ({
     }, children);
   }
   return /*#__PURE__*/React.createElement(AlignmentTableContainer, {
-    node: node
+    node: node,
+    pluginInjectionApi: pluginInjectionApi,
+    getPos: getPos,
+    editorView: editorView
   }, children);
 };
 export const ResizableTableContainer = /*#__PURE__*/React.memo(({
@@ -176,7 +211,10 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   const isLivePageViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
   return /*#__PURE__*/React.createElement(AlignmentTableContainerWrapper, {
     isTableAlignmentEnabled: isTableAlignmentEnabled,
-    node: node
+    node: node,
+    pluginInjectionApi: pluginInjectionApi,
+    getPos: getPos,
+    editorView: editorView
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       width: tableWidthRef.current,

package/dist/es2019/nodeviews/TableResizer.js

@@ -36,13 +36,13 @@ const getResizerHandleHeight = tableRef => {
   var _tableRef$clientHeigh;
   const tableHeight = (_tableRef$clientHeigh = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight) !== null && _tableRef$clientHeigh !== void 0 ? _tableRef$clientHeigh : 0;
   /*
-    - One row table height (minimum possible table height) ~ 45px
-    - Two row table height ~ 90px
-    - Three row table height ~ 134px
-     In the if below we need to use:
-    - > 46 because the height of the table can be a float number like 45.44.
-    - < 96 is the height of large resize handle.
-  */
+     - One row table height (minimum possible table height) ~ 45px
+     - Two row table height ~ 90px
+     - Three row table height ~ 134px
+      In the if below we need to use:
+     - > 46 because the height of the table can be a float number like 45.44.
+     - < 96 is the height of large resize handle.
+   */
   if (tableHeight >= 96) {
     return 'large';
   }

package/dist/es2019/nodeviews/TableRow.js

@@ -294,27 +294,27 @@ export default class TableRow extends TableNodeView {
   isHeaderSticky() {
     var _sentinelTop$rootBoun;
     /*
-    # Overview
-      I'm going to list all the view states associated with the sentinels and when they should trigger sticky headers.
-      The format of the states are;    {top|bottom}:{in|above|below}
-      ie sentinel:view-position -- both "above" and "below" are equal to out of the viewport
-       For example; "top:in" means top sentinel is within the viewport. "bottom:above" means the bottom sentinel is
-      above and out of the viewport
-       This will hopefully simplify things and make it easier to determine when sticky should/shouldn't be triggered.
-     # States
-      top:in / bottom:in - NOT sticky
-      top:in / bottom:above - NOT sticky - NOTE: This is an inversion clause
-      top:in / bottom:below - NOT sticky
-      top:above / bottom:in - STICKY
-      top:above / bottom:above - NOT sticky
-      top:above / bottom:below - STICKY
-      top:below / bottom:in - NOT sticky - NOTE: This is an inversion clause
-      top:below / bottom:above - NOT sticky - NOTE: This is an inversion clause
-      top:below / bottom:below - NOT sticky
-     # Summary
-      The only time the header should be sticky is when the top sentinel is above the view and the bottom sentinel
-      is in or below it.
-    */
+      # Overview
+        I'm going to list all the view states associated with the sentinels and when they should trigger sticky headers.
+        The format of the states are;    {top|bottom}:{in|above|below}
+        ie sentinel:view-position -- both "above" and "below" are equal to out of the viewport
+         For example; "top:in" means top sentinel is within the viewport. "bottom:above" means the bottom sentinel is
+        above and out of the viewport
+         This will hopefully simplify things and make it easier to determine when sticky should/shouldn't be triggered.
+       # States
+        top:in / bottom:in - NOT sticky
+        top:in / bottom:above - NOT sticky - NOTE: This is an inversion clause
+        top:in / bottom:below - NOT sticky
+        top:above / bottom:in - STICKY
+        top:above / bottom:above - NOT sticky
+        top:above / bottom:below - STICKY
+        top:below / bottom:in - NOT sticky - NOTE: This is an inversion clause
+        top:below / bottom:above - NOT sticky - NOTE: This is an inversion clause
+        top:below / bottom:below - NOT sticky
+       # Summary
+        The only time the header should be sticky is when the top sentinel is above the view and the bottom sentinel
+        is in or below it.
+      */
 
     const {
       top: sentinelTop,

package/dist/es2019/pm-plugins/table-resizing/plugin.js

@@ -43,9 +43,9 @@ export function createPlugin(dispatch, {
           let isColumnKeyboardResizeStarted = false;
           if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
             /*
-              We need to start listening mouse events if column resize started from keyboard.
-              This will allow continue resizing via mouse
-            */
+                    We need to start listening mouse events if column resize started from keyboard.
+                    This will allow continue resizing via mouse
+                  */
             const {
               isKeyboardResize
             } = getTablePluginState(state);

package/dist/es2019/pm-plugins/table-resizing/utils/resize-state.js

@@ -76,10 +76,10 @@ export const updateColgroup = (state, tableRef, tableNode, isTableScalingEnabled
   const cols = tableRef === null || tableRef === void 0 ? void 0 : tableRef.querySelectorAll('col');
   const columnsCount = cols === null || cols === void 0 ? void 0 : cols.length;
   /**
-     updateColgroup will update whole table scale when click the column resize handle, this behavior will affect when table overflowed, when now resize handle been dragged and extend to make table overflowed, table will show overflow. This need to be confirmed because it conflict with how isTableScalingEnabled work.
-     We don't want to scale the table when resizing columns, only when viewpoint shrinks the table.
-     We need to remove !isColumnResizing if we handled auto scale table when mouseUp event.
-     * */
+      updateColgroup will update whole table scale when click the column resize handle, this behavior will affect when table overflowed, when now resize handle been dragged and extend to make table overflowed, table will show overflow. This need to be confirmed because it conflict with how isTableScalingEnabled work.
+      We don't want to scale the table when resizing columns, only when viewpoint shrinks the table.
+      We need to remove !isColumnResizing if we handled auto scale table when mouseUp event.
+      * */
   if (isTableScalingEnabled && tableNode) {
     const scalePercent = getTableScalingPercent(tableNode, tableRef);
     state.cols.filter(column => column && !!column.width) // if width is 0, we dont want to apply that.

package/dist/es2019/pm-plugins/table-resizing/utils/scale-table.js

@@ -162,9 +162,9 @@ export const scaleTable = (tableRef, options, domAtPos, isTableScalingEnabledOnC
       // We need to do this check to reduce the number of race conditions when working with tables.
       // This metadata is been used in the sendTransaction function in the Collab plugin
       /* Added !layoutChanged check here to solve unnecessary scroll bar after publish when click on breakout button multiple times and publish
-         scaleTable is only called once every time a breakout button is clicked, so it is safe not to add the meta 'scaleTable' to the tr.
-         Leaving the tr.setMeta('scaleTable', true) here for race conditions that we aren't aware of.
-       */
+             scaleTable is only called once every time a breakout button is clicked, so it is safe not to add the meta 'scaleTable' to the tr.
+             Leaving the tr.setMeta('scaleTable', true) here for race conditions that we aren't aware of.
+           */
       !layoutChanged && tr.setMeta('scaleTable', true);
       return tr;
     }