@atlaskit/editor-plugin-table 5.3.14 → 5.3.16

package/dist/esm/plugins/table/ui/TableFloatingColumnControls/ColumnDropTargets/index.js

@@ -16,10 +16,10 @@ export var ColumnDropTargets = function ColumnDropTargets(_ref) {
   var hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
   var marginTop = hasHeaderRow && stickyTop !== undefined ? (_rowHeights$ = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights[0]) !== null && _rowHeights$ !== void 0 ? _rowHeights$ : 0 : 0;
   return /*#__PURE__*/React.createElement("div", {
-    className: ClassName.COLUMN_DROP_TARGET_CONTROLS,
+    className: ClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS,
     contentEditable: false
   }, /*#__PURE__*/React.createElement("div", {
-    className: ClassName.COLUMN_CONTROLS_INNER,
+    className: ClassName.DRAG_COLUMN_CONTROLS_INNER,
     "data-testid": "table-floating-column-controls-drop-targets"
   }, colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(function (width, index) {
     return /*#__PURE__*/React.createElement(ColumnDropTarget, {

package/dist/esm/plugins/table/ui/TableFloatingColumnControls/index.js

@@ -100,7 +100,7 @@ export var TableFloatingColumnControls = function TableFloatingColumnControls(_r
     return null;
   }
   return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement("div", {
-    className: ClassName.COLUMN_CONTROLS_WRAPPER,
+    className: ClassName.DRAG_COLUMN_CONTROLS_WRAPPER,
     "data-testid": "table-floating-column-controls-wrapper"
   }, /*#__PURE__*/React.createElement(ColumnControls, {
     editorView: editorView,

package/dist/esm/plugins/table/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js

@@ -0,0 +1,104 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+import React, { Component } from 'react';
+import classnames from 'classnames';
+import { injectIntl } from 'react-intl-next';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
+import { clearHoverSelection, hoverTable } from '../../../commands';
+import { TableCssClassName as ClassName } from '../../../types';
+import messages from '../../messages';
+var CornerControlComponent = /*#__PURE__*/function (_Component) {
+  _inherits(CornerControlComponent, _Component);
+  var _super = _createSuper(CornerControlComponent);
+  function CornerControlComponent() {
+    var _this;
+    _classCallCheck(this, CornerControlComponent);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "isActive", function () {
+      var _this$props = _this.props,
+        editorView = _this$props.editorView,
+        hoveredRows = _this$props.hoveredRows,
+        isResizing = _this$props.isResizing;
+      var selection = editorView.state.selection;
+      var table = findTable(selection);
+      if (!table) {
+        return false;
+      }
+      return isTableSelected(selection) || hoveredRows && hoveredRows.length === TableMap.get(table.node).height && !isResizing;
+    });
+    _defineProperty(_assertThisInitialized(_this), "clearHoverSelection", function () {
+      var _this$props$editorVie = _this.props.editorView,
+        state = _this$props$editorVie.state,
+        dispatch = _this$props$editorVie.dispatch;
+      clearHoverSelection()(state, dispatch);
+    });
+    _defineProperty(_assertThisInitialized(_this), "selectTable", function () {
+      var _this$props$editorVie2 = _this.props.editorView,
+        state = _this$props$editorVie2.state,
+        dispatch = _this$props$editorVie2.dispatch;
+      dispatch(selectTable(state.tr).setMeta('addToHistory', false));
+    });
+    _defineProperty(_assertThisInitialized(_this), "hoverTable", function () {
+      var _this$props$editorVie3 = _this.props.editorView,
+        state = _this$props$editorVie3.state,
+        dispatch = _this$props$editorVie3.dispatch;
+      hoverTable()(state, dispatch);
+    });
+    return _this;
+  }
+  _createClass(CornerControlComponent, [{
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        isInDanger = _this$props2.isInDanger,
+        tableRef = _this$props2.tableRef,
+        isHeaderColumnEnabled = _this$props2.isHeaderColumnEnabled,
+        isHeaderRowEnabled = _this$props2.isHeaderRowEnabled,
+        formatMessage = _this$props2.intl.formatMessage;
+      if (!tableRef) {
+        return null;
+      }
+      var isActive = this.isActive();
+      return /*#__PURE__*/React.createElement("div", {
+        className: classnames(ClassName.CORNER_CONTROLS, {
+          active: isActive,
+          sticky: this.props.stickyTop !== undefined
+        }),
+        style: {
+          top: this.props.stickyTop !== undefined ? "".concat(this.props.stickyTop, "px") : undefined
+        },
+        contentEditable: false
+      }, /*#__PURE__*/React.createElement("button", {
+        "aria-label": formatMessage(messages.cornerControl),
+        type: "button",
+        className: classnames(ClassName.CONTROLS_CORNER_BUTTON, {
+          danger: isActive && isInDanger
+        }),
+        onClick: this.selectTable,
+        onMouseOver: this.hoverTable,
+        onMouseOut: this.clearHoverSelection
+      }), !isHeaderRowEnabled && /*#__PURE__*/React.createElement("div", {
+        className: ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER
+      }, /*#__PURE__*/React.createElement("div", {
+        className: ClassName.CONTROLS_INSERT_MARKER
+      })), !isHeaderColumnEnabled && /*#__PURE__*/React.createElement("div", {
+        className: ClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER
+      }, /*#__PURE__*/React.createElement("div", {
+        className: ClassName.CONTROLS_INSERT_MARKER
+      })));
+    }
+  }]);
+  return CornerControlComponent;
+}(Component);
+export var CornerControls = injectIntl(CornerControlComponent);

package/dist/esm/plugins/table/ui/TableFloatingControls/CornerControls/DragCornerControls.js

@@ -0,0 +1,50 @@
+import React, { useMemo } from 'react';
+import classnames from 'classnames';
+import { injectIntl } from 'react-intl-next';
+import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
+import { clearHoverSelection, hoverTable } from '../../../commands';
+import { TableCssClassName as ClassName } from '../../../types';
+import messages from '../../messages';
+var DragCornerControlsComponent = function DragCornerControlsComponent(_ref) {
+  var editorView = _ref.editorView,
+    isInDanger = _ref.isInDanger,
+    formatMessage = _ref.intl.formatMessage;
+  var handleOnClick = function handleOnClick() {
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    dispatch(selectTable(state.tr).setMeta('addToHistory', false));
+  };
+  var handleMouseOver = function handleMouseOver() {
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    hoverTable()(state, dispatch);
+  };
+  var handleMouseOut = function handleMouseOut() {
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    clearHoverSelection()(state, dispatch);
+  };
+  var isActive = useMemo(function () {
+    var selection = editorView.state.selection;
+    var table = findTable(selection);
+    if (!table) {
+      return false;
+    }
+    return isTableSelected(selection);
+  }, [editorView.state]);
+  return /*#__PURE__*/React.createElement("button", {
+    className: classnames(ClassName.DRAG_CORNER_BUTTON, {
+      active: isActive,
+      danger: isActive && isInDanger
+    }),
+    "aria-label": formatMessage(messages.cornerControl),
+    type: "button",
+    onClick: handleOnClick,
+    onMouseOver: handleMouseOver,
+    onMouseOut: handleMouseOut,
+    contentEditable: false
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ClassName.DRAG_CORNER_BUTTON_INNER
+  }));
+};
+export var DragCornerControls = injectIntl(DragCornerControlsComponent);

package/dist/esm/plugins/table/ui/TableFloatingControls/CornerControls/index.js

@@ -1,110 +1,2 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-import React, { Component } from 'react';
-import classnames from 'classnames';
-import { defineMessages, injectIntl } from 'react-intl-next';
-import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
-import { clearHoverSelection, hoverTable } from '../../../commands';
-import { TableCssClassName as ClassName } from '../../../types';
-var messages = defineMessages({
-  cornerControl: {
-    id: 'fabric.editor.cornerControl',
-    defaultMessage: 'Highlight table',
-    description: 'A button on the upper left corner of the table that shows up when the table is in focus. Clicking on it will select the entire table.'
-  }
-});
-var CornerControlComponent = /*#__PURE__*/function (_Component) {
-  _inherits(CornerControlComponent, _Component);
-  var _super = _createSuper(CornerControlComponent);
-  function CornerControlComponent() {
-    var _this;
-    _classCallCheck(this, CornerControlComponent);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "isActive", function () {
-      var _this$props = _this.props,
-        editorView = _this$props.editorView,
-        hoveredRows = _this$props.hoveredRows,
-        isResizing = _this$props.isResizing;
-      var selection = editorView.state.selection;
-      var table = findTable(selection);
-      if (!table) {
-        return false;
-      }
-      return isTableSelected(selection) || hoveredRows && hoveredRows.length === TableMap.get(table.node).height && !isResizing;
-    });
-    _defineProperty(_assertThisInitialized(_this), "clearHoverSelection", function () {
-      var _this$props$editorVie = _this.props.editorView,
-        state = _this$props$editorVie.state,
-        dispatch = _this$props$editorVie.dispatch;
-      clearHoverSelection()(state, dispatch);
-    });
-    _defineProperty(_assertThisInitialized(_this), "selectTable", function () {
-      var _this$props$editorVie2 = _this.props.editorView,
-        state = _this$props$editorVie2.state,
-        dispatch = _this$props$editorVie2.dispatch;
-      dispatch(selectTable(state.tr).setMeta('addToHistory', false));
-    });
-    _defineProperty(_assertThisInitialized(_this), "hoverTable", function () {
-      var _this$props$editorVie3 = _this.props.editorView,
-        state = _this$props$editorVie3.state,
-        dispatch = _this$props$editorVie3.dispatch;
-      hoverTable()(state, dispatch);
-    });
-    return _this;
-  }
-  _createClass(CornerControlComponent, [{
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-        isInDanger = _this$props2.isInDanger,
-        tableRef = _this$props2.tableRef,
-        isHeaderColumnEnabled = _this$props2.isHeaderColumnEnabled,
-        isHeaderRowEnabled = _this$props2.isHeaderRowEnabled,
-        formatMessage = _this$props2.intl.formatMessage;
-      if (!tableRef) {
-        return null;
-      }
-      var isActive = this.isActive();
-      return /*#__PURE__*/React.createElement("div", {
-        className: classnames(ClassName.CORNER_CONTROLS, {
-          active: isActive,
-          sticky: this.props.stickyTop !== undefined
-        }),
-        style: {
-          top: this.props.stickyTop !== undefined ? "".concat(this.props.stickyTop, "px") : undefined
-        },
-        contentEditable: false
-      }, /*#__PURE__*/React.createElement("button", {
-        "aria-label": formatMessage(messages.cornerControl),
-        type: "button",
-        className: classnames(ClassName.CONTROLS_CORNER_BUTTON, {
-          danger: isActive && isInDanger
-        }),
-        onClick: this.selectTable,
-        onMouseOver: this.hoverTable,
-        onMouseOut: this.clearHoverSelection
-      }), !isHeaderRowEnabled && /*#__PURE__*/React.createElement("div", {
-        className: ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER
-      }, /*#__PURE__*/React.createElement("div", {
-        className: ClassName.CONTROLS_INSERT_MARKER
-      })), !isHeaderColumnEnabled && /*#__PURE__*/React.createElement("div", {
-        className: ClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER
-      }, /*#__PURE__*/React.createElement("div", {
-        className: ClassName.CONTROLS_INSERT_MARKER
-      })));
-    }
-  }]);
-  return CornerControlComponent;
-}(Component);
-export var CornerControls = injectIntl(CornerControlComponent);
+export { CornerControls } from './ClassicCornerControls';
+export { DragCornerControls } from './DragCornerControls';

package/dist/esm/plugins/table/ui/TableFloatingControls/CornerControls/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js

@@ -89,13 +89,7 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
       className: ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER,
       contentEditable: false,
       key: index
-    }, !hasHeaderRow && index === 0 && /*#__PURE__*/React.createElement("div", {
-      style: {
-        top: '0px',
-        left: "var(--ds-space-075, 6px)"
-      },
-      className: ClassName.DRAG_ROW_FLOATING_INSERT_DOT
-    }), /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       className: ClassName.DRAG_ROW_FLOATING_INSERT_DOT
     }));
   }), !isResizing && Number.isFinite(rowIndex) && /*#__PURE__*/React.createElement("div", {

package/dist/esm/plugins/table/ui/TableFloatingControls/index.js

@@ -15,7 +15,7 @@ import { browser } from '@atlaskit/editor-common/utils';
 import { hoverCell, hoverRows, selectRow } from '../../commands';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { isSelectionUpdated } from '../../utils';
-import { CornerControls } from './CornerControls';
+import { CornerControls, DragCornerControls } from './CornerControls';
 import NumberColumn from './NumberColumn';
 import { DragControls, RowControls } from './RowControls';
 var TableFloatingControls = /*#__PURE__*/function (_Component) {
@@ -167,7 +167,12 @@ var TableFloatingControls = /*#__PURE__*/function (_Component) {
         updateCellHoverLocation: this.updateCellHoverLocation,
         stickyTop: stickyTop,
         isDragAndDropEnabled: isDragAndDropEnabled
-      }) : null, tableActive && /*#__PURE__*/React.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(DragControls, {
+      }) : null, tableActive && /*#__PURE__*/React.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DragCornerControls, {
+        editorView: editorView,
+        tableRef: tableRef,
+        isInDanger: isInDanger,
+        isResizing: isResizing
+      }), /*#__PURE__*/React.createElement(DragControls, {
         tableRef: tableRef,
         tableNode: tableNode,
         hoveredCell: hoveredCell,
@@ -179,7 +184,7 @@ var TableFloatingControls = /*#__PURE__*/function (_Component) {
         hoverRows: this.hoverRows,
         selectRow: this.selectRow,
         updateCellHoverLocation: this.updateCellHoverLocation
-      }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
+      })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
         editorView: editorView,
         tableRef: tableRef,
         isInDanger: isInDanger,

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

@@ -9,7 +9,7 @@ import { B300, N0, N20A, N300, N40A, R500 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';
 import { TableCssClassName as ClassName } from '../types';
 import { columnControlsDecorationHeight, resizeHandlerAreaWidth, resizeLineWidth, rowControlsZIndex, stickyHeaderBorderBottomWidth, stickyRowOffsetTop, tableBorderColor, tableBorderDeleteColor, tableBorderRadiusSize, tableBorderSelectedColor, tableCellBackgroundColor, tableCellDeleteColor, tableCellSelectedColor, tableControlsSpacing, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tablePadding, tableScrollbarOffset, tableTextColor, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
-import { columnControlsDecoration, columnControlsLineMarker, DeleteButton, dragInsertButtonWrapper, floatingColumnControls, HeaderButton, HeaderButtonDanger, HeaderButtonHover, hoveredCell, hoveredDeleteButton, hoveredWarningCell, insertColumnButtonWrapper, insertLine, InsertMarker, insertRowButtonWrapper, OverflowShadow, resizeHandle, rowControlsWrapperDotStyle } from './ui-styles';
+import { columnControlsDecoration, columnControlsLineMarker, DeleteButton, dragCornerControlButton, dragInsertButtonWrapper, floatingColumnControls, HeaderButton, HeaderButtonDanger, HeaderButtonHover, hoveredCell, hoveredDeleteButton, hoveredWarningCell, insertColumnButtonWrapper, insertLine, InsertMarker, insertRowButtonWrapper, OverflowShadow, resizeHandle, rowControlsWrapperDotStyle } from './ui-styles';
 var cornerControlHeight = tableToolbarSize + 1;
 
 /*
@@ -61,7 +61,7 @@ var tableWrapperStyles = function tableWrapperStyles() {
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
 export var tableStyles = function tableStyles(props) {
   var _props$featureFlags;
-  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  .", " button {\n    background: ", ";\n    color: ", ";\n    cursor: none;\n  }\n\n  .", ":not(.", ") button:hover {\n    background: ", ";\n    color: ", " !important;\n    cursor: pointer;\n  }\n\n  .ProseMirror {\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n\n    .", " {\n      margin-bottom: 0;\n    }\n\n    .", " {\n      td.", ", th.", " {\n        position: relative;\n        overflow: visible;\n      }\n\n      td.", " {\n        background-color: ", ";\n\n        // ED-15246: Trello card is visible through a border of a table border\n        // This fixes a border issue caused by relative positioned table cells\n        &::after {\n          height: 100%;\n          content: '';\n          border-left: 1px solid ", ";\n          border-bottom: 1px solid ", ";\n          position: absolute;\n          right: 0px;\n          top: 0px;\n          bottom: 0;\n          width: 100%;\n          display: inline-block;\n          pointer-events: none;\n        }\n      }\n    }\n\n    .", " {\n      ", "\n    }\n\n    .", " {\n      ", "\n    }\n\n    ", "\n\n    /* Delete button */\n    ", "\n    /* Ends Delete button */\n\n    /* sticky styles */\n    .", " .", " .", ":first-of-type {\n      margin-top: ", "px;\n      width: ", "px;\n\n      position: fixed !important;\n      z-index: ", " !important;\n      box-shadow: 0px -", "px ", ";\n      border-right: 0 none;\n      /* top set by NumberColumn component */\n    }\n\n    .", " .", ".sticky {\n      position: fixed !important;\n      /* needs to be above row controls */\n      z-index: ", " !important;\n      background: ", ";\n\n      width: ", "px;\n      height: ", "px;\n    }\n\n    .", ".sticky .", " {\n      border-bottom: 0px none;\n      border-right: 0px none;\n\n      height: ", "px;\n      width: ", "px;\n    }\n\n    ", "\n\n    .", "\n      .", "\n      .", ".sticky {\n      position: fixed !important;\n      z-index: ", " !important;\n      display: flex;\n      border-left: ", "px solid\n        ", ";\n      margin-left: -", "px;\n    }\n\n    .", " col:first-of-type {\n      /* moving rows out of a table layout does weird things in Chrome */\n      border-right: 1px solid ", ";\n    }\n\n    tr.sticky {\n      padding-top: ", "px;\n      position: fixed;\n      display: grid;\n\n      /* to keep it above cell selection but below date and other nodes popups that are inside sticky header */\n      z-index: ", ";\n\n      overflow-y: visible;\n      overflow-x: hidden;\n\n      grid-auto-flow: column;\n\n      /* background for where controls apply */\n      background: ", ";\n      box-sizing: content-box;\n\n      margin-top: 2px;\n\n      box-shadow: 0 6px 4px -4px ", ";\n      margin-left: -1px;\n\n      &.no-pointer-events {\n        pointer-events: none;\n      }\n    }\n\n    .", " .", " {\n      left: unset;\n      position: fixed;\n      /* needs to be above sticky header row and below date and other nodes popups that are inside sticky header */\n      z-index: ", ";\n    }\n\n    .", ".", "\n      .", " {\n      padding-bottom: ", "px;\n    }\n\n    tr.sticky th {\n      border-bottom: ", "px solid\n        ", ";\n      margin-right: -1px;\n    }\n\n    .", " tr.sticky > th:last-child {\n      border-right-width: 1px;\n    }\n\n    /* add left edge for first cell */\n    .", " tr.sticky > th:first-of-type {\n      margin-left: 0px;\n    }\n\n    /* add a little bit so the scroll lines up with the table */\n    .", " tr.sticky::after {\n      content: ' ';\n      width: ", "px;\n    }\n\n    /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n    .", " .sticky + tr {\n      min-height: 0px;\n    }\n\n    /* move resize line a little in sticky bar */\n    .", ".", " {\n      tr.sticky\n        td.", ",\n        tr.sticky\n        th.", " {\n        .", "::after {\n          right: ", "px;\n        }\n      }\n\n      /* when selected put it back to normal -- :not selector would be nicer */\n      tr.sticky\n        td.", ".", ",\n        tr.sticky\n        th.", ".", " {\n        .", "::after {\n          right: ", "px;\n        }\n      }\n    }\n\n    tr.sticky\n      .", ",\n      tr.sticky\n      .", " {\n      z-index: 1;\n    }\n\n    .", " tr.sticky {\n      padding-top: ", "px;\n    }\n\n    .", ".", "\n      .", "\n      .", ":first-of-type {\n      margin-top: ", "px;\n    }\n\n    .", ".sticky {\n      border-top: ", "px solid\n        ", ";\n    }\n\n    ", "\n    ", "\n    ", "\n\n    .", " .", " {\n      height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n    }\n\n    .less-padding {\n      padding: 0 ", "px;\n\n      .", " {\n        padding: 0 ", "px;\n\n        // https://product-fabric.atlassian.net/browse/ED-16386\n        // Fixes issue where the extra padding that is added here throws off the position\n        // of the rows control dot\n        &::after {\n          right: 6px !important;\n        }\n      }\n\n      .", " {\n        padding: 0 ", "px;\n      }\n\n      &.", "[data-number-column='true'] {\n        padding-left: ", "px;\n      }\n      .", ", .", " {\n        width: ", "px;\n      }\n\n      .", " {\n        left: 6px;\n      }\n\n      .", " {\n        left: calc(100% - 6px);\n      }\n    }\n\n    > .", " {\n      /**\n       * Prevent margins collapsing, aids with placing the gap-cursor correctly\n       * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n       *\n       * TODO: Enable this, many tests will fail!\n       * border-top: 1px solid transparent;\n       */\n    }\n\n    /* Breakout only works on top level unless wrapped in fragment mark */\n    ", "\n\n    ", ";\n    ", ";\n\n    /* Corner controls */\n    .", " {\n      width: ", "px;\n      height: ", "px;\n      display: none;\n\n      .", " {\n        position: relative;\n\n        ", ";\n      }\n    }\n\n    .", ".sticky {\n      .", " {\n        /* sticky row insert dot overlaps other row insert and messes things up */\n        display: none !important;\n      }\n    }\n\n    .", " {\n      position: absolute;\n      top: 0;\n      width: ", "px;\n      height: ", "px;\n      border: 1px solid ", ";\n      border-radius: 0;\n      border-top-left-radius: ", "px;\n      background: ", ";\n      box-sizing: border-box;\n      padding: 0;\n      :focus {\n        outline: none;\n      }\n    }\n    .active .", " {\n      border-color: ", ";\n      background: ", ";\n    }\n\n    .", "[data-number-column='true'] {\n      .", ", .", " {\n        width: ", "px;\n      }\n      .", " .", " {\n        border-right-width: 0;\n      }\n    }\n\n    :not(.", ") .", ":hover {\n      border-color: ", ";\n      background: ", ";\n      cursor: pointer;\n    }\n\n    :not(.", ")\n      .", ".", " {\n      border-color: ", ";\n      background: ", ";\n    }\n\n    /* Row controls */\n    .", " {\n      width: ", "px;\n      box-sizing: border-box;\n      display: none;\n      position: relative;\n\n      ", ";\n\n      .", " {\n        display: flex;\n        flex-direction: column;\n      }\n      .", ":last-child > button {\n        border-bottom-left-radius: ", "px;\n      }\n      .", " {\n        position: relative;\n        margin-top: -1px;\n      }\n      .", ":hover,\n        .", ".active,\n        .", ":hover {\n        z-index: ", ";\n      }\n\n      ", "\n    }\n\n    .", " {\n      display: grid;\n      align-items: center;\n      position: absolute;\n      left: -4px;\n      z-index: ", ";\n\n      .", " {\n        align-self: end;\n        position: absolute;\n        height: 100%;\n        width: 24px;\n      }\n\n      .", " {\n        position: absolute;\n        bottom: -3px;\n        left: 6px;\n        background-color: ", ";\n        height: 4px;\n        width: 4px;\n        border-radius: 50%;\n      }\n    }\n\n    .", " {\n      .", " {\n        height: 24px;\n        position: absolute;\n        top: ", ";\n        z-index: ", ";\n      }\n\n      .", " {\n        position: absolute;\n        height: 24px;\n        width: 100%;\n      }\n\n      .", " {\n        background-color: ", ";\n        height: 4px;\n        width: 4px;\n        border-radius: 50%;\n        position: absolute;\n        right: -2px;\n      }\n    }\n\n    .", "\n      .", " {\n      bottom: -1px;\n    }\n\n    .", " {\n      cursor: grab;\n      padding: 0;\n\n      border-radius: 6px;\n      width: max-content;\n      height: max-content;\n      border: 2px solid ", ";\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      outline: none !important;\n\n      svg {\n        rect {\n          fill: ", ";\n        }\n        g {\n          fill: ", ";\n        }\n      }\n\n      &:hover {\n        svg {\n          rect {\n            fill: ", ";\n          }\n          g {\n            fill: ", ";\n          }\n        }\n      }\n\n      &.selected {\n        svg {\n          rect {\n            fill: ", ";\n          }\n          g {\n            fill: ", ";\n          }\n        }\n      }\n\n      &.danger {\n        svg {\n          rect {\n            fill: ", ";\n          }\n          g {\n            fill: ", ";\n          }\n        }\n      }\n\n      &.disabled {\n        svg {\n          rect {\n            fill: ", ";\n          }\n          g {\n            fill: ", ";\n          }\n        }\n      }\n    }\n\n    ", "\n\n    :not(.", ") .", " {\n      ", "\n      ", "\n    }\n\n    /* Numbered column */\n    .", " {\n      position: relative;\n      float: right;\n      margin-left: ", "px;\n      top: ", "px;\n      width: ", "px;\n      box-sizing: border-box;\n    }\n\n    .", " {\n      border: 1px solid ", ";\n      box-sizing: border-box;\n      margin-top: -1px;\n      padding-bottom: 2px;\n      padding: 10px 2px;\n      text-align: center;\n      font-size: ", ";\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n\n      :first-child:not(style),\n      style:first-child + * {\n        margin-top: 0;\n      }\n      :last-child {\n        border-bottom: 1px solid ", ";\n      }\n    }\n\n    // add a background above the first numbered column cell when sticky header is engaged\n    // which hides the table when scrolling\n    .", ":first-of-type::after {\n      content: '';\n      display: block;\n      height: 33px;\n      width: 100%;\n      background-color: ", ";\n      position: absolute;\n\n      // the extra pixel is accounting for borders\n      top: -34px;\n      left: -1px;\n    }\n\n    .", " {\n      .", ", .", " {\n        display: block;\n      }\n      .", " {\n        padding-left: ", "px;\n\n        .", " {\n          border-left: 0 none;\n        }\n\n        .", ".active {\n          border-bottom: 1px solid ", ";\n          border-color: ", ";\n          background-color: ", ";\n          position: relative;\n          z-index: ", ";\n          color: ", ";\n        }\n      }\n    }\n    :not(.", ") .", " {\n      .", ":not(.", ") {\n        cursor: pointer;\n      }\n      .", ":not(.", "):hover {\n        border-bottom: 1px solid ", ";\n        border-color: ", ";\n        background-color: ", ";\n        position: relative;\n        z-index: ", ";\n        color: ", ";\n      }\n      .", ".", " {\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-left: 0;\n        color: ", ";\n        position: relative;\n        z-index: ", ";\n      }\n    }\n\n    /* Table */\n    .", " > table {\n      table-layout: fixed;\n      white-space: normal;\n      border-top: none;\n      // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n      margin-right: -1px;\n      // Allows better positioning for the shadow sentinels - ED-16668\n      position: relative;\n\n      > tbody > tr {\n        white-space: pre-wrap;\n      }\n\n      .", " + * {\n        margin-top: 0;\n      }\n\n      /*\n       * Headings have a top margin by default, but we don't want this on the\n       * first heading within table header cells.\n       *\n       * This specifically sets margin-top for the first heading within a header\n       * cell when center/right aligned.\n       */\n      th.", " > .fabric-editor-block-mark {\n        > h1:first-of-type,\n        > h2:first-of-type,\n        > h3:first-of-type,\n        > h4:first-of-type,\n        > h5:first-of-type,\n        > h6:first-of-type {\n          margin-top: 0;\n        }\n      }\n\n      .", ", .", " {\n        position: relative;\n      }\n      /* Give selected cells a blue overlay */\n      .", "::after,\n        .", "::after {\n        z-index: ", ";\n        position: absolute;\n        content: '';\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        pointer-events: none;\n      }\n      .", " {\n        border: 1px solid ", ";\n      }\n      .", "::after {\n        background: ", ";\n        z-index: ", ";\n      }\n      th.", "::after,\n        td.", "::after {\n        background: ", ";\n        z-index: ", ";\n      }\n      // ED-15246: Trello card is visible through a border of a table border\n      /* ED-19064: To fix when enable header column in the table,\n       and selection the header column, the right border is not tableBorderSelectedColor\n       when deleting the header column, the right border is not tableToolbarDeleteColor */\n      td.", ",\n        td.", ",\n        th.", ".", ",\n        th.", ".", " {\n        &::after {\n          height: 100%;\n          width: 100%;\n          border: 1px solid ", ";\n          content: '';\n          position: absolute;\n          left: -1px;\n          top: -1px;\n          bottom: 0;\n          z-index: ", ";\n          display: inline-block;\n          pointer-events: none;\n        }\n        &.", "::after {\n          ", ";\n          z-index: ", ";\n        }\n      }\n    }\n    ", "\n    .", ".", " {\n      z-index: ", ";\n    }\n\n    .", " {\n      position: absolute;\n      top: ", "px;\n    }\n\n    ", "\n  }\n\n  .ProseMirror.", " {\n    .", " {\n      overflow-x: auto;\n      ", ";\n    }\n  }\n\n  .ProseMirror.", " {\n    cursor: col-resize;\n  }\n\n  /*\n  ED-15882: When custom start numbers is enabled for lists, we have\n  styles that handle this generally (in editor-common) so we can\n  throw away the older table-specific styles here.\n  */\n  ", "\n\n  ", "\n"])), ClassName.LAYOUT_BUTTON, "var(--ds-background-neutral, ".concat(N20A, ")"), "var(--ds-icon, ".concat(N300, ")"), ClassName.LAYOUT_BUTTON, ClassName.IS_RESIZING, "var(--ds-background-neutral-hovered, ".concat(B300, ")"), "var(--ds-icon, white)", tableSharedStyle(props), columnControlsLineMarker(), hoveredDeleteButton(props), hoveredCell(props), hoveredWarningCell, getBooleanFF('platform.editor.table.drag-and-drop') && insertLine(props), resizeHandle(props), rangeSelectionStyles, ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper(props), ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper(props), dragInsertButtonWrapper(props), DeleteButton(props), ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop + 2, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, "var(--ds-surface, white)", ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, "var(--ds-surface, white)", tableToolbarSize, tableToolbarSize, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize, tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(props), ClassName.TABLE_STICKY, ClassName.ROW_CONTROLS, ClassName.ROW_CONTROLS_BUTTON_WRAP, akEditorStickyHeaderZIndex, tableToolbarSize, "var(--ds-surface, white)", tableToolbarSize, ClassName.TABLE_STICKY, "var(--ds-surface, green)", stickyRowOffsetTop, akEditorTableCellOnStickyHeaderZIndex - 5, "var(--ds-surface, white)", "var(--ds-shadow-overflow-perimeter, ".concat(N40A, ")"), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, akEditorTableCellOnStickyHeaderZIndex, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tableToolbarSize, stickyHeaderBorderBottomWidth, tableBorderColor(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, insertColumnButtonOffset + 1, ClassName.TABLE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.WITH_CONTROLS, tableControlsSpacing, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableControlsSpacing + 2, ClassName.CORNER_CONTROLS, tableControlsSpacing - tableToolbarSize + 2, "var(--ds-surface, white)", sentinelStyles, OverflowShadow(props), stickyScrollbarStyles(), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tablePadding, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.COLUMN_CONTROLS_WRAPPER, tablePadding, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, tableOverflowShadowWidth, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, ClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), columnControlsDecoration(props), rowControlsWrapperDotStyle(props), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker(props, "\n          left: -11px;\n          top: 9px;\n        "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor(props), tableBorderRadiusSize, tableHeaderCellBackgroundColor(props), ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor(props), tableToolbarSelectedColor(props), ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, getBooleanFF('platform.editor.custom-table-width') ? akEditorTableToolbarSize + akEditorTableNumberColumnWidth + 1 : akEditorTableToolbarSize + akEditorTableNumberColumnWidth, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor(props), tableToolbarSelectedColor(props), ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor(props), tableToolbarDeleteColor(props), ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker(props, "\n        bottom: -1px;\n        left: -11px;\n      "), ClassName.ROW_CONTROLS_INNER, ClassName.ROW_CONTROLS_BUTTON_WRAP, tableBorderRadiusSize, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.CONTROLS_BUTTON, akEditorUnitZIndex, HeaderButton(props, "\n        border-bottom: 1px solid ".concat(tableBorderColor(props), ";\n        border-right: 0px;\n        border-radius: 0;\n        height: 100%;\n        width: ").concat(tableToolbarSize, "px;\n\n        .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, " {\n          position: absolute;\n          width: 30px;\n          height: 50%;\n          right: 0;\n          bottom: 0;\n        }\n        .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n          top: 0;\n        }\n      ")), ClassName.DRAG_ROW_CONTROLS, akEditorUnitZIndex, ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER, ClassName.DRAG_ROW_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", ClassName.DRAG_COLUMN_CONTROLS, ClassName.COLUMN_CONTROLS_INNER, "var(--ds-space-negative-150, -12px)", akEditorUnitZIndex, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", ClassName.CONTROLS_FLOATING_BUTTON_ROW, ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, ClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, ".concat(N0, ")"), "var(--ds-background-accent-gray-subtlest, #F1F2F4)", "var(--ds-icon-subtle, #626F86)", "var(--ds-background-accent-blue-subtle, #579DFF)", "var(--ds-icon-inverse, #FFF)", "var(--ds-background-accent-blue-subtle, #579DFF)", "var(--ds-icon-inverse, #FFF)", "var(--ds-background-accent-red-subtler-pressed, #F87462)", "var(--ds-border-inverse, #FFF)", "var(--ds-background-accent-gray-subtlest, #F1F2F4)", "var(--ds-border-inverse, #FFF)", floatingColumnControls(props), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(props), HeaderButtonDanger(props), ClassName.NUMBERED_COLUMN, getBooleanFF('platform.editor.custom-table-width') ? akEditorTableToolbarSize : akEditorTableToolbarSize - 1, getBooleanFF('platform.editor.table.drag-and-drop') ? 0 : akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor(props), relativeFontSizeToBase16(fontSize()), tableHeaderCellBackgroundColor(props), tableTextColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, white)", ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, getBooleanFF('platform.editor.custom-table-width') ? 0 : 1, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor(props), tableBorderSelectedColor(props), tableToolbarSelectedColor(props), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, tableBorderSelectedColor(props), tableBorderSelectedColor(props), tableToolbarSelectedColor(props), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableToolbarDeleteColor(props), tableBorderDeleteColor(props), "var(--ds-text-danger, ".concat(R500, ")"), akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, akEditorSmallZIndex, ClassName.SELECTED_CELL, tableBorderSelectedColor(props), ClassName.SELECTED_CELL, tableCellSelectedColor(props), akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableCellDeleteColor(props), akEditorUnitZIndex * 100, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL, tableBorderSelectedColor(props), akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(props), akEditorUnitZIndex * 100, tableRowControlStyles(), ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.COLUMN_CONTROLS_WRAPPER, tableMarginTop + 1, tableWrapperStyles(), ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR, props !== null && props !== void 0 && (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.restartNumberedLists ? "" : listLargeNumericMarkersOldStyles, shadowSentinelStyles);
+  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  .", " button {\n    background: ", ";\n    color: ", ";\n    cursor: none;\n  }\n\n  .", ":not(.", ") button:hover {\n    background: ", ";\n    color: ", " !important;\n    cursor: pointer;\n  }\n\n  .ProseMirror {\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n\n    .", " {\n      margin-bottom: 0;\n    }\n\n    .", " {\n      td.", ", th.", " {\n        position: relative;\n        overflow: visible;\n      }\n\n      td.", " {\n        background-color: ", ";\n\n        // ED-15246: Trello card is visible through a border of a table border\n        // This fixes a border issue caused by relative positioned table cells\n        &::after {\n          height: 100%;\n          content: '';\n          border-left: 1px solid ", ";\n          border-bottom: 1px solid ", ";\n          position: absolute;\n          right: 0px;\n          top: 0px;\n          bottom: 0;\n          width: 100%;\n          display: inline-block;\n          pointer-events: none;\n        }\n      }\n    }\n\n    .", " {\n      ", "\n    }\n\n    .", " {\n      ", "\n    }\n\n    ", "\n\n    ", "\n\n    /* Delete button */\n    ", "\n    /* Ends Delete button */\n\n    /* sticky styles */\n    .", " .", " .", ":first-of-type {\n      margin-top: ", "px;\n      width: ", "px;\n\n      position: fixed !important;\n      z-index: ", " !important;\n      box-shadow: 0px -", "px ", ";\n      border-right: 0 none;\n      /* top set by NumberColumn component */\n    }\n\n    .", " .", ".sticky {\n      position: fixed !important;\n      /* needs to be above row controls */\n      z-index: ", " !important;\n      background: ", ";\n\n      width: ", "px;\n      height: ", "px;\n    }\n\n    .", ".sticky .", " {\n      border-bottom: 0px none;\n      border-right: 0px none;\n\n      height: ", "px;\n      width: ", "px;\n    }\n\n    ", "\n\n    .", "\n      .", "\n      .", ".sticky {\n      position: fixed !important;\n      z-index: ", " !important;\n      display: flex;\n      border-left: ", "px solid\n        ", ";\n      margin-left: -", "px;\n    }\n\n    .", " col:first-of-type {\n      /* moving rows out of a table layout does weird things in Chrome */\n      border-right: 1px solid ", ";\n    }\n\n    tr.sticky {\n      padding-top: ", "px;\n      position: fixed;\n      display: grid;\n\n      /* to keep it above cell selection but below date and other nodes popups that are inside sticky header */\n      z-index: ", ";\n\n      overflow-y: visible;\n      overflow-x: hidden;\n\n      grid-auto-flow: column;\n\n      /* background for where controls apply */\n      background: ", ";\n      box-sizing: content-box;\n\n      margin-top: 2px;\n\n      box-shadow: 0 6px 4px -4px ", ";\n      margin-left: -1px;\n\n      &.no-pointer-events {\n        pointer-events: none;\n      }\n    }\n\n    .", " .", " {\n      left: unset;\n      position: fixed;\n      /* needs to be above sticky header row and below date and other nodes popups that are inside sticky header */\n      z-index: ", ";\n    }\n\n    .", ".", "\n      .", " {\n      padding-bottom: ", "px;\n    }\n\n    tr.sticky th {\n      border-bottom: ", "px solid\n        ", ";\n      margin-right: -1px;\n    }\n\n    .", " tr.sticky > th:last-child {\n      border-right-width: 1px;\n    }\n\n    /* add left edge for first cell */\n    .", " tr.sticky > th:first-of-type {\n      margin-left: 0px;\n    }\n\n    /* add a little bit so the scroll lines up with the table */\n    .", " tr.sticky::after {\n      content: ' ';\n      width: ", "px;\n    }\n\n    /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n    .", " .sticky + tr {\n      min-height: 0px;\n    }\n\n    /* move resize line a little in sticky bar */\n    .", ".", " {\n      tr.sticky\n        td.", ",\n        tr.sticky\n        th.", " {\n        .", "::after {\n          right: ", "px;\n        }\n      }\n\n      /* when selected put it back to normal -- :not selector would be nicer */\n      tr.sticky\n        td.", ".", ",\n        tr.sticky\n        th.", ".", " {\n        .", "::after {\n          right: ", "px;\n        }\n      }\n    }\n\n    tr.sticky\n      .", ",\n      tr.sticky\n      .", " {\n      z-index: 1;\n    }\n\n    .", " tr.sticky {\n      padding-top: ", "px;\n    }\n\n    .", ".", "\n      .", "\n      .", ":first-of-type {\n      margin-top: ", "px;\n    }\n\n    .", ".sticky {\n      border-top: ", "px solid\n        ", ";\n    }\n\n    ", "\n    ", "\n    ", "\n\n    .", " .", " {\n      height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n    }\n\n    .less-padding {\n      padding: 0 ", "px;\n\n      .", " {\n        padding: 0 ", "px;\n\n        // https://product-fabric.atlassian.net/browse/ED-16386\n        // Fixes issue where the extra padding that is added here throws off the position\n        // of the rows control dot\n        &::after {\n          right: 6px !important;\n        }\n      }\n\n      .", " {\n        padding: 0 ", "px;\n      }\n\n      &.", "[data-number-column='true'] {\n        padding-left: ", "px;\n      }\n      .", ", .", " {\n        width: ", "px;\n      }\n\n      .", " {\n        left: 6px;\n      }\n\n      .", " {\n        left: calc(100% - 6px);\n      }\n    }\n\n    > .", " {\n      /**\n       * Prevent margins collapsing, aids with placing the gap-cursor correctly\n       * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n       *\n       * TODO: Enable this, many tests will fail!\n       * border-top: 1px solid transparent;\n       */\n    }\n\n    /* Breakout only works on top level unless wrapped in fragment mark */\n    ", "\n\n    ", ";\n    ", ";\n\n    /* Corner controls */\n    .", " {\n      width: ", "px;\n      height: ", "px;\n      display: none;\n\n      .", " {\n        position: relative;\n\n        ", ";\n      }\n    }\n\n    .", ".sticky {\n      .", " {\n        /* sticky row insert dot overlaps other row insert and messes things up */\n        display: none !important;\n      }\n    }\n\n    .", " {\n      position: absolute;\n      top: 0;\n      width: ", "px;\n      height: ", "px;\n      border: 1px solid ", ";\n      border-radius: 0;\n      border-top-left-radius: ", "px;\n      background: ", ";\n      box-sizing: border-box;\n      padding: 0;\n      :focus {\n        outline: none;\n      }\n    }\n    .active .", " {\n      border-color: ", ";\n      background: ", ";\n    }\n\n    .", "[data-number-column='true'] {\n      .", ", .", " {\n        width: ", "px;\n      }\n      .", " .", " {\n        border-right-width: 0;\n      }\n    }\n\n    :not(.", ") .", ":hover {\n      border-color: ", ";\n      background: ", ";\n      cursor: pointer;\n    }\n\n    :not(.", ")\n      .", ".", " {\n      border-color: ", ";\n      background: ", ";\n    }\n\n    /* Row controls */\n    .", " {\n      width: ", "px;\n      box-sizing: border-box;\n      display: none;\n      position: relative;\n\n      ", ";\n\n      .", " {\n        display: flex;\n        flex-direction: column;\n      }\n      .", ":last-child > button {\n        border-bottom-left-radius: ", "px;\n      }\n      .", " {\n        position: relative;\n        margin-top: -1px;\n      }\n      .", ":hover,\n        .", ".active,\n        .", ":hover {\n        z-index: ", ";\n      }\n\n      ", "\n    }\n\n    .", " {\n      display: grid;\n      align-items: center;\n      position: absolute;\n      left: -4px;\n      z-index: ", ";\n\n      .", " {\n        align-self: end;\n        position: absolute;\n        height: 100%;\n        width: 24px;\n      }\n\n      .", " {\n        position: absolute;\n        bottom: -3px;\n        left: 6px;\n        background-color: ", ";\n        height: 4px;\n        width: 4px;\n        border-radius: 50%;\n      }\n    }\n\n    .", " {\n      .", " {\n        height: 24px;\n        position: absolute;\n        top: ", ";\n        z-index: ", ";\n      }\n\n      .", " {\n        position: absolute;\n        height: 24px;\n        width: 100%;\n      }\n\n      .", " {\n        background-color: ", ";\n        height: 4px;\n        width: 4px;\n        border-radius: 50%;\n        position: absolute;\n        right: -2px;\n      }\n    }\n\n    .", "\n      .", " {\n      bottom: -1px;\n    }\n\n    .", " {\n      cursor: grab;\n      padding: 0;\n\n      border-radius: 6px;\n      width: max-content;\n      height: max-content;\n      border: 2px solid ", ";\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      outline: none !important;\n\n      svg {\n        rect {\n          fill: ", ";\n        }\n        g {\n          fill: ", ";\n        }\n      }\n\n      &:hover {\n        svg {\n          rect {\n            fill: ", ";\n          }\n          g {\n            fill: ", ";\n          }\n        }\n      }\n\n      &.selected {\n        svg {\n          rect {\n            fill: ", ";\n          }\n          g {\n            fill: ", ";\n          }\n        }\n      }\n\n      &.danger {\n        svg {\n          rect {\n            fill: ", ";\n          }\n          g {\n            fill: ", ";\n          }\n        }\n      }\n\n      &.disabled {\n        svg {\n          rect {\n            fill: ", ";\n          }\n          g {\n            fill: ", ";\n          }\n        }\n      }\n    }\n\n    ", "\n\n    :not(.", ") .", " {\n      ", "\n      ", "\n    }\n\n    /* Numbered column */\n    .", " {\n      position: relative;\n      float: right;\n      margin-left: ", "px;\n      top: ", "px;\n      width: ", "px;\n      box-sizing: border-box;\n    }\n\n    .", " {\n      border: 1px solid ", ";\n      box-sizing: border-box;\n      margin-top: -1px;\n      padding-bottom: 2px;\n      padding: 10px 2px;\n      text-align: center;\n      font-size: ", ";\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n\n      :first-child:not(style),\n      style:first-child + * {\n        margin-top: 0;\n      }\n      :last-child {\n        border-bottom: 1px solid ", ";\n      }\n    }\n\n    // add a background above the first numbered column cell when sticky header is engaged\n    // which hides the table when scrolling\n    .", ":first-of-type::after {\n      content: '';\n      display: block;\n      height: 33px;\n      width: 100%;\n      background-color: ", ";\n      position: absolute;\n\n      // the extra pixel is accounting for borders\n      top: -34px;\n      left: -1px;\n    }\n\n    .", " {\n      .", ", .", " {\n        display: block;\n      }\n      .", " {\n        padding-left: ", "px;\n\n        .", " {\n          border-left: 0 none;\n        }\n\n        .", ".active {\n          border-bottom: 1px solid ", ";\n          border-color: ", ";\n          background-color: ", ";\n          position: relative;\n          z-index: ", ";\n          color: ", ";\n        }\n      }\n    }\n    :not(.", ") .", " {\n      .", ":not(.", ") {\n        cursor: pointer;\n      }\n      .", ":not(.", "):hover {\n        border-bottom: 1px solid ", ";\n        border-color: ", ";\n        background-color: ", ";\n        position: relative;\n        z-index: ", ";\n        color: ", ";\n      }\n      .", ".", " {\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-left: 0;\n        color: ", ";\n        position: relative;\n        z-index: ", ";\n      }\n    }\n\n    /* Table */\n    .", " > table {\n      table-layout: fixed;\n      white-space: normal;\n      border-top: none;\n      // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n      margin-right: -1px;\n      // Allows better positioning for the shadow sentinels - ED-16668\n      position: relative;\n\n      > tbody > tr {\n        white-space: pre-wrap;\n      }\n\n      .", " + * {\n        margin-top: 0;\n      }\n\n      /*\n       * Headings have a top margin by default, but we don't want this on the\n       * first heading within table header cells.\n       *\n       * This specifically sets margin-top for the first heading within a header\n       * cell when center/right aligned.\n       */\n      th.", " > .fabric-editor-block-mark {\n        > h1:first-of-type,\n        > h2:first-of-type,\n        > h3:first-of-type,\n        > h4:first-of-type,\n        > h5:first-of-type,\n        > h6:first-of-type {\n          margin-top: 0;\n        }\n      }\n\n      .", ", .", " {\n        position: relative;\n      }\n      /* Give selected cells a blue overlay */\n      .", "::after,\n        .", "::after {\n        z-index: ", ";\n        position: absolute;\n        content: '';\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        pointer-events: none;\n      }\n      .", " {\n        border: 1px solid ", ";\n      }\n      .", "::after {\n        background: ", ";\n        z-index: ", ";\n      }\n      th.", "::after,\n        td.", "::after {\n        background: ", ";\n        z-index: ", ";\n      }\n      // ED-15246: Trello card is visible through a border of a table border\n      /* ED-19064: To fix when enable header column in the table,\n       and selection the header column, the right border is not tableBorderSelectedColor\n       when deleting the header column, the right border is not tableToolbarDeleteColor */\n      td.", ",\n        td.", ",\n        th.", ".", ",\n        th.", ".", " {\n        &::after {\n          height: 100%;\n          width: 100%;\n          border: 1px solid ", ";\n          content: '';\n          position: absolute;\n          left: -1px;\n          top: -1px;\n          bottom: 0;\n          z-index: ", ";\n          display: inline-block;\n          pointer-events: none;\n        }\n        &.", "::after {\n          ", ";\n          z-index: ", ";\n        }\n      }\n    }\n    ", "\n    .", ".", " {\n      z-index: ", ";\n    }\n\n    .", " {\n      position: absolute;\n      top: ", "px;\n    }\n\n    ", "\n  }\n\n  .ProseMirror.", " {\n    .", " {\n      overflow-x: auto;\n      ", ";\n    }\n  }\n\n  .ProseMirror.", " {\n    cursor: col-resize;\n  }\n\n  /*\n  ED-15882: When custom start numbers is enabled for lists, we have\n  styles that handle this generally (in editor-common) so we can\n  throw away the older table-specific styles here.\n  */\n  ", "\n\n  ", "\n"])), ClassName.LAYOUT_BUTTON, "var(--ds-background-neutral, ".concat(N20A, ")"), "var(--ds-icon, ".concat(N300, ")"), ClassName.LAYOUT_BUTTON, ClassName.IS_RESIZING, "var(--ds-background-neutral-hovered, ".concat(B300, ")"), "var(--ds-icon, white)", tableSharedStyle(props), columnControlsLineMarker(), hoveredDeleteButton(props), hoveredCell(props), hoveredWarningCell, getBooleanFF('platform.editor.table.drag-and-drop') && insertLine(props), resizeHandle(props), rangeSelectionStyles, ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper(props), ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper(props), dragInsertButtonWrapper(props), dragCornerControlButton(props), DeleteButton(props), ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop + 2, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, "var(--ds-surface, white)", ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, "var(--ds-surface, white)", tableToolbarSize, tableToolbarSize, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize, tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(props), ClassName.TABLE_STICKY, ClassName.ROW_CONTROLS, ClassName.ROW_CONTROLS_BUTTON_WRAP, akEditorStickyHeaderZIndex, tableToolbarSize, "var(--ds-surface, white)", tableToolbarSize, ClassName.TABLE_STICKY, "var(--ds-surface, green)", stickyRowOffsetTop, akEditorTableCellOnStickyHeaderZIndex - 5, "var(--ds-surface, white)", "var(--ds-shadow-overflow-perimeter, ".concat(N40A, ")"), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, akEditorTableCellOnStickyHeaderZIndex, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tableToolbarSize, stickyHeaderBorderBottomWidth, tableBorderColor(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, insertColumnButtonOffset + 1, ClassName.TABLE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.WITH_CONTROLS, tableControlsSpacing, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableControlsSpacing + 2, ClassName.CORNER_CONTROLS, tableControlsSpacing - tableToolbarSize + 2, "var(--ds-surface, white)", sentinelStyles, OverflowShadow(props), stickyScrollbarStyles(), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tablePadding, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tablePadding, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, tableOverflowShadowWidth, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, ClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), columnControlsDecoration(props), rowControlsWrapperDotStyle(props), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker(props, "\n          left: -11px;\n          top: 9px;\n        "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor(props), tableBorderRadiusSize, tableHeaderCellBackgroundColor(props), ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor(props), tableToolbarSelectedColor(props), ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, getBooleanFF('platform.editor.custom-table-width') ? akEditorTableToolbarSize + akEditorTableNumberColumnWidth + 1 : akEditorTableToolbarSize + akEditorTableNumberColumnWidth, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor(props), tableToolbarSelectedColor(props), ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor(props), tableToolbarDeleteColor(props), ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker(props, "\n        bottom: -1px;\n        left: -11px;\n      "), ClassName.ROW_CONTROLS_INNER, ClassName.ROW_CONTROLS_BUTTON_WRAP, tableBorderRadiusSize, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.CONTROLS_BUTTON, akEditorUnitZIndex, HeaderButton(props, "\n        border-bottom: 1px solid ".concat(tableBorderColor(props), ";\n        border-right: 0px;\n        border-radius: 0;\n        height: 100%;\n        width: ").concat(tableToolbarSize, "px;\n\n        .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, " {\n          position: absolute;\n          width: 30px;\n          height: 50%;\n          right: 0;\n          bottom: 0;\n        }\n        .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n          top: 0;\n        }\n      ")), ClassName.DRAG_ROW_CONTROLS, akEditorUnitZIndex, ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER, ClassName.DRAG_ROW_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", ClassName.DRAG_COLUMN_CONTROLS, ClassName.DRAG_COLUMN_CONTROLS_INNER, "var(--ds-space-negative-150, -12px)", akEditorUnitZIndex * 13, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", ClassName.CONTROLS_FLOATING_BUTTON_ROW, ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, ClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, ".concat(N0, ")"), "var(--ds-background-accent-gray-subtlest, #F1F2F4)", "var(--ds-icon-subtle, #626F86)", "var(--ds-background-accent-blue-subtle, #579DFF)", "var(--ds-icon-inverse, #FFF)", "var(--ds-background-accent-blue-subtle, #579DFF)", "var(--ds-icon-inverse, #FFF)", "var(--ds-background-accent-red-subtler-pressed, #F87462)", "var(--ds-border-inverse, #FFF)", "var(--ds-background-accent-gray-subtlest, #F1F2F4)", "var(--ds-border-inverse, #FFF)", floatingColumnControls(props), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(props), HeaderButtonDanger(props), ClassName.NUMBERED_COLUMN, getBooleanFF('platform.editor.custom-table-width') ? akEditorTableToolbarSize : akEditorTableToolbarSize - 1, getBooleanFF('platform.editor.table.drag-and-drop') ? 0 : akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor(props), relativeFontSizeToBase16(fontSize()), tableHeaderCellBackgroundColor(props), tableTextColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, white)", ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, getBooleanFF('platform.editor.custom-table-width') ? 0 : 1, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor(props), tableBorderSelectedColor(props), tableToolbarSelectedColor(props), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, tableBorderSelectedColor(props), tableBorderSelectedColor(props), tableToolbarSelectedColor(props), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableToolbarDeleteColor(props), tableBorderDeleteColor(props), "var(--ds-text-danger, ".concat(R500, ")"), akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, akEditorSmallZIndex, ClassName.SELECTED_CELL, tableBorderSelectedColor(props), ClassName.SELECTED_CELL, tableCellSelectedColor(props), akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableCellDeleteColor(props), akEditorUnitZIndex * 100, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL, tableBorderSelectedColor(props), akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(props), akEditorUnitZIndex * 100, tableRowControlStyles(), ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tableMarginTop, tableWrapperStyles(), ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR, props !== null && props !== void 0 && (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.restartNumberedLists ? "" : listLargeNumericMarkersOldStyles, shadowSentinelStyles);
 };
 export var tableFullPageEditorStyles = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n    margin-right: -1px;\n    width: 100%;\n  }\n"])), ClassName.TABLE_NODE_WRAPPER);
 export var tableCommentEditorStyles = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    margin-right: 0;\n    ", ";\n  }\n"])), ClassName.TABLE_NODE_WRAPPER, scrollbarStyles);

package/dist/esm/plugins/table/ui/icons/AddColLeftIcon.js

@@ -0,0 +1,37 @@
+import React from 'react';
+export var AddColLeftIcon = function AddColLeftIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "24",
+    height: "24",
+    transform: "matrix(0 -1 1 0 0 24)",
+    fill: "none",
+    fillOpacity: "0.01"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "12",
+    y: "18",
+    width: "12",
+    height: "3",
+    rx: "0.5",
+    transform: "rotate(-90 12 18)",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "16",
+    y: "18",
+    width: "12",
+    height: "3",
+    rx: "0.5",
+    transform: "rotate(-90 16 18)",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M7 11H5.99C5.72652 11.0026 5.47473 11.1092 5.28935 11.2964C5.10397 11.4837 4.99999 11.7365 5 12C5 12.556 5.444 13 5.99 13H7V14C7 14.2652 7.10536 14.5196 7.29289 14.7071C7.48043 14.8946 7.73478 15 8 15C8.26522 15 8.51957 14.8946 8.70711 14.7071C8.89464 14.5196 9 14.2652 9 14V13H10.01C10.2735 12.9974 10.5253 12.8908 10.7107 12.7036C10.896 12.5163 11 12.2635 11 12C11 11.444 10.556 11 10.01 11H9V10C9 9.73478 8.89464 9.48043 8.70711 9.29289C8.51957 9.10536 8.26522 9 8 9C7.73478 9 7.48043 9.10536 7.29289 9.29289C7.10536 9.48043 7 9.73478 7 10V11Z",
+    fill: "currentColor"
+  }));
+};

package/dist/esm/plugins/table/ui/icons/AddColRightIcon.js

@@ -0,0 +1,37 @@
+import React from 'react';
+export var AddColRightIcon = function AddColRightIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "24",
+    height: "24",
+    transform: "translate(0 24) rotate(-90)",
+    fill: "none",
+    fillOpacity: "0.01"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "9",
+    y: "18",
+    width: "12",
+    height: "3",
+    rx: "0.5",
+    transform: "rotate(-90 9 18)",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "5",
+    y: "18",
+    width: "12",
+    height: "3",
+    rx: "0.5",
+    transform: "rotate(-90 5 18)",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M15 11L13.99 11C13.7265 11.0026 13.4747 11.1092 13.2893 11.2964C13.104 11.4837 13 11.7365 13 12C13 12.556 13.444 13 13.99 13L15 13L15 14C15 14.2652 15.1054 14.5196 15.2929 14.7071C15.4804 14.8946 15.7348 15 16 15C16.2652 15 16.5196 14.8946 16.7071 14.7071C16.8946 14.5196 17 14.2652 17 14L17 13L18.01 13C18.2735 12.9974 18.5253 12.8908 18.7107 12.7036C18.896 12.5163 19 12.2635 19 12C19 11.444 18.556 11 18.01 11L17 11L17 10C17 9.73478 16.8946 9.48043 16.7071 9.29289C16.5196 9.10536 16.2652 9 16 9C15.7348 9 15.4804 9.10536 15.2929 9.29289C15.1054 9.48043 15 9.73478 15 10L15 11Z",
+    fill: "currentColor"
+  }));
+};

package/dist/esm/plugins/table/ui/icons/AddRowAboveIcon.js

@@ -0,0 +1,38 @@
+import React from 'react';
+export var AddRowAboveIcon = function AddRowAboveIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "24",
+    height: "24",
+    fill: "var(--ds-border-inverse, #FFFFFF)",
+    fillOpacity: "0.01"
+  }), /*#__PURE__*/React.createElement("mask", {
+    id: "path-1-inside-1_896_17822",
+    fill: "var(--ds-border-inverse, #FFFFFF)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: "6",
+    y: "12",
+    width: "12",
+    height: "8",
+    rx: "0.5"
+  })), /*#__PURE__*/React.createElement("rect", {
+    x: "6",
+    y: "12",
+    width: "12",
+    height: "8",
+    rx: "0.5",
+    stroke: "currentColor",
+    strokeWidth: "4",
+    mask: "url(#path-1-inside-1_896_17822)"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M13 7V5.99C12.9974 5.72652 12.8908 5.47473 12.7036 5.28935C12.5163 5.10397 12.2635 4.99999 12 5C11.444 5 11 5.444 11 5.99V7H10C9.73478 7 9.48043 7.10536 9.29289 7.29289C9.10536 7.48043 9 7.73478 9 8C9 8.26522 9.10536 8.51957 9.29289 8.70711C9.48043 8.89464 9.73478 9 10 9H11V10.01C11.0026 10.2735 11.1092 10.5253 11.2964 10.7107C11.4837 10.896 11.7365 11 12 11C12.556 11 13 10.556 13 10.01V9H14C14.2652 9 14.5196 8.89464 14.7071 8.70711C14.8946 8.51957 15 8.26522 15 8C15 7.73478 14.8946 7.48043 14.7071 7.29289C14.5196 7.10536 14.2652 7 14 7H13Z",
+    fill: "currentColor"
+  }));
+};