@atlaskit/editor-core 188.0.12 → 188.2.0

package/dist/es2019/plugins/help-dialog/index.js

@@ -1,125 +0,0 @@
-import React from 'react';
-import { keymap } from '@atlaskit/editor-prosemirror/keymap';
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { bindKeymapWithCommand, openHelp, tooltip } from '@atlaskit/editor-common/keymaps';
-import { HelpDialogLoader } from './ui/HelpDialogLoader';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
-import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
-import { openHelpCommand } from './commands';
-import { pluginKey } from './plugin-key';
-export function createPlugin(dispatch, imageEnabled) {
-  return new SafePlugin({
-    key: pluginKey,
-    state: {
-      init() {
-        return {
-          isVisible: false,
-          imageEnabled
-        };
-      },
-      apply(tr, _value, state) {
-        const isVisible = tr.getMeta(pluginKey);
-        const currentState = pluginKey.getState(state);
-        if (isVisible !== undefined && isVisible !== currentState.isVisible) {
-          const newState = {
-            ...currentState,
-            isVisible
-          };
-          dispatch(pluginKey, newState);
-          return newState;
-        }
-        return currentState;
-      }
-    }
-  });
-}
-const helpDialog = ({
-  config: imageUploadProviderExists = false,
-  api
-}) => ({
-  name: 'helpDialog',
-  pmPlugins() {
-    return [{
-      name: 'helpDialog',
-      plugin: ({
-        dispatch
-      }) => createPlugin(dispatch, imageUploadProviderExists)
-    }, {
-      name: 'helpDialogKeymap',
-      plugin: () => {
-        var _api$analytics;
-        return keymapPlugin(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
-      }
-    }];
-  },
-  pluginsOptions: {
-    quickInsert: ({
-      formatMessage
-    }) => [{
-      id: 'helpdialog',
-      title: formatMessage(messages.help),
-      description: formatMessage(messages.helpDescription),
-      keywords: ['?'],
-      priority: 4000,
-      keyshortcut: tooltip(openHelp),
-      icon: () => /*#__PURE__*/React.createElement(QuestionCircleIcon, {
-        label: ""
-      }),
-      action(insert) {
-        var _api$analytics2;
-        const tr = insert('');
-        openHelpCommand(tr);
-        api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.attachAnalyticsEvent({
-          action: ACTION.HELP_OPENED,
-          actionSubject: ACTION_SUBJECT.HELP,
-          actionSubjectId: ACTION_SUBJECT_ID.HELP_QUICK_INSERT,
-          attributes: {
-            inputMethod: INPUT_METHOD.QUICK_INSERT
-          },
-          eventType: EVENT_TYPE.UI
-        })(tr);
-        return tr;
-      }
-    }]
-  },
-  contentComponent({
-    editorView
-  }) {
-    return /*#__PURE__*/React.createElement(HelpDialogLoader, {
-      pluginInjectionApi: api,
-      editorView: editorView,
-      quickInsertEnabled: !!(api !== null && api !== void 0 && api.quickInsert)
-    });
-  },
-  getSharedState(editorState) {
-    if (!editorState) {
-      return null;
-    }
-    return pluginKey.getState(editorState) || null;
-  }
-});
-const keymapPlugin = editorAnalyticsAPI => {
-  const list = {};
-  bindKeymapWithCommand(openHelp.common, (state, dispatch) => {
-    let {
-      tr
-    } = state;
-    const isVisible = tr.getMeta(pluginKey);
-    if (!isVisible) {
-      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
-        action: ACTION.CLICKED,
-        actionSubject: ACTION_SUBJECT.BUTTON,
-        actionSubjectId: ACTION_SUBJECT_ID.BUTTON_HELP,
-        attributes: {
-          inputMethod: INPUT_METHOD.SHORTCUT
-        },
-        eventType: EVENT_TYPE.UI
-      })(tr);
-      openHelpCommand(tr, dispatch);
-    }
-    return true;
-  }, list);
-  return keymap(list);
-};
-export default helpDialog;

package/dist/es2019/plugins/help-dialog/plugin-key.js

@@ -1,2 +0,0 @@
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-export const pluginKey = new PluginKey('helpDialogPlugin');

package/dist/es2019/plugins/help-dialog/ui/HelpDialogLoader.js

@@ -1,6 +0,0 @@
-import Loadable from 'react-loadable';
-export const HelpDialogLoader = Loadable({
-  loader: () => import( /* webpackChunkName: "@atlaskit-internal_editor-core-helpdialog" */
-  './index').then(mod => mod.default),
-  loading: () => null
-});

package/dist/es2019/plugins/help-dialog/ui/index.js

@@ -1,446 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
-import { useCallback, useEffect } from 'react';
-import { jsx } from '@emotion/react';
-import { injectIntl, defineMessages, FormattedMessage } from 'react-intl-next';
-import { browser } from '@atlaskit/editor-common/utils';
-import CrossIcon from '@atlaskit/icon/glyph/cross';
-import AkModalDialog, { ModalTransition, useModal } from '@atlaskit/modal-dialog';
-import { header, footer, contentWrapper, line, content, row, codeSm, codeMd, codeLg, title, column, dialogHeader } from './styles';
-import { navToFloatingToolbar, navToEditorToolbar, toggleBold, toggleItalic, toggleUnderline, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, toggleOrderedList, insertRule, addLink, setNormalText, alignLeft, clearFormatting, undo, redo, pastePlainText, addInlineComment, toggleTaskItemCheckbox, toggleCode, openHelp, toggleBulletList, toggleBlockQuote } from '@atlaskit/editor-common/keymaps';
-import ToolbarButton from '../../../ui/ToolbarButton';
-import { toolbarMessages, listMessages } from '@atlaskit/editor-common/messages';
-import { messages as insertBlockMessages } from '../../insert-block/ui/ToolbarInsertBlock/messages';
-import { messages as blockTypeMessages } from '@atlaskit/editor-plugin-block-type/messages';
-import { messages as undoRedoMessages } from '../../undo-redo/messages';
-import { alignmentMessages } from '../../../ui/Alignment/messages';
-import { closeHelpCommand } from '../commands';
-import { annotationMessages } from '../../annotation/toolbar';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-const messages = defineMessages({
-  editorHelp: {
-    id: 'fabric.editor.editorHelp',
-    defaultMessage: 'Editor help',
-    description: 'Title of editor help dialog.'
-  },
-  helpDialogTips: {
-    id: 'fabric.editor.helpDialogTips',
-    defaultMessage: 'Press {keyMap} to quickly open this dialog at any time',
-    description: 'Hint about how to open a dialog quickly using a shortcut.'
-  },
-  keyboardShortcuts: {
-    id: 'fabric.editor.keyboardShortcuts',
-    defaultMessage: 'Keyboard shortcuts',
-    description: ''
-  },
-  markdown: {
-    id: 'fabric.editor.markdown',
-    defaultMessage: 'Markdown',
-    description: 'It is a name of popular markup language.'
-  },
-  pastePlainText: {
-    id: 'fabric.editor.pastePlainText',
-    defaultMessage: 'Paste plain text',
-    description: ''
-  },
-  CheckUncheckActionItem: {
-    id: 'fabric.editor.checkUncheckActionItem',
-    defaultMessage: 'Toggle action item',
-    description: 'For Check/Uncheck Action item use shortcut'
-  },
-  altText: {
-    id: 'fabric.editor.altText',
-    defaultMessage: 'Alt text',
-    description: 'Alternative text for image.'
-  },
-  closeHelpDialog: {
-    id: 'fabric.editor.closeHelpDialog',
-    defaultMessage: 'Close help dialog',
-    description: ''
-  },
-  // TODO: Move it inside quick insert plugin
-  quickInsert: {
-    id: 'fabric.editor.quickInsert',
-    defaultMessage: 'Quick insert',
-    description: 'Name of a feature, which let you insert items quickly.'
-  }
-});
-const navigationKeymaps = ({
-  formatMessage
-}) => [{
-  name: formatMessage(toolbarMessages.navigateToEditorToolbar),
-  type: 'navigation',
-  keymap: () => navToEditorToolbar
-}, {
-  name: formatMessage(toolbarMessages.navigateToFloatingToolbar),
-  type: 'navigation',
-  keymap: () => navToFloatingToolbar
-}];
-export const formatting = ({
-  formatMessage
-}) => [{
-  name: formatMessage(toolbarMessages.bold),
-  type: 'strong',
-  keymap: () => toggleBold,
-  autoFormatting: () => jsx("span", null, jsx("span", {
-    css: codeLg
-  }, "**", jsx(FormattedMessage, toolbarMessages.bold), "**"))
-}, {
-  name: formatMessage(toolbarMessages.italic),
-  type: 'em',
-  keymap: () => toggleItalic,
-  autoFormatting: () => jsx("span", null, jsx("span", {
-    css: codeLg
-  }, "*", jsx(FormattedMessage, toolbarMessages.italic), "*"))
-}, {
-  name: formatMessage(toolbarMessages.underline),
-  type: 'underline',
-  keymap: () => toggleUnderline
-}, {
-  name: formatMessage(toolbarMessages.strike),
-  type: 'strike',
-  keymap: () => toggleStrikethrough,
-  autoFormatting: () => jsx("span", null, jsx("span", {
-    css: codeLg
-  }, "~~", jsx(FormattedMessage, toolbarMessages.strike), "~~"))
-}, {
-  name: formatMessage(toolbarMessages.subscript),
-  type: 'subsup',
-  keymap: () => toggleSubscript
-}, {
-  name: formatMessage(toolbarMessages.superscript),
-  type: 'subsup',
-  keymap: () => toggleSuperscript
-}, {
-  name: formatMessage(blockTypeMessages.heading1),
-  type: 'heading',
-  keymap: () => toggleHeading1,
-  autoFormatting: () => jsx("span", null, jsx("span", {
-    css: codeSm
-  }, "#"), " ", jsx("span", {
-    css: codeLg
-  }, "Space"))
-}, {
-  name: formatMessage(blockTypeMessages.heading2),
-  type: 'heading',
-  keymap: () => toggleHeading2,
-  autoFormatting: () => jsx("span", null, jsx("span", {
-    css: codeLg
-  }, "##"), " ", jsx("span", {
-    css: codeLg
-  }, "Space"))
-}, {
-  name: formatMessage(blockTypeMessages.heading3),
-  type: 'heading',
-  keymap: () => toggleHeading3,
-  autoFormatting: () => jsx("span", null, jsx("span", {
-    css: codeLg
-  }, "###"), " ", jsx("span", {
-    css: codeLg
-  }, "Space"))
-}, {
-  name: formatMessage(blockTypeMessages.heading4),
-  type: 'heading',
-  keymap: () => toggleHeading4,
-  autoFormatting: () => jsx("span", null, jsx("span", {
-    css: codeLg
-  }, "####"), " ", jsx("span", {
-    css: codeLg
-  }, "Space"))
-}, {
-  name: formatMessage(blockTypeMessages.heading5),
-  type: 'heading',
-  keymap: () => toggleHeading5,
-  autoFormatting: () => jsx("span", null, jsx("span", {
-    css: codeLg
-  }, "#####"), " ", jsx("span", {
-    css: codeLg
-  }, "Space"))
-}, {
-  name: formatMessage(blockTypeMessages.heading6),
-  type: 'heading',
-  keymap: () => toggleHeading6,
-  autoFormatting: () => jsx("span", null, jsx("span", {
-    css: codeLg
-  }, "######"), " ", jsx("span", {
-    css: codeLg
-  }, "Space"))
-}, {
-  name: formatMessage(blockTypeMessages.normal),
-  type: 'paragraph',
-  keymap: () => setNormalText
-}, {
-  name: formatMessage(listMessages.orderedList),
-  type: 'orderedList',
-  keymap: () => toggleOrderedList,
-  autoFormatting: () => jsx("span", null, jsx("span", {
-    css: codeSm
-  }, "1."), " ", jsx("span", {
-    css: codeLg
-  }, "Space"))
-}, {
-  name: formatMessage(listMessages.unorderedList),
-  type: 'bulletList',
-  keymap: () => toggleBulletList,
-  autoFormatting: () => jsx("span", null, jsx("span", {
-    css: codeSm
-  }, "*"), " ", jsx("span", {
-    css: codeLg
-  }, "Space"))
-}, {
-  name: formatMessage(blockTypeMessages.blockquote),
-  type: 'blockquote',
-  keymap: () => toggleBlockQuote,
-  autoFormatting: () => jsx("span", null, jsx("span", {
-    css: codeLg
-  }, '>'), " ", jsx("span", {
-    css: codeLg
-  }, "Space"))
-}, {
-  name: formatMessage(blockTypeMessages.codeblock),
-  type: 'codeBlock',
-  autoFormatting: () => jsx("span", null, jsx("span", {
-    css: codeLg
-  }, "```"))
-}, {
-  name: formatMessage(insertBlockMessages.horizontalRule),
-  type: 'rule',
-  keymap: () => insertRule,
-  autoFormatting: () => jsx("span", null, jsx("span", {
-    css: codeLg
-  }, "---"))
-}, {
-  name: formatMessage(insertBlockMessages.link),
-  type: 'link',
-  keymap: () => addLink,
-  autoFormatting: () => jsx("span", null, jsx("span", {
-    css: codeLg
-  }, "[", jsx(FormattedMessage, insertBlockMessages.link), "](http://a.com)"))
-}, {
-  name: formatMessage(toolbarMessages.code),
-  type: 'code',
-  keymap: () => toggleCode,
-  autoFormatting: () => jsx("span", null, jsx("span", {
-    css: codeLg
-  }, "`", jsx(FormattedMessage, toolbarMessages.code), "`"))
-}, {
-  name: formatMessage(insertBlockMessages.action),
-  type: 'taskItem',
-  autoFormatting: () => jsx("span", null, jsx("span", {
-    css: codeSm
-  }, "[]"), " ", jsx("span", {
-    css: codeLg
-  }, "Space"))
-}, {
-  name: formatMessage(insertBlockMessages.decision),
-  type: 'decisionItem',
-  autoFormatting: () => jsx("span", null, jsx("span", {
-    css: codeSm
-  }, "<>"), " ", jsx("span", {
-    css: codeLg
-  }, "Space"))
-}, {
-  name: formatMessage(insertBlockMessages.emoji),
-  type: 'emoji',
-  autoFormatting: () => jsx("span", null, jsx("span", {
-    css: codeLg
-  }, ":"))
-}, {
-  name: formatMessage(insertBlockMessages.mention),
-  type: 'mention',
-  autoFormatting: () => jsx("span", null, jsx("span", {
-    css: codeLg
-  }, "@"))
-}, {
-  name: formatMessage(alignmentMessages.alignLeft),
-  type: 'alignment',
-  keymap: () => alignLeft
-}, {
-  name: formatMessage(alignmentMessages.alignRight),
-  type: 'alignment'
-}];
-const shortcutNamesWithoutKeymap = ['emoji', 'mention', 'quickInsert'];
-const otherFormatting = ({
-  formatMessage
-}) => [{
-  name: formatMessage(toolbarMessages.clearFormatting),
-  type: 'clearFormatting',
-  keymap: () => clearFormatting
-}, {
-  name: formatMessage(undoRedoMessages.undo),
-  type: 'undo',
-  keymap: () => undo
-}, {
-  name: formatMessage(undoRedoMessages.redo),
-  type: 'redo',
-  keymap: () => redo
-}, {
-  name: formatMessage(messages.pastePlainText),
-  type: 'paste',
-  keymap: () => pastePlainText
-}, {
-  name: formatMessage(annotationMessages.createComment),
-  type: 'annotation',
-  keymap: () => addInlineComment
-}, {
-  name: formatMessage(messages.CheckUncheckActionItem),
-  type: 'checkbox',
-  keymap: () => toggleTaskItemCheckbox
-}];
-const imageAutoFormat = {
-  name: 'Image',
-  type: 'image',
-  autoFormatting: () => jsx("span", null, jsx("span", {
-    css: codeLg
-  }, "![", jsx(FormattedMessage, messages.altText), "](http://www.image.com)"))
-};
-const quickInsertAutoFormat = ({
-  formatMessage
-}) => ({
-  name: formatMessage(messages.quickInsert),
-  type: 'quickInsert',
-  autoFormatting: () => jsx("span", null, jsx("span", {
-    css: codeLg
-  }, "/"))
-});
-const getKeyParts = keymap => {
-  let shortcut = keymap[browser.mac ? 'mac' : 'windows'];
-  if (browser.mac) {
-    shortcut = shortcut.replace('Alt', 'Opt');
-  }
-  return shortcut.replace(/\-(?=.)/g, ' + ').split(' ');
-};
-export const getSupportedFormatting = (schema, intl, imageEnabled, quickInsertEnabled) => {
-  const supportedBySchema = formatting(intl).filter(format => schema.nodes[format.type] || schema.marks[format.type]);
-  return [...navigationKeymaps(intl), ...supportedBySchema, ...(imageEnabled ? [imageAutoFormat] : []), ...(quickInsertEnabled ? [quickInsertAutoFormat(intl)] : []), ...otherFormatting(intl)];
-};
-export const getComponentFromKeymap = keymap => {
-  const keyParts = getKeyParts(keymap);
-  return jsx("span", null, keyParts.map((part, index) => {
-    if (part === '+') {
-      return jsx("span", {
-        key: `${keyParts}-${index}`
-      }, ' + ');
-    } else if (part === 'Cmd') {
-      return jsx("span", {
-        css: codeSm,
-        key: `${keyParts}-${index}`
-      }, "\u2318");
-    } else if (['ctrl', 'alt', 'opt', 'shift'].indexOf(part.toLowerCase()) >= 0) {
-      return jsx("span", {
-        css: codeMd,
-        key: `${keyParts}-${index}`
-      }, part);
-    } else if (['f9', 'f10'].indexOf(part.toLowerCase()) >= 0) {
-      return jsx("span", {
-        css: codeLg,
-        key: `${keyParts}-${index}`
-      }, part);
-    } else if (part.toLowerCase() === 'enter') {
-      return jsx("span", {
-        css: codeSm,
-        key: `${keyParts}-${index}`
-      }, '⏎');
-    }
-    return jsx("span", {
-      css: codeSm,
-      key: `${keyParts}-${index}`
-    }, part.toUpperCase());
-  }));
-};
-const ModalHeader = injectIntl(({
-  intl: {
-    formatMessage
-  }
-}) => {
-  const {
-    onClose
-  } = useModal();
-  return jsx("div", {
-    css: header
-  }, jsx("h1", {
-    css: dialogHeader
-  }, jsx(FormattedMessage, messages.editorHelp)), jsx("div", null, jsx(ToolbarButton
-  // @ts-ignore
-  , {
-    onClick: onClose,
-    title: formatMessage(messages.closeHelpDialog),
-    spacing: "compact",
-    iconBefore: jsx(CrossIcon, {
-      label: formatMessage(messages.closeHelpDialog),
-      size: "medium"
-    })
-  })));
-});
-const ModalFooter = () => jsx("div", {
-  css: footer
-}, jsx(FormattedMessage, _extends({}, messages.helpDialogTips, {
-  values: {
-    keyMap: getComponentFromKeymap(openHelp)
-  }
-})));
-const HelpDialog = ({
-  pluginInjectionApi,
-  editorView,
-  quickInsertEnabled,
-  intl
-}) => {
-  const {
-    helpDialogState
-  } = useSharedPluginState(pluginInjectionApi, ['helpDialog']);
-  const closeDialog = useCallback(() => {
-    const {
-      state: {
-        tr
-      },
-      dispatch
-    } = editorView;
-    closeHelpCommand(tr, dispatch);
-  }, [editorView]);
-  const handleEsc = useCallback(e => {
-    if (e.key === 'Escape' && helpDialogState !== null && helpDialogState !== void 0 && helpDialogState.isVisible) {
-      closeDialog();
-    }
-  }, [closeDialog, helpDialogState === null || helpDialogState === void 0 ? void 0 : helpDialogState.isVisible]);
-  useEffect(() => {
-    document.addEventListener('keydown', handleEsc);
-    return () => {
-      document.removeEventListener('keydown', handleEsc);
-    };
-  }, [handleEsc]);
-  const formatting = getSupportedFormatting(editorView.state.schema, intl, helpDialogState === null || helpDialogState === void 0 ? void 0 : helpDialogState.imageEnabled, quickInsertEnabled);
-  return jsx(ModalTransition, null, helpDialogState !== null && helpDialogState !== void 0 && helpDialogState.isVisible ? jsx(AkModalDialog, {
-    width: "large",
-    onClose: closeDialog,
-    testId: "help-modal-dialog"
-  }, jsx(ModalHeader, null), jsx("div", {
-    css: contentWrapper
-  }, jsx("div", {
-    css: line
-  }), jsx("div", {
-    css: content
-  }, jsx("div", {
-    css: column
-  }, jsx("h2", {
-    css: title
-  }, jsx(FormattedMessage, messages.keyboardShortcuts)), jsx("ul", null, formatting.filter(form => {
-    const keymap = form.keymap && form.keymap();
-    return keymap && keymap[browser.mac ? 'mac' : 'windows'];
-  }).map(form => jsx("li", {
-    css: row,
-    key: `textFormatting-${form.name}`
-  }, jsx("span", null, form.name), getComponentFromKeymap(form.keymap()))), formatting.filter(form => shortcutNamesWithoutKeymap.indexOf(form.type) !== -1).filter(form => form.autoFormatting).map(form => jsx("li", {
-    css: row,
-    key: `autoFormatting-${form.name}`
-  }, jsx("span", null, form.name), form.autoFormatting())))), jsx("div", {
-    css: line
-  }), jsx("div", {
-    css: column
-  }, jsx("h2", {
-    css: title
-  }, jsx(FormattedMessage, messages.markdown)), jsx("ul", null, formatting.filter(form => shortcutNamesWithoutKeymap.indexOf(form.type) === -1).map(form => form.autoFormatting && jsx("li", {
-    key: `autoFormatting-${form.name}`,
-    css: row
-  }, jsx("span", null, form.name), form.autoFormatting())))))), jsx(ModalFooter, null)) : null);
-};
-export default injectIntl(HelpDialog);

package/dist/es2019/plugins/help-dialog/ui/styles.js

@@ -1,110 +0,0 @@
-import { css } from '@emotion/react';
-import { borderRadius } from '@atlaskit/theme/constants';
-import * as colors from '@atlaskit/theme/colors';
-import { akEditorUnitZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { N400 } from '@atlaskit/theme/colors';
-export const header = css`
-  z-index: ${akEditorUnitZIndex};
-  min-height: 24px;
-  padding: 20px 40px;
-  font-size: ${relativeFontSizeToBase16(24)};
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  box-shadow: 'none';
-  color: ${`var(--ds-text, ${colors.N400})`};
-  background-color: ${`var(--ds-background-neutral-subtle, ${colors.N0})`};
-  border-radius: ${borderRadius()}px;
-`;
-export const footer = css`
-  z-index: ${akEditorUnitZIndex};
-  font-size: ${relativeFontSizeToBase16(14)};
-  line-height: 20px;
-  color: ${`var(--ds-text-subtlest, ${colors.N300})`};
-  padding: 24px;
-  text-align: right;
-  box-shadow: 'none';
-`;
-export const contentWrapper = css`
-  padding: 20px 44px;
-  border-bottom-right-radius: ${borderRadius()}px;
-  overflow: auto;
-  position: relative;
-  color: ${`var(--ds-text-subtle, ${colors.N400})`};
-  background-color: ${`var(--ds-background-neutral-subtle, ${colors.N0})`};
-`;
-export const line = css`
-  background: ${"var(--ds-background-neutral-subtle, #fff)"};
-  content: '';
-  display: block;
-  height: 2px;
-  left: 0;
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 100%;
-  min-width: 604px;
-`;
-export const content = css`
-  min-width: 524px;
-  width: 100%;
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-`;
-export const column = {
-  width: '44%',
-  '& > ul': {
-    padding: 0
-  }
-};
-export const row = css`
-  margin: 20px 0;
-  display: flex;
-  justify-content: space-between;
-`;
-export const dialogHeader = {
-  '&': {
-    fontSize: relativeFontSizeToBase16(24),
-    fontWeight: 400,
-    color: `var(--ds-text-subtle, ${N400})`,
-    letterSpacing: 'normal',
-    lineHeight: 1.42857142857143
-  }
-};
-export const title = {
-  '&': {
-    fontSize: relativeFontSizeToBase16(18),
-    fontWeight: 400,
-    color: `var(--ds-text-subtle, ${N400})`,
-    letterSpacing: 'normal',
-    lineHeight: 1.42857142857143
-  }
-};
-export const codeSm = css`
-  background-color: ${`var(--ds-background-neutral, ${colors.N20})`};
-  border-radius: ${borderRadius()}px;
-  width: 24px;
-  display: inline-block;
-  height: 24px;
-  line-height: 24px;
-  text-align: center;
-`;
-export const codeMd = css`
-  background-color: ${`var(--ds-background-neutral, ${colors.N20})`};
-  border-radius: ${borderRadius()}px;
-  display: inline-block;
-  height: 24px;
-  line-height: 24px;
-  width: 50px;
-  text-align: center;
-`;
-export const codeLg = css`
-  background-color: ${`var(--ds-background-neutral, ${colors.N20})`};
-  border-radius: ${borderRadius()}px;
-  display: inline-block;
-  height: 24px;
-  line-height: 24px;
-  padding: 0 10px;
-  text-align: center;
-`;