@atlaskit/renderer 109.29.5 → 109.30.0

package/dist/cjs/ui/Renderer/style.js

@@ -31,10 +31,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var FullPagePadding = exports.FullPagePadding = 32;
 var tableShadowWidth = 32;
 var TELEPOINTER_ID = exports.TELEPOINTER_ID = 'ai-streaming-telepointer';
-var telepointerStyles = function telepointerStyles() {
-  var _getGlobalTheme = (0, _tokens.getGlobalTheme)(),
-    colorMode = _getGlobalTheme.colorMode;
-
+var telepointerStyles = function telepointerStyles(colorMode) {
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    #", " {\n      display: inline-block;\n      position: relative;\n      width: 1.5px;\n      height: 25px;\n      background: linear-gradient(\n        45deg,\n        ", " -12.02%,\n        ", " 19.18%,\n        ", " 71.87%\n      );\n      margin-left: ", ";\n\n      &::after {\n        content: 'AI';\n        position: absolute;\n        display: block;\n        top: 0;\n        left: 0;\n        font-size: 10px;\n        font-weight: 700;\n        width: 12.5px;\n        height: 13px;\n        padding-top: 1px;\n        padding-left: 1.5px;\n        line-height: initial;\n        border-radius: 0px 2px 2px 0px;\n        color: ", ";\n        background: linear-gradient(\n          45deg,\n          ", " -57%,\n          ", " 71.87%\n        );\n      }\n    }\n  "])), TELEPOINTER_ID, colorMode === 'dark' ? '#f5cd47' : '#f8e6a0', colorMode === 'dark' ? '#60c6d2' : '#8bdbe5', colorMode === 'dark' ? '#388bff' : '#0c66e4', "var(--ds-space-025, 2px)", "var(--ds-text-inverse, white)", colorMode === 'dark' ? '#60c6d2' : '#8bdbe5', colorMode === 'dark' ? '#388bff' : '#0c66e4');
 };
@@ -109,6 +106,8 @@ var getShadowOverrides = function getShadowOverrides() {
 };
 var rendererStyles = exports.rendererStyles = function rendererStyles(wrapperProps) {
   return function (theme) {
+    var _getGlobalTheme = (0, _tokens.getGlobalTheme)(),
+      colorMode = _getGlobalTheme.colorMode;
     // This is required to be compatible with styled-components prop structure.
     var themeProps = {
       theme: theme
@@ -116,7 +115,7 @@ var rendererStyles = exports.rendererStyles = function rendererStyles(wrapperPro
     var useBlockRenderForCodeBlock = wrapperProps.useBlockRenderForCodeBlock;
 
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/no-css-tagged-template-expression
-    return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n      font-size: ", "px;\n      line-height: 1.5rem;\n      color: ", ";\n\n      .", "::after {\n        // we add a clearfix after ak-renderer-document in order to\n        // contain internal floats (such as media images that are \"wrap-left\")\n        // to just the renderer (and not spill outside of it)\n        content: '';\n        visibility: hidden;\n        display: block;\n        height: 0;\n        clear: both;\n      }\n\n      ", "\n      ", "\n\n      .", " {\n        ", "\n      }\n\n      & h1 {\n        ", "\n      }\n\n      & h2 {\n        ", "\n      }\n\n      & h3 {\n        ", "\n      }\n\n      & h4 {\n        ", "\n      }\n\n      & h5 {\n        ", "\n      }\n\n      & h6 {\n        ", "\n      }\n\n      & span.akActionMark {\n        color: ", ";\n        text-decoration: none;\n\n        &:hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      & span.akActionMark {\n        cursor: pointer;\n      }\n\n      & span[data-placeholder] {\n        color: ", ";\n      }\n\n      ", "\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", "\n\n      & .UnknownBlock {\n        font-family: ", ";\n        font-size: ", ";\n        font-weight: 400;\n        white-space: pre-wrap;\n        word-wrap: break-word;\n      }\n\n      & span.date-node {\n        background: ", ";\n        border-radius: ", ";\n        color: ", ";\n        padding: ", " ", ";\n        margin: 0 1px;\n        transition: background 0.3s;\n      }\n\n      & span.date-node-highlighted {\n        background: ", ";\n        color: ", ";\n      }\n\n      & .renderer-image {\n        max-width: 100%;\n        display: block;\n        margin: ", " 0;\n      }\n\n      .", ".rich-media-wrapped\n        + .", ":not(.rich-media-wrapped) {\n        clear: both;\n      }\n\n      & .code-block,\n      & blockquote,\n      & hr,\n      & > div > div:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped\n        + .rich-media-wrapped\n        + *:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n      .", ".image-align-start,\n        .", ".image-center,\n        .", ".image-align-end {\n        clear: both;\n      }\n\n      & .rich-media-wrapped {\n        & + h1,\n        & + h2,\n        & + h3,\n        & + h4,\n        & + h5,\n        & + h6 {\n          margin-top: ", ";\n        }\n      }\n\n      ", "\n      /* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n        margin-left: 0;\n        margin-right: 0;\n      }\n\n      /* Breakout for tables and extensions */\n      .", " > {\n        ", "\n\n        * .", " {\n          overflow-x: auto;\n        }\n\n        & .", ":first-child {\n          margin-top: 0;\n        }\n      }\n\n      .", " {\n        .", " {\n          margin-top: ", ";\n        }\n\n        .", " {\n          margin-left: 50%;\n          transform: translateX(-50%);\n        }\n\n        .", " {\n          overflow-x: auto;\n        }\n\n        .", "\n          .", " {\n          display: flex;\n        }\n      }\n\n      ", "\n\n      .", " .", " {\n        z-index: 0;\n        transition: all 0.1s linear;\n        display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n        /** Shadow overrides */\n        &.", "::after,\n          &.", "::before {\n          top: ", "px;\n          height: calc(100% - ", "px);\n          z-index: ", ";\n        }\n\n        ", "\n\n        &\n          .", ",\n          &\n          .", " {\n          height: calc(100% - ", "px);\n        }\n\n        /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n        table {\n          height: 1px; /* will be ignored */\n          ", ";\n          margin-left: 0;\n          margin-right: 0;\n        }\n\n        table tr:first-of-type {\n          height: 100%;\n\n          td,\n          th {\n            position: relative;\n          }\n        }\n\n        table[data-number-column='true'] {\n          .", " {\n            background-color: ", ";\n            border-right: 1px solid\n              ", ";\n            width: ", "px;\n            text-align: center;\n            color: ", ";\n            font-size: ", ";\n          }\n\n          .fixed .", " {\n            border-right: 0px none;\n          }\n        }\n      }\n\n      tr[data-header-row].fixed {\n        position: fixed !important;\n        display: flex;\n        overflow: hidden;\n        z-index: ", ";\n\n        border-right: 1px solid\n          ", ";\n        border-bottom: 1px solid\n          ", ";\n\n        /* this is to compensate for the table border */\n        transform: translateX(-1px);\n      }\n\n      .sticky > th {\n        z-index: ", ";\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* Make the number column header sticky */\n      .sticky > td {\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n      .sticky th,\n      .sticky td {\n        box-shadow:\n          0px 1px\n            ", ",\n          0px -0.5px ", ",\n          inset -1px 0px ", ",\n          0px -1px ", ";\n      }\n\n      /* this will remove jumpiness caused in Chrome for sticky headers */\n      .fixed + tr {\n        min-height: 0px;\n      }\n\n      /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n      & .code-block {\n        max-width: 100%;\n        /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n        /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n        display: block;\n        /* stylelint-enable */\n\n        position: relative;\n        border-radius: ", ";\n\n        /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n        word-wrap: normal;\n      }\n\n      & .MediaGroup,\n      & .code-block {\n        margin-top: ", ";\n\n        &:first-child {\n          margin-top: 0;\n        }\n      }\n\n      ", "\n\n      ", "\n\n      ", ";\n      & [data-layout-section] {\n        margin-top: ", ";\n        & > div + div {\n          margin-left: ", ";\n        }\n\n        @media screen and (max-width: ", "px) {\n          & > div + div {\n            margin-left: 0;\n          }\n        }\n\n        & .MediaGroup,\n        & .code-block {\n          margin-top: ", ";\n\n          &:first-child {\n            margin-top: 0;\n          }\n        }\n      }\n\n      & li {\n        > .code-block {\n          margin: ", " 0 0 0;\n        }\n        > .code-block:first-child {\n          margin-top: 0;\n        }\n\n        > div:last-of-type.code-block {\n          margin-bottom: ", ";\n        }\n      }\n\n      &:not([data-node-type='decisionList']) > li,\n      // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n      &:not(.", ") > li {\n        ", "\n      }\n    "])), (0, _editorSharedStyles.editorFontSize)(themeProps), "var(--ds-text, ".concat(colors.N800, ")"), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), _consts.RendererCssClassName.DOCUMENT, _mediaInline.mediaInlineImageStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), telepointerStyles(), _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(), (0, _styles.ruleSharedStyles)(), _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, _styles.backgroundColorStyles, _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), "var(--ds-background-neutral, ".concat(colors.N30A, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-text, ".concat(colors.N800, ")"), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)", "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-space-100, 8px)", alignedHeadingAnchorStyle(wrapperProps), _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, breakoutWidthStyle(), _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.DOCUMENT, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, _ui.shadowObserverClassNames.SHADOW_CONTAINER, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, (0, _styles.tableSharedStyle)(), _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, getShadowOverrides(), _ui.shadowObserverClassNames.SENTINEL_LEFT, _ui.shadowObserverClassNames.SENTINEL_RIGHT, _styles.tableMarginTop, tableSortableColumnStyle(wrapperProps), _consts.RendererCssClassName.NUMBER_COLUMN, "var(--ds-background-neutral, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), _editorSharedStyles.akEditorTableNumberColumnWidth, "var(--ds-text-subtlest, ".concat(colors.N200, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _consts.RendererCssClassName.NUMBER_COLUMN, _editorSharedStyles.akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), _editorSharedStyles.akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-border-radius-100, 3px)", _editorSharedStyles.blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), (0, _lightWeightCodeBlock.getLightWeightCodeBlockStylesForRootRendererStyleSheet)(), _styles.columnLayoutSharedStyle, "var(--ds-space-250, 20px)", "var(--ds-space-400, 32px)", _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _utils.browser.safari ? _styles.codeBlockInListSafariFix : '');
+    return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n      font-size: ", "px;\n      line-height: 1.5rem;\n      color: ", ";\n\n      .", "::after {\n        // we add a clearfix after ak-renderer-document in order to\n        // contain internal floats (such as media images that are \"wrap-left\")\n        // to just the renderer (and not spill outside of it)\n        content: '';\n        visibility: hidden;\n        display: block;\n        height: 0;\n        clear: both;\n      }\n\n      ", "\n      ", "\n\n      .", " {\n        ", "\n      }\n\n      & h1 {\n        ", "\n      }\n\n      & h2 {\n        ", "\n      }\n\n      & h3 {\n        ", "\n      }\n\n      & h4 {\n        ", "\n      }\n\n      & h5 {\n        ", "\n      }\n\n      & h6 {\n        ", "\n      }\n\n      & span.akActionMark {\n        color: ", ";\n        text-decoration: none;\n\n        &:hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      & span.akActionMark {\n        cursor: pointer;\n      }\n\n      & span[data-placeholder] {\n        color: ", ";\n      }\n\n      ", "\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", "\n\n      & .UnknownBlock {\n        font-family: ", ";\n        font-size: ", ";\n        font-weight: 400;\n        white-space: pre-wrap;\n        word-wrap: break-word;\n      }\n\n      & span.date-node {\n        background: ", ";\n        border-radius: ", ";\n        color: ", ";\n        padding: ", " ", ";\n        margin: 0 1px;\n        transition: background 0.3s;\n      }\n\n      & span.date-node-highlighted {\n        background: ", ";\n        color: ", ";\n      }\n\n      & .renderer-image {\n        max-width: 100%;\n        display: block;\n        margin: ", " 0;\n      }\n\n      .", ".rich-media-wrapped\n        + .", ":not(.rich-media-wrapped) {\n        clear: both;\n      }\n\n      & .code-block,\n      & blockquote,\n      & hr,\n      & > div > div:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped\n        + .rich-media-wrapped\n        + *:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n      .", ".image-align-start,\n        .", ".image-center,\n        .", ".image-align-end {\n        clear: both;\n      }\n\n      & .rich-media-wrapped {\n        & + h1,\n        & + h2,\n        & + h3,\n        & + h4,\n        & + h5,\n        & + h6 {\n          margin-top: ", ";\n        }\n      }\n\n      ", "\n      /* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n        margin-left: 0;\n        margin-right: 0;\n      }\n\n      /* Breakout for tables and extensions */\n      .", " > {\n        ", "\n\n        * .", " {\n          overflow-x: auto;\n        }\n\n        & .", ":first-child {\n          margin-top: 0;\n        }\n      }\n\n      .", " {\n        .", " {\n          margin-top: ", ";\n        }\n\n        .", " {\n          margin-left: 50%;\n          transform: translateX(-50%);\n        }\n\n        .", " {\n          overflow-x: auto;\n        }\n\n        .", "\n          .", " {\n          display: flex;\n        }\n      }\n\n      ", "\n\n      .", " .", " {\n        z-index: 0;\n        transition: all 0.1s linear;\n        display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n        /** Shadow overrides */\n        &.", "::after,\n          &.", "::before {\n          top: ", "px;\n          height: calc(100% - ", "px);\n          z-index: ", ";\n        }\n\n        ", "\n\n        &\n          .", ",\n          &\n          .", " {\n          height: calc(100% - ", "px);\n        }\n\n        /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n        table {\n          height: 1px; /* will be ignored */\n          ", ";\n          margin-left: 0;\n          margin-right: 0;\n        }\n\n        table tr:first-of-type {\n          height: 100%;\n\n          td,\n          th {\n            position: relative;\n          }\n        }\n\n        table[data-number-column='true'] {\n          .", " {\n            background-color: ", ";\n            border-right: 1px solid\n              ", ";\n            width: ", "px;\n            text-align: center;\n            color: ", ";\n            font-size: ", ";\n          }\n\n          .fixed .", " {\n            border-right: 0px none;\n          }\n        }\n      }\n\n      tr[data-header-row].fixed {\n        position: fixed !important;\n        display: flex;\n        overflow: hidden;\n        z-index: ", ";\n\n        border-right: 1px solid\n          ", ";\n        border-bottom: 1px solid\n          ", ";\n\n        /* this is to compensate for the table border */\n        transform: translateX(-1px);\n      }\n\n      .sticky > th {\n        z-index: ", ";\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* Make the number column header sticky */\n      .sticky > td {\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n      .sticky th,\n      .sticky td {\n        box-shadow:\n          0px 1px\n            ", ",\n          0px -0.5px ", ",\n          inset -1px 0px ", ",\n          0px -1px ", ";\n      }\n\n      /* this will remove jumpiness caused in Chrome for sticky headers */\n      .fixed + tr {\n        min-height: 0px;\n      }\n\n      /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n      & .code-block {\n        max-width: 100%;\n        /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n        /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n        display: block;\n        /* stylelint-enable */\n\n        position: relative;\n        border-radius: ", ";\n\n        /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n        word-wrap: normal;\n      }\n\n      & .MediaGroup,\n      & .code-block {\n        margin-top: ", ";\n\n        &:first-child {\n          margin-top: 0;\n        }\n      }\n\n      ", "\n\n      ", "\n\n      ", ";\n      & [data-layout-section] {\n        margin-top: ", ";\n        & > div + div {\n          margin-left: ", ";\n        }\n\n        @media screen and (max-width: ", "px) {\n          & > div + div {\n            margin-left: 0;\n          }\n        }\n\n        & .MediaGroup,\n        & .code-block {\n          margin-top: ", ";\n\n          &:first-child {\n            margin-top: 0;\n          }\n        }\n      }\n\n      & li {\n        > .code-block {\n          margin: ", " 0 0 0;\n        }\n        > .code-block:first-child {\n          margin-top: 0;\n        }\n\n        > div:last-of-type.code-block {\n          margin-bottom: ", ";\n        }\n      }\n\n      &:not([data-node-type='decisionList']) > li,\n      // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n      &:not(.", ") > li {\n        ", "\n      }\n    "])), (0, _editorSharedStyles.editorFontSize)(themeProps), "var(--ds-text, ".concat(colors.N800, ")"), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), _consts.RendererCssClassName.DOCUMENT, _mediaInline.mediaInlineImageStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), telepointerStyles(colorMode), _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(), (0, _styles.ruleSharedStyles)(), _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, (0, _styles.backgroundColorStyles)(colorMode), _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), "var(--ds-background-neutral, ".concat(colors.N30A, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-text, ".concat(colors.N800, ")"), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)", "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-space-100, 8px)", alignedHeadingAnchorStyle(wrapperProps), _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, breakoutWidthStyle(), _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.DOCUMENT, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, _ui.shadowObserverClassNames.SHADOW_CONTAINER, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, (0, _styles.tableSharedStyle)(), _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, getShadowOverrides(), _ui.shadowObserverClassNames.SENTINEL_LEFT, _ui.shadowObserverClassNames.SENTINEL_RIGHT, _styles.tableMarginTop, tableSortableColumnStyle(wrapperProps), _consts.RendererCssClassName.NUMBER_COLUMN, "var(--ds-background-neutral, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), _editorSharedStyles.akEditorTableNumberColumnWidth, "var(--ds-text-subtlest, ".concat(colors.N200, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _consts.RendererCssClassName.NUMBER_COLUMN, _editorSharedStyles.akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), _editorSharedStyles.akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-border-radius-100, 3px)", _editorSharedStyles.blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), (0, _lightWeightCodeBlock.getLightWeightCodeBlockStylesForRootRendererStyleSheet)(), _styles.columnLayoutSharedStyle, "var(--ds-space-250, 20px)", "var(--ds-space-400, 32px)", _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _utils.browser.safari ? _styles.codeBlockInListSafariFix : '');
   };
 };
 var useGridRenderForCodeBlock = function useGridRenderForCodeBlock(codeBlockRenderAsBlock) {

package/dist/es2019/react/marks/alignment.js

@@ -17,7 +17,9 @@ const MarkWrapper = props => {
   );
 };
 export default function Alignment(props) {
-  return jsx(MarkWrapper, {
+  return jsx(MarkWrapper
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , {
     className: "fabric-editor-block-mark fabric-editor-alignment",
     "data-align": props.align
   }, props.children);

package/dist/es2019/react/marks/backgroundColor.js

@@ -41,8 +41,12 @@ export default function BackgroundColor(props) {
     ['--custom-palette-color']: paletteColorValue
   }), [paletteColorValue]);
   return /*#__PURE__*/React.createElement("span", _extends({}, props.dataAttributes, {
-    "data-background-custom-color": props.color,
-    className: "fabric-background-color-mark",
+    "data-background-custom-color": props.color
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: "fabric-background-color-mark"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: style
   }), props.children);
 }

package/dist/es2019/react/marks/breakout.js

@@ -17,7 +17,9 @@ export default function Breakout(props) {
     "data-mode": props.mode,
     style: {
       width: calcBreakoutWidth(props.mode, width)
-    },
+    }
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: "fabric-editor-breakout-mark fabric-editor-block-mark"
   }, props.children));
 }

package/dist/es2019/react/marks/code.js

@@ -8,7 +8,9 @@ export const isCodeMark = mark => {
 };
 export function CodeWithIntl(props) {
   const codeBidiWarningLabel = props.intl.formatMessage(codeBidiWarningMessages.label);
-  return /*#__PURE__*/React.createElement(AkCode, _extends({
+  return /*#__PURE__*/React.createElement(AkCode
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , _extends({
     className: "code",
     codeBidiWarningLabel: codeBidiWarningLabel,
     codeBidiWarningTooltipEnabled: props.codeBidiWarningTooltipEnabled

package/dist/es2019/react/marks/indentation.js

@@ -1,6 +1,7 @@
 import React from 'react';
 export default function Indentation(props) {
   return /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "fabric-editor-block-mark fabric-editor-indentation-mark",
     "data-level": props.level
   }, props.children);

package/dist/es2019/react/marks/strike.js

@@ -1,9 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 export default function Strike(props) {
-  return /*#__PURE__*/React.createElement("span", _extends({}, props.dataAttributes, {
-    style: {
-      textDecoration: 'line-through'
-    }
-  }), props.children);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    React.createElement("span", _extends({}, props.dataAttributes, {
+      style: {
+        textDecoration: 'line-through'
+      }
+    }), props.children)
+  );
 }

package/dist/es2019/react/marks/textColor.js

@@ -45,8 +45,12 @@ export default function TextColor(props) {
     ['--custom-palette-color']: paletteColorValue
   }), [paletteColorValue]);
   return /*#__PURE__*/React.createElement("span", _extends({}, props.dataAttributes, {
-    "data-text-custom-color": props.color,
-    className: "fabric-text-color-mark",
+    "data-text-custom-color": props.color
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: "fabric-text-color-mark"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: style
   }), props.children);
 }

package/dist/es2019/react/nodes/blockCard.js

@@ -112,6 +112,7 @@ export default function BlockCard(props) {
   return jsx(AnalyticsContext, {
     data: analyticsData
   }, jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "blockCardView-content-wrap",
     "data-block-card": true,
     "data-card-data": data ? JSON.stringify(data) : undefined,

package/dist/es2019/react/nodes/bulletList.js

@@ -3,6 +3,7 @@ import { bulletListSelector } from '@atlaskit/adf-schema';
 import { getListIndentLevel } from '../utils/lists';
 export default function BulletList(props) {
   return /*#__PURE__*/React.createElement("ul", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: bulletListSelector.substr(1),
     "data-indent-level": props.path ? getListIndentLevel(props.path) : 1
   }, props.children);

package/dist/es2019/react/nodes/codeBlock/codeBlock.js

@@ -19,7 +19,9 @@ function CodeBlock(props) {
   const [wrapLongLines, setWrapLongLines] = useState(false);
   return jsx(CodeBlockContainer, {
     allowCopyToClipboard: allowCopyToClipboard,
-    allowWrapCodeBlock: allowWrapCodeBlock,
+    allowWrapCodeBlock: allowWrapCodeBlock
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: className,
     setWrapLongLines: setWrapLongLines,
     text: text,

package/dist/es2019/react/nodes/codeBlock/components/codeBlockContainer.js

@@ -42,15 +42,18 @@ const CodeBlockContainer = ({
   text,
   wrapLongLines
 }) => {
-  return jsx("div", {
-    className: className,
-    css: codeBlockStyleOverrides
-  }, jsx(CodeBlockButtonContainer, {
-    allowCopyToClipboard: allowCopyToClipboard,
-    allowWrapCodeBlock: allowWrapCodeBlock,
-    setWrapLongLines: setWrapLongLines,
-    text: text,
-    wrapLongLines: wrapLongLines
-  }), children);
+  return (
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    jsx("div", {
+      className: className,
+      css: codeBlockStyleOverrides
+    }, jsx(CodeBlockButtonContainer, {
+      allowCopyToClipboard: allowCopyToClipboard,
+      allowWrapCodeBlock: allowWrapCodeBlock,
+      setWrapLongLines: setWrapLongLines,
+      text: text,
+      wrapLongLines: wrapLongLines
+    }), children)
+  );
 };
 export default CodeBlockContainer;

package/dist/es2019/react/nodes/codeBlock/components/codeBlockCopyButton.js

@@ -30,7 +30,9 @@ const CopyButton = ({
   }, jsx(Button, {
     appearance: "subtle",
     "aria-haspopup": true,
-    "aria-label": tooltip,
+    "aria-label": tooltip
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: className,
     iconBefore: jsx(CopyIcon, {
       label: tooltip

package/dist/es2019/react/nodes/codeBlock/components/codeBlockWrapButton.js

@@ -37,7 +37,9 @@ const CodeBlockWrapButton = ({
   }, jsx(Button, {
     appearance: "subtle",
     "aria-haspopup": true,
-    "aria-label": wrapMessage,
+    "aria-label": wrapMessage
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: `wrap-code ${wrapLongLines ? 'clicked' : ''}`,
     iconBefore: jsx(Icon, {
       glyph: WrapIcon,

package/dist/es2019/react/nodes/codeBlock/components/lightWeightCodeBlock.js

@@ -43,14 +43,17 @@ const LightWeightCodeBlock = /*#__PURE__*/forwardRef(({
   });
   const classNames = [LightWeightCodeBlockCssClassName.CONTAINER, className].join(' ');
   return jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: classNames,
     ref: ref,
     css: [codeBlockSharedStyles(), lightWeightCodeBlockStyles]
   }, jsx("div", {
     className: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER
   }, jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER
   }, jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER
   }, textRows.map((_, index) => jsx("span", {
     key: index

package/dist/es2019/react/nodes/codeBlock/windowedCodeBlock.js

@@ -31,7 +31,9 @@ const WindowedCodeBlock = ({
   const memoizedLightWeightCodeBlock = jsx(MemoizedLightWeightCodeBlock, {
     ref: trackingRef,
     text: text,
-    codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled,
+    codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: rootClassName
   });
   const [wrapLongLines, setWrapLongLines] = useState(false);
@@ -39,7 +41,9 @@ const WindowedCodeBlock = ({
     fallback: memoizedLightWeightCodeBlock
   }, jsx(CodeBlockContainer, {
     allowCopyToClipboard: allowCopyToClipboard,
-    allowWrapCodeBlock: allowWrapCodeBlock,
+    allowWrapCodeBlock: allowWrapCodeBlock
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: className,
     setWrapLongLines: setWrapLongLines,
     text: text,

package/dist/es2019/react/nodes/date.js

@@ -13,13 +13,18 @@ class Date extends PureComponent {
       intl
     } = this.props;
     const className = !!parentIsIncompleteTask && isPastDate(timestamp) ? 'date-node date-node-highlighted' : 'date-node';
-    return /*#__PURE__*/React.createElement("span", {
-      className: DateSharedCssClassName.DATE_WRAPPER
-    }, /*#__PURE__*/React.createElement("span", {
-      className: className,
-      "data-node-type": "date",
-      "data-timestamp": timestamp
-    }, parentIsIncompleteTask ? timestampToTaskContext(timestamp, intl) : timestampToString(timestamp, intl)));
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      React.createElement("span", {
+        className: DateSharedCssClassName.DATE_WRAPPER
+      }, /*#__PURE__*/React.createElement("span", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        className: className,
+        "data-node-type": "date",
+        "data-timestamp": timestamp
+      }, parentIsIncompleteTask ? timestampToTaskContext(timestamp, intl) : timestampToString(timestamp, intl)))
+    );
   }
 }
 export const DateComponent = injectIntl(Date);

package/dist/es2019/react/nodes/doc.js

@@ -2,13 +2,16 @@ import React from 'react';
 import { RendererCssClassName } from '../../consts';
 import { useSelectAllTrap } from '../utils/use-select-all-trap';
 export default function Doc(props) {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   return /*#__PURE__*/React.createElement("div", {
     className: RendererCssClassName.DOCUMENT
   }, props.children);
 }
 export function DocWithSelectAllTrap(props) {
   return /*#__PURE__*/React.createElement("div", {
-    ref: useSelectAllTrap(),
+    ref: useSelectAllTrap()
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: RendererCssClassName.DOCUMENT
   }, props.children);
 }

package/dist/es2019/react/nodes/embedCard.js

@@ -152,6 +152,7 @@ export default function EmbedCard(props) {
     }, jsx("div", {
       css: embedCardWrapperStyles
     }, jsx("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: "embedCardView-content-wrap",
       "data-embed-card": true,
       "data-layout": layout,

package/dist/es2019/react/nodes/extension.js

@@ -15,7 +15,9 @@ export const renderExtension = (content, layout, options = {}, removeOverflow) =
   return /*#__PURE__*/React.createElement(WidthConsumer, null, ({
     width
   }) => /*#__PURE__*/React.createElement("div", {
-    ref: options.handleRef,
+    ref: options.handleRef
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: `${RendererCssClassName.EXTENSION} ${options.shadowClassNames} ${centerAlignClass}`,
     style: {
       width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'

package/dist/es2019/react/nodes/heading-anchor.js

@@ -15,10 +15,13 @@ const CopyAnchorWrapperWithRef = /*#__PURE__*/React.forwardRef((props, ref) => {
     children,
     ...rest
   } = props;
-  return jsx("span", _extends({}, rest, {
-    className: HeadingAnchorWrapperClassName,
-    ref: ref
-  }), children);
+  return (
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    jsx("span", _extends({}, rest, {
+      className: HeadingAnchorWrapperClassName,
+      ref: ref
+    }), children)
+  );
 });
 const copyAnchorButtonStyles = css({
   display: 'inline',

package/dist/es2019/react/nodes/media/index.js

@@ -192,8 +192,7 @@ class Media extends PureComponent {
         width,
         height,
         mediaSingleElement,
-        isDrafting = false,
-        isInPageInclude
+        isDrafting = false
       } = this.props;
       const annotationMarks = this.props.isAnnotationMark ? this.props.marks.filter(this.props.isAnnotationMark) : undefined;
       const borderMark = this.props.marks.find(this.props.isBorderMark);
@@ -201,6 +200,7 @@ class Media extends PureComponent {
       const linkHref = linkMark === null || linkMark === void 0 ? void 0 : linkMark.attrs.href;
       const eventHandlers = linkHref ? undefined : this.props.eventHandlers;
       const shouldOpenMediaViewer = !linkHref && allowMediaViewer;
+      const isInPageInclude = mediaSingleElement === null || mediaSingleElement === void 0 ? void 0 : mediaSingleElement.closest('[data-node-type="include"]');
       const showCommentBadge = !!annotationMarks && (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMedia) && (!(featureFlags !== null && featureFlags !== void 0 && featureFlags.commentsOnMediaIncludePage) || !isInPageInclude);
       return jsx(MediaLink, {
         mark: linkMark,
@@ -282,11 +282,6 @@ const MediaWithDraftAnnotation = props => {
     dataAttributes
   } = props;
   const pos = dataAttributes && dataAttributes['data-renderer-start-pos'];
-  let parentElementClosest;
-  if (typeof document !== "undefined") {
-    const elementAtPos = pos && document.querySelector(`[data-renderer-start-pos="${pos}"]`);
-    parentElementClosest = elementAtPos instanceof Element ? elementAtPos.closest('[data-node-type="include"]') : null;
-  }
   const [position, setPosition] = useState();
   const [shouldApplyDraftAnnotation, setShouldApplyDraftAnnotation] = useState(false);
   useEffect(() => {
@@ -302,7 +297,7 @@ const MediaWithDraftAnnotation = props => {
       setShouldApplyDraftAnnotation(false);
       setPosition(undefined);
     }
-  }, [draftPosition, parentElementClosest, pos, shouldApplyDraftAnnotation, isCommentsOnMediaBugFixEnabled]);
+  }, [draftPosition, pos, shouldApplyDraftAnnotation, isCommentsOnMediaBugFixEnabled]);
   const applyDraftAnnotation = props.allowAnnotationsDraftMode && shouldApplyDraftAnnotation && position !== undefined;
   const dataAttributesWithDraftAnnotation = useMemo(() => applyDraftAnnotation ? {
     ...dataAttributes,
@@ -311,8 +306,7 @@ const MediaWithDraftAnnotation = props => {
   } : dataAttributes, [applyDraftAnnotation, dataAttributes]);
   return jsx(Media, _extends({}, props, {
     dataAttributes: dataAttributesWithDraftAnnotation,
-    isDrafting: shouldApplyDraftAnnotation,
-    isInPageInclude: !!parentElementClosest
+    isDrafting: shouldApplyDraftAnnotation
   }));
 };
 export default MediaWithDraftAnnotation;

package/dist/es2019/react/nodes/mediaGroup.js

@@ -48,6 +48,7 @@ export default class MediaGroup extends PureComponent {
     } else {
       content = this.renderStrip();
     }
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     return /*#__PURE__*/React.createElement("div", {
       className: "MediaGroup"
     }, content);

package/dist/es2019/react/nodes/multiBodiedExtension.js

@@ -98,12 +98,14 @@ const MultiBodiedExtension = props => {
   const centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
   function renderMbeContent(width) {
     return jsx("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: `${RendererCssClassName.EXTENSION} ${centerAlignClass} ${overflowContainerClass}`,
       style: {
         width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
       },
       "data-layout": layout
     }, jsx("nav", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: "multiBodiedExtension-navigation",
       css: navigationCssExtended,
       "data-testid": "multiBodiedExtension-navigation"
@@ -130,11 +132,14 @@ const MultiBodiedExtension = props => {
         isTopLevel: path.length < 1
       });
     })), jsx("article", {
-      "data-testid": "multiBodiedExtension--frames",
+      "data-testid": "multiBodiedExtension--frames"
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: `multiBodiedExtension--frames`
     }, children));
   }
   return jsx("section", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "multiBodiedExtension--container"
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     ,

package/dist/es2019/react/nodes/orderedList.js

@@ -18,6 +18,7 @@ export default function OrderedList(props) {
     extraProps.start = resolveOrder(props.order);
   }
   return /*#__PURE__*/React.createElement("ol", _extends({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: orderedListSelector.substr(1),
     "data-indent-level": props.path ? getListIndentLevel(props.path) : 1,
     start: props.start

package/dist/es2019/react/nodes/panel.js

@@ -85,12 +85,15 @@ const Panel = props => {
   const icon = getIcon();
   const renderIcon = () => {
     if (icon) {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       return jsx("div", {
         className: PanelSharedCssClassName.icon
       }, icon);
     }
   };
-  return jsx(PanelStyled, {
+  return jsx(PanelStyled
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , {
     className: PanelSharedCssClassName.prefix,
     "data-panel-type": panelType,
     "data-panel-color": panelColor,

package/dist/es2019/react/nodes/table/colgroup.js

@@ -147,11 +147,15 @@ export const Colgroup = props => {
     return null;
   }
   return /*#__PURE__*/React.createElement("colgroup", null, isNumberColumnEnabled && /*#__PURE__*/React.createElement("col", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     style: {
       width: akEditorTableNumberColumnWidth
     },
     "data-test-id": 'num'
-  }), colStyles.map((style, idx) => /*#__PURE__*/React.createElement("col", {
+  }), colStyles.map((style, idx) =>
+  /*#__PURE__*/
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+  React.createElement("col", {
     key: idx,
     style: style
   })));

package/dist/es2019/react/nodes/table/sticky.js

@@ -66,7 +66,9 @@ export const FixedTableDiv = props => {
     mode
   };
   return jsx("div", _extends({}, attrs, {
-    "data-testid": "sticky-table-fixed",
+    "data-testid": "sticky-table-fixed"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: isTableResizingEnabled(rendererAppearance) ? 'fixed-table-div-custom-table-resizing' : '',
     css: fixedTableCss
   }), props.children);
@@ -114,15 +116,19 @@ export const StickyTable = ({
     wrapperWidth: wrapperWidth,
     rendererAppearance: rendererAppearance
   }, jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: `${TableSharedCssClassName.TABLE_CONTAINER} is-sticky ${shadowClassNames || ''}`,
     "data-layout": layout,
     style: {
       width: tableWidth
     }
   }, jsx("div", {
-    ref: innerRef,
+    ref: innerRef
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: `${TableSharedCssClassName.TABLE_STICKY_WRAPPER}`,
     style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       overflow: 'hidden'
     }
   }, jsx(Table, {

package/dist/es2019/react/nodes/table.js

@@ -289,6 +289,7 @@ export class TableContainer extends React.Component {
       updatedLayout = layout;
     }
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: `${TableSharedCssClassName.TABLE_CONTAINER} ${this.props.shadowClassNames || ''}`,
       "data-layout": updatedLayout,
       ref: this.props.handleRef,
@@ -313,6 +314,7 @@ export class TableContainer extends React.Component {
       tableNode: tableNode,
       rendererAppearance: rendererAppearance
     }, [children && children[0]]), /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: TableSharedCssClassName.TABLE_NODE_WRAPPER,
       ref: this.wrapperRef,
       onScroll: this.props.stickyHeaders && this.onWrapperScrolled

package/dist/es2019/react/nodes/tableCell.js

@@ -141,6 +141,7 @@ const getWithCellProps = WrapperComponent => {
       // the background color is not taken from the inline style.
       // Instead it is taken from the data-cell-background attribute
       // (added via getDataAttributes below).
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       ,
       style: getStyle({
         background,
@@ -149,7 +150,9 @@ const getWithCellProps = WrapperComponent => {
         colorMode
       }),
       colorname: colorName,
-      onClick: onClick,
+      onClick: onClick
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: className
     }, getDataAttributes(colwidth, background), {
       "aria-sort": ariaSort
@@ -172,11 +175,13 @@ export const withSortableColumn = WrapperComponent => {
       return /*#__PURE__*/React.createElement(WrapperComponent, props);
     }
     return /*#__PURE__*/React.createElement(WrapperComponent, _extends({}, props, {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: RendererCssClassName.SORTABLE_COLUMN_WRAPPER,
       ariaSort: getSortOrderLabel(intl, sortOrdered)
     }), /*#__PURE__*/React.createElement("div", {
       className: RendererCssClassName.SORTABLE_COLUMN
     }, children, /*#__PURE__*/React.createElement("figure", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: `${RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER} ${sortOrderedClassName}`
     }, /*#__PURE__*/React.createElement(SortingIcon, {
       isSortingAllowed: !!onSorting,