@atlaskit/editor-core 207.14.6 → 207.15.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-core
 
+## 207.15.0
+
+### Minor Changes
+
+- [#166191](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/166191)
+  [`c1b6558e75802`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c1b6558e75802) -
+  It contains popupsMountPoint as the type
+
+### Patch Changes
+
+- Updated dependencies
+
+## 207.14.7
+
+### Patch Changes
+
+- [#165495](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/165495)
+  [`519bee339c2b0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/519bee339c2b0) -
+  refactor emotion styles for task and decisions
+- Updated dependencies
+
 ## 207.14.6
 
 ### Patch Changes

package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js

@@ -11,8 +11,7 @@ var _react2 = require("@emotion/react");
 var _browser = require("@atlaskit/editor-common/browser");
 var _selection = require("@atlaskit/editor-common/selection");
 var _styles = require("@atlaskit/editor-common/styles");
-var _styles2 = require("@atlaskit/editor-plugins/paste-options-toolbar/styles");
-var _styles3 = require("@atlaskit/editor-plugins/placeholder-text/styles");
+var _styles2 = require("@atlaskit/editor-plugins/placeholder-text/styles");
 var _commonStyles = require("@atlaskit/editor-plugins/table/ui/common-styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -23,7 +22,6 @@ var _expand = require("../ContentStyles/expand");
 var _extension = require("../ContentStyles/extension");
 var _panel = require("../ContentStyles/panel");
 var _status = require("../ContentStyles/status");
-var _tasksAndDecisions = require("../ContentStyles/tasks-and-decisions");
 var _aiPanel = require("./styles/aiPanel");
 var _annotationStyles = require("./styles/annotationStyles");
 var _backgroundColorStyles = require("./styles/backgroundColorStyles");
@@ -52,6 +50,7 @@ var _smartCardStyles = require("./styles/smartCardStyles");
 var _tasksAndDecisionsStyles = require("./styles/tasksAndDecisionsStyles");
 var _telepointerStyles = require("./styles/telepointerStyles");
 var _textColorStyles = require("./styles/textColorStyles");
+var _textHighlightStyles = require("./styles/textHighlightStyles");
 var _unsupportedStyles = require("./styles/unsupportedStyles");
 var _whitespaceStyles = require("./styles/whitespaceStyles");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
@@ -104,7 +103,7 @@ var akEditorBreakpointForSmallDevice = "1266px";
 
 // jest warning: JSDOM version (22) doesn't support the new @container CSS rule
 var contentStyles = function contentStyles() {
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: var(--ak-editor-base-font-size);\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\t}\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t *    https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\t", "\n  \t", "\n\n\n  \t", "\n\n\t", "\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  /* This needs to be after telepointer styles as some overlapping rules have equal specificity, and so the order is significant */\n  ", "\n\n  ", ";\n\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  // Switch between the two icons based on the visual refresh feature gate\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n\t.panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n\t is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, _whitespaceStyles.whitespaceStyles, _indentationStyles.indentationStyles, _shadowStyles.shadowStyles, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", _styles3.placeholderTextStyles, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, _codeBlockStyles.codeBlockStyles, !(0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && _editorUGCTokenStyles.editorUGCTokensDefault,
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: var(--ak-editor-base-font-size);\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\t}\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t *    https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\t", "\n  \t", "\n\n\n  \t", "\n\n\t", "\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  /* This needs to be after telepointer styles as some overlapping rules have equal specificity, and so the order is significant */\n  ", "\n\n  ", ";\n\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  // Switch between the two icons based on the visual refresh feature gate\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n\t.panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n\t is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, _whitespaceStyles.whitespaceStyles, _indentationStyles.indentationStyles, _shadowStyles.shadowStyles, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", _styles2.placeholderTextStyles, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, _codeBlockStyles.codeBlockStyles, !(0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && _editorUGCTokenStyles.editorUGCTokensDefault,
   // eslint-disable-next-line @atlaskit/platform/no-preconditioning
   (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && ( /* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
   (0, _platformFeatureFlags.fg)('platform-dst-jira-web-fonts') || (0, _platformFeatureFlags.fg)('confluence_typography_refreshed') || (0, _platformFeatureFlags.fg)('atlas_editor_typography_refreshed')) && _editorUGCTokenStyles.editorUGCTokensRefreshed
@@ -112,15 +111,15 @@ var contentStyles = function contentStyles() {
   // eslint-disable-next-line @atlaskit/platform/no-preconditioning
   (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && /* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
   !((0, _platformFeatureFlags.fg)('platform-dst-jira-web-fonts') || (0, _platformFeatureFlags.fg)('confluence_typography_refreshed') || (0, _platformFeatureFlags.fg)('atlas_editor_typography_refreshed')) && _editorUGCTokenStyles.editorUGCTokensModernized
-  /* eslint-enable @atlaskit/platform/ensure-feature-flag-prefix */, _blockTypeStyles.blocktypeStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && _blockTypeStyles.blocktypeStyles_fg_platform_editor_typography_ugc, !(0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && _blockTypeStyles.blocktypeStyles_without_fg_platform_editor_typography_ugc, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && _blockTypeStyles.blocktypeStyles_fg_platform_editor_nested_dnd_styles_changes, _codeMarkStyles.codeMarkStyles, _textColorStyles.textColorStyles, _backgroundColorStyles.backgroundColorStyles, _list.listsStyles, _rule.ruleStyles, _mediaStyles.mediaStyles, (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _telepointerStyles.telepointerStyle : _telepointerStyles.telepointerStyleWithInitialOnly, _telepointerStyles.telepointerColorAndCommonStyle, _selection.gapCursorStyles, (0, _panel.panelStyles)(), _mentions.mentionsStyles, _tasksAndDecisionsStyles.tasksAndDecisionsStyles, _gridStyles.gridStyles, _blockMarksStyles.blockMarksStyles, _dateStyles.dateStyles, _extension.extensionStyles, (0, _expand.expandStyles)(), _findReplaceStyles.findReplaceStyles, _styles2.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
+  /* eslint-enable @atlaskit/platform/ensure-feature-flag-prefix */, _blockTypeStyles.blocktypeStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && _blockTypeStyles.blocktypeStyles_fg_platform_editor_typography_ugc, !(0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && _blockTypeStyles.blocktypeStyles_without_fg_platform_editor_typography_ugc, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && _blockTypeStyles.blocktypeStyles_fg_platform_editor_nested_dnd_styles_changes, _codeMarkStyles.codeMarkStyles, _textColorStyles.textColorStyles, _backgroundColorStyles.backgroundColorStyles, _list.listsStyles, _rule.ruleStyles, _mediaStyles.mediaStyles, (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _telepointerStyles.telepointerStyle : _telepointerStyles.telepointerStyleWithInitialOnly, _telepointerStyles.telepointerColorAndCommonStyle, _selection.gapCursorStyles, (0, _panel.panelStyles)(), _mentions.mentionsStyles, _tasksAndDecisionsStyles.tasksAndDecisionsStyles, _gridStyles.gridStyles, _blockMarksStyles.blockMarksStyles, _dateStyles.dateStyles, _extension.extensionStyles, (0, _expand.expandStyles)(), _findReplaceStyles.findReplaceStyles, _textHighlightStyles.textHighlightStyle, _tasksAndDecisionsStyles.decisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
-  }) && _tasksAndDecisions.vanillaTaskItemStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
+  }) && _tasksAndDecisionsStyles.vanillaTaskItemStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
-  }) && _tasksAndDecisions.vanillaTaskDecisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
+  }) && _tasksAndDecisionsStyles.vanillaDecisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
-  }) && (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithVisualRefresh, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
+  }) && (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisionsStyles.vanillaDecisionIconWithVisualRefresh, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
-  }) && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithoutVisualRefresh, _status.statusStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? (0, _status.vanillaStatusStyles)() : null, _annotationStyles.annotationStyles, _smartCardStyles.smartCardStyles, _embedCardStyles.embedCardStyles, _unsupportedStyles.unsupportedStyles, _resizerStyles.resizerStyles, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
+  }) && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisionsStyles.vanillaDecisionIconWithoutVisualRefresh, _status.statusStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? (0, _status.vanillaStatusStyles)() : null, _annotationStyles.annotationStyles, _smartCardStyles.smartCardStyles, _embedCardStyles.embedCardStyles, _unsupportedStyles.unsupportedStyles, _resizerStyles.resizerStyles, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
 };
 var CommentEditorMargin = 14;
 

package/dist/cjs/ui/EditorContentContainer/styles/resizerStyles.js

@@ -170,40 +170,40 @@ var pragmaticResizerStyles = exports.pragmaticResizerStyles = (0, _react.css)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
     '&:has([data-prosemirror-node-name="codeBlock"])': {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '> .pm-breakout-resize-handle-left': {
+      '> .pm-breakout-resize-handle-container--left': {
         left: '-12px'
       },
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '> .pm-breakout-resize-handle-right': {
+      '> .pm-breakout-resize-handle-container--right': {
         right: '-12px'
       },
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '> .pm-breakout-resize-handle': {
+      '> .pm-breakout-resize-handle-container': {
         height: 'calc(100% - 12px)'
       }
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
     '&:has([data-prosemirror-node-name="expand"]), &:has([data-prosemirror-node-name="layoutSection"])': {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '> .pm-breakout-resize-handle-left': {
+      '> .pm-breakout-resize-handle-container--left': {
         left: '-32px'
       },
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '> .pm-breakout-resize-handle-right': {
+      '> .pm-breakout-resize-handle-container--right': {
         right: '-32px'
       }
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
     '&:has([data-prosemirror-node-name="expand"])': {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '> .pm-breakout-resize-handle': {
+      '> .pm-breakout-resize-handle-container': {
         height: 'calc(100% - 4px)'
       }
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
     '&:has([data-prosemirror-node-name="layoutSection"])': {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '> .pm-breakout-resize-handle': {
+      '> .pm-breakout-resize-handle-container': {
         height: 'calc(100% - 8px)'
       }
     },
@@ -211,45 +211,69 @@ var pragmaticResizerStyles = exports.pragmaticResizerStyles = (0, _react.css)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
     '&:has(.first-node-in-document)': {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '> .pm-breakout-resize-handle': {
+      '> .pm-breakout-resize-handle-container': {
         height: '100%'
       }
     }
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.pm-breakout-resize-handle': {
+  '.pm-breakout-resize-handle-container': {
+    position: 'relative',
+    alignSelf: 'end',
+    gridRow: 1,
+    gridColumn: 1,
+    height: '100%',
+    width: 7
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.pm-breakout-resize-handle-container--left': {
+    justifySelf: 'start'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.pm-breakout-resize-handle-container--right': {
+    justifySelf: 'end'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.pm-breakout-resize-handle-rail': {
     position: 'relative',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     height: '100%',
-    width: 7,
-    alignSelf: 'end',
-    gridRow: 1,
-    gridColumn: 1,
     cursor: 'col-resize',
     borderRadius: 4,
     transition: 'background-color 0.2s, visibility 0.2s, opacity 0.2s',
     zIndex: 2,
+    opacity: 0,
     '&:hover': {
       background: "var(--ds-background-selected, #E9F2FF)",
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '.pm-breakout-resize-handle-inner': {
+      '.pm-breakout-resize-handle-thumb': {
         background: "var(--ds-border-focused, #388BFF)"
       }
     }
   },
+  // same as 'hover' styles above
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.pm-breakout-resize-handle-left': {
-    justifySelf: 'start'
+  '.pm-breakout-resize-handle-container--active': {
+    background: "var(--ds-background-selected, #E9F2FF)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.pm-breakout-resize-handle-thumb': {
+      background: "var(--ds-border-focused, #388BFF)"
+    }
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.pm-breakout-resize-handle-right': {
-    justifySelf: 'end'
+  '.pm-breakout-resize-handle-hit-box': {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: -20,
+    right: -20,
+    zIndex: 0
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.pm-breakout-resize-handle-inner': {
-    minWidth: "".concat(resizerHandleThumbWidth, "px"),
+  '.pm-breakout-resize-handle-thumb': {
+    minWidth: resizerHandleThumbWidth,
     // copied from resizeStyles.clamped
     height: 'clamp(27px, calc(100% - 32px), 96px)',
     background: "var(--ds-border, #091E4224)",

package/dist/cjs/ui/EditorContentContainer/styles/tasksAndDecisionsStyles.js

@@ -4,18 +4,47 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tasksAndDecisionsStyles = exports.TaskDecisionSharedCssClassName = void 0;
+exports.vanillaTaskItemStyles = exports.vanillaDecisionStyles = exports.vanillaDecisionIconWithoutVisualRefresh = exports.vanillaDecisionIconWithVisualRefresh = exports.tasksAndDecisionsStyles = exports.decisionStyles = exports.TaskDecisionSharedCssClassName = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
+var _selectionStyles = require("./selectionStyles");
 // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
 
 var akEditorLineHeight = 1.714;
+var akEditorSelectedBorderSize = 1;
+var akEditorSelectedNodeClassName = 'ak-editor-selected-node';
 var TaskDecisionSharedCssClassName = exports.TaskDecisionSharedCssClassName = {
   DECISION_CONTAINER: 'decisionItemView-content-wrap',
   TASK_CONTAINER: 'taskItemView-content-wrap',
   TASK_ITEM: 'task-item',
   TASK_CHECKBOX_CONTAINER: 'task-item-checkbox-wrap'
 };
+var decisionSelectionStyles = (0, _react.css)({
+  borderRadius: '4px'
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var decisionStyles = exports.decisionStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-decision-wrapper]': {
+    cursor: 'pointer'
+  }
+}, ".".concat(akEditorSelectedNodeClassName, " > [data-decision-wrapper], ol[data-node-type='decisionList'].").concat(akEditorSelectedNodeClassName),
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+[decisionSelectionStyles,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+_selectionStyles.boxShadowSelectionStyles,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+_selectionStyles.blanketSelectionStyles,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+_selectionStyles.hideNativeBrowserTextSelectionStyles]), '.danger', (0, _defineProperty2.default)({}, ".".concat(TaskDecisionSharedCssClassName.DECISION_CONTAINER, ".").concat(akEditorSelectedNodeClassName, " > div"), {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+  boxShadow: "0 0 0 ".concat(akEditorSelectedBorderSize, "px ", "var(--ds-border-danger, #E2483D)"),
+  backgroundColor: "var(--ds-blanket-danger, #EF5C4814)",
+  '&::after': {
+    content: 'none' // reset the Blanket selection style
+  }
+})));
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var tasksAndDecisionsStyles = exports.tasksAndDecisionsStyles = (0, _react.css)({
@@ -70,4 +99,328 @@ var tasksAndDecisionsStyles = exports.tasksAndDecisionsStyles = (0, _react.css)(
       margin: '0 !important'
     }
   }
-});
+});
+
+// Combine this with taskDecisionStyles (above) when cleaning up the platform_editor_vanilla_dom experiment.
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var vanillaDecisionStyles = exports.vanillaDecisionStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"]': {
+    listStyleType: 'none'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper]': {
+    display: 'flex',
+    flexDirection: 'row',
+    margin: "var(--ds-space-100, 8px)".concat(" 0 0 0"),
+    padding: "var(--ds-space-100, 8px)",
+    paddingLeft: "var(--ds-space-150, 12px)",
+    borderRadius: "var(--ds-border-radius-100, 4px)",
+    backgroundColor: "var(--ds-background-neutral, #091E420F)",
+    position: 'relative'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"]': {
+    flex: '0 0 16px',
+    height: '16px',
+    width: '16px',
+    margin: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-150, 12px)", " 0 0"),
+    color: "var(--ds-icon-subtle, #626F86)",
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"]:not(:has([data-empty]):not(:has([data-type-ahead]))) > [data-decision-wrapper] > [data-component="icon"]': {
+    color: "var(--ds-icon-success, #22A06B)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span': {
+    display: 'inline-block',
+    flexShrink: 0,
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography -- Mirroring icon styles
+    lineHeight: 1
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span > svg': {
+    overflow: 'hidden',
+    pointerEvents: 'none',
+    color: 'currentColor',
+    verticalAlign: 'bottom'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="placeholder"]': {
+    margin: "0 0 0 calc(".concat("var(--ds-space-100, 8px)", " * 3.5)"),
+    position: 'absolute',
+    color: "var(--ds-text-subtlest, #626F86)",
+    pointerEvents: 'none',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    maxWidth: 'calc(100% - 50px)'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"]:not(:has([data-empty]):not(:has([data-type-ahead]))) > [data-decision-wrapper] > [data-component="placeholder"]': {
+    display: 'none'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="content"]': {
+    margin: 0,
+    wordWrap: 'break-word',
+    minWidth: 0,
+    flex: '1 1 auto'
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var vanillaDecisionIconWithVisualRefresh = exports.vanillaDecisionIconWithVisualRefresh = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span >  svg[data-icon-source="legacy"]': {
+    display: 'none'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span': {
+    boxSizing: 'border-box',
+    paddingInlineEnd: 'var(--ds--button--new-icon-padding-end, 0)',
+    paddingInlineStart: 'var(--ds--button--new-icon-padding-start, 0)',
+    '@media screen and (forced-colors: active)': {
+      color: 'canvastext',
+      filter: 'grayscale(1)'
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span > svg': {
+    width: "var(--ds-space-300, 24px)",
+    height: "var(--ds-space-300, 24px)"
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var vanillaDecisionIconWithoutVisualRefresh = exports.vanillaDecisionIconWithoutVisualRefresh = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span >  svg[data-icon-source="refreshed"]': {
+    display: 'none'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span': {
+    width: '32px',
+    height: '32px',
+    '@media screen and (forced-colors: active)': {
+      filter: 'grayscale(1)',
+      color: 'canvastext',
+      fill: 'canvas'
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span > svg': {
+    maxWidth: '100%',
+    maxHeight: '100%',
+    fill: "var(--ds-surface, #FFFFFF)",
+    width: '32px',
+    height: '32px'
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var vanillaTaskItemStyles = exports.vanillaTaskItemStyles = (0, _react.css)((0, _defineProperty2.default)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"]': {
+    listStyle: 'none'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] [data-component="task-item-main"]': {
+    display: 'flex',
+    flexDirection: 'row',
+    position: 'relative'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] [data-component="placeholder"]': {
+    position: 'absolute',
+    color: "var(--ds-text-subtlest, #626F86)",
+    margin: "0 0 0 calc(".concat("var(--ds-space-100, 8px)", " * 3)"),
+    pointerEvents: 'none',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    maxWidth: 'calc(100% - 50px)',
+    display: 'none'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"]:has([data-empty]):not(:has([data-type-ahead])) [data-component="placeholder"]': {
+    display: 'block'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] [data-component="content"]': {
+    margin: 0,
+    wordWrap: 'break-word',
+    minWidth: 0,
+    flex: '1 1 auto'
+  },
+  // copied styles from packages/design-system/icon/src/components/icon-new.tsx
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] [data-component="checkbox-icon-wrap"]': {
+    display: 'inline-block',
+    boxSizing: 'border-box',
+    flexShrink: 0,
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: 1,
+    paddingInlineEnd: 'var(--ds--button--new-icon-padding-end, 0)',
+    paddingInlineStart: 'var(--ds--button--new-icon-padding-start, 0)'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] [data-component="checkbox-icon-wrap"] svg': {
+    overflow: 'hidden',
+    pointerEvents: 'none',
+    color: 'currentColor',
+    verticalAlign: 'bottom',
+    width: "var(--ds-space-200, 16px)",
+    height: "var(--ds-space-200, 16px)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] input[type=checkbox]:not(:checked) + span [data-component=checkbox-checked-icon]': {
+    display: 'none'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] input[type=checkbox]:not(:checked) + span [data-component=checkbox-unchecked-icon]': {
+    display: 'inline'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] input[type=checkbox]:checked + span [data-component=checkbox-checked-icon]': {
+    display: 'inline'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] input[type=checkbox]:checked + span [data-component=checkbox-unchecked-icon]': {
+    display: 'none'
+  }
+}, "[data-prosemirror-node-view-type=\"vanilla\"][data-prosemirror-node-name=\"taskItem\"] .".concat(TaskDecisionSharedCssClassName.TASK_CHECKBOX_CONTAINER), {
+  flex: '0 0 24px',
+  width: '24px',
+  height: '24px',
+  position: 'relative',
+  alignSelf: 'start',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  "& > input[type='checkbox']": {
+    width: '16px',
+    height: '16px',
+    zIndex: 1,
+    cursor: 'pointer',
+    outline: 'none',
+    margin: 0,
+    opacity: 0,
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '&[disabled]': {
+      cursor: 'default'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '+ span': {
+      width: '24px',
+      height: '24px',
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '+ span > svg': {
+      boxSizing: 'border-box',
+      display: 'inline',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      maxWidth: 'unset',
+      maxHeight: 'unset',
+      position: 'absolute',
+      overflow: 'hidden',
+      color: "var(--ds-background-input, #FFFFFF)",
+      transition: 'color 0.2s ease-in-out, fill 0.2s ease-in-out',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+      'path:first-of-type': {
+        visibility: 'hidden'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+      'rect:first-of-type': {
+        stroke: "var(--ds-border-input, #8590A2)",
+        strokeWidth: 1,
+        transition: 'stroke 0.2s ease-in-out'
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&:hover + span > svg': {
+      color: "var(--ds-background-input-hovered, #F7F8F9)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+      'rect:first-of-type': {
+        stroke: "var(--ds-border-input, #8590A2)"
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&:checked:hover + span > svg': {
+      color: "var(--ds-background-selected-bold-hovered, #0055CC)",
+      fill: "var(--ds-icon-inverse, #FFFFFF)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+      'rect:first-of-type': {
+        stroke: "var(--ds-background-selected-bold-hovered, #0055CC)"
+      }
+    },
+    '&:checked': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      '+ span > svg': {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+        'path:first-of-type': {
+          visibility: 'visible'
+        },
+        color: "var(--ds-background-selected-bold, #0C66E4)",
+        fill: "var(--ds-icon-inverse, #FFFFFF)",
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+        'rect:first-of-type': {
+          stroke: "var(--ds-background-selected-bold, #0C66E4)"
+        }
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '&:active + span > svg': {
+      color: "var(--ds-background-input-pressed, #FFFFFF)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+      'rect:first-of-type': {
+        stroke: "var(--ds-border, #091E4224)"
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '&:checked:active + span > svg': {
+      color: "var(--ds-background-input-pressed, #FFFFFF)",
+      fill: "var(--ds-icon-inverse, #FFFFFF)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+      'rect:first-of-type': {
+        stroke: "var(--ds-border, #091E4224)"
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '&:disabled + span > svg, &:disabled:hover + span > svg, &:disabled:focus + span > svg, &:disabled:active + span > svg': {
+      color: "var(--ds-background-disabled, #091E4208)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+      'rect:first-of-type': {
+        stroke: "var(--ds-background-disabled, #091E4208)"
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '&:disabled:checked + span > svg': {
+      fill: "var(--ds-icon-disabled, #091E424F)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '&:focus + span::after': {
+      position: 'absolute',
+      width: "var(--ds-space-200, 16px)",
+      height: "var(--ds-space-200, 16px)",
+      border: "2px solid ".concat("var(--ds-border-focused, #388BFF)"),
+      borderRadius: "var(--ds-space-050, 4px)",
+      content: "''",
+      display: 'block',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)'
+    }
+  }
+}));