@atlaskit/editor-common 76.27.9 → 76.27.10

package/dist/es2019/ui-menu/DropdownMenu/index.js

@@ -7,8 +7,7 @@ import { css, jsx } from '@emotion/react';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CustomItem, MenuGroup, Section } from '@atlaskit/menu';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { B100, DN600, DN80, N70, N900 } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
+import { B100, N70, N900 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { DropdownMenuSharedCssClassName } from '../../styles';
 import { KeyDownHandlerContext } from '../../ui-menu/ToolbarArrowKeyNavigationProvider';
@@ -27,59 +26,47 @@ const focusedMenuItemStyle = css`
   box-shadow: inset 0px 0px 0px 2px ${`var(--ds-border-focused, ${B100})`};
   outline: none;
 `;
-const buttonStyles = (isActive, submenuActive) => theme => {
+const buttonStyles = (isActive, submenuActive) => {
   if (isActive) {
     /**
      * Hack for item to imitate old dropdown-menu selected styles
      */
     return css`
-        > span,
-        > span:hover,
-        > span:active {
-          background: ${"var(--ds-background-selected, #6c798f)"};
-          color: ${"var(--ds-text, #fff)"};
-        }
-        :focus > span[aria-disabled='false'] {
-          ${focusedMenuItemStyle};
-        }
-        :focus-visible,
-        :focus-visible > span[aria-disabled='false'] {
-          outline: none;
-        }
-      `;
+      > span,
+      > span:hover,
+      > span:active {
+        background: ${"var(--ds-background-selected, #6c798f)"};
+        color: ${"var(--ds-text, #fff)"};
+      }
+      :focus > span[aria-disabled='false'] {
+        ${focusedMenuItemStyle};
+      }
+      :focus-visible,
+      :focus-visible > span[aria-disabled='false'] {
+        outline: none;
+      }
+    `;
   } else {
     return css`
-        > span:hover[aria-disabled='false'] {
-          color: ${themed({
-      light: `var(--ds-text, ${N900})`,
-      dark: `var(--ds-text, ${DN600})`
-    })(theme)};
-          background-color: ${themed({
-      light: "var(--ds-background-neutral-subtle-hovered, rgb(244, 245, 247))",
-      dark: "var(--ds-background-neutral-subtle-hovered, rgb(59, 71, 92))"
-    })(theme)};
-        }
-        ${!submenuActive && `
+      > span:hover[aria-disabled='false'] {
+        color: ${`var(--ds-text, ${N900})`};
+        background-color: ${"var(--ds-background-neutral-subtle-hovered, rgb(244, 245, 247))"};
+      }
+      ${!submenuActive && `
           > span:active[aria-disabled='false'] {
-            background-color: ${themed({
-      light: "var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))",
-      dark: "var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))"
-    })(theme)};
+            background-color: ${"var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))"};
           }`}
-        > span[aria-disabled='true'] {
-          color: ${themed({
-      light: `var(--ds-text-disabled, ${N70})`,
-      dark: `var(--ds-text-disabled, ${DN80})`
-    })(theme)};
-        }
-        :focus > span[aria-disabled='false'] {
-          ${focusedMenuItemStyle};
-        }
-        :focus-visible,
-        :focus-visible > span[aria-disabled='false'] {
-          outline: none;
-        }
-      `; // The default focus-visible style is removed to ensure consistency across browsers
+      > span[aria-disabled='true'] {
+        color: ${`var(--ds-text-disabled, ${N70})`};
+      }
+      :focus > span[aria-disabled='false'] {
+        ${focusedMenuItemStyle};
+      }
+      :focus-visible,
+      :focus-visible > span[aria-disabled='false'] {
+        outline: none;
+      }
+    `; // The default focus-visible style is removed to ensure consistency across browsers
   }
 };
 
@@ -298,9 +285,7 @@ function DropdownMenuItem({
     setSubmenuActive(!!event.target.closest(`.${DropdownMenuSharedCssClassName.SUBMENU}`));
   };
   const dropListItem = jsx("div", {
-    css: theme => buttonStyles(item.isActive, submenuActive)({
-      theme
-    }),
+    css: () => buttonStyles(item.isActive, submenuActive),
     tabIndex: -1,
     "aria-disabled": item.isDisabled ? 'true' : 'false',
     onMouseDown: _handleSubmenuActive

package/dist/esm/media-inline/constants.js

@@ -1,3 +1,22 @@
+import { headingSizes } from '@atlaskit/theme/typography';
 export var DEFAULT_IMAGE_WIDTH = 250;
 export var DEFAULT_IMAGE_HEIGHT = 200;
-export var DEFAULT_INLINE_IMAGE_ASPECT_RATIO = DEFAULT_IMAGE_WIDTH / DEFAULT_IMAGE_HEIGHT;
+export var DEFAULT_INLINE_IMAGE_ASPECT_RATIO = DEFAULT_IMAGE_WIDTH / DEFAULT_IMAGE_HEIGHT;
+/**
+ * Reference Heights
+ *
+ * These heights enforce consistent sizes with media inline nodes due to
+ * inconsistencies with center aligned inline nodes and text.
+ *
+ * There is conversation about refactoring media inline nodes to conform to
+ * aligning correctly with the surrounding text.
+ */
+export var referenceHeights = {
+  p: headingSizes.h600.lineHeight - 2,
+  h1: headingSizes.h800.lineHeight + 4,
+  h2: headingSizes.h700.lineHeight + 3,
+  h3: headingSizes.h600.lineHeight + 1,
+  h4: headingSizes.h500.lineHeight + 3,
+  h5: headingSizes.h400.lineHeight + 4,
+  h6: headingSizes.h300.lineHeight + 2
+};

package/dist/esm/media-inline/inline-image-wrapper.js

@@ -4,8 +4,10 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { css, jsx } from '@emotion/react';
 import { B300 } from '@atlaskit/theme/colors';
 var wrapperStyle = css({
-  display: 'inline-block',
-  verticalAlign: 'text-bottom',
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  verticalAlign: 'middle',
   overflow: 'hidden',
   borderRadius: "var(--ds-border-radius, 3px)",
   aspectRatio: "var(".concat(INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY, ", ").concat(DEFAULT_INLINE_IMAGE_ASPECT_RATIO, ")")

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

@@ -5,8 +5,8 @@ import { useEffect, useMemo, useState } from 'react';
 import { jsx } from '@emotion/react';
 import { createIntl, injectIntl } from 'react-intl-next';
 import { Card } from '@atlaskit/media-card';
-import { headingSizes } from '@atlaskit/theme/typography';
 import { messages } from '../messages/media-inline-card';
+import { referenceHeights } from './constants';
 import { InlineImageWrapper } from './inline-image-wrapper';
 import { InlineImageCardErrorView } from './views/error-view';
 import { InlineImageCardLoadingView } from './views/loading-view';
@@ -102,8 +102,8 @@ export var MediaInlineImageCardInternal = function MediaInlineImageCardInternal(
       };
     }
     return {
-      width: Math.round(aspectRatio * headingSizes.h800.lineHeight),
-      height: headingSizes.h800.lineHeight
+      width: Math.round(aspectRatio * referenceHeights['h1']),
+      height: referenceHeights['h1']
     };
   }, [width, height, aspectRatio]);
   return jsx(InlineImageWrapper, {

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

@@ -1,10 +1,18 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
 import { css } from '@emotion/react';
-import { headingSizes } from '@atlaskit/theme/typography';
+import { referenceHeights } from './constants';
 export var INLINE_IMAGE_WRAPPER_CLASS_NAME = 'media-inline-image-wrapper';
 export var INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY = '--editor-media-inline-image-aspect-ratio';
 var inlineImageHeight = function inlineImageHeight(height) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  > .", ",\n    > .mediaInlineView-content-wrap\n    > .", " {\n    height: ", "px;\n  }\n"])), INLINE_IMAGE_WRAPPER_CLASS_NAME, INLINE_IMAGE_WRAPPER_CLASS_NAME, height);
+  var margin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  > .", ",\n    > .mediaInlineView-content-wrap\n    > .", " {\n    height: ", "px;\n    transform: translateY(", "px);\n  }\n"])), INLINE_IMAGE_WRAPPER_CLASS_NAME, INLINE_IMAGE_WRAPPER_CLASS_NAME, height, margin);
 };
-export var mediaInlineImageStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  // default inline image height is 24px, this includes\n  // p, h3, and action items\n  .", " {\n    height: ", "px;\n  }\n\n  h1 {\n    ", "\n  }\n\n  h2 {\n    ", "\n  }\n\n  h4 {\n    ", "\n  }\n\n  h5,\n  h6 {\n    ", "\n  }\n"])), INLINE_IMAGE_WRAPPER_CLASS_NAME, headingSizes.h600.lineHeight, inlineImageHeight(headingSizes.h800.lineHeight), inlineImageHeight(headingSizes.h700.lineHeight), inlineImageHeight(headingSizes.h500.lineHeight), inlineImageHeight(headingSizes.h400.lineHeight));
+
+/**
+ * Shifting the mediaInline image component (renders image) to align nicely with
+ * mediaInline (renders text) is a bit of a testing ground. This numbers represent
+ * shift in top and bottom and size adjustments to make up for lack of 1to1 size
+ * mapping
+ */
+export var mediaInlineImageStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  // p, h3, and action items\n  .", " {\n    height: ", "px;\n    transform: translateY(-2px);\n  }\n\n  h1 {\n    ", "\n  }\n\n  h2 {\n    ", "\n  }\n\n  h3 {\n    ", "\n  }\n\n  h4 {\n    ", "\n  }\n\n  h5 {\n    ", "\n  }\n\n  h6 {\n    ", "\n  }\n"])), INLINE_IMAGE_WRAPPER_CLASS_NAME, referenceHeights['p'], inlineImageHeight(referenceHeights['h1'], -3), inlineImageHeight(referenceHeights['h2'], -3), inlineImageHeight(referenceHeights['h3'], -2), inlineImageHeight(referenceHeights['h4'], -2), inlineImageHeight(referenceHeights['h5'], -2), inlineImageHeight(referenceHeights['h6'], -2));

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

@@ -4,7 +4,7 @@ import { css, jsx } from '@emotion/react';
 var wrapperStyle = css({
   display: 'flex',
   'span > svg': {
-    verticalAlign: 'baseline'
+    verticalAlign: 'top'
   }
 });
 export var IconWrapper = function IconWrapper(_ref) {

package/dist/esm/monitoring/error.js

@@ -6,7 +6,7 @@ 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; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "76.27.9";
+var packageVersion = "76.27.10";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -2,37 +2,20 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2, _templateObject3;
 import { css } from '@emotion/react';
 import { N60A, Y300, Y75 } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
 export var annotationPrefix = 'ak-editor-annotation';
 export var AnnotationSharedClassNames = {
   focus: "".concat(annotationPrefix, "-focus"),
   blur: "".concat(annotationPrefix, "-blur"),
   draft: "".concat(annotationPrefix, "-draft")
 };
-var DY75 = 'rgb(111, 92, 37)';
-var DY300 = '#ffd557';
 var Y75a = 'rgba(255, 240, 179, 0.5)';
 var Y200a = 'rgba(255, 196, 0, 0.82)';
-var DY75a = 'rgba(111, 92, 37, 0.5)';
-var DY200 = '#82641c';
-export var AnnotationSharedCSSByState = function AnnotationSharedCSSByState(props) {
+export var AnnotationSharedCSSByState = function AnnotationSharedCSSByState() {
   return {
-    focus: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    // Background is not coming through in confluence, suspecting to be caused by some specific combination of\n    // emotion and token look up\n\n    background: ", ";\n    border-bottom: 2px solid\n      ", ";\n    // TODO: https://product-fabric.atlassian.net/browse/DSP-4147\n    box-shadow: ", ";\n    cursor: pointer;\n  "])), themed({
-      light: "var(--ds-background-accent-yellow-subtler, ".concat(Y75, ")"),
-      dark: "var(--ds-background-accent-yellow-subtler, ".concat(DY75, ")")
-    })(props), themed({
-      light: "var(--ds-border-accent-yellow, ".concat(Y300, ")"),
-      dark: "var(--ds-border-accent-yellow, ".concat(DY300, ")")
-    })(props), "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(N60A, ", -1px 2px 3px ").concat(N60A), ")")),
-    blur: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    background: ", ";\n    border-bottom: 2px solid\n      ", ";\n    cursor: pointer;\n  "])), themed({
-      light: "var(--ds-background-accent-yellow-subtlest, ".concat(Y75a, ")"),
-      dark: "var(--ds-background-accent-yellow-subtlest, ".concat(DY75a, ")")
-    })(props), themed({
-      light: "var(--ds-border-accent-yellow, ".concat(Y200a, ")"),
-      dark: "var(--ds-border-accent-yellow, ".concat(DY200, ")")
-    })(props))
+    focus: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    // Background is not coming through in confluence, suspecting to be caused by some specific combination of\n    // emotion and token look up\n\n    background: ", ";\n    border-bottom: 2px solid ", ";\n    // TODO: https://product-fabric.atlassian.net/browse/DSP-4147\n    box-shadow: ", ";\n    cursor: pointer;\n  "])), "var(--ds-background-accent-yellow-subtler, ".concat(Y75, ")"), "var(--ds-border-accent-yellow, ".concat(Y300, ")"), "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(N60A, ", -1px 2px 3px ").concat(N60A), ")")),
+    blur: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    background: ", ";\n    border-bottom: 2px solid ", ";\n    cursor: pointer;\n  "])), "var(--ds-background-accent-yellow-subtlest, ".concat(Y75a, ")"), "var(--ds-border-accent-yellow, ".concat(Y200a, ")"))
   };
 };
-export var annotationSharedStyles = function annotationSharedStyles(props) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .ProseMirror {\n    .", " {\n      ", ";\n    }\n\n    .", " {\n      ", ";\n      cursor: initial;\n    }\n\n    .", " {\n      ", ";\n    }\n  }\n"])), AnnotationSharedClassNames.focus, AnnotationSharedCSSByState(props).focus, AnnotationSharedClassNames.draft, AnnotationSharedCSSByState(props).focus, AnnotationSharedClassNames.blur, AnnotationSharedCSSByState(props).blur);
+export var annotationSharedStyles = function annotationSharedStyles() {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .ProseMirror {\n    .", " {\n      ", ";\n    }\n\n    .", " {\n      ", ";\n      cursor: initial;\n    }\n\n    .", " {\n      ", ";\n    }\n  }\n"])), AnnotationSharedClassNames.focus, AnnotationSharedCSSByState().focus, AnnotationSharedClassNames.draft, AnnotationSharedCSSByState().focus, AnnotationSharedClassNames.blur, AnnotationSharedCSSByState().blur);
 };

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

@@ -2,9 +2,8 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2;
 import { css } from '@emotion/react';
 import { akEditorCodeFontFamily, akEditorLineHeight, akEditorTableCellMinWidth, blockNodesVerticalMargin, overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { DN20, DN400, DN50, DN800, N20, N30, N400, N800 } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
-import { borderRadius, fontSize } from '@atlaskit/theme/constants';
+import { N20, N30, N400, N800 } from '@atlaskit/theme/colors';
+import { fontSize } from '@atlaskit/theme/constants';
 export var CodeBlockSharedCssClassName = {
   CODEBLOCK_CONTAINER: 'code-block',
   CODEBLOCK_START: 'code-block--start',
@@ -14,25 +13,10 @@ export var CodeBlockSharedCssClassName = {
   CODEBLOCK_CONTENT: 'code-content',
   DS_CODEBLOCK: '[data-ds--code--code-block]'
 };
-export var codeBlockSharedStyles = function codeBlockSharedStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    position: relative;\n    background-color: ", ";\n    border-radius: ", "px;\n    margin: ", " 0 0 0;\n    font-family: ", ";\n    min-width: ", "px;\n    cursor: pointer;\n\n    --ds--code--bg-color: transparent;\n\n    /* This is necessary to allow for arrow key navigation in/out of code blocks in Firefox. */\n    white-space: normal;\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      top: 0px;\n      left: 0px;\n    }\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      bottom: 0px;\n      right: 0px;\n    }\n\n    .", " {\n      background-color: ", ";\n      display: flex;\n      border-radius: ", "px;\n      width: 100%;\n      counter-reset: line;\n      overflow-x: auto;\n\n      background-image: ", ";\n\n      background-repeat: no-repeat;\n      background-attachment: local, local, local, local, scroll, scroll, scroll,\n        scroll;\n      background-size: ", " 100%,\n        ", " 100%, ", " 100%,\n        ", " 100%, ", " 100%,\n        1px 100%, ", " 100%, 1px 100%;\n      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;\n\n      /* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */\n      overflow-y: hidden;\n    }\n\n    .", " {\n      flex-shrink: 0;\n      text-align: right;\n      background-color: ", ";\n      padding: ", ";\n      position: relative;\n\n      span {\n        display: block;\n        line-height: 0;\n        font-size: 0;\n\n        ::before {\n          display: inline-block;\n          content: counter(line);\n          counter-increment: line;\n          color: ", ";\n          font-size: ", ";\n          line-height: 1.5rem;\n        }\n      }\n    }\n\n    .", " {\n      display: flex;\n      flex: 1;\n\n      code {\n        flex-grow: 1;\n        tab-size: 4;\n        cursor: text;\n        color: ", ";\n        border-radius: ", "px;\n        margin: ", ";\n        white-space: pre;\n        font-size: ", ";\n        line-height: 1.5rem;\n      }\n    }\n  }\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, transparent)", borderRadius(), blockNodesVerticalMargin, akEditorCodeFontFamily, akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, themed({
-    light: "var(--ds-background-neutral, ".concat(N20, ")"),
-    dark: "var(--ds-background-neutral, ".concat(DN50, ")")
-  })(props), borderRadius(), overflowShadow({
-    background: themed({
-      light: "var(--ds-background-neutral, ".concat(N20, ")"),
-      dark: "var(--ds-background-neutral, ".concat(DN50, ")")
-    })(props),
+export var codeBlockSharedStyles = function codeBlockSharedStyles() {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    position: relative;\n    background-color: ", ";\n    border-radius: ", ";\n    margin: ", " 0 0 0;\n    font-family: ", ";\n    min-width: ", "px;\n    cursor: pointer;\n\n    --ds--code--bg-color: transparent;\n\n    /* This is necessary to allow for arrow key navigation in/out of code blocks in Firefox. */\n    white-space: normal;\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      top: 0px;\n      left: 0px;\n    }\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      bottom: 0px;\n      right: 0px;\n    }\n\n    .", " {\n      background-color: ", ";\n      display: flex;\n      border-radius: ", ";\n      width: 100%;\n      counter-reset: line;\n      overflow-x: auto;\n\n      background-image: ", ";\n\n      background-repeat: no-repeat;\n      background-attachment: local, local, local, local, scroll, scroll, scroll,\n        scroll;\n      background-size: ", " 100%,\n        ", " 100%, ", " 100%,\n        ", " 100%, ", " 100%,\n        1px 100%, ", " 100%, 1px 100%;\n      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;\n\n      /* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */\n      overflow-y: hidden;\n    }\n\n    .", " {\n      flex-shrink: 0;\n      text-align: right;\n      background-color: ", ";\n      padding: ", ";\n      position: relative;\n\n      span {\n        display: block;\n        line-height: 0;\n        font-size: 0;\n\n        ::before {\n          display: inline-block;\n          content: counter(line);\n          counter-increment: line;\n          color: ", ";\n          font-size: ", ";\n          line-height: 1.5rem;\n        }\n      }\n    }\n\n    .", " {\n      display: flex;\n      flex: 1;\n\n      code {\n        flex-grow: 1;\n        tab-size: 4;\n        cursor: text;\n        color: ", ";\n        border-radius: ", ";\n        margin: ", ";\n        white-space: pre;\n        font-size: ", ";\n        line-height: 1.5rem;\n      }\n    }\n  }\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, transparent)", "var(--ds-border-radius, 3px)", blockNodesVerticalMargin, akEditorCodeFontFamily, akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, "var(--ds-background-neutral, ".concat(N20, ")"), "var(--ds-border-radius, 3px)", overflowShadow({
+    background: "var(--ds-background-neutral, ".concat(N20, ")"),
     leftCoverWidth: "var(--ds-space-300, 24px)"
-  }), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, themed({
-    light: "var(--ds-background-neutral, ".concat(N30, ")"),
-    dark: "var(--ds-background-neutral, ".concat(DN20, ")")
-  })(props), "var(--ds-space-100, 8px)", themed({
-    light: "var(--ds-text-subtlest, ".concat(N400, ")"),
-    dark: "var(--ds-text-subtlest, ".concat(DN400, ")")
-  })(props), relativeFontSizeToBase16(fontSize()), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, themed({
-    light: "var(--ds-text, ".concat(N800, ")"),
-    dark: "var(--ds-text, ".concat(DN800, ")")
-  })(props), borderRadius(), "var(--ds-space-100, 8px)", relativeFontSizeToBase16(fontSize()));
+  }), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "var(--ds-background-neutral, ".concat(N30, ")"), "var(--ds-space-100, 8px)", "var(--ds-text-subtlest, ".concat(N400, ")"), relativeFontSizeToBase16(fontSize()), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, "var(--ds-text, ".concat(N800, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-100, 8px)", relativeFontSizeToBase16(fontSize()));
 };
 export var codeBlockInListSafariFix = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ::before {\n    content: ' ';\n    line-height: ", ";\n  }\n\n  > p:first-child,\n  > .code-block:first-child,\n  > .ProseMirror-gapcursor:first-child + .code-block {\n    margin-top: -", "em !important;\n  }\n"])), akEditorLineHeight, akEditorLineHeight);

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

@@ -2,11 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 import { css } from '@emotion/react';
 import { getCodeStyles } from '@atlaskit/code/inline';
-import { DN70, N30A } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
-export var codeMarkSharedStyles = function codeMarkSharedStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    .code {\n      --ds--code--bg-color: ", ";\n      ", "\n    }\n  "])), themed({
-    light: "var(--ds-background-neutral, ".concat(N30A, ")"),
-    dark: "var(--ds-background-neutral, ".concat(DN70, ")")
-  })(props), getCodeStyles());
+import { N30A } from '@atlaskit/theme/colors';
+export var codeMarkSharedStyles = function codeMarkSharedStyles() {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    .code {\n      --ds--code--bg-color: ", ";\n      ", "\n    }\n  "])), "var(--ds-background-neutral, ".concat(N30A, ")"), getCodeStyles());
 };

package/dist/esm/styles/shared/panel.js

@@ -8,10 +8,7 @@ import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { akEditorTableCellMinWidth, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
 import { emojiImage, emojiSprite } from '@atlaskit/emoji';
-import { B100, B400, B50, B75, G200, G400, G50, G75, N0, N20, N60, P100, P400, P50, P75, R100, R200, R400, R50, R75, T100, T50, T75, Y100, Y200, Y400, Y50, Y75 } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { borderRadius, gridSize } from '@atlaskit/theme/constants';
+import { B100, B400, B50, B75, G200, G400, G50, G75, N0, N20, N60, P100, P400, P50, P75, R100, R400, R50, R75, T100, T50, T75, Y200, Y400, Y50, Y75 } from '@atlaskit/theme/colors';
 var lightPanelColors = {
   info: B50,
   note: P50,
@@ -90,28 +87,10 @@ var lightIconColor = {
   warning: "var(--ds-icon-warning, ".concat(Y400, ")"),
   error: "var(--ds-icon-danger, ".concat(R400, ")")
 };
-var darkIconColor = {
-  info: "var(--ds-icon-information, ".concat(B100, ")"),
-  note: "var(--ds-icon-discovery, ".concat(P100, ")"),
-  tip: "var(--ds-icon-success, ".concat(G200, ")"),
-  success: "var(--ds-icon-success, ".concat(G200, ")"),
-  warning: "var(--ds-icon-warning, ".concat(Y100, ")"),
-  error: "var(--ds-icon-danger, ".concat(R200, ")")
-};
-var tokenDarkPanelColors = {
-  info: "var(--ds-background-information, ".concat(darkPanelColors['info'], ")"),
-  note: "var(--ds-background-discovery, ".concat(darkPanelColors['note'], ")"),
-  tip: "var(--ds-background-success, ".concat(darkPanelColors['tip'], ")"),
-  success: "var(--ds-background-success, ".concat(darkPanelColors['success'], ")"),
-  warning: "var(--ds-background-warning, ".concat(darkPanelColors['warning'], ")"),
-  error: "var(--ds-background-danger, ".concat(darkPanelColors['error'], ")")
-};
 
-// TODO: Migrate away from gridSize
-// Recommendation: Replace gridSize with 8
 // New custom icons are a little smaller than predefined icons.
 // To fix alignment issues with custom icons, vertical alignment is updated.
-var panelEmojiSpriteVerticalAlignment = -(gridSize() * 3 - akEditorCustomIconSize) / 2;
+var panelEmojiSpriteVerticalAlignment = -(8 * 3 - akEditorCustomIconSize) / 2;
 var panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1;
 
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4066
@@ -165,54 +144,22 @@ export var PanelSharedSelectors = {
   copyButton: "button[aria-label=\"Copy\"]"
 };
 var iconDynamicStyles = function iconDynamicStyles(panelType) {
-  return function (props) {
-    var light = lightIconColor[panelType];
-    var dark = darkIconColor[panelType];
-    var color = themed({
-      light: light,
-      dark: dark
-    })(props);
-    return "\n    color: ".concat(color, ";\n  ");
-  };
+  return "color: ".concat(lightIconColor[panelType], ";");
 };
 
 // Provides the color without tokens, used when converting to a custom panel
 export var getPanelTypeBackgroundNoTokens = function getPanelTypeBackgroundNoTokens(panelType) {
-  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var light = lightPanelColors[panelType];
-  var dark = darkPanelColors[panelType];
-  var background = themed({
-    light: light,
-    dark: dark
-  })(props);
-  return background || 'none';
+  return lightPanelColors[panelType] || 'none';
 };
 export var getPanelTypeBackground = function getPanelTypeBackground(panelType) {
-  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var light = hexToEditorBackgroundPaletteColor(lightPanelColors[panelType]);
-  // hexToEditorBackgroundPaletteColor has a light mode as a fallback color - for legacy dark mode we define the tokens locally
-  var dark = tokenDarkPanelColors[panelType];
-  var background = themed({
-    light: light,
-    dark: dark
-  })(props);
-  return background || 'none';
+  return hexToEditorBackgroundPaletteColor(lightPanelColors[panelType]) || 'none';
 };
 var mainDynamicStyles = function mainDynamicStyles(panelType) {
-  return function (props) {
-    var background = getPanelTypeBackground(panelType, props);
-    var text = themed({
-      light: 'inherit',
-      dark: darkPanelColors.TextColor
-    })(props);
-    return "\n    background-color: ".concat(background, ";\n    color: ").concat(text, ";\n  ");
-  };
+  return "\n    background-color: ".concat(getPanelTypeBackground(panelType), ";\n    color: inherit;\n  ");
 };
-export var panelSharedStylesWithoutPrefix = function panelSharedStylesWithoutPrefix(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  margin: ", " 0 0;\n  padding: ", ";\n  min-width: ", "px;\n  display: flex;\n  position: relative;\n  align-items: baseline;\n  word-break: break-word;\n\n  ", "\n\n  .", " {\n    flex-shrink: 0;\n    height: ", ";\n    width: ", ";\n    box-sizing: content-box;\n    padding-right: ", ";\n    text-align: center;\n    user-select: none;\n    -moz-user-select: none;\n    -webkit-user-select: none;\n    -ms-user-select: none;\n    ", "\n\n    > span {\n      vertical-align: middle;\n      display: inline-flex;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n\n      // Vertical align only works for inline-block elements in Firefox\n      @-moz-document url-prefix() {\n        img {\n          display: inline-block;\n        }\n      }\n    }\n  }\n\n  .ak-editor-panel__content {\n    margin: 1px 0 1px;\n    flex: 1 0 0;\n    /*\n      https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox\n      The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn\u2019t compute to zero. The minimum size of a flex item is equal to the size of its contents.\n    */\n    min-width: 0;\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", ";\n  }\n"])), borderRadius(), blockNodesVerticalMargin, "var(--ds-space-100, 8px)", akEditorTableCellMinWidth, mainDynamicStyles(PanelType.INFO)(props), PanelSharedCssClassName.icon, "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", iconDynamicStyles(PanelType.INFO)(props), emojiSprite, panelEmojiSpriteVerticalAlignment, emojiImage, panelEmojiImageVerticalAlignment, PanelType.NOTE, mainDynamicStyles(PanelType.NOTE)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.NOTE)(props), PanelType.TIP, mainDynamicStyles(PanelType.TIP)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.TIP)(props), PanelType.WARNING, mainDynamicStyles(PanelType.WARNING)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.WARNING)(props), PanelType.ERROR, mainDynamicStyles(PanelType.ERROR)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.ERROR)(props), PanelType.SUCCESS, mainDynamicStyles(PanelType.SUCCESS)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.SUCCESS)(props), PanelType.CUSTOM, themed({
-    dark: getPanelBackgroundDarkModeColors
-  })(props));
+export var panelSharedStylesWithoutPrefix = function panelSharedStylesWithoutPrefix() {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  margin: ", " 0 0;\n  padding: ", ";\n  min-width: ", "px;\n  display: flex;\n  position: relative;\n  align-items: baseline;\n  word-break: break-word;\n\n  ", "\n\n  .", " {\n    flex-shrink: 0;\n    height: ", ";\n    width: ", ";\n    box-sizing: content-box;\n    padding-right: ", ";\n    text-align: center;\n    user-select: none;\n    -moz-user-select: none;\n    -webkit-user-select: none;\n    -ms-user-select: none;\n    ", "\n\n    > span {\n      vertical-align: middle;\n      display: inline-flex;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n\n      // Vertical align only works for inline-block elements in Firefox\n      @-moz-document url-prefix() {\n        img {\n          display: inline-block;\n        }\n      }\n    }\n  }\n\n  .ak-editor-panel__content {\n    margin: 1px 0 1px;\n    flex: 1 0 0;\n    /*\n      https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox\n      The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn\u2019t compute to zero. The minimum size of a flex item is equal to the size of its contents.\n    */\n    min-width: 0;\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n"])), "var(--ds-border-radius, 3px)", blockNodesVerticalMargin, "var(--ds-space-100, 8px)", akEditorTableCellMinWidth, mainDynamicStyles(PanelType.INFO), PanelSharedCssClassName.icon, "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", iconDynamicStyles(PanelType.INFO), emojiSprite, panelEmojiSpriteVerticalAlignment, emojiImage, panelEmojiImageVerticalAlignment, PanelType.NOTE, mainDynamicStyles(PanelType.NOTE), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.NOTE), PanelType.TIP, mainDynamicStyles(PanelType.TIP), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.TIP), PanelType.WARNING, mainDynamicStyles(PanelType.WARNING), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.WARNING), PanelType.ERROR, mainDynamicStyles(PanelType.ERROR), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.ERROR), PanelType.SUCCESS, mainDynamicStyles(PanelType.SUCCESS), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.SUCCESS));
 };
-export var panelSharedStyles = function panelSharedStyles(props) {
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .", " {\n    ", "\n  }\n"])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix(props));
+export var panelSharedStyles = function panelSharedStyles() {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .", " {\n    ", "\n  }\n"])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix());
 };

package/dist/esm/styles/shared/rule.js

@@ -2,14 +2,8 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 import { css } from '@emotion/react';
 import { akEditorLineHeight } from '@atlaskit/editor-shared-styles';
-import { DN50, N30A } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
-var divider = themed({
-  light: "var(--ds-border, ".concat(N30A, ")"),
-  dark: "var(--ds-border, ".concat(DN50, ")")
-});
-
+import { N30A } from '@atlaskit/theme/colors';
 // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
-export var ruleSharedStyles = function ruleSharedStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & hr {\n    border: none;\n    background-color: ", ";\n    margin: ", "em 0;\n    height: 2px;\n    border-radius: 1px;\n  }\n"])), divider(props), akEditorLineHeight);
+export var ruleSharedStyles = function ruleSharedStyles() {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & hr {\n    border: none;\n    background-color: ", ";\n    margin: ", "em 0;\n    height: 2px;\n    border-radius: 1px;\n  }\n"])), "var(--ds-border, ".concat(N30A, ")"), akEditorLineHeight);
 };

package/dist/esm/ui/BaseTheme/index.js

@@ -1,9 +1,7 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { useMemo } from 'react';
 import { ThemeProvider } from '@emotion/react';
 import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
-import { useGlobalTheme } from '@atlaskit/theme/components';
-import { CHANNEL, fontSize } from '@atlaskit/theme/constants';
+import { fontSize } from '@atlaskit/theme/constants';
 import { WidthConsumer } from '../WidthProvider';
 export function mapBreakpointToLayoutMaxWidth(breakpoint) {
   switch (breakpoint) {
@@ -17,25 +15,21 @@ export function mapBreakpointToLayoutMaxWidth(breakpoint) {
 export function BaseThemeWrapper(_ref) {
   var baseFontSize = _ref.baseFontSize,
     children = _ref.children;
-  var _useGlobalTheme = useGlobalTheme(),
-    mode = _useGlobalTheme.mode;
   var memoizedTheme = useMemo(function () {
-    return _defineProperty({
+    return {
       baseFontSize: baseFontSize || fontSize(),
       layoutMaxWidth: akEditorDefaultLayoutWidth
-    }, CHANNEL, {
-      mode: mode
-    });
-  }, [baseFontSize, mode]);
+    };
+  }, [baseFontSize]);
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: memoizedTheme
   }, children);
 }
-export function BaseTheme(_ref3) {
-  var children = _ref3.children,
-    baseFontSize = _ref3.baseFontSize;
-  return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref4) {
-    var breakpoint = _ref4.breakpoint;
+export function BaseTheme(_ref2) {
+  var children = _ref2.children,
+    baseFontSize = _ref2.baseFontSize;
+  return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref3) {
+    var breakpoint = _ref3.breakpoint;
     return /*#__PURE__*/React.createElement(BaseThemeWrapper, {
       breakpoint: breakpoint,
       baseFontSize: baseFontSize

package/dist/esm/ui/DropList/index.js

@@ -14,12 +14,10 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import { Component } from 'react';
 import { css, jsx } from '@emotion/react';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { DN50, DN600, N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
-import { borderRadius } from '@atlaskit/theme/constants';
+import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "76.27.9";
+var packageVersion = "76.27.10";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {
@@ -35,14 +33,8 @@ var DropList = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "wrapperStyles", css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", "\n    transition-duration: 0.2s;\n    transition: box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);\n  "])), _this.props.shouldFitContainer ? 'display: block; flex: 1 1 auto;' : 'display: inline-flex;'));
     _defineProperty(_assertThisInitialized(_this), "triggerStyles", css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    transition-duration: 0.2s;\n    transition: box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);\n    ", "\n  "])), _this.props.shouldFitContainer ? 'display: block; box-sizing: border-box;' : 'display: inline-flex;'));
     /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-    _defineProperty(_assertThisInitialized(_this), "menuWrapper", function (theme) {
-      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      color: ", ";\n      background-color: ", ";\n      border-radius: ", "px;\n      box-shadow: ", ";\n      box-sizing: border-box;\n      overflow: auto;\n      padding: ", " 0;\n      max-height: 90vh;\n    "])), themed({
-        light: "var(--ds-text, ".concat(N900, ")"),
-        dark: "var(--ds-text, ".concat(DN600, ")")
-      })(theme), themed({
-        light: "var(--ds-surface-overlay, ".concat(N0, ")"),
-        dark: "var(--ds-surface-overlay, ".concat(DN50, ")")
-      })(theme), borderRadius(), "var(--ds-shadow-overlay, ".concat("0 4px 8px calc(-1 * 2px) ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"), "var(--ds-space-050, 4px)");
+    _defineProperty(_assertThisInitialized(_this), "menuWrapper", function () {
+      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      color: ", ";\n      background-color: ", ";\n      border-radius: ", ";\n      box-shadow: ", ";\n      box-sizing: border-box;\n      overflow: auto;\n      padding: ", " 0;\n      max-height: 90vh;\n    "])), "var(--ds-text, ".concat(N900, ")"), "var(--ds-surface-overlay, ".concat(N0, ")"), "var(--ds-border-radius, 3px)", "var(--ds-shadow-overlay, ".concat("0 4px 8px calc(-1 * 2px) ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"), "var(--ds-space-050, 4px)");
     });
     /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
     _defineProperty(_assertThisInitialized(_this), "componentDidMount", function () {
@@ -118,7 +110,6 @@ var DropList = /*#__PURE__*/function (_Component) {
   _createClass(DropList, [{
     key: "render",
     value: function render() {
-      var _this2 = this;
       var _this$props = this.props,
         children = _this$props.children,
         isOpen = _this$props.isOpen,
@@ -128,11 +119,7 @@ var DropList = /*#__PURE__*/function (_Component) {
         testId = _this$props.testId,
         id = _this$props.id;
       var layerContent = isOpen ? jsx("div", {
-        css: function css(theme) {
-          return _this2.menuWrapper({
-            theme: theme
-          });
-        },
+        css: this.menuWrapper,
         "data-role": "droplistContent",
         "data-testid": testId && "".concat(testId, "--content"),
         ref: this.handleContentRef,