@atlaskit/editor-core 214.2.4 → 215.0.1

package/dist/esm/ui/ContentStyles/layout.js

@@ -1,74 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11;
-/**
- * TODO ED-26957 - remove legacy styles when static emotion refactor is complete
- * We are moving this to new location under FF: platform_editor_core_static_emotion
- * New location: packages/editor/editor-core/src/ui/EditorContentContainer.tsx
- * If you are making updates to this file, please updates in new location as well.
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
-import { columnLayoutResponsiveSharedStyle, columnLayoutSharedStyle, LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN } from '@atlaskit/editor-common/styles';
-import { TableCssClassName } from '@atlaskit/editor-plugins/table/types';
-import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, akEditorSwoopCubicBezier, akLayoutGutterOffset, getSelectionStyles, gridMediumMaxWidth, SelectionStyle } from '@atlaskit/editor-shared-styles';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-var AK_NESTED_DND_GUTTER_OFFSET = 8;
-var firstNodeWithNotMarginTop = function firstNodeWithNotMarginTop() {
-  return fg('platform_editor_nested_dnd_styles_changes') ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-  css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t\t\t> :nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget, span)) {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t"]))) : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-  css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t\t\t> :not(style):first-child,\n\t\t\t\t> style:first-child + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t"])));
-};
-// Ignored via go/ees007
-// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
-// TODO handle responsive
-var layoutColumnStyles = function layoutColumnStyles() {
-  return editorExperiment('advanced_layouts', true) ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-  css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t\t\t> [data-layout-column] {\n\t\t\t\t\tmargin: 0 ", "px;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:first-of-type {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:last-of-type {\n\t\t\t\t\tmargin-right: 0;\n\t\t\t\t}\n\n\t\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column].", ":not(.danger) {\n\t\t\t\t\t", ";\n\t\t\t\t\t/* layout column selection shorter after layout border has been removed */\n\t\t\t\t\t::before {\n\t\t\t\t\t\twidth: calc(100% - 8px);\n\t\t\t\t\t\tleft: 4px;\n\t\t\t\t\t\tborder-radius: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), LAYOUT_SECTION_MARGIN / 2, gridMediumMaxWidth, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Blanket]), "var(--ds-radius-small, 3px)") : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-  css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\tmargin-left: ", "px;\n\t\t\t\t}\n\n\t\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\t\tmargin-left: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), LAYOUT_SECTION_MARGIN, gridMediumMaxWidth);
-};
-var layoutSectionStyles = function layoutSectionStyles() {
-  return editorExperiment('advanced_layouts', true) ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-  css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t\t\t\t", ";\n\t\t\t\t.layout-section-container [data-layout-section] {\n\t\t\t\t\t> .ProseMirror-widget {\n\t\t\t\t\t\tflex: none;\n\t\t\t\t\t\tdisplay: contents !important;\n\n\t\t\t\t\t\t&[data-blocks-drag-handle-container] div {\n\t\t\t\t\t\t\tdisplay: contents !important;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&[data-blocks-drop-target-container] {\n\t\t\t\t\t\t\tdisplay: block !important;\n\t\t\t\t\t\t\tmargin: ", ";\n\n\t\t\t\t\t\t\t[data-drop-target-for-element] {\n\t\t\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t& + [data-layout-column] {\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t> [data-layout-column] {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), columnLayoutResponsiveSharedStyle, "var(--ds-space-negative-050, -4px)") : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-  css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t\t\t\t", "\n\t\t\t"])), columnLayoutSharedStyle);
-};
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-var layoutBorderStyles = function layoutBorderStyles(viewMode) {
-  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t/* TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n\tThis is because the default state already uses the same token and, as such, the hover style won't change anything.\n\thttps://product-fabric.atlassian.net/browse/DSP-4441 */\n\t/* Shows the border when cursor is inside a layout */\n\t&.selected [data-layout-column],\n\t&:hover [data-layout-column] {\n\t\tborder: ", "px solid ", ";\n\t}\n\n\t&.selected.danger [data-layout-column] {\n\t\tbackground-color: ", ";\n\t\tborder-color: ", ";\n\t}\n\n\t&.", ":not(.danger) {\n\t\t[data-layout-column] {\n\t\t\t", "\n\t\t\t::after {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\t\t}\n\t}\n"])), viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Border, SelectionStyle.Blanket]));
-};
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-var columnSeparatorStyles = function columnSeparatorStyles(viewMode) {
-  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t[data-layout-content]::before {\n\t\tcontent: '';\n\t\tborder-left: ", "px solid\n\t\t\t", ";\n\t\tposition: absolute;\n\t\theight: calc(100% - 24px);\n\t\tmargin-left: -25px;\n\t}\n"])), viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border, #091E4224)");
-};
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-var rowSeparatorStyles = function rowSeparatorStyles(viewMode) {
-  return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t[data-layout-content]::before {\n\t\tcontent: '';\n\t\tborder-top: ", "px solid\n\t\t\t", ";\n\t\tposition: absolute;\n\t\twidth: calc(100% - 32px);\n\t\tmargin-top: -13px;\n\n\t\t/* clear styles for column separator */\n\t\tborder-left: unset;\n\t\tmargin-left: unset;\n\t\theight: unset;\n\t}\n"])), viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border, #091E4224)");
-};
-
-// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
-var layoutWithSeparatorBorderResponsiveStyles = function layoutWithSeparatorBorderResponsiveStyles(breakpoint, viewMode
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-) {
-  return css(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n\t&.selected,\n\t&:hover,\n\t&.selected.danger,\n\t&.", ":not(.danger) {\n\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t@container editor-area (max-width:", "px) {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), akEditorSelectedNodeClassName, breakpoint, rowSeparatorStyles(viewMode));
-};
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-var layoutWithSeparatorBorderStyles = function layoutWithSeparatorBorderStyles(viewMode) {
-  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-  return css(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n\t\t&.selected [data-layout-column]:not(:first-of-type),\n\t\t[data-empty-layout='true'] [data-layout-column]:not(:first-of-type),\n\t\t&:hover [data-layout-column]:not(:first-of-type) {\n\t\t\t", "\n\t\t}\n\n\t\t&.selected.danger [data-layout-section] {\n\t\t\tbackground-color: ", ";\n\n\t\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t\t", ";\n\t\t\tborder-radius: 4px;\n\t\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t&.", ":not(.danger) [data-layout-section] {\n\t\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t\t", ";\n\t\t\tborder-radius: 4px;\n\t\t\tbackground-color: ", ";\n\t\t\t[data-layout-column] {\n\t\t\t\t", "\n\t\t\t\tborder: 0px;\n\t\t\t\t::before {\n\t\t\t\t\tbackground-color: transparent;\n\t\t\t\t}\n\t\t\t}\n\t\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t"])), columnSeparatorStyles(viewMode), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), viewMode === 'view' ? 0 : akEditorSelectedBorderSize, akEditorDeleteBorder, columnSeparatorStyles(viewMode), akEditorSelectedNodeClassName, viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border-selected, #0C66E4)", "var(--ds-background-selected, #E9F2FF)", getSelectionStyles([SelectionStyle.Blanket]), columnSeparatorStyles(viewMode));
-};
-
-// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
-var layoutResponsiveStyles = function layoutResponsiveStyles(viewMode) {
-  return (// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-    css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\t\t/* chosen breakpoints in container queries are to make sure layout responsiveness in editor aligns with renderer */\n\t\t/* not resized layout in full-width editor */\n\t\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t\t> .layoutSectionView-content-wrap {\n\t\t\t\t[data-layout-section] {\n\t\t\t\t\t@container editor-area (max-width:724px) {\n\t\t\t\t\t\tflex-direction: column;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t/* not resized layout in fixed-width editor */\n\t\t.ak-editor-content-area:not(.fabric-editor--full-width-mode) .ProseMirror {\n\t\t\t> .layoutSectionView-content-wrap {\n\t\t\t\t[data-layout-section] {\n\t\t\t\t\t@container editor-area (max-width:788px) {\n\t\t\t\t\t\tflex-direction: column;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t/* resized layout in full/fixed-width editor */\n\t\t.ProseMirror .fabric-editor-breakout-mark {\n\t\t\t.layoutSectionView-content-wrap {\n\t\t\t\t[data-layout-section] {\n\t\t\t\t\t@container editor-area (max-width:820px) {\n\t\t\t\t\t\tflex-direction: column;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t"])), layoutWithSeparatorBorderResponsiveStyles(724, viewMode), layoutWithSeparatorBorderResponsiveStyles(788, viewMode), layoutWithSeparatorBorderResponsiveStyles(820, viewMode))
-  );
-};
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
-export var layoutStyles = function layoutStyles(viewMode) {
-  return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", "\n\t\t[data-layout-section] {\n\t\t\t/* Ignored via go/ees007\n\t\t\tTODO: Migrate away from gridSize\n\t\t\tRecommendation: Replace directly with 7px */\n\t\t\tmargin: ", " -", "px\n\t\t\t\t0;\n\t\t\ttransition: border-color 0.3s ", ";\n\t\t\tcursor: ", ";\n\n\t\t\t/* Inner cursor located 26px from left */\n\t\t\t[data-layout-column] {\n\t\t\t\tflex: 1;\n\t\t\t\tposition: relative;\n\n\t\t\t\tmin-width: 0;\n\t\t\t\t/* disable 4 borders when in view mode and advanced layouts is on */\n\t\t\t\tborder: ", "px\n\t\t\t\t\tsolid ", ";\n\t\t\t\tborder-radius: 4px;\n\t\t\t\tpadding: ", "px\n\t\t\t\t\t", "px;\n\t\t\t\tbox-sizing: border-box;\n\n\t\t\t\t> div {\n\t\t\t\t\t", "\n\n\t\t\t\t\t> .embedCardView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-child\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor.-right\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-of-type\n\t\t\t\t\t\t+ .embedCardView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t/* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n\t\t\t\t\t> [data-node-type='decisionList'] {\n\t\t\t\t\t\tli:first-of-type [data-decision-wrapper] {\n\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t/* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n\t\t\t\t[data-layout-content] {\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tcursor: text;\n\t\t\t\t\t.mediaGroupView-content-wrap {\n\t\t\t\t\t\tclear: both;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\n\t\t/* styles to support borders for layout */\n\t\t[data-layout-section],\n\t\t.layoutSectionView-content-wrap {\n\t\t\t", "\n\t\t}\n\t}\n\n\t", "\n\n\t/* hide separator when element is dragging on top of a layout column */\n\t[data-blocks-drop-target-container] ~ [data-layout-column] > [data-layout-content]::before {\n\t\tdisplay: none;\n\t}\n\n\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t[data-layout-section] {\n\t\t\t.", " {\n\t\t\t\tmargin: 0 ", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n"])), layoutSectionStyles(), "var(--ds-space-100, 8px)", akLayoutGutterOffset + (fg('platform_editor_nested_dnd_styles_changes') ? AK_NESTED_DND_GUTTER_OFFSET : 0), akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', viewMode === 'view' || editorExperiment('advanced_layouts', true) ? 0 : akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", LAYOUT_COLUMN_PADDING, LAYOUT_COLUMN_PADDING + (fg('platform_editor_nested_dnd_styles_changes') ? 8 : 0), firstNodeWithNotMarginTop(), layoutColumnStyles(), editorExperiment('advanced_layouts', true) ? layoutWithSeparatorBorderStyles(viewMode) : layoutBorderStyles(viewMode), editorExperiment('advanced_layouts', true) && layoutResponsiveStyles(viewMode), TableCssClassName.TABLE_CONTAINER, "var(--ds-space-025, 2px)", editorExperiment('advanced_layouts', false) && fg('platform_editor_nested_dnd_styles_changes') && ".ak-editor-content-area.appearance-full-page .ProseMirror [data-layout-section] {\n\t\t\t\tmargin: ".concat("var(--ds-space-100, 8px)", " -", akLayoutGutterOffset + 8, "px 0;\n\t\t\t\t}"));
-};

package/dist/esm/ui/ContentStyles/media.js

@@ -1,21 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
-import { mediaInlineImageStyles } from '@atlaskit/editor-common/media-inline';
-import { mediaSingleSharedStyleNew, richMediaClassName } from '@atlaskit/editor-common/styles';
-import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorDeleteIconColor, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPaddingWide, akEditorSelectedBorderBoldSize, akEditorSelectedBoxShadow, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-import { fileCardImageViewSelector, inlinePlayerClassName, newFileExperienceClassName } from '@atlaskit/media-card';
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var mediaStyles = function mediaStyles() {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n\t\t\tmargin-left: 50%;\n\t\t\ttransform: translateX(-50%);\n\t\t}\n\n\t\t.media-extended-resize-experience[layout^='wrap-'] {\n\t\t\t/* override 'overflow: auto' when viewport <= 410 set by mediaSingleSharedStyle\n\t\t\tto prevent scroll bar */\n\t\t\toverflow: visible !important;\n\t\t}\n\n\t\t& [layout^='wrap-'] + [layout^='wrap-'] {\n\t\t\tclear: none;\n\t\t\t& + p,\n\t\t\t& + div[class^='fabric-editor-align'],\n\t\t\t& + ul,\n\t\t\t& + ol,\n\t\t\t& + h1,\n\t\t\t& + h2,\n\t\t\t& + h3,\n\t\t\t& + h4,\n\t\t\t& + h5,\n\t\t\t& + h6 {\n\t\t\t\tclear: both !important;\n\t\t\t}\n\t\t\t& .", " {\n\t\t\t\tmargin-left: 0;\n\t\t\t\tmargin-right: 0;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t.mediaSingleView-content-wrap[layout^='wrap-'] {\n\t\t\tmax-width: 100%;\n\t\t\t/* overwrite default Prosemirror setting making it clear: both */\n\t\t\tclear: inherit;\n\t\t}\n\n\t\t.mediaSingleView-content-wrap[layout='wrap-left'] {\n\t\t\tfloat: left;\n\t\t}\n\n\t\t.mediaSingleView-content-wrap[layout='wrap-right'] {\n\t\t\tfloat: right;\n\t\t}\n\n\t\t.mediaSingleView-content-wrap[layout='wrap-right']\n\t\t\t+ .mediaSingleView-content-wrap[layout='wrap-left'] {\n\t\t\tclear: both;\n\t\t}\n\n\t\t/* Larger margins for resize handlers when at depth 0 of the document */\n\t\t& > .mediaSingleView-content-wrap {\n\t\t\t.richMedia-resize-handle-right {\n\t\t\t\tmargin-right: -", "px;\n\t\t\t}\n\t\t\t.richMedia-resize-handle-left {\n\t\t\t\tmargin-left: -", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\t.richMedia-resize-handle-right,\n\t.richMedia-resize-handle-left {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\n\t\t/* vertical align */\n\t\tjustify-content: center;\n\t}\n\n\t.richMedia-resize-handle-right {\n\t\talign-items: flex-end;\n\t\tpadding-right: ", ";\n\t\tmargin-right: -", "px;\n\t}\n\n\t.richMedia-resize-handle-left {\n\t\talign-items: flex-start;\n\t\tpadding-left: ", ";\n\t\tmargin-left: -", "px;\n\t}\n\n\t.richMedia-resize-handle-right::after,\n\t.richMedia-resize-handle-left::after {\n\t\tcontent: ' ';\n\t\tdisplay: flex;\n\t\twidth: 3px;\n\t\theight: 64px;\n\n\t\tborder-radius: 6px;\n\t}\n\n\t.", ":hover .richMedia-resize-handle-left::after,\n\t.", ":hover .richMedia-resize-handle-right::after {\n\t\tbackground: ", ";\n\t}\n\n\t.", " .richMedia-resize-handle-right::after,\n\t.", " .richMedia-resize-handle-left::after,\n\t.", " .richMedia-resize-handle-right:hover::after,\n\t.", " .richMedia-resize-handle-left:hover::after,\n\t.", ".is-resizing .richMedia-resize-handle-right::after,\n\t.", ".is-resizing .richMedia-resize-handle-left::after {\n\t\tbackground: ", ";\n\t}\n\n\t.__resizable_base__ {\n\t\tleft: unset !important;\n\t\twidth: auto !important;\n\t\theight: auto !important;\n\t}\n\n\t/* Danger when top level node for smart cards / inline links */\n\t.danger > div > div > .media-card-frame,\n\t.danger > span > a {\n\t\tbackground-color: ", ";\n\t\tbox-shadow: 0px 0px 0px ", "px\n\t\t\t", ";\n\t\ttransition:\n\t\t\tbackground-color 0s,\n\t\t\tbox-shadow 0s;\n\t}\n\t/* Danger when nested node or common */\n\t.danger {\n\t\t/* Media single */\n\t\t.", " .", "::after {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t/* Media single video player */\n\t\t.", " .", "::after {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t/* New file experience */\n\t\t.", " .", " {\n\t\t\tbox-shadow: 0 0 0 1px ", " !important;\n\t\t}\n\t\t/* Media resize legacy handlers */\n\t\t.richMedia-resize-handle-right::after,\n\t\t.richMedia-resize-handle-left::after {\n\t\t\tbackground: ", " !important;\n\t\t}\n\t\t/* Media resize new handlers */\n\t\t.resizer-handle-thumb {\n\t\t\tbackground: ", " !important;\n\t\t}\n\n\t\t/* Smart cards */\n\t\tdiv div .media-card-frame,\n\t\t.inlineCardView-content-wrap > span > a {\n\t\t\tbackground-color: ", "; /* R75 with 50% opactiy */\n\t\t\ttransition: background-color 0s;\n\t\t}\n\n\t\tdiv div .media-card-frame::after {\n\t\t\tbox-shadow: none;\n\t\t}\n\t}\n\n\t.warning {\n\t\t/* Media single */\n\t\t.", " .", "::after {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\n\t\t.", " .", "::after {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\n\t\t.", " .", " {\n\t\t\tbox-shadow: 0 0 0 1px ", " !important;\n\t\t}\n\n\t\t.resizer-handle-thumb {\n\t\t\tbackground: ", " !important;\n\t\t}\n\t}\n\n\t.media-filmstrip-list-item {\n\t\tcursor: pointer;\n\t}\n\n\t/* When clicking drag handle, mediaGroup node will be selected. Hence we need to apply selected style to each media node */\n\t.mediaGroupView-content-wrap.", " #newFileExperienceWrapper {\n\t\tbox-shadow: ", ";\n\t}\n"])), mediaSingleSharedStyleNew, richMediaClassName, richMediaClassName, richMediaClassName, mediaInlineImageStyles, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPaddingWide, "var(--ds-space-150, 12px)", akEditorMediaResizeHandlerPadding, "var(--ds-space-150, 12px)", akEditorMediaResizeHandlerPadding, richMediaClassName, richMediaClassName, "var(--ds-border, #091E4224)", akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, "var(--ds-border-focused, #388BFF)", "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), richMediaClassName, fileCardImageViewSelector, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, inlinePlayerClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, newFileExperienceClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))", richMediaClassName, fileCardImageViewSelector, "var(--ds-border-warning, #E56910)", richMediaClassName, inlinePlayerClassName, "var(--ds-border-warning, #E56910)", richMediaClassName, newFileExperienceClassName, "var(--ds-border-warning, #E56910)", "var(--ds-icon-warning, #E56910)", akEditorSelectedNodeClassName, akEditorSelectedBoxShadow);
-};
-
-/* `left: unset` above is to work around Chrome bug where rendering a div with
- * that style applied inside a container that has a scroll, causes any svgs on
- * the page, without a border, that are inside a flexbox, to no longer align to
- * the center of their viewbox.
- *
- * for us, this means that all the toolbar icons start jumping around if
- * you make the viewport small
- */

package/dist/esm/ui/ContentStyles/panel.js

@@ -1,11 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
-import { PanelSharedCssClassName, panelSharedStyles } from '@atlaskit/editor-common/panel';
-import { akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorDeleteIconColor, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
-import { fg } from '@atlaskit/platform-feature-flags';
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation due to mixin usage
-export var panelStyles = function panelStyles() {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t.", " {\n\t\t\tcursor: pointer;\n\n\t\t\t/* Danger when top level node */\n\t\t\t&.danger {\n\t\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\t\tbackground-color: ", " !important;\n\n\t\t\t\t.", " {\n\t\t\t\t\tcolor: ", " !important;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tcursor: text;\n\t\t}\n\n\t\t/* Danger when nested node */\n\t\t.danger .", " {\n\t\t\t&[data-panel-type] {\n\t\t\t\tbackground-color: ", ";\n\n\t\t\t\t.", " {\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t", ";\n\t}\n\n\t.", ".", ":not(.danger) {\n\t\t", "\n\t}\n\n\t", ";\n\n\t/* Don't want extra padding for inline editor (nested) */\n\t", ";\n"])), PanelSharedCssClassName.prefix, akEditorSelectedBorderSize, akEditorDeleteBorder, "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), PanelSharedCssClassName.icon, "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), PanelSharedCssClassName.content, PanelSharedCssClassName.prefix, "var(--ds-blanket-danger, ".concat(akEditorDeleteBackgroundWithOpacity, ")"), PanelSharedCssClassName.icon, "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), panelSharedStyles(), PanelSharedCssClassName.prefix, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), fg('platform_editor_nested_dnd_styles_changes') && ".ak-editor-content-area.appearance-full-page .ProseMirror {\n\t\t.ak-editor-panel .".concat(PanelSharedCssClassName.icon, " {\n\t\t\tpadding-right: ", "var(--ds-space-150, 12px)", ";\n\t\t}\n\n\t\t.ak-editor-panel.").concat(PanelSharedCssClassName.noIcon, " {\n\t\t\tpadding-left: ", "var(--ds-space-250, 20px)", ";\n\t\t\tpadding-right: ", "var(--ds-space-250, 20px)", ";\n\t\t}\n\t}"), fg('platform_editor_nested_dnd_styles_changes') && ".ak-editor-content-area .ak-editor-content-area .ProseMirror {\n\t\t.ak-editor-panel .".concat(PanelSharedCssClassName.icon, " {\n\t\t\tpadding-right: ", "var(--ds-space-100, 8px)", ";\n\t\t}\n\t\t.ak-editor-panel.").concat(PanelSharedCssClassName.noIcon, " {\n\t\t\tpadding-right: ", "var(--ds-space-150, 12px)", ";\n\t\t\tpadding-left: ", "var(--ds-space-150, 12px)", ";\n\t\t}\n\t}"));
-};

package/dist/esm/ui/ContentStyles/status.js

@@ -1,152 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
-import { StatusSharedCssClassName, TableSharedCssClassName } from '@atlaskit/editor-common/styles';
-import { akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, akEditorSelectedBoldBoxShadow, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
-var getVisualRefreshStatusStyles = function getVisualRefreshStatusStyles() {
-  return (
-    // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-    fg('platform-component-visual-refresh') ? expValEqualsNoExposure('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? css(_defineProperty({}, "&.".concat(akEditorSelectedNodeClassName, ":not('.search-match-block') .").concat(StatusSharedCssClassName.STATUS_LOZENGE, " > span"), {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      boxShadow: akEditorSelectedBoldBoxShadow
-    })) : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-    css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t\t\t\t&.", " .", " > span {\n\t\t\t\t\t\tbox-shadow: ", ";\n\t\t\t\t\t}\n\t\t\t\t"])), akEditorSelectedNodeClassName, StatusSharedCssClassName.STATUS_LOZENGE, akEditorSelectedBoldBoxShadow) : expValEqualsNoExposure('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-    css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t\t\t\t&.", ":not('.search-match-block')\n\t\t\t\t\t\t.", "\n\t\t\t\t\t\t> span {\n\t\t\t\t\t\t", "\n\t\t\t\t\t}\n\t\t\t\t"])), akEditorSelectedNodeClassName, StatusSharedCssClassName.STATUS_LOZENGE, getSelectionStyles([SelectionStyle.BoxShadow])) : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-    css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t\t\t\t&.", " .", " > span {\n\t\t\t\t\t\t", "\n\t\t\t\t\t}\n\t\t\t\t"])), akEditorSelectedNodeClassName, StatusSharedCssClassName.STATUS_LOZENGE, getSelectionStyles([SelectionStyle.BoxShadow]))
-  );
-};
-var getStatusColors = function getStatusColors() {
-  return fg('platform-component-visual-refresh') ? css({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-prosemirror-node-name="status"] .lozenge-text': {
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-      color: '#292A2E'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-prosemirror-node-name="status"] > [data-color=neutral] > .lozenge-wrapper': {
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-      backgroundColor: '#DDDEE1'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-prosemirror-node-name="status"] > [data-color=purple] > .lozenge-wrapper': {
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-      backgroundColor: '#D8A0F7'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-prosemirror-node-name="status"] > [data-color=blue] > .lozenge-wrapper': {
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-      backgroundColor: '#8FB8F6'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-prosemirror-node-name="status"] > [data-color=yellow] > .lozenge-wrapper': {
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-      backgroundColor: '#F9C84E'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-prosemirror-node-name="status"] > [data-color=red] > .lozenge-wrapper': {
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-      backgroundColor: '#FD9891'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-prosemirror-node-name="status"] > [data-color=green] > .lozenge-wrapper': {
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-      backgroundColor: '#B3DF72'
-    }
-  }) : css({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-prosemirror-node-name="status"] > [data-color=neutral] .lozenge-wrapper': {
-      backgroundColor: "var(--ds-background-neutral, #091E420F)"
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-prosemirror-node-name="status"] > [data-color=neutral] .lozenge-text': {
-      color: "var(--ds-text-subtle, #44546F)"
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-prosemirror-node-name="status"] > [data-color=purple] .lozenge-wrapper': {
-      backgroundColor: "var(--ds-background-discovery, #F3F0FF)"
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-prosemirror-node-name="status"] > [data-color=purple] .lozenge-text': {
-      color: "var(--ds-text-discovery, #5E4DB2)"
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-prosemirror-node-name="status"] > [data-color=blue] .lozenge-wrapper': {
-      backgroundColor: "var(--ds-background-information, #E9F2FF)"
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-prosemirror-node-name="status"] > [data-color=blue] .lozenge-text': {
-      color: "var(--ds-text-information, #0055CC)"
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-prosemirror-node-name="status"] > [data-color=yellow] .lozenge-wrapper': {
-      backgroundColor: "var(--ds-background-warning, #FFF7D6)"
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-prosemirror-node-name="status"] > [data-color=yellow] .lozenge-text': {
-      color: "var(--ds-text-warning, #A54800)"
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-prosemirror-node-name="status"] > [data-color=red] .lozenge-wrapper': {
-      backgroundColor: "var(--ds-background-danger, #FFECEB)"
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-prosemirror-node-name="status"] > [data-color=red] .lozenge-text': {
-      color: "var(--ds-text-danger, #AE2E24)"
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-prosemirror-node-name="status"] > [data-color=green] .lozenge-wrapper': {
-      backgroundColor: "var(--ds-background-success, #DCFFF1)"
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-prosemirror-node-name="status"] > [data-color=green] .lozenge-text': {
-      color: "var(--ds-text-success, #216E4E)"
-    }
-  });
-};
-var baseStatusStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-prosemirror-node-name="status"] .lozenge-wrapper': {
-    backgroundColor: "var(--ds-background-neutral, #091E420F)",
-    maxWidth: '100%',
-    paddingInline: "var(--ds-space-050, 4px)",
-    display: 'inline-flex',
-    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
-    borderRadius: "var(--ds-radius-small, 3px)",
-    blockSize: 'min-content',
-    position: 'static',
-    overflow: 'hidden',
-    boxSizing: 'border-box',
-    appearance: 'none',
-    border: 'none'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-prosemirror-node-name="status"] .lozenge-text': {
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    fontSize: '11px',
-    fontStyle: 'normal',
-    fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-    fontWeight: "var(--ds-font-weight-bold, 700)",
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    lineHeight: '16px',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    textTransform: 'uppercase',
-    whiteSpace: 'nowrap',
-    maxWidth: "calc(200px - ".concat("var(--ds-space-100, 8px)", ")")
-  }
-});
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var statusNodeStyles = function statusNodeStyles() {
-  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t", "\n\t", "\n"])), baseStatusStyles, getStatusColors());
-};
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var statusStyles = function statusStyles() {
-  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t.", ",\n\t\t.", ",\n\t\t[data-layout-section] {\n\t\t.", " {\n\t\t\tmax-width: 100%;\n\t\t\tline-height: 0;\n\n\t\t\t> span {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t> span {\n\t\t\tcursor: pointer;\n\t\t\tline-height: 0; /* Prevent responsive layouts increasing height of container. */\n\t\t}\n\n\t\t", "\n\t}\n\n\t.danger {\n\t\t.", " > span {\n\t\t\tbackground-color: ", ";\n\t\t}\n\n\t\t.", ".", "\n\t\t\t.", "\n\t\t\t> span {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t}\n\t}\n"])), TableSharedCssClassName.TABLE_CELL_WRAPPER, TableSharedCssClassName.TABLE_HEADER_CELL_WRAPPER, StatusSharedCssClassName.STATUS_CONTAINER, StatusSharedCssClassName.STATUS_CONTAINER, getVisualRefreshStatusStyles(), StatusSharedCssClassName.STATUS_LOZENGE, akEditorDeleteBackgroundWithOpacity, StatusSharedCssClassName.STATUS_CONTAINER, akEditorSelectedNodeClassName, StatusSharedCssClassName.STATUS_LOZENGE, akEditorSelectedBorderSize, akEditorDeleteBorder);
-};