@atlaskit/editor-common 78.11.5 → 78.11.7

package/dist/es2019/collab/index.js

@@ -132,51 +132,44 @@ export const colors = [themeColors.R100, themeColors.R300, themeColors.R500, the
   solid,
   selection: hexToRgba(solid, 0.2)
 }));
-const telepointerColorStyle = (color, index) => `
-  &.color-${index} {
-    background-color: ${color.selection};
-    &::after {
-      background-color: ${color.solid};
-      color: ${"var(--ds-text-inverse, #fff)"};
-      border-color: ${color.solid};
-    }
-  }
-`;
 export const TELEPOINTER_DIM_CLASS = 'telepointer-dim';
-
-// Disable top: -14px since it is necessary to align to cursor
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-export const telepointerStyle = css`
-  .ProseMirror .telepointer {
-    position: relative;
-    transition: opacity 200ms;
-
-    &.telepointer-selection {
-      line-height: 1.2;
-      pointer-events: none;
-      user-select: none;
-    }
-
-    &.telepointer-selection-badge::after {
-      content: attr(data-initial);
-      position: absolute;
-      display: block;
-      top: -14px;
-      font-size: ${relativeFontSizeToBase16(9)};
-      padding: ${"var(--ds-space-025, 2px)"};
-      color: ${"var(--ds-text-inverse, white)"};
-      left: 0px;
-      border-radius: 2px 2px 2px 0;
-      line-height: initial;
+export const telepointerStyle = css({
+  '.ProseMirror .telepointer': {
+    position: 'relative',
+    transition: 'opacity 200ms',
+    '&.telepointer-selection': {
+      lineHeight: 1.2,
+      pointerEvents: 'none',
+      userSelect: 'none'
+    },
+    '&.telepointer-selection-badge::after': {
+      content: 'attr(data-initial)',
+      position: 'absolute',
+      display: 'block',
+      // Disable top: -14px since it is necessary to align to cursor
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      top: '-14px',
+      fontSize: relativeFontSizeToBase16(9),
+      padding: "var(--ds-space-025, 2px)",
+      color: "var(--ds-text-inverse, white)",
+      left: '0px',
+      borderRadius: '2px 2px 2px 0',
+      lineHeight: 'initial'
+    },
+    [`&.${TELEPOINTER_DIM_CLASS}`]: {
+      opacity: 0.2
     }
-
-    &.${TELEPOINTER_DIM_CLASS} {
-      opacity: 0.2;
+  }
+}, ...colors.map((color, index) => ({
+  [`&.color-${index}`]: {
+    backgroundColor: color.selection,
+    '&::after': {
+      backgroundColor: color.solid,
+      color: "var(--ds-text-inverse, #fff)",
+      borderColor: color.solid
     }
-
-    ${colors.map((color, index) => telepointerColorStyle(color, index))};
   }
-`;
+})));
 const tintKey = 'collab:isDirtyTransaction';
 export const isDirtyTransaction = tr => {
   return Boolean(tr.getMeta(tintKey));

package/dist/es2019/extensibility/Extension/Extension/index.js

@@ -24,7 +24,9 @@ function ExtensionWithPluginState(props) {
     hideFrame,
     editorAppearance,
     showMacroInteractionDesignUpdates,
-    isNodeSelected
+    isNodeSelected,
+    isNodeHovered,
+    setIsNodeHovered
   } = props;
   const hasBody = ['bodiedExtension', 'multiBodiedExtension'].includes(node.type.name);
   const isMobile = editorAppearance === 'mobile';
@@ -80,8 +82,14 @@ function ExtensionWithPluginState(props) {
     ...newContentStyles,
     ...contentWrapper
   };
+  const handleMouseEvent = didHover => {
+    if (setIsNodeHovered) {
+      setIsNodeHovered(didHover);
+    }
+  };
   return jsx(Fragment, null, showMacroInteractionDesignUpdates && jsx(ExtensionLozenge, {
     isNodeSelected: isNodeSelected,
+    isNodeHovered: isNodeHovered,
     node: node,
     showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
     customContainerStyles: customContainerStyles
@@ -90,7 +98,9 @@ function ExtensionWithPluginState(props) {
     "data-layout": node.attrs.layout,
     className: classNames,
     css: wrapperStyle,
-    style: customContainerStyles
+    style: customContainerStyles,
+    onMouseOver: () => handleMouseEvent(true),
+    onMouseLeave: () => handleMouseEvent(false)
   }, jsx("div", {
     className: `extension-overflow-wrapper ${hasBody ? 'with-body' : ''}`
   }, jsx("div", {

package/dist/es2019/extensibility/Extension/Lozenge.js

@@ -28,6 +28,7 @@ export default class ExtensionLozenge extends Component {
       const {
         showMacroInteractionDesignUpdates,
         isNodeSelected,
+        isNodeHovered,
         customContainerStyles
       } = this.props;
       const {
@@ -41,6 +42,7 @@ export default class ExtensionLozenge extends Component {
       const title = parameters && parameters.extensionTitle || parameters && parameters.macroMetadata && parameters.macroMetadata.title || extensionKey;
       const isBlockExtension = name === 'extension';
       return jsx(LozengeComponent, {
+        isNodeHovered: isNodeHovered,
         isNodeSelected: isNodeSelected,
         showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
         isBlockExtension: isBlockExtension,

package/dist/es2019/extensibility/Extension/LozengeComponent.js

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 
 import { jsx } from '@emotion/react';
+import classnames from 'classnames';
 import EditorFileIcon from '@atlaskit/icon/glyph/editor/file';
 import { SimpleTag as Tag } from '@atlaskit/tag';
 import { lozengeWrapper, placeholderFallback, placeholderFallbackParams } from './styles';
@@ -16,13 +17,16 @@ export const LozengeComponent = ({
   renderImage,
   isNodeSelected,
   showMacroInteractionDesignUpdates,
-  customContainerStyles
+  customContainerStyles,
+  isNodeHovered
 }) => {
   const capitalizedTitle = capitalizeFirstLetter(title);
-  // TODO: only show on lozenge on hover: https://product-fabric.atlassian.net/browse/PGXT-4945
   if (showMacroInteractionDesignUpdates) {
+    const lozengeClassNames = classnames('extension-title', {
+      'show-lozenge': isNodeHovered || isNodeSelected
+    });
     return jsx("div", {
-      className: "extension-title",
+      className: lozengeClassNames,
       css: lozengeWrapper,
       "data-testid": "new-lozenge",
       style: customContainerStyles
@@ -30,19 +34,20 @@ export const LozengeComponent = ({
       text: capitalizedTitle,
       color: isNodeSelected ? 'blueLight' : 'greyLight'
     }));
+  } else {
+    return jsx("div", {
+      "data-testid": "lozenge-fallback",
+      css: placeholderFallback
+    }, lozengeData && !isBlockExtension ? renderImage({
+      height: ICON_SIZE,
+      width: ICON_SIZE,
+      ...lozengeData
+    }) : jsx(EditorFileIcon, {
+      label: title
+    }), jsx("span", {
+      className: "extension-title"
+    }, capitalizedTitle), params && !isBlockExtension && jsx("span", {
+      css: placeholderFallbackParams
+    }, Object.keys(params).map(key => key && ` | ${key} = ${params[key].value}`)));
   }
-  return jsx("div", {
-    "data-testid": "lozenge-fallback",
-    css: placeholderFallback
-  }, lozengeData && !isBlockExtension ? renderImage({
-    height: ICON_SIZE,
-    width: ICON_SIZE,
-    ...lozengeData
-  }) : jsx(EditorFileIcon, {
-    label: title
-  }), jsx("span", {
-    className: "extension-title"
-  }, capitalizedTitle), params && !isBlockExtension && jsx("span", {
-    css: placeholderFallbackParams
-  }, Object.keys(params).map(key => key && ` | ${key} = ${params[key].value}`)));
 };

package/dist/es2019/extensibility/Extension/styles.js

@@ -60,6 +60,14 @@ export const lozengeWrapper = css({
   display: 'flex',
   justifyContent: 'left',
   width: '100%',
+  /* -0.75rem neutralizes the margin top coming from extensionView-content-wrap.
+   The lozenge takes up space so we don't need the extra padding anymore. */
+  marginTop: "var(--ds-space-negative-150, -0.75rem)",
   marginLeft: "var(--ds-space-050, 4px)",
-  marginBottom: "var(--ds-space-negative-050, -4px)"
+  marginBottom: "var(--ds-space-negative-050, -4px)",
+  // Using opacity so that lozenge takes up space and doesn't cause shift on render
+  opacity: '0',
+  '&.show-lozenge': {
+    opacity: '1'
+  }
 });

package/dist/es2019/extensibility/ExtensionComponent.js

@@ -16,6 +16,11 @@ export class ExtensionComponent extends Component {
     // memoized to avoid rerender on extension state changes
     _defineProperty(this, "getNodeRenderer", memoizeOne(getNodeRenderer));
     _defineProperty(this, "getExtensionModuleNodePrivateProps", memoizeOne(getExtensionModuleNodePrivateProps));
+    _defineProperty(this, "setIsNodeHovered", isHovered => {
+      this.setState({
+        isNodeHovered: isHovered
+      });
+    });
     _defineProperty(this, "setStateFromPromise", (stateKey, promise) => {
       promise && promise.then(p => {
         if (!this.mounted) {
@@ -164,7 +169,9 @@ export class ExtensionComponent extends Component {
         pluginInjectionApi: pluginInjectionApi,
         editorAppearance: editorAppearance,
         showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
-        isNodeSelected: selectedNode === node
+        isNodeSelected: selectedNode === node,
+        isNodeHovered: this.state.isNodeHovered,
+        setIsNodeHovered: this.setIsNodeHovered
       });
     }
     const extensionHandlerResult = this.tryExtensionHandler(undefined);
@@ -182,7 +189,9 @@ export class ExtensionComponent extends Component {
           hideFrame: (_this$state$_privateP = this.state._privateProps) === null || _this$state$_privateP === void 0 ? void 0 : _this$state$_privateP.__hideFrame,
           pluginInjectionApi: pluginInjectionApi,
           showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
-          isNodeSelected: selectedNode === node
+          isNodeSelected: selectedNode === node,
+          isNodeHovered: this.state.isNodeHovered,
+          setIsNodeHovered: this.setIsNodeHovered
         }, extensionHandlerResult);
       case 'inlineExtension':
         return /*#__PURE__*/React.createElement(InlineExtension, {

package/dist/es2019/extensibility/MultiBodiedExtension/index.js

@@ -52,7 +52,9 @@ const MultiBodiedExtensionWithWidth = ({
   widthState,
   editorAppearance,
   showMacroInteractionDesignUpdates,
-  isNodeSelected
+  isNodeSelected,
+  isNodeHovered,
+  setIsNodeHovered
 }) => {
   const {
     parameters,
@@ -114,16 +116,24 @@ const MultiBodiedExtensionWithWidth = ({
   const navigationClassNames = classnames('multiBodiedExtension--navigation', {
     'remove-margins': showMacroInteractionDesignUpdates
   });
+  const handleMouseEvent = didHover => {
+    if (setIsNodeHovered) {
+      setIsNodeHovered(didHover);
+    }
+  };
   return jsx(Fragment, null, showMacroInteractionDesignUpdates && jsx(ExtensionLozenge, {
     isNodeSelected: isNodeSelected,
     node: node,
     showMacroInteractionDesignUpdates: true,
-    customContainerStyles: mbeWrapperStyles
+    customContainerStyles: mbeWrapperStyles,
+    isNodeHovered: isNodeHovered
   }), jsx("div", {
     className: wrapperClassNames,
     css: mbeExtensionWrapperCSS,
     "data-testid": "multiBodiedExtension--wrapper",
-    style: mbeWrapperStyles
+    style: mbeWrapperStyles,
+    onMouseOver: () => handleMouseEvent(true),
+    onMouseLeave: () => handleMouseEvent(false)
   }, getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates), jsx("div", {
     className: containerClassNames,
     css: containerCssExtended,

package/dist/es2019/keymaps/index.js

@@ -90,17 +90,13 @@ const arrowKeysMap = {
   ARROWUP: '\u2191',
   ARROWDOWN: '\u2193'
 };
-const tooltipShortcutStyle = css`
-  border-radius: 2px;
-  background-color: ${`var(--ds-background-inverse-subtle, ${N400})`};
-  padding: 0 ${"var(--ds-space-025, 2px)"};
-
-  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
-  /* stylelint-disable-next-line */
-  label: tooltip-shortcut;
-`;
-/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
-
+const tooltipShortcutStyle = css({
+  borderRadius: '2px',
+  backgroundColor: `var(--ds-background-inverse-subtle, ${N400})`,
+  padding: `0 ${"var(--ds-space-025, 2px)"}`,
+  // NOTE: This might not actually do anything: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E
+  label: 'tooltip-shortcut'
+});
 function formatShortcut(keymap) {
   let shortcut;
   if (browser.mac) {

package/dist/es2019/media-inline/media-inline-image-card.js

@@ -1,5 +1,4 @@
 /** @jsx jsx */
-
 import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import { jsx } from '@emotion/react';
 import ReactDOM from 'react-dom';

package/dist/es2019/media-inline/styles.js

@@ -7,6 +7,7 @@ export const INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY = '--editor-media-inline-image
 export const INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY = '--editor-media-inline-image-border-color';
 
 // We implemented such selectors to ensure specificity:
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Nested and dynamic css calls are violations, needs manual remediation
 const inlineImageHeight = (height, margin = 0) => css`
   /* Editor style */
   > .mediaInlineView-content-wrap > .${INLINE_IMAGE_WRAPPER_CLASS_NAME},
@@ -25,6 +26,7 @@ const inlineImageHeight = (height, margin = 0) => css`
  * shift in top and bottom and size adjustments to make up for lack of 1to1 size
  * mapping
  */
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Nested and dynamic css calls are violations, needs manual remediation
 export const mediaInlineImageStyles = css`
   // p, h3, and action items
   .${INLINE_IMAGE_WRAPPER_CLASS_NAME} {

package/dist/es2019/media-inline/views/icon-wrapper.js

@@ -1,5 +1,4 @@
 /** @jsx jsx */
-
 import { css, jsx } from '@emotion/react';
 const wrapperStyle = css({
   display: 'flex',

package/dist/es2019/monitoring/error.js

@@ -1,6 +1,6 @@
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "78.11.5";
+const packageVersion = "78.11.7";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/preset/plugin-injection-api.js

@@ -220,10 +220,6 @@ export class EditorPluginInjectionAPI {
         }
         const plugin = getPluginByName(prop);
         if (!plugin) {
-          if (process.env.NODE_ENV === 'development') {
-            // eslint-disable-next-line
-            console.warn(`Plugin: ${prop} does not exist`);
-          }
           return undefined;
         }
         const sharedState = sharedStateAPI.createAPI(plugin);

package/dist/es2019/selection/gap-cursor/styles.js

@@ -1,17 +1,19 @@
 import { css, keyframes } from '@emotion/react';
-const gapCursorBlink = keyframes`
-  from, to {
-    opacity: 0;
+const gapCursorBlink = keyframes({
+  'from, to': {
+    opacity: 0
+  },
+  '50%': {
+    opacity: 1
   }
-  50% {
-    opacity: 1;
-  }
-`;
+});
 export const hideCaretModifier = 'ProseMirror-hide-gapcursor';
 const gapCursor = '.ProseMirror-gapcursor';
 const prosemirrorwidget = '.ProseMirror-widget';
 const wrapLeft = '[layout="wrap-left"]';
 const wrapRight = '[layout="wrap-right"]';
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- This needs manual remediation, it autofixes seemingly safely, but the code style and readability is destroyed.
 export const gapCursorStyles = css`
   /* =============== GAP CURSOR ================== */
   .ProseMirror {

package/dist/es2019/styles/shared/annotation.js

@@ -9,22 +9,23 @@ export const AnnotationSharedClassNames = {
 const Y75a = 'rgba(255, 240, 179, 0.5)';
 const Y200a = 'rgba(255, 196, 0, 0.82)';
 export const AnnotationSharedCSSByState = () => ({
-  focus: css`
+  focus: css({
     // Background is not coming through in confluence, suspecting to be caused by some specific combination of
     // emotion and token look up
-
-    background: ${`var(--ds-background-accent-yellow-subtler, ${Y75})`};
-    border-bottom: 2px solid ${`var(--ds-border-accent-yellow, ${Y300})`};
+    background: `var(--ds-background-accent-yellow-subtler, ${Y75})`,
+    borderBottom: `2px solid ${`var(--ds-border-accent-yellow, ${Y300})`}`,
     // TODO: https://product-fabric.atlassian.net/browse/DSP-4147
-    box-shadow: ${`var(--ds-shadow-overlay, ${`1px 2px 3px ${N60A}, -1px 2px 3px ${N60A}`})`};
-    cursor: pointer;
-  `,
-  blur: css`
-    background: ${`var(--ds-background-accent-yellow-subtlest, ${Y75a})`};
-    border-bottom: 2px solid ${`var(--ds-border-accent-yellow, ${Y200a})`};
-    cursor: pointer;
-  `
+    boxShadow: `var(--ds-shadow-overlay, ${`1px 2px 3px ${N60A}, -1px 2px 3px ${N60A}`})`,
+    cursor: 'pointer'
+  }),
+  blur: css({
+    background: `var(--ds-background-accent-yellow-subtlest, ${Y75a})`,
+    borderBottom: `2px solid ${`var(--ds-border-accent-yellow, ${Y200a})`}`,
+    cursor: 'pointer'
+  })
 });
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- `AnnotationSharedCSSByState()` is not safe in object syntax
 export const annotationSharedStyles = () => css`
   .ProseMirror {
     .${AnnotationSharedClassNames.focus} {

package/dist/es2019/styles/shared/block-marks.js

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Perfectly safe to auto-fix, but leaving it up to the team to remediate as the readability only gets worse with autofixing */
 import { css } from '@emotion/react';
 export const blockMarksSharedStyles = css`
   /**

package/dist/es2019/styles/shared/blockquote.js

@@ -1,38 +1,31 @@
 import { css } from '@emotion/react';
 import { akEditorBlockquoteBorderColor, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
-export const blockquoteSharedStyles = css`
-  & blockquote {
-    box-sizing: border-box;
-    padding-left: ${"var(--ds-space-200, 16px)"};
-    border-left: 2px solid
-      ${`var(--ds-border, ${akEditorBlockquoteBorderColor})`};
-    margin: ${blockNodesVerticalMargin} 0 0 0;
-    margin-right: 0;
-
-    [dir='rtl'] & {
-      padding-left: 0;
-      padding-right: ${"var(--ds-space-200, 16px)"};
-    }
-
-    &:first-child {
-      margin-top: 0;
-    }
-
-    &::before {
-      content: '';
-    }
-
-    &::after {
-      content: none;
-    }
-
-    & p {
-      display: block;
-    }
-
-    & table,
-    & table:last-child {
-      display: inline-table;
+export const blockquoteSharedStyles = css({
+  '& blockquote': {
+    boxSizing: 'border-box',
+    paddingLeft: "var(--ds-space-200, 16px)",
+    borderLeft: `2px solid ${`var(--ds-border, ${akEditorBlockquoteBorderColor})`}`,
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    margin: `${blockNodesVerticalMargin} 0 0 0`,
+    marginRight: 0,
+    "[dir='rtl'] &": {
+      paddingLeft: 0,
+      paddingRight: "var(--ds-space-200, 16px)"
+    },
+    '&:first-child': {
+      marginTop: 0
+    },
+    '&::before': {
+      content: "''"
+    },
+    '&::after': {
+      content: 'none'
+    },
+    '& p': {
+      display: 'block'
+    },
+    '& table, & table:last-child': {
+      display: 'inline-table'
     }
   }
-`;
+});

package/dist/es2019/styles/shared/code-block.js

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Should be safe to autofix, but ignoring for now */
 import { css } from '@emotion/react';
 import { akEditorCodeFontFamily, akEditorLineHeight, akEditorTableCellMinWidth, blockNodesVerticalMargin, overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { N20, N30, N400, N800 } from '@atlaskit/theme/colors';

package/dist/es2019/styles/shared/code-mark.js

@@ -2,10 +2,10 @@ import { css } from '@emotion/react';
 import { getCodeStyles } from '@atlaskit/code/inline';
 import { N30A } from '@atlaskit/theme/colors';
 export const codeMarkSharedStyles = () => {
-  return css`
-    .code {
-      --ds--code--bg-color: ${`var(--ds-background-neutral, ${N30A})`};
-      ${getCodeStyles()}
+  return css({
+    '.code': {
+      '--ds--code--bg-color': `var(--ds-background-neutral, ${N30A})`,
+      ...getCodeStyles()
     }
-  `;
+  });
 };

package/dist/es2019/styles/shared/column-layout.js

@@ -1,22 +1,20 @@
 import { css } from '@emotion/react';
 import { gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
-const columnLayoutSharedStyle = css`
-  [data-layout-section] {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    & > * {
-      flex: 1;
-      min-width: 0;
-    }
-
-    & > .unsupportedBlockView-content-wrap {
-      min-width: initial;
-    }
-
-    @media screen and (max-width: ${gridMediumMaxWidth}px) {
-      flex-direction: column;
+const columnLayoutSharedStyle = css({
+  '[data-layout-section]': {
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'row',
+    '& > *': {
+      flex: 1,
+      minWidth: 0
+    },
+    '& > .unsupportedBlockView-content-wrap': {
+      minWidth: 'initial'
+    },
+    [`@media screen and (max-width: ${gridMediumMaxWidth}px)`]: {
+      flexDirection: 'column'
     }
   }
-`;
+});
 export { columnLayoutSharedStyle };

package/dist/es2019/styles/shared/date.js

@@ -3,8 +3,8 @@ export const DateSharedCssClassName = {
   DATE_WRAPPER: `date-lozenger-container`,
   DATE_CONTAINER: 'dateView-content-wrap'
 };
-export const dateSharedStyle = css`
-  .${DateSharedCssClassName.DATE_WRAPPER} span {
-    white-space: unset;
+export const dateSharedStyle = css({
+  [`.${DateSharedCssClassName.DATE_WRAPPER} span`]: {
+    whiteSpace: 'unset'
   }
-`;
+});

package/dist/es2019/styles/shared/expand.js

@@ -1,8 +1,7 @@
 import { css } from '@emotion/react';
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-export const expandIconWrapperStyle = css`
-  margin-left: ${"var(--ds-space-negative-100, -8px)"};
-`;
+export const expandIconWrapperStyle = css({
+  marginLeft: "var(--ds-space-negative-100, -8px)"
+});
 const prefix = 'ak-editor-expand';
 export const expandClassNames = {
   prefix,