@atlaskit/renderer 113.2.0 → 113.2.2

package/dist/esm/ui/Renderer/RendererStyleContainer.js

@@ -0,0 +1,1362 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _css, _css3;
+/* eslint-disable @atlaskit/ui-styling-standard/no-important-styles */
+/* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
+/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css, jsx } from '@emotion/react';
+import { B300, B400, B500, N20, N200, N30A, N40A, N60A, N800, R50, R500, Y300, Y75 } from '@atlaskit/theme/colors';
+import { getGlobalTheme } from '@atlaskit/tokens';
+import { FullPagePadding, rendererStyles } from './style';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { RendererCssClassName } from '../../consts';
+import { akEditorBlockquoteBorderColor, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableBorder, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, blockNodesVerticalMargin, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
+import { INLINE_IMAGE_WRAPPER_CLASS_NAME } from '@atlaskit/editor-common/media-inline';
+import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
+import { CodeBlockSharedCssClassName, DateSharedCssClassName, listItemCounterPadding, richMediaClassName, SmartCardSharedCssClassName, tableCellBorderWidth, tableCellMinWidth, tableCellPadding, tableMarginTop, TableSharedCssClassName, TaskDecisionSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { bulletListSelector, orderedListSelector } from '@atlaskit/adf-schema';
+import { shadowClassNames, shadowObserverClassNames } from '@atlaskit/editor-common/ui';
+import { browser } from '@atlaskit/editor-common/browser';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { isStickyScrollbarEnabled, isTableResizingEnabled } from '../../react/nodes/table';
+import { SORTABLE_COLUMN_ICON_CLASSNAME } from '@atlaskit/editor-common/table';
+import { LightWeightCodeBlockCssClassName } from '../../react/nodes/codeBlock/components/lightWeightCodeBlock';
+import { editorUGCToken } from '@atlaskit/editor-common/ugc-tokens';
+import { getBaseFontSize } from './get-base-font-size';
+var wrappedMediaBreakoutPoint = 410;
+var TELEPOINTER_ID = 'ai-streaming-telepointer';
+var tableShadowWidth = 32;
+var LAYOUT_BREAKPOINT_RENDERER = 629;
+// originally defined from packages/editor/editor-plugin-table/src/ui/common-styles.ts
+// TODO: tableRowHeight can be moved into `@atlaskit/editor-common/table`
+var tableRowHeight = 44;
+var _getGlobalTheme = getGlobalTheme(),
+  typography = _getGlobalTheme.typography;
+var isBackgroundClipBrowserFixNeeded = function isBackgroundClipBrowserFixNeeded() {
+  return browser.isGecko || browser.isIE || browser.isMac && browser.isChrome;
+};
+
+// styles are copied from ./style.tsx
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage
+var baseStyles = css((_css = {
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  fontSize: 'var(--ak-renderer-base-font-size)',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: '1.5rem',
+  color: "var(--ds-text, ".concat(N800, ")")
+}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_css, ".".concat(RendererCssClassName.DOCUMENT, "::after"), {
+  // we add a clearfix after ak-renderer-document in order to
+  // contain internal floats (such as media images that are "wrap-left")
+  // to just the renderer (and not spill outside of it)
+  content: '""',
+  visibility: 'hidden',
+  display: 'block',
+  height: 0,
+  clear: 'both'
+}), ".".concat(RendererCssClassName.DOCUMENT), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(INLINE_IMAGE_WRAPPER_CLASS_NAME), {
+  height: '22px',
+  transform: "translateY(-2px)"
+}), "h1", _defineProperty({}, "> .mediaInlineView-content-wrap > .".concat(INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n  > :is(a, span[data-mark-type='border']) .mediaInlineView-content-wrap > .").concat(INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n  > .").concat(INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n  > :is(a, span[data-mark-type='border']) .").concat(INLINE_IMAGE_WRAPPER_CLASS_NAME), {
+  height: '36px',
+  transform: "translateY(-3px)"
+})), "h2", _defineProperty({}, "> .mediaInlineView-content-wrap > .".concat(INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n  > :is(a, span[data-mark-type='border']) .mediaInlineView-content-wrap > .").concat(INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n  > .").concat(INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n  > :is(a, span[data-mark-type='border']) .").concat(INLINE_IMAGE_WRAPPER_CLASS_NAME), {
+  height: '31px',
+  transform: "translateY(-3px)"
+})), "h3", _defineProperty({}, "> .mediaInlineView-content-wrap > .".concat(INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n  > :is(a, span[data-mark-type='border']) .mediaInlineView-content-wrap > .").concat(INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n  > .").concat(INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n  > :is(a, span[data-mark-type='border']) .").concat(INLINE_IMAGE_WRAPPER_CLASS_NAME), {
+  height: '25px',
+  transform: "translateY(-2px)"
+})), "h4", _defineProperty({}, "> .mediaInlineView-content-wrap > .".concat(INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n  > :is(a, span[data-mark-type='border']) .mediaInlineView-content-wrap > .").concat(INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n  > .").concat(INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n  > :is(a, span[data-mark-type='border']) .").concat(INLINE_IMAGE_WRAPPER_CLASS_NAME), {
+  height: '23px',
+  transform: "translateY(-2px)"
+})), "h5", _defineProperty({}, "> .mediaInlineView-content-wrap > .".concat(INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n  > :is(a, span[data-mark-type='border']) .mediaInlineView-content-wrap > .").concat(INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n  > .").concat(INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n  > :is(a, span[data-mark-type='border']) .").concat(INLINE_IMAGE_WRAPPER_CLASS_NAME), {
+  height: '20px',
+  transform: "translateY(-2px)"
+})), "h6", _defineProperty({}, "> .mediaInlineView-content-wrap > .".concat(INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n  > :is(a, span[data-mark-type='border']) .mediaInlineView-content-wrap > .").concat(INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n  > .").concat(INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n  > :is(a, span[data-mark-type='border']) .").concat(INLINE_IMAGE_WRAPPER_CLASS_NAME), {
+  height: '18px',
+  transform: "translateY(-2px)"
+}))), '& h1, & h2, & h3, & h4, & h5, & h6', _defineProperty(_defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
+  position: 'absolute',
+  marginLeft: "var(--ds-space-075, 6px)",
+  button: {
+    paddingLeft: 0,
+    paddingRight: 0
+  },
+  /**
+   * Adds the visibility of the button when in focus through keyboard navigation.
+   */
+  'button:focus': {
+    opacity: 1,
+    transform: 'none !important'
+  }
+}), "@media (hover: hover) and (pointer: fine)", _defineProperty(_defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
+  '> button': {
+    opacity: 0,
+    transform: "translate(-8px, 0px)",
+    transition: "opacity 0.2s ease 0s, transform 0.2s ease 0s"
+  }
+}), '&:hover', _defineProperty({}, ".".concat(HeadingAnchorWrapperClassName, " > button"), {
+  opacity: 1,
+  transform: 'none !important'
+})))), '& h1', _defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: "".concat(28 / 24, "em")
+})), '& h2', _defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: "".concat(24 / 20, "em")
+})), '& h3', _defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: "".concat(20 / 16, "em")
+})), '& h4', _defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: "".concat(16 / 14, "em")
+})), '& h5', _defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: "".concat(16 / 12, "em")
+})), '& h6', _defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: "".concat(16 / 11, "em")
+})), "& span.akActionMark", {
+  color: "var(--ds-link, ".concat(B400, ")"),
+  textDecoration: 'none',
+  cursor: 'pointer',
+  '&:hover': {
+    color: "var(--ds-link, ".concat(B300, ")"),
+    textDecoration: 'underline'
+  },
+  '&:active': {
+    color: "var(--ds-link-pressed, ".concat(B500, ")")
+  }
+}), _defineProperty(_css, '& span[data-placeholder]', {
+  color: "var(--ds-text-subtlest, ".concat(N200, ")")
+})));
+var rendererFullPageStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  maxWidth: "".concat(akEditorDefaultLayoutWidth, "px"),
+  margin: '0 auto',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  padding: "0 ".concat(FullPagePadding, "px")
+});
+var rendererFullWidthStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  maxWidth: "".concat(akEditorFullWidthLayoutWidth, "px"),
+  margin: "0 auto",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.fabric-editor-breakout-mark:not([data-has-width="true"]), .ak-renderer-extension': {
+    width: '100% !important'
+  }
+});
+var rendererFullWidthStylesForTableResizing = css({
+  '.pm-table-container': {
+    width: '100% !important'
+  }
+});
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+var telepointerStyles = css(_defineProperty({}, "#".concat(TELEPOINTER_ID), {
+  display: 'inline-block',
+  position: 'relative',
+  width: '1.5px',
+  height: '25px',
+  backgroundColor: "var(--ds-background-brand-bold, #0C66E4)",
+  marginLeft: "var(--ds-space-025, 2px)",
+  '&::after': {
+    content: '"AI"',
+    position: 'absolute',
+    display: 'block',
+    top: 0,
+    left: 0,
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    fontSize: '10px',
+    fontWeight: "var(--ds-font-weight-bold, 700)",
+    width: '12.5px',
+    height: '13px',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    paddingTop: '1px',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    paddingLeft: '1.5px',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: 'initial',
+    borderRadius: '0px 2px 2px 0px',
+    color: "var(--ds-text-inverse, white)",
+    backgroundColor: "var(--ds-background-brand-bold, #0C66E4)"
+  }
+}));
+var whitespaceSharedStyles = css({
+  wordWrap: 'break-word',
+  whiteSpace: 'pre-wrap'
+});
+var blockquoteSharedStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& blockquote': {
+    boxSizing: 'border-box',
+    color: 'inherit',
+    width: '100%',
+    display: 'inline-block',
+    paddingLeft: "var(--ds-space-200, 16px)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    borderLeft: "2px solid ".concat("var(--ds-border, ".concat(akEditorBlockquoteBorderColor, ")")),
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    margin: "".concat(blockNodesVerticalMargin, " 0 0 0"),
+    marginRight: 0,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    "[dir='rtl'] &": {
+      paddingLeft: 0,
+      paddingRight: "var(--ds-space-200, 16px)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '&:first-child': {
+      marginTop: 0
+    },
+    '&::before': {
+      content: "''"
+    },
+    '&::after': {
+      content: 'none'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '& p': {
+      display: 'block'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '& table, & table:last-child': {
+      display: 'inline-table'
+    },
+    // Workaround for overriding the inline-block display on last child of a blockquote set in CSS reset.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> .code-block:last-child, >.mediaSingleView-content-wrap:last-child, >.mediaGroupView-content-wrap:last-child': {
+      display: 'block'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '> .extensionView-content-wrap:last-child': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+      display: "".concat(editorExperiment('platform_editor_nested_non_bodied_macros', 'test')) ? 'block' : 'inline-block'
+    }
+  }
+});
+var headingsSharedStyles = css({
+  '& h1': {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    fontSize: "".concat(24 / 14, "em"),
+    fontStyle: 'inherit',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: 28 / 24,
+    color: "var(--ds-text, #172B4D)",
+    fontWeight: "var(--ds-font-weight-medium, 500)",
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    letterSpacing: "-0.01em",
+    marginBottom: 0,
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    marginTop: '1.667em'
+  },
+  '& h2': {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    fontSize: "".concat(20 / 14, "em"),
+    fontStyle: 'inherit',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: 24 / 20,
+    color: "var(--ds-text, #172B4D)",
+    fontWeight: "var(--ds-font-weight-medium, 500)",
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    letterSpacing: "-0.008em",
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    marginTop: '1.8em',
+    marginBottom: 0
+  },
+  '& h3': {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    fontSize: "".concat(16 / 14, "em"),
+    fontStyle: 'inherit',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: 20 / 16,
+    color: "var(--ds-text, #172B4D)",
+    fontWeight: "var(--ds-font-weight-semibold, 600)",
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    letterSpacing: "-0.006em",
+    marginTop: "var(--ds-space-400, 2em)",
+    marginBottom: 0
+  },
+  '& h4': {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    fontSize: "".concat(14 / 14, "em"),
+    fontStyle: 'inherit',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: 16 / 14,
+    color: "var(--ds-text, #172B4D)",
+    fontWeight: "var(--ds-font-weight-semibold, 600)",
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    letterSpacing: "-0.003em",
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    marginTop: '1.357em'
+  },
+  '& h5': {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    fontSize: "".concat(12 / 14, "em"),
+    fontStyle: 'inherit',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: 16 / 12,
+    color: "var(--ds-text, #172B4D)",
+    fontWeight: "var(--ds-font-weight-semibold, 600)",
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    marginTop: '1.667em',
+    textTransform: 'none'
+  },
+  '& h6': {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    fontSize: "".concat(11 / 14, "em"),
+    fontStyle: 'inherit',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: 16 / 11,
+    color: "var(--ds-text-subtlest, #626F86)",
+    fontWeight: "var(--ds-font-weight-bold, 700)",
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    marginTop: '1.455em',
+    textTransform: 'none'
+  }
+});
+
+// TODO: emotion refactor - check if we need UGC token?
+var headingsSharedStylesWithEditorUGC = css({
+  '& h1': {
+    font: editorUGCToken('editor.font.heading.h1', typography),
+    marginBottom: 0,
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    marginTop: '1.45833em',
+    '& strong': {
+      fontWeight: editorUGCToken('editor.font.weight.heading.h1.bold', typography)
+    },
+    '&::before': {}
+  },
+  '& h2': {
+    font: editorUGCToken('editor.font.heading.h2', typography),
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    marginTop: '1.4em',
+    marginBottom: 0,
+    '& strong': {
+      fontWeight: editorUGCToken('editor.font.weight.heading.h1.bold', typography)
+    }
+  },
+  '& h3': {
+    font: editorUGCToken('editor.font.heading.h3', typography),
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    marginTop: '1.31249em',
+    marginBottom: 0,
+    '& strong': {
+      fontWeight: editorUGCToken('editor.font.weight.heading.h1.bold', typography)
+    }
+  },
+  '& h4': {
+    font: editorUGCToken('editor.font.heading.h4', typography),
+    marginTop: "var(--ds-space-250, 1.25em)",
+    '& strong': {
+      fontWeight: editorUGCToken('editor.font.weight.heading.h1.bold', typography)
+    }
+  },
+  '& h5': {
+    font: editorUGCToken('editor.font.heading.h5', typography),
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    marginTop: '1.45833em',
+    textTransform: 'none',
+    '& strong': {
+      fontWeight: editorUGCToken('editor.font.weight.heading.h1.bold', typography)
+    }
+  },
+  '& h6': {
+    font: editorUGCToken('editor.font.heading.h6', typography),
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    marginTop: '1.59091em',
+    textTransform: 'none',
+    '& strong': {
+      fontWeight: editorUGCToken('editor.font.weight.heading.h1.bold', typography)
+    }
+  }
+});
+var headingWithAlignmentStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.fabric-editor-block-mark.fabric-editor-alignment:not(:first-child)': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> h1:first-child': {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+      marginTop: '1.667em'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    ' > h2:first-child': {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+      marginTop: '1.8em'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> h3:first-child': {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+      marginTop: '2em'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> h4:first-child': {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+      marginTop: '1.357em'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> h5:first-child': {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+      marginTop: '1.667em'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> h6:first-child': {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+      marginTop: '1.455em'
+    }
+  },
+  // Set marginTop: 0 if alignment block is next to a gap cursor or widget that is first child
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.ProseMirror-gapcursor:first-child + .fabric-editor-block-mark.fabric-editor-alignment, .ProseMirror-widget:first-child + .fabric-editor-block-mark.fabric-editor-alignment, .ProseMirror-widget:first-child + .ProseMirror-widget:nth-child(2) + .fabric-editor-block-mark.fabric-editor-alignment': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> :is(h1, h2, h3, h4, h5, h6):first-child': {
+      marginTop: '0'
+    }
+  }
+});
+var ruleSharedStyles = css({
+  '& hr': {
+    border: 'none',
+    backgroundColor: "var(--ds-border, #091E4224)",
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    margin: "".concat(akEditorLineHeight, "em 0"),
+    height: '2px',
+    borderRadius: '1px'
+  }
+});
+var paragraphSharedStylesWithEditorUGC = css({
+  '& p': {
+    font: editorUGCToken('editor.font.body', typography),
+    marginTop: blockNodesVerticalMargin,
+    marginBottom: 0
+  }
+});
+var paragraphSharedStyles = css({
+  '& p': {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    fontSize: '1em',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: akEditorLineHeight,
+    fontWeight: "var(--ds-font-weight-regular, 400)",
+    marginTop: blockNodesVerticalMargin,
+    marginBottom: 0,
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    letterSpacing: '-0.005em'
+  }
+});
+var listsSharedStyles = css((_css3 = {
+  /* =============== INDENTATION SPACING ========= */
+  'ul, ol': {
+    boxSizing: 'border-box',
+    paddingLeft: "var(--ed--list--item-counter--padding, ".concat(listItemCounterPadding, "px)")
+  }
+}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_css3, "".concat(orderedListSelector, ", ").concat(bulletListSelector), {
+  /*
+      Ensures list item content adheres to the list's margin instead
+      of filling the entire block row. This is important to allow
+      clicking interactive elements which are floated next to a list.
+       For some history and context on this block, see PRs related to tickets.:
+      @see ED-6551 - original issue.
+      @see ED-7015 - follow up issue.
+      @see ED-7447 - flow-root change.
+    used to have display: 'table' in tag template style but not supported in object styles
+   removed display: 'table' as 'flow-root' is supported in latest browsers
+       @see https://css-tricks.com/display-flow-root/
+    */
+  display: 'flow-root'
+}), 'ul, ul ul ul ul', {
+  listStyleType: 'disc'
+}), 'ul ul, ul ul ul ul ul', {
+  listStyleType: 'circle'
+}), 'ul ul ul, ul ul ul ul ul ul', {
+  listStyleType: 'square'
+}), 'ol, ol ol ol ol', {
+  listStyleType: 'decimal'
+}), 'ol ol, ol ol ol ol ol', {
+  listStyleType: 'lower-alpha'
+}), 'ol ol ol, ol ol ol ol ol ol', {
+  listStyleType: 'lower-roman'
+}), 'ol[data-indent-level="1"], ol[data-indent-level="4"]', {
+  listStyleType: 'decimal'
+}), 'ol[data-indent-level="2"], ol[data-indent-level="5"]', {
+  listStyleType: 'lower-alpha'
+}), 'ol[data-indent-level="3"], ol[data-indent-level="6"]', {
+  listStyleType: 'lower-roman'
+}), _defineProperty(_defineProperty(_defineProperty(_css3, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
+  listStyleType: 'disc'
+}), 'ul[data-indent-level="2"], ul[data-indent-level="5"]', {
+  listStyleType: 'circle'
+}), 'ul[data-indent-level="3"], ul[data-indent-level="6"]', {
+  listStyleType: 'square'
+})));
+
+/*
+	Firefox does not handle empty block element inside li tag.
+	If there is not block element inside li tag,
+	then firefox sets inherited height to li
+	However, if there is any block element and if it's empty
+	(or has empty inline element) then
+	firefox sets li tag height to zero.
+	More details at
+	https://product-fabric.atlassian.net/wiki/spaces/~455502413/pages/3149365890/ED-14110+Investigation
+*/
+var listsSharedStylesForGekko = css({
+  'ul, ol': {
+    'li p:empty, li p > span:empty': {
+      display: 'inline-block'
+    }
+  }
+});
+var indentationSharedStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.fabric-editor-indentation-mark': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    "&[data-level='1']": {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+      marginLeft: '30px'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    "&[data-level='2']": {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+      marginLeft: '60px'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    "&[data-level='3']": {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+      marginLeft: '90px'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    "&[data-level='4']": {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+      marginLeft: '120px'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    "&[data-level='5']": {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+      marginLeft: '150px'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    "&[data-level='6']": {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+      marginLeft: '180px'
+    }
+  }
+});
+var blockMarksSharedStyles = css(_defineProperty({}, "*:not(.fabric-editor-block-mark) >,\n  \t*:not(.fabric-editor-block-mark) >\n    div.fabric-editor-block-mark:first-of-type\n\t:not(.fabric-editor-indentation-mark)\n\t:not(.fabric-editor-alignment),\n  \t.fabric-editor-alignment:first-of-type:first-child,\n  \t.ProseMirror .fabric-editor-indentation-mark:first-of-type:first-child", {
+  'p, h1, h2, h3, h4, h5, h6, .heading-wrapper': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    ':first-child:not(style), style:first-child + *': {
+      marginTop: 0
+    }
+  }
+}));
+var codeMarkSharedStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.code': {
+    '--ds--code--bg-color': "var(--ds-background-neutral, #091E420F)",
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    fontSize: '0.875em',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+    fontWeight: "var(--ds-font-weight-regular, 400)",
+    backgroundColor: "var(--ds--code--bg-color,".concat("var(--ds-background-neutral, ".concat(N20, ")"), ")"),
+    color: "var(--ds-text, ".concat(N800, ")"),
+    borderStyle: 'none',
+    borderRadius: "var(--ds-border-radius, 3px)",
+    display: 'inline',
+    padding: '2px 0.5ch',
+    boxDecorationBreak: 'clone',
+    overflow: 'auto',
+    overflowWrap: 'break-word',
+    whiteSpace: 'pre-wrap'
+  }
+});
+var shadowSharedStyle = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "& .".concat(shadowClassNames.RIGHT_SHADOW, "::before, .").concat(shadowClassNames.RIGHT_SHADOW, "::after, .").concat(shadowClassNames.LEFT_SHADOW, "::before, .").concat(shadowClassNames.LEFT_SHADOW, "::after"), {
+  display: 'none',
+  position: 'absolute',
+  pointerEvents: 'none',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  zIndex: akEditorShadowZIndex,
+  width: '8px',
+  content: "''",
+  height: 'calc(100%)'
+}), "& .".concat(shadowClassNames.RIGHT_SHADOW, ", .").concat(shadowClassNames.LEFT_SHADOW), {
+  position: 'relative'
+}), "& .".concat(shadowClassNames.LEFT_SHADOW, "::before"), {
+  background: "linear-gradient( to left, transparent 0, ".concat("var(--ds-shadow-overflow-spread, #091e4229)", " 140% ), linear-gradient( to right, ", "var(--ds-shadow-overflow-perimeter, transparent)", " 0px, transparent 1px )"),
+  top: '0px',
+  left: 0,
+  display: 'block'
+}), "& .".concat(shadowClassNames.RIGHT_SHADOW, "::after"), {
+  background: "linear-gradient( to right, transparent 0, ".concat("var(--ds-shadow-overflow-spread, #091e4229)", " 140% ), linear-gradient( to left, ", "var(--ds-shadow-overflow-perimeter, transparent)", " 0px, transparent 1px )"),
+  right: '0px',
+  top: '0px',
+  display: 'block'
+}), "& .".concat(shadowObserverClassNames.SENTINEL_LEFT), {
+  height: '100%',
+  width: '0px',
+  minWidth: '0px'
+}), "& .".concat(shadowObserverClassNames.SENTINEL_RIGHT), {
+  height: '100%',
+  width: '0px',
+  minWidth: '0px'
+}));
+var dateSharedStyle = css(_defineProperty({}, ".".concat(DateSharedCssClassName.DATE_WRAPPER, " span"), {
+  whiteSpace: 'unset'
+}));
+var textColorStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.fabric-text-color-mark': {
+    color: 'var(--custom-palette-color, inherit)'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  'a .fabric-text-color-mark': {
+    color: 'unset'
+  }
+});
+var backgroundColorStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.fabric-background-color-mark': {
+    backgroundColor: 'var(--custom-palette-color, inherit)',
+    borderRadius: '2px',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    paddingTop: '1px',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    paddingBottom: '2px',
+    boxDecorationBreak: 'clone'
+  },
+  // Don't show text highlight styling when there is a hyperlink
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  'a .fabric-background-color-mark': {
+    backgroundColor: 'unset'
+  },
+  // Don't show text highlight styling when there is an inline comment
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.fabric-background-color-mark .ak-editor-annotation': {
+    backgroundColor: 'unset'
+  }
+});
+var tasksAndDecisionsStyles = css({
+  '.ProseMirror': _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".taskItemView-content-wrap,\n\t\t.".concat(TaskDecisionSharedCssClassName.DECISION_CONTAINER), {
+    position: 'relative',
+    minWidth: "".concat(akEditorTableCellMinWidth, "px")
+  }), ".".concat(TaskDecisionSharedCssClassName.DECISION_CONTAINER), {
+    marginTop: 0
+  }), ".".concat(TaskDecisionSharedCssClassName.TASK_CONTAINER), {
+    'span[contenteditable="false"]': {
+      height: "".concat(akEditorLineHeight, "em")
+    }
+  }), ".".concat(TaskDecisionSharedCssClassName.TASK_ITEM), {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: akEditorLineHeight
+  }),
+  'div[data-task-local-id]': {
+    'span[contenteditable="false"]': {
+      height: "".concat(akEditorLineHeight, "em")
+    },
+    'span[contenteditable="false"] + div': {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+      lineHeight: "".concat(akEditorLineHeight, "em")
+    }
+  },
+  'div[data-task-list-local-id]': {
+    margin: "var(--ds-space-150, 12px)".concat(" 0 0 0"),
+    // If task item is not first in the list then set margin top to 4px.
+    'div + div': {
+      marginTop: "var(--ds-space-050, 4px)"
+    }
+  },
+  // If task list is not first in the document then set margin top to 4px.
+  'div[data-task-list-local-id] div[data-task-list-local-id]': {
+    marginTop: "var(--ds-space-050, 4px)",
+    marginLeft: "var(--ds-space-300, 24px)"
+  },
+  /* When action list is inside panel */
+  '.ak-editor-panel__content': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> div[data-task-list-local-id]:first-child': {
+      margin: '0 0 0 0 !important'
+    }
+  }
+});
+var smartCardStyles = css(_defineProperty({}, ".".concat(SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER), {
+  display: 'block',
+  margin: "".concat(blockNodesVerticalMargin, " 0 0"),
+  maxWidth: "".concat(8 * 95, "px")
+}));
+var baseOtherStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  '& .UnknownBlock': {
+    fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    fontSize: "".concat(14 / 16, "rem"),
+    fontWeight: "var(--ds-font-weight-regular, 400)",
+    whiteSpace: 'pre-wrap',
+    wordWrap: 'break-word'
+  },
+  '& span.date-node': {
+    background: "var(--ds-background-neutral, ".concat(N30A, ")"),
+    borderRadius: "var(--ds-border-radius-100, 3px)",
+    color: "var(--ds-text, ".concat(N800, ")"),
+    padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)"),
+    margin: "0 1px",
+    transition: "background 0.3s"
+  },
+  '& span.date-node-highlighted': {
+    background: "var(--ds-background-danger, ".concat(R50, ")"),
+    color: "var(--ds-text-danger, ".concat(R500, ")")
+  },
+  '& .renderer-image': {
+    maxWidth: '100%',
+    display: 'block',
+    margin: "var(--ds-space-300, 24px)".concat(" 0")
+  }
+}, ".".concat(richMediaClassName, ".rich-media-wrapped + .").concat(richMediaClassName, ":not(.rich-media-wrapped)"), {
+  clear: 'both'
+}), "& .code-block,\n\t& blockquote,\n\t& hr,\n\t& > div > div:not(.rich-media-wrapped),\n\t.".concat(richMediaClassName, ".rich-media-wrapped + .rich-media-wrapped + *:not(.rich-media-wrapped),\n\t.").concat(richMediaClassName, ".rich-media-wrapped + div:not(.rich-media-wrapped),\n\t.").concat(richMediaClassName, ".image-align-start,\n\t\t.").concat(richMediaClassName, ".image-center,\n\t\t.").concat(richMediaClassName, ".image-align-end"), {
+  clear: 'both'
+}), '& .rich-media-wrapped', {
+  '& + h1, & + h2, & + h3, & + h4, & + h5, & + h6': {
+    marginTop: "var(--ds-space-100, 8px)"
+  }
+}), 'div[class^="image-wrap-"] + div[class^="image-wrap-"]', {
+  marginLeft: 0,
+  marginRight: 0
+}), ".".concat(RendererCssClassName.DOCUMENT, " >"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "*:not([data-mark-type='fragment']) .".concat(TableSharedCssClassName.TABLE_CONTAINER), {
+  // TODO - improve inline style logic on table container so important styles aren't required here
+  width: '100% !important',
+  left: '0 !important'
+}), "[data-mark-type='fragment'] * .".concat(TableSharedCssClassName.TABLE_CONTAINER), {
+  // TODO - improve inline style logic on table container so important styles aren't required here
+  width: '100% !important',
+  left: '0 !important'
+}), "* .".concat(RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER), {
+  overflowX: 'auto'
+}), "& .".concat(RendererCssClassName.EXTENSION, ":first-child"), {
+  marginTop: 0
+})), ".".concat(RendererCssClassName.DOCUMENT), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(RendererCssClassName.EXTENSION), {
+  marginTop: "".concat(blockNodesVerticalMargin)
+}), ".".concat(RendererCssClassName.EXTENSION_CENTER_ALIGN), {
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginLeft: '50%',
+  transform: 'translateX(-50%)'
+}), ".".concat(TableSharedCssClassName.TABLE_NODE_WRAPPER), {
+  overflowX: 'auto'
+}), ".".concat(shadowObserverClassNames.SHADOW_CONTAINER, " .").concat(TableSharedCssClassName.TABLE_NODE_WRAPPER), {
+  display: 'flex'
+})));
+var alignedHeadingAnchorStyle = css({
+  // TODO Delete this comment after verifying space token -> previous value `margin: 6px`
+  '.fabric-editor-block-mark[data-align] >': {
+    'h1, h2, h3, h4, h5, h6': {
+      position: 'relative'
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.fabric-editor-block-mark:not([data-align="center"])[data-align]': _defineProperty(_defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
+    margin: "0 ".concat("var(--ds-space-075, 6px)", " 0 0"),
+    // If the anchor is right aligned then the left side of the heading
+    // is aligned with the left side of the anchor.
+    // In order to align as expected we transform it the width of the element (plus our expected 6px)
+    // to the left
+    transform: "translateX(calc(-100% - ".concat("var(--ds-space-075, 6px)", "))")
+  }), '@media (hover: hover) and (pointer: fine)', _defineProperty({}, ".".concat(HeadingAnchorWrapperClassName, " > button"), {
+    transform: "translate(8px, 0px)"
+  }))
+});
+
+// TODO: emotion refactor - there's a mediaSingleSharedNewStyle, but not originally used in the renderer.
+var mediaSingleSharedStyle = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "li .".concat(richMediaClassName), {
+  margin: 0
+}), '&.ua-chrome li > .mediaSingleView-content-wrap::before', {
+  content: "''",
+  display: 'block',
+  height: 0
+}), '&.ua-firefox', {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.mediaSingleView-content-wrap': {
+    userSelect: 'none'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.captionView-content-wrap': {
+    userSelect: 'text'
+  }
+}), ".mediaSingleView-content-wrap[layout='center']", {
+  clear: 'both'
+}), "table .".concat(richMediaClassName), {
+  marginTop: "var(--ds-space-150, 12px)",
+  marginBottom: "var(--ds-space-150, 12px)",
+  clear: 'both',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.image-wrap-left[data-layout], &.image-wrap-right[data-layout]': {
+    clear: 'none',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '&:first-child': {
+      marginTop: "var(--ds-space-150, 12px)"
+    }
+  }
+}), ".".concat(richMediaClassName, ".image-wrap-right + .").concat(richMediaClassName, ".image-wrap-left"), {
+  clear: 'both'
+}), ".".concat(richMediaClassName, ".image-wrap-left + .").concat(richMediaClassName, ".image-wrap-right, .").concat(richMediaClassName, ".image-wrap-right + .").concat(richMediaClassName, ".image-wrap-left, .").concat(richMediaClassName, ".image-wrap-left + .").concat(richMediaClassName, ".image-wrap-left, .").concat(richMediaClassName, ".image-wrap-right + .").concat(richMediaClassName, ".image-wrap-right"), {
+  marginRight: 0,
+  marginLeft: 0
+}), "@media all and (max-width: ".concat(wrappedMediaBreakoutPoint, "px)"), {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  "div.mediaSingleView-content-wrap[layout='wrap-left'], div.mediaSingleView-content-wrap[data-layout='wrap-left'], div.mediaSingleView-content-wrap[layout='wrap-right'], div.mediaSingleView-content-wrap[data-layout='wrap-right']": {
+    float: 'none',
+    overflow: 'auto',
+    margin: "var(--ds-space-150, 12px)".concat(" 0")
+  }
+}));
+
+// was shared between editor-core and renderer
+var tableSharedStyle = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  // originally from packages/editor/editor-common/src/styles/shared/tableCell.ts
+  // Hardcoding the background color for the table cells to avoid the use of inline styles
+  'td[colorname="white" i], th[colorname="white" i]': {
+    backgroundColor: "var(--ds-surface, #FFFFFF)".concat(" !important")
+  },
+  'td[colorname="light blue" i], th[colorname="light blue" i]': {
+    backgroundColor: "var(--ds-background-accent-blue-subtlest, #DEEBFF)".concat(" !important")
+  },
+  'td[colorname="light teal" i], th[colorname="light teal" i]': {
+    backgroundColor: "var(--ds-background-accent-teal-subtlest, #E6FCFF)".concat(" !important")
+  },
+  'td[colorname="light green" i], th[colorname="light green" i]': {
+    backgroundColor: "var(--ds-background-accent-green-subtlest, #E3FCEF)".concat(" !important")
+  },
+  'td[colorname="light yellow" i], th[colorname="light yellow" i]': {
+    backgroundColor: "var(--ds-background-accent-yellow-subtlest, #FFFAE6)".concat(" !important")
+  },
+  'td[colorname="light red" i], th[colorname="light red" i]': {
+    backgroundColor: "var(--ds-background-accent-red-subtlest, #FFEBE6)".concat(" !important")
+  },
+  'td[colorname="light purple" i], th[colorname="light purple" i]': {
+    backgroundColor: "var(--ds-background-accent-purple-subtlest, #EAE6FF)".concat(" !important")
+  },
+  'td[colorname="light gray" i], th[colorname="light gray" i]': {
+    backgroundColor: "var(--ds-background-accent-gray-subtlest, #F4F5F7)".concat(" !important")
+  },
+  'td[colorname="blue" i], th[colorname="blue" i]': {
+    backgroundColor: "var(--ds-background-accent-blue-subtler, #B3D4FF)".concat(" !important")
+  },
+  'td[colorname="teal" i], th[colorname="teal" i]': {
+    backgroundColor: "var(--ds-background-accent-teal-subtler, #B3F5FF)".concat(" !important")
+  },
+  'td[colorname="green" i], th[colorname="green" i]': {
+    backgroundColor: "var(--ds-background-accent-green-subtler, #ABF5D1)".concat(" !important")
+  },
+  'td[colorname="yellow" i], th[colorname="yellow" i]': {
+    backgroundColor: "var(--ds-background-accent-yellow-subtler, #FFF0B3)".concat(" !important")
+  },
+  'td[colorname="red" i], th[colorname="red" i]': {
+    backgroundColor: "var(--ds-background-accent-red-subtler, #FFBDAD)".concat(" !important")
+  },
+  'td[colorname="purple" i], th[colorname="purple" i]': {
+    backgroundColor: "var(--ds-background-accent-purple-subtler, #C0B6F2)".concat(" !important")
+  },
+  'td[colorname="gray" i], th[colorname="gray" i]': {
+    backgroundColor: "var(--ds-background-accent-gray-subtle, #B3BAC5)".concat(" !important")
+  },
+  'td[colorname="dark blue" i], th[colorname="dark blue" i]': {
+    backgroundColor: "var(--ds-background-accent-blue-subtle, #4C9AFF)".concat(" !important")
+  },
+  'td[colorname="dark teal" i], th[colorname="dark teal" i]': {
+    backgroundColor: "var(--ds-background-accent-teal-subtle, #79E2F2)".concat(" !important")
+  },
+  'td[colorname="dark green" i], th[colorname="dark green" i]': {
+    backgroundColor: "var(--ds-background-accent-green-subtle, #57D9A3)".concat(" !important")
+  },
+  'td[colorname="dark yellow" i], th[colorname="dark yellow" i]': {
+    backgroundColor: "var(--ds-background-accent-orange-subtle, #FFC400)".concat(" !important")
+  },
+  'td[colorname="dark red" i], th[colorname="dark red" i]': {
+    backgroundColor: "var(--ds-background-accent-red-subtle, #FF8F73)".concat(" !important")
+  },
+  'td[colorname="dark purple" i], th[colorname="dark purple" i]': {
+    backgroundColor: "var(--ds-background-accent-purple-subtle, #998DD9)".concat(" !important")
+  }
+}, ".".concat(TableSharedCssClassName.TABLE_CONTAINER), {
+  position: 'relative',
+  margin: "0 auto ".concat("var(--ds-space-200, 16px)"),
+  boxSizing: 'border-box',
+  /**
+   * Fix block top alignment inside table cells.
+   */
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.decisionItemView-content-wrap:first-of-type > div': {
+    marginTop: 0
+  }
+}), ".".concat(TableSharedCssClassName.TABLE_CONTAINER, "[data-number-column='true']"), {
+  paddingLeft: "".concat(akEditorTableNumberColumnWidth - 1, "px"),
+  clear: 'both'
+}), ".".concat(TableSharedCssClassName.TABLE_RESIZER_CONTAINER), {
+  willChange: 'width, margin-left'
+}), ".".concat(TableSharedCssClassName.TABLE_RESIZER_CONTAINER, " table"), {
+  willChange: 'width'
+}), ".".concat(TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table"), {
+  margin: "var(--ds-space-300, 24px)".concat(" 0 0 0")
+}), ".".concat(TableSharedCssClassName.TABLE_CONTAINER, " > table,\n\t.").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
+  margin: "var(--ds-space-300, 24px)".concat(" ", "var(--ds-space-100, 8px)", " 0 0")
+}), ".".concat(TableSharedCssClassName.TABLE_CONTAINER, " > table,\n\t.").concat(TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table,\n\t.").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
+  borderCollapse: 'collapse',
+  border: "".concat(tableCellBorderWidth, "px solid ", "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")")),
+  tableLayout: 'fixed',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  fontSize: '1em',
+  width: '100%',
+  '&[data-autosize="true"]': {
+    tableLayout: 'auto'
+  },
+  '*': {
+    boxSizing: 'border-box'
+  },
+  hr: {
+    boxSizing: 'content-box'
+  },
+  tbody: {
+    borderBottom: 'none'
+  },
+  'th td': {
+    backgroundColor: "var(--ds-background-neutral-subtle, white)"
+  },
+  // platform_editor_nested_tables_renderer_styles has already been lunched, so assume it's on
+  '> tbody > tr > td': {
+    backgroundColor: "var(--ds-surface, #FFFFFF)"
+  },
+  th: {
+    backgroundColor: "var(--ds-background-accent-gray-subtlest, ".concat(akEditorTableToolbar, ")"),
+    textAlign: 'left',
+    /* only apply this styling to codeblocks in default background headercells */
+    /* TODO this needs to be overhauled as it relies on unsafe selectors */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:not([style]):not(.danger)': _defineProperty({}, ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, ":not(.danger)"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+      backgroundColor: "var(--ds-surface-raised, rgb(235, 237, 240))"
+    }, "&:not(.".concat(akEditorSelectedNodeClassName, ")"), {
+      boxShadow: "0px 0px 0px 1px ".concat("var(--ds-border, transparent)")
+    }), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER), {
+      // originally copied from packages/editor/editor-shared-styles/src/overflow-shadow/overflow-shadow.ts
+      backgroundImage: "linear-gradient(\n\t\t\t\t\t\t\tto right,\n\t\t\t\t\t\t\t".concat("var(--ds-background-neutral, #091E420F)", " ", "var(--ds-space-300, 24px)", ",\n\t\t\t\t\t\t\ttransparent ", "var(--ds-space-300, 24px)", "\n\t\t\t\t\t\t  ),linear-gradient(\n\t\t\t\t\t\t\tto right,\n\t\t\t\t\t\t\t", "var(--ds-surface-raised, #FFFFFF)", " ", "var(--ds-space-300, 24px)", ",\n\t\t\t\t\t\t\ttransparent ", "var(--ds-space-300, 24px)", "\n\t\t\t\t\t\t  ),linear-gradient(\n\t\t\t\t\t\t\tto left,\n\t\t\t\t\t\t\t", "var(--ds-background-neutral, #091E420F)", " ", "var(--ds-space-100, 8px)", ",\n\t\t\t\t\t\t\ttransparent ", "var(--ds-space-100, 8px)", "\n\t\t\t\t\t\t  ),linear-gradient(\n\t\t\t\t\t\t\tto left,\n\t\t\t\t\t\t\t", "var(--ds-surface-raised, #FFFFFF)", " ", "var(--ds-space-100, 8px)", ",\n\t\t\t\t\t\t\ttransparent ", "var(--ds-space-100, 8px)", "\n\t\t\t\t\t\t  ),linear-gradient(\n\t\t\t\t\t\t\tto left,\n\t\t\t\t\t\t\t", "var(--ds-shadow-overflow-spread, #091e4229)", " 0,\n\t\t\t\t\t\t\t", "var(--ds-UNSAFE-transparent, transparent)", "  ", "var(--ds-space-100, 8px)", "\n\t\t\t\t\t\t  ),linear-gradient(\n\t\t\t\t\t\t\tto left,\n\t\t\t\t\t\t\t", "var(--ds-shadow-overflow-perimeter, #091e421f)", " 0,\n\t\t\t\t\t\t\t", "var(--ds-UNSAFE-transparent, transparent)", "  ", "var(--ds-space-100, 8px)", "\n\t\t\t\t\t\t  ),linear-gradient(\n\t\t\t\t\t\t\tto right,\n\t\t\t\t\t\t\t", "var(--ds-shadow-overflow-spread, #091e4229)", " 0,\n\t\t\t\t\t\t\t", "var(--ds-UNSAFE-transparent, transparent)", "  ", "var(--ds-space-100, 8px)", "\n\t\t\t\t\t\t  ),linear-gradient(\n\t\t\t\t\t\t\tto right,\n\t\t\t\t\t\t\t", "var(--ds-shadow-overflow-perimeter, #091e421f)", " 0,\n\t\t\t\t\t\t\t", "var(--ds-UNSAFE-transparent, transparent)", "  ", "var(--ds-space-100, 8px)", "\n\t\t\t\t\t\t  )"),
+      backgroundColor: "var(--ds-background-neutral, rgb(235, 237, 240))"
+    }), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER), {
+      backgroundColor: "var(--ds-background-neutral, rgb(226, 229, 233))"
+    }), '> [data-ds--code--code-block]', {
+      // originally copied from packages/editor/editor-shared-styles/src/overflow-shadow/overflow-shadow.ts
+      backgroundImage: "linear-gradient(\n\t\t\t\t\t\t\tto right,\n\t\t\t\t\t\t\t".concat("var(--ds-background-neutral, #091E420F)", " ", "var(--ds-space-300, 24px)", ",\n\t\t\t\t\t\t\ttransparent ", "var(--ds-space-300, 24px)", "\n\t\t\t\t\t\t  ),linear-gradient(\n\t\t\t\t\t\t\tto right,\n\t\t\t\t\t\t\t", "var(--ds-surface-raised, #FFFFFF)", " ", "var(--ds-space-300, 24px)", ",\n\t\t\t\t\t\t\ttransparent ", "var(--ds-space-300, 24px)", "\n\t\t\t\t\t\t  ),linear-gradient(\n\t\t\t\t\t\t\tto left,\n\t\t\t\t\t\t\t", "var(--ds-background-neutral, #091E420F)", " ", "var(--ds-space-100, 8px)", ",\n\t\t\t\t\t\t\ttransparent ", "var(--ds-space-100, 8px)", "\n\t\t\t\t\t\t  ),linear-gradient(\n\t\t\t\t\t\t\tto left,\n\t\t\t\t\t\t\t", "var(--ds-surface-raised, #FFFFFF)", " ", "var(--ds-space-100, 8px)", ",\n\t\t\t\t\t\t\ttransparent ", "var(--ds-space-100, 8px)", "\n\t\t\t\t\t\t  ),linear-gradient(\n\t\t\t\t\t\t\tto left,\n\t\t\t\t\t\t\t", "var(--ds-shadow-overflow-spread, #091e4229)", " 0,\n\t\t\t\t\t\t\t", "var(--ds-UNSAFE-transparent, transparent)", "  ", "var(--ds-space-100, 8px)", "\n\t\t\t\t\t\t  ),linear-gradient(\n\t\t\t\t\t\t\tto left,\n\t\t\t\t\t\t\t", "var(--ds-shadow-overflow-perimeter, #091e421f)", " 0,\n\t\t\t\t\t\t\t", "var(--ds-UNSAFE-transparent, transparent)", "  ", "var(--ds-space-100, 8px)", "\n\t\t\t\t\t\t  ),linear-gradient(\n\t\t\t\t\t\t\tto right,\n\t\t\t\t\t\t\t", "var(--ds-shadow-overflow-spread, #091e4229)", " 0,\n\t\t\t\t\t\t\t", "var(--ds-UNSAFE-transparent, transparent)", "  ", "var(--ds-space-100, 8px)", "\n\t\t\t\t\t\t  ),linear-gradient(\n\t\t\t\t\t\t\tto right,\n\t\t\t\t\t\t\t", "var(--ds-shadow-overflow-perimeter, #091e421f)", " 0,\n\t\t\t\t\t\t\t", "var(--ds-UNSAFE-transparent, transparent)", "  ", "var(--ds-space-100, 8px)", "\n\t\t\t\t\t\t  )"),
+      backgroundColor: "var(--ds-background-neutral, rgb(235, 237, 240))".concat("!important"),
+      // selector lives inside @atlaskit/code
+      '--ds--code--line-number-bg-color': "var(--ds-background-neutral, rgb(226, 229, 233))"
+    }))
+  }
+}));
+var tableRendererHeaderStylesForTableCellOnly = css(_defineProperty({}, ".".concat(TableSharedCssClassName.TABLE_CONTAINER, " > table,\n\t\t.").concat(TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table,\n\t\t.").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
+  // platform_editor_renderer_table_header_styles has already been launched, so assume it's on
+  '> tbody > tr > th, > tbody > tr > td': {
+    minWidth: "".concat(tableCellMinWidth, "px"),
+    fontWeight: "var(--ds-font-weight-regular, 400)",
+    verticalAlign: 'top',
+    border: "1px solid ".concat("var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")")),
+    borderRightWidth: 0,
+    borderBottomWidth: 0,
+    padding: "var(--ds-space-100, 8px)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    'th p:not(:first-of-type), td p:not(:first-of-type)': {
+      marginTop: "var(--ds-space-150, 12px)"
+    }
+  }
+}));
+var tableStylesBackGroundClipForGeckoForTableCellOnly = css(_defineProperty({}, ".".concat(TableSharedCssClassName.TABLE_CONTAINER, " > table,\n\t\t.").concat(TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table,\n\t\t.").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '> tbody > tr > th, > tbody > tr > td': {
+    backgroundClip: 'padding-box'
+  }
+}));
+var firstNodeWithNotMarginTopWithNestedDnD = css(_defineProperty({}, ".".concat(TableSharedCssClassName.TABLE_CONTAINER, " > table,\n\t\t.").concat(TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table,\n\t\t.").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
+  '> tbody > tr > th, > tbody > tr > td': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> :nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget, span))': {
+      marginTop: 0
+    }
+  }
+}));
+var firstNodeWithNotMarginTop = css(_defineProperty({}, ".".concat(TableSharedCssClassName.TABLE_CONTAINER, " > table,\n\t\t.").concat(TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table,\n\t\t.").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
+  '> tbody > tr > th, > tbody > tr > td': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> :first-child:not(style), > style:first-child + *': {
+      marginTop: 0
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> .ProseMirror-gapcursor:first-child + *, > style:first-child + .ProseMirror-gapcursor + *': {
+      marginTop: 0
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> .ProseMirror-gapcursor:first-child + span + *, > style:first-child + .ProseMirror-gapcursor + span + *': {
+      marginTop: 0
+    }
+  }
+}));
+var rendererTableStyles = css(_defineProperty({}, ".".concat(RendererCssClassName.DOCUMENT, " .").concat(TableSharedCssClassName.TABLE_CONTAINER), _defineProperty(_defineProperty(_defineProperty({
+  zIndex: 0,
+  transition: "all 0.1s linear",
+  display: 'flex' /* needed to avoid position: fixed jumpiness in Chrome */
+}, "&.".concat(shadowClassNames.RIGHT_SHADOW, "::after, &.").concat(shadowClassNames.LEFT_SHADOW, "::before"), {
+  top: "".concat(tableMarginTop - 1, "px"),
+  height: "calc(100% - ".concat(tableMarginTop, "px)"),
+  zIndex: "".concat(akEditorStickyHeaderZIndex),
+  width: "".concat(tableShadowWidth, "px"),
+  background: "linear-gradient(\n\t\t\t\t\tto left,\n\t\t\t\t\ttransparent 0,\n\t\t\t\t\t".concat("var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), " 140%\n\t\t\t\t),\n\t\t\t\tlinear-gradient(\n\t\t\t\t\tto right,\n\t\t\t\t\t", "var(--ds-shadow-overflow-perimeter, transparent)", " 0px,\n\t\t\t\t\ttransparent 1px\n\t\t\t\t)")
+}), "&.".concat(shadowClassNames.RIGHT_SHADOW, "::after"), {
+  background: "linear-gradient(\n\t\t\t\t\tto right,\n\t\t\t\t\ttransparent 0,\n\t\t\t\t\t".concat("var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), " 140%\n\t\t\t\t),\n\t\t\t\tlinear-gradient(\n\t\t\t\t\tto left,\n\t\t\t\t\t", "var(--ds-shadow-overflow-perimeter, transparent)", " 0px,\n\t\t\t\t\ttransparent 1px\n\t\t\t\t)"),
+  right: "0px"
+}), "&\n          .".concat(shadowObserverClassNames.SENTINEL_LEFT, ",\n          &\n          .").concat(shadowObserverClassNames.SENTINEL_RIGHT), {
+  height: "calc(100% - ".concat(tableMarginTop, "px)")
+})));
+var stickyScrollbarStyles = css(_defineProperty({}, ".".concat(RendererCssClassName.DOCUMENT, " .").concat(TableSharedCssClassName.TABLE_CONTAINER), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  position: 'relative',
+  flexDirection: 'column'
+}, "> .".concat(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER), {
+  width: '100%',
+  display: 'block',
+  visibility: 'hidden',
+  overflowX: 'auto',
+  position: 'sticky',
+  bottom: "var(--ds-space-0, 0px)",
+  zIndex: 1
+}), "> .".concat(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM, ",\n\t\t> .").concat(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP), {
+  position: 'absolute',
+  width: '100%',
+  height: '1px',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginTop: '-1px',
+  // need this to avoid sentinel being focused via keyboard
+  // this still allows it to be detected by intersection observer
+  visibility: 'hidden'
+}), "> .".concat(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP), {
+  top: "".concat(tableRowHeight * 3, "px")
+}), "> .".concat(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM), {
+  bottom: "var(--ds-space-250, 20px)" // MAX_BROWSER_SCROLLBAR_HEIGHT = 20;
+})));
+var rendererTableHeaderEqualHeightStylesForTableCellOnly = css(_defineProperty(_defineProperty({}, ".".concat(RendererCssClassName.DOCUMENT, " .").concat(TableSharedCssClassName.TABLE_CONTAINER), _defineProperty({}, ".".concat(TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table, .").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
+  height: '1px' /* will be ignored */,
+  marginLeft: 0,
+  marginRight: 0
+})), ".".concat(TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table > tbody > tr:first-of-type, .").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table > tbody > tr:first-of-type"), {
+  height: '100%',
+  'td, th': {
+    position: 'relative'
+  }
+}));
+var rendererTableSortableColumnStyles = css(_defineProperty({}, ".".concat(RendererCssClassName.DOCUMENT, " .").concat(TableSharedCssClassName.TABLE_CONTAINER), _defineProperty({}, ".".concat(TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table, .").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), _defineProperty({}, ".".concat(RendererCssClassName.SORTABLE_COLUMN_WRAPPER), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  padding: 0
+}, ".".concat(RendererCssClassName.SORTABLE_COLUMN), {
+  width: '100%',
+  height: '100%',
+  padding: "".concat(tableCellPadding, "px"),
+  borderWidth: '1.5px',
+  borderStyle: 'solid',
+  borderColor: "transparent",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '> *:first-child': {
+    marginTop: 0
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '> .ProseMirror-gapcursor:first-child + *, > style:first-child + .ProseMirror-gapcursor + *': {
+    marginTop: 0
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '> .ProseMirror-gapcursor:first-child + span + *, > style:first-child + .ProseMirror-gapcursor + span + *': {
+    marginTop: 0
+  },
+  '@supports selector(:focus-visible)': {
+    '&:focus': {
+      outline: 'unset'
+    },
+    '&:focus-visible': {
+      borderColor: "".concat("var(--ds-border-focused, ".concat(B300, ")"))
+    }
+  }
+}), "> .".concat(RendererCssClassName.SORTABLE_COLUMN, " > .").concat(RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER), _defineProperty({
+  margin: 0
+}, ".".concat(SORTABLE_COLUMN_ICON_CLASSNAME), {
+  opacity: 1,
+  transition: "opacity 0.2s ease-in-out"
+})), "> .".concat(RendererCssClassName.SORTABLE_COLUMN, "\n\t\t\t\t\t\t> .").concat(RendererCssClassName.SORTABLE_COLUMN_NO_ORDER), _defineProperty({}, ".".concat(SORTABLE_COLUMN_ICON_CLASSNAME), {
+  opacity: 0,
+  '&:focus': {
+    opacity: 1
+  }
+})), "&:hover:not(\n\t\t\t\t\t\t\t:has(\n\t\t\t\t\t\t\t\t\t.".concat(RendererCssClassName.SORTABLE_COLUMN_WRAPPER, "\n\t\t\t\t\t\t\t\t\t\t.").concat(RendererCssClassName.SORTABLE_COLUMN, ":hover\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)\n\t\t\t\t\t\t> .").concat(RendererCssClassName.SORTABLE_COLUMN, "\n\t\t\t\t\t\t> .").concat(RendererCssClassName.SORTABLE_COLUMN_NO_ORDER), _defineProperty({}, ".".concat(SORTABLE_COLUMN_ICON_CLASSNAME), {
+  opacity: 1
+}))))));
+var rendererTableColumnStyles = css(_defineProperty({}, ".".concat(RendererCssClassName.DOCUMENT, " .").concat(TableSharedCssClassName.TABLE_CONTAINER), {
+  'table[data-number-column="true"]': _defineProperty(_defineProperty({}, ".".concat(RendererCssClassName.NUMBER_COLUMN), {
+    backgroundColor: "".concat("var(--ds-background-neutral, ".concat(akEditorTableToolbar, ")")),
+    borderRight: "1px solid\n\t\t\t\t\t\t\t\t".concat("var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")")),
+    width: "".concat(akEditorTableNumberColumnWidth, "px"),
+    textAlign: 'center',
+    color: "".concat("var(--ds-text-subtlest, ".concat(N200, ")")),
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    fontSize: "".concat(14 / 16, " rem")
+  }), ".fixed .".concat(RendererCssClassName.NUMBER_COLUMN), {
+    borderRight: "0px none"
+  })
+}));
+
+// assume FG platform_editor_nested_tables_renderer_styles and platform_editor_renderer_table_header_styles on
+var rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks = css(_defineProperty({}, ".".concat(RendererCssClassName.DOCUMENT, " .").concat(TableSharedCssClassName.TABLE_CONTAINER), _defineProperty({}, ".".concat(TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table, .").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), _defineProperty({}, ".".concat(RendererCssClassName.SORTABLE_COLUMN_WRAPPER), _defineProperty({}, ".".concat(RendererCssClassName.SORTABLE_COLUMN), _defineProperty(_defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
+  position: 'unset'
+}), '>', {
+  'h1, h2, h3, h4, h5, h6': {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    marginRight: '30px'
+  }
+}))))));
+
+// @ts-expect-error - throw TS error when use !import in position.
+var stickyHeaderStyles = css({
+  'tr[data-header-row].fixed': {
+    position: 'fixed !important',
+    display: 'flex',
+    overflow: 'hidden',
+    zIndex: "".concat(akEditorStickyHeaderZIndex),
+    borderRight: "1px solid ".concat("var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")")),
+    borderBottom: "1px solid ".concat("var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")")),
+    /* this is to compensate for the table border */
+    transform: 'translateX(-1px)'
+  },
+  '.sticky > th': {
+    zIndex: "".concat(akEditorStickyHeaderZIndex),
+    position: 'fixed !important',
+    top: 0
+  },
+  /* Make the number column header sticky */
+  '.sticky > td': {
+    position: 'fixed !important',
+    top: 0
+  },
+  /* add border for position: sticky
+  and work around background-clip: padding-box
+  bug for FF causing box-shadow bug in Chrome */
+  '.sticky th, .sticky td': {
+    boxShadow: "0px 1px ".concat("var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), ",\n\t\t\t0px -0.5px ", "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), ",\n\t\t\tinset -1px 0px ", "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableToolbar, ")"), ",\n\t\t\t0px -1px ", "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableToolbar, ")"))
+  },
+  /* this will remove jumpiness caused in Chrome for sticky headers */
+  '.fixed + tr': {
+    minHeight: '0px'
+  }
+});
+var codeBlockAndLayoutStyles = css(_defineProperty(_defineProperty(_defineProperty({
+  /*
+   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.
+   * See ED-4159.
+   */
+  '& .code-block': {
+    maxWidth: '100%',
+    display: 'block',
+    position: 'relative',
+    borderRadius: "var(--ds-border-radius-100, 3px)",
+    /*
+     * The overall renderer has word-wrap: break; which causes issues with
+     * code block line numbers in Safari / iOS.
+     */
+    wordWrap: 'normal'
+  },
+  '& .MediaGroup, & .code-block': {
+    marginTop: "".concat(blockNodesVerticalMargin),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:first-child': {
+      marginTop: 0
+    }
+  }
+}, ".".concat(RendererCssClassName.DOCUMENT, "\n\t\t> .").concat(LightWeightCodeBlockCssClassName.CONTAINER, "\n\t\t.").concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER), {
+  marginTop: blockNodesVerticalMargin
+}), '& [data-layout-section]', _defineProperty(_defineProperty({
+  marginTop: "var(--ds-space-250, 20px)",
+  '& > div + div': {
+    marginLeft: "var(--ds-space-400, 32px)"
+  }
+}, "@media screen and (max-width: ".concat(gridMediumMaxWidth, "px)"), {
+  '& > div + div': {
+    marginLeft: 0
+  }
+}), '& .MediaGroup, & .code-block', {
+  marginTop: blockNodesVerticalMargin,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '&:first-child': {
+    marginTop: 0
+  }
+})), '& li', {
+  '> .code-block': {
+    margin: "".concat(blockNodesVerticalMargin, " 0 0 0")
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '> .code-block:first-child': {
+    marginTop: 0
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '> div:last-of-type.code-block': {
+    marginBottom: blockNodesVerticalMargin
+  }
+}));
+var layoutSectionForAdvancedLayoutsStyles = css({
+  '& [data-layout-section]': {
+    '& > div + div': {
+      marginLeft: 0
+    }
+  }
+});
+var gridRenderForCodeBlockStyles = css({
+  '& .code-block': {
+    // removed old -ms- prefix, as grid is well supported for MS Edge
+    display: 'grid',
+    gridTemplateColumns: 'minmax(0, 1fr)',
+    '& > span': {
+      gridColumn: 1
+    }
+  }
+});
+
+// This prevents https://product-fabric.atlassian.net/browse/ED-20924
+var codeBlockInListSafariFixStyles = css(_defineProperty({}, "&:not([data-node-type='decisionList']) > li,\n\t\t&:not(.".concat(SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, ") > li"), _defineProperty({
+  '&::before': {
+    content: '" "',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: akEditorLineHeight
+  }
+}, "> p:first-child,\n\t\t\t> .code-block:first-child,\n\t\t\t> .ProseMirror-gapcursor:first-child + .code-block", {
+  marginTop: "-".concat(akEditorLineHeight, "em !important")
+})));
+var columnLayoutSharedStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '[data-layout-section]': _defineProperty({
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'row',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '& > *': {
+      flex: 1,
+      minWidth: 0
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '& > .unsupportedBlockView-content-wrap': {
+      minWidth: 'initial'
+    }
+  }, "@media screen and (max-width: ".concat(gridMediumMaxWidth, "px)"), {
+    flexDirection: 'column'
+  })
+});
+var columnLayoutResponsiveSharedStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-layout-section]': {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: "var(--ds-space-100, 8px)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '& > *': {
+      flex: 1,
+      minWidth: 0
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '& > .unsupportedBlockView-content-wrap': {
+      minWidth: 'initial'
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.layout-section-container': {
+    containerType: 'inline-size',
+    containerName: 'layout-area'
+  }
+});
+var columnLayoutResponsiveRendererStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.layout-section-container [data-layout-section]': _defineProperty({
+    gap: "var(--ds-space-600, 48px)"
+  }, "@container layout-area (max-width: ".concat(LAYOUT_BREAKPOINT_RENDERER, "px)"), {
+    flexDirection: 'column',
+    gap: "var(--ds-space-400, 32px)"
+  })
+});
+var rendererAnnotationStyles = css({
+  "& [data-mark-type='annotation'][data-mark-annotation-state='active'] [data-annotation-mark], & [data-annotation-draft-mark][data-annotation-inline-node]": {
+    background: "var(--ds-background-accent-yellow-subtler, ".concat(Y75, ")"),
+    borderBottom: "2px solid ".concat("var(--ds-border-accent-yellow, ".concat(Y300, ")")),
+    boxShadow: "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(N60A, ", -1px 2px 3px ").concat(N60A), ")"),
+    cursor: 'pointer',
+    padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-025, 2px)")
+  }
+});
+var rendererAnnotationStylesCommentHeightFix = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '& [data-annotation-draft-mark][data-annotation-inline-node]': {
+    borderBottom: '2px solid transparent',
+    cursor: 'pointer',
+    padding: '1px 0 2px',
+    background: "var(--ds-background-accent-yellow-subtler, ".concat(Y75, ")"),
+    borderBottomColor: "var(--ds-border-accent-yellow, ".concat(Y300, ")"),
+    boxShadow: "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(N60A, ", -1px 2px 3px ").concat(N60A), ")")
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '& [data-annotation-draft-mark][data-annotation-inline-node][data-inline-card]': {
+    padding: '5px 0 3px 0'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '& [data-annotation-draft-mark][data-annotation-inline-node].date-lozenger-container': {
+    paddingTop: "var(--ds-space-025, 2px)"
+  }
+});
+export var RendererStyleContainer = function RendererStyleContainer(props) {
+  var onClick = props.onClick,
+    onMouseDown = props.onMouseDown,
+    appearance = props.appearance,
+    allowNestedHeaderLinks = props.allowNestedHeaderLinks,
+    allowColumnSorting = props.allowColumnSorting,
+    allowAnnotations = props.allowAnnotations,
+    allowTableResizing = props.allowTableResizing,
+    useBlockRenderForCodeBlock = props.useBlockRenderForCodeBlock,
+    children = props.children,
+    innerRef = props.innerRef,
+    testId = props.testId;
+  var isAdvancedLayoutsOn = editorExperiment('advanced_layouts', true);
+  if (fg('platform_editor_emotion_refactor_renderer')) {
+    return (
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+      jsx("div", {
+        ref: innerRef,
+        onClick: onClick,
+        onMouseDown: onMouseDown,
+        style: {
+          '--ak-renderer-base-font-size': "".concat(getBaseFontSize(appearance), "px")
+        },
+        css: [baseStyles, appearance === 'full-page' && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, fg('platform_editor_heading_margin_fix') && headingWithAlignmentStyles, ruleSharedStyles, fg('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles,
+        // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+        fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
+        // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
+        fg('editor_inline_comments_on_inline_nodes') &&
+        // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+        fg('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, editorExperiment('nested-dnd', true) ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles],
+        "data-testid": testId
+      }, children)
+    );
+  }
+  return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    jsx("div", {
+      ref: innerRef,
+      onClick: onClick,
+      onMouseDown: onMouseDown
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      ,
+      css: rendererStyles({
+        appearance: appearance,
+        allowNestedHeaderLinks: allowNestedHeaderLinks,
+        allowColumnSorting: !!allowColumnSorting,
+        useBlockRenderForCodeBlock: useBlockRenderForCodeBlock,
+        allowAnnotations: allowAnnotations,
+        allowTableResizing: allowTableResizing
+      }),
+      "data-testid": testId
+    }, props.children)
+  );
+};