@atlaskit/renderer 109.0.4 → 109.0.5

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/renderer
 
+## 109.0.5
+
+### Patch Changes
+
+- [#61676](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/61676) [`0d892d819bab`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0d892d819bab) - [ux] Updated tests and mediaInline node to mock inline files correctly
+- [#62545](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/62545) [`85392e5f9be9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/85392e5f9be9) - Remove legacy theming logic from the @atlaskit/editor-common package. Theming is still available via @atlaskit/tokens.
+- Updated dependencies
+
 ## 109.0.4
 
 ### Patch Changes

package/dist/cjs/react/nodes/codeBlock/components/lightWeightCodeBlock.js

@@ -35,7 +35,6 @@ var LightWeightCodeBlock = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, r
     _ref$codeBidiWarningT = _ref.codeBidiWarningTooltipEnabled,
     codeBidiWarningTooltipEnabled = _ref$codeBidiWarningT === void 0 ? true : _ref$codeBidiWarningT,
     className = _ref.className;
-  var theme = (0, _react2.useTheme)();
   var textRows = (0, _react.useMemo)(function () {
     return (text !== null && text !== void 0 ? text : '').split('\n');
   }, [text]);
@@ -47,7 +46,7 @@ var LightWeightCodeBlock = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, r
   return (0, _react2.jsx)("div", {
     className: classNames,
     ref: ref,
-    css: [(0, _styles.codeBlockSharedStyles)(theme), lightWeightCodeBlockStyles]
+    css: [(0, _styles.codeBlockSharedStyles)(), lightWeightCodeBlockStyles]
   }, (0, _react2.jsx)("div", {
     className: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER
   }, (0, _react2.jsx)("div", {

package/dist/cjs/react/nodes/mediaInline.js

@@ -161,7 +161,7 @@ var RenderMediaInline = exports.RenderMediaInline = function RenderMediaInline(_
     fileState: fileState
   }), {
     "data-node-type": "mediaInline"
-  }), mediaProvider ? /*#__PURE__*/_react.default.createElement(_mediaCard.MediaInlineCard, {
+  }), mediaProvider || mediaClient ? /*#__PURE__*/_react.default.createElement(_mediaCard.MediaInlineCard, {
     identifier: identifier,
     onClick: handleMediaInlineClick,
     shouldOpenMediaViewer: shouldOpenMediaViewer,

package/dist/cjs/react/nodes/panel.js

@@ -28,9 +28,7 @@ var PanelStyled = function PanelStyled(_ref) {
     hasIcon = _ref.hasIcon,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var styles = function styles(theme) {
-    return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    &.", " {\n      ", "\n\n      &[data-panel-type=", "] {\n        ", "\n      }\n    }\n  "])), _panel.PanelSharedCssClassName.prefix, (0, _panel.panelSharedStylesWithoutPrefix)({
-      theme: theme
-    }), _adfSchema.PanelType.CUSTOM, hasIcon ? '' : 'padding-left: 12px;');
+    return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    &.", " {\n      ", "\n\n      &[data-panel-type=", "] {\n        ", "\n      }\n    }\n  "])), _panel.PanelSharedCssClassName.prefix, (0, _panel.panelSharedStylesWithoutPrefix)(), _adfSchema.PanelType.CUSTOM, hasIcon ? '' : 'padding-left: 12px;');
   };
   if (props['data-panel-type'] === _adfSchema.PanelType.CUSTOM && backgroundColor) {
     styles = function styles(theme) {
@@ -41,9 +39,7 @@ var PanelStyled = function PanelStyled(_ref) {
       })({
         theme: theme
       });
-      return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        &.", " {\n          ", "\n        }\n\n        &[data-panel-type=", "] {\n          ", ";\n          ", "\n        }\n      "])), _panel.PanelSharedCssClassName.prefix, (0, _panel.panelSharedStylesWithoutPrefix)({
-        theme: theme
-      }), _adfSchema.PanelType.CUSTOM, customStyle, hasIcon ? '' : 'padding-left: 12px;');
+      return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        &.", " {\n          ", "\n        }\n\n        &[data-panel-type=", "] {\n          ", ";\n          ", "\n        }\n      "])), _panel.PanelSharedCssClassName.prefix, (0, _panel.panelSharedStylesWithoutPrefix)(), _adfSchema.PanelType.CUSTOM, customStyle, hasIcon ? '' : 'padding-left: 12px;');
     };
   }
   return (0, _react2.jsx)("div", (0, _extends2.default)({

package/dist/cjs/ui/Expand.js

@@ -31,10 +31,8 @@ var titleStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _ta
 var Container = function Container(props) {
   var paddingBottom = props.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
   var sharedContainerStyles = _ui.sharedExpandStyles.containerStyles(props);
-  var styles = function styles(themeProps) {
-    return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    padding: 0;\n    padding-bottom: ", ";\n  "])), sharedContainerStyles({
-      theme: themeProps
-    }), paddingBottom);
+  var styles = function styles() {
+    return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    padding: 0;\n    padding-bottom: ", ";\n  "])), sharedContainerStyles(), paddingBottom);
   };
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     css: styles
@@ -42,10 +40,8 @@ var Container = function Container(props) {
 };
 var TitleContainer = function TitleContainer(props) {
   var paddingBottom = !props.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
-  var styles = function styles(themeProps) {
-    return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    padding: ", ";\n    padding-bottom: ", ";\n  "])), _ui.sharedExpandStyles.titleContainerStyles({
-      theme: themeProps
-    }), "var(--ds-space-100, 8px)", paddingBottom);
+  var styles = function styles() {
+    return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    padding: ", ";\n    padding-bottom: ", ";\n  "])), _ui.sharedExpandStyles.titleContainerStyles(), "var(--ds-space-100, 8px)", paddingBottom);
   };
   return (0, _react2.jsx)("button", (0, _extends2.default)({
     css: styles
@@ -55,10 +51,8 @@ TitleContainer.displayName = 'TitleContainerButton';
 var ContentContainer = function ContentContainer(props) {
   var sharedContentStyles = _ui.sharedExpandStyles.contentStyles(props);
   var visibility = props.expanded ? 'visible' : 'hidden';
-  var styles = function styles(themeProps) {
-    return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    ", ";\n    padding-right: ", ";\n    // TODO: Migrate away from gridSize\n    // Recommendation: Replace gridSize with 8, or directly replace with 36px\n    padding-left: ", "px;\n    visibility: ", ";\n  "])), sharedContentStyles({
-      theme: themeProps
-    }), "var(--ds-space-200, 16px)", (0, _constants.gridSize)() * 5 - (0, _constants.gridSize)() / 2, visibility);
+  var styles = function styles() {
+    return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    ", ";\n    padding-right: ", ";\n    // TODO: Migrate away from gridSize\n    // Recommendation: Replace gridSize with 8, or directly replace with 36px\n    padding-left: ", "px;\n    visibility: ", ";\n  "])), sharedContentStyles(), "var(--ds-space-200, 16px)", (0, _constants.gridSize)() * 5 - (0, _constants.gridSize)() / 2, visibility);
   };
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     css: styles

package/dist/cjs/ui/Renderer/index.js

@@ -54,7 +54,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.0.4";
+var packageVersion = "109.0.5";
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/cjs/ui/Renderer/style.js

@@ -129,7 +129,7 @@ var rendererStyles = exports.rendererStyles = function rendererStyles(wrapperPro
     })(themeProps), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), _consts.RendererCssClassName.DOCUMENT, _mediaInline.mediaInlineImageStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), (0, _components.themed)({
       light: "var(--ds-text-subtlest, ".concat(colors.N200, ")"),
       dark: "var(--ds-text-subtlest, ".concat(colors.DN200, ")")
-    })(themeProps), telepointerStyles(themeProps), _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(), (0, _styles.ruleSharedStyles)(themeProps), _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(themeProps), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
+    })(themeProps), telepointerStyles(themeProps), _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(), (0, _styles.ruleSharedStyles)(), _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
       light: "var(--ds-background-neutral, ".concat(colors.N30A, ")"),
       dark: "var(--ds-background-neutral, ".concat(colors.DN70, ")")
     })(themeProps), "var(--ds-border-radius-100, 3px)", (0, _components.themed)({

package/dist/cjs/ui/annotations/draft/component.js

@@ -20,8 +20,8 @@ var _templateObject;
 /** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var markStyles = function markStyles(props) {
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: transparent;\n\n  ", ";\n"])), (0, _styles.AnnotationSharedCSSByState)(props).focus);
+var markStyles = function markStyles() {
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: transparent;\n\n  ", ";\n"])), (0, _styles.AnnotationSharedCSSByState)().focus);
 };
 var AnnotationDraft = exports.AnnotationDraft = function AnnotationDraft(_ref) {
   var draftPosition = _ref.draftPosition,

package/dist/cjs/ui/annotations/element/mark.js

@@ -20,12 +20,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 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) { (0, _defineProperty2.default)(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 markStyles = function markStyles(props) {
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: transparent;\n\n  &[data-mark-annotation-state='", "'] {\n    ", ";\n\n    &:focus,\n    &[data-has-focus='true'] {\n      ", ";\n    }\n  }\n"])), _adfSchema.AnnotationMarkStates.ACTIVE, (0, _styles.AnnotationSharedCSSByState)({
-    theme: props
-  }).blur, (0, _styles.AnnotationSharedCSSByState)({
-    theme: props
-  }).focus);
+var markStyles = function markStyles() {
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: transparent;\n\n  &[data-mark-annotation-state='", "'] {\n    ", ";\n\n    &:focus,\n    &[data-has-focus='true'] {\n      ", ";\n    }\n  }\n"])), _adfSchema.AnnotationMarkStates.ACTIVE, (0, _styles.AnnotationSharedCSSByState)().blur, (0, _styles.AnnotationSharedCSSByState)().focus);
 };
 var MarkComponent = exports.MarkComponent = function MarkComponent(_ref) {
   var annotationParentIds = _ref.annotationParentIds,

package/dist/es2019/react/nodes/codeBlock/components/lightWeightCodeBlock.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React, { forwardRef, useMemo } from 'react';
-import { css, jsx, useTheme } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { codeBlockSharedStyles, CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { useBidiWarnings } from '../../../hooks/use-bidi-warnings';
@@ -33,7 +33,6 @@ const LightWeightCodeBlock = /*#__PURE__*/forwardRef(({
   codeBidiWarningTooltipEnabled = true,
   className
 }, ref) => {
-  const theme = useTheme();
   const textRows = useMemo(() => (text !== null && text !== void 0 ? text : '').split('\n'), [text]);
   const {
     renderBidiWarnings
@@ -44,7 +43,7 @@ const LightWeightCodeBlock = /*#__PURE__*/forwardRef(({
   return jsx("div", {
     className: classNames,
     ref: ref,
-    css: [codeBlockSharedStyles(theme), lightWeightCodeBlockStyles]
+    css: [codeBlockSharedStyles(), lightWeightCodeBlockStyles]
   }, jsx("div", {
     className: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER
   }, jsx("div", {

package/dist/es2019/react/nodes/mediaInline.js

@@ -110,7 +110,7 @@ export const RenderMediaInline = ({
     fileState
   }), {
     "data-node-type": "mediaInline"
-  }), mediaProvider ? /*#__PURE__*/React.createElement(MediaInlineCard, {
+  }), mediaProvider || mediaClient ? /*#__PURE__*/React.createElement(MediaInlineCard, {
     identifier: identifier,
     onClick: handleMediaInlineClick,
     shouldOpenMediaViewer: shouldOpenMediaViewer,

package/dist/es2019/react/nodes/panel.js

@@ -19,9 +19,7 @@ const PanelStyled = ({
 }) => {
   let styles = theme => css`
     &.${PanelSharedCssClassName.prefix} {
-      ${panelSharedStylesWithoutPrefix({
-    theme
-  })}
+      ${panelSharedStylesWithoutPrefix()}
 
       &[data-panel-type=${PanelType.CUSTOM}] {
         ${hasIcon ? '' : 'padding-left: 12px;'}
@@ -39,9 +37,7 @@ const PanelStyled = ({
       });
       return css`
         &.${PanelSharedCssClassName.prefix} {
-          ${panelSharedStylesWithoutPrefix({
-        theme
-      })}
+          ${panelSharedStylesWithoutPrefix()}
         }
 
         &[data-panel-type=${PanelType.CUSTOM}] {

package/dist/es2019/ui/Expand.js

@@ -29,10 +29,8 @@ const titleStyles = css`
 const Container = props => {
   const paddingBottom = props.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
   const sharedContainerStyles = sharedExpandStyles.containerStyles(props);
-  const styles = themeProps => css`
-    ${sharedContainerStyles({
-    theme: themeProps
-  })}
+  const styles = () => css`
+    ${sharedContainerStyles()}
     padding: 0;
     padding-bottom: ${paddingBottom};
   `;
@@ -42,10 +40,8 @@ const Container = props => {
 };
 const TitleContainer = props => {
   const paddingBottom = !props.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
-  const styles = themeProps => css`
-    ${sharedExpandStyles.titleContainerStyles({
-    theme: themeProps
-  })}
+  const styles = () => css`
+    ${sharedExpandStyles.titleContainerStyles()}
     padding: ${"var(--ds-space-100, 8px)"};
     padding-bottom: ${paddingBottom};
   `;
@@ -57,10 +53,8 @@ TitleContainer.displayName = 'TitleContainerButton';
 const ContentContainer = props => {
   const sharedContentStyles = sharedExpandStyles.contentStyles(props);
   const visibility = props.expanded ? 'visible' : 'hidden';
-  const styles = themeProps => css`
-    ${sharedContentStyles({
-    theme: themeProps
-  })};
+  const styles = () => css`
+    ${sharedContentStyles()};
     padding-right: ${"var(--ds-space-200, 16px)"};
     // TODO: Migrate away from gridSize
     // Recommendation: Replace gridSize with 8, or directly replace with 36px

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

@@ -35,7 +35,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "109.0.4";
+const packageVersion = "109.0.5";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

package/dist/es2019/ui/Renderer/style.js

@@ -490,12 +490,12 @@ export const rendererStyles = wrapperProps => theme => {
       ${whitespaceSharedStyles};
       ${blockquoteSharedStyles};
       ${headingsSharedStyles()};
-      ${ruleSharedStyles(themeProps)};
+      ${ruleSharedStyles()};
       ${paragraphSharedStyles};
       ${listsSharedStyles};
       ${indentationSharedStyles};
       ${blockMarksSharedStyles};
-      ${codeMarkSharedStyles(themeProps)};
+      ${codeMarkSharedStyles()};
       ${shadowSharedStyle};
       ${dateSharedStyle};
       ${textColorStyles};

package/dist/es2019/ui/annotations/draft/component.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
+
 import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import { InsertDraftPosition } from '../types';
@@ -8,12 +9,12 @@ import { splitText, calcTextSplitOffset, findTextString } from './text';
 import { calcInsertDraftPositionOnText } from './position';
 import { dataAttributes } from './dom';
 import { AnnotationSharedCSSByState } from '@atlaskit/editor-common/styles';
-const markStyles = props => css`
+const markStyles = () => css`
   color: inherit;
   background-color: unset;
   -webkit-tap-highlight-color: transparent;
 
-  ${AnnotationSharedCSSByState(props).focus};
+  ${AnnotationSharedCSSByState().focus};
 `;
 export const AnnotationDraft = ({
   draftPosition,

package/dist/es2019/ui/annotations/element/mark.js

@@ -1,24 +1,21 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
+
 import React, { useMemo, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
 import { AnnotationSharedCSSByState } from '@atlaskit/editor-common/styles';
 import { AnnotationMarkStates } from '@atlaskit/adf-schema';
-const markStyles = props => css`
+const markStyles = () => css`
   color: inherit;
   background-color: unset;
   -webkit-tap-highlight-color: transparent;
 
   &[data-mark-annotation-state='${AnnotationMarkStates.ACTIVE}'] {
-    ${AnnotationSharedCSSByState({
-  theme: props
-}).blur};
+    ${AnnotationSharedCSSByState().blur};
 
     &:focus,
     &[data-has-focus='true'] {
-      ${AnnotationSharedCSSByState({
-  theme: props
-}).focus};
+      ${AnnotationSharedCSSByState().focus};
     }
   }
 `;

package/dist/esm/react/nodes/codeBlock/components/lightWeightCodeBlock.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2;
 /** @jsx jsx */
 import React, { forwardRef, useMemo } from 'react';
-import { css, jsx, useTheme } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { codeBlockSharedStyles, CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { useBidiWarnings } from '../../../hooks/use-bidi-warnings';
@@ -25,7 +25,6 @@ var LightWeightCodeBlock = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$codeBidiWarningT = _ref.codeBidiWarningTooltipEnabled,
     codeBidiWarningTooltipEnabled = _ref$codeBidiWarningT === void 0 ? true : _ref$codeBidiWarningT,
     className = _ref.className;
-  var theme = useTheme();
   var textRows = useMemo(function () {
     return (text !== null && text !== void 0 ? text : '').split('\n');
   }, [text]);
@@ -37,7 +36,7 @@ var LightWeightCodeBlock = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return jsx("div", {
     className: classNames,
     ref: ref,
-    css: [codeBlockSharedStyles(theme), lightWeightCodeBlockStyles]
+    css: [codeBlockSharedStyles(), lightWeightCodeBlockStyles]
   }, jsx("div", {
     className: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER
   }, jsx("div", {

package/dist/esm/react/nodes/mediaInline.js

@@ -151,7 +151,7 @@ export var RenderMediaInline = function RenderMediaInline(_ref) {
     fileState: fileState
   }), {
     "data-node-type": "mediaInline"
-  }), mediaProvider ? /*#__PURE__*/React.createElement(MediaInlineCard, {
+  }), mediaProvider || mediaClient ? /*#__PURE__*/React.createElement(MediaInlineCard, {
     identifier: identifier,
     onClick: handleMediaInlineClick,
     shouldOpenMediaViewer: shouldOpenMediaViewer,

package/dist/esm/react/nodes/panel.js

@@ -21,9 +21,7 @@ var PanelStyled = function PanelStyled(_ref) {
     hasIcon = _ref.hasIcon,
     props = _objectWithoutProperties(_ref, _excluded);
   var styles = function styles(theme) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &.", " {\n      ", "\n\n      &[data-panel-type=", "] {\n        ", "\n      }\n    }\n  "])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix({
-      theme: theme
-    }), PanelType.CUSTOM, hasIcon ? '' : 'padding-left: 12px;');
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &.", " {\n      ", "\n\n      &[data-panel-type=", "] {\n        ", "\n      }\n    }\n  "])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix(), PanelType.CUSTOM, hasIcon ? '' : 'padding-left: 12px;');
   };
   if (props['data-panel-type'] === PanelType.CUSTOM && backgroundColor) {
     styles = function styles(theme) {
@@ -34,9 +32,7 @@ var PanelStyled = function PanelStyled(_ref) {
       })({
         theme: theme
       });
-      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        &.", " {\n          ", "\n        }\n\n        &[data-panel-type=", "] {\n          ", ";\n          ", "\n        }\n      "])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix({
-        theme: theme
-      }), PanelType.CUSTOM, customStyle, hasIcon ? '' : 'padding-left: 12px;');
+      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        &.", " {\n          ", "\n        }\n\n        &[data-panel-type=", "] {\n          ", ";\n          ", "\n        }\n      "])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix(), PanelType.CUSTOM, customStyle, hasIcon ? '' : 'padding-left: 12px;');
     };
   }
   return jsx("div", _extends({

package/dist/esm/ui/Expand.js

@@ -21,10 +21,8 @@ var titleStyles = css(_templateObject || (_templateObject = _taggedTemplateLiter
 var Container = function Container(props) {
   var paddingBottom = props.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
   var sharedContainerStyles = sharedExpandStyles.containerStyles(props);
-  var styles = function styles(themeProps) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    ", "\n    padding: 0;\n    padding-bottom: ", ";\n  "])), sharedContainerStyles({
-      theme: themeProps
-    }), paddingBottom);
+  var styles = function styles() {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    ", "\n    padding: 0;\n    padding-bottom: ", ";\n  "])), sharedContainerStyles(), paddingBottom);
   };
   return jsx("div", _extends({
     css: styles
@@ -32,10 +30,8 @@ var Container = function Container(props) {
 };
 var TitleContainer = function TitleContainer(props) {
   var paddingBottom = !props.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
-  var styles = function styles(themeProps) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    ", "\n    padding: ", ";\n    padding-bottom: ", ";\n  "])), sharedExpandStyles.titleContainerStyles({
-      theme: themeProps
-    }), "var(--ds-space-100, 8px)", paddingBottom);
+  var styles = function styles() {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    ", "\n    padding: ", ";\n    padding-bottom: ", ";\n  "])), sharedExpandStyles.titleContainerStyles(), "var(--ds-space-100, 8px)", paddingBottom);
   };
   return jsx("button", _extends({
     css: styles
@@ -45,10 +41,8 @@ TitleContainer.displayName = 'TitleContainerButton';
 var ContentContainer = function ContentContainer(props) {
   var sharedContentStyles = sharedExpandStyles.contentStyles(props);
   var visibility = props.expanded ? 'visible' : 'hidden';
-  var styles = function styles(themeProps) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    ", ";\n    padding-right: ", ";\n    // TODO: Migrate away from gridSize\n    // Recommendation: Replace gridSize with 8, or directly replace with 36px\n    padding-left: ", "px;\n    visibility: ", ";\n  "])), sharedContentStyles({
-      theme: themeProps
-    }), "var(--ds-space-200, 16px)", gridSize() * 5 - gridSize() / 2, visibility);
+  var styles = function styles() {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    ", ";\n    padding-right: ", ";\n    // TODO: Migrate away from gridSize\n    // Recommendation: Replace gridSize with 8, or directly replace with 36px\n    padding-left: ", "px;\n    visibility: ", ";\n  "])), sharedContentStyles(), "var(--ds-space-200, 16px)", gridSize() * 5 - gridSize() / 2, visibility);
   };
   return jsx("div", _extends({
     css: styles

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

@@ -45,7 +45,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.0.4";
+var packageVersion = "109.0.5";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/esm/ui/Renderer/style.js

@@ -120,7 +120,7 @@ export var rendererStyles = function rendererStyles(wrapperProps) {
     })(themeProps), RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), RendererCssClassName.DOCUMENT, mediaInlineImageStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), themed({
       light: "var(--ds-text-subtlest, ".concat(colors.N200, ")"),
       dark: "var(--ds-text-subtlest, ".concat(colors.DN200, ")")
-    })(themeProps), telepointerStyles(themeProps), whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles(), ruleSharedStyles(themeProps), paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles(themeProps), shadowSharedStyle, dateSharedStyle, textColorStyles, tasksAndDecisionsStyles, smartCardSharedStyles, fontFamily(), relativeFontSizeToBase16(fontSize()), themed({
+    })(themeProps), telepointerStyles(themeProps), whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles(), ruleSharedStyles(), paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles(), shadowSharedStyle, dateSharedStyle, textColorStyles, tasksAndDecisionsStyles, smartCardSharedStyles, fontFamily(), relativeFontSizeToBase16(fontSize()), themed({
       light: "var(--ds-background-neutral, ".concat(colors.N30A, ")"),
       dark: "var(--ds-background-neutral, ".concat(colors.DN70, ")")
     })(themeProps), "var(--ds-border-radius-100, 3px)", themed({

package/dist/esm/ui/annotations/draft/component.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
 /** @jsx jsx */
+
 import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import { InsertDraftPosition } from '../types';
@@ -10,8 +11,8 @@ import { splitText, calcTextSplitOffset, findTextString } from './text';
 import { calcInsertDraftPositionOnText } from './position';
 import { dataAttributes } from './dom';
 import { AnnotationSharedCSSByState } from '@atlaskit/editor-common/styles';
-var markStyles = function markStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: transparent;\n\n  ", ";\n"])), AnnotationSharedCSSByState(props).focus);
+var markStyles = function markStyles() {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: transparent;\n\n  ", ";\n"])), AnnotationSharedCSSByState().focus);
 };
 export var AnnotationDraft = function AnnotationDraft(_ref) {
   var draftPosition = _ref.draftPosition,

package/dist/esm/ui/annotations/element/mark.js

@@ -6,16 +6,13 @@ var _templateObject;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 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; }
 /** @jsx jsx */
+
 import React, { useMemo, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
 import { AnnotationSharedCSSByState } from '@atlaskit/editor-common/styles';
 import { AnnotationMarkStates } from '@atlaskit/adf-schema';
-var markStyles = function markStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: transparent;\n\n  &[data-mark-annotation-state='", "'] {\n    ", ";\n\n    &:focus,\n    &[data-has-focus='true'] {\n      ", ";\n    }\n  }\n"])), AnnotationMarkStates.ACTIVE, AnnotationSharedCSSByState({
-    theme: props
-  }).blur, AnnotationSharedCSSByState({
-    theme: props
-  }).focus);
+var markStyles = function markStyles() {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: transparent;\n\n  &[data-mark-annotation-state='", "'] {\n    ", ";\n\n    &:focus,\n    &[data-has-focus='true'] {\n      ", ";\n    }\n  }\n"])), AnnotationMarkStates.ACTIVE, AnnotationSharedCSSByState().blur, AnnotationSharedCSSByState().focus);
 };
 export var MarkComponent = function MarkComponent(_ref) {
   var annotationParentIds = _ref.annotationParentIds,

package/dist/types/react/nodes/panel.d.ts

@@ -2,7 +2,7 @@
 import React from 'react';
 import { jsx } from '@emotion/react';
 import { PanelType } from '@atlaskit/adf-schema';
-import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 export interface Props {
     children?: React.ReactNode;
     providers?: ProviderFactory;

package/dist/types/ui/Expand.d.ts

@@ -1,8 +1,8 @@
 /** @jsx jsx */
 import React from 'react';
-import { AnalyticsEventPayload } from '../analytics/events';
-import { WrappedComponentProps } from 'react-intl-next';
-import { RendererAppearance } from './Renderer/types';
+import type { AnalyticsEventPayload } from '../analytics/events';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { RendererAppearance } from './Renderer/types';
 export type StyleProps = {
     expanded?: boolean;
     focused?: boolean;

package/dist/types/ui/annotations/draft/component.d.ts

@@ -1,6 +1,8 @@
 /** @jsx jsx */
-import React, { ReactNode } from 'react';
-import { InsertDraftPosition, Position } from '../types';
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { Position } from '../types';
+import { InsertDraftPosition } from '../types';
 export declare const AnnotationDraft: React.FC<{
     draftPosition: Position;
 }>;

package/dist/types/ui/annotations/element/mark.d.ts

@@ -1,7 +1,7 @@
-/** @jsx jsx */
 import React from 'react';
 import type { OnAnnotationClickPayload } from '@atlaskit/editor-common/types';
-import { AnnotationMarkStates, AnnotationId, AnnotationDataAttributes } from '@atlaskit/adf-schema';
+import type { AnnotationId, AnnotationDataAttributes } from '@atlaskit/adf-schema';
+import { AnnotationMarkStates } from '@atlaskit/adf-schema';
 type MarkComponentProps = {
     id: AnnotationId;
     annotationParentIds: AnnotationId[];

package/dist/types-ts4.5/react/nodes/panel.d.ts

@@ -2,7 +2,7 @@
 import React from 'react';
 import { jsx } from '@emotion/react';
 import { PanelType } from '@atlaskit/adf-schema';
-import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 export interface Props {
     children?: React.ReactNode;
     providers?: ProviderFactory;

package/dist/types-ts4.5/ui/Expand.d.ts

@@ -1,8 +1,8 @@
 /** @jsx jsx */
 import React from 'react';
-import { AnalyticsEventPayload } from '../analytics/events';
-import { WrappedComponentProps } from 'react-intl-next';
-import { RendererAppearance } from './Renderer/types';
+import type { AnalyticsEventPayload } from '../analytics/events';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { RendererAppearance } from './Renderer/types';
 export type StyleProps = {
     expanded?: boolean;
     focused?: boolean;

package/dist/types-ts4.5/ui/annotations/draft/component.d.ts

@@ -1,6 +1,8 @@
 /** @jsx jsx */
-import React, { ReactNode } from 'react';
-import { InsertDraftPosition, Position } from '../types';
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { Position } from '../types';
+import { InsertDraftPosition } from '../types';
 export declare const AnnotationDraft: React.FC<{
     draftPosition: Position;
 }>;

package/dist/types-ts4.5/ui/annotations/element/mark.d.ts

@@ -1,7 +1,7 @@
-/** @jsx jsx */
 import React from 'react';
 import type { OnAnnotationClickPayload } from '@atlaskit/editor-common/types';
-import { AnnotationMarkStates, AnnotationId, AnnotationDataAttributes } from '@atlaskit/adf-schema';
+import type { AnnotationId, AnnotationDataAttributes } from '@atlaskit/adf-schema';
+import { AnnotationMarkStates } from '@atlaskit/adf-schema';
 type MarkComponentProps = {
     id: AnnotationId;
     annotationParentIds: AnnotationId[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "109.0.4",
+  "version": "109.0.5",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -52,7 +52,7 @@
     "@atlaskit/status": "^1.4.0",
     "@atlaskit/task-decision": "^17.9.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.30.0",
+    "@atlaskit/tokens": "^1.31.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",