@atlaskit/editor-common 78.30.0 → 78.30.1

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

@@ -7,34 +7,36 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "78.30.0";
+const packageVersion = "78.30.1";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {
   constructor(...args) {
     super(...args);
-    _defineProperty(this, "wrapperStyles", css`
-    ${this.props.shouldFitContainer ? 'display: block; flex: 1 1 auto;' : 'display: inline-flex;'}
-    transition-duration: 0.2s;
-    transition: box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);
-  `);
-    _defineProperty(this, "triggerStyles", css`
-    transition-duration: 0.2s;
-    transition: box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);
-    ${this.props.shouldFitContainer ? 'display: block; box-sizing: border-box;' : 'display: inline-flex;'}
-  `);
+    _defineProperty(this, "wrapperStyles", css({
+      display: this.props.shouldFitContainer ? 'block' : 'inline-flex',
+      flex: this.props.shouldFitContainer ? '1 1 auto' : undefined,
+      transitionDuration: '0.2s',
+      transition: 'box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)'
+    }));
+    _defineProperty(this, "triggerStyles", css({
+      transitionDuration: '0.2s',
+      transition: 'box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
+      display: this.props.shouldFitContainer ? 'block' : 'inline-flex',
+      boxSizing: this.props.shouldFitContainer ? 'border-box' : undefined
+    }));
     /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
     _defineProperty(this, "menuWrapper", () => {
-      return css`
-      color: ${`var(--ds-text, ${N900})`};
-      background-color: ${`var(--ds-surface-overlay, ${N0})`};
-      border-radius: ${"var(--ds-border-radius, 3px)"};
-      box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px calc(-1 * 2px) ${N50A}, 0 0 1px ${N60A}`})`};
-      box-sizing: border-box;
-      overflow: auto;
-      padding: ${"var(--ds-space-050, 4px)"} 0;
-      max-height: 90vh;
-    `;
+      return css({
+        color: `var(--ds-text, ${N900})`,
+        backgroundColor: `var(--ds-surface-overlay, ${N0})`,
+        borderRadius: "var(--ds-border-radius, 3px)",
+        boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px calc(-1 * 2px) ${N50A}, 0 0 1px ${N60A}`})`,
+        boxSizing: 'border-box',
+        overflow: 'auto',
+        padding: `${"var(--ds-space-050, 4px)"} 0`,
+        maxHeight: '90vh'
+      });
     });
     /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
     _defineProperty(this, "componentDidMount", () => {

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

@@ -44,31 +44,29 @@ export const ExpandIconWrapper = ({
     css: () => expanded ? [expandIconWrapperStyle(), expandIconWrapperExpandedStyle] : expandIconWrapperStyle()
   }, children);
 };
-const expandIconWrapperStyle = () => css`
-  cursor: pointer;
-  display: flex;
-  color: ${`var(--ds-icon, ${N90})`};
-  border-radius: ${"var(--ds-border-radius-100, 4px)"};
-  width: 24px;
-  height: 24px;
-
-  &:hover {
-    background: ${`var(--ds-background-neutral-subtle-hovered, ${N30A})`};
-  }
-
-  svg {
-    transition: transform 0.2s ${akEditorSwoopCubicBezier};
+const expandIconWrapperStyle = () => css({
+  cursor: 'pointer',
+  display: 'flex',
+  color: `var(--ds-icon, ${N90})`,
+  borderRadius: "var(--ds-border-radius-100, 4px)",
+  width: '24px',
+  height: '24px',
+  '&:hover': {
+    background: `var(--ds-background-neutral-subtle-hovered, ${N30A})`
+  },
+  svg: {
+    transition: `transform 0.2s ${akEditorSwoopCubicBezier}`
   }
-`;
-const expandIconWrapperExpandedStyle = css`
-  svg {
-    transform: rotate(90deg);
+});
+const expandIconWrapperExpandedStyle = css({
+  svg: {
+    transform: 'rotate(90deg)'
   }
-`;
-export const expandLayoutWrapperStyle = css`
-  width: ${"var(--ds-space-300, 24px)"};
-  height: ${"var(--ds-space-300, 24px)"};
-`;
+});
+export const expandLayoutWrapperStyle = css({
+  width: "var(--ds-space-300, 24px)",
+  height: "var(--ds-space-300, 24px)"
+});
 export const ExpandLayoutWrapperWithRef = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     children,
@@ -91,34 +89,31 @@ const containerStyles = styleProps => {
   // and is the root level expand.
   const marginHorizontal = styleProps['data-node-type'] === 'expand' ? `-${akLayoutGutterOffset}px` : 0;
   const margin = `${marginTop} ${marginHorizontal} ${marginBottom}`;
-  return () => css`
-    border-width: 1px;
-    border-style: solid;
-    border-color: ${focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR : EXPAND_COLLAPSED_BORDER_COLOR};
-    border-radius: ${BORDER_RADIUS};
-    min-height: 25px;
-    background: ${!expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND};
-    margin: ${margin};
-
-    transition: background 0.3s ${akEditorSwoopCubicBezier},
-      border-color 0.3s ${akEditorSwoopCubicBezier};
-    padding: ${"var(--ds-space-100, 8px)"};
-
-    &:hover {
+  return () => css({
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR : EXPAND_COLLAPSED_BORDER_COLOR,
+    borderRadius: BORDER_RADIUS,
+    minHeight: '25px',
+    background: !expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND,
+    margin: margin,
+    transition: `background 0.3s ${akEditorSwoopCubicBezier}, border-color 0.3s ${akEditorSwoopCubicBezier}`,
+    padding: "var(--ds-space-100, 8px)",
+    '&:hover': {
       // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.
       // This is because the default state already uses the same token and, as such, the hover style won't change anything.
       // https://product-fabric.atlassian.net/browse/DSP-4152
-      border: 1px solid ${`var(--ds-border, ${N50A})`};
-      background: ${EXPAND_SELECTED_BACKGROUND};
-    }
-
-    td > :not(style):first-child,
-    td > style:first-child + * {
-      margin-top: 0;
+      border: `1px solid ${`var(--ds-border, ${N50A})`}`,
+      background: EXPAND_SELECTED_BACKGROUND
+    },
+    'td > :not(style):first-child, td > style:first-child + *': {
+      marginTop: 0
     }
-  `;
+  });
 };
-const contentStyles = styleProps => () => css`
+const contentStyles = styleProps => () =>
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+css`
     padding-top: ${styleProps.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)"};
     padding-right: ${"var(--ds-space-100, 8px)"};
     padding-left: ${"var(--ds-space-300, 24px)"};
@@ -146,40 +141,38 @@ const contentStyles = styleProps => () => css`
         }
       ` : ''}
   `;
-const titleInputStyles = () => css`
-  outline: none;
-  border: none;
-  font-size: ${relativeFontSizeToBase16(fontSize())};
-  line-height: ${akEditorLineHeight};
-  font-weight: normal;
-  color: ${`var(--ds-text-subtlest, ${N200A})`};
-  background: transparent;
-  display: flex;
-  flex: 1;
-  padding: 0 0 0 ${"var(--ds-space-050, 4px)"};
-  width: 100%;
-
-  &::placeholder {
-    opacity: 1;
-    color: ${`var(--ds-text-subtlest, ${N200})`};
+const titleInputStyles = () => css({
+  outline: 'none',
+  border: 'none',
+  fontSize: relativeFontSizeToBase16(fontSize()),
+  lineHeight: akEditorLineHeight,
+  fontWeight: 'normal',
+  color: `var(--ds-text-subtlest, ${N200A})`,
+  background: 'transparent',
+  display: 'flex',
+  flex: 1,
+  padding: `0 0 0 ${"var(--ds-space-050, 4px)"}`,
+  width: '100%',
+  '&::placeholder': {
+    opacity: 1,
+    color: `var(--ds-text-subtlest, ${N200})`
   }
-`;
-const titleContainerStyles = () => css`
-  padding: 0;
-  display: flex;
-  align-items: flex-start;
-  background: none;
-  border: none;
-  font-size: ${relativeFontSizeToBase16(fontSize())};
-  width: 100%;
-  color: ${`var(--ds-text-subtle, ${N300A})`};
-  overflow: hidden;
-  cursor: pointer;
-
-  &:focus {
-    outline: 0;
+});
+const titleContainerStyles = () => css({
+  padding: 0,
+  display: 'flex',
+  alignItems: 'flex-start',
+  background: 'none',
+  border: 'none',
+  fontSize: relativeFontSizeToBase16(fontSize()),
+  width: '100%',
+  color: `var(--ds-text-subtle, ${N300A})`,
+  overflow: 'hidden',
+  cursor: 'pointer',
+  '&:focus': {
+    outline: 0
   }
-`;
+});
 export const sharedExpandStyles = {
   titleInputStyles,
   titleContainerStyles,

package/dist/es2019/ui/FloatingToolbar/Separator.js

@@ -1,13 +1,13 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
-const separator = css`
-  background: ${`var(--ds-border, ${N30})`};
-  width: 1px;
-  height: 20px;
-  margin: 0 ${"var(--ds-space-050, 4px)"};
-  align-self: center;
-`;
+const separator = css({
+  background: `var(--ds-border, ${N30})`,
+  width: '1px',
+  height: '20px',
+  margin: `0 ${"var(--ds-space-050, 4px)"}`,
+  alignSelf: 'center'
+});
 export default (() => jsx("div", {
   css: separator,
   className: "separator"

package/dist/es2019/ui/FloatingToolbar/SmallerEditIcon.js

@@ -1,9 +1,9 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import EditIcon from '@atlaskit/icon/glyph/edit';
-const editIconStyles = css`
-  width: 20px;
-`;
+const editIconStyles = css({
+  width: '20px'
+});
 
 /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
 export const SmallerEditIcon = () => {

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

@@ -1,12 +1,12 @@
 import { css } from '@emotion/react';
-export const mediaLinkStyle = css`
-  position: absolute;
-  background: transparent;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  cursor: pointer;
-  width: 100%;
-  height: 100%;
-`;
+export const mediaLinkStyle = css({
+  position: 'absolute',
+  background: 'transparent',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  cursor: 'pointer',
+  width: '100%',
+  height: '100%'
+});

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

@@ -5,23 +5,23 @@ import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { G400, N200, R400 } from '@atlaskit/theme/colors';
 import { h200 } from '@atlaskit/theme/typography';
-const errorColor = css`
-  color: ${`var(--ds-text-danger, ${R400})`};
-`;
-const validColor = css`
-  color: ${`var(--ds-text-success, ${G400})`};
-`;
-const messageStyle = () => css`
-  ${h200()} font-weight: normal;
-  color: ${`var(--ds-text-subtlest, ${N200})`};
-  margin-top: ${"var(--ds-space-050, 4px)"};
-  display: flex;
-  justify-content: baseline;
-`;
-const iconWrapperStyle = css`
-  display: flex;
-  margin-right: ${"var(--ds-space-050, 4px)"};
-`;
+const errorColor = css({
+  color: `var(--ds-text-danger, ${R400})`
+});
+const validColor = css({
+  color: `var(--ds-text-success, ${G400})`
+});
+const messageStyle = () => css(h200(), {
+  fontWeight: 'normal',
+  color: `var(--ds-text-subtlest, ${N200})`,
+  marginTop: "var(--ds-space-050, 4px)",
+  display: 'flex',
+  justifyContent: 'baseline'
+});
+const iconWrapperStyle = css({
+  display: 'flex',
+  marginRight: "var(--ds-space-050, 4px)"
+});
 export const HelperMessage = ({
   children
 }) => jsx("div", {

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

@@ -2,37 +2,33 @@ import { css } from '@emotion/react';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { B100, N100, N30, N400 } from '@atlaskit/theme/colors';
 // Normal .className gets overridden by input[type=text] hence this hack to produce input.className
-export const panelTextInput = css`
-  input& {
-    background: transparent;
-    border: 2px solid ${`var(--ds-border, ${N30})`};
-    border-radius: 0;
-    box-sizing: content-box;
-    color: ${`var(--ds-text-subtle, ${N400})`};
-    flex-grow: 1;
-    font-size: ${relativeFontSizeToBase16(13)};
-    line-height: 20px;
-    padding: ${"var(--ds-space-075, 6px)"} ${"var(--ds-space-400, 32px)"}
-      ${"var(--ds-space-075, 6px)"} ${"var(--ds-space-100, 8px)"};
-    min-width: 145px;
-
+export const panelTextInput = css({
+  'input&': {
+    background: 'transparent',
+    border: `2px solid ${`var(--ds-border, ${N30})`}`,
+    borderRadius: 0,
+    boxSizing: 'content-box',
+    color: `var(--ds-text-subtle, ${N400})`,
+    flexGrow: 1,
+    fontSize: relativeFontSizeToBase16(13),
+    lineHeight: '20px',
+    padding: `${"var(--ds-space-075, 6px)"} ${"var(--ds-space-400, 32px)"} ${"var(--ds-space-075, 6px)"} ${"var(--ds-space-100, 8px)"}`,
+    minWidth: '145px',
     /* Hides IE10+ built-in [x] clear input button */
-    &::-ms-clear {
-      display: none;
-    }
-
-    &:focus {
-      outline: none;
-      border-color: ${`var(--ds-border-focused, ${B100})`};
-    }
-
-    &::placeholder {
-      color: ${`var(--ds-text-subtlest, ${N100})`};
+    '&::-ms-clear': {
+      display: 'none'
+    },
+    '&:focus': {
+      outline: 'none',
+      borderColor: `var(--ds-border-focused, ${B100})`
+    },
+    '&::placeholder': {
+      color: `var(--ds-text-subtlest, ${N100})`
     }
   }
-`;
-export const panelTextInputWithCustomWidth = width => css`
-  input& {
-    width: ${width}px;
+});
+export const panelTextInputWithCustomWidth = width => css({
+  'input&': {
+    width: `${width}px`
   }
-`;
+});

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

@@ -11,23 +11,23 @@ import { ACTION_SUBJECT_ID } from '../../analytics';
 import { unsupportedContentMessages } from '../../messages/unsupportedContent';
 import { trackUnsupportedContentTooltipDisplayedFor } from '../../utils/track-unsupported-content';
 import { getUnsupportedContent } from '../unsupported-content-helper';
-const blockNodeStyle = css`
-  background: ${`var(--ds-background-disabled, ${N30})`};
-  border: 1px dashed ${`var(--ds-border-disabled, ${N50})`};
-  border-radius: ${borderRadius()}px;
-  box-sizing: border-box;
-  cursor: default;
-  display: flex;
-  font-size: ${relativeFontSizeToBase16(fontSize())};
-  margin: ${"var(--ds-space-100, 8px)"} 0;
-  min-height: 24px;
-  padding: ${"var(--ds-space-150, 12px)"};
-  text-align: center;
-  vertical-align: text-bottom;
-  min-width: 120px;
-  align-items: center;
-  justify-content: center;
-`;
+const blockNodeStyle = css({
+  background: `var(--ds-background-disabled, ${N30})`,
+  border: `1px dashed ${`var(--ds-border-disabled, ${N50})`}`,
+  borderRadius: `${borderRadius()}px`,
+  boxSizing: 'border-box',
+  cursor: 'default',
+  display: 'flex',
+  fontSize: relativeFontSizeToBase16(fontSize()),
+  margin: `${"var(--ds-space-100, 8px)"} 0`,
+  minHeight: '24px',
+  padding: "var(--ds-space-150, 12px)",
+  textAlign: 'center',
+  verticalAlign: 'text-bottom',
+  minWidth: '120px',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
 const UnsupportedBlockNode = ({
   node,
   intl,

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

@@ -3,6 +3,10 @@ import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import rafSchedule from 'raf-schd';
 import { WidthObserver } from '@atlaskit/width-detector';
+const styles = css({
+  position: 'relative',
+  width: '100%'
+});
 const SCROLLBAR_WIDTH = 30;
 export function getBreakpoint(width = 0) {
   const MAX_S = 1266;
@@ -42,10 +46,7 @@ export const WidthProvider = ({
   });
   const skipWidthDetection = shouldCheckExistingValue && existingContextValue.width > 0;
   return jsx("div", {
-    css: css`
-        position: relative;
-        width: 100%;
-      `,
+    css: styles,
     className: className
   }, !skipWidthDetection && jsx(Fragment, null, jsx(WidthObserver, {
     setWidth: updateWidth,

package/dist/es2019/ui-color/ColorPalette/styles.js

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-export const colorPaletteWrapper = css`
-  padding: 0 ${"var(--ds-space-100, 8px)"};
+export const colorPaletteWrapper = css({
+  padding: `0 ${"var(--ds-space-100, 8px)"}`,
   /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */
-  display: flex;
-`;
+  display: 'flex'
+});

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

@@ -16,21 +16,22 @@ import DropList from '../../ui/DropList';
 import Popup from '../../ui/Popup';
 import { ArrowKeyNavigationProvider } from '../ArrowKeyNavigationProvider';
 import { ArrowKeyNavigationType } from '../ArrowKeyNavigationProvider/types';
-const wrapper = css`
+const wrapper = css({
   /* tooltip in ToolbarButton is display:block */
-  & > div > div {
-    display: flex;
+  '& > div > div': {
+    display: 'flex'
   }
-`;
-const focusedMenuItemStyle = css`
-  box-shadow: inset 0px 0px 0px 2px ${`var(--ds-border-focused, ${B100})`};
-  outline: none;
-`;
+});
+const focusedMenuItemStyle = css({
+  boxShadow: `inset 0px 0px 0px 2px ${`var(--ds-border-focused, ${B100})`}`,
+  outline: 'none'
+});
 const buttonStyles = (isActive, submenuActive) => {
   if (isActive) {
     /**
      * Hack for item to imitate old dropdown-menu selected styles
      */
+    // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
     return css`
       > span,
       > span:hover,
@@ -47,6 +48,7 @@ const buttonStyles = (isActive, submenuActive) => {
       }
     `;
   } else {
+    // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
     return css`
       > span:hover[aria-disabled='false'] {
         color: ${`var(--ds-text, ${N900})`};

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

@@ -15,11 +15,11 @@ export const KeyDownHandlerContext = /*#__PURE__*/React.createContext({
   handleArrowRight: () => {},
   handleTab: () => {}
 });
-const centeredToolbarContainer = css`
-  display: flex;
-  width: 100%;
-  align-items: center;
-`;
+const centeredToolbarContainer = css({
+  display: 'flex',
+  width: '100%',
+  alignItems: 'center'
+});
 
 /**
  * This component is a wrapper of main toolbar which listens to keydown events of children

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

@@ -9,10 +9,10 @@ import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, TOOLBAR_ACTION_SUBJECT_ID } from '../../analytics';
 import Button from './styles';
 export const TOOLBAR_BUTTON = TOOLBAR_ACTION_SUBJECT_ID;
-const buttonWrapper = css`
-  display: flex;
-  height: 100%;
-`;
+const buttonWrapper = css({
+  display: 'flex',
+  height: '100%'
+});
 const ToolbarButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     buttonId,

package/dist/esm/analytics/fire-analytics-event.js

@@ -9,21 +9,10 @@ export var fireAnalyticsEvent = function fireAnalyticsEvent(createAnalyticsEvent
     if (!createAnalyticsEvent) {
       return;
     }
-
-    // START TEMPORARY CODE ED-10584
-    // __queueAnalytics property set in ReactEditorView based on featureFlags.queueAnalytics
-    var queueAnalytics = Boolean(createAnalyticsEvent.__queueAnalytics);
-    // END TEMPORARY CODE ED-10584
-
-    if (queueAnalytics) {
-      var queue = AnalyticsQueue.get();
-      queue.schedule(function () {
-        var _createAnalyticsEvent;
-        return (_createAnalyticsEvent = createAnalyticsEvent(payload)) === null || _createAnalyticsEvent === void 0 ? void 0 : _createAnalyticsEvent.fire(channel);
-      });
-    } else {
-      var _createAnalyticsEvent2;
-      (_createAnalyticsEvent2 = createAnalyticsEvent(payload)) === null || _createAnalyticsEvent2 === void 0 || _createAnalyticsEvent2.fire(channel);
-    }
+    var queue = AnalyticsQueue.get();
+    queue.schedule(function () {
+      var _createAnalyticsEvent;
+      return (_createAnalyticsEvent = createAnalyticsEvent(payload)) === null || _createAnalyticsEvent === void 0 ? void 0 : _createAnalyticsEvent.fire(channel);
+    });
   };
 };

package/dist/esm/card/LinkToolbarButtonGroup.js

@@ -1,7 +1,5 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["disabled"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
@@ -11,8 +9,12 @@ import { FloatingToolbarButton as Button } from '../ui';
 /**
  * Applying `pointer-events: none;` when disabled allows the Tooltip to be displayed
  */
-var buttonStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  pointer-events: auto;\n"])));
-var buttonStyleNoneEvent = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  pointer-events: none;\n"])));
+var buttonStyle = css({
+  pointerEvents: 'auto'
+});
+var buttonStyleNoneEvent = css({
+  pointerEvents: 'none'
+});
 var DisallowedWrapper = function DisallowedWrapper(_ref) {
   var disabled = _ref.disabled,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -23,8 +25,12 @@ var DisallowedWrapper = function DisallowedWrapper(_ref) {
  * The button requires `pointer-events: none;` in order to fix the tooltip, hence
  * leaving us without a disabled cursor, the following fixes this:
  */
-var defaultWrapperStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  cursor: pointer;\n"])));
-var disallowedWrapperStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  cursor: not-allowed;\n"])));
+var defaultWrapperStyle = css({
+  cursor: 'pointer'
+});
+var disallowedWrapperStyle = css({
+  cursor: 'not-allowed'
+});
 export var LinkToolbarButtonGroup = function LinkToolbarButtonGroup(_ref2) {
   var options = _ref2.options;
   return jsx(ButtonGroup, null, options.map(function (_ref3) {