@atlaskit/editor-plugin-table 7.16.10 → 7.16.12

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

@@ -213,9 +213,9 @@ export const checkEdgeHasMergedCells = (indexes, tableMap, direction) => {
   let 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.
+   */
   let isOldMinIndex = !map[minIndex - 1] || !map[minIndex];
   let isOldMaxIndex = !map[maxIndex + 1] || !map[maxIndex];
   if (minIndex > 0 && !isOldMinIndex) {

package/dist/esm/commands/misc.js

@@ -268,9 +268,9 @@ export var moveCursorBackward = function 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
+    */
   var 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/esm/nodeviews/TableCell.js

@@ -10,8 +10,8 @@ import { getCellAttrs, getCellDomAttrs } from '@atlaskit/adf-schema';
 import TableNodeView from './TableNodeViewBase';
 var DEFAULT_COL_SPAN = 1;
 var DEFAULT_ROW_SPAN = 1;
-var TableCell = /*#__PURE__*/function (_ref) {
-  _inherits(TableCell, _ref);
+var TableCell = /*#__PURE__*/function (_TableNodeView) {
+  _inherits(TableCell, _TableNodeView);
   var _super = _createSuper(TableCell);
   function TableCell(node, view, getPos, eventDispatcher) {
     _classCallCheck(this, TableCell);
@@ -46,20 +46,20 @@ var TableCell = /*#__PURE__*/function (_ref) {
       }
 
       // added + changed attributes
-      var addedAttrs = Object.entries(nextAttrs).filter(function (_ref2) {
-        var _ref3 = _slicedToArray(_ref2, 2),
-          key = _ref3[0],
-          value = _ref3[1];
+      var addedAttrs = Object.entries(nextAttrs).filter(function (_ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+          key = _ref2[0],
+          value = _ref2[1];
         return attrs[key] !== value;
       });
       var removedAttrs = Object.keys(attrs).filter(function (key) {
         return !nextAttrs.hasOwnProperty(key);
       });
       if (addedAttrs.length || removedAttrs.length) {
-        addedAttrs.forEach(function (_ref4) {
-          var _ref5 = _slicedToArray(_ref4, 2),
-            key = _ref5[0],
-            value = _ref5[1];
+        addedAttrs.forEach(function (_ref3) {
+          var _ref4 = _slicedToArray(_ref3, 2),
+            key = _ref4[0],
+            value = _ref4[1];
           return _this.dom.setAttribute(key, value || '');
         });
         removedAttrs.forEach(function (key) {

package/dist/esm/nodeviews/TableContainer.js

@@ -1,9 +1,10 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-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,8 +36,33 @@ var leftAlignStyle = {
 };
 var AlignmentTableContainer = function AlignmentTableContainer(_ref2) {
   var node = _ref2.node,
-    children = _ref2.children;
+    children = _ref2.children,
+    pluginInjectionApi = _ref2.pluginInjectionApi,
+    getPos = _ref2.getPos,
+    editorView = _ref2.editorView;
   var alignment = node.attrs.layout;
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['table']),
+    tableState = _useSharedPluginState.tableState;
+  useEffect(function () {
+    if (tableState && editorView && getPos) {
+      var wasFullWidthModeEnabled = tableState.wasFullWidthModeEnabled,
+        isFullWidthModeEnabled = tableState.isFullWidthModeEnabled;
+      if (wasFullWidthModeEnabled && !isFullWidthModeEnabled && node.attrs.width > akEditorDefaultLayoutWidth) {
+        var pos = getPos && getPos();
+        if (typeof pos !== 'number') {
+          return;
+        }
+        var tr = setTableAlignmentWithTableContentWithPos('center', {
+          pos: pos,
+          node: node
+        })(editorView.state);
+        if (tr) {
+          editorView.dispatch(tr);
+        }
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editorView, tableState, node]);
   var style = useMemo(function () {
     return alignment === 'align-start' ? leftAlignStyle : centerAlignStyle;
   }, [alignment]);
@@ -52,7 +78,10 @@ var AlignmentTableContainer = function AlignmentTableContainer(_ref2) {
 var AlignmentTableContainerWrapper = function AlignmentTableContainerWrapper(_ref3) {
   var isTableAlignmentEnabled = _ref3.isTableAlignmentEnabled,
     node = _ref3.node,
-    children = _ref3.children;
+    children = _ref3.children,
+    pluginInjectionApi = _ref3.pluginInjectionApi,
+    getPos = _ref3.getPos,
+    editorView = _ref3.editorView;
   if (!isTableAlignmentEnabled) {
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "table-alignment-container",
@@ -65,7 +94,10 @@ var AlignmentTableContainerWrapper = function AlignmentTableContainerWrapper(_re
     }, children);
   }
   return /*#__PURE__*/React.createElement(AlignmentTableContainer, {
-    node: node
+    node: node,
+    pluginInjectionApi: pluginInjectionApi,
+    getPos: getPos,
+    editorView: editorView
   }, children);
 };
 export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
@@ -142,8 +174,8 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
     return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$s = pluginInjectionApi.selection) === null || _pluginInjectionApi$s === void 0 ? void 0 : _pluginInjectionApi$s.commands.displayGapCursor(toggle))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
   }, [pluginInjectionApi]);
   var tableWidth = getTableContainerWidth(node);
-  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['editorViewMode']),
-    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  var _useSharedPluginState2 = useSharedPluginState(pluginInjectionApi, ['editorViewMode']),
+    editorViewModeState = _useSharedPluginState2.editorViewModeState;
 
   // 76 is currently an accepted padding value considering the spacing for resizer handle
   var responsiveContainerWidth = isTableScalingEnabled ? containerWidth - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide / 2 : containerWidth - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide;
@@ -175,7 +207,10 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
   var 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/esm/nodeviews/TableResizer.js

@@ -40,13 +40,13 @@ var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
   var _tableRef$clientHeigh;
   var 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/esm/nodeviews/TableRow.js

@@ -25,8 +25,8 @@ var HEADER_ROW_SCROLL_THROTTLE_TIMEOUT = 200;
 // timeout for resetting the scroll class - if it’s too long then users won’t be able to click on the header cells,
 // if too short it would trigger too many dom updates.
 var HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT = 400;
-var TableRow = /*#__PURE__*/function (_ref) {
-  _inherits(TableRow, _ref);
+var TableRow = /*#__PURE__*/function (_TableNodeView) {
+  _inherits(TableRow, _TableNodeView);
   var _super = _createSuper(TableRow);
   function TableRow(node, view, getPos, eventDispatcher) {
     var _this;
@@ -323,27 +323,27 @@ var TableRow = /*#__PURE__*/function (_ref) {
     value: function 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.
+        */
 
       var _this$sentinelData = this.sentinelData,
         sentinelTop = _this$sentinelData.top,

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

@@ -39,9 +39,9 @@ export function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorF
           var 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
+                  */
             var _getTablePluginState = getTablePluginState(state),
               isKeyboardResize = _getTablePluginState.isKeyboardResize;
             if (isKeyboardResize) {

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

@@ -89,10 +89,10 @@ export var updateColgroup = function updateColgroup(state, tableRef, tableNode,
   var cols = tableRef === null || tableRef === void 0 ? void 0 : tableRef.querySelectorAll('col');
   var 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) {
     var scalePercent = getTableScalingPercent(tableNode, tableRef);
     state.cols.filter(function (column) {

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

@@ -160,9 +160,9 @@ export var scaleTable = function scaleTable(tableRef, options, domAtPos) {
         // 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;
       }

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

@@ -22,5 +22,5 @@ export var elementBeforeIconStyles = css({
 export var tablePopupStyles = function tablePopupStyles(isDragAndDropEnabled
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 ) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 20px;\n      height: 20px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 20px;\n      color: ", ";\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 14px;\n      height: 14px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 14px;\n      color: ", ";\n    }\n  }\n"])), ClassName.CONTEXTUAL_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.CONTEXTUAL_MENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"), ClassName.CONTEXTUAL_MENU_ICON_SMALL, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tborder-radius: ", ";\n\t\tbackground: ", ";\n\t\tbox-shadow: ", ";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: ", "px;\n\t\tpadding: ", ";\n\n\t\t> div {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 20px;\n\t\t\theight: 20px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 20px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 14px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), ClassName.CONTEXTUAL_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.CONTEXTUAL_MENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"), ClassName.CONTEXTUAL_MENU_ICON_SMALL, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
 };

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

@@ -18,7 +18,7 @@ export var elementBeforeIconStyles = css({
 });
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-export var dragMenuBackgroundColorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 14px;\n      height: 14px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 14px;\n      color: ", ";\n    }\n  }\n"])), ClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), dragMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.DRAG_SUBMENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
+export var dragMenuBackgroundColorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tborder-radius: ", ";\n\t\tbackground: ", ";\n\t\tbox-shadow: ", ";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: ", "px;\n\t\tpadding: ", ";\n\n\t\t> div {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 14px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), ClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), dragMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.DRAG_SUBMENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
 export var toggleStyles = css({
   display: 'flex',
   "input[type='checkbox']": {

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

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression */
 
 import { css } from '@emotion/react';
@@ -33,43 +33,49 @@ var stickyScrollbarStyles = function stickyScrollbarStyles(featureFlags) {
 };
 var shadowSentinelStyles = "\n  .".concat(ClassName.TABLE_SHADOW_SENTINEL_LEFT, ",\n  .").concat(ClassName.TABLE_SHADOW_SENTINEL_RIGHT, " {\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 1px;\n    visibility: hidden;\n  }\n  .").concat(ClassName.TABLE_SHADOW_SENTINEL_LEFT, " {\n    left: 0;\n  }\n  .").concat(ClassName.TABLE_SHADOW_SENTINEL_RIGHT, " {\n    right: 0;\n  }\n");
 var breakoutWidthStyling = function breakoutWidthStyling() {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    > *:not([data-mark-type='fragment'])\n      .", "\n      .", " {\n      margin-left: unset !important;\n      width: 100% !important;\n    }\n\n    > [data-mark-type='fragment']\n      *\n      .", "\n      .", " {\n      margin-left: unset !important;\n      width: 100% !important;\n    }\n  "])), ClassName.NODEVIEW_WRAPPER, ClassName.TABLE_CONTAINER, ClassName.NODEVIEW_WRAPPER, ClassName.TABLE_CONTAINER);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t> *:not([data-mark-type='fragment'])\n\t\t\t.", "\n\t\t\t.", " {\n\t\t\tmargin-left: unset !important;\n\t\t\twidth: 100% !important;\n\t\t}\n\n\t\t> [data-mark-type='fragment'] * .", " .", " {\n\t\t\tmargin-left: unset !important;\n\t\t\twidth: 100% !important;\n\t\t}\n\t"])), ClassName.NODEVIEW_WRAPPER, ClassName.TABLE_CONTAINER, ClassName.NODEVIEW_WRAPPER, ClassName.TABLE_CONTAINER);
 };
 var viewModeSortStyles = function viewModeSortStyles() {
   if (getBooleanFF('platform.editor.table.live-pages-sorting_4malx')) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      th {\n        .", " {\n          + p {\n            margin-top: 0 !important;\n          }\n        }\n\n        &:has(.is-active) {\n          .", " {\n            opacity: 1;\n          }\n        }\n\n        .", " {\n          opacity: 0;\n          &:focus {\n            opacity: 1;\n          }\n        }\n\n        &:hover {\n          .", " {\n            opacity: 1;\n          }\n        }\n      }\n    "])), SORTING_ICON_CLASS_NAME, SORTABLE_COLUMN_ICON_CLASSNAME, SORTABLE_COLUMN_ICON_CLASSNAME, SORTABLE_COLUMN_ICON_CLASSNAME);
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t\tth {\n\t\t\t\t.", " {\n\t\t\t\t\t+ p {\n\t\t\t\t\t\tmargin-top: 0 !important;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t&:has(.is-active) {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t.", " {\n\t\t\t\t\topacity: 0;\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t&:hover {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t"])), SORTING_ICON_CLASS_NAME, SORTABLE_COLUMN_ICON_CLASSNAME, SORTABLE_COLUMN_ICON_CLASSNAME, SORTABLE_COLUMN_ICON_CLASSNAME);
   }
 };
+var numberColumnFix = function numberColumnFix() {
+  if (getBooleanFF('platform.editor.table.editor-num-col-style-changes')) {
+    return '';
+  }
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t> table[data-number-column='true'] {\n\t\t\twidth: calc(100% - 1px);\n\t\t}\n\t"])));
+};
 var tableBorderStyles = function tableBorderStyles() {
   return "border-color: ".concat(tableBorderDeleteColor);
 };
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 var tableStickyHeaderColumnControlsDecorationsStyle = function tableStickyHeaderColumnControlsDecorationsStyle() {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    .", " .", " {\n      z-index: 0;\n      left: -1px;\n    }\n\n    .", "\n      .", "::after {\n      border-left: 1px solid ", ";\n    }\n\n    .", "\n      tr:first-of-type\n      th.", " {\n      &.", ", &.", " {\n        .", "::after {\n          left: 0;\n        }\n      }\n    }\n  "])), ClassName.TABLE_STICKY, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_STICKY, ClassName.COLUMN_CONTROLS_DECORATIONS, tableBorderColor, ClassName.TABLE_STICKY, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_COLUMN, ClassName.COLUMN_CONTROLS_DECORATIONS);
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t\t.", " .", " {\n\t\t\tz-index: 0;\n\t\t\tleft: -1px;\n\t\t}\n\n\t\t.", " .", "::after {\n\t\t\tborder-left: 1px solid ", ";\n\t\t}\n\n\t\t.", " tr:first-of-type th.", " {\n\t\t\t&.", ", &.", " {\n\t\t\t\t.", "::after {\n\t\t\t\t\tleft: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"])), ClassName.TABLE_STICKY, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_STICKY, ClassName.COLUMN_CONTROLS_DECORATIONS, tableBorderColor, ClassName.TABLE_STICKY, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_COLUMN, ClassName.COLUMN_CONTROLS_DECORATIONS);
 };
 var tableStickyHeaderFirefoxFixStyle = function tableStickyHeaderFirefoxFixStyle() {
   /*
-    This is MAGIC!
-    This fixes a bug which occurs in firefox when the first row becomes sticky.
-    see https://product-fabric.atlassian.net/browse/ED-19177
-  */
+     This is MAGIC!
+     This fixes a bug which occurs in firefox when the first row becomes sticky.
+     see https://product-fabric.atlassian.net/browse/ED-19177
+   */
   if (browser.gecko) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      .", " > tbody::before {\n        content: '';\n      }\n    "])), ClassName.TABLE_STICKY);
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t\t\t.", " > tbody::before {\n\t\t\t\tcontent: '';\n\t\t\t}\n\t\t"])), ClassName.TABLE_STICKY);
   }
 };
 
 // re-exporting these styles to use in Gemini test when table node view is rendered outside of PM
 export var baseTableStyles = function baseTableStyles(props) {
   var _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$featureFlags4;
-  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", ";\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    .", "\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    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 .", ", tr.sticky .", " {\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      .", " {\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    z-index: ", ";\n\n    .", " {\n      position: absolute;\n      align-self: end;\n      height: 100%;\n      width: 18px;\n    }\n\n    .", " {\n      position: absolute;\n      bottom: -3px;\n      left: 2px;\n      background-color: ", ";\n      height: 4px;\n      width: 4px;\n      border-radius: 50%;\n      pointer-events: none;\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    background: none;\n    border: none;\n    outline: none;\n    position: absolute;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n\n    :focus {\n      outline: none;\n    }\n  }\n\n  .", " {\n    cursor: grab;\n    pointer-events: auto;\n\n    line-height: 0;\n    padding: 0;\n    border-radius: 6px;\n    width: max-content;\n    border: 2px solid ", ";\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background: transparent;\n    outline: none;\n\n    &.placeholder {\n      background-color: transparent;\n      border: 2px solid transparent;\n    }\n\n    &.", " {\n      cursor: pointer;\n      & svg {\n        & > rect.", " {\n          fill: ", ";\n        }\n        & > rect {\n          fill: ", ";\n        }\n        & > g > rect {\n          fill: ", ";\n        }\n      }\n    }\n\n    &:not(.", ") {\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      &:active {\n        cursor: grabbing;\n      }\n\n      &.selected {\n        :focus {\n          outline: 2px solid ", ";\n          outline-offset: 1px;\n        }\n\n        &:active {\n          outline: none;\n        }\n\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  }\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  .", " {\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    .", ", .", " {\n      display: block;\n    }\n    .", " {\n      padding-left: 0px;\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      &.", ".", "::after {\n        ", ";\n        z-index: ", ";\n      }\n    }\n  }\n\n  // override for DnD controls\n  .", " {\n    position: absolute;\n    margin-top: ", "px;\n    left: -", "px;\n    z-index: ", ";\n  }\n\n  .", " {\n    position: absolute;\n    /* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n    top: ", "px;\n    left: -", "px;\n  }\n\n  .", ".", ",\n    .", ".", " {\n    z-index: ", ";\n  }\n\n  .", " {\n    position: absolute;\n    top: ", "px;\n  }\n\n  .", " .", " {\n    position: fixed;\n    /* higher zIndex than sticky header which is akEditorTableCellOnStickyHeaderZIndex - 5 */\n    z-index: ", ";\n  }\n\n  .", " {\n    padding-bottom: 0px;\n    /* fixes gap cursor height */\n    overflow: auto;\n    overflow-y: hidden;\n    position: relative;\n\n    > table[data-number-column='true'] {\n      width: calc(100% - 1px);\n    }\n  }\n"])), tableSharedStyle(), columnControlsLineMarker(), hoveredDeleteButton(), hoveredCell(), hoveredWarningCell, ((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.tableDragAndDrop) && insertLine(), resizeHandle((_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.tableDragAndDrop), rangeSelectionStyles, viewModeSortStyles(), ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor, tableBorderColor, tableBorderColor, ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper(), ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper(), dragInsertButtonWrapper(), dragCornerControlButton(), DeleteButton(), 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(), tableStickyHeaderFirefoxFixStyle(), 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, 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$featureFlags3 = props.featureFlags) === null || _props$featureFlags3 === void 0 ? void 0 : _props$featureFlags3.tableDragAndDrop), stickyScrollbarStyles(props.featureFlags), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tablePadding, ClassName.DRAG_ROW_CONTROLS_WRAPPER, 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(), rowControlsWrapperDotStyle(), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker("\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, tableBorderRadiusSize, tableHeaderCellBackgroundColor, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, akEditorTableToolbarSize + akEditorTableNumberColumnWidth + 1, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, tableToolbarDeleteColor, ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker("\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("\n        border-bottom: 1px solid ".concat(tableBorderColor, ";\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)", resizeHandlerZIndex, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE, ClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, ".concat(N0, ")"), ClassName.DRAG_HANDLE_DISABLED, ClassName.DRAG_HANDLE_MINIMISED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-background-accent-gray-subtlest, #F4F5F7)", "var(--ds-icon-disabled, #BFDBF847)", ClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-icon-subtle, #626f86)", "var(--ds-background-accent-blue-subtle, #579DFF)", "var(--ds-icon-inverse, #FFF)", "var(--ds-border-focused, #2684FF)", "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)", floatingColumnControls(), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(), HeaderButtonDanger(), ClassName.NUMBERED_COLUMN, akEditorTableToolbarSize, (_props$featureFlags4 = props.featureFlags) !== null && _props$featureFlags4 !== void 0 && _props$featureFlags4.tableDragAndDrop ? 0 : akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor, relativeFontSizeToBase16(fontSize()), tableHeaderCellBackgroundColor, tableTextColor, tableBorderColor, tableBorderColor, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, white)", ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, tableToolbarSelectedColor, 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, tableBorderSelectedColor, tableToolbarSelectedColor, akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableToolbarDeleteColor, tableBorderDeleteColor, "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, ClassName.SELECTED_CELL, tableCellSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableCellDeleteColor, akEditorUnitZIndex * 100, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL, tableBorderSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), akEditorUnitZIndex * 100, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), akEditorUnitZIndex * 100, ClassName.DRAG_ROW_CONTROLS_WRAPPER, tableMarginTop, tableToolbarSize + 1, rowControlsZIndex + 4, ClassName.ROW_CONTROLS_WRAPPER, tableMarginTop - cornerControlHeight + 1, tableToolbarSize, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tableMarginTop, ClassName.TABLE_STICKY, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, akEditorTableCellOnStickyHeaderZIndex - 4, ClassName.TABLE_NODE_WRAPPER);
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\n\t.", " {\n\t\tmargin-bottom: 0;\n\t}\n\n\t.", " {\n\t\ttd.", ", th.", " {\n\t\t\tposition: relative;\n\t\t\toverflow: visible;\n\t\t}\n\n\t\ttd.", " {\n\t\t\tbackground-color: ", ";\n\n\t\t\t// ED-15246: Trello card is visible through a border of a table border\n\t\t\t// This fixes a border issue caused by relative positioned table cells\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\tcontent: '';\n\t\t\t\tborder-left: 1px solid ", ";\n\t\t\t\tborder-bottom: 1px solid ", ";\n\t\t\t\tposition: absolute;\n\t\t\t\tright: 0px;\n\t\t\t\ttop: 0px;\n\t\t\t\tbottom: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t", "\n\n\t", "\n\n    /* Delete button */\n    ", "\n    /* Ends Delete button */\n\n    /* sticky styles */\n    .", " .", " .", ":first-of-type {\n\t\tmargin-top: ", "px;\n\t\twidth: ", "px;\n\n\t\tposition: fixed !important;\n\t\tz-index: ", " !important;\n\t\tbox-shadow: 0px -", "px ", ";\n\t\tborder-right: 0 none;\n\t\t/* top set by NumberColumn component */\n\t}\n\n\t.", " .", ".sticky {\n\t\tposition: fixed !important;\n\t\t/* needs to be above row controls */\n\t\tz-index: ", " !important;\n\t\tbackground: ", ";\n\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t}\n\n\t.", ".sticky .", " {\n\t\tborder-bottom: 0px none;\n\t\tborder-right: 0px none;\n\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t}\n\n\t", "\n\n\t", "\n\n    .", "\n      .", "\n      .", ".sticky {\n\t\tposition: fixed !important;\n\t\tz-index: ", " !important;\n\t\tdisplay: flex;\n\t\tborder-left: ", "px solid ", ";\n\t\tmargin-left: -", "px;\n\t}\n\n\t.", " col:first-of-type {\n\t\t/* moving rows out of a table layout does weird things in Chrome */\n\t\tborder-right: 1px solid ", ";\n\t}\n\n\ttr.sticky {\n\t\tpadding-top: ", "px;\n\t\tposition: fixed;\n\t\tdisplay: grid;\n\n\t\t/* to keep it above cell selection but below date and other nodes popups that are inside sticky header */\n\t\tz-index: ", ";\n\n\t\toverflow-y: visible;\n\t\toverflow-x: hidden;\n\n\t\tgrid-auto-flow: column;\n\n\t\t/* background for where controls apply */\n\t\tbackground: ", ";\n\t\tbox-sizing: content-box;\n\n\t\tmargin-top: 2px;\n\n\t\tbox-shadow: 0 6px 4px -4px ", ";\n\t\tmargin-left: -1px;\n\n\t\t&.no-pointer-events {\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.", " .", " {\n\t\tleft: unset;\n\t\tposition: fixed;\n\t\t/* needs to be above sticky header row and below date and other nodes popups that are inside sticky header */\n\t\tz-index: ", ";\n\t}\n\n\t.", ".", " .", " {\n\t\tpadding-bottom: ", "px;\n\t}\n\n\ttr.sticky th {\n\t\tborder-bottom: ", "px solid ", ";\n\t\tmargin-right: -1px;\n\t}\n\n\t.", " tr.sticky > th:last-child {\n\t\tborder-right-width: 1px;\n\t}\n\n\t/* add left edge for first cell */\n\t.", " tr.sticky > th:first-of-type {\n\t\tmargin-left: 0px;\n\t}\n\n\t/* add a little bit so the scroll lines up with the table */\n\t.", " tr.sticky::after {\n\t\tcontent: ' ';\n\t\twidth: ", "px;\n\t}\n\n\t/* To fix jumpiness caused in Chrome Browsers for sticky headers */\n\t.", " .sticky + tr {\n\t\tmin-height: 0px;\n\t}\n\n\t/* move resize line a little in sticky bar */\n\t.", ".", " {\n\t\ttr.sticky td.", ", tr.sticky th.", " {\n\t\t\t.", "::after {\n\t\t\t\tright: ", "px;\n\t\t\t}\n\t\t}\n\n\t\t/* when selected put it back to normal -- :not selector would be nicer */\n\t\ttr.sticky\n\t\t\ttd.", ".", ",\n\t\t\ttr.sticky\n\t\t\tth.", ".", " {\n\t\t\t.", "::after {\n\t\t\t\tright: ", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\ttr.sticky .", ", tr.sticky .", " {\n\t\tz-index: 1;\n\t}\n\n\t.", " tr.sticky {\n\t\tpadding-top: ", "px;\n\t}\n\n\t.", ".", "\n\t\t.", "\n\t\t.", ":first-of-type {\n\t\tmargin-top: ", "px;\n\t}\n\n\t.", ".sticky {\n\t\tborder-top: ", "px solid\n\t\t\t", ";\n\t}\n\n\t", "\n\t", "\n    ", "\n\n    .", " .", " {\n\t\theight: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n\t}\n\n\t.less-padding {\n\t\tpadding: 0 ", "px;\n\n\t\t.", ", .", " {\n\t\t\tpadding: 0 ", "px;\n\n\t\t\t// https://product-fabric.atlassian.net/browse/ED-16386\n\t\t\t// Fixes issue where the extra padding that is added here throws off the position\n\t\t\t// of the rows control dot\n\t\t\t&::after {\n\t\t\t\tright: 6px !important;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tpadding: 0 ", "px;\n\t\t}\n\n\t\t&.", "[data-number-column='true'] {\n\t\t\tpadding-left: ", "px;\n\t\t}\n\t\t.", ", .", " {\n\t\t\twidth: ", "px;\n\t\t}\n\n\t\t.", " {\n\t\t\tleft: 6px;\n\t\t}\n\n\t\t.", " {\n\t\t\tleft: calc(100% - 6px);\n\t\t}\n\t}\n\n\t> .", " {\n\t\t/**\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\t}\n\n\t/* Breakout only works on top level unless wrapped in fragment mark */\n\t", "\n\n\t", ";\n\t", ";\n\n\t/* Corner controls */\n\t.", " {\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tdisplay: none;\n\n\t\t.", " {\n\t\t\tposition: relative;\n\n\t\t\t", ";\n\t\t}\n\t}\n\n\t.", ".sticky {\n\t\t.", " {\n\t\t\t/* sticky row insert dot overlaps other row insert and messes things up */\n\t\t\tdisplay: none !important;\n\t\t}\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tborder: 1px solid ", ";\n\t\tborder-radius: 0;\n\t\tborder-top-left-radius: ", "px;\n\t\tbackground: ", ";\n\t\tbox-sizing: border-box;\n\t\tpadding: 0;\n\t\t:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n\t.active .", " {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t.", "[data-number-column='true'] {\n\t\t.", ", .", " {\n\t\t\twidth: ", "px;\n\t\t}\n\t\t.", " .", " {\n\t\t\tborder-right-width: 0;\n\t\t}\n\t}\n\n\t:not(.", ") .", ":hover {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t\tcursor: pointer;\n\t}\n\n\t:not(.", ")\n\t\t.", ".", " {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t/* Row controls */\n\t.", " {\n\t\twidth: ", "px;\n\t\tbox-sizing: border-box;\n\t\tdisplay: none;\n\t\tposition: relative;\n\n\t\t", ";\n\n\t\t.", " {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t}\n\t\t.", ":last-child > button {\n\t\t\tborder-bottom-left-radius: ", "px;\n\t\t}\n\t\t.", " {\n\t\t\tposition: relative;\n\t\t\tmargin-top: -1px;\n\t\t}\n\t\t.", ":hover,\n\t\t\t.", ".active,\n\t\t\t.", ":hover {\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t", "\n\t}\n\n\t.", " {\n\t\tdisplay: grid;\n\t\talign-items: center;\n\t\tposition: absolute;\n\t\tz-index: ", ";\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\talign-self: end;\n\t\t\theight: 100%;\n\t\t\twidth: 18px;\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tbottom: -3px;\n\t\t\tleft: 2px;\n\t\t\tbackground-color: ", ";\n\t\t\theight: 4px;\n\t\t\twidth: 4px;\n\t\t\tborder-radius: 50%;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " {\n\t\t\theight: 24px;\n\t\t\tposition: absolute;\n\t\t\ttop: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\theight: 24px;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\theight: 4px;\n\t\t\twidth: 4px;\n\t\t\tborder-radius: 50%;\n\t\t\tposition: absolute;\n\t\t\tright: -2px;\n\t\t}\n\t}\n\n\t.", " {\n\t\tbackground: none;\n\t\tborder: none;\n\t\toutline: none;\n\t\tposition: absolute;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcursor: pointer;\n\n\t\t:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t.", " {\n\t\tcursor: grab;\n\t\tpointer-events: auto;\n\n\t\tline-height: 0;\n\t\tpadding: 0;\n\t\tborder-radius: 6px;\n\t\twidth: max-content;\n\t\tborder: 2px solid ", ";\n\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbackground: transparent;\n\t\toutline: none;\n\n\t\t&.placeholder {\n\t\t\tbackground-color: transparent;\n\t\t\tborder: 2px solid transparent;\n\t\t}\n\n\t\t&.", " {\n\t\t\tcursor: pointer;\n\t\t\t& svg {\n\t\t\t\t& > rect.", " {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\t& > rect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\t& > g > rect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:not(.", ") {\n\t\t\t& svg {\n\t\t\t\trect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\tg {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcursor: grabbing;\n\t\t\t}\n\n\t\t\t&.selected {\n\t\t\t\t:focus {\n\t\t\t\t\toutline: 2px solid ", ";\n\t\t\t\t\toutline-offset: 1px;\n\t\t\t\t}\n\n\t\t\t\t&:active {\n\t\t\t\t\toutline: none;\n\t\t\t\t}\n\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&.danger {\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n\n\t:not(.", ") .", " {\n\t\t", "\n\t\t", "\n\t}\n\n\t/* Numbered column */\n\t.", " {\n\t\tposition: relative;\n\t\tfloat: right;\n\t\tmargin-left: ", "px;\n\t\ttop: ", "px;\n\t\twidth: ", "px;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.", " {\n\t\tborder: 1px solid ", ";\n\t\tbox-sizing: border-box;\n\t\tmargin-top: -1px;\n\t\tpadding-bottom: 2px;\n\t\tpadding: 10px 2px;\n\t\ttext-align: center;\n\t\tfont-size: ", ";\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\tborder-color: ", ";\n\n\t\t:first-child:not(style),\n\t\tstyle:first-child + * {\n\t\t\tmargin-top: 0;\n\t\t}\n\t\t:last-child {\n\t\t\tborder-bottom: 1px solid ", ";\n\t\t}\n\t}\n\n\t// add a background above the first numbered column cell when sticky header is engaged\n\t// which hides the table when scrolling\n\t.", " {\n\t\t.", ":first-of-type::after {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\theight: 33px;\n\t\t\twidth: 100%;\n\t\t\tbackground-color: ", ";\n\t\t\tposition: absolute;\n\n\t\t\t// the extra pixel is accounting for borders\n\t\t\ttop: -34px;\n\t\t\tleft: -1px;\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", ", .", " {\n\t\t\tdisplay: block;\n\t\t}\n\t\t.", " {\n\t\t\tpadding-left: 0px;\n\n\t\t\t.", " {\n\t\t\t\tborder-left: 0 none;\n\t\t\t}\n\n\t\t\t.", ".active {\n\t\t\t\tborder-bottom: 1px solid ", ";\n\t\t\t\tborder-color: ", ";\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tposition: relative;\n\t\t\t\tz-index: ", ";\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t}\n\t}\n\t:not(.", ") .", " {\n\t\t.", ":not(.", ") {\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.", ":not(.", "):hover {\n\t\t\tborder-bottom: 1px solid ", ";\n\t\t\tborder-color: ", ";\n\t\t\tbackground-color: ", ";\n\t\t\tposition: relative;\n\t\t\tz-index: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\t\t.", ".", " {\n\t\t\tbackground-color: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-left: 0;\n\t\t\tcolor: ", ";\n\t\t\tposition: relative;\n\t\t\tz-index: ", ";\n\t\t}\n\t}\n\n\t/* Table */\n\t.", " > table {\n\t\ttable-layout: fixed;\n\t\twhite-space: normal;\n\t\tborder-top: none;\n\t\t// 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n\t\tmargin-right: -1px;\n\t\t// Allows better positioning for the shadow sentinels - ED-16668\n\t\tposition: relative;\n\n\t\t> tbody > tr {\n\t\t\twhite-space: pre-wrap;\n\t\t}\n\n\t\t.", " + * {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t/*\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\t\tth.", " > .fabric-editor-block-mark {\n\t\t\t> h1:first-of-type,\n\t\t\t> h2:first-of-type,\n\t\t\t> h3:first-of-type,\n\t\t\t> h4:first-of-type,\n\t\t\t> h5:first-of-type,\n\t\t\t> h6:first-of-type {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", ", .", " {\n\t\t\tposition: relative;\n\t\t}\n\t\t/* Give selected cells a blue overlay */\n\t\t.", "::after, .", "::after {\n\t\t\tz-index: ", ";\n\t\t\tposition: absolute;\n\t\t\tcontent: '';\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\ttop: 0;\n\t\t\tbottom: 0;\n\t\t\twidth: 100%;\n\t\t\tpointer-events: none;\n\t\t}\n\t\t.", " {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t.", "::after {\n\t\t\tbackground: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\t\tth.", "::after, td.", "::after {\n\t\t\tbackground: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\t\t// ED-15246: Trello card is visible through a border of a table border\n\t\t/* 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\t\ttd.", ",\n\t\t\ttd.", ",\n\t\t\tth.", ".", ",\n\t\t\tth.", ".", " {\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 100%;\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: -1px;\n\t\t\t\ttop: -1px;\n\t\t\t\tbottom: 0;\n\t\t\t\tz-index: ", ";\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t\t&.", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\t&.", ".", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t// override for DnD controls\n\t.", " {\n\t\tposition: absolute;\n\t\tmargin-top: ", "px;\n\t\tleft: -", "px;\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\t/* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n\t\ttop: ", "px;\n\t\tleft: -", "px;\n\t}\n\n\t.", ".", ",\n\t\t.", ".", " {\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: ", "px;\n\t}\n\n\t.", " .", " {\n\t\tposition: fixed;\n\t\t/* higher zIndex than sticky header which is akEditorTableCellOnStickyHeaderZIndex - 5 */\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tpadding-bottom: 0px;\n\t\t/* fixes gap cursor height */\n\t\toverflow: auto;\n\t\toverflow-y: hidden;\n\t\tposition: relative;\n\n\t\t", "\n\t}\n"])), tableSharedStyle(), columnControlsLineMarker(), hoveredDeleteButton(), hoveredCell(), hoveredWarningCell, ((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.tableDragAndDrop) && insertLine(), resizeHandle((_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.tableDragAndDrop), rangeSelectionStyles, viewModeSortStyles(), ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor, tableBorderColor, tableBorderColor, ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper(), ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper(), dragInsertButtonWrapper(), dragCornerControlButton(), DeleteButton(), 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(), tableStickyHeaderFirefoxFixStyle(), 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, 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$featureFlags3 = props.featureFlags) === null || _props$featureFlags3 === void 0 ? void 0 : _props$featureFlags3.tableDragAndDrop), stickyScrollbarStyles(props.featureFlags), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tablePadding, ClassName.DRAG_ROW_CONTROLS_WRAPPER, 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(), rowControlsWrapperDotStyle(), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker("\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, tableBorderRadiusSize, tableHeaderCellBackgroundColor, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, akEditorTableToolbarSize + akEditorTableNumberColumnWidth + 1, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, tableToolbarDeleteColor, ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker("\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("\n        border-bottom: 1px solid ".concat(tableBorderColor, ";\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)", resizeHandlerZIndex, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE, ClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, ".concat(N0, ")"), ClassName.DRAG_HANDLE_DISABLED, ClassName.DRAG_HANDLE_MINIMISED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-background-accent-gray-subtlest, #F4F5F7)", "var(--ds-icon-disabled, #BFDBF847)", ClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-icon-subtle, #626f86)", "var(--ds-background-accent-blue-subtle, #579DFF)", "var(--ds-icon-inverse, #FFF)", "var(--ds-border-focused, #2684FF)", "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)", floatingColumnControls(), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(), HeaderButtonDanger(), ClassName.NUMBERED_COLUMN, akEditorTableToolbarSize, (_props$featureFlags4 = props.featureFlags) !== null && _props$featureFlags4 !== void 0 && _props$featureFlags4.tableDragAndDrop ? 0 : akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor, relativeFontSizeToBase16(fontSize()), tableHeaderCellBackgroundColor, tableTextColor, tableBorderColor, tableBorderColor, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, white)", ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, tableToolbarSelectedColor, 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, tableBorderSelectedColor, tableToolbarSelectedColor, akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableToolbarDeleteColor, tableBorderDeleteColor, "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, ClassName.SELECTED_CELL, tableCellSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableCellDeleteColor, akEditorUnitZIndex * 100, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL, tableBorderSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), akEditorUnitZIndex * 100, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), akEditorUnitZIndex * 100, ClassName.DRAG_ROW_CONTROLS_WRAPPER, tableMarginTop, tableToolbarSize + 1, rowControlsZIndex + 4, ClassName.ROW_CONTROLS_WRAPPER, tableMarginTop - cornerControlHeight + 1, tableToolbarSize, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tableMarginTop, ClassName.TABLE_STICKY, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, akEditorTableCellOnStickyHeaderZIndex - 4, ClassName.TABLE_NODE_WRAPPER, numberColumnFix());
 };
 
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
 export var tableStyles = function tableStyles(props) {
-  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", "\n  }\n\n  .ProseMirror.", " {\n    .", " {\n      overflow-x: auto;\n      ", ";\n    }\n  }\n\n  .ProseMirror.", " {\n    cursor: col-resize;\n  }\n\n  ", "\n"])), baseTableStyles(props), ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR, shadowSentinelStyles);
+  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", "\n\t}\n\n\t.ProseMirror.", " {\n\t\t.", " {\n\t\t\toverflow-x: auto;\n\t\t\t", ";\n\t\t}\n\t}\n\n\t.ProseMirror.", " {\n\t\tcursor: col-resize;\n\t}\n\n\t", "\n"])), baseTableStyles(props), ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR, shadowSentinelStyles);
 };
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-export var tableFullPageEditorStyles = css(_templateObject7 || (_templateObject7 = _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(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    margin-right: 0;\n    ", ";\n  }\n"])), ClassName.TABLE_NODE_WRAPPER, scrollbarStyles);
+export var tableFullPageEditorStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t.ProseMirror .", " > table {\n\t\tmargin-left: 0;\n\t\t// 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n\t\tmargin-right: -1px;\n\t\twidth: 100%;\n\t}\n"])), ClassName.TABLE_NODE_WRAPPER);
+export var tableCommentEditorStyles = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t.ProseMirror .", " > table {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t\t", ";\n\t}\n"])), ClassName.TABLE_NODE_WRAPPER, scrollbarStyles);