@atlaskit/media-ui 19.0.0 → 21.0.0

package/dist/esm/BlockCard/components/Byline.js

@@ -1,34 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import { N300 } from '@atlaskit/theme/colors';
-import { gs, mq } from '../utils';
-export var Byline = function Byline(_ref) {
-  var text = _ref.text,
-      children = _ref.children,
-      testId = _ref.testId,
-      className = _ref.className;
-  return jsx("span", {
-    css: mq({
-      fontSize: gs(1.5),
-      lineHeight: gs(2.5),
-      color: "".concat(N300),
-      fontWeight: 'normal',
-      marginTop: gs(0.5),
-      // Spec: only allow two lines MAX to be shown.
-      display: '-webkit-box',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      WebkitLineClamp: 2,
-      WebkitBoxOrient: 'vertical',
-      wordBreak: 'break-word',
-      // Fallback options.
-      maxHeight: gs(5),
-      whiteSpace: 'pre-line',
-      // EDM-713: fixes copy-paste from renderer to editor for Firefox
-      // due to HTML its unwrapping behaviour on paste.
-      MozUserSelect: 'none'
-    }),
-    "data-testid": testId,
-    className: className
-  }, text || children);
-};

package/dist/esm/BlockCard/components/CollaboratorList.js

@@ -1,39 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import AvatarGroup from '@atlaskit/avatar-group';
-import { mq } from '../utils';
-export var CollaboratorList = function CollaboratorList(_ref) {
-  var items = _ref.items,
-      _ref$handleAvatarClic = _ref.handleAvatarClick,
-      handleAvatarClick = _ref$handleAvatarClic === void 0 ? function () {} : _ref$handleAvatarClic,
-      _ref$handleMoreAvatar = _ref.handleMoreAvatarsClick,
-      handleMoreAvatarsClick = _ref$handleMoreAvatar === void 0 ? function () {} : _ref$handleMoreAvatar,
-      _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? 'collaborator-list' : _ref$testId;
-
-  if (items.length === 0) {
-    return null;
-  }
-
-  return jsx("span", {
-    css: mq({
-      display: ['none', 'inherit']
-    })
-  }, jsx(AvatarGroup, {
-    maxCount: 4,
-    appearance: "stack",
-    size: "small",
-    data: items,
-    onAvatarClick: function onAvatarClick(event) {
-      event.stopPropagation();
-      event.preventDefault();
-      handleAvatarClick(event);
-    },
-    onMoreClick: function onMoreClick(event) {
-      event.stopPropagation();
-      event.preventDefault();
-      handleMoreAvatarsClick(event);
-    },
-    testId: testId
-  }));
-};

package/dist/esm/BlockCard/components/Content.js

@@ -1,20 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import { gs, mq } from '../utils';
-export var blockCardContentClassName = 'block-card-content';
-export var Content = function Content(_ref) {
-  var children = _ref.children,
-      _ref$isCompact = _ref.isCompact,
-      isCompact = _ref$isCompact === void 0 ? false : _ref$isCompact;
-  return jsx("div", {
-    css: mq({
-      padding: isCompact ? gs(1) : gs(2),
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: isCompact ? 'unset' : ['unset', 'space-between'],
-      flexGrow: 1
-    }),
-    "data-trello-do-not-use-override": "block-card-content",
-    className: blockCardContentClassName
-  }, children);
-};

package/dist/esm/BlockCard/components/ContentFooter.js

@@ -1,20 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import { gs, mq } from '../utils';
-export var contentFooterClassName = 'smart-link-content-footer';
-export var ContentFooter = function ContentFooter(_ref) {
-  var children = _ref.children,
-      _ref$hasSpaceBetween = _ref.hasSpaceBetween,
-      hasSpaceBetween = _ref$hasSpaceBetween === void 0 ? false : _ref$hasSpaceBetween;
-  return jsx("div", {
-    css: mq({
-      display: 'flex',
-      flexDirection: ['column', 'row'],
-      flexGrow: [1, 'unset'],
-      justifyContent: [hasSpaceBetween ? 'space-between' : 'flex-end', 'space-between'],
-      alignItems: ['unset', 'center'],
-      marginTop: [gs(1), gs(1.5)]
-    }),
-    className: contentFooterClassName
-  }, children);
-};

package/dist/esm/BlockCard/components/ContentHeader.js

@@ -1,22 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-export var blockCardContentHeaderClassName = 'block-card-content-header';
-export var ContentHeader = function ContentHeader(_ref) {
-  var onClick = _ref.onClick,
-      link = _ref.link,
-      children = _ref.children;
-  return jsx("a", {
-    onClick: onClick,
-    href: link,
-    target: "_blank",
-    css: {
-      display: 'flex',
-      alignItems: 'flex-start',
-      // EDM-713: fixes copy-paste from renderer to editor for Firefox
-      // due to HTML its unwrapping behaviour on paste.
-      MozUserSelect: 'none'
-    },
-    "data-trello-do-not-use-override": "block-card-content-header",
-    className: blockCardContentHeaderClassName
-  }, children);
-};

package/dist/esm/BlockCard/components/Emoji.js

@@ -1,17 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import React from 'react';
-import { gs } from '../utils';
-export var Emoji = function Emoji(_ref) {
-  var emoji = _ref.emoji;
-  return jsx("span", {
-    css: {
-      height: gs(2.5),
-      width: gs(2),
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      marginTop: '-2px'
-    }
-  }, emoji);
-};

package/dist/esm/BlockCard/components/Frame.js

@@ -1,75 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import React from 'react';
-import { N20A, N30A, B200, N40A, N50A } from '@atlaskit/theme/colors';
-import { gs, br, mq } from '../utils';
-export var Frame = function Frame() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
-    isSelected: false,
-    isHoverable: false,
-    isFluidHeight: false
-  };
-  return props.compact ? jsx(CompactFrame, props) : jsx(ExpandedFrame, props);
-};
-var sharedFrameStyles = {
-  maxWidth: gs(95),
-  width: '100%',
-  display: 'flex',
-  backgroundColor: 'white'
-};
-export var ExpandedFrame = function ExpandedFrame(_ref) {
-  var children = _ref.children,
-      isSelected = _ref.isSelected,
-      isHoverable = _ref.isHoverable,
-      testId = _ref.testId,
-      className = _ref.className,
-      isFluidHeight = _ref.isFluidHeight;
-  return jsx("div", {
-    css: mq(_objectSpread(_objectSpread({}, sharedFrameStyles), {}, {
-      '&:hover': isHoverable ? {
-        backgroundColor: N20A,
-        cursor: 'pointer'
-      } : undefined,
-      minHeight: isFluidHeight ? 0 : [gs(21), gs(15)],
-      borderRadius: isSelected ? br() : br(0.5),
-      border: "2px solid ".concat(isSelected ? B200 : 'transparent'),
-      justifyContent: 'space-between',
-      overflow: 'hidden',
-      boxShadow: "0 1px 1px ".concat(N50A, ", 0 0 1px 1px ").concat(N40A, ";")
-    })),
-    "data-testid": testId,
-    className: className,
-    "data-trello-do-not-use-override": testId
-  }, children);
-};
-export var CompactFrame = function CompactFrame(_ref2) {
-  var children = _ref2.children,
-      isHoverable = _ref2.isHoverable,
-      isSelected = _ref2.isSelected,
-      testId = _ref2.testId,
-      className = _ref2.className,
-      inheritDimensions = _ref2.inheritDimensions;
-  return jsx("div", {
-    css: mq(_objectSpread(_objectSpread({}, sharedFrameStyles), {}, {
-      '&:hover': isHoverable ? {
-        backgroundColor: N30A
-      } : undefined,
-      borderRadius: isSelected ? br() : br(0.5),
-      border: isSelected ? "2px solid ".concat(B200) : '',
-      justifyContent: 'center',
-      alignItems: 'center',
-      height: inheritDimensions ? '100%' : gs(5),
-      backgroundColor: N20A,
-      width: ['calc(100% - 16px)', '100%'],
-      padding: ["0px ".concat(gs(1)), '0']
-    })),
-    "data-testid": testId,
-    className: className
-  }, children);
-};

package/dist/esm/BlockCard/components/Icon.js

@@ -1,42 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import React from 'react';
-import ImageLoader from 'react-render-image';
-import LinkIcon from '@atlaskit/icon/glyph/link';
-import { gs } from '../utils';
-export var blockCardIconImageClassName = 'block-card-icon-image';
-export var Icon = function Icon(_ref) {
-  var url = _ref.url,
-      icon = _ref.icon,
-      defaultIcon = _ref.defaultIcon,
-      _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? 'block-card-icon' : _ref$testId;
-  var placeholder = defaultIcon || jsx(LinkIcon, {
-    label: "link",
-    size: "small",
-    testId: "".concat(testId, "-default")
-  });
-  var image = url && jsx(ImageLoader, {
-    src: url,
-    loaded: jsx("img", {
-      css: {
-        height: gs(2),
-        width: gs(2)
-      },
-      src: url,
-      "data-testid": "".concat(testId, "-image")
-    }),
-    errored: placeholder
-  });
-  return jsx("span", {
-    css: {
-      height: gs(2.5),
-      width: gs(2),
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    },
-    "data-testid": testId,
-    className: blockCardIconImageClassName
-  }, icon || image || placeholder);
-};

package/dist/esm/BlockCard/components/Link.js

@@ -1,17 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import { B400 } from '@atlaskit/theme/colors';
-export var Link = function Link(_ref) {
-  var url = _ref.url,
-      _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? 'block-card' : _ref$testId,
-      className = _ref.className;
-  return jsx("span", {
-    "data-testid": "".concat(testId, "-link"),
-    className: className,
-    css: {
-      color: B400,
-      wordBreak: 'break-all'
-    }
-  }, url);
-};

package/dist/esm/BlockCard/components/Metadata.js

@@ -1,45 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import Tooltip from '@atlaskit/tooltip';
-import { gs } from '../utils';
-import { N300 } from '@atlaskit/theme/colors';
-export var Metadata = function Metadata(_ref) {
-  var text = _ref.text,
-      icon = _ref.icon,
-      iconUrl = _ref.iconUrl,
-      tooltip = _ref.tooltip;
-  var metadataIcon = icon || null;
-
-  if (!metadataIcon && iconUrl) {
-    metadataIcon = jsx("img", {
-      src: iconUrl,
-      css: {
-        width: gs(1),
-        height: gs(1)
-      }
-    });
-  }
-
-  var metadata = jsx("div", {
-    css: {
-      display: 'flex',
-      alignItems: 'center',
-      marginRight: gs(0.5)
-    }
-  }, metadataIcon, jsx("span", {
-    css: {
-      fontSize: gs(1.5),
-      color: "".concat(N300),
-      marginRight: gs(0.5),
-      marginLeft: '2px'
-    }
-  }, text));
-
-  if (tooltip) {
-    return jsx(Tooltip, {
-      content: tooltip
-    }, metadata);
-  }
-
-  return metadata;
-};

package/dist/esm/BlockCard/components/MetadataList.js

@@ -1,27 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import { Metadata } from './Metadata';
-import { gs } from '../utils';
-export var metadataListClassName = 'smart-link-metadata-list';
-export var MetadataList = function MetadataList(_ref) {
-  var items = _ref.items,
-      testId = _ref.testId;
-  return jsx("div", {
-    css: {
-      display: 'flex',
-      marginTop: gs(0.5),
-      alignItems: 'center',
-      '&:last-child': {
-        marginRight: '0px'
-      }
-    },
-    "data-testid": testId,
-    className: metadataListClassName
-  }, items.map(function (item) {
-    return jsx(Metadata, _extends({
-      key: item.text
-    }, item));
-  }));
-};

package/dist/esm/BlockCard/components/Modal.js

@@ -1,125 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-/* TODO: (from codemod)
-We have converted this file as best we could but you might still need
-to manually complete migrating this usage of ModalDialog.
-
-This file uses one or more of the following ModalDialog props: 'components', 'header',
-'footer', 'body'. These props have been removed as part of moving to
-a compositional API.
-
-The render props that used to be exposed by the custom component APIs are
-now accessible using the 'useModal' hook instead: 'testId', 'titleId', and 'onClose'.
-
-We are also no longer exposing 'appearance' as render prop, so this needs to be
-manually passed to your custom components.
-
-For a complete guide on customization using the new compositional API, refer to the docs at
-https://atlassian.design/components/modal-dialog/examples#customizing-modal-dialog. */
-import React, { useState } from 'react';
-import ModalDialog, { ModalTransition, ModalBody } from '@atlaskit/modal-dialog';
-import { Header } from './ModalHeader';
-import { getIframeSandboxAttribute } from '../../util';
-var iframeStyles = {
-  width: "100%",
-  height: 'calc(100vh - 248px)'
-};
-
-var ModalWithErrorBoundary = /*#__PURE__*/function (_React$Component) {
-  _inherits(ModalWithErrorBoundary, _React$Component);
-
-  var _super = _createSuper(ModalWithErrorBoundary);
-
-  function ModalWithErrorBoundary() {
-    _classCallCheck(this, ModalWithErrorBoundary);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(ModalWithErrorBoundary, [{
-    key: "componentDidCatch",
-    value: function componentDidCatch(error, errorInfo) {
-      if (this.props.onOpenFailed) {
-        this.props.onOpenFailed(error, errorInfo);
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/React.createElement(Modal, this.props);
-    }
-  }]);
-
-  return ModalWithErrorBoundary;
-}(React.Component);
-
-var Modal = function Modal(_ref) {
-  var onClose = _ref.onClose,
-      onOpen = _ref.onOpen,
-      src = _ref.src,
-      testId = _ref.testId,
-      showModal = _ref.showModal,
-      providerName = _ref.providerName,
-      metadata = _ref.metadata,
-      icon = _ref.icon,
-      closeLabel = _ref.closeLabel,
-      iframeName = _ref.iframeName,
-      title = _ref.title,
-      url = _ref.url,
-      download = _ref.download,
-      byline = _ref.byline,
-      _ref$isTrusted = _ref.isTrusted,
-      isTrusted = _ref$isTrusted === void 0 ? false : _ref$isTrusted,
-      onViewActionClick = _ref.onViewActionClick,
-      onDownloadActionClick = _ref.onDownloadActionClick;
-
-  var _useState = useState(showModal),
-      _useState2 = _slicedToArray(_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
-
-  var sandbox = getIframeSandboxAttribute(isTrusted);
-  return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(ModalDialog, {
-    height: "100%",
-    width: "large",
-    testId: testId,
-    onOpenComplete: onOpen,
-    onClose: function onClose() {
-      setIsOpen(false);
-    },
-    onCloseComplete: onClose
-  }, /*#__PURE__*/React.createElement(Header, {
-    providerName: providerName,
-    icon: icon,
-    metadata: metadata,
-    url: url,
-    title: title,
-    label: closeLabel,
-    download: download,
-    byline: byline,
-    onViewActionClick: onViewActionClick,
-    onDownloadActionClick: onDownloadActionClick
-  }), /*#__PURE__*/React.createElement(ModalBody, null, src ? /*#__PURE__*/React.createElement("iframe", {
-    style: iframeStyles,
-    name: iframeName,
-    frameBorder: 0,
-    src: src,
-    sandbox: sandbox
-  }) : /*#__PURE__*/React.createElement("iframe", {
-    style: iframeStyles,
-    name: iframeName,
-    frameBorder: 0,
-    sandbox: sandbox
-  }))));
-};
-
-export default ModalWithErrorBoundary;

package/dist/esm/BlockCard/components/ModalHeader.js

@@ -1,87 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import { Fragment as F } from 'react';
-import { useModal } from '@atlaskit/modal-dialog';
-import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
-import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
-import Button from '@atlaskit/button/custom-theme-button';
-import { N100, N30A } from '@atlaskit/theme/colors';
-import { FormattedMessage } from 'react-intl-next';
-import { gs } from '../utils';
-import { Icon } from './Icon';
-import { MetadataList } from './MetadataList';
-import { Byline } from './Byline';
-import { messages } from '../../messages';
-export var Header = function Header(_ref) {
-  var title = _ref.title,
-      label = _ref.label,
-      _ref$metadata = _ref.metadata,
-      metadata = _ref$metadata === void 0 ? {
-    items: []
-  } : _ref$metadata,
-      icon = _ref.icon,
-      providerName = _ref.providerName,
-      url = _ref.url,
-      download = _ref.download,
-      byline = _ref.byline,
-      onViewActionClick = _ref.onViewActionClick,
-      onDownloadActionClick = _ref.onDownloadActionClick;
-
-  var _useModal = useModal(),
-      onClose = _useModal.onClose;
-
-  return jsx("div", {
-    style: {
-      paddingLeft: gs(3),
-      paddingRight: gs(3),
-      paddingBottom: gs(2),
-      paddingTop: gs(2)
-    }
-  }, jsx("div", {
-    style: {
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'baseline',
-      borderBottom: "1px solid ".concat(N30A)
-    }
-  }, jsx("div", {
-    css: {
-      flex: 1
-    }
-  }, jsx("div", {
-    css: {
-      display: 'flex'
-    }
-  }, icon && jsx(Icon, icon), jsx("div", {
-    css: {
-      paddingLeft: gs(2),
-      paddingBottom: gs(2)
-    }
-  }, jsx("h3", null, title), jsx("div", {
-    css: {
-      color: N100
-    }
-  }, metadata.items.length && jsx(MetadataList, {
-    items: metadata.items
-  }) || jsx(Byline, null, byline))))), jsx("div", null, download && jsx(Button, {
-    appearance: "primary",
-    href: download,
-    onClick: onDownloadActionClick
-  }, jsx(FormattedMessage, messages.download)), url && jsx(Button, {
-    href: url,
-    target: "_blank",
-    appearance: "link",
-    testId: "preview-view-action",
-    iconAfter: jsx(ShortcutIcon, {
-      size: "small",
-      label: "go to source"
-    }),
-    onClick: onViewActionClick
-  }, providerName ? jsx(F, null, jsx(FormattedMessage, messages.viewIn), " ", providerName) : jsx(FormattedMessage, messages.viewOriginal)), jsx(Button, {
-    appearance: "subtle",
-    iconBefore: jsx(EditorCloseIcon, {
-      label: label
-    }),
-    onClick: onClose
-  }))));
-};

package/dist/esm/BlockCard/components/Name.js

@@ -1,33 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import { fontSize } from '@atlaskit/theme/constants';
-import { gs } from '../utils';
-export var blockCardContentHeaderNameClassName = 'block-card-content-header-name';
-export var Name = function Name(_ref) {
-  var name = _ref.name,
-      _ref$isLeftPadded = _ref.isLeftPadded,
-      isLeftPadded = _ref$isLeftPadded === void 0 ? true : _ref$isLeftPadded,
-      testId = _ref.testId,
-      textColor = _ref.textColor;
-  return jsx("span", {
-    css: {
-      fontSize: "".concat(fontSize(), "px"),
-      fontWeight: 500,
-      marginLeft: isLeftPadded ? gs(1) : '0',
-      lineHeight: gs(2.5),
-      // Spec: show max two lines.
-      display: '-webkit-box',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      wordBreak: 'break-word',
-      WebkitLineClamp: 2,
-      WebkitBoxOrient: 'vertical',
-      color: textColor ? textColor : 'inherit',
-      // Fallback options.
-      maxHeight: gs(6)
-    },
-    "data-testid": testId,
-    "data-trello-do-not-use-override": "block-card-content-header-name",
-    className: blockCardContentHeaderNameClassName
-  }, name);
-};

package/dist/esm/BlockCard/components/Provider.js

@@ -1,37 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import { N300 } from '@atlaskit/theme/colors';
-import { gs } from '../utils';
-export var Provider = function Provider(_ref) {
-  var name = _ref.name,
-      icon = _ref.icon;
-  var iconToRender = icon || null;
-
-  if (typeof icon === 'string') {
-    iconToRender = jsx("img", {
-      className: "smart-link-icon",
-      css: {
-        height: gs(1.5),
-        width: gs(1.5)
-      },
-      src: icon
-    });
-  }
-
-  return jsx("div", {
-    css: {
-      display: 'flex',
-      alignItems: 'center'
-    }
-  }, iconToRender, jsx("span", {
-    css: {
-      fontSize: gs(1.5),
-      color: N300,
-      margin: 0,
-      marginLeft: gs(0.5),
-      // EDM-713: fixes copy-paste from renderer to editor for Firefox
-      // due to HTML its unwrapping behaviour on paste.
-      MozUserSelect: 'none'
-    }
-  }, name));
-};