@atlaskit/editor-core 197.7.0 → 197.7.2

package/dist/es2019/ui/Appearance/Comment/Comment.js

@@ -17,8 +17,6 @@ import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-me
 import { tableCommentEditorStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
 import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { N100 } from '@atlaskit/theme/colors';
-import { borderRadius } from '@atlaskit/theme/constants';
 import messages from '../../../messages';
 import { ClickAreaBlock } from '../../Addon';
 import { createEditorContentStyle } from '../../ContentStyles';
@@ -37,10 +35,10 @@ const commentEditorStyles = css({
   minWidth: '272px',
   height: 'auto',
   backgroundColor: "var(--ds-background-input, white)",
-  border: `1px solid ${`var(--ds-border-input, ${N100})`}`,
+  border: `1px solid ${"var(--ds-border-input, #8590A2)"}`,
   boxSizing: 'border-box',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderRadius: `${borderRadius()}px`,
+  borderRadius: "var(--ds-border-radius, 3px)",
   maxWidth: 'inherit',
   wordWrap: 'break-word'
 });

package/dist/es2019/ui/ChromeCollapsed/styles.js

@@ -1,8 +1,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { akEditorSubtleAccent, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { N300, N50 } from '@atlaskit/theme/colors';
-import { borderRadius } from '@atlaskit/theme/constants';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const inputStyle = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
@@ -11,7 +9,7 @@ export const inputStyle = css({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     border: `1px solid ${`var(--ds-border-input, ${akEditorSubtleAccent})`}`,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    borderRadius: `${borderRadius()}px`,
+    borderRadius: "var(--ds-border-radius, 3px)",
     boxSizing: 'border-box',
     height: '40px',
     paddingLeft: "var(--ds-space-250, 20px)",
@@ -23,10 +21,10 @@ export const inputStyle = css({
     fontWeight: 400,
     lineHeight: 1.42857142857143,
     letterSpacing: '-0.005em',
-    color: `var(--ds-text-subtlest, ${N300})`,
+    color: "var(--ds-text-subtlest, #626F86)",
     '&:hover': {
       backgroundColor: "var(--ds-background-input-hovered, white)",
-      borderColor: `var(--ds-border-input, ${N50})`,
+      borderColor: "var(--ds-border-input, #8590A2)",
       cursor: 'text'
     }
   }

package/dist/es2019/ui/ContentStyles/ai-panels.js

@@ -1,6 +1,5 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, keyframes } from '@emotion/react';
-import { N0, N500, R400 } from '@atlaskit/theme/colors';
 const isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
 const rotationAnimation = keyframes({
   '0%': {
@@ -68,7 +67,7 @@ const prismBorderStyles = (colorMode, hover) => css({
   transform: 'translate3d(0, 0, 0)',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   ...(hover ? {
-    background: `var(--ds-border-input, ${N500})`
+    background: "var(--ds-border-input, #8590A2)"
   } : isFirefox ? {
     background: `linear-gradient(90deg,
 								${aiPrismColor['prism.border.step.1'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light']} 0%,
@@ -112,7 +111,7 @@ export const aiPanelStyles = colorMode => css`
 			position: relative;
 			box-shadow: none;
 			overflow: unset;
-			background-color: ${`var(--ds-surface, ${N0})`} !important;
+			background-color: ${"var(--ds-surface, #FFFFFF)"} !important;
 			&::before,
 			&::after {
 				${prismBorderStyles(colorMode)}
@@ -124,7 +123,7 @@ export const aiPanelStyles = colorMode => css`
 				}
 			}
 			& .with-margin-styles {
-				background-color: ${`var(--ds-surface, ${N0})`} !important;
+				background-color: ${"var(--ds-surface, #FFFFFF)"} !important;
 				border-radius: ${"var(--ds-border-radius-100, 3px)"};
 			}
 		}
@@ -146,7 +145,7 @@ export const aiPanelStyles = colorMode => css`
 	// This styles the ai panel correctly when a user is hovering over the delete button in the floating panel
 	div[extensionType='com.atlassian.ai-blocks'].danger {
 		.extension-container {
-			box-shadow: 0 0 0 1px ${`var(--ds-border-danger, ${R400})`};
+			box-shadow: 0 0 0 1px ${"var(--ds-border-danger, #E2483D)"};
 		}
 	}
 

package/dist/es2019/ui/ContentStyles/code-block.js

@@ -3,7 +3,6 @@
 import { css } from '@emotion/react';
 import { CodeBlockSharedCssClassName, codeBlockSharedStyles } from '@atlaskit/editor-common/styles';
 import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorDeleteIconColor, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, blockNodesVerticalMargin, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
-import { R75 } from '@atlaskit/theme/colors';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 const GutterDangerOverlay = () => css`
 	&::after {
@@ -63,7 +62,7 @@ export const codeBlockStyles = () => css`
 			${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
 
 		.${CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER} {
-			background-color: ${`var(--ds-background-danger, ${R75})`};
+			background-color: ${"var(--ds-background-danger, #FFECEB)"};
 			color: ${`var(--ds-text-danger, ${akEditorDeleteIconColor})`};
 			${GutterDangerOverlay()};
 		}

package/dist/es2019/ui/ContentStyles/expand.js

@@ -1,16 +1,15 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { BreakoutCssClassName, expandClassNames, sharedExpandStyles } from '@atlaskit/editor-common/styles';
-import { akEditorSelectedNodeClassName, akLayoutGutterOffset, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
+import { akEditorSelectedBorder, akEditorSelectedNodeClassName, akLayoutGutterOffset, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { N100A, N40A, N50A, R300, R50 } from '@atlaskit/theme/colors';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 const EXPAND_SELECTED_BACKGROUND = "var(--ds-background-neutral-subtle, rgba(255, 255, 255, 0.6))";
 const EXPAND_ICON_COLOR = () => css({
-  color: `var(--ds-icon-subtle, ${N100A})`
+  color: "var(--ds-icon-subtle, #626F86)"
 });
-const DANGER_STATE_BACKGROUND_COLOR = `var(--ds-background-danger, ${R50})`;
-const DANGER_STATE_BORDER_COLOR = `var(--ds-border-danger, ${R300})`;
+const DANGER_STATE_BACKGROUND_COLOR = "var(--ds-background-danger, #FFECEB)";
+const DANGER_STATE_BORDER_COLOR = "var(--ds-border-danger, #E2483D)";
 const firstNodeWithNotMarginTop = () => editorExperiment('nested-dnd', true) ?
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
 css`
@@ -49,7 +48,7 @@ export const expandStyles = () => css`
 		}
 
 		&.${akEditorSelectedNodeClassName}:not(.danger) {
-			${getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.Border])}
+			${editorExperiment('nested-dnd', true) ? getSelectionStyles([SelectionStyle.Blanket]) + `border: ${akEditorSelectedBorder};` : getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.Border])}
 		}
 
 		&.danger {
@@ -88,7 +87,7 @@ export const expandStyles = () => css`
 
 	.${expandClassNames.expanded} {
 		background: ${EXPAND_SELECTED_BACKGROUND};
-		border-color: ${`var(--ds-border, ${N40A})`};
+		border-color: ${"var(--ds-border, #091E4224)"};
 
 		.${expandClassNames.content} {
 			padding-top: ${"var(--ds-space-100, 8px)"};
@@ -129,7 +128,7 @@ export const expandStyles = () => css`
 			border-color: transparent;
 
 			&:hover {
-				border-color: ${`var(--ds-border, ${N50A})`};
+				border-color: ${"var(--ds-border, #091E4224)"};
 				background: ${EXPAND_SELECTED_BACKGROUND};
 			}
 		}

package/dist/es2019/ui/ContentStyles/extension.js

@@ -1,19 +1,18 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, blockNodesVerticalMargin, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
-import { B400, B50, R400, R50 } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 const extensionLabelStyles = css`
 	&.danger > span > div > .extension-label {
-		background-color: ${`var(--ds-background-accent-red-subtler, ${R50})`};
-		color: ${`var(--ds-text-danger, ${R400})`};
+		background-color: ${"var(--ds-background-accent-red-subtler, #FFD5D2)"};
+		color: ${"var(--ds-text-danger, #AE2E24)"};
 		opacity: 1;
 		box-shadow: none;
 	}
 
 	&:not(.danger).${akEditorSelectedNodeClassName} > span > div > .extension-label {
-		background-color: ${`var(--ds-background-selected, ${B50})`};
-		color: ${`var(--ds-text-selected, ${B400})`};
+		background-color: ${"var(--ds-background-selected, #E9F2FF)"};
+		color: ${"var(--ds-text-selected, #0C66E4)"};
 		opacity: 1;
 		box-shadow: none;
 	}

package/dist/es2019/ui/ContentStyles/index.js

@@ -24,7 +24,6 @@ import { textHighlightStyle } from '@atlaskit/editor-plugins/paste-options-toolb
 import { placeholderTextStyles } from '@atlaskit/editor-plugins/placeholder-text/styles';
 import { akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorDefaultLayoutWidth, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorSelectedBorderColor, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, blockNodesVerticalMargin, editorFontSize, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { N200, N30A, N500 } from '@atlaskit/theme/colors';
 import { useThemeObserver } from '@atlaskit/tokens';
 import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
 import { usePresetContext } from '../../presets/context';
@@ -68,7 +67,7 @@ const mentionsStyles = css`
 
 			/* need to specify dark text colour because personal mentions
          (in dark blue) have white text by default */
-      color: ${`var(--ds-text-subtle, ${N500})`};
+      color: ${"var(--ds-text-subtle, #44546F)"};
 		}
 	}
 
@@ -81,8 +80,8 @@ const mentionsStyles = css`
 			background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackgroundWithOpacity})`};
 		}
 		.${MentionSharedCssClassName.MENTION_CONTAINER} > span > span > span {
-			background-color: ${`var(--ds-background-neutral, ${N30A})`};
-			color: ${`var(--ds-text-subtle, ${N500})`};
+			background-color: ${"var(--ds-background-neutral, #091E420F)"};
+			color: ${"var(--ds-text-subtle, #44546F)"};
 		}
 	}
 `;
@@ -136,7 +135,7 @@ const emojiStyles = css`
 export const placeholderStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '.ProseMirror .placeholder-decoration': {
-    color: `var(--ds-text-subtlest, ${N200})`,
+    color: "var(--ds-text-subtlest, #626F86)",
     width: '100%',
     pointerEvents: 'none',
     userSelect: 'none',

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

@@ -4,7 +4,6 @@ import { columnLayoutSharedStyle, LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN }
 import { TableCssClassName } from '@atlaskit/editor-plugins/table/types';
 import { tableMarginFullWidthMode } from '@atlaskit/editor-plugins/table/ui/consts';
 import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, akEditorSwoopCubicBezier, akLayoutGutterOffset, getSelectionStyles, gridMediumMaxWidth, SelectionStyle } from '@atlaskit/editor-shared-styles';
-import { N40A, N50A } from '@atlaskit/theme/colors';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN };
 const firstNodeWithNotMarginTop = () => editorExperiment('nested-dnd', true) ?
@@ -46,7 +45,7 @@ export const layoutStyles = viewMode => css`
 				flex: 1;
 				min-width: 0;
 				border: ${viewMode === 'view' ? 0 : akEditorSelectedBorderSize}px solid
-					${`var(--ds-border, ${N40A})`};
+					${"var(--ds-border, #091E4224)"};
 				border-radius: 4px;
 				padding: ${LAYOUT_COLUMN_PADDING}px
 					${LAYOUT_COLUMN_PADDING + (editorExperiment('nested-dnd', true) ? 8 : 0)}px;
@@ -125,7 +124,7 @@ export const layoutStyles = viewMode => css`
 			&.selected [data-layout-column],
 			&:hover [data-layout-column] {
 				border: ${viewMode === 'view' ? 0 : akEditorSelectedBorderSize}px solid
-					${`var(--ds-border, ${N50A})`};
+					${"var(--ds-border, #091E4224)"};
 			}
 
 			&.selected.danger > [data-layout-column] {

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

@@ -4,7 +4,6 @@ import { mediaInlineImageStyles } from '@atlaskit/editor-common/media-inline';
 import { mediaSingleSharedStyle, 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';
-import { B200, N60, Y500 } from '@atlaskit/theme/colors';
 // 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 const mediaStyles = css`
 	.ProseMirror {
@@ -105,7 +104,7 @@ export const mediaStyles = css`
 
 	.${richMediaClassName}:hover .richMedia-resize-handle-left::after,
 	.${richMediaClassName}:hover .richMedia-resize-handle-right::after {
-		background: ${`var(--ds-border, ${N60})`};
+		background: ${"var(--ds-border, #091E4224)"};
 	}
 
 	.${akEditorSelectedNodeClassName} .richMedia-resize-handle-right::after,
@@ -114,7 +113,7 @@ export const mediaStyles = css`
 	.${richMediaClassName} .richMedia-resize-handle-left:hover::after,
 	.${richMediaClassName}.is-resizing .richMedia-resize-handle-right::after,
 	.${richMediaClassName}.is-resizing .richMedia-resize-handle-left::after {
-		background: ${`var(--ds-border-focused, ${B200})`};
+		background: ${"var(--ds-border-focused, #388BFF)"};
 	}
 
 	.__resizable_base__ {
@@ -172,19 +171,19 @@ export const mediaStyles = css`
 	.warning {
 		/* Media single */
 		.${richMediaClassName} .${fileCardImageViewSelector}::after {
-			border: 1px solid ${`var(--ds-border-warning, ${Y500})`};
+			border: 1px solid ${"var(--ds-border-warning, #E56910)"};
 		}
 
 		.${richMediaClassName} .${inlinePlayerClassName}::after {
-			border: 1px solid ${`var(--ds-border-warning, ${Y500})`};
+			border: 1px solid ${"var(--ds-border-warning, #E56910)"};
 		}
 
 		.${richMediaClassName} .${newFileExperienceClassName} {
-			box-shadow: 0 0 0 1px ${`var(--ds-border-warning, ${Y500})`} !important;
+			box-shadow: 0 0 0 1px ${"var(--ds-border-warning, #E56910)"} !important;
 		}
 
 		.resizer-handle-thumb {
-			background: ${`var(--ds-icon-warning, ${Y500})`} !important;
+			background: ${"var(--ds-icon-warning, #E56910)"} !important;
 		}
 	}
 

package/dist/es2019/ui/ContextPanel/index.js

@@ -12,7 +12,6 @@ import Transition from 'react-transition-group/Transition';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { ContextPanelConsumer } from '@atlaskit/editor-common/ui';
 import { akEditorContextPanelWidth, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
-import { N30 } from '@atlaskit/theme/colors';
 const ANIM_SPEED_MS = 500;
 const panelHidden = css({
   width: 0
@@ -26,7 +25,7 @@ export const panel = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   transition: `width ${ANIM_SPEED_MS}ms ${akEditorSwoopCubicBezier}`,
   overflow: 'hidden',
-  boxShadow: `inset 2px 0 0 0 ${`var(--ds-border, ${N30})`}`
+  boxShadow: `inset 2px 0 0 0 ${"var(--ds-border, #091E4224)"}`
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766

package/dist/es2019/ui/ToolbarFeedback/styles.js

@@ -1,8 +1,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { N400, N60A, P400 } from '@atlaskit/theme/colors';
-import { borderRadius } from '@atlaskit/theme/constants';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const buttonContent = css({
   display: 'flex',
@@ -19,10 +17,10 @@ export const wrapper = css({
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const confirmationPopup = css({
-  background: "var(--ds-surface-overlay, #fff)",
+  background: "var(--ds-surface-overlay, #FFFFFF)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderRadius: `${borderRadius()}px`,
-  boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`,
+  borderRadius: "var(--ds-border-radius, 3px)",
+  boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)",
   display: 'flex',
   flexDirection: 'column',
   boxSizing: 'border-box',
@@ -38,7 +36,7 @@ export const confirmationText = css({
   fontSize: relativeFontSizeToBase16(14),
   wordSpacing: '4px',
   lineHeight: '22px',
-  color: `var(--ds-text-subtle, ${N400})`,
+  color: "var(--ds-text-subtle, #44546F)",
   marginTop: "var(--ds-space-400, 32px)",
   padding: "var(--ds-space-250, 20px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -57,7 +55,7 @@ export const confirmationText = css({
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const confirmationHeader = css({
-  backgroundColor: `var(--ds-background-discovery-bold, ${P400})`,
+  backgroundColor: "var(--ds-background-discovery-bold, #6E5DC6)",
   height: '100px',
   width: '100%',
   display: 'inline-block'

package/dist/es2019/ui/WithFlash/index.js

@@ -7,21 +7,20 @@ import React from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx, keyframes } from '@emotion/react';
-import { R100 } from '@atlaskit/theme/colors';
 const pulseBackground = keyframes({
   '50%': {
-    backgroundColor: `var(--ds-blanket-danger, ${R100})`
+    backgroundColor: "var(--ds-blanket-danger, #EF5C4814)"
   }
 });
 const pulseBackgroundReverse = keyframes({
   '0%': {
-    backgroundColor: `var(--ds-blanket-danger, ${R100})`
+    backgroundColor: "var(--ds-blanket-danger, #EF5C4814)"
   },
   '50%': {
     backgroundColor: 'auto'
   },
   '100%': {
-    backgroundColor: `var(--ds-blanket-danger, ${R100})`
+    backgroundColor: "var(--ds-blanket-danger, #EF5C4814)"
   }
 });
 const flashWrapper = css({

package/dist/es2019/version-wrapper.js

@@ -1,2 +1,2 @@
 export const name = "@atlaskit/editor-core";
-export const version = "197.7.0";
+export const version = "197.7.2";

package/dist/esm/create-editor/ReactEditorView.js

@@ -22,11 +22,12 @@ import { startMeasure, stopMeasure } from '@atlaskit/editor-common/performance-m
 import { measureRender } from '@atlaskit/editor-common/performance/measure-render';
 import { getResponseEndTime } from '@atlaskit/editor-common/performance/navigation';
 import { EditorPluginInjectionAPI } from '@atlaskit/editor-common/preset';
-import { processRawValue } from '@atlaskit/editor-common/process-raw-value';
+import { processRawValue, processRawValueWithoutTransformation } from '@atlaskit/editor-common/process-raw-value';
 import { EditorExperience, ExperienceStore, RELIABILITY_INTERVAL } from '@atlaskit/editor-common/ufo';
 import { analyticsEventKey, getAnalyticsEventSeverity } from '@atlaskit/editor-common/utils/analytics';
 import { EditorState, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { createDispatch, EventDispatcher } from '../event-dispatcher';
 import { EditorAPIContext } from '../presets/context';
 import { findChangedNodesFromTransaction } from '../utils/findChangedNodesFromTransaction';
@@ -210,10 +211,18 @@ export var ReactEditorView = /*#__PURE__*/function (_React$Component) {
       });
       _this.contentTransformer = contentTransformerProvider ? contentTransformerProvider(schema) : undefined;
       var doc;
+      var api = _this.pluginInjectionAPI.api();
+      // If we have a doc prop, we need to process it into a PMNode
+
       if (options.doc) {
-        doc = processRawValue(schema, options.doc, options.props.providerFactory, options.props.editorProps.sanitizePrivateContent, _this.contentTransformer, _this.dispatchAnalyticsEvent);
+        // if the collabEdit API is set, skip this validation due to potential pm validation errors
+        // from docs that end up with invalid marks after processing (See #hot-111702 for more details)
+        if ((api === null || api === void 0 ? void 0 : api.collabEdit) !== undefined && fg('editor_load_conf_collab_docs_without_checks')) {
+          doc = processRawValueWithoutTransformation(schema, options.doc);
+        } else {
+          doc = processRawValue(schema, options.doc, options.props.providerFactory, options.props.editorProps.sanitizePrivateContent, _this.contentTransformer, _this.dispatchAnalyticsEvent);
+        }
       }
-      var api = _this.pluginInjectionAPI.api();
       var isViewMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.sharedState.currentState().mode) === 'view';
       var selection;
       if (doc) {

package/dist/esm/editor.js

@@ -29,6 +29,13 @@ var ComposableEditorWrapper = function ComposableEditorWrapper(_ref) {
     preset: preset
   }, props));
 };
+/**
+ * @deprecated - Please use the `ComposableEditor` component instead.
+ * We strongly encourage the use of custom presets, however your easiest migration path is to use the `useUniversalPreset` hook.
+ * The `ComposableEditor` component is a more flexible and customizable alternative to the `Editor` component.
+ * It allows you to create an editor with a custom set of plugins and configurations.
+ * For more information, see the documentation for the `ComposableEditor` component here: https://atlaskit.atlassian.com/packages/editor/editor-core
+ */
 var Editor = /*#__PURE__*/function (_React$Component) {
   _inherits(Editor, _React$Component);
   var _super = _createSuper(Editor);

package/dist/esm/ui/Addon/Dropdown/styles.js

@@ -1,15 +1,13 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { N60A } from '@atlaskit/theme/colors';
-import { borderRadius } from '@atlaskit/theme/constants';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var dropdown = css({
   display: 'flex',
   flexDirection: 'column',
   background: "var(--ds-surface-overlay, white)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderRadius: "".concat(borderRadius(), "px"),
-  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"),
+  borderRadius: "var(--ds-border-radius, 3px)",
+  boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)",
   boxSizing: 'border-box',
   padding: "var(--ds-space-050, 4px)".concat(" 0")
 });

package/dist/esm/ui/Appearance/Comment/Comment.js

@@ -18,8 +18,6 @@ import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-me
 import { tableCommentEditorStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
 import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { N100 } from '@atlaskit/theme/colors';
-import { borderRadius } from '@atlaskit/theme/constants';
 import messages from '../../../messages';
 import { ClickAreaBlock } from '../../Addon';
 import { createEditorContentStyle } from '../../ContentStyles';
@@ -38,10 +36,10 @@ var commentEditorStyles = css({
   minWidth: '272px',
   height: 'auto',
   backgroundColor: "var(--ds-background-input, white)",
-  border: "1px solid ".concat("var(--ds-border-input, ".concat(N100, ")")),
+  border: "1px solid ".concat("var(--ds-border-input, #8590A2)"),
   boxSizing: 'border-box',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderRadius: "".concat(borderRadius(), "px"),
+  borderRadius: "var(--ds-border-radius, 3px)",
   maxWidth: 'inherit',
   wordWrap: 'break-word'
 });

package/dist/esm/ui/ChromeCollapsed/styles.js

@@ -1,8 +1,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { akEditorSubtleAccent, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { N300, N50 } from '@atlaskit/theme/colors';
-import { borderRadius } from '@atlaskit/theme/constants';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var inputStyle = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
@@ -11,7 +9,7 @@ export var inputStyle = css({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     border: "1px solid ".concat("var(--ds-border-input, ".concat(akEditorSubtleAccent, ")")),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    borderRadius: "".concat(borderRadius(), "px"),
+    borderRadius: "var(--ds-border-radius, 3px)",
     boxSizing: 'border-box',
     height: '40px',
     paddingLeft: "var(--ds-space-250, 20px)",
@@ -23,10 +21,10 @@ export var inputStyle = css({
     fontWeight: 400,
     lineHeight: 1.42857142857143,
     letterSpacing: '-0.005em',
-    color: "var(--ds-text-subtlest, ".concat(N300, ")"),
+    color: "var(--ds-text-subtlest, #626F86)",
     '&:hover': {
       backgroundColor: "var(--ds-background-input-hovered, white)",
-      borderColor: "var(--ds-border-input, ".concat(N50, ")"),
+      borderColor: "var(--ds-border-input, #8590A2)",
       cursor: 'text'
     }
   }

package/dist/esm/ui/ContentStyles/ai-panels.js

@@ -5,7 +5,6 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, keyframes } from '@emotion/react';
-import { N0, N500, R400 } from '@atlaskit/theme/colors';
 var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
 var rotationAnimation = keyframes({
   '0%': _objectSpread({
@@ -63,7 +62,7 @@ var prismBorderStyles = function prismBorderStyles(colorMode, hover) {
     borderRadius: "calc(".concat("var(--ds-border-radius-100, 3px)", " + 1px)"),
     transform: 'translate3d(0, 0, 0)'
   }, hover ? {
-    background: "var(--ds-border-input, ".concat(N500, ")")
+    background: "var(--ds-border-input, #8590A2)"
   } : isFirefox ? {
     background: "linear-gradient(90deg,\n\t\t\t\t\t\t\t\t".concat(aiPrismColor['prism.border.step.1'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 0%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.2'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 12%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.3'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 24%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.4'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 48%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.3'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 64%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.2'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 80%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.1'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 100%\n\t\t\t\t\t\t\t)"),
     backgroundSize: '200%'
@@ -74,5 +73,5 @@ var prismBorderStyles = function prismBorderStyles(colorMode, hover) {
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
 export var aiPanelStyles = function aiPanelStyles(colorMode) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t@property --panel-gradient-angle {\n\t\tsyntax: '<angle>';\n\t\tinitial-value: 270deg;\n\t\tinherits: false;\n\t}\n\n\tdiv[extensionType='com.atlassian.ai-blocks'] {\n\t\t// This hides the label for the extension\n\t\t.extension-label {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t// This styles the ai panel correctly when its just sitting on the page and there\n\t\t// is no user interaction\n\t\t.extension-container {\n\t\t\tposition: relative;\n\t\t\tbox-shadow: none;\n\t\t\toverflow: unset;\n\t\t\tbackground-color: ", " !important;\n\t\t\t&::before,\n\t\t\t&::after {\n\t\t\t\t", "\n\t\t\t}\n\t\t\t&.with-hover-border {\n\t\t\t\t&::before,\n\t\t\t\t&::after {\n\t\t\t\t\t", "\n\t\t\t\t}\n\t\t\t}\n\t\t\t& .with-margin-styles {\n\t\t\t\tbackground-color: ", " !important;\n\t\t\t\tborder-radius: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t// This styles the ai panel correctly when its streaming\n\tdiv[extensionType='com.atlassian.ai-blocks']:has(.streaming) {\n\t\t.extension-container {\n\t\t\tbox-shadow: none;\n\t\t\toverflow: unset;\n\t\t\t", "\n\t\t\t&::before,\n\t\t\t&::after {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n\n\t// This styles the ai panel correctly when a user is hovering over the delete button in the floating panel\n\tdiv[extensionType='com.atlassian.ai-blocks'].danger {\n\t\t.extension-container {\n\t\t\tbox-shadow: 0 0 0 1px ", ";\n\t\t}\n\t}\n\n\t// This removes the margin from the action list when inside an ai panel\n\tdiv[extensiontype='com.atlassian.ai-blocks'][extensionkey='ai-action-items-block:aiActionItemsBodiedExtension'] {\n\t\tdiv[data-node-type='actionList'] {\n\t\t\tmargin: 0 !important;\n\t\t}\n\t}\n"])), "var(--ds-surface, ".concat(N0, ")"), prismBorderStyles(colorMode), prismBorderStyles(colorMode, true), "var(--ds-surface, ".concat(N0, ")"), "var(--ds-border-radius-100, 3px)", prismBorderAnimationStyles, prismBorderStyles(colorMode), "var(--ds-border-danger, ".concat(R400, ")"));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t@property --panel-gradient-angle {\n\t\tsyntax: '<angle>';\n\t\tinitial-value: 270deg;\n\t\tinherits: false;\n\t}\n\n\tdiv[extensionType='com.atlassian.ai-blocks'] {\n\t\t// This hides the label for the extension\n\t\t.extension-label {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t// This styles the ai panel correctly when its just sitting on the page and there\n\t\t// is no user interaction\n\t\t.extension-container {\n\t\t\tposition: relative;\n\t\t\tbox-shadow: none;\n\t\t\toverflow: unset;\n\t\t\tbackground-color: ", " !important;\n\t\t\t&::before,\n\t\t\t&::after {\n\t\t\t\t", "\n\t\t\t}\n\t\t\t&.with-hover-border {\n\t\t\t\t&::before,\n\t\t\t\t&::after {\n\t\t\t\t\t", "\n\t\t\t\t}\n\t\t\t}\n\t\t\t& .with-margin-styles {\n\t\t\t\tbackground-color: ", " !important;\n\t\t\t\tborder-radius: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t// This styles the ai panel correctly when its streaming\n\tdiv[extensionType='com.atlassian.ai-blocks']:has(.streaming) {\n\t\t.extension-container {\n\t\t\tbox-shadow: none;\n\t\t\toverflow: unset;\n\t\t\t", "\n\t\t\t&::before,\n\t\t\t&::after {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n\n\t// This styles the ai panel correctly when a user is hovering over the delete button in the floating panel\n\tdiv[extensionType='com.atlassian.ai-blocks'].danger {\n\t\t.extension-container {\n\t\t\tbox-shadow: 0 0 0 1px ", ";\n\t\t}\n\t}\n\n\t// This removes the margin from the action list when inside an ai panel\n\tdiv[extensiontype='com.atlassian.ai-blocks'][extensionkey='ai-action-items-block:aiActionItemsBodiedExtension'] {\n\t\tdiv[data-node-type='actionList'] {\n\t\t\tmargin: 0 !important;\n\t\t}\n\t}\n"])), "var(--ds-surface, #FFFFFF)", prismBorderStyles(colorMode), prismBorderStyles(colorMode, true), "var(--ds-surface, #FFFFFF)", "var(--ds-border-radius-100, 3px)", prismBorderAnimationStyles, prismBorderStyles(colorMode), "var(--ds-border-danger, #E2483D)");
 };

package/dist/esm/ui/ContentStyles/code-block.js

@@ -5,7 +5,6 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import { css } from '@emotion/react';
 import { CodeBlockSharedCssClassName, codeBlockSharedStyles } from '@atlaskit/editor-common/styles';
 import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorDeleteIconColor, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, blockNodesVerticalMargin, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
-import { R75 } from '@atlaskit/theme/colors';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 var GutterDangerOverlay = function GutterDangerOverlay() {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t&::after {\n\t\theight: 100%;\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\twidth: 24px;\n\t\tbackground-color: ", ";\n\t}\n"])), "var(--ds-blanket-danger, none)");
@@ -14,5 +13,5 @@ var GutterDangerOverlay = function GutterDangerOverlay() {
 /* When code-block is inside the panel  */
 var firstCodeBlockWithNoMargin = editorExperiment('nested-dnd', true) ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t\t.ak-editor-panel__content {\n\t\t\t\t> .code-block:first-child,\n\t\t\t\t> .ProseMirror-widget:first-child + .code-block,\n\t\t\t\t> .ProseMirror-widget:first-child + .ProseMirror-widget + .code-block {\n\t\t\t\t\tmargin: 0 0 0 0 !important;\n\t\t\t\t}\n\t\t\t}\n\t\t"]))) : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t\t.ak-editor-panel__content {\n\t\t\t\t> .code-block:first-child {\n\t\t\t\t\tmargin: 0 0 0 0 !important;\n\t\t\t\t}\n\t\t\t}\n\t\t"])));
 export var codeBlockStyles = function codeBlockStyles() {
-  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", "\n\t}\n\n\t.ProseMirror li {\n\t\t/* if same list item has multiple code blocks we need top margin for all but first */\n\t\t> .code-block {\n\t\t\tmargin: ", " 0 0 0;\n\t\t}\n\t\t> .code-block:first-child,\n\t\t> .ProseMirror-gapcursor:first-child + .code-block {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t> div:last-of-type.code-block {\n\t\t\tmargin-bottom: ", ";\n\t\t}\n\t}\n\n\t.ProseMirror .code-block.", ":not(.danger) {\n\t\t", "\n\t}\n\n\t/* Danger when top level node */\n\t.ProseMirror .danger.code-block {\n\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t", ";\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t\t", ";\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t}\n\t}\n\n\t/* Danger when nested node */\n\t.ProseMirror .danger .code-block {\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t\t", ";\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t}\n\t}\n\n\t", "\n"])), codeBlockSharedStyles(), blockNodesVerticalMargin, blockNodesVerticalMargin, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "var(--ds-background-danger, ".concat(R75, ")"), "var(--ds-text-danger, ".concat(akEditorDeleteIconColor, ")"), GutterDangerOverlay(), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, "var(--ds-blanket-danger, ".concat(akEditorDeleteBackground, ")"), CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "var(--ds-background-danger, rgba(255, 143, 115, 0.5))", "var(--ds-text-danger, ".concat(akEditorDeleteIconColor, ")"), GutterDangerOverlay(), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, "var(--ds-blanket-danger, rgba(255, 189, 173, 0.5))", firstCodeBlockWithNoMargin);
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", "\n\t}\n\n\t.ProseMirror li {\n\t\t/* if same list item has multiple code blocks we need top margin for all but first */\n\t\t> .code-block {\n\t\t\tmargin: ", " 0 0 0;\n\t\t}\n\t\t> .code-block:first-child,\n\t\t> .ProseMirror-gapcursor:first-child + .code-block {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t> div:last-of-type.code-block {\n\t\t\tmargin-bottom: ", ";\n\t\t}\n\t}\n\n\t.ProseMirror .code-block.", ":not(.danger) {\n\t\t", "\n\t}\n\n\t/* Danger when top level node */\n\t.ProseMirror .danger.code-block {\n\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t", ";\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t\t", ";\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t}\n\t}\n\n\t/* Danger when nested node */\n\t.ProseMirror .danger .code-block {\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t\t", ";\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t}\n\t}\n\n\t", "\n"])), codeBlockSharedStyles(), blockNodesVerticalMargin, blockNodesVerticalMargin, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "var(--ds-background-danger, #FFECEB)", "var(--ds-text-danger, ".concat(akEditorDeleteIconColor, ")"), GutterDangerOverlay(), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, "var(--ds-blanket-danger, ".concat(akEditorDeleteBackground, ")"), CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "var(--ds-background-danger, rgba(255, 143, 115, 0.5))", "var(--ds-text-danger, ".concat(akEditorDeleteIconColor, ")"), GutterDangerOverlay(), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, "var(--ds-blanket-danger, rgba(255, 189, 173, 0.5))", firstCodeBlockWithNoMargin);
 };