@atlaskit/editor-plugin-media 1.20.4 → 1.20.5

package/LICENSE.md

@@ -1,13 +1,11 @@
 Copyright 2023 Atlassian Pty Ltd
 
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in
+compliance with the License. You may obtain a copy of the License at
 
     http://www.apache.org/licenses/LICENSE-2.0
 
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
+Unless required by applicable law or agreed to in writing, software distributed under the License is
+distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing permissions and limitations under the
+License.

package/dist/cjs/nodeviews/mediaSingle.js

@@ -445,7 +445,9 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
       var isCurrentNodeDrafting = (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.isDrafting) && (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.targetNodeId) === (node === null || node === void 0 || (_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.attrs.id);
       var MediaChildren = (0, _react2.jsx)("figure", {
         ref: this.mediaSingleWrapperRef,
-        css: figureWrapperStyles,
+        css: figureWrapperStyles
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        ,
         className: _styles.MediaSingleNodeSelector,
         onClick: this.onMediaSingleClicked
       }, commentsOnMedia && (0, _react2.jsx)(_CommentBadge.CommentBadge, {

package/dist/cjs/nodeviews/styles.js

@@ -29,11 +29,14 @@ var MediaCardWrapper = exports.MediaCardWrapper = function MediaCardWrapper(_ref
     onContextMenu = _ref.onContextMenu;
   var calculatedBorderWidth = selected && borderWidth > 0 ? borderWidth + 1 : borderWidth;
   return (0, _react2.jsx)("div", {
-    "data-testid": "media-card-wrapper",
+    "data-testid": "media-card-wrapper"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: "media-card-wrapper",
     style: {
       borderColor: "var(--custom-palette-color)",
       borderWidth: "".concat(calculatedBorderWidth, "px"),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       borderStyle: 'solid',
       borderRadius: "".concat(calculatedBorderWidth * 2, "px")
     }

package/dist/cjs/toolbar/linking-toolbar-appearance.js

@@ -80,7 +80,9 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = function LinkToolbar
       title: linkTitle,
       icon: (0, _react2.jsx)(_shortcut.default, {
         label: linkTitle
-      }),
+      })
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: "hyperlink-open-link"
     }), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null));
   } else {

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

@@ -15,7 +15,7 @@ var _colors = require("@atlaskit/theme/colors");
 var _templateObject;
 /** @jsx jsx */
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-var placeholder = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  width: 100%;\n  text-align: center;\n  margin-top: ", " !important;\n  display: block;\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-space-100, 8px)");
+var placeholder = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tcolor: ", ";\n\twidth: 100%;\n\ttext-align: center;\n\tmargin-top: ", " !important;\n\tdisplay: block;\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-space-100, 8px)");
 var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var onClick = _ref.onClick;
   return (0, _react2.jsx)("span", {

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

@@ -65,7 +65,9 @@ var ImageBorder = function ImageBorder(_ref) {
     value: {
       name: 'color'
     },
-    elemAfter: (0, _react2.jsx)("div", {
+    elemAfter:
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    (0, _react2.jsx)("div", {
       className: _styles.DropdownMenuSharedCssClassName.SUBMENU
     }, (0, _react2.jsx)("div", {
       css: (0, _styles2.contextualMenuColorIcon)(color && (0, _editorPalette.hexToEditorBorderPaletteColor)(color))
@@ -91,7 +93,9 @@ var ImageBorder = function ImageBorder(_ref) {
     value: {
       name: 'size'
     },
-    elemAfter: (0, _react2.jsx)("div", {
+    elemAfter:
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    (0, _react2.jsx)("div", {
       className: _styles.DropdownMenuSharedCssClassName.SUBMENU
     }, (0, _react2.jsx)("div", {
       css: _styles2.contextualMenuArrow
@@ -140,7 +144,9 @@ var ImageBorder = function ImageBorder(_ref) {
       enabled: enabled,
       isOpen: isOpen
     })
-  }, (0, _react2.jsx)(_uiMenu.ToolbarButton, {
+  }, (0, _react2.jsx)(_uiMenu.ToolbarButton
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , {
     className: "image-border-toolbar-btn",
     selected: enabled,
     onClick: toggleBorder,
@@ -152,7 +158,9 @@ var ImageBorder = function ImageBorder(_ref) {
     title: enabled ? formatMessage(_media.imageBorderMessages.removeBorder) : formatMessage(_media.imageBorderMessages.addBorder)
   }), (0, _react2.jsx)("div", {
     ref: popupTarget
-  }, (0, _react2.jsx)(_uiMenu.ToolbarButton, {
+  }, (0, _react2.jsx)(_uiMenu.ToolbarButton
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , {
     className: "image-border-toolbar-dropdown",
     selected: enabled || isOpen,
     "aria-label": formatMessage(_media.imageBorderMessages.borderOptions),

package/dist/cjs/ui/ImageBorder/styles.js

@@ -28,21 +28,21 @@ var menuItemDimensions = exports.menuItemDimensions = {
 // TODO: Migrate away from gridSize
 // Recommendation: Replace directly with 4 due to itemSpacing being used in calculations
 var itemSpacing = exports.itemSpacing = (0, _constants.gridSize)() / 2;
-var contextualMenuArrow = exports.contextualMenuArrow = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  &::after {\n    content: '\u203A';\n    margin-left: ", ";\n    line-height: 20px;\n    color: ", ";\n  }\n"])), "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
+var contextualMenuArrow = exports.contextualMenuArrow = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: flex;\n\t&::after {\n\t\tcontent: '\u203A';\n\t\tmargin-left: ", ";\n\t\tline-height: 20px;\n\t\tcolor: ", ";\n\t}\n"])), "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
 var contextualMenuColorIcon = exports.contextualMenuColorIcon = function contextualMenuColorIcon(color) {
-  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  &::before {\n    content: '';\n    display: block;\n    border: 1px solid ", ";\n    border-radius: ", ";\n    width: 20px;\n    height: 20px;\n    ", "\n  }\n"])), contextualMenuArrow, _uiColor.DEFAULT_BORDER_COLOR, "var(--ds-border-radius-100, 3px)", color && "background: ".concat(color));
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t", "\n\t&::before {\n\t\tcontent: '';\n\t\tdisplay: block;\n\t\tborder: 1px solid ", ";\n\t\tborder-radius: ", ";\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\t", "\n\t}\n"])), contextualMenuArrow, _uiColor.DEFAULT_BORDER_COLOR, "var(--ds-border-radius-100, 3px)", color && "background: ".concat(color));
 };
 var contextualSubMenu = exports.contextualSubMenu = function contextualSubMenu(index) {
-  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", ";\n  background: ", ";\n  box-shadow: ", ";\n  display: flex;\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  padding: ", ";\n\n  > div {\n    padding: 0;\n  }\n"])), "var(--ds-border-radius-100, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), index * (menuItemDimensions.height + itemSpacing * 2), menuItemDimensions.width, "var(--ds-space-100, 8px)");
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\tborder-radius: ", ";\n\tbackground: ", ";\n\tbox-shadow: ", ";\n\tdisplay: flex;\n\tposition: absolute;\n\ttop: ", "px;\n\tleft: ", "px;\n\tpadding: ", ";\n\n\t> div {\n\t\tpadding: 0;\n\t}\n"])), "var(--ds-border-radius-100, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), index * (menuItemDimensions.height + itemSpacing * 2), menuItemDimensions.width, "var(--ds-space-100, 8px)");
 };
 var buttonStyle = exports.buttonStyle = function buttonStyle(selected) {
-  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  height: 26px;\n  width: 26px;\n  padding: 0;\n  border-radius: 4px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  cursor: pointer;\n  display: block;\n"])), selected ? "var(--ds-text, ".concat(_colors.N800, ")") : "var(--ds-background-neutral, ".concat(_colors.N20A, ")"), _uiColor.DEFAULT_BORDER_COLOR);
+  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\theight: 26px;\n\twidth: 26px;\n\tpadding: 0;\n\tborder-radius: 4px;\n\tbackground-color: ", ";\n\tborder: 1px solid ", ";\n\tcursor: pointer;\n\tdisplay: block;\n"])), selected ? "var(--ds-text, ".concat(_colors.N800, ")") : "var(--ds-background-neutral, ".concat(_colors.N20A, ")"), _uiColor.DEFAULT_BORDER_COLOR);
 };
 
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-var buttonWrapperStyle = exports.buttonWrapperStyle = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid transparent;\n  margin: ", ";\n  font-size: 0;\n  display: flex;\n  align-items: center;\n  padding: ", ";\n  border-radius: 6px;\n  &:focus-within,\n  &:focus,\n  &:hover {\n    border-color: ", " !important;\n  }\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", _colors.N50);
+var buttonWrapperStyle = exports.buttonWrapperStyle = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\tborder: 1px solid transparent;\n\tmargin: ", ";\n\tfont-size: 0;\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: ", ";\n\tborder-radius: 6px;\n\t&:focus-within,\n\t&:focus,\n\t&:hover {\n\t\tborder-color: ", " !important;\n\t}\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", _colors.N50);
 var line = exports.line = function line(size, selected) {
-  return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  &:before {\n    content: '';\n    display: block;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 12px;\n    height: ", "px;\n    background-color: ", ";\n    border-radius: 90px;\n    transform: translate(-50%, -50%) rotate(135deg);\n  }\n"])), size, selected ? "var(--ds-icon-inverse, ".concat(_colors.N0, ")") : "var(--ds-icon, #44546F)");
+  return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\tposition: relative;\n\t&:before {\n\t\tcontent: '';\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tleft: 50%;\n\t\twidth: 12px;\n\t\theight: ", "px;\n\t\tbackground-color: ", ";\n\t\tborder-radius: 90px;\n\t\ttransform: translate(-50%, -50%) rotate(135deg);\n\t}\n"])), size, selected ? "var(--ds-icon-inverse, ".concat(_colors.N0, ")") : "var(--ds-icon, #44546F)");
 };
 var getHoverStyles = function getHoverStyles(selector) {
   return "&:hover ".concat(selector, " {\n    background: ", "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N20A, ")"), ";\n\n    &:hover {\n      background: ", "var(--ds-background-neutral-hovered, ".concat(colors.N30A, ")"), ";\n    }\n  }");
@@ -50,5 +50,5 @@ var getHoverStyles = function getHoverStyles(selector) {
 var toolbarButtonWrapper = exports.toolbarButtonWrapper = function toolbarButtonWrapper(_ref) {
   var enabled = _ref.enabled,
     isOpen = _ref.isOpen;
-  return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  .image-border-toolbar-btn {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    padding: 0;\n    & > span {\n      margin: 0;\n    }\n  }\n  .image-border-toolbar-dropdown {\n    padding: 0;\n    & > span {\n      margin: 0;\n    }\n    width: 16px !important;\n    border-top-left-radius: 0 !important;\n    border-bottom-left-radius: 0 !important;\n    margin-left: ", ";\n  }\n\n  ", "\n  ", "\n"])), "var(--ds-space-025, 2px)", !enabled && getHoverStyles('.image-border-toolbar-btn'), !isOpen && !enabled && getHoverStyles('.image-border-toolbar-dropdown'));
+  return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: flex;\n\t.image-border-toolbar-btn {\n\t\tborder-top-right-radius: 0;\n\t\tborder-bottom-right-radius: 0;\n\t\tpadding: 0;\n\t\t& > span {\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t.image-border-toolbar-dropdown {\n\t\tpadding: 0;\n\t\t& > span {\n\t\t\tmargin: 0;\n\t\t}\n\t\twidth: 16px !important;\n\t\tborder-top-left-radius: 0 !important;\n\t\tborder-bottom-left-radius: 0 !important;\n\t\tmargin-left: ", ";\n\t}\n\n\t", "\n\t", "\n"])), "var(--ds-space-025, 2px)", !enabled && getHoverStyles('.image-border-toolbar-btn'), !isOpen && !enabled && getHoverStyles('.image-border-toolbar-dropdown'));
 };

package/dist/cjs/ui/MediaLinkingToolbar.js

@@ -109,60 +109,63 @@ var LinkAddToolbar = exports.LinkAddToolbar = /*#__PURE__*/function (_React$Pure
           key: index
         }, error);
       });
-      return (0, _react2.jsx)("div", {
-        className: "recent-list"
-      }, (0, _react2.jsx)("div", {
-        css: [_link.container, !!activityProvider && _link.containerWithProvider]
-      }, (0, _react2.jsx)("div", {
-        css: _link.inputWrapper
-      }, (0, _react2.jsx)("span", {
-        css: buttonWrapper
-      }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
-        title: formatLinkAddressText,
-        icon: (0, _react2.jsx)(_chevronLeftLarge.default, {
-          label: formatLinkAddressText
-        }),
-        onClick: function onClick() {
-          return _this.handleOnBack({
-            url: value,
-            inputMethod: currentInputMethod
-          });
-        }
-      })), (0, _react2.jsx)(_ui.PanelTextInput, {
-        inputId: "media-link-search-input",
-        testId: "media-link-input",
-        placeholder: getPlaceholder(!!activityProvider),
-        autoFocus: true,
-        onCancel: _this.handleCancel,
-        defaultValue: value,
-        onSubmit: function onSubmit(inputValue) {
-          var validationErrors = _this.getValidationErrors(inputValue, currentInputMethod);
-          _this.setState({
-            validationErrors: validationErrors
-          });
-          if (!validationErrors.length) {
-            _onSubmit();
+      return (
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        (0, _react2.jsx)("div", {
+          className: "recent-list"
+        }, (0, _react2.jsx)("div", {
+          css: [_link.container, !!activityProvider && _link.containerWithProvider]
+        }, (0, _react2.jsx)("div", {
+          css: _link.inputWrapper
+        }, (0, _react2.jsx)("span", {
+          css: buttonWrapper
+        }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
+          title: formatLinkAddressText,
+          icon: (0, _react2.jsx)(_chevronLeftLarge.default, {
+            label: formatLinkAddressText
+          }),
+          onClick: function onClick() {
+            return _this.handleOnBack({
+              url: value,
+              inputMethod: currentInputMethod
+            });
           }
-        },
-        onChange: function onChange(value) {
-          _this.setState({
-            validationErrors: []
-          });
-          _onChange(value);
-        },
-        onKeyDown: onKeyDown
-      }), (0, _react2.jsx)("label", {
-        className: "assistive",
-        htmlFor: "media-link-search-input"
-      }, formatMessage(_messages.linkToolbarMessages.searchInput)), (0, _utils.normalizeUrl)(displayUrl) && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null), (0, _react2.jsx)(_ui.FloatingToolbarButton, {
-        title: formatUnlinkText,
-        icon: (0, _react2.jsx)(_unlink.default, {
-          label: formatUnlinkText
-        }),
-        onClick: _this.handleUnlink
-      }))), !!errorsList.length && (0, _react2.jsx)("section", {
-        css: validationWrapper
-      }, errorsList), renderRecentList()));
+        })), (0, _react2.jsx)(_ui.PanelTextInput, {
+          inputId: "media-link-search-input",
+          testId: "media-link-input",
+          placeholder: getPlaceholder(!!activityProvider),
+          autoFocus: true,
+          onCancel: _this.handleCancel,
+          defaultValue: value,
+          onSubmit: function onSubmit(inputValue) {
+            var validationErrors = _this.getValidationErrors(inputValue, currentInputMethod);
+            _this.setState({
+              validationErrors: validationErrors
+            });
+            if (!validationErrors.length) {
+              _onSubmit();
+            }
+          },
+          onChange: function onChange(value) {
+            _this.setState({
+              validationErrors: []
+            });
+            _onChange(value);
+          },
+          onKeyDown: onKeyDown
+        }), (0, _react2.jsx)("label", {
+          className: "assistive",
+          htmlFor: "media-link-search-input"
+        }, formatMessage(_messages.linkToolbarMessages.searchInput)), (0, _utils.normalizeUrl)(displayUrl) && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null), (0, _react2.jsx)(_ui.FloatingToolbarButton, {
+          title: formatUnlinkText,
+          icon: (0, _react2.jsx)(_unlink.default, {
+            label: formatUnlinkText
+          }),
+          onClick: _this.handleUnlink
+        }))), !!errorsList.length && (0, _react2.jsx)("section", {
+          css: validationWrapper
+        }, errorsList), renderRecentList()))
+      );
     });
     return _this;
   }

package/dist/cjs/ui/PixelEntry/styles.js

@@ -11,7 +11,7 @@ var _templateObject;
 var PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH = 120;
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-var pixelSizingWrapper = exports.pixelSizingWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  grid-template-columns: 1fr 1em 1fr 0;\n  grid-template-rows: auto;\n  grid-template-areas: 'widthinput label heightinput submit';\n  width: ", "px;\n  text-align: center;\n  height: ", ";\n\n  // Atlaskit fieldset does not allow style override\n  & > * {\n    margin-top: 0 !important;\n  }\n"])), PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH, "var(--ds-space-300, 24px)");
+var pixelSizingWrapper = exports.pixelSizingWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: grid;\n\tgrid-template-columns: 1fr 1em 1fr 0;\n\tgrid-template-rows: auto;\n\tgrid-template-areas: 'widthinput label heightinput submit';\n\twidth: ", "px;\n\ttext-align: center;\n\theight: ", ";\n\n\t// Atlaskit fieldset does not allow style override\n\t& > * {\n\t\tmargin-top: 0 !important;\n\t}\n"])), PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH, "var(--ds-space-300, 24px)");
 var pixelEntryForm = exports.pixelEntryForm = (0, _react.css)({
   form: {
     width: '100%'

package/dist/cjs/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -519,7 +519,9 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         })
       }, (0, _react2.jsx)(_resizer.ResizerNext, {
         minWidth: minViewWidth,
-        maxWidth: maxWidth,
+        maxWidth: maxWidth
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        ,
         className: resizerNextClassName,
         snapGap: _mediaSingle.MEDIA_SINGLE_SNAP_GAP,
         enable: enable,

package/dist/cjs/ui/ResizableMediaSingle/styled.js

@@ -11,5 +11,5 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _templateObject;
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 var wrapperStyle = exports.wrapperStyle = function wrapperStyle(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & > div {\n    ", ";\n    position: relative;\n    clear: both;\n  }\n"])), (0, _ui.MediaSingleDimensionHelper)(props));
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t& > div {\n\t\t", ";\n\t\tposition: relative;\n\t\tclear: both;\n\t}\n"])), (0, _ui.MediaSingleDimensionHelper)(props));
 };

package/dist/es2019/nodeviews/mediaSingle.js

@@ -360,7 +360,9 @@ export default class MediaSingleNode extends Component {
     const isCurrentNodeDrafting = (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.isDrafting) && (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.targetNodeId) === (node === null || node === void 0 ? void 0 : (_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.attrs.id);
     const MediaChildren = jsx("figure", {
       ref: this.mediaSingleWrapperRef,
-      css: figureWrapperStyles,
+      css: figureWrapperStyles
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: MediaSingleNodeSelector,
       onClick: this.onMediaSingleClicked
     }, commentsOnMedia && jsx(CommentBadge, {

package/dist/es2019/nodeviews/styles.js

@@ -21,11 +21,14 @@ export const MediaCardWrapper = ({
 }) => {
   const calculatedBorderWidth = selected && borderWidth > 0 ? borderWidth + 1 : borderWidth;
   return jsx("div", {
-    "data-testid": "media-card-wrapper",
+    "data-testid": "media-card-wrapper"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: "media-card-wrapper",
     style: {
       borderColor: `var(--custom-palette-color)`,
       borderWidth: `${calculatedBorderWidth}px`,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       borderStyle: 'solid',
       borderRadius: `${calculatedBorderWidth * 2}px`
     }

package/dist/es2019/toolbar/linking-toolbar-appearance.js

@@ -66,7 +66,9 @@ export const LinkToolbarAppearance = ({
       title: linkTitle,
       icon: jsx(OpenIcon, {
         label: linkTitle
-      }),
+      })
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: "hyperlink-open-link"
     }), jsx(Separator, null));
   } else {

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

@@ -7,11 +7,11 @@ import { CAPTION_PLACEHOLDER_ID } from '@atlaskit/editor-common/media-single';
 import { N200 } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 const placeholder = css`
-  color: ${`var(--ds-text-subtlest, ${N200})`};
-  width: 100%;
-  text-align: center;
-  margin-top: ${"var(--ds-space-100, 8px)"} !important;
-  display: block;
+	color: ${`var(--ds-text-subtlest, ${N200})`};
+	width: 100%;
+	text-align: center;
+	margin-top: ${"var(--ds-space-100, 8px)"} !important;
+	display: block;
 `;
 export default /*#__PURE__*/React.forwardRef(({
   onClick

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

@@ -50,7 +50,9 @@ const ImageBorder = ({
     value: {
       name: 'color'
     },
-    elemAfter: jsx("div", {
+    elemAfter:
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    jsx("div", {
       className: DropdownMenuSharedCssClassName.SUBMENU
     }, jsx("div", {
       css: contextualMenuColorIcon(color && hexToEditorBorderPaletteColor(color))
@@ -76,7 +78,9 @@ const ImageBorder = ({
     value: {
       name: 'size'
     },
-    elemAfter: jsx("div", {
+    elemAfter:
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    jsx("div", {
       className: DropdownMenuSharedCssClassName.SUBMENU
     }, jsx("div", {
       css: contextualMenuArrow
@@ -124,7 +128,9 @@ const ImageBorder = ({
       enabled,
       isOpen
     })
-  }, jsx(ToolbarButton, {
+  }, jsx(ToolbarButton
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , {
     className: "image-border-toolbar-btn",
     selected: enabled,
     onClick: toggleBorder,
@@ -136,7 +142,9 @@ const ImageBorder = ({
     title: enabled ? formatMessage(messages.removeBorder) : formatMessage(messages.addBorder)
   }), jsx("div", {
     ref: popupTarget
-  }, jsx(ToolbarButton, {
+  }, jsx(ToolbarButton
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , {
     className: "image-border-toolbar-dropdown",
     selected: enabled || isOpen,
     "aria-label": formatMessage(messages.borderOptions),

package/dist/es2019/ui/ImageBorder/styles.js

@@ -17,80 +17,80 @@ export const menuItemDimensions = {
 // Recommendation: Replace directly with 4 due to itemSpacing being used in calculations
 export const itemSpacing = gridSize() / 2;
 export const contextualMenuArrow = css`
-  display: flex;
-  &::after {
-    content: '›';
-    margin-left: ${"var(--ds-space-050, 4px)"};
-    line-height: 20px;
-    color: ${`var(--ds-icon, ${N90})`};
-  }
+	display: flex;
+	&::after {
+		content: '›';
+		margin-left: ${"var(--ds-space-050, 4px)"};
+		line-height: 20px;
+		color: ${`var(--ds-icon, ${N90})`};
+	}
 `;
 export const contextualMenuColorIcon = color => css`
-  ${contextualMenuArrow}
-  &::before {
-    content: '';
-    display: block;
-    border: 1px solid ${DEFAULT_BORDER_COLOR};
-    border-radius: ${"var(--ds-border-radius-100, 3px)"};
-    width: 20px;
-    height: 20px;
-    ${color && `background: ${color}`}
-  }
+	${contextualMenuArrow}
+	&::before {
+		content: '';
+		display: block;
+		border: 1px solid ${DEFAULT_BORDER_COLOR};
+		border-radius: ${"var(--ds-border-radius-100, 3px)"};
+		width: 20px;
+		height: 20px;
+		${color && `background: ${color}`}
+	}
 `;
 export const contextualSubMenu = index => css`
-  border-radius: ${"var(--ds-border-radius-100, 3px)"};
-  background: ${"var(--ds-surface-overlay, white)"};
-  box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
-  display: flex;
-  position: absolute;
-  top: ${index * (menuItemDimensions.height + itemSpacing * 2)}px;
-  left: ${menuItemDimensions.width}px;
-  padding: ${"var(--ds-space-100, 8px)"};
+	border-radius: ${"var(--ds-border-radius-100, 3px)"};
+	background: ${"var(--ds-surface-overlay, white)"};
+	box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
+	display: flex;
+	position: absolute;
+	top: ${index * (menuItemDimensions.height + itemSpacing * 2)}px;
+	left: ${menuItemDimensions.width}px;
+	padding: ${"var(--ds-space-100, 8px)"};
 
-  > div {
-    padding: 0;
-  }
+	> div {
+		padding: 0;
+	}
 `;
 export const buttonStyle = selected => css`
-  height: 26px;
-  width: 26px;
-  padding: 0;
-  border-radius: 4px;
-  background-color: ${selected ? `var(--ds-text, ${N800})` : `var(--ds-background-neutral, ${N20A})`};
-  border: 1px solid ${DEFAULT_BORDER_COLOR};
-  cursor: pointer;
-  display: block;
+	height: 26px;
+	width: 26px;
+	padding: 0;
+	border-radius: 4px;
+	background-color: ${selected ? `var(--ds-text, ${N800})` : `var(--ds-background-neutral, ${N20A})`};
+	border: 1px solid ${DEFAULT_BORDER_COLOR};
+	cursor: pointer;
+	display: block;
 `;
 
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 export const buttonWrapperStyle = css`
-  border: 1px solid transparent;
-  margin: ${"var(--ds-space-025, 2px)"};
-  font-size: 0;
-  display: flex;
-  align-items: center;
-  padding: ${"var(--ds-space-025, 2px)"};
-  border-radius: 6px;
-  &:focus-within,
-  &:focus,
-  &:hover {
-    border-color: ${N50} !important;
-  }
+	border: 1px solid transparent;
+	margin: ${"var(--ds-space-025, 2px)"};
+	font-size: 0;
+	display: flex;
+	align-items: center;
+	padding: ${"var(--ds-space-025, 2px)"};
+	border-radius: 6px;
+	&:focus-within,
+	&:focus,
+	&:hover {
+		border-color: ${N50} !important;
+	}
 `;
 export const line = (size, selected) => css`
-  position: relative;
-  &:before {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 12px;
-    height: ${size}px;
-    background-color: ${selected ? `var(--ds-icon-inverse, ${N0})` : "var(--ds-icon, #44546F)"};
-    border-radius: 90px;
-    transform: translate(-50%, -50%) rotate(135deg);
-  }
+	position: relative;
+	&:before {
+		content: '';
+		display: block;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		width: 12px;
+		height: ${size}px;
+		background-color: ${selected ? `var(--ds-icon-inverse, ${N0})` : "var(--ds-icon, #44546F)"};
+		border-radius: 90px;
+		transform: translate(-50%, -50%) rotate(135deg);
+	}
 `;
 const getHoverStyles = selector => `&:hover ${selector} {
     background: ${`var(--ds-background-neutral-subtle-hovered, ${colors.N20A})`};
@@ -103,26 +103,26 @@ export const toolbarButtonWrapper = ({
   enabled,
   isOpen
 }) => css`
-  display: flex;
-  .image-border-toolbar-btn {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    padding: 0;
-    & > span {
-      margin: 0;
-    }
-  }
-  .image-border-toolbar-dropdown {
-    padding: 0;
-    & > span {
-      margin: 0;
-    }
-    width: 16px !important;
-    border-top-left-radius: 0 !important;
-    border-bottom-left-radius: 0 !important;
-    margin-left: ${"var(--ds-space-025, 2px)"};
-  }
+	display: flex;
+	.image-border-toolbar-btn {
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+		padding: 0;
+		& > span {
+			margin: 0;
+		}
+	}
+	.image-border-toolbar-dropdown {
+		padding: 0;
+		& > span {
+			margin: 0;
+		}
+		width: 16px !important;
+		border-top-left-radius: 0 !important;
+		border-bottom-left-radius: 0 !important;
+		margin-left: ${"var(--ds-space-025, 2px)"};
+	}
 
-  ${!enabled && getHoverStyles('.image-border-toolbar-btn')}
-  ${!isOpen && !enabled && getHoverStyles('.image-border-toolbar-dropdown')}
+	${!enabled && getHoverStyles('.image-border-toolbar-btn')}
+	${!isOpen && !enabled && getHoverStyles('.image-border-toolbar-dropdown')}
 `;