@atlaskit/editor-plugin-media 1.20.4 → 1.20.6

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')}
 `;

package/dist/es2019/ui/MediaLinkingToolbar.js

@@ -99,58 +99,61 @@ export class LinkAddToolbar extends React.PureComponent {
           key: index
         }, error);
       });
-      return jsx("div", {
-        className: "recent-list"
-      }, jsx("div", {
-        css: [container, !!activityProvider && containerWithProvider]
-      }, jsx("div", {
-        css: inputWrapper
-      }, jsx("span", {
-        css: buttonWrapper
-      }, jsx(Button, {
-        title: formatLinkAddressText,
-        icon: jsx(ChevronLeftLargeIcon, {
-          label: formatLinkAddressText
-        }),
-        onClick: () => this.handleOnBack({
-          url: value,
-          inputMethod: currentInputMethod
-        })
-      })), jsx(PanelTextInput, {
-        inputId: "media-link-search-input",
-        testId: "media-link-input",
-        placeholder: getPlaceholder(!!activityProvider),
-        autoFocus: true,
-        onCancel: this.handleCancel,
-        defaultValue: value,
-        onSubmit: inputValue => {
-          const validationErrors = this.getValidationErrors(inputValue, currentInputMethod);
-          this.setState({
-            validationErrors
-          });
-          if (!validationErrors.length) {
-            onSubmit();
-          }
-        },
-        onChange: value => {
-          this.setState({
-            validationErrors: []
-          });
-          onChange(value);
-        },
-        onKeyDown: onKeyDown
-      }), jsx("label", {
-        className: "assistive",
-        htmlFor: "media-link-search-input"
-      }, formatMessage(linkToolbarMessages.searchInput)), normalizeUrl(displayUrl) && jsx(Fragment, null, jsx(Separator, null), jsx(Button, {
-        title: formatUnlinkText,
-        icon: jsx(EditorUnlinkIcon, {
-          label: formatUnlinkText
-        }),
-        onClick: this.handleUnlink
-      }))), !!errorsList.length && jsx("section", {
-        css: validationWrapper
-      }, errorsList), renderRecentList()));
+      return (
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        jsx("div", {
+          className: "recent-list"
+        }, jsx("div", {
+          css: [container, !!activityProvider && containerWithProvider]
+        }, jsx("div", {
+          css: inputWrapper
+        }, jsx("span", {
+          css: buttonWrapper
+        }, jsx(Button, {
+          title: formatLinkAddressText,
+          icon: jsx(ChevronLeftLargeIcon, {
+            label: formatLinkAddressText
+          }),
+          onClick: () => this.handleOnBack({
+            url: value,
+            inputMethod: currentInputMethod
+          })
+        })), jsx(PanelTextInput, {
+          inputId: "media-link-search-input",
+          testId: "media-link-input",
+          placeholder: getPlaceholder(!!activityProvider),
+          autoFocus: true,
+          onCancel: this.handleCancel,
+          defaultValue: value,
+          onSubmit: inputValue => {
+            const validationErrors = this.getValidationErrors(inputValue, currentInputMethod);
+            this.setState({
+              validationErrors
+            });
+            if (!validationErrors.length) {
+              onSubmit();
+            }
+          },
+          onChange: value => {
+            this.setState({
+              validationErrors: []
+            });
+            onChange(value);
+          },
+          onKeyDown: onKeyDown
+        }), jsx("label", {
+          className: "assistive",
+          htmlFor: "media-link-search-input"
+        }, formatMessage(linkToolbarMessages.searchInput)), normalizeUrl(displayUrl) && jsx(Fragment, null, jsx(Separator, null), jsx(Button, {
+          title: formatUnlinkText,
+          icon: jsx(EditorUnlinkIcon, {
+            label: formatUnlinkText
+          }),
+          onClick: this.handleUnlink
+        }))), !!errorsList.length && jsx("section", {
+          css: validationWrapper
+        }, errorsList), renderRecentList()))
+      );
     });
   }
   getValidationErrors(value, inputMethod) {

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

@@ -3,18 +3,18 @@ const PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH = 120;
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 export const pixelSizingWrapper = css`
-  display: grid;
-  grid-template-columns: 1fr 1em 1fr 0;
-  grid-template-rows: auto;
-  grid-template-areas: 'widthinput label heightinput submit';
-  width: ${PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH}px;
-  text-align: center;
-  height: ${"var(--ds-space-300, 24px)"};
+	display: grid;
+	grid-template-columns: 1fr 1em 1fr 0;
+	grid-template-rows: auto;
+	grid-template-areas: 'widthinput label heightinput submit';
+	width: ${PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH}px;
+	text-align: center;
+	height: ${"var(--ds-space-300, 24px)"};
 
-  // Atlaskit fieldset does not allow style override
-  & > * {
-    margin-top: 0 !important;
-  }
+	// Atlaskit fieldset does not allow style override
+	& > * {
+		margin-top: 0 !important;
+	}
 `;
 export const pixelEntryForm = css({
   form: {

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

@@ -434,7 +434,9 @@ class ResizableMediaSingleNext extends React.Component {
       })
     }, jsx(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: MEDIA_SINGLE_SNAP_GAP,
       enable: enable,

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

@@ -2,9 +2,9 @@ import { css } from '@emotion/react';
 import { MediaSingleDimensionHelper } from '@atlaskit/editor-common/ui';
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 export const wrapperStyle = props => css`
-  & > div {
-    ${MediaSingleDimensionHelper(props)};
-    position: relative;
-    clear: both;
-  }
+	& > div {
+		${MediaSingleDimensionHelper(props)};
+		position: relative;
+		clear: both;
+	}
 `;

package/dist/es2019/utils/media-single.js

@@ -146,7 +146,7 @@ export const insertMediaSingleNode = (view, mediaState, inputMethod, collection,
     }
     dispatch(tr);
   }
-  if (getBooleanFF('platform.editor.media.autoselect-inserted-image_oumto') && onNodeInserted) {
+  if (onNodeInserted) {
     onNodeInserted(mediaState.id, view.state.selection.to);
   }
   return true;

package/dist/esm/nodeviews/mediaSingle.js

@@ -437,7 +437,9 @@ var MediaSingleNode = /*#__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 = 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/esm/nodeviews/styles.js

@@ -21,11 +21,14 @@ export var MediaCardWrapper = function MediaCardWrapper(_ref) {
     onContextMenu = _ref.onContextMenu;
   var 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: "".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/esm/pm-plugins/main.js

@@ -274,9 +274,7 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
           _this.uploadInProgressSubscriptionsNotified = false;
         }
       });
-      if (getBooleanFF('platform.editor.media.autoselect-inserted-image_oumto')) {
-        _this.selectLastAddedMediaNode();
-      }
+      _this.selectLastAddedMediaNode();
     });
     _defineProperty(this, "addPendingTask", function (task) {
       _this.taskManager.addPendingTask(task);

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

@@ -69,7 +69,9 @@ export var LinkToolbarAppearance = function LinkToolbarAppearance(_ref) {
       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/esm/ui/CaptionPlaceholder/index.js

@@ -8,7 +8,7 @@ import { captionMessages as messages } from '@atlaskit/editor-common/media';
 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
-var placeholder = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  width: 100%;\n  text-align: center;\n  margin-top: ", " !important;\n  display: block;\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-space-100, 8px)");
+var placeholder = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tcolor: ", ";\n\twidth: 100%;\n\ttext-align: center;\n\tmargin-top: ", " !important;\n\tdisplay: block;\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-space-100, 8px)");
 export default /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var onClick = _ref.onClick;
   return jsx("span", {

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

@@ -57,7 +57,9 @@ var ImageBorder = function ImageBorder(_ref) {
     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))
@@ -83,7 +85,9 @@ var ImageBorder = function ImageBorder(_ref) {
     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
@@ -132,7 +136,9 @@ var ImageBorder = function ImageBorder(_ref) {
       enabled: enabled,
       isOpen: 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,
@@ -144,7 +150,9 @@ var ImageBorder = function ImageBorder(_ref) {
     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/esm/ui/ImageBorder/styles.js

@@ -18,21 +18,21 @@ export var menuItemDimensions = {
 // TODO: Migrate away from gridSize
 // Recommendation: Replace directly with 4 due to itemSpacing being used in calculations
 export var itemSpacing = gridSize() / 2;
-export var contextualMenuArrow = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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(N90, ")"));
+export var contextualMenuArrow = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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(N90, ")"));
 export var contextualMenuColorIcon = function contextualMenuColorIcon(color) {
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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, DEFAULT_BORDER_COLOR, "var(--ds-border-radius-100, 3px)", color && "background: ".concat(color));
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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, DEFAULT_BORDER_COLOR, "var(--ds-border-radius-100, 3px)", color && "background: ".concat(color));
 };
 export var contextualSubMenu = function contextualSubMenu(index) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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(N60A, ", 0 0 1px ").concat(N60A), ")"), index * (menuItemDimensions.height + itemSpacing * 2), menuItemDimensions.width, "var(--ds-space-100, 8px)");
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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(N60A, ", 0 0 1px ").concat(N60A), ")"), index * (menuItemDimensions.height + itemSpacing * 2), menuItemDimensions.width, "var(--ds-space-100, 8px)");
 };
 export var buttonStyle = function buttonStyle(selected) {
-  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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(N800, ")") : "var(--ds-background-neutral, ".concat(N20A, ")"), DEFAULT_BORDER_COLOR);
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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(N800, ")") : "var(--ds-background-neutral, ".concat(N20A, ")"), DEFAULT_BORDER_COLOR);
 };
 
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-export var buttonWrapperStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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)", N50);
+export var buttonWrapperStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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)", N50);
 export var line = function line(size, selected) {
-  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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(N0, ")") : "var(--ds-icon, #44546F)");
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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(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  }");
@@ -40,5 +40,5 @@ var getHoverStyles = function getHoverStyles(selector) {
 export var toolbarButtonWrapper = function toolbarButtonWrapper(_ref) {
   var enabled = _ref.enabled,
     isOpen = _ref.isOpen;
-  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\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 css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\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'));
 };