@atlaskit/editor-core 193.24.0 → 193.24.15

package/codemods/migrates/next-remove-allow-more-text-colors-prop.ts

@@ -7,49 +7,45 @@ import { findImportFromPackage } from '../utils';
  * from `allowTextColor` Editor prop.
  * Ref: ED-15849
  */
-const createRemoveAllowMoreTextColorsPropTransform = (
-  pkg: string,
-  component: string,
-) => {
-  return (j: core.JSCodeshift, source: Collection<any>) => {
-    // Find regular or renamed imports
-    // of <Editor/> component from '@atlaskit/editor-core' package
-    const importedNames: string[] = findImportFromPackage(
-      j,
-      source,
-      '@atlaskit/editor-core',
-      'Editor',
-    );
-    // Make the change on all instances of named imports found
-    importedNames.forEach((importedComponentName) => {
-      // Find `allowTextColor` prop
-      const allowTextColorCollection = source.find(j.JSXAttribute, {
-        name: {
-          type: 'JSXIdentifier',
-          name: 'allowTextColor',
-        },
-      });
-      allowTextColorCollection
-        .find(j.ObjectProperty, { key: { name: 'allowMoreTextColors' } })
-        .forEach((x) => j(x).remove());
-      // If the remaining `allowTextColor` prop is an empty object, set `allowTextColor` to `true`.
-      allowTextColorCollection.forEach((allowTextColorPath) => {
-        j(allowTextColorPath).find(j.ObjectExpression, (objectExpression) => {
-          if (objectExpression.properties.length === 0) {
-            j(allowTextColorPath).replaceWith(
-              j.jsxAttribute(
-                j.jsxIdentifier('allowTextColor'),
-                j.jsxExpressionContainer(j.booleanLiteral(true)),
-              ),
-            );
-          }
-        });
-      });
-    });
-  };
+const createRemoveAllowMoreTextColorsPropTransform = (pkg: string, component: string) => {
+	return (j: core.JSCodeshift, source: Collection<any>) => {
+		// Find regular or renamed imports
+		// of <Editor/> component from '@atlaskit/editor-core' package
+		const importedNames: string[] = findImportFromPackage(
+			j,
+			source,
+			'@atlaskit/editor-core',
+			'Editor',
+		);
+		// Make the change on all instances of named imports found
+		importedNames.forEach((importedComponentName) => {
+			// Find `allowTextColor` prop
+			const allowTextColorCollection = source.find(j.JSXAttribute, {
+				name: {
+					type: 'JSXIdentifier',
+					name: 'allowTextColor',
+				},
+			});
+			allowTextColorCollection
+				.find(j.ObjectProperty, { key: { name: 'allowMoreTextColors' } })
+				.forEach((x) => j(x).remove());
+			// If the remaining `allowTextColor` prop is an empty object, set `allowTextColor` to `true`.
+			allowTextColorCollection.forEach((allowTextColorPath) => {
+				j(allowTextColorPath).find(j.ObjectExpression, (objectExpression) => {
+					if (objectExpression.properties.length === 0) {
+						j(allowTextColorPath).replaceWith(
+							j.jsxAttribute(
+								j.jsxIdentifier('allowTextColor'),
+								j.jsxExpressionContainer(j.booleanLiteral(true)),
+							),
+						);
+					}
+				});
+			});
+		});
+	};
 };
-export const removeAllowMoreColorsProp =
-  createRemoveAllowMoreTextColorsPropTransform(
-    '@atlaskit/editor-core',
-    'Editor',
-  );
+export const removeAllowMoreColorsProp = createRemoveAllowMoreTextColorsPropTransform(
+	'@atlaskit/editor-core',
+	'Editor',
+);

package/codemods/migrates/remove-config-panel-width-prop.ts

@@ -3,37 +3,28 @@ import type { Collection } from 'jscodeshift/src/Collection';
 
 import { findImportFromPackage } from '../utils';
 
-const createRemoveComponentPropTransform = (
-  pkg: string,
-  component: string,
-  propName: string,
-) => {
-  return (j: core.JSCodeshift, source: Collection<any>) => {
-    // Find regular or renamed imports
-    const importedNames: string[] = findImportFromPackage(
-      j,
-      source,
-      pkg,
-      component,
-    );
+const createRemoveComponentPropTransform = (pkg: string, component: string, propName: string) => {
+	return (j: core.JSCodeshift, source: Collection<any>) => {
+		// Find regular or renamed imports
+		const importedNames: string[] = findImportFromPackage(j, source, pkg, component);
 
-    // Make the change on all instances of named imports found
-    importedNames.forEach((importedComponentName) => {
-      source
-        .findJSXElements(importedComponentName)
-        .find(j.JSXAttribute, {
-          name: {
-            type: 'JSXIdentifier',
-            name: propName,
-          },
-        })
-        .forEach((x) => j(x).remove());
-    });
-  };
+		// Make the change on all instances of named imports found
+		importedNames.forEach((importedComponentName) => {
+			source
+				.findJSXElements(importedComponentName)
+				.find(j.JSXAttribute, {
+					name: {
+						type: 'JSXIdentifier',
+						name: propName,
+					},
+				})
+				.forEach((x) => j(x).remove());
+		});
+	};
 };
 
 export const removeConfigPanelWidthProp = createRemoveComponentPropTransform(
-  '@atlaskit/editor-core',
-  'ContextPanel',
-  'width',
+	'@atlaskit/editor-core',
+	'ContextPanel',
+	'width',
 );

package/codemods/migrates/rename-editor-to-editor-migration-component.ts

@@ -6,29 +6,25 @@ import type { Collection } from 'jscodeshift/src/Collection';
  * EditorMigrationComponent
  * Ref: ED-16826
  */
-export const createUpdateEditorToMigrationComponent = (
-  pkg: string,
-  component: string,
-) => {
-  return (j: core.JSCodeshift, source: Collection<any>) => {
-    source
-      .find(j.ImportDeclaration, { source: { value: pkg } })
-      .filter(
-        (path) =>
-          j(path).find(j.ImportSpecifier, {
-            imported: { type: 'Identifier', name: component },
-          }).length > 0,
-      )
-      .find(j.ImportSpecifier)
-      .filter((path) => path.node.imported.name === component)
-      .replaceWith((currentImport) =>
-        j.importSpecifier(
-          j.identifier('EditorMigrationComponent'),
-          currentImport.node.local,
-        ),
-      );
-  };
+export const createUpdateEditorToMigrationComponent = (pkg: string, component: string) => {
+	return (j: core.JSCodeshift, source: Collection<any>) => {
+		source
+			.find(j.ImportDeclaration, { source: { value: pkg } })
+			.filter(
+				(path) =>
+					j(path).find(j.ImportSpecifier, {
+						imported: { type: 'Identifier', name: component },
+					}).length > 0,
+			)
+			.find(j.ImportSpecifier)
+			.filter((path) => path.node.imported.name === component)
+			.replaceWith((currentImport) =>
+				j.importSpecifier(j.identifier('EditorMigrationComponent'), currentImport.node.local),
+			);
+	};
 };
 
-export const renameEditorToMigrationComponent =
-  createUpdateEditorToMigrationComponent('@atlaskit/editor-core', 'Editor');
+export const renameEditorToMigrationComponent = createUpdateEditorToMigrationComponent(
+	'@atlaskit/editor-core',
+	'Editor',
+);

package/codemods/migrates/rename-smartlinks-prop.ts

@@ -10,47 +10,39 @@ import type { Collection } from 'jscodeshift/src/Collection';
  * @param toObjectKey String
  */
 export const createJSXRenameVariableToNestedKeyTransform = (
-  from: string,
-  toObjectName: string,
-  toObjectKey: string,
+	from: string,
+	toObjectName: string,
+	toObjectKey: string,
 ) => {
-  return (j: core.JSCodeshift, source: Collection<any>) => {
-    source
-      .find(j.JSXAttribute, { name: { type: 'JSXIdentifier', name: from } })
-      .forEach((fromAttribute) => {
-        // is there an existing destination prop
-        const isExistingAttribute =
-          source.find(j.JSXAttribute, {
-            name: { type: 'JSXIdentifier', name: toObjectName },
-          }).length !== 0;
+	return (j: core.JSCodeshift, source: Collection<any>) => {
+		source
+			.find(j.JSXAttribute, { name: { type: 'JSXIdentifier', name: from } })
+			.forEach((fromAttribute) => {
+				// is there an existing destination prop
+				const isExistingAttribute =
+					source.find(j.JSXAttribute, {
+						name: { type: 'JSXIdentifier', name: toObjectName },
+					}).length !== 0;
 
-        if (
-          !isExistingAttribute &&
-          fromAttribute.node.value?.type === 'JSXExpressionContainer' &&
-          fromAttribute.node.value.expression.type === 'ObjectExpression'
-        ) {
-          const existingProperties =
-            fromAttribute.node.value.expression.properties;
-          const newObject = j.objectExpression([
-            j.property(
-              'init',
-              j.identifier(toObjectKey),
-              j.objectExpression(existingProperties),
-            ),
-          ]);
-          fromAttribute.replace(
-            j.jsxAttribute(
-              j.jsxIdentifier(toObjectName),
-              j.jsxExpressionContainer(newObject),
-            ),
-          );
-        }
-      });
-  };
+				if (
+					!isExistingAttribute &&
+					fromAttribute.node.value?.type === 'JSXExpressionContainer' &&
+					fromAttribute.node.value.expression.type === 'ObjectExpression'
+				) {
+					const existingProperties = fromAttribute.node.value.expression.properties;
+					const newObject = j.objectExpression([
+						j.property('init', j.identifier(toObjectKey), j.objectExpression(existingProperties)),
+					]);
+					fromAttribute.replace(
+						j.jsxAttribute(j.jsxIdentifier(toObjectName), j.jsxExpressionContainer(newObject)),
+					);
+				}
+			});
+	};
 };
 
 export const renameSmartLinksProp = createJSXRenameVariableToNestedKeyTransform(
-  'smartLinks',
-  'linking',
-  'smartLinks',
+	'smartLinks',
+	'linking',
+	'smartLinks',
 );

package/codemods/migrates/rename-unsafe-allowUndoRedoButtons-prop.ts

@@ -1,7 +1,6 @@
 import { createRenameVariableTransform } from '../utils';
 
-export const renameUnsafeAllowUndoRedoButtonsProp =
-  createRenameVariableTransform(
-    'UNSAFE_allowUndoRedoButtons',
-    'allowUndoRedoButtons',
-  );
+export const renameUnsafeAllowUndoRedoButtonsProp = createRenameVariableTransform(
+	'UNSAFE_allowUndoRedoButtons',
+	'allowUndoRedoButtons',
+);

package/codemods/migrates/rename-unsafe-cards-prop.ts

@@ -1,6 +1,3 @@
 import { createRenameVariableTransform } from '../utils';
 
-export const renameUnsafeCardProp = createRenameVariableTransform(
-  'UNSAFE_cards',
-  'smartLinks',
-);
+export const renameUnsafeCardProp = createRenameVariableTransform('UNSAFE_cards', 'smartLinks');

package/codemods/utils.ts

@@ -1,44 +1,34 @@
 import type {
-  API,
-  ASTPath,
-  default as core,
-  FileInfo,
-  ImportDeclaration,
-  Options,
+	API,
+	ASTPath,
+	default as core,
+	FileInfo,
+	ImportDeclaration,
+	Options,
 } from 'jscodeshift';
 import type { Collection } from 'jscodeshift/src/Collection';
 
-function hasImportDeclaration(
-  j: core.JSCodeshift,
-  source: Collection<any>,
-  importPath: string,
-) {
-  const imports = source
-    .find(j.ImportDeclaration)
-    .filter(
-      (path: ASTPath<ImportDeclaration>) =>
-        path.node.source.value === importPath,
-    );
+function hasImportDeclaration(j: core.JSCodeshift, source: Collection<any>, importPath: string) {
+	const imports = source
+		.find(j.ImportDeclaration)
+		.filter((path: ASTPath<ImportDeclaration>) => path.node.source.value === importPath);
 
-  return Boolean(imports.length);
+	return Boolean(imports.length);
 }
 
 export const createTransformer =
-  (
-    packageName: string,
-    migrations: { (j: core.JSCodeshift, source: Collection<any>): void }[],
-  ) =>
-  (fileInfo: FileInfo, { jscodeshift: j }: API, options: Options) => {
-    const source = j(fileInfo.source);
+	(packageName: string, migrations: { (j: core.JSCodeshift, source: Collection<any>): void }[]) =>
+	(fileInfo: FileInfo, { jscodeshift: j }: API, options: Options) => {
+		const source = j(fileInfo.source);
 
-    if (!hasImportDeclaration(j, source, packageName)) {
-      return fileInfo.source;
-    }
+		if (!hasImportDeclaration(j, source, packageName)) {
+			return fileInfo.source;
+		}
 
-    migrations.forEach((transform) => transform(j, source));
+		migrations.forEach((transform) => transform(j, source));
 
-    return source.toSource(options.printOptions || { quote: 'single' });
-  };
+		return source.toSource(options.printOptions || { quote: 'single' });
+	};
 
 /**
  * Finds import from a particular path/package matching a particular name.
@@ -51,45 +41,45 @@ export const createTransformer =
  * @returns String[] Array of result names which match the specified importName
  */
 export const findImportFromPackage = (
-  j: core.JSCodeshift,
-  source: Collection<any>,
-  pkg: string,
-  importName: string,
+	j: core.JSCodeshift,
+	source: Collection<any>,
+	pkg: string,
+	importName: string,
 ): string[] => {
-  // Find regular or renamed imports
-  return (
-    source
-      // find all import statements which import from the given package
-      .find(j.ImportDeclaration, {
-        source: {
-          value: pkg,
-        },
-      })
-      // narrow down to imports related to 'component'
-      .filter(
-        (importDeclaration) =>
-          j(importDeclaration).find(j.ImportSpecifier, {
-            imported: {
-              type: 'Identifier',
-              name: importName,
-            },
-          }).length > 0,
-      )
-      .nodes()
-      .map((importDeclaration): string => {
-        const importSpecifier = j(importDeclaration)
-          .find(j.ImportSpecifier, {
-            imported: {
-              type: 'Identifier',
-              name: importName,
-            },
-          })
-          .nodes()[0];
+	// Find regular or renamed imports
+	return (
+		source
+			// find all import statements which import from the given package
+			.find(j.ImportDeclaration, {
+				source: {
+					value: pkg,
+				},
+			})
+			// narrow down to imports related to 'component'
+			.filter(
+				(importDeclaration) =>
+					j(importDeclaration).find(j.ImportSpecifier, {
+						imported: {
+							type: 'Identifier',
+							name: importName,
+						},
+					}).length > 0,
+			)
+			.nodes()
+			.map((importDeclaration): string => {
+				const importSpecifier = j(importDeclaration)
+					.find(j.ImportSpecifier, {
+						imported: {
+							type: 'Identifier',
+							name: importName,
+						},
+					})
+					.nodes()[0];
 
-        return importSpecifier.local?.name || '';
-      })
-      .filter((name) => Boolean(name))
-  );
+				return importSpecifier.local?.name || '';
+			})
+			.filter((name) => Boolean(name))
+	);
 };
 
 /**
@@ -99,9 +89,9 @@ export const findImportFromPackage = (
  * @param toName String
  */
 export const createRenameVariableTransform = (from: string, toName: string) => {
-  return (j: core.JSCodeshift, source: Collection<any>) => {
-    source.find(j.Identifier, { name: from }).forEach((x) => {
-      x.replace(j.identifier(toName));
-    });
-  };
+	return (j: core.JSCodeshift, source: Collection<any>) => {
+		source.find(j.Identifier, { name: from }).forEach((x) => {
+			x.replace(j.identifier(toName));
+		});
+	};
 };

package/dist/cjs/ui/Appearance/Comment/Toolbar.js

@@ -22,11 +22,11 @@ var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 490;
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 var mainToolbarWrapperStyle = function mainToolbarWrapperStyle() {
   var isTwoLineEditorToolbar = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  align-items: center;\n  padding: ", " ", " 0;\n  display: flex;\n  height: auto;\n  background-color: ", ";\n  box-shadow: none;\n  padding-left: ", ";\n\n  & > div {\n    > :first-child:not(style),\n    > style:first-child + * {\n      margin-left: 0;\n    }\n    ", "\n  }\n\n  .block-type-btn {\n    padding-left: 0;\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-surface, white)", "var(--ds-space-250, 20px)", isTwoLineEditorToolbar && "\n        @media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px) {\n          flex-direction: column-reverse;\n          align-items: end;\n          display: flex;\n          justify-content: flex-end;\n        }\n\n        //make this more explicit for a toolbar\n        > *:nth-child(1) {\n          @media (max-width: ").concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px) {\n            > div:nth-child(2) {\n              justify-content: flex-end;\n              display: flex;\n            }\n          }\n        }\n    "));
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tposition: relative;\n\talign-items: center;\n\tpadding: ", " ", " 0;\n\tdisplay: flex;\n\theight: auto;\n\tbackground-color: ", ";\n\tbox-shadow: none;\n\tpadding-left: ", ";\n\n\t& > div {\n\t\t> :first-child:not(style),\n\t\t> style:first-child + * {\n\t\t\tmargin-left: 0;\n\t\t}\n\t\t", "\n\t}\n\n\t.block-type-btn {\n\t\tpadding-left: 0;\n\t}\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-surface, white)", "var(--ds-space-250, 20px)", isTwoLineEditorToolbar && "\n        @media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px) {\n          flex-direction: column-reverse;\n          align-items: end;\n          display: flex;\n          justify-content: flex-end;\n        }\n\n        //make this more explicit for a toolbar\n        > *:nth-child(1) {\n          @media (max-width: ").concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px) {\n            > div:nth-child(2) {\n              justify-content: flex-end;\n              display: flex;\n            }\n          }\n        }\n    "));
 };
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
-var stickyToolbarWrapperStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  /* stylelint-disable declaration-block-no-duplicate-properties */\n  position: relative;\n  position: sticky;\n  /* stylelint-enable declaration-block-no-duplicate-properties */\n  padding-bottom: ", ";\n  z-index: ", ";\n  transition: box-shadow ease-in-out 0.2s;\n  &.show-keyline {\n    box-shadow: 0 ", "px 0 0\n      ", ";\n  }\n"])), "var(--ds-space-100, 8px)", _editorSharedStyles.akEditorMenuZIndex, _editorSharedStyles.akEditorToolbarKeylineHeight, "var(--ds-background-accent-gray-subtlest, #F1F2F4)");
+var stickyToolbarWrapperStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t/* stylelint-disable declaration-block-no-duplicate-properties */\n\tposition: relative;\n\tposition: sticky;\n\t/* stylelint-enable declaration-block-no-duplicate-properties */\n\tpadding-bottom: ", ";\n\tz-index: ", ";\n\ttransition: box-shadow ease-in-out 0.2s;\n\t&.show-keyline {\n\t\tbox-shadow: 0 ", "px 0 0\n\t\t\t", ";\n\t}\n"])), "var(--ds-space-100, 8px)", _editorSharedStyles.akEditorMenuZIndex, _editorSharedStyles.akEditorToolbarKeylineHeight, "var(--ds-background-accent-gray-subtlest, #F1F2F4)");
 var StickyToolbar = function StickyToolbar(props) {
   var _useState = (0, _react.useState)(0),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -113,6 +113,6 @@ var MainToolbar = exports.MainToolbar = function MainToolbar(_ref) {
 var mainToolbarCustomComponentsSlotStyle = exports.mainToolbarCustomComponentsSlotStyle = function mainToolbarCustomComponentsSlotStyle() {
   var isTwoLineEditorToolbar = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   return (// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
-    (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n    flex-grow: 1;\n    padding-right: ", ";\n    > div {\n      display: flex;\n      flex-shrink: 0;\n    }\n    ", "\n  "])), "var(--ds-space-250, 20px)", isTwoLineEditorToolbar && "\n    @media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px) {\n      {\n        padding-right: 0;\n      }\n    }\n  "))
+    (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\tdisplay: flex;\n\t\tjustify-content: flex-end;\n\t\talign-items: center;\n\t\tflex-grow: 1;\n\t\tpadding-right: ", ";\n\t\t> div {\n\t\t\tdisplay: flex;\n\t\t\tflex-shrink: 0;\n\t\t}\n\t\t", "\n\t"])), "var(--ds-space-250, 20px)", isTwoLineEditorToolbar && "\n    @media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px) {\n      {\n        padding-right: 0;\n      }\n    }\n  "))
   );
 };

package/dist/cjs/ui/AppearanceComponents/Mobile.js

@@ -63,11 +63,11 @@ var MobileAppearance = exports.MobileAppearance = /*#__PURE__*/(0, _react.forwar
       var keyboardHeight = (_basePluginState$keyb = basePluginState === null || basePluginState === void 0 ? void 0 : basePluginState.keyboardHeight) !== null && _basePluginState$keyb !== void 0 ? _basePluginState$keyb : -1;
 
       /*
-        We calculate the min-height based on the windowHeight - keyboardHeight - paddingTop.
-        This is needed due to scrolling issues when there is no content to scroll (like, only having 1 paragraph),
-        but if the clickable area is bigger than the windowHeight - keyboard (including toolbar) then the view
-        is scrolled nevertheless, and it gives the sensation that the content was lost.
-      */
+           We calculate the min-height based on the windowHeight - keyboardHeight - paddingTop.
+           This is needed due to scrolling issues when there is no content to scroll (like, only having 1 paragraph),
+           but if the clickable area is bigger than the windowHeight - keyboard (including toolbar) then the view
+           is scrolled nevertheless, and it gives the sensation that the content was lost.
+         */
 
       if (!persistScrollGutter) {
         // in iOS Hybrid Editor windowHeight doesn't exclude keyboardHeight

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

@@ -55,5 +55,5 @@ var prismBorderStyles = function prismBorderStyles(colorMode, sizeOffset, positi
   });
 };
 var aiPanelStyles = exports.aiPanelStyles = function aiPanelStyles(colorMode) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  @property --panel-gradient-angle {\n    syntax: '<angle>';\n    initial-value: 180deg;\n    inherits: false;\n  }\n\n  // The .with-border style is only present when the new macro styles are applied\n  // TODO: Remove this once new macro styles have been adopted\n  div[extensiontype='com.atlassian.ai-blocks'] {\n    &.", ":has(.streaming) {\n      & .extension-container {\n        box-shadow: none !important;\n        ", "\n      }\n    }\n\n    .danger > .extension-container {\n      background-color: ", ";\n    }\n\n    .extension-container {\n      overflow: visible;\n      background-color: ", ";\n      position: relative;\n      border-radius: 4px;\n      &::before,\n      &::after {\n        ", "\n      }\n      .extension-overflow-wrapper {\n        border-radius: inherit;\n        box-shadow: inherit;\n        background-color: inherit;\n      }\n      &.with-border {\n        border: 1px solid ", ";\n      }\n      &.with-hover-border {\n        border: 1px solid ", ";\n      }\n    }\n  }\n\n  div[extensiontype='com.atlassian.ai-blocks']:has(.with-border) {\n    .extension-container {\n      background-color: ", ";\n      .extension-overflow-wrapper {\n        box-shadow: none !important;\n      }\n    }\n\n    .extension-title {\n      display: none !important;\n    }\n\n    &:not(.", "),\n    &:not(.danger) {\n      .extension-container {\n        &::before,\n        &::after {\n          ", "\n        }\n        &.wider-layout {\n          &::after,\n          &::before {\n            ", "\n          }\n        }\n      }\n    }\n\n    &.", ", &.danger {\n      .extension-container {\n        &.wider-layout {\n          &::after,\n          &::before {\n            content: none;\n          }\n        }\n      }\n    }\n  }\n\n  div[extensiontype='com.atlassian.ai-blocks'][extensionkey='ai-action-items-block:aiActionItemsBodiedExtension'] {\n    div[data-node-type='actionList'] {\n      margin: 0 !important;\n    }\n  }\n"])), _editorSharedStyles.akEditorSelectedNodeClassName, prismBorderAnimationStyles, "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), "var(--ds-background-accent-gray-subtlest, ".concat(_colors.N20, ")"), prismBorderStyles(colorMode, 2, -1), "var(--ds-surface-overlay, ".concat(_colors.N0, ")"), "var(--ds-surface-overlay, ".concat(_colors.N0, ")"), "var(--ds-surface-overlay, ".concat(_colors.N0, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, prismBorderStyles(colorMode, 4, -2), prismBorderStyles(colorMode, 2, -1), _editorSharedStyles.akEditorSelectedNodeClassName);
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t@property --panel-gradient-angle {\n\t\tsyntax: '<angle>';\n\t\tinitial-value: 180deg;\n\t\tinherits: false;\n\t}\n\n\t// The .with-border style is only present when the new macro styles are applied\n\t// TODO: Remove this once new macro styles have been adopted\n\tdiv[extensiontype='com.atlassian.ai-blocks'] {\n\t\t&.", ":has(.streaming) {\n\t\t\t& .extension-container {\n\t\t\t\tbox-shadow: none !important;\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t.danger > .extension-container {\n\t\t\tbackground-color: ", ";\n\t\t}\n\n\t\t.extension-container {\n\t\t\toverflow: visible;\n\t\t\tbackground-color: ", ";\n\t\t\tposition: relative;\n\t\t\tborder-radius: 4px;\n\t\t\t&::before,\n\t\t\t&::after {\n\t\t\t\t", "\n\t\t\t}\n\t\t\t.extension-overflow-wrapper {\n\t\t\t\tborder-radius: inherit;\n\t\t\t\tbox-shadow: inherit;\n\t\t\t\tbackground-color: inherit;\n\t\t\t}\n\t\t\t&.with-border {\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t}\n\t\t\t&.with-hover-border {\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\tdiv[extensiontype='com.atlassian.ai-blocks']:has(.with-border) {\n\t\t.extension-container {\n\t\t\tbackground-color: ", ";\n\t\t\t.extension-overflow-wrapper {\n\t\t\t\tbox-shadow: none !important;\n\t\t\t}\n\t\t}\n\n\t\t.extension-title {\n\t\t\tdisplay: none !important;\n\t\t}\n\n\t\t&:not(.", "),\n\t\t&:not(.danger) {\n\t\t\t.extension-container {\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\t&.wider-layout {\n\t\t\t\t\t&::after,\n\t\t\t\t\t&::before {\n\t\t\t\t\t\t", "\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&.", ", &.danger {\n\t\t\t.extension-container {\n\t\t\t\t&.wider-layout {\n\t\t\t\t\t&::after,\n\t\t\t\t\t&::before {\n\t\t\t\t\t\tcontent: none;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\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"])), _editorSharedStyles.akEditorSelectedNodeClassName, prismBorderAnimationStyles, "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), "var(--ds-background-accent-gray-subtlest, ".concat(_colors.N20, ")"), prismBorderStyles(colorMode, 2, -1), "var(--ds-surface-overlay, ".concat(_colors.N0, ")"), "var(--ds-surface-overlay, ".concat(_colors.N0, ")"), "var(--ds-surface-overlay, ".concat(_colors.N0, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, prismBorderStyles(colorMode, 4, -2), prismBorderStyles(colorMode, 2, -1), _editorSharedStyles.akEditorSelectedNodeClassName);
 };

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

@@ -13,8 +13,8 @@ var _colors = require("@atlaskit/theme/colors");
 var _templateObject, _templateObject2;
 /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression */
 var GutterDangerOverlay = function GutterDangerOverlay() {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  &::after {\n    height: 100%;\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 24px;\n    background-color: ", ";\n  }\n"])), "var(--ds-blanket-danger, none)");
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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)");
 };
 var codeBlockStyles = exports.codeBlockStyles = function codeBlockStyles() {
-  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", "\n  }\n\n  .ProseMirror li {\n    /* if same list item has multiple code blocks we need top margin for all but first */\n    > .code-block {\n      margin: ", " 0 0 0;\n    }\n    > .code-block:first-child,\n    > .ProseMirror-gapcursor:first-child + .code-block {\n      margin-top: 0;\n    }\n\n    > div:last-of-type.code-block {\n      margin-bottom: ", ";\n    }\n  }\n\n  .ProseMirror .code-block.", ":not(.danger) {\n    ", "\n  }\n\n  /* Danger when top level node */\n  .ProseMirror .danger.code-block {\n    box-shadow: 0 0 0 ", "px\n      ", ";\n\n    .", " {\n      background-color: ", ";\n      color: ", ";\n      ", ";\n    }\n\n    .", " {\n      background-color: ", ";\n    }\n  }\n\n  /* Danger when nested node */\n  .ProseMirror .danger .code-block {\n    .", " {\n      background-color: ", ";\n      color: ", ";\n      ", ";\n    }\n\n    .", " {\n      background-color: ", ";\n    }\n  }\n\n  /* When code-block is inside the panel  */\n  .ak-editor-panel__content {\n    > .code-block:first-child {\n      margin: 0 0 0 0 !important;\n    }\n  }\n"])), (0, _styles.codeBlockSharedStyles)(), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _styles.CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "var(--ds-background-danger, ".concat(_colors.R75, ")"), "var(--ds-text-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), GutterDangerOverlay(), _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, "var(--ds-blanket-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _styles.CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "var(--ds-background-danger, rgba(255, 143, 115, 0.5))", "var(--ds-text-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), GutterDangerOverlay(), _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, "var(--ds-blanket-danger, rgba(255, 189, 173, 0.5))");
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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/* When code-block is inside the panel  */\n\t.ak-editor-panel__content {\n\t\t> .code-block:first-child {\n\t\t\tmargin: 0 0 0 0 !important;\n\t\t}\n\t}\n"])), (0, _styles.codeBlockSharedStyles)(), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _styles.CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "var(--ds-background-danger, ".concat(_colors.R75, ")"), "var(--ds-text-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), GutterDangerOverlay(), _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, "var(--ds-blanket-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _styles.CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "var(--ds-background-danger, rgba(255, 143, 115, 0.5))", "var(--ds-text-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), GutterDangerOverlay(), _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, "var(--ds-blanket-danger, rgba(255, 189, 173, 0.5))");
 };

package/dist/cjs/ui/ContentStyles/date.js

@@ -11,4 +11,4 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _templateObject;
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
-var dateStyles = exports.dateStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    .", " {\n      line-height: initial;\n      cursor: pointer;\n    }\n\n    &.", " {\n      .", " > span {\n        ", "\n      }\n    }\n  }\n\n  .danger {\n    .", ".", "\n      .", "\n      > span {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n    }\n  }\n"])), _styles.DateSharedCssClassName.DATE_CONTAINER, _styles.DateSharedCssClassName.DATE_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.DateSharedCssClassName.DATE_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _styles.DateSharedCssClassName.DATE_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.DateSharedCssClassName.DATE_WRAPPER, _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"));
+var dateStyles = exports.dateStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\t.", " {\n\t\t\tline-height: initial;\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t&.", " {\n\t\t\t.", " > span {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n\n\t.danger {\n\t\t.", ".", "\n\t\t\t.", "\n\t\t\t> span {\n\t\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t\t", ";\n\t\t}\n\t}\n"])), _styles.DateSharedCssClassName.DATE_CONTAINER, _styles.DateSharedCssClassName.DATE_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.DateSharedCssClassName.DATE_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _styles.DateSharedCssClassName.DATE_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.DateSharedCssClassName.DATE_WRAPPER, _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"));

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

@@ -24,7 +24,7 @@ var DANGER_STATE_BORDER_COLOR = "var(--ds-border-danger, ".concat(_colors.R300,
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 var expandStyles = exports.expandStyles = function expandStyles() {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " > div {\n    display: flex;\n  }\n\n  .", " {\n    ", "\n    overflow: hidden;\n    cursor: pointer;\n    box-sizing: border-box;\n\n    td > & {\n      margin-top: 0;\n    }\n\n    .", " svg {\n      ", ";\n      transform: rotate(90deg);\n    }\n\n    &.", ":not(.danger) {\n      ", "\n    }\n\n    &.danger {\n      background: ", ";\n      border-color: ", ";\n    }\n  }\n\n  .ProseMirror\n    > .", ",\n    .", "\n    > .", " {\n    margin-left: -", "px;\n    margin-right: -", "px;\n  }\n\n  .", " {\n    ", "\n    cursor: text;\n    padding-top: 0px;\n  }\n\n  .", " {\n    ", "\n  }\n\n  .", " {\n    ", ";\n    align-items: center;\n    overflow: visible;\n  }\n\n  .", " {\n    background: ", ";\n    border-color: ", ";\n\n    .", " {\n      padding-top: ", ";\n    }\n  }\n\n  .", " {\n    width: 100%;\n  }\n\n  /* stylelint-disable property-no-unknown, value-keyword-case */\n  .", ":(.", ") {\n    .expand-content-wrapper {\n      height: auto;\n    }\n  }\n  /* stylelint-enable property-no-unknown, value-keyword-case */\n\n  .", ":not(.", ") {\n    .ak-editor-expand__content {\n      position: absolute;\n      height: 1px;\n      width: 1px;\n      overflow: hidden;\n      clip: rect(1px, 1px, 1px, 1px);\n      white-space: nowrap;\n    }\n\n    .", " svg {\n      ", ";\n      transform: rotate(0deg);\n    }\n\n    &:not(.", "):not(.danger) {\n      background: transparent;\n      border-color: transparent;\n\n      &:hover {\n        border-color: ", ";\n        background: ", ";\n      }\n    }\n  }\n"])), _styles.expandClassNames.icon, _styles.expandClassNames.prefix, _ui.sharedExpandStyles.containerStyles({
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " > div {\n\t\tdisplay: flex;\n\t}\n\n\t.", " {\n\t\t", "\n\t\toverflow: hidden;\n\t\tcursor: pointer;\n\t\tbox-sizing: border-box;\n\n\t\ttd > & {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t.", " svg {\n\t\t\t", ";\n\t\t\ttransform: rotate(90deg);\n\t\t}\n\n\t\t&.", ":not(.danger) {\n\t\t\t", "\n\t\t}\n\n\t\t&.danger {\n\t\t\tbackground: ", ";\n\t\t\tborder-color: ", ";\n\t\t}\n\t}\n\n\t.ProseMirror\n\t\t> .", ",\n\t\t.", "\n\t\t> .", " {\n\t\tmargin-left: -", "px;\n\t\tmargin-right: -", "px;\n\t}\n\n\t.", " {\n\t\t", "\n\t\tcursor: text;\n\t\tpadding-top: 0px;\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", ";\n\t\talign-items: center;\n\t\toverflow: visible;\n\t}\n\n\t.", " {\n\t\tbackground: ", ";\n\t\tborder-color: ", ";\n\n\t\t.", " {\n\t\t\tpadding-top: ", ";\n\t\t}\n\t}\n\n\t.", " {\n\t\twidth: 100%;\n\t}\n\n\t/* stylelint-disable property-no-unknown, value-keyword-case */\n\t.", ":(.", ") {\n\t\t.expand-content-wrapper {\n\t\t\theight: auto;\n\t\t}\n\t}\n\t/* stylelint-enable property-no-unknown, value-keyword-case */\n\n\t.", ":not(.", ") {\n\t\t.ak-editor-expand__content {\n\t\t\tposition: absolute;\n\t\t\theight: 1px;\n\t\t\twidth: 1px;\n\t\t\toverflow: hidden;\n\t\t\tclip: rect(1px, 1px, 1px, 1px);\n\t\t\twhite-space: nowrap;\n\t\t}\n\n\t\t.", " svg {\n\t\t\t", ";\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\n\t\t&:not(.", "):not(.danger) {\n\t\t\tbackground: transparent;\n\t\t\tborder-color: transparent;\n\n\t\t\t&:hover {\n\t\t\t\tborder-color: ", ";\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), _styles.expandClassNames.icon, _styles.expandClassNames.prefix, _ui.sharedExpandStyles.containerStyles({
     expanded: false,
     focused: false
   })(), _styles.expandClassNames.iconContainer, EXPAND_ICON_COLOR(), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.Border]), DANGER_STATE_BACKGROUND_COLOR, DANGER_STATE_BORDER_COLOR, _styles.expandClassNames.type('expand'), _styles.BreakoutCssClassName.BREAKOUT_MARK_DOM, _styles.expandClassNames.type('expand'), _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akLayoutGutterOffset, _styles.expandClassNames.content, _ui.sharedExpandStyles.contentStyles({