@atlaskit/editor-core 187.41.3 → 187.41.5

package/dist/es2019/plugins/media/toolbar/index.js

@@ -20,7 +20,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { FilePreviewItem } from './filePreviewItem';
 import { downloadMedia, getSelectedMediaSingle, removeMediaGroupNode, getPixelWidthOfElement, calcNewLayout, getMaxToolbarWidth } from './utils';
 import { isVideo } from '../utils/media-single';
-import { changeInlineToMediaCard, changeMediaCardToInline, removeInlineCard, setBorderMark, toggleBorderMark } from './commands';
+import { changeInlineToMediaCard, changeMediaCardToInline, removeInlineCard, setBorderMark, toggleBorderMark, updateMediaSingleWidth } from './commands';
 import { MediaInlineNodeSelector, MediaSingleNodeSelector } from '../nodeviews/styles';
 import ImageBorderItem from '../ui/ImageBorder';
 import { currentMediaNodeBorderMark } from '../utils/current-media-node';
@@ -229,7 +229,6 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
             var _pluginInjectionApi$a2;
             setBorderMark(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions)(attrs)(state, dispatch);
           },
-          showSomewhatSemanticTooltips: getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags().useSomewhatSemanticTextColorNames,
           borderMark: borderMark,
           intl: intl
         });
@@ -318,17 +317,12 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
               }
             },
             onSubmit: ({
-              width
+              width,
+              validation
             }) => {
-              const tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, {
-                ...selectedMediaSingleNode.node.attrs,
-                width,
-                widthType: 'pixel',
-                layout: calcNewLayout(width, layout, contentWidth, options.fullWidthEnabled)
-              });
-              tr.setMeta('scrollIntoView', false);
-              tr.setSelection(NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
-              dispatch(tr);
+              var _pluginInjectionApi$a4;
+              const newLayout = calcNewLayout(width, layout, contentWidth, options.fullWidthEnabled);
+              updateMediaSingleWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions)(width, validation, newLayout)(state, dispatch);
             },
             onMigrate: () => {
               const tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, {
@@ -388,14 +382,14 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
             };
             const openLink = () => {
               if (editorView) {
-                var _pluginInjectionApi$a4;
+                var _pluginInjectionApi$a5;
                 const {
                   state: {
                     tr
                   },
                   dispatch
                 } = editorView;
-                pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions.attachAnalyticsEvent({
+                pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions.attachAnalyticsEvent({
                   eventType: EVENT_TYPE.TRACK,
                   action: ACTION.VISITED,
                   actionSubject: ACTION_SUBJECT.MEDIA,
@@ -421,8 +415,8 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
     }
   }
   if (allowAltTextOnImages) {
-    var _pluginInjectionApi$a5;
-    toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {
+    var _pluginInjectionApi$a6;
+    toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions), {
       type: 'separator'
     });
   }
@@ -506,22 +500,22 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
     selectedNodeType = state.selection.node.type;
   }
   if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
-    var _pluginInjectionApi$a6;
+    var _pluginInjectionApi$a7;
     const mediaOffset = state.selection.$from.parentOffset + 1;
     baseToolbar.getDomRef = () => {
       var _mediaPluginState$ele;
       const selector = mediaFilmstripItemDOMSelector(mediaOffset);
       return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
     };
-    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions);
+    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
-    var _pluginInjectionApi$a7;
+    var _pluginInjectionApi$a8;
     baseToolbar.getDomRef = () => {
       var _mediaPluginState$ele2;
       const element = (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(`.${MediaInlineNodeSelector}`);
       return element || mediaPluginState.element;
     };
-    items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions);
+    items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions);
   } else {
     baseToolbar.getDomRef = () => {
       var _mediaPluginState$ele3;

package/dist/es2019/plugins/media/ui/ImageBorder/index.js

@@ -18,7 +18,6 @@ const ImageBorder = ({
     formatMessage
   },
   toggleBorder,
-  showSomewhatSemanticTooltips,
   borderMark,
   setBorder
 }) => {
@@ -71,8 +70,7 @@ const ImageBorder = ({
       paletteOptions: {
         palette: borderColorPalette,
         paletteColorTooltipMessages: borderPaletteTooltipMessages,
-        hexToPaletteColor: hexToEditorBorderPaletteColor,
-        showSomewhatSemanticTooltips
+        hexToPaletteColor: hexToEditorBorderPaletteColor
       }
     })))
   }, {

package/dist/es2019/plugins/media/ui/PixelEntry/index.js

@@ -45,25 +45,26 @@ export const PixelEntry = ({
     }
     if (onSubmit) {
       let widthToBeSumitted = data.inputWidth;
-      let isInvalidInput = false;
+      let validation = 'valid';
       if (data.inputWidth < minWidth) {
         widthToBeSumitted = minWidth;
-        isInvalidInput = true;
+        validation = 'less-than-min';
       }
       if (data.inputWidth > maxWidth) {
         widthToBeSumitted = maxWidth;
-        isInvalidInput = true;
+        validation = 'greater-than-max';
       }
 
       // If user keeps submitting an invalid input, node width attribute will be updated with the same value
       // and won't upadte the state in useEffect (since width is the same)
       // Thus, we set the state here to always display the correct dimension
-      if (isInvalidInput) {
+      if (validation !== 'valid') {
         setComputedWidth(widthToBeSumitted);
         setComputedHeight(Math.round(ratioWidth * widthToBeSumitted));
       }
       onSubmit({
-        width: widthToBeSumitted
+        width: widthToBeSumitted,
+        validation
       });
     }
   };

package/dist/es2019/plugins/media/utils/analytics.js

@@ -39,7 +39,7 @@ export const getMediaInputResizeAnalyticsEvent = (type, attributes) => {
   return {
     action: ACTION.EDITED,
     actionSubject,
-    actionSubjectId: ACTION_SUBJECT_ID.INPUT_RESIZED,
+    actionSubjectId: ACTION_SUBJECT_ID.RESIZED,
     attributes: {
       width,
       layout,

package/dist/es2019/plugins/paste/handlers.js

@@ -635,7 +635,8 @@ export function handleMarkdown(markdownSlice, queueCardsFromChangedTr, from, to)
     } else {
       tr.replaceSelection(markdownSlice);
     }
-    tr.setSelection(TextSelection.near(tr.doc.resolve(pastesFrom + markdownSlice.size), -1));
+    const textPosition = tr.doc.resolve(Math.min(pastesFrom + markdownSlice.size, tr.doc.content.size));
+    tr.setSelection(TextSelection.near(textPosition, -1));
     queueCardsFromChangedTr === null || queueCardsFromChangedTr === void 0 ? void 0 : queueCardsFromChangedTr(state, tr, INPUT_METHOD.CLIPBOARD);
     if (dispatch) {
       dispatch(tr.scrollIntoView());

package/dist/es2019/plugins/text-color/index.js

@@ -10,11 +10,8 @@ const pluginConfig = textColorConfig => {
   return textColorConfig;
 };
 const textColorPlugin = ({
-  config: textColorConfig,
-  api
+  config: textColorConfig
 }) => {
-  var _api$featureFlags;
-  const featureFlags = (api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
   return {
     name: 'textColor',
     marks() {
@@ -54,8 +51,7 @@ const textColorPlugin = ({
           popupsBoundariesElement: popupsBoundariesElement,
           popupsScrollableElement: popupsScrollableElement,
           dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-          disabled: disabled,
-          featureFlags: featureFlags
+          disabled: disabled
         })
       });
     }

package/dist/es2019/plugins/text-color/ui/ToolbarTextColor/index.js

@@ -143,14 +143,10 @@ export class ToolbarTextColor extends React.Component {
       intl: {
         formatMessage
       },
-      disabled,
-      featureFlags
+      disabled
     } = this.props;
     const labelTextColor = formatMessage(messages.textColor);
     const palette = pluginState.palette;
-    const {
-      useSomewhatSemanticTextColorNames
-    } = featureFlags;
     let fitWidth;
     if (document.body.clientWidth <= 740) {
       // This was originally hard-coded, but moved here to a const
@@ -216,8 +212,7 @@ export class ToolbarTextColor extends React.Component {
       paletteOptions: {
         palette,
         hexToPaletteColor: hexToEditorTextPaletteColor,
-        paletteColorTooltipMessages: textPaletteTooltipMessages,
-        showSomewhatSemanticTooltips: useSomewhatSemanticTextColorNames
+        paletteColorTooltipMessages: textPaletteTooltipMessages
       }
     }))), jsx("span", {
       css: separatorStyles

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

@@ -21,7 +21,7 @@ const colorPickerButtonWrapper = css`
   position: relative;
 `;
 const colorPickerExpandContainer = css`
-  margin: 0px -4px;
+  margin: 0px ${"var(--ds-space-negative-050, -4px)"};
 `;
 
 // Control the size of color picker buttons and preview
@@ -34,7 +34,7 @@ const colorPickerWrapper = theme => css`
   dark: `var(--ds-surface-overlay, ${DN50})`
 })(theme)};
   box-shadow: 0 4px 8px -2px ${N60A}, 0 0 1px ${N60A};
-  padding: 8px 0px;
+  padding: ${"var(--ds-space-100, 8px)"} 0px;
 `;
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
@@ -148,7 +148,6 @@ const ColorPickerButton = props => {
       paletteOptions: {
         palette: props.colorPalette,
         hexToPaletteColor: props.hexToPaletteColor,
-        showSomewhatSemanticTooltips: props.showSomewhatSemanticTooltips,
         paletteColorTooltipMessages: props.paletteColorTooltipMessages
       }
     }))));

package/dist/es2019/ui/ConfigPanel/Fields/ColorPicker.js

@@ -342,10 +342,8 @@ const ColorPicker = props => {
     onFieldChange(name, currentColor !== colorValue);
   };
   const {
-    useSomewhatSemanticTextColorNames,
     expandedChartColors
   } = featureFlags !== null && featureFlags !== void 0 ? featureFlags : {
-    useSomewhatSemanticTextColorNames: false,
     expandedChartColors: false
   };
   return expandedChartColors ? jsx(ColorPickerButton, {
@@ -353,15 +351,7 @@ const ColorPicker = props => {
     currentColor: currentColor,
     onChange: onColorChange,
     colorPalette: extendedColorPalette,
-    paletteColorTooltipMessages: chartsColorPaletteTooltipMessages
-    // We did not want to create new FF or update
-    //  useSomewhatSemanticTextColorNames name
-    //  because it is temporary and require extra work.
-    // So even though it says text color names,
-    //  we are going to use for all color pickers
-    //  such as text, background and table charts.
-    ,
-    showSomewhatSemanticTooltips: useSomewhatSemanticTextColorNames,
+    paletteColorTooltipMessages: chartsColorPaletteTooltipMessages,
     cols: EXPANDED_COLOR_PICKER_COLUMNS,
     alignX: "right",
     placement: "ConfigPanel",

package/dist/es2019/ui/ConfigPanel/Fields/Expand.js

@@ -33,7 +33,7 @@ const labelContainer = css`
 `;
 const expandContentContainer = isHidden => css`
   display: ${isHidden ? 'none' : 'block'};
-  margin-top: calc(-1 * ${"var(--ds-space-100, 8px)"});
+  margin-top: ${"var(--ds-space-negative-100, -8px)"};
 `;
 function Expand({
   field,

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "187.41.3";
+export const version = "187.41.5";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/create-editor/feature-flags-from-props.js

@@ -25,7 +25,7 @@ function getSpellCheck(featureFlags) {
  * which is used by both current and archv3 editors.
  */
 export function createFeatureFlagsFromProps(props) {
-  var _props$allowLayouts, _props$performanceTra, _props$performanceTra2, _props$allowExtension, _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$featureFlags4, _props$featureFlags5, _props$featureFlags6, _props$featureFlags7, _props$featureFlags8, _props$featureFlags9, _props$featureFlags10, _props$featureFlags11, _props$featureFlags12, _props$featureFlags13, _props$featureFlags14, _props$featureFlags15, _props$featureFlags16, _props$featureFlags17, _props$featureFlags18, _props$collabEdit, _props$collabEdit2, _props$featureFlags19, _props$featureFlags20, _props$featureFlags21, _props$featureFlags22, _props$featureFlags23, _props$featureFlags24, _props$featureFlags25, _props$featureFlags26, _props$featureFlags27, _props$featureFlags28, _props$featureFlags29;
+  var _props$allowLayouts, _props$performanceTra, _props$performanceTra2, _props$allowExtension, _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$featureFlags4, _props$featureFlags5, _props$featureFlags6, _props$featureFlags7, _props$featureFlags8, _props$featureFlags9, _props$featureFlags10, _props$featureFlags11, _props$featureFlags12, _props$featureFlags13, _props$featureFlags14, _props$featureFlags15, _props$featureFlags16, _props$featureFlags17, _props$featureFlags18, _props$collabEdit, _props$collabEdit2, _props$featureFlags19, _props$featureFlags20, _props$featureFlags21, _props$featureFlags22, _props$featureFlags23, _props$featureFlags24, _props$featureFlags25, _props$featureFlags26, _props$featureFlags27;
   var normalizedFeatureFlags = normalizeFeatureFlags(props.featureFlags);
   return _objectSpread(_objectSpread({}, normalizedFeatureFlags), {}, {
     newInsertionBehaviour: props.allowNewInsertionBehaviour,
@@ -56,8 +56,7 @@ export function createFeatureFlagsFromProps(props) {
     // Including fallback to props.featureFlags so that mobile feature flags
     // are included (they are not kebab cased)
     restartNumberedLists: normalizedFeatureFlags.restartNumberedLists === true || ((_props$featureFlags25 = props.featureFlags) === null || _props$featureFlags25 === void 0 ? void 0 : _props$featureFlags25.restartNumberedLists) === true,
-    useSomewhatSemanticTextColorNames: Boolean(typeof normalizedFeatureFlags.useSomewhatSemanticTextColorNames === 'boolean' && !!normalizedFeatureFlags.useSomewhatSemanticTextColorNames || (typeof ((_props$featureFlags26 = props.featureFlags) === null || _props$featureFlags26 === void 0 ? void 0 : _props$featureFlags26.useSomewhatSemanticTextColorNames) === 'boolean' ? !!((_props$featureFlags27 = props.featureFlags) !== null && _props$featureFlags27 !== void 0 && _props$featureFlags27.useSomewhatSemanticTextColorNames) : false)),
     lpLinkPickerFocusTrap: Boolean(normalizedFeatureFlags.lpLinkPickerFocusTrap),
-    preventPopupOverflow: Boolean(typeof ((_props$featureFlags28 = props.featureFlags) === null || _props$featureFlags28 === void 0 ? void 0 : _props$featureFlags28['prevent-popup-overflow']) === 'boolean' ? !!((_props$featureFlags29 = props.featureFlags) !== null && _props$featureFlags29 !== void 0 && _props$featureFlags29['prevent-popup-overflow']) : false)
+    preventPopupOverflow: Boolean(typeof ((_props$featureFlags26 = props.featureFlags) === null || _props$featureFlags26 === void 0 ? void 0 : _props$featureFlags26['prevent-popup-overflow']) === 'boolean' ? !!((_props$featureFlags27 = props.featureFlags) !== null && _props$featureFlags27 !== void 0 && _props$featureFlags27['prevent-popup-overflow']) : false)
   });
 }

package/dist/esm/plugins/collab-edit/ui/styles.js

@@ -3,8 +3,8 @@ var _templateObject, _templateObject2, _templateObject3;
 import { css } from '@emotion/react';
 import { N20 } from '@atlaskit/theme/colors';
 import { akEditorSmallZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-export var inviteTeamWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: 50%;\n  min-width: ", ";\n  margin-left: calc(-1 * ", ");\n"])), "var(--ds-background-neutral, ".concat(N20, ")"), "var(--ds-space-400, 32px)", "var(--ds-space-050, 4px)");
-export var avatarContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-right: ", ";\n  display: flex;\n  align-items: center;\n\n  // ED-13102: This is to override list styles that come from the\n  // .wiki-content class in Confluence that should not apply within\n  // the toolbar. Has to be extra specific to override.\n  && > ul {\n    list-style-type: none;\n  }\n\n  div:last-child button.invite-to-edit {\n    border-radius: 50%;\n    height: 32px;\n    width: 32px;\n    padding: 2px;\n  }\n"])), "var(--ds-space-100, 8px)");
+export var inviteTeamWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: 50%;\n  min-width: ", ";\n  margin-left: ", ";\n"])), "var(--ds-background-neutral, ".concat(N20, ")"), "var(--ds-space-400, 32px)", "var(--ds-space-negative-050, -4px)");
+export var avatarContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-right: ", ";\n  display: flex;\n  align-items: center;\n\n  // ED-13102: This is to override list styles that come from the\n  // .wiki-content class in Confluence that should not apply within\n  // the toolbar. Has to be extra specific to override.\n  && > ul {\n    list-style-type: none;\n  }\n\n  div:last-child button.invite-to-edit {\n    border-radius: 50%;\n    height: 32px;\n    width: 32px;\n    padding: ", ";\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-025, 2px)");
 export var badge = function badge(color) {
   return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: block;\n  position: absolute;\n  right: 1px;\n  bottom: 1px;\n  width: 13px;\n  height: 13px;\n  z-index: ", ";\n  border-radius: 3px;\n  background: ", ";\n  color: ", ";\n  font-size: ", ";\n  line-height: 0;\n  padding-top: 7px;\n  text-align: center;\n  box-shadow: 0 0 1px ", ";\n  box-sizing: border-box;\n"])), akEditorSmallZIndex, color, "var(--ds-text-inverse, #fff)", relativeFontSizeToBase16(9), "var(--ds-border-inverse, #fff)");
 };

package/dist/esm/plugins/date/nodeviews/date.js

@@ -12,7 +12,12 @@ export function DateNodeView(props) {
     selection = _props$view$state.selection,
     getPos = props.getPos;
   var intl = useIntl();
-  var pos = typeof getPos === 'function' ? getPos() : undefined;
+  var pos;
+  try {
+    pos = typeof getPos === 'function' ? getPos() : undefined;
+  } catch (e) {
+    pos = undefined;
+  }
 
   // We fall back to selection.$from even though it does not cover all use cases
   // eg. upon Editor init, selection is at the start, not at the Date node

package/dist/esm/plugins/extension/index.js

@@ -1,4 +1,5 @@
 import { extension, bodiedExtension, inlineExtension } from '@atlaskit/adf-schema';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { createPlugin } from './pm-plugins/main';
 import keymapPlugin from './pm-plugins/keymap';
 import { createPlugin as createUniqueIdPlugin } from './pm-plugins/unique-id';
@@ -6,11 +7,16 @@ import { getToolbarConfig } from './toolbar';
 import { getContextPanel } from './context-panel';
 import { createExtensionAPI } from './extension-api';
 var extensionPlugin = function extensionPlugin(_ref) {
-  var _api$featureFlags, _api$contextPanel2, _api$contextPanel3;
+  var _api$featureFlags, _api$contextPanel3, _api$contextPanel4;
   var _ref$config = _ref.config,
     options = _ref$config === void 0 ? {} : _ref$config,
-    api = _ref.api;
-  var featureFlags = (api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
+    _api = _ref.api;
+  var featureFlags = (_api === null || _api === void 0 ? void 0 : (_api$featureFlags = _api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
+  //Note: This is a hack to get the editor view reference in the plugin. Copied from table plugin.
+  //This is needed to get the current selection in the editor
+  var editorViewRef = {
+    current: null
+  };
   return {
     name: 'extension',
     nodes: function nodes() {
@@ -34,7 +40,7 @@ var extensionPlugin = function extensionPlugin(_ref) {
             portalProviderAPI = _ref2.portalProviderAPI,
             eventDispatcher = _ref2.eventDispatcher;
           var extensionHandlers = options.extensionHandlers || {};
-          return createPlugin(dispatch, providerFactory, extensionHandlers, portalProviderAPI, eventDispatcher, api, options.useLongPressSelection, {
+          return createPlugin(dispatch, providerFactory, extensionHandlers, portalProviderAPI, eventDispatcher, _api, options.useLongPressSelection, {
             appearance: options.appearance
           });
         }
@@ -42,25 +48,45 @@ var extensionPlugin = function extensionPlugin(_ref) {
         name: 'extensionKeymap',
         plugin: function plugin() {
           var _api$contextPanel;
-          return keymapPlugin(api === null || api === void 0 ? void 0 : (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange);
+          return keymapPlugin(_api === null || _api === void 0 ? void 0 : (_api$contextPanel = _api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange);
         }
       }, {
         name: 'extensionUniqueId',
         plugin: function plugin() {
           return createUniqueIdPlugin();
         }
+      }, {
+        name: 'extensionEditorViewRef',
+        plugin: function plugin() {
+          return new SafePlugin({
+            view: function view(editorView) {
+              editorViewRef.current = editorView;
+              return {
+                destroy: function destroy() {
+                  editorViewRef.current = null;
+                }
+              };
+            }
+          });
+        }
       }];
     },
     actions: {
-      createExtensionAPI: createExtensionAPI
+      api: function api() {
+        var _api$contextPanel2;
+        return createExtensionAPI({
+          editorView: editorViewRef.current,
+          applyChange: _api === null || _api === void 0 ? void 0 : (_api$contextPanel2 = _api.contextPanel) === null || _api$contextPanel2 === void 0 ? void 0 : _api$contextPanel2.actions.applyChange
+        });
+      }
     },
     pluginsOptions: {
       floatingToolbar: getToolbarConfig({
         breakoutEnabled: options.breakoutEnabled,
-        hoverDecoration: api === null || api === void 0 ? void 0 : api.decorations.actions.hoverDecoration,
-        applyChangeToContextPanel: api === null || api === void 0 ? void 0 : (_api$contextPanel2 = api.contextPanel) === null || _api$contextPanel2 === void 0 ? void 0 : _api$contextPanel2.actions.applyChange
+        hoverDecoration: _api === null || _api === void 0 ? void 0 : _api.decorations.actions.hoverDecoration,
+        applyChangeToContextPanel: _api === null || _api === void 0 ? void 0 : (_api$contextPanel3 = _api.contextPanel) === null || _api$contextPanel3 === void 0 ? void 0 : _api$contextPanel3.actions.applyChange
       }),
-      contextPanel: getContextPanel(options.allowAutoSave, featureFlags, api === null || api === void 0 ? void 0 : (_api$contextPanel3 = api.contextPanel) === null || _api$contextPanel3 === void 0 ? void 0 : _api$contextPanel3.actions.applyChange)
+      contextPanel: getContextPanel(options.allowAutoSave, featureFlags, _api === null || _api === void 0 ? void 0 : (_api$contextPanel4 = _api.contextPanel) === null || _api$contextPanel4 === void 0 ? void 0 : _api$contextPanel4.actions.applyChange)
     }
   };
 };

package/dist/esm/plugins/floating-toolbar/ui/ExtensionsPlaceholder.js

@@ -6,7 +6,6 @@ import Loadable from 'react-loadable';
 import { getContextualToolbarItemsFromModule } from '@atlaskit/editor-common/extensions';
 import ButtonGroup from '@atlaskit/button/button-group';
 import { nodeToJSON } from '../../../utils';
-import { createExtensionAPI } from '../../extension/extension-api';
 import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
 import Separator from './Separator';
 var noop = function noop() {
@@ -45,8 +44,7 @@ var resolveExtensionIcon = /*#__PURE__*/function () {
 var ExtensionButton = function ExtensionButton(props) {
   var item = props.item,
     node = props.node,
-    editorView = props.editorView,
-    applyChangeToContextPanel = props.applyChangeToContextPanel;
+    extensionApi = props.extensionApi;
   var ButtonIcon = React.useMemo(function () {
     return item.icon ? Loadable({
       loader: function () {
@@ -74,11 +72,7 @@ var ExtensionButton = function ExtensionButton(props) {
       throw new Error("'action' of context toolbar item '".concat(item.key, "' is not a function"));
     }
     var targetNodeAdf = nodeToJSON(node);
-    var api = createExtensionAPI({
-      editorView: editorView,
-      applyChange: applyChangeToContextPanel
-    });
-    item.action(targetNodeAdf, api);
+    item.action(targetNodeAdf, extensionApi);
   };
   return /*#__PURE__*/React.createElement(Button, {
     title: item.label,
@@ -96,7 +90,8 @@ export var ExtensionsPlaceholder = function ExtensionsPlaceholder(props) {
     editorView = props.editorView,
     extensionProvider = props.extensionProvider,
     separator = props.separator,
-    applyChangeToContextPanel = props.applyChangeToContextPanel;
+    applyChangeToContextPanel = props.applyChangeToContextPanel,
+    extensionApi = props.extensionApi;
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     extensions = _useState2[0],
@@ -140,11 +135,8 @@ export var ExtensionsPlaceholder = function ExtensionsPlaceholder(props) {
     return nodeToJSON(node);
   }, [node]);
   var extensionItems = React.useMemo(function () {
-    return getContextualToolbarItemsFromModule(extensions, nodeAdf, createExtensionAPI({
-      editorView: editorView,
-      applyChange: applyChangeToContextPanel
-    }));
-  }, [extensions, nodeAdf, editorView, applyChangeToContextPanel]);
+    return getContextualToolbarItemsFromModule(extensions, nodeAdf, extensionApi);
+  }, [extensions, nodeAdf, extensionApi]);
   if (!extensionItems.length) {
     return null;
   }
@@ -160,7 +152,8 @@ export var ExtensionsPlaceholder = function ExtensionsPlaceholder(props) {
       node: node,
       item: item,
       editorView: editorView,
-      applyChangeToContextPanel: applyChangeToContextPanel
+      applyChangeToContextPanel: applyChangeToContextPanel,
+      extensionApi: extensionApi
     }));
     if (index < extensionItems.length - 1) {
       children.push( /*#__PURE__*/React.createElement(Separator, null));

package/dist/esm/plugins/floating-toolbar/ui/Toolbar.js

@@ -52,14 +52,10 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
     featureFlags = _ref.featureFlags,
     api = _ref.api;
   var emojiAndColourPickerMountPoint = scrollable ? popupsMountPoint || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.fabric-editor-popup-scroll-parent')) || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.ak-editor-content-area')) || undefined : popupsMountPoint;
-  var _ref2 = featureFlags || {
-      useSomewhatSemanticTextColorNames: false
-    },
-    useSomewhatSemanticTextColorNames = _ref2.useSomewhatSemanticTextColorNames;
   return jsx(ButtonGroup, null, items.filter(function (item) {
     return !item.hidden;
   }).map(function (item, idx) {
-    var _api$contextPanel;
+    var _api$contextPanel, _api$extension;
     switch (item.type) {
       case 'button':
         var ButtonIcon = item.icon;
@@ -191,14 +187,6 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
             ,
             hexToPaletteColor: hexToEditorBackgroundPaletteColor,
             paletteColorTooltipMessages: backgroundPaletteTooltipMessages
-            // We did not want to create new FF or update
-            //  useSomewhatSemanticTextColorNames name
-            //  because it is temporary and require extra work.
-            // So even though it says text color names,
-            //  we are going to use for all color pickers
-            //  such as text, background and table charts.
-            ,
-            showSomewhatSemanticTooltips: useSomewhatSemanticTextColorNames
           });
         }
         if (item.selectType === 'emoji') {
@@ -220,8 +208,8 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
         if (!editorView || !extensionsProvider) {
           return null;
         }
-        var _ref3 = featureFlags || {},
-          extendFloatingToolbar = _ref3.extendFloatingToolbar;
+        var _ref2 = featureFlags || {},
+          extendFloatingToolbar = _ref2.extendFloatingToolbar;
         if (!extendFloatingToolbar) {
           return null;
         }
@@ -231,7 +219,8 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
           editorView: editorView,
           extensionProvider: extensionsProvider,
           separator: item.separator,
-          applyChangeToContextPanel: api === null || api === void 0 ? void 0 : (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange
+          applyChangeToContextPanel: api === null || api === void 0 ? void 0 : (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange,
+          extensionApi: api === null || api === void 0 ? void 0 : (_api$extension = api.extension) === null || _api$extension === void 0 ? void 0 : _api$extension.actions.api()
         });
       case 'separator':
         return jsx(Separator, {
@@ -364,8 +353,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
   // this prevents https://product-fabric.atlassian.net/browse/ED-10207
   _createClass(Toolbar, [{
     key: "resetStyling",
-    value: function resetStyling(_ref4) {
-      var table = _ref4.table;
+    value: function resetStyling(_ref3) {
+      var table = _ref3.table;
       if (this.props.editorView) {
         var _this$props$api;
         var _this$props$editorVie2 = this.props.editorView,

package/dist/esm/plugins/media/styles.js

@@ -5,7 +5,7 @@ import { mediaSingleSharedStyle, richMediaClassName } from '@atlaskit/editor-com
 import { akEditorDeleteBorder, akEditorDeleteBackground, akEditorSelectedBorderBoldSize, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPadding, akEditorSelectedNodeClassName, akEditorDeleteIconColor } from '@atlaskit/editor-shared-styles';
 import { N60, B200, Y500 } from '@atlaskit/theme/colors';
 import { fileCardImageViewSelector, inlinePlayerClassName, newFileExperienceClassName } from '@atlaskit/media-card';
-export var mediaStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n    }\n\n    .media-extended-resize-experience[layout^='wrap-'] {\n      // override 'overflow: auto' when viewport <= 410 set by mediaSingleSharedStyle\n      // to prevent scroll bar\n      overflow: visible !important;\n    }\n\n    & [layout^='wrap-'] + [layout^='wrap-'] {\n      clear: none;\n      & + p,\n      & + div[class^='fabric-editor-align'],\n      & + ul,\n      & + ol,\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        clear: both !important;\n      }\n      & .", " {\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n\n    .mediaSingleView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n      // overwrite default Prosemirror setting making it clear: both\n      clear: inherit;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right']\n      + .mediaSingleView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n\n    /* Larger margins for resize handlers when at depth 0 of the document */\n    & > .mediaSingleView-content-wrap {\n      .richMedia-resize-handle-right {\n        margin-right: -", "px;\n      }\n      .richMedia-resize-handle-left {\n        margin-left: -", "px;\n      }\n    }\n  }\n\n  .richMedia-resize-handle-right,\n  .richMedia-resize-handle-left {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .richMedia-resize-handle-right {\n    align-items: flex-end;\n    padding-right: ", ";\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: ", ";\n    margin-left: -", "px;\n  }\n\n  .richMedia-resize-handle-right::after,\n  .richMedia-resize-handle-left::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover .richMedia-resize-handle-left::after,\n  .", ":hover .richMedia-resize-handle-right::after {\n    background: ", ";\n  }\n\n  .", " .richMedia-resize-handle-right::after,\n  .", " .richMedia-resize-handle-left::after,\n  .", " .richMedia-resize-handle-right:hover::after,\n  .", " .richMedia-resize-handle-left:hover::after,\n  .", ".is-resizing .richMedia-resize-handle-right::after,\n  .", ".is-resizing .richMedia-resize-handle-left::after {\n    background: ", ";\n  }\n\n  .__resizable_base__ {\n    left: unset !important;\n    width: auto !important;\n    height: auto !important;\n  }\n\n  /* Danger when top level node for smart cards / inline links */\n  .danger > div > div > .media-card-frame,\n  .danger > span > a {\n    background-color: ", ";\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    transition: background-color 0s, box-shadow 0s;\n  }\n  /* Danger when nested node or common */\n  .danger {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* Media single video player */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* New file experience */\n    .", " .", " {\n      box-shadow: 0 0 0 1px\n        ", " !important;\n    }\n    /* Media resize handlers */\n    .richMedia-resize-handle-right::after,\n    .richMedia-resize-handle-left::after {\n      background: ", ";\n    }\n\n    /* Smart cards */\n    div div .media-card-frame,\n    .inlineCardView-content-wrap > span > a {\n      background-color: ", "; /* R75 with 50% opactiy */\n      transition: background-color 0s;\n    }\n\n    div div .media-card-frame::after {\n      box-shadow: none;\n    }\n  }\n\n  .warning {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n\n    .", " .", " {\n      box-shadow: 0 0 0 1px ", " !important;\n    }\n\n    .resizer-handle-left::after,\n    .resizer-handle-right::after {\n      background: ", " !important;\n    }\n  }\n"])), mediaSingleSharedStyle, richMediaClassName, richMediaClassName, richMediaClassName, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPaddingWide, "var(--ds-space-150, 12px)", akEditorMediaResizeHandlerPadding, "var(--ds-space-150, 12px)", akEditorMediaResizeHandlerPadding, richMediaClassName, richMediaClassName, "var(--ds-border, ".concat(N60, ")"), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, "var(--ds-border-focused, ".concat(B200, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), richMediaClassName, fileCardImageViewSelector, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, inlinePlayerClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, newFileExperienceClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))", richMediaClassName, fileCardImageViewSelector, "var(--ds-border-warning, ".concat(Y500, ")"), richMediaClassName, inlinePlayerClassName, "var(--ds-border-warning, ".concat(Y500, ")"), richMediaClassName, newFileExperienceClassName, "var(--ds-border-warning, ".concat(Y500, ")"), "var(--ds-icon-warning, ".concat(Y500, ")"));
+export var mediaStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n    }\n\n    .media-extended-resize-experience[layout^='wrap-'] {\n      // override 'overflow: auto' when viewport <= 410 set by mediaSingleSharedStyle\n      // to prevent scroll bar\n      overflow: visible !important;\n    }\n\n    & [layout^='wrap-'] + [layout^='wrap-'] {\n      clear: none;\n      & + p,\n      & + div[class^='fabric-editor-align'],\n      & + ul,\n      & + ol,\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        clear: both !important;\n      }\n      & .", " {\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n\n    .mediaSingleView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n      // overwrite default Prosemirror setting making it clear: both\n      clear: inherit;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right']\n      + .mediaSingleView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n\n    /* Larger margins for resize handlers when at depth 0 of the document */\n    & > .mediaSingleView-content-wrap {\n      .richMedia-resize-handle-right {\n        margin-right: -", "px;\n      }\n      .richMedia-resize-handle-left {\n        margin-left: -", "px;\n      }\n    }\n  }\n\n  .richMedia-resize-handle-right,\n  .richMedia-resize-handle-left {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .richMedia-resize-handle-right {\n    align-items: flex-end;\n    padding-right: ", ";\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: ", ";\n    margin-left: -", "px;\n  }\n\n  .richMedia-resize-handle-right::after,\n  .richMedia-resize-handle-left::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover .richMedia-resize-handle-left::after,\n  .", ":hover .richMedia-resize-handle-right::after {\n    background: ", ";\n  }\n\n  .", " .richMedia-resize-handle-right::after,\n  .", " .richMedia-resize-handle-left::after,\n  .", " .richMedia-resize-handle-right:hover::after,\n  .", " .richMedia-resize-handle-left:hover::after,\n  .", ".is-resizing .richMedia-resize-handle-right::after,\n  .", ".is-resizing .richMedia-resize-handle-left::after {\n    background: ", ";\n  }\n\n  .__resizable_base__ {\n    left: unset !important;\n    width: auto !important;\n    height: auto !important;\n  }\n\n  /* Danger when top level node for smart cards / inline links */\n  .danger > div > div > .media-card-frame,\n  .danger > span > a {\n    background-color: ", ";\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    transition: background-color 0s, box-shadow 0s;\n  }\n  /* Danger when nested node or common */\n  .danger {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* Media single video player */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* New file experience */\n    .", " .", " {\n      box-shadow: 0 0 0 1px\n        ", " !important;\n    }\n    /* Media resize handlers */\n    .resizer-handle-thumb {\n      background: ", " !important;\n    }\n\n    /* Smart cards */\n    div div .media-card-frame,\n    .inlineCardView-content-wrap > span > a {\n      background-color: ", "; /* R75 with 50% opactiy */\n      transition: background-color 0s;\n    }\n\n    div div .media-card-frame::after {\n      box-shadow: none;\n    }\n  }\n\n  .warning {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n\n    .", " .", " {\n      box-shadow: 0 0 0 1px ", " !important;\n    }\n\n    .resizer-handle-thumb {\n      background: ", " !important;\n    }\n  }\n"])), mediaSingleSharedStyle, richMediaClassName, richMediaClassName, richMediaClassName, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPaddingWide, "var(--ds-space-150, 12px)", akEditorMediaResizeHandlerPadding, "var(--ds-space-150, 12px)", akEditorMediaResizeHandlerPadding, richMediaClassName, richMediaClassName, "var(--ds-border, ".concat(N60, ")"), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, "var(--ds-border-focused, ".concat(B200, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), richMediaClassName, fileCardImageViewSelector, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, inlinePlayerClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, newFileExperienceClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))", richMediaClassName, fileCardImageViewSelector, "var(--ds-border-warning, ".concat(Y500, ")"), richMediaClassName, inlinePlayerClassName, "var(--ds-border-warning, ".concat(Y500, ")"), richMediaClassName, newFileExperienceClassName, "var(--ds-border-warning, ".concat(Y500, ")"), "var(--ds-icon-warning, ".concat(Y500, ")"));
 
 /* `left: unset` above is to work around Chrome bug where rendering a div with
  * that style applied inside a container that has a scroll, causes any svgs on