@atlaskit/editor-core 163.0.0 → 164.0.2

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

@@ -5,14 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tableStyles = exports.tableFullPageEditorStyles = exports.tableCommentEditorStyles = exports.deprecatedTableFullPageEditorStyles = exports.deprecatedTableCommentEditorStyles = void 0;
+exports.tableStyles = exports.tableFullPageEditorStyles = exports.tableCommentEditorStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _react = require("@emotion/react");
 
-var _styledComponents = require("styled-components");
-
 var _styles = require("@atlaskit/editor-common/styles");
 
 var _constants = require("@atlaskit/theme/constants");
@@ -29,7 +27,7 @@ var _consts = require("./consts");
 
 var _uiStyles = require("./ui-styles");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3;
 
 var cornerControlHeight = _consts.tableToolbarSize + 1;
 var rangeSelectionStyles = "\n.".concat(_types.TableCssClassName.NODEVIEW_WRAPPER, ".").concat(_editorSharedStyles.akEditorSelectedNodeClassName, " table tbody tr {\n  th,td {\n    ").concat((0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.Border]), "\n  }\n}\n");
@@ -38,16 +36,11 @@ var sentinelStyles = ".".concat(_types.TableCssClassName.TABLE_CONTAINER, " {\n
 var tableStyles = function tableStyles(props) {
   var _props$featureFlags;
 
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " button {\n    background: ", ";\n    color: ", ";\n    cursor: none;\n  }\n\n  .", ":not(.", ") button:hover {\n    background: ", ";\n    color: white !important;\n    cursor: pointer;\n  }\n\n  .ProseMirror {\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n\n    .", " {\n      margin-bottom: 0;\n    }\n\n    .", " {\n      td.", ", th.", " {\n        position: relative;\n        overflow: visible;\n      }\n\n      td.", " {\n        background-color: ", ";\n      }\n    }\n\n    .", " {\n      ", "\n    }\n\n    .", " {\n      ", "\n    }\n\n    /* Delete button*/\n    ", "\n    /* Ends Delete button*/\n\n    /* sticky styles */\n    .", " .", " .", ":first-child {\n      margin-top: ", "px;\n      width: ", "px;\n\n      position: fixed !important;\n      z-index: ", " !important;\n\n      box-shadow: 0px -", "px white;\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: white;\n\n      width: ", "px;\n      height: ", "px;\n    }\n\n    .", ".sticky .", " {\n      border-bottom: 0px none;\n      border-right: 0px none;\n\n      height: ", "px;\n      width: ", "px;\n    }\n\n    .", " .", " {\n      z-index: 0;\n    }\n\n    .", "\n      .", "\n      .", ".sticky {\n      position: fixed !important;\n      z-index: ", " !important;\n      display: flex;\n      border-left: ", "px solid white;\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 green;\n    }\n\n    tr.sticky {\n      padding-top: ", "px;\n      position: fixed;\n      display: grid;\n\n      /* to keep it above cell selection */\n      z-index: ", ";\n\n      overflow-y: visible;\n      overflow-x: hidden;\n\n      grid-auto-flow: column;\n\n      /* background for where controls apply */\n      background: white;\n      box-sizing: content-box;\n\n      margin-top: 2px;\n\n      box-shadow: 0 6px 4px -4px ", ";\n      margin-left: -1px;\n    }\n\n    .", " .", " {\n      left: unset;\n      position: fixed;\n      z-index: ", ";\n    }\n\n    .", ".", "\n      .", " {\n      padding-bottom: ", "px;\n    }\n\n    tr.sticky th {\n      border-bottom: ", "px solid\n        ", ";\n      margin-right: -1px;\n    }\n\n    .", " tr.sticky > th:last-child {\n      border-right-width: 1px;\n    }\n\n    /* add left edge for first cell */\n    .", " tr.sticky > th:first-child {\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: 1px;\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-child {\n      margin-top: ", "px;\n    }\n\n    .", ".sticky {\n      border-top: ", "px solid white;\n    }\n\n    ", "\n    ", "\n\n    .", " .", " {\n      height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n    }\n\n    .less-padding {\n      padding: 0 ", "px;\n\n      .", " {\n        padding: 0 ", "px;\n      }\n\n      &.", "[data-number-column='true'] {\n        padding-left: ", "px;\n      }\n\n      .", " {\n        left: 6px;\n      }\n\n      .", " {\n        left: calc(100% - 6px);\n      }\n    }\n\n    > .", " {\n      /**\n       * Prevent margins collapsing, aids with placing the gap-cursor correctly\n       * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n       *\n       * TODO: Enable this, many tests will fail!\n       * border-top: 1px solid transparent;\n       */\n    }\n\n    /* Breakout only works on top level */\n    > * .", " .", " {\n      margin-left: unset !important;\n      width: 100% !important;\n    }\n\n    ", ";\n\n    /* Corner controls */\n    .", " {\n      width: ", "px;\n      height: ", "px;\n      display: none;\n\n      .", " {\n        position: relative;\n\n        ", ";\n      }\n\n      .", " {\n        position: relative;\n\n        ", ";\n      }\n    }\n\n    .", ".sticky {\n      .", " {\n        /* sticky row insert dot overlaps other row insert and messes things up */\n        display: none !important;\n      }\n    }\n\n    .", " {\n      position: absolute;\n      top: 0;\n      width: ", "px;\n      height: ", "px;\n      border: 1px solid ", ";\n      border-radius: 0;\n      border-top-left-radius: ", "px;\n      background: ", ";\n      box-sizing: border-box;\n      padding: 0;\n      :focus {\n        outline: none;\n      }\n    }\n    .active .", " {\n      border-color: ", ";\n      background: ", ";\n    }\n\n    .", "[data-number-column='true'] {\n      .", ", .", " {\n        width: ", "px;\n      }\n      .", " .", " {\n        border-right-width: 0;\n      }\n    }\n\n    :not(.", ") .", ":hover {\n      border-color: ", ";\n      background: ", ";\n      cursor: pointer;\n    }\n\n    :not(.", ")\n      .", ".", " {\n      border-color: ", ";\n      background: ", ";\n    }\n\n    /* Row controls */\n    .", " {\n      width: ", "px;\n      box-sizing: border-box;\n      display: none;\n      position: relative;\n\n      ", ";\n\n      .", " {\n        display: flex;\n        flex-direction: column;\n      }\n      .", ":last-child > button {\n        border-bottom-left-radius: ", "px;\n      }\n      .", " {\n        position: relative;\n        margin-top: -1px;\n      }\n      .", ":hover,\n        .", ".active,\n        .", ":hover {\n        z-index: ", ";\n      }\n\n      ", "\n    }\n\n    :not(.", ") .", " {\n      ", "\n      ", "\n    }\n\n    /* Numbered column */\n    .", " {\n      position: relative;\n      float: right;\n      margin-left: ", "px;\n      top: ", "px;\n      width: ", "px;\n      box-sizing: border-box;\n    }\n\n    .", " {\n      border: 1px solid ", ";\n      box-sizing: border-box;\n      margin-top: -1px;\n      padding-bottom: 2px;\n      padding: 10px 2px;\n      text-align: center;\n      font-size: ", ";\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n\n      :first-child {\n        margin-top: 0;\n      }\n      :last-child {\n        border-bottom: 1px solid ", ";\n      }\n    }\n\n    .", " {\n      .", ", .", " {\n        display: block;\n      }\n      .", " {\n        padding-left: 1px;\n        .", " {\n          border-left: 0 none;\n        }\n\n        .", ".active {\n          border-bottom: 1px solid ", ";\n          border-color: ", ";\n          background-color: ", ";\n          position: relative;\n          z-index: ", ";\n          color: ", ";\n        }\n      }\n    }\n    :not(.", ") .", " {\n      .", " {\n        cursor: pointer;\n      }\n      .", ":hover {\n        border-bottom: 1px solid ", ";\n        border-color: ", ";\n        background-color: ", ";\n        position: relative;\n        z-index: ", ";\n        color: ", ";\n      }\n      .", ".", " {\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-left: 0;\n        color: ", ";\n        position: relative;\n        z-index: ", ";\n      }\n    }\n\n    /* Table */\n    .", " > table {\n      table-layout: fixed;\n\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-child,\n        > h2:first-child,\n        > h3:first-child,\n        > h4:first-child,\n        > h5:first-child,\n        > h6:first-child {\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        opacity: 0.3;\n        pointer-events: none;\n      }\n      .", " {\n        border: 1px solid ", ";\n      }\n      .", "::after {\n        background: ", ";\n      }\n      th.", "::after,\n        td.", "::after {\n        background: ", ";\n      }\n    }\n    .", " {\n      position: absolute;\n      /* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n      top: ", "px;\n    }\n    .", ".", " {\n      z-index: ", ";\n    }\n    .", " {\n      left: -", "px;\n    }\n    .", " {\n      /*\n      compensating for half of the insert column button\n      that is aligned to the right edge initially on hover of the top right column control when table overflown,\n      its center should be aligned with the edge\n       */\n      padding-right: ", "px;\n      margin-right: -", "px;\n      padding-bottom: ", "px;\n      margin-bottom: -", "px;\n      /* fixes gap cursor height */\n      overflow: auto;\n      position: relative;\n    }\n  }\n\n  .ProseMirror.", " {\n    .", " {\n      overflow-x: auto;\n      ", ";\n    }\n  }\n\n  .ProseMirror.", " {\n    cursor: col-resize;\n  }\n\n  .ProseMirror .pm-table-cell-content-wrap ol[data-child-count='100+'] {\n    padding-left: revert;\n  }\n"])), _types.TableCssClassName.LAYOUT_BUTTON, _colors.N20A, _colors.N300, _types.TableCssClassName.LAYOUT_BUTTON, _types.TableCssClassName.IS_RESIZING, _colors.B300, (0, _styles.tableSharedStyle)(props), (0, _uiStyles.columnControlsLineMarker)(props), _uiStyles.hoveredDeleteButton, _uiStyles.hoveredCell, _uiStyles.hoveredWarningCell, _uiStyles.resizeHandle, rangeSelectionStyles, _types.TableCssClassName.LAST_ITEM_IN_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_CELL, (0, _consts.tableCellBackgroundColor)(props), _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN, _uiStyles.insertColumnButtonWrapper, _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW, _uiStyles.insertRowButtonWrapper, _uiStyles.DeleteButton, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.stickyRowOffsetTop + 2, _editorSharedStyles.akEditorTableNumberColumnWidth, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.stickyRowOffsetTop, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.CORNER_CONTROLS, _editorSharedStyles.akEditorSmallZIndex, _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, _consts.stickyRowOffsetTop, _consts.stickyRowZIndex, _colors.N40A, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.stickyRowZIndex + 1, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tableToolbarSize, _consts.stickyHeaderBorderBottomWidth, (0, _consts.tableBorderColor)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2 + 1, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_CONTROLS, _consts.tableControlsSpacing, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableControlsSpacing + 2, _types.TableCssClassName.CORNER_CONTROLS, _consts.tableControlsSpacing - _consts.tableToolbarSize + 2, (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : '', (0, _uiStyles.OverflowShadow)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tablePadding, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tablePadding, _types.TableCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts.tablePadding - 1, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.NODEVIEW_WRAPPER, _types.TableCssClassName.NODEVIEW_WRAPPER, _types.TableCssClassName.TABLE_CONTAINER, (0, _uiStyles.columnControlsDecoration)(props), _types.TableCssClassName.CORNER_CONTROLS, _consts.tableToolbarSize + 1, cornerControlHeight, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, (0, _uiStyles.InsertMarker)(props, "\n          left: -11px;\n          top: 9px;\n        "), _types.TableCssClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER, (0, _uiStyles.InsertMarker)(props, "\n          right: -1px;\n          top: -12px;\n        "), _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize + 1, _consts.tableToolbarSize + 1, (0, _consts.tableBorderColor)(props), _consts.tableBorderRadiusSize, (0, _consts.tableToolbarColor)(props), _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _editorSharedStyles.akEditorTableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.CONTROLS_BUTTON, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableBorderDeleteColor, _consts.tableToolbarDeleteColor, _types.TableCssClassName.ROW_CONTROLS, _consts.tableToolbarSize, (0, _uiStyles.InsertMarker)(props, "\n        bottom: -1px;\n        left: -11px;\n      "), _types.TableCssClassName.ROW_CONTROLS_INNER, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _consts.tableBorderRadiusSize, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_BUTTON, _editorSharedStyles.akEditorUnitZIndex, (0, _uiStyles.HeaderButton)(props, "\n        border-bottom: 1px solid ".concat((0, _consts.tableBorderColor)(props), ";\n        border-right: 0px;\n        border-radius: 0;\n        height: 100%;\n        width: ").concat(_consts.tableToolbarSize, "px;\n\n        .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, " {\n          position: absolute;\n          width: 30px;\n          height: 50%;\n          right: 0;\n          bottom: 0;\n        }\n        .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, ":first-child {\n          top: 0;\n        }\n      ")), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.ROW_CONTROLS, (0, _uiStyles.HeaderButtonHover)(), (0, _uiStyles.HeaderButtonDanger)(), _types.TableCssClassName.NUMBERED_COLUMN, _editorSharedStyles.akEditorTableToolbarSize - 1, _editorSharedStyles.akEditorTableToolbarSize, _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, (0, _consts.tableBorderColor)(props), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _consts.tableToolbarColor)(props), (0, _consts.tableTextColor)(props), (0, _consts.tableBorderColor)(props), (0, _consts.tableBorderColor)(props), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _editorSharedStyles.akEditorUnitZIndex, _colors.N0, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _editorSharedStyles.akEditorUnitZIndex, _colors.N0, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableToolbarDeleteColor, _consts.tableBorderDeleteColor, _colors.R500, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.SELECTED_CELL, _consts.tableBorderSelectedColor, _types.TableCssClassName.SELECTED_CELL, _consts.tableCellSelectedColor, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableCellDeleteColor, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _styles.tableMarginTop - cornerControlHeight + 1, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_NODE_WRAPPER, _consts.tableInsertColumnButtonSize / 2, _consts.tableInsertColumnButtonSize / 2, _consts.tableScrollbarOffset, _consts.tableScrollbarOffset, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_NODE_WRAPPER, _styles2.scrollbarStyles, _types.TableCssClassName.RESIZE_CURSOR);
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " button {\n    background: ", ";\n    color: ", ";\n    cursor: none;\n  }\n\n  .", ":not(.", ") button:hover {\n    background: ", ";\n    color: white !important;\n    cursor: pointer;\n  }\n\n  .ProseMirror {\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n\n    .", " {\n      margin-bottom: 0;\n    }\n\n    .", " {\n      td.", ", th.", " {\n        position: relative;\n        overflow: visible;\n      }\n\n      td.", " {\n        background-color: ", ";\n      }\n    }\n\n    .", " {\n      ", "\n    }\n\n    .", " {\n      ", "\n    }\n\n    /* Delete button */\n    ", "\n    /* Ends Delete button */\n\n    /* sticky styles */\n    .", " .", " .", ":first-child {\n      margin-top: ", "px;\n      width: ", "px;\n\n      position: fixed !important;\n      z-index: ", " !important;\n\n      box-shadow: 0px -", "px white;\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: white;\n\n      width: ", "px;\n      height: ", "px;\n    }\n\n    .", ".sticky .", " {\n      border-bottom: 0px none;\n      border-right: 0px none;\n\n      height: ", "px;\n      width: ", "px;\n    }\n\n    .", " .", " {\n      z-index: 0;\n    }\n\n    .", "\n      .", "\n      .", ".sticky {\n      position: fixed !important;\n      z-index: ", " !important;\n      display: flex;\n      border-left: ", "px solid white;\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 green;\n    }\n\n    tr.sticky {\n      padding-top: ", "px;\n      position: fixed;\n      display: grid;\n\n      /* to keep it above cell selection */\n      z-index: ", ";\n\n      overflow-y: visible;\n      overflow-x: hidden;\n\n      grid-auto-flow: column;\n\n      /* background for where controls apply */\n      background: white;\n      box-sizing: content-box;\n\n      margin-top: 2px;\n\n      box-shadow: 0 6px 4px -4px ", ";\n      margin-left: -1px;\n    }\n\n    .", " .", " {\n      left: unset;\n      position: fixed;\n      z-index: ", ";\n    }\n\n    .", ".", "\n      .", " {\n      padding-bottom: ", "px;\n    }\n\n    tr.sticky th {\n      border-bottom: ", "px solid\n        ", ";\n      margin-right: -1px;\n    }\n\n    .", " tr.sticky > th:last-child {\n      border-right-width: 1px;\n    }\n\n    /* add left edge for first cell */\n    .", " tr.sticky > th:first-child {\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: 1px;\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-child {\n      margin-top: ", "px;\n    }\n\n    .", ".sticky {\n      border-top: ", "px solid white;\n    }\n\n    ", "\n    ", "\n\n    .", " .", " {\n      height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n    }\n\n    .less-padding {\n      padding: 0 ", "px;\n\n      .", " {\n        padding: 0 ", "px;\n      }\n\n      &.", "[data-number-column='true'] {\n        padding-left: ", "px;\n      }\n\n      .", " {\n        left: 6px;\n      }\n\n      .", " {\n        left: calc(100% - 6px);\n      }\n    }\n\n    > .", " {\n      /**\n       * Prevent margins collapsing, aids with placing the gap-cursor correctly\n       * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n       *\n       * TODO: Enable this, many tests will fail!\n       * border-top: 1px solid transparent;\n       */\n    }\n\n    /* Breakout only works on top level */\n    > * .", " .", " {\n      margin-left: unset !important;\n      width: 100% !important;\n    }\n\n    ", ";\n\n    /* Corner controls */\n    .", " {\n      width: ", "px;\n      height: ", "px;\n      display: none;\n\n      .", " {\n        position: relative;\n\n        ", ";\n      }\n\n      .", " {\n        position: relative;\n\n        ", ";\n      }\n    }\n\n    .", ".sticky {\n      .", " {\n        /* sticky row insert dot overlaps other row insert and messes things up */\n        display: none !important;\n      }\n    }\n\n    .", " {\n      position: absolute;\n      top: 0;\n      width: ", "px;\n      height: ", "px;\n      border: 1px solid ", ";\n      border-radius: 0;\n      border-top-left-radius: ", "px;\n      background: ", ";\n      box-sizing: border-box;\n      padding: 0;\n      :focus {\n        outline: none;\n      }\n    }\n    .active .", " {\n      border-color: ", ";\n      background: ", ";\n    }\n\n    .", "[data-number-column='true'] {\n      .", ", .", " {\n        width: ", "px;\n      }\n      .", " .", " {\n        border-right-width: 0;\n      }\n    }\n\n    :not(.", ") .", ":hover {\n      border-color: ", ";\n      background: ", ";\n      cursor: pointer;\n    }\n\n    :not(.", ")\n      .", ".", " {\n      border-color: ", ";\n      background: ", ";\n    }\n\n    /* Row controls */\n    .", " {\n      width: ", "px;\n      box-sizing: border-box;\n      display: none;\n      position: relative;\n\n      ", ";\n\n      .", " {\n        display: flex;\n        flex-direction: column;\n      }\n      .", ":last-child > button {\n        border-bottom-left-radius: ", "px;\n      }\n      .", " {\n        position: relative;\n        margin-top: -1px;\n      }\n      .", ":hover,\n        .", ".active,\n        .", ":hover {\n        z-index: ", ";\n      }\n\n      ", "\n    }\n\n    :not(.", ") .", " {\n      ", "\n      ", "\n    }\n\n    /* Numbered column */\n    .", " {\n      position: relative;\n      float: right;\n      margin-left: ", "px;\n      top: ", "px;\n      width: ", "px;\n      box-sizing: border-box;\n    }\n\n    .", " {\n      border: 1px solid ", ";\n      box-sizing: border-box;\n      margin-top: -1px;\n      padding-bottom: 2px;\n      padding: 10px 2px;\n      text-align: center;\n      font-size: ", ";\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n\n      :first-child {\n        margin-top: 0;\n      }\n      :last-child {\n        border-bottom: 1px solid ", ";\n      }\n    }\n\n    .", " {\n      .", ", .", " {\n        display: block;\n      }\n      .", " {\n        padding-left: 1px;\n        .", " {\n          border-left: 0 none;\n        }\n\n        .", ".active {\n          border-bottom: 1px solid ", ";\n          border-color: ", ";\n          background-color: ", ";\n          position: relative;\n          z-index: ", ";\n          color: ", ";\n        }\n      }\n    }\n    :not(.", ") .", " {\n      .", " {\n        cursor: pointer;\n      }\n      .", ":hover {\n        border-bottom: 1px solid ", ";\n        border-color: ", ";\n        background-color: ", ";\n        position: relative;\n        z-index: ", ";\n        color: ", ";\n      }\n      .", ".", " {\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-left: 0;\n        color: ", ";\n        position: relative;\n        z-index: ", ";\n      }\n    }\n\n    /* Table */\n    .", " > table {\n      table-layout: fixed;\n\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-child,\n        > h2:first-child,\n        > h3:first-child,\n        > h4:first-child,\n        > h5:first-child,\n        > h6:first-child {\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        opacity: 0.3;\n        pointer-events: none;\n      }\n      .", " {\n        border: 1px solid ", ";\n      }\n      .", "::after {\n        background: ", ";\n      }\n      th.", "::after,\n        td.", "::after {\n        background: ", ";\n      }\n    }\n    .", " {\n      position: absolute;\n      /* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n      top: ", "px;\n    }\n    .", ".", " {\n      z-index: ", ";\n    }\n    .", " {\n      left: -", "px;\n    }\n    .", " {\n      /*\n      compensating for half of the insert column button\n      that is aligned to the right edge initially on hover of the top right column control when table overflown,\n      its center should be aligned with the edge\n       */\n      padding-right: ", "px;\n      margin-right: -", "px;\n      padding-bottom: ", "px;\n      margin-bottom: -", "px;\n      /* fixes gap cursor height */\n      overflow: auto;\n      position: relative;\n    }\n  }\n\n  .ProseMirror.", " {\n    .", " {\n      overflow-x: auto;\n      ", ";\n    }\n  }\n\n  .ProseMirror.", " {\n    cursor: col-resize;\n  }\n\n  .ProseMirror .pm-table-cell-content-wrap ol[data-child-count='100+'] {\n    padding-left: revert;\n  }\n"])), _types.TableCssClassName.LAYOUT_BUTTON, _colors.N20A, _colors.N300, _types.TableCssClassName.LAYOUT_BUTTON, _types.TableCssClassName.IS_RESIZING, _colors.B300, (0, _styles.tableSharedStyle)(props), (0, _uiStyles.columnControlsLineMarker)(props), _uiStyles.hoveredDeleteButton, _uiStyles.hoveredCell, _uiStyles.hoveredWarningCell, _uiStyles.resizeHandle, rangeSelectionStyles, _types.TableCssClassName.LAST_ITEM_IN_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_CELL, (0, _consts.tableCellBackgroundColor)(props), _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN, _uiStyles.insertColumnButtonWrapper, _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW, _uiStyles.insertRowButtonWrapper, _uiStyles.DeleteButton, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.stickyRowOffsetTop + 2, _editorSharedStyles.akEditorTableNumberColumnWidth, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.stickyRowOffsetTop, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.CORNER_CONTROLS, _editorSharedStyles.akEditorSmallZIndex, _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, _consts.stickyRowOffsetTop, _consts.stickyRowZIndex, _colors.N40A, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.stickyRowZIndex + 1, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tableToolbarSize, _consts.stickyHeaderBorderBottomWidth, (0, _consts.tableBorderColor)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2 + 1, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_CONTROLS, _consts.tableControlsSpacing, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableControlsSpacing + 2, _types.TableCssClassName.CORNER_CONTROLS, _consts.tableControlsSpacing - _consts.tableToolbarSize + 2, (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : '', (0, _uiStyles.OverflowShadow)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tablePadding, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tablePadding, _types.TableCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts.tablePadding - 1, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.NODEVIEW_WRAPPER, _types.TableCssClassName.NODEVIEW_WRAPPER, _types.TableCssClassName.TABLE_CONTAINER, (0, _uiStyles.columnControlsDecoration)(props), _types.TableCssClassName.CORNER_CONTROLS, _consts.tableToolbarSize + 1, cornerControlHeight, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, (0, _uiStyles.InsertMarker)(props, "\n          left: -11px;\n          top: 9px;\n        "), _types.TableCssClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER, (0, _uiStyles.InsertMarker)(props, "\n          right: -1px;\n          top: -12px;\n        "), _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize + 1, _consts.tableToolbarSize + 1, (0, _consts.tableBorderColor)(props), _consts.tableBorderRadiusSize, (0, _consts.tableToolbarColor)(props), _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _editorSharedStyles.akEditorTableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.CONTROLS_BUTTON, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableBorderDeleteColor, _consts.tableToolbarDeleteColor, _types.TableCssClassName.ROW_CONTROLS, _consts.tableToolbarSize, (0, _uiStyles.InsertMarker)(props, "\n        bottom: -1px;\n        left: -11px;\n      "), _types.TableCssClassName.ROW_CONTROLS_INNER, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _consts.tableBorderRadiusSize, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_BUTTON, _editorSharedStyles.akEditorUnitZIndex, (0, _uiStyles.HeaderButton)(props, "\n        border-bottom: 1px solid ".concat((0, _consts.tableBorderColor)(props), ";\n        border-right: 0px;\n        border-radius: 0;\n        height: 100%;\n        width: ").concat(_consts.tableToolbarSize, "px;\n\n        .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, " {\n          position: absolute;\n          width: 30px;\n          height: 50%;\n          right: 0;\n          bottom: 0;\n        }\n        .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, ":first-child {\n          top: 0;\n        }\n      ")), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.ROW_CONTROLS, (0, _uiStyles.HeaderButtonHover)(), (0, _uiStyles.HeaderButtonDanger)(), _types.TableCssClassName.NUMBERED_COLUMN, _editorSharedStyles.akEditorTableToolbarSize - 1, _editorSharedStyles.akEditorTableToolbarSize, _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, (0, _consts.tableBorderColor)(props), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _consts.tableToolbarColor)(props), (0, _consts.tableTextColor)(props), (0, _consts.tableBorderColor)(props), (0, _consts.tableBorderColor)(props), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _editorSharedStyles.akEditorUnitZIndex, _colors.N0, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _editorSharedStyles.akEditorUnitZIndex, _colors.N0, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableToolbarDeleteColor, _consts.tableBorderDeleteColor, _colors.R500, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.SELECTED_CELL, _consts.tableBorderSelectedColor, _types.TableCssClassName.SELECTED_CELL, _consts.tableCellSelectedColor, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableCellDeleteColor, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _styles.tableMarginTop - cornerControlHeight + 1, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_NODE_WRAPPER, _consts.tableInsertColumnButtonSize / 2, _consts.tableInsertColumnButtonSize / 2, _consts.tableScrollbarOffset, _consts.tableScrollbarOffset, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_NODE_WRAPPER, _styles2.scrollbarStyles, _types.TableCssClassName.RESIZE_CURSOR);
 };
 
 exports.tableStyles = tableStyles;
 var tableFullPageEditorStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    margin-right: 0;\n    width: 100%;\n  }\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER);
 exports.tableFullPageEditorStyles = tableFullPageEditorStyles;
-var deprecatedTableFullPageEditorStyles = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    margin-right: 0;\n    width: 100%;\n  }\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER);
-exports.deprecatedTableFullPageEditorStyles = deprecatedTableFullPageEditorStyles;
-var tableCommentEditorStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    margin-right: 0;\n    ", ";\n  }\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER, _styles2.scrollbarStyles); // TODO remove this after migrated off styled-component
-
-exports.tableCommentEditorStyles = tableCommentEditorStyles;
-var deprecatedTableCommentEditorStyles = (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    margin-right: 0;\n    ", ";\n  }\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER, _styles2.scrollbarStyles);
-exports.deprecatedTableCommentEditorStyles = deprecatedTableCommentEditorStyles;
+var tableCommentEditorStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    margin-right: 0;\n    ", ";\n  }\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER, _styles2.scrollbarStyles);
+exports.tableCommentEditorStyles = tableCommentEditorStyles;

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

@@ -5,6 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.isHeaderRowRequired = isHeaderRowRequired;
 exports.unwrapContentFromTable = exports.transformSliceToRemoveOpenTable = exports.transformSliceToFixHardBreakProblemOnCopyFromCell = exports.transformSliceToCorrectEmptyTableCells = exports.removeTableFromLastChild = exports.removeTableFromFirstChild = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
@@ -15,6 +16,8 @@ var _prosemirrorUtils = require("prosemirror-utils");
 
 var _slice = require("../../../utils/slice");
 
+var _pluginFactory = require("../pm-plugins/plugin-factory");
+
 // lifts up the content of each cell, returning an array of nodes
 var unwrapContentFromTable = function unwrapContentFromTable(maybeTable) {
   var schema = maybeTable.type.schema;
@@ -65,7 +68,7 @@ var transformSliceToFixHardBreakProblemOnCopyFromCell = function transformSliceT
       table = _schema$nodes2.table,
       hardBreak = _schema$nodes2.hardBreak;
   var emptyParagraphNode = paragraph.createAndFill();
-  var hardBreakNode = hardBreak.createAndFill();
+  var hardBreakNode = hardBreak === null || hardBreak === void 0 ? void 0 : hardBreak.createAndFill();
   var paragraphNodeSize = emptyParagraphNode ? emptyParagraphNode.nodeSize : 0;
   var hardBreakNodeSize = hardBreakNode ? hardBreakNode.nodeSize : 0;
   var paragraphWithHardBreakSize = paragraphNodeSize + hardBreakNodeSize;
@@ -123,4 +126,9 @@ var transformSliceToCorrectEmptyTableCells = function transformSliceToCorrectEmp
   });
 };
 
-exports.transformSliceToCorrectEmptyTableCells = transformSliceToCorrectEmptyTableCells;
+exports.transformSliceToCorrectEmptyTableCells = transformSliceToCorrectEmptyTableCells;
+
+function isHeaderRowRequired(state) {
+  var tableState = (0, _pluginFactory.getPluginState)(state);
+  return tableState && tableState.pluginConfig.isHeaderRowRequired;
+}

package/dist/cjs/plugins/tasks-and-decisions/commands.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isSupportedSourceNode = exports.insertTaskDecisionWithAnalytics = exports.insertTaskDecision = exports.getListTypes = exports.createListAtSelection = exports.changeInDepth = void 0;
-
-var _prosemirrorCommands = require("prosemirror-commands");
+exports.isSupportedSourceNode = exports.insertTaskDecisionWithAnalytics = exports.insertTaskDecisionCommand = exports.insertTaskDecisionAction = exports.insertTaskDecision = exports.getListTypes = exports.createListAtSelection = exports.changeInDepth = void 0;
 
 var _prosemirrorModel = require("prosemirror-model");
 
@@ -23,6 +21,8 @@ var _gapCursorSelection = require("../selection/gap-cursor-selection");
 
 var _pluginKey = require("./pm-plugins/plugin-key");
 
+var _autojoin = require("../../utils/prosemirror/autojoin");
+
 var getContextData = function getContextData() {
   var contextProvider = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var objectId = contextProvider.objectId,
@@ -83,6 +83,10 @@ var getListTypes = function getListTypes(listType, schema) {
     item: decisionItem
   };
 };
+/*
+ * @deprecated - [ED-13182] insertTaskDecision has been depreciated in favor of insertTaskDecisionCommand
+ */
+
 
 exports.getListTypes = getListTypes;
 
@@ -90,7 +94,18 @@ var insertTaskDecision = function insertTaskDecision(view, listType) {
   var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _analytics.INPUT_METHOD.TOOLBAR;
   var listLocalId = arguments.length > 3 ? arguments[3] : undefined;
   var itemLocalId = arguments.length > 4 ? arguments[4] : undefined;
-  var state = view.state;
+  // eslint-disable-next-line no-console
+  console.warn('insertTaskDecision has been depreciated in favor of insertTaskDecisionCommand');
+  return insertTaskDecisionCommand(listType, inputMethod, undefined, listLocalId, itemLocalId);
+};
+
+exports.insertTaskDecision = insertTaskDecision;
+
+var insertTaskDecisionAction = function insertTaskDecisionAction(state, listType) {
+  var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _analytics.INPUT_METHOD.TOOLBAR;
+  var addItem = arguments.length > 3 ? arguments[3] : undefined;
+  var listLocalId = arguments.length > 4 ? arguments[4] : undefined;
+  var itemLocalId = arguments.length > 5 ? arguments[5] : undefined;
   var schema = state.schema;
 
   var addAndCreateList = function addAndCreateList(_ref) {
@@ -118,21 +133,36 @@ var insertTaskDecision = function insertTaskDecision(view, listType) {
     }]).setSelection(new _prosemirrorState.TextSelection(tr.doc.resolve(newItemParagraphPos)));
   };
 
-  var tr = insertTaskDecisionWithAnalytics(state, listType, inputMethod, addAndCreateList, addToList, listLocalId, itemLocalId);
-  return (0, _prosemirrorCommands.autoJoin)(function (state, dispatch) {
-    if (tr) {
-      if (dispatch) {
-        dispatch(tr);
-      }
+  var addAndCreateListFn = addItem !== null && addItem !== void 0 ? addItem : addAndCreateList;
+  var tr = insertTaskDecisionWithAnalytics(state, listType, inputMethod, addAndCreateListFn, addToList, listLocalId, itemLocalId);
 
-      return true;
+  if (!tr) {
+    return state.tr;
+  }
+
+  (0, _autojoin.autoJoinTr)(tr, ['taskList', 'decisionList']);
+  return tr;
+};
+
+exports.insertTaskDecisionAction = insertTaskDecisionAction;
+
+var insertTaskDecisionCommand = function insertTaskDecisionCommand(listType) {
+  var inputMethod = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _analytics.INPUT_METHOD.TOOLBAR;
+  var addItem = arguments.length > 2 ? arguments[2] : undefined;
+  var listLocalId = arguments.length > 3 ? arguments[3] : undefined;
+  var itemLocalId = arguments.length > 4 ? arguments[4] : undefined;
+  return function (state, dispatch) {
+    var tr = insertTaskDecisionAction(state, listType, inputMethod, addItem, listLocalId, itemLocalId);
+
+    if (dispatch) {
+      dispatch(tr);
     }
 
-    return false;
-  }, ['taskList', 'decisionList']);
+    return true;
+  };
 };
 
-exports.insertTaskDecision = insertTaskDecision;
+exports.insertTaskDecisionCommand = insertTaskDecisionCommand;
 
 var insertTaskDecisionWithAnalytics = function insertTaskDecisionWithAnalytics(state, listType, inputMethod, addAndCreateList, addToList, listLocalId, itemLocalId) {
   var schema = state.schema;

package/dist/cjs/plugins/tasks-and-decisions/index.js

@@ -9,9 +9,7 @@ exports.default = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _adfSchema = require("@atlaskit/adf-schema");
 
@@ -35,24 +33,23 @@ var _ToolbarTask = _interopRequireDefault(require("./ui/ToolbarTask"));
 
 var _templateObject;
 
-var TaskDecisionToolbarGroup = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
-
-var quickInsertItem = function quickInsertItem(insert, state, listType) {
-  var _getListTypes = (0, _commands.getListTypes)(listType, state.schema),
-      list = _getListTypes.list,
-      item = _getListTypes.item;
+var taskDecisionToolbarGroup = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
 
-  var addItem = function addItem(_ref) {
+var addItem = function addItem(insert, listType, schema) {
+  return function (_ref) {
     var listLocalId = _ref.listLocalId,
         itemLocalId = _ref.itemLocalId;
+
+    var _getListTypes = (0, _commands.getListTypes)(listType, schema),
+        list = _getListTypes.list,
+        item = _getListTypes.item;
+
     return insert(list.createChecked({
       localId: listLocalId
     }, item.createChecked({
       localId: itemLocalId
     })));
   };
-
-  return (0, _commands.insertTaskDecisionWithAnalytics)(state, listType, _analytics.INPUT_METHOD.QUICK_INSERT, addItem);
 };
 
 var tasksAndDecisionsPlugin = function tasksAndDecisionsPlugin() {
@@ -107,11 +104,13 @@ var tasksAndDecisionsPlugin = function tasksAndDecisionsPlugin() {
     secondaryToolbarComponent: function secondaryToolbarComponent(_ref6) {
       var editorView = _ref6.editorView,
           disabled = _ref6.disabled;
-      return /*#__PURE__*/_react.default.createElement(TaskDecisionToolbarGroup, null, /*#__PURE__*/_react.default.createElement(_ToolbarDecision.default, {
+      return (0, _react.jsx)("div", {
+        css: taskDecisionToolbarGroup
+      }, (0, _react.jsx)(_ToolbarDecision.default, {
         editorView: editorView,
         isDisabled: disabled,
         isReducedSpacing: true
-      }), /*#__PURE__*/_react.default.createElement(_ToolbarTask.default, {
+      }), (0, _react.jsx)(_ToolbarTask.default, {
         editorView: editorView,
         isDisabled: disabled,
         isReducedSpacing: true
@@ -128,10 +127,10 @@ var tasksAndDecisionsPlugin = function tasksAndDecisionsPlugin() {
           keywords: ['checkbox', 'task', 'todo'],
           keyshortcut: '[]',
           icon: function icon() {
-            return /*#__PURE__*/_react.default.createElement(_assets.IconAction, null);
+            return (0, _react.jsx)(_assets.IconAction, null);
           },
           action: function action(insert, state) {
-            return quickInsertItem(insert, state, 'taskList');
+            return (0, _commands.insertTaskDecisionAction)(state, 'taskList', _analytics.INPUT_METHOD.QUICK_INSERT, addItem(insert, 'taskList', state.schema));
           }
         }, {
           id: 'decision',
@@ -140,10 +139,10 @@ var tasksAndDecisionsPlugin = function tasksAndDecisionsPlugin() {
           priority: 900,
           keyshortcut: '<>',
           icon: function icon() {
-            return /*#__PURE__*/_react.default.createElement(_assets.IconDecision, null);
+            return (0, _react.jsx)(_assets.IconDecision, null);
           },
           action: function action(insert, state) {
-            return quickInsertItem(insert, state, 'decisionList');
+            return (0, _commands.insertTaskDecisionAction)(state, 'decisionList', _analytics.INPUT_METHOD.QUICK_INSERT, addItem(insert, 'decisionList', state.schema));
           }
         }];
       }

package/dist/cjs/plugins/tasks-and-decisions/pm-plugins/input-rules.js

@@ -20,7 +20,20 @@ var _commands = require("../commands");
 
 var createListRule = function createListRule(regex, listType) {
   return (0, _inputRules.createRule)(regex, function (state, _match, start, end) {
-    var insertTr = (0, _commands.insertTaskDecisionWithAnalytics)(state, listType, _analytics.INPUT_METHOD.FORMATTING, addItem(start, end));
+    var paragraph = state.schema.nodes.paragraph;
+
+    var _getListTypes = (0, _commands.getListTypes)(listType, state.schema),
+        list = _getListTypes.list;
+
+    var $end = state.doc.resolve(end);
+    var $endOfParent = state.doc.resolve($end.after()); // Only allow creating list in nodes that support them.
+    // Parent must be a paragraph as we don't want this applying to headings
+
+    if ($end.parent.type !== paragraph || !(0, _prosemirrorUtils.canInsert)($endOfParent, list.createAndFill())) {
+      return null;
+    }
+
+    var insertTr = (0, _commands.insertTaskDecisionAction)(state, listType, _analytics.INPUT_METHOD.FORMATTING, addItem(start, end));
     return insertTr;
   });
 };
@@ -35,9 +48,7 @@ var addItem = function addItem(start, end) {
         itemLocalId = _ref.itemLocalId;
     var $from = state.selection.$from,
         schema = state.schema;
-    var _schema$nodes = schema.nodes,
-        paragraph = _schema$nodes.paragraph,
-        hardBreak = _schema$nodes.hardBreak;
+    var hardBreak = schema.nodes.hardBreak;
     var content = $from.node($from.depth).content;
     var shouldBreakNode = false;
     content.forEach(function (node, offset) {
@@ -45,13 +56,6 @@ var addItem = function addItem(start, end) {
         shouldBreakNode = true;
       }
     });
-    var $end = state.doc.resolve(end);
-    var $endOfParent = state.doc.resolve($end.after()); // Only allow creating list in nodes that support them.
-    // Parent must be a paragraph as we don't want this applying to headings
-
-    if ($end.parent.type !== paragraph || !(0, _prosemirrorUtils.canInsert)($endOfParent, list.createAndFill())) {
-      return null;
-    }
 
     if (!shouldBreakNode) {
       tr.replaceRangeWith($from.before(), $from.after(), list.create({
@@ -75,11 +79,11 @@ var addItem = function addItem(start, end) {
 
 function inputRulePlugin(schema, featureFlags) {
   var rules = [];
-  var _schema$nodes2 = schema.nodes,
-      decisionList = _schema$nodes2.decisionList,
-      decisionItem = _schema$nodes2.decisionItem,
-      taskList = _schema$nodes2.taskList,
-      taskItem = _schema$nodes2.taskItem;
+  var _schema$nodes = schema.nodes,
+      decisionList = _schema$nodes.decisionList,
+      decisionItem = _schema$nodes.decisionItem,
+      taskList = _schema$nodes.taskList,
+      taskItem = _schema$nodes.taskItem;
 
   if (decisionList && decisionItem) {
     rules.push(createListRule(new RegExp("(^|".concat(_prosemirrorInputRules.leafNodeReplacementCharacter, ")\\<\\>\\s$")), 'decisionList'));

package/dist/cjs/plugins/tasks-and-decisions/ui/ToolbarDecision/index.js

@@ -68,7 +68,7 @@ var ToolbarDecision = /*#__PURE__*/function (_PureComponent) {
         return false;
       }
 
-      (0, _commands.insertTaskDecision)(editorView, 'decisionList')(editorView.state, editorView.dispatch);
+      (0, _commands.insertTaskDecisionCommand)('decisionList')(editorView.state, editorView.dispatch);
       return true;
     });
     return _this;

package/dist/cjs/plugins/tasks-and-decisions/ui/ToolbarTask/index.js

@@ -68,7 +68,7 @@ var ToolbarTask = /*#__PURE__*/function (_PureComponent) {
         return false;
       }
 
-      (0, _commands.insertTaskDecision)(editorView, 'taskList')(editorView.state, editorView.dispatch);
+      (0, _commands.insertTaskDecisionCommand)('taskList')(editorView.state, editorView.dispatch);
       return true;
     });
     return _this;

package/dist/cjs/plugins/text-color/ui/ToolbarTextColor/index.js

@@ -25,6 +25,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _reactIntlNext = require("react-intl-next");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -185,7 +187,10 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
         fitWidth = 242;
       }
 
-      return /*#__PURE__*/_react.default.createElement(_styles.MenuWrapper, null, /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
+      var selectedColor = pluginState.color !== pluginState.defaultColor && pluginState.color;
+      return (0, _react2.jsx)("span", {
+        css: _styles.wrapperStyle
+      }, (0, _react2.jsx)(_Dropdown.default, {
         mountTo: popupsMountPoint,
         boundariesElement: popupsBoundariesElement,
         scrollableElement: popupsScrollableElement,
@@ -194,7 +199,7 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
         handleEscapeKeydown: this.hide,
         zIndex: _editorSharedStyles.akEditorMenuZIndex,
         fitWidth: fitWidth,
-        trigger: /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
+        trigger: (0, _react2.jsx)(_ToolbarButton.default, {
           buttonId: _ToolbarButton.TOOLBAR_BUTTON.TEXT_COLOR,
           spacing: isReducedSpacing ? 'none' : 'default',
           disabled: disabled || pluginState.disabled,
@@ -204,22 +209,29 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
           "aria-haspopup": true,
           title: labelTextColor,
           onClick: this.toggleOpen,
-          iconBefore: /*#__PURE__*/_react.default.createElement(_styles.TriggerWrapper, null, /*#__PURE__*/_react.default.createElement(_styles2.TextColorIconWrapper, null, /*#__PURE__*/_react.default.createElement(_icon.EditorTextColorIcon, null), /*#__PURE__*/_react.default.createElement(_styles2.TextColorIconBar, {
-            selectedColor: pluginState.color !== pluginState.defaultColor && pluginState.color,
-            gradientColors: pluginState.disabled ? _styles2.disabledRainbow : _styles2.rainbow
-          })), /*#__PURE__*/_react.default.createElement(_styles.ExpandIconWrapper, null, /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
+          iconBefore: (0, _react2.jsx)("div", {
+            css: _styles.triggerWrapperStyles
+          }, (0, _react2.jsx)("div", {
+            css: _styles2.textColorIconWrapper
+          }, (0, _react2.jsx)(_icon.EditorTextColorIcon, null), (0, _react2.jsx)("div", {
+            css: [_styles2.textColorIconBar, selectedColor ? "background: ".concat(selectedColor, ";") : pluginState.disabled && _styles2.backgroundDisabled]
+          })), (0, _react2.jsx)("span", {
+            css: _styles.expandIconWrapperStyle
+          }, (0, _react2.jsx)(_chevronDown.default, {
             label: ""
           })))
         })
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, (0, _react2.jsx)("div", {
         "data-testid": "text-color-palette"
-      }, /*#__PURE__*/_react.default.createElement(_ColorPalette.default, {
+      }, (0, _react2.jsx)(_ColorPalette.default, {
         palette: palette,
         onClick: function onClick(color) {
           return _this2.changeTextColor(color, pluginState.disabled);
         },
         selectedColor: pluginState.color
-      }))), /*#__PURE__*/_react.default.createElement(_styles.Separator, null));
+      }))), (0, _react2.jsx)("span", {
+        css: _styles.separatorStyles
+      }));
     }
   }, {
     key: "getCommonAnalyticsAttributes",

package/dist/cjs/plugins/text-color/ui/ToolbarTextColor/styles.js

@@ -7,39 +7,22 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.rainbow = exports.disabledRainbow = exports.TextColorIconWrapper = exports.TextColorIconBar = void 0;
+exports.textColorIconWrapper = exports.textColorIconBar = exports.backgroundDisabled = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var TextColorIconWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
-
-exports.TextColorIconWrapper = TextColorIconWrapper;
-
-var TextColorIconBar = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 16px;\n  margin: auto;\n  width: 12px;\n  height: 3px;\n  border-radius: ", ";\n\n  ", ";\n"])), (0, _constants.borderRadius)() + 'px', function (_ref) {
-  var gradientColors = _ref.gradientColors,
-      selectedColor = _ref.selectedColor;
-
-  if (selectedColor) {
-    return "background: ".concat(selectedColor);
-  }
-
-  return "background: ".concat(gradientColors);
-});
-
-exports.TextColorIconBar = TextColorIconBar;
-
 var createSteppedRainbow = function createSteppedRainbow(colors) {
   return "\n    linear-gradient(\n      to right,\n      ".concat(colors.map(function (color, i) {
     var inc = 100 / colors.length;
@@ -58,6 +41,10 @@ var createSteppedRainbow = function createSteppedRainbow(colors) {
 };
 
 var rainbow = createSteppedRainbow([colors.P300, colors.T300, colors.Y400, colors.R400]);
-exports.rainbow = rainbow;
 var disabledRainbow = createSteppedRainbow([colors.N80, colors.N60, colors.N40, colors.N60]);
-exports.disabledRainbow = disabledRainbow;
+var textColorIconWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
+exports.textColorIconWrapper = textColorIconWrapper;
+var textColorIconBar = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 16px;\n  margin: auto;\n  width: 12px;\n  height: 3px;\n  border-radius: ", ";\n  background: ", ";\n"])), (0, _constants.borderRadius)() + 'px', rainbow);
+exports.textColorIconBar = textColorIconBar;
+var backgroundDisabled = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n"])), disabledRainbow);
+exports.backgroundDisabled = backgroundDisabled;

package/dist/cjs/plugins/text-formatting/ui/Toolbar/hooks/clear-formatting-icon.js

@@ -1,13 +1,13 @@
 "use strict";
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useClearIcon = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
+
+var _react2 = require("@emotion/react");
 
 var _styles = require("../../../../../ui/styles");
 
@@ -21,10 +21,7 @@ var _keymaps = require("../../../../../keymaps");
 
 var _enums = require("../../../../analytics/types/enums");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
+/** @jsx jsx */
 var clearFormattingToolbar = (0, _clearFormatting.clearFormattingWithAnalytics)(_enums.INPUT_METHOD.TOOLBAR);
 
 var useClearFormattingPluginState = function useClearFormattingPluginState(editorState) {
@@ -49,7 +46,9 @@ var useClearIcon = function useClearIcon(_ref) {
       key: 'clearFormatting',
       command: clearFormattingToolbar,
       content: clearFormattingLabel,
-      elemAfter: /*#__PURE__*/_react.default.createElement(_styles.Shortcut, null, (0, _keymaps.tooltip)(_keymaps.clearFormatting)),
+      elemAfter: (0, _react2.jsx)("div", {
+        css: _styles.shortcutStyle
+      }, (0, _keymaps.tooltip)(_keymaps.clearFormatting)),
       value: {
         name: 'clearFormatting'
       },