@atlaskit/editor-common 72.7.3 → 72.9.0

package/dist/es2019/keymaps/index.js

@@ -4,6 +4,8 @@ import { css, jsx } from '@emotion/react';
 import { N400 } from '@atlaskit/theme/colors';
 import { browser } from '../utils';
 export const addAltText = makeKeyMapWithCommon('Add Alt Text', 'Mod-Alt-y');
+export const navToEditorToolbar = makeKeyMapWithCommon('Navigate to editor toolbar', 'Alt-F9');
+export const navToFloatingToolbar = makeKeyMapWithCommon('Navigate to floating toolbar', 'Alt-F10');
 export const toggleBold = makeKeyMapWithCommon('Bold', 'Mod-b');
 export const toggleItalic = makeKeyMapWithCommon('Italic', 'Mod-i');
 export const toggleUnderline = makeKeyMapWithCommon('Underline', 'Mod-u');

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

@@ -8,7 +8,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "72.7.3";
+const packageVersion = "72.9.0";
 const halfFocusRing = 1;
 const dropOffset = `0, ${gridSize()}px`;
 class DropList extends Component {

package/dist/es2019/ui/MediaSingle/styled.js

@@ -109,6 +109,9 @@ export const MediaSingleDimensionHelper = ({
   }
 
   width: ${pctWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized)};
+  ${layout === 'full-width' && css`
+    min-width: 100%;
+  `}
   max-width: ${calcMaxWidth(layout, containerWidth)};
   float: ${float(layout)};
   margin: ${calcMargin(layout)};

package/dist/es2019/ui-color/ColorPalette/Palettes/index.js

@@ -1,2 +1,2 @@
 export { DEFAULT_BORDER_COLOR } from './common';
-export { textPaletteTooltipMessages, backgroundPaletteTooltipMessages, borderPaletteTooltipMessages } from './paletteMessagesTokenModeNames';
+export { backgroundPaletteTooltipMessages, borderPaletteTooltipMessages, chartsColorPaletteTooltipMessages, textPaletteTooltipMessages } from './paletteMessagesTokenModeNames';

package/dist/es2019/ui-color/ColorPalette/Palettes/paletteMessagesTokenModeNames.js

@@ -250,6 +250,204 @@ export const backgroundPaletteTooltipMessages = {
   light: lightBackgroundPaletteTooltipMessages,
   dark: darkBackgroundPaletteTooltipMessages
 };
+export const lightChartsColorPaletteTooltipMessages = defineMessages({
+  // Blue color
+  '#7AB2FF': {
+    id: 'fabric.theme.subtle-blue',
+    defaultMessage: 'Subtle blue',
+    description: 'Name of a color'
+  },
+  '#247FFF': {
+    id: 'fabric.theme.blue',
+    defaultMessage: 'Blue',
+    description: 'Name of a color'
+  },
+  '#0055CC': {
+    id: 'fabric.theme.bold-blue',
+    defaultMessage: 'Bold blue',
+    description: 'Name of a color'
+  },
+  '#003884': {
+    id: 'fabric.theme.bolder-blue',
+    defaultMessage: 'Bolder blue',
+    description: 'Name of a color'
+  },
+  // Teal color
+  '#60C6D2': {
+    id: 'fabric.theme.subtle-teal',
+    defaultMessage: 'Subtle teal',
+    description: 'Name of a color'
+  },
+  '#1D9AAA': {
+    id: 'fabric.theme.teal',
+    defaultMessage: 'Teal',
+    description: 'Name of a color'
+  },
+  '#1D7F8C': {
+    id: 'fabric.theme.bold-teal',
+    defaultMessage: 'Bold teal',
+    description: 'Name of a color'
+  },
+  '#206B74': {
+    id: 'fabric.theme.bolder-teal',
+    defaultMessage: 'Bolder teal',
+    description: 'Name of a color'
+  },
+  // Green color
+  '#6BE1B0': {
+    id: 'fabric.theme.subtle-green',
+    defaultMessage: 'Subtle green',
+    description: 'Name of a color'
+  },
+  '#23A971': {
+    id: 'fabric.theme.green',
+    defaultMessage: 'Green',
+    description: 'Name of a color'
+  },
+  '#177D52': {
+    id: 'fabric.theme.bold-green',
+    defaultMessage: 'Bold green',
+    description: 'Name of a color'
+  },
+  '#055C3F': {
+    id: 'fabric.theme.bolder-green',
+    defaultMessage: 'Bolder green',
+    description: 'Name of a color'
+  },
+  // Yellow color
+  '#FFDB57': {
+    id: 'fabric.theme.subtle-yellow',
+    defaultMessage: 'Subtle yellow',
+    description: 'Name of a color'
+  },
+  '#FFBE33': {
+    id: 'fabric.theme.yellow',
+    defaultMessage: 'Yellow',
+    description: 'Name of a color'
+  },
+  '#FF9D00': {
+    id: 'fabric.theme.bold-yellow',
+    defaultMessage: 'Bold yellow',
+    description: 'Name of a color'
+  },
+  '#946104': {
+    id: 'fabric.theme.bolder-yellow',
+    defaultMessage: 'Bolder yellow',
+    description: 'Name of a color'
+  },
+  // Red color
+  '#FF8F73': {
+    id: 'fabric.theme.subtle-red',
+    defaultMessage: 'Subtle red',
+    description: 'Name of a color'
+  },
+  '#FC552C': {
+    id: 'fabric.theme.red',
+    defaultMessage: 'Red',
+    description: 'Name of a color.'
+  },
+  '#D32D03': {
+    id: 'fabric.theme.bold-red',
+    defaultMessage: 'Bold red',
+    description: 'Name of a color'
+  },
+  '#A32000': {
+    id: 'fabric.theme.bolder-red',
+    defaultMessage: 'Bolder red',
+    description: 'Name of a color'
+  },
+  // Orange color
+  '#FAA53D': {
+    id: 'fabric.theme.subtle-orange',
+    defaultMessage: 'Subtle orange',
+    description: 'Name of a color'
+  },
+  '#D97008': {
+    id: 'fabric.theme.orange',
+    defaultMessage: 'Orange',
+    description: 'Name of a color.'
+  },
+  '#B65C02': {
+    id: 'fabric.theme.bold-orange',
+    defaultMessage: 'Bold orange',
+    description: 'Name of a color'
+  },
+  '#974F0C': {
+    id: 'fabric.theme.bolder-orange',
+    defaultMessage: 'Bolder orange',
+    description: 'Name of a color'
+  },
+  // Magenta color
+  '#E774BB': {
+    id: 'fabric.theme.subtle-magenta',
+    defaultMessage: 'Subtle magenta',
+    description: 'Name of a color'
+  },
+  '#DA62AC': {
+    id: 'fabric.theme.magenta',
+    defaultMessage: 'Magenta',
+    description: 'Name of a color'
+  },
+  '#CD519D': {
+    id: 'fabric.theme.bold-magenta',
+    defaultMessage: 'Bold magenta',
+    description: 'Name of a color'
+  },
+  '#943D73': {
+    id: 'fabric.theme.bolder-magenta',
+    defaultMessage: 'Bolder magenta',
+    description: 'Name of a color'
+  },
+  // Purple color
+  '#B5A7FB': {
+    id: 'fabric.theme.subtle-purple',
+    defaultMessage: 'Subtle purple',
+    description: 'Name of a color'
+  },
+  '#8B77EE': {
+    id: 'fabric.theme.purple',
+    defaultMessage: 'Purple',
+    description: 'Name of a color'
+  },
+  '#5A43D0': {
+    id: 'fabric.theme.bold-purple',
+    defaultMessage: 'Bold purple',
+    description: 'Name of a color'
+  },
+  '#44368B': {
+    id: 'fabric.theme.bolder-purple',
+    defaultMessage: 'Bolder purple',
+    description: 'Name of a color'
+  },
+  // Gray color
+  '#8993A5': {
+    id: 'fabric.theme.subtle-gray',
+    defaultMessage: 'Subtle gray',
+    description: 'Name of a color'
+  },
+  '#8590A2': {
+    id: 'fabric.theme.gray',
+    defaultMessage: 'Gray',
+    description: 'Name of a color'
+  },
+  '#758195': {
+    id: 'fabric.theme.bold-gray',
+    defaultMessage: 'Bold gray',
+    description: 'Name of a color'
+  },
+  '#44546F': {
+    id: 'fabric.theme.bolder-gray',
+    defaultMessage: 'Bolder gray',
+    description: 'Name of a color'
+  }
+});
+const darkChartsColorPaletteTooltipMessages = {
+  ...lightChartsColorPaletteTooltipMessages
+};
+export const chartsColorPaletteTooltipMessages = {
+  light: lightChartsColorPaletteTooltipMessages,
+  dark: darkChartsColorPaletteTooltipMessages
+};
 const lightBorderPaletteTooltipMessages = defineMessages({
   '#091E4224': {
     id: 'fabric.theme.subtle-gray',

package/dist/es2019/ui-color/index.js

@@ -6,6 +6,6 @@ export { default as colorPaletteMessages } from './ColorPalette/Palettes/palette
 export { panelBackgroundPalette, panelDarkModeBackgroundPalette } from './ColorPalette/Palettes/panelBackgroundPalette';
 export { lightModeStatusColorPalette, darkModeStatusColorPalette } from './ColorPalette/Palettes/statusColorPalette';
 export { textColorPalette } from './ColorPalette/Palettes/textColorPalette';
-export { backgroundPaletteTooltipMessages, borderPaletteTooltipMessages, textPaletteTooltipMessages } from './ColorPalette/Palettes';
+export { backgroundPaletteTooltipMessages, borderPaletteTooltipMessages, chartsColorPaletteTooltipMessages, textPaletteTooltipMessages } from './ColorPalette/Palettes';
 export { DEFAULT_BORDER_COLOR } from './ColorPalette/Palettes/common';
 export { default as borderColorPalette } from './ColorPalette/Palettes/borderColorPalette';

package/dist/es2019/ui-menu/ArrowKeyNavigationProvider/ColorPaletteArrowKeyNavigationProvider/index.js

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useRef } from 'react';
+import React, { useLayoutEffect, useRef, useState } from 'react';
 /**
  * This component is a wrapper for color picker which listens to keydown events of children
  * and handles arrow key navigation
@@ -10,11 +10,13 @@ export const ColorPaletteArrowKeyNavigationProvider = ({
   isOpenedByKeyboard,
   isPopupPositioned,
   handleClose,
-  closeOnTab
+  closeOnTab,
+  editorRef
 }) => {
   const wrapperRef = useRef(null);
   const currentSelectedColumnIndex = useRef(selectedColumnIndex === -1 ? 0 : selectedColumnIndex);
   const currentSelectedRowIndex = useRef(selectedRowIndex === -1 ? 0 : selectedRowIndex);
+  const [listenerTargetElement] = useState(editorRef.current);
   const incrementRowIndex = (rowElements, columnElements) => {
     if (currentSelectedRowIndex.current === rowElements.length - 1) {
       currentSelectedRowIndex.current = 0;
@@ -97,7 +99,7 @@ export const ColorPaletteArrowKeyNavigationProvider = ({
           return;
       }
     };
-    document.addEventListener('keydown', handleKeyDown);
+    listenerTargetElement && listenerTargetElement.addEventListener('keydown', handleKeyDown);
     // set focus to current selected color swatch if only opened by keyboard
     if (isOpenedByKeyboard && isPopupPositioned) {
       // Using timeout because, we need to wait till color palette is rendered
@@ -108,9 +110,9 @@ export const ColorPaletteArrowKeyNavigationProvider = ({
       });
     }
     return () => {
-      document.removeEventListener('keydown', handleKeyDown);
+      listenerTargetElement && listenerTargetElement.removeEventListener('keydown', handleKeyDown);
     };
-  }, [currentSelectedColumnIndex, isOpenedByKeyboard, isPopupPositioned, wrapperRef, handleClose, closeOnTab]);
+  }, [currentSelectedColumnIndex, isOpenedByKeyboard, isPopupPositioned, wrapperRef, handleClose, closeOnTab, listenerTargetElement]);
   return /*#__PURE__*/React.createElement("div", {
     className: "custom-key-handler-wrapper",
     ref: wrapperRef

package/dist/es2019/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.js

@@ -9,10 +9,12 @@ export const MenuArrowKeyNavigationProvider = ({
   disableArrowKeyNavigation,
   keyDownHandlerContext,
   closeOnTab,
-  onSelection
+  onSelection,
+  editorRef
 }) => {
   const wrapperRef = useRef(null);
   const [currentSelectedItemIndex, setCurrentSelectedItemIndex] = useState(-1);
+  const [listenerTargetElement] = useState(editorRef.current);
   const incrementIndex = useCallback(list => {
     const currentIndex = currentSelectedItemIndex;
     let nextIndex = (currentIndex + 1) % list.length;
@@ -128,11 +130,11 @@ export const MenuArrowKeyNavigationProvider = ({
           return;
       }
     };
-    document.addEventListener('keydown', handleKeyDown);
+    listenerTargetElement && listenerTargetElement.addEventListener('keydown', handleKeyDown);
     return () => {
-      document.removeEventListener('keydown', handleKeyDown);
+      listenerTargetElement && listenerTargetElement.removeEventListener('keydown', handleKeyDown);
     };
-  }, [currentSelectedItemIndex, wrapperRef, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeOnTab, onSelection, incrementIndex, decrementIndex]);
+  }, [currentSelectedItemIndex, wrapperRef, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeOnTab, onSelection, incrementIndex, decrementIndex, listenerTargetElement]);
   return /*#__PURE__*/React.createElement("div", {
     className: "menu-key-handler-wrapper custom-key-handler-wrapper",
     ref: wrapperRef

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import { ReactEditorViewContext } from '../../ui-react';
 import { ColorPaletteArrowKeyNavigationProvider } from './ColorPaletteArrowKeyNavigationProvider';
 import { MenuArrowKeyNavigationProvider } from './MenuArrowKeyNavigationProvider';
 import { ArrowKeyNavigationType } from './types';
@@ -10,12 +11,21 @@ export const ArrowKeyNavigationProvider = props => {
     ...restProps
   } = props;
   if (type === ArrowKeyNavigationType.COLOR) {
-    return /*#__PURE__*/React.createElement(ColorPaletteArrowKeyNavigationProvider, _extends({
+    return /*#__PURE__*/React.createElement(ReactEditorViewContext.Consumer, null, ({
+      editorView,
+      editorRef
+    }) => editorRef && /*#__PURE__*/React.createElement(ColorPaletteArrowKeyNavigationProvider, _extends({
       selectedRowIndex: props.selectedRowIndex,
       selectedColumnIndex: props.selectedColumnIndex,
       isOpenedByKeyboard: props.isOpenedByKeyboard,
-      isPopupPositioned: props.isPopupPositioned
-    }, restProps), children);
+      isPopupPositioned: props.isPopupPositioned,
+      editorRef: editorRef
+    }, restProps), children));
   }
-  return /*#__PURE__*/React.createElement(MenuArrowKeyNavigationProvider, restProps, children);
+  return /*#__PURE__*/React.createElement(ReactEditorViewContext.Consumer, null, ({
+    editorView,
+    editorRef
+  }) => editorRef && /*#__PURE__*/React.createElement(MenuArrowKeyNavigationProvider, _extends({
+    editorRef: editorRef
+  }, restProps), children));
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "72.7.3",
+	"version": "72.9.0",
 	"sideEffects": false
 }

package/dist/esm/card/index.js

@@ -1 +1 @@
-export {};
+export { addLinkMetadata, getLinkMetadataFromTransaction, commandWithMetadata } from './utils';

package/dist/esm/card/utils.js

@@ -0,0 +1,45 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { LinkMetaStep } from '@atlaskit/adf-schema/steps';
+
+/**
+ * Records metadata about the user action and input method relating to a transaction
+ * as a custom LinkStepMetadata prosemirror step so that it is preserved in
+ * the history for undo/redo
+ */
+export function addLinkMetadata(initialSelection, tr, metadata) {
+  var storedMarks = tr.storedMarks;
+  var pos = tr.mapping.map(initialSelection.$from.pos);
+  tr.step(new LinkMetaStep(pos, metadata));
+
+  // When you add a new step all the storedMarks are removed it
+  if (storedMarks) {
+    tr.setStoredMarks(storedMarks);
+  }
+  return tr;
+}
+export function getLinkMetadataFromTransaction(tr) {
+  return tr.steps.reduce(function (metadata, step) {
+    if (!(step instanceof LinkMetaStep)) {
+      return metadata;
+    }
+    return _objectSpread(_objectSpread({}, metadata), step.getMetadata());
+  }, {});
+}
+/**
+ * Adds metadata to the transaction created from a command
+ * The metadata describes the user intent and input method
+ * for executing the command
+ */
+export var commandWithMetadata = function commandWithMetadata(command, metadata) {
+  return function (state, dispatch, view) {
+    if (!dispatch) {
+      return command(state, dispatch, view);
+    }
+    return command(state, function (tr) {
+      addLinkMetadata(state.selection, tr, metadata);
+      dispatch(tr);
+    }, view);
+  };
+};

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-// DO NOT EMPORT ANYTHING FROM THIS FILE. USE CHILD ENTRY POINTS
+// DO NOT EMPORT ANYTHING FROM THIS FILE. USE CHILD ENTRY POINTS.
 export {};

package/dist/esm/keymaps/index.js

@@ -7,6 +7,8 @@ import { css, jsx } from '@emotion/react';
 import { N400 } from '@atlaskit/theme/colors';
 import { browser } from '../utils';
 export var addAltText = makeKeyMapWithCommon('Add Alt Text', 'Mod-Alt-y');
+export var navToEditorToolbar = makeKeyMapWithCommon('Navigate to editor toolbar', 'Alt-F9');
+export var navToFloatingToolbar = makeKeyMapWithCommon('Navigate to floating toolbar', 'Alt-F10');
 export var toggleBold = makeKeyMapWithCommon('Bold', 'Mod-b');
 export var toggleItalic = makeKeyMapWithCommon('Italic', 'Mod-i');
 export var toggleUnderline = makeKeyMapWithCommon('Underline', 'Mod-u');

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

@@ -18,7 +18,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "72.7.3";
+var packageVersion = "72.9.0";
 var halfFocusRing = 1;
 var dropOffset = "0, ".concat(gridSize(), "px");
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/esm/ui/MediaSingle/styled.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["children"];
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
@@ -109,16 +109,16 @@ export var MediaSingleDimensionHelper = function MediaSingleDimensionHelper(_ref
     layout = _ref.layout,
     pctWidth = _ref.pctWidth,
     width = _ref.width;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* For nested rich media items, set max-width to 100% */\n  tr &,\n  [data-layout-column] &,\n  [data-node-type='expand'] & {\n    max-width: 100%;\n  }\n\n  width: ", ";\n  max-width: ", ";\n  float: ", ";\n  margin: ", ";\n  ", ";\n\n  &:not(.is-resizing) {\n    transition: width 100ms ease-in;\n  }\n"])), pctWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized), calcMaxWidth(layout, containerWidth), float(layout), calcMargin(layout), isImageAligned(layout));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* For nested rich media items, set max-width to 100% */\n  tr &,\n  [data-layout-column] &,\n  [data-node-type='expand'] & {\n    max-width: 100%;\n  }\n\n  width: ", ";\n  ", "\n  max-width: ", ";\n  float: ", ";\n  margin: ", ";\n  ", ";\n\n  &:not(.is-resizing) {\n    transition: width 100ms ease-in;\n  }\n"])), pctWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized), layout === 'full-width' && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    min-width: 100%;\n  "]))), calcMaxWidth(layout, containerWidth), float(layout), calcMargin(layout), isImageAligned(layout));
 };
 var RenderFallbackContainer = function RenderFallbackContainer(_ref2) {
   var hasFallbackContainer = _ref2.hasFallbackContainer,
     paddingBottom = _ref2.paddingBottom,
     height = _ref2.height;
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n"])), hasFallbackContainer ? "\n  &::after {\n    content: '';\n    display: block;\n    ".concat(height ? "height: ".concat(height, "px;") : paddingBottom ? "padding-bottom: ".concat(paddingBottom, ";") : '', "\n\n    /* Fixes extra padding problem in Firefox */\n    font-size: 0;\n    line-height: 0;\n  }\n  ") : '');
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n"])), hasFallbackContainer ? "\n  &::after {\n    content: '';\n    display: block;\n    ".concat(height ? "height: ".concat(height, "px;") : paddingBottom ? "padding-bottom: ".concat(paddingBottom, ";") : '', "\n\n    /* Fixes extra padding problem in Firefox */\n    font-size: 0;\n    line-height: 0;\n  }\n  ") : '');
 };
 export var mediaWrapperStyle = function mediaWrapperStyle(props) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n\n  ", "\n\n  /* Editor */\n  & > figure {\n    position: ", ";\n    height: 100%;\n    width: 100%;\n  }\n\n  & > div {\n    position: ", ";\n    height: 100%;\n    width: 100%;\n  }\n\n  &[data-node-type='embedCard'] > div {\n    width: 100%;\n  }\n\n  /* Renderer */\n  [data-node-type='media'] {\n    position: static !important;\n\n    > div {\n      position: absolute;\n      height: 100%;\n    }\n  }\n"])), RenderFallbackContainer(props), props.hasFallbackContainer ? 'absolute' : 'relative', props.hasFallbackContainer ? 'absolute' : 'relative');
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n\n  ", "\n\n  /* Editor */\n  & > figure {\n    position: ", ";\n    height: 100%;\n    width: 100%;\n  }\n\n  & > div {\n    position: ", ";\n    height: 100%;\n    width: 100%;\n  }\n\n  &[data-node-type='embedCard'] > div {\n    width: 100%;\n  }\n\n  /* Renderer */\n  [data-node-type='media'] {\n    position: static !important;\n\n    > div {\n      position: absolute;\n      height: 100%;\n    }\n  }\n"])), RenderFallbackContainer(props), props.hasFallbackContainer ? 'absolute' : 'relative', props.hasFallbackContainer ? 'absolute' : 'relative');
 };
 export var MediaWrapper = function MediaWrapper(_ref3) {
   var children = _ref3.children,

package/dist/esm/ui-color/ColorPalette/Palettes/index.js

@@ -1,2 +1,2 @@
 export { DEFAULT_BORDER_COLOR } from './common';
-export { textPaletteTooltipMessages, backgroundPaletteTooltipMessages, borderPaletteTooltipMessages } from './paletteMessagesTokenModeNames';
+export { backgroundPaletteTooltipMessages, borderPaletteTooltipMessages, chartsColorPaletteTooltipMessages, textPaletteTooltipMessages } from './paletteMessagesTokenModeNames';