@atlaskit/editor-common 71.0.3 → 72.0.1

package/dist/es2019/styles/shared/table.js

@@ -1,12 +1,10 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4118
 import { css } from '@emotion/react';
 import { tableCellContentDomSelector, tableCellSelector, tableHeaderSelector, tablePrefixSelector } from '@atlaskit/adf-schema';
 import { akEditorBreakoutPadding, akEditorFullWidthLayoutWidth, akEditorSelectedNodeClassName, akEditorTableBorder, akEditorTableBorderDark, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarDark, akEditorWideLayoutWidth, getTableCellBackgroundDarkModeColors, overflowShadow } from '@atlaskit/editor-shared-styles';
 import { DN20 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import browser from '../../utils/browser';
 import { CodeBlockSharedCssClassName } from './code-block';
 export const tableMarginTop = 24;
@@ -66,8 +64,8 @@ const tableSharedStyle = props => css`
     border-collapse: collapse;
     border: ${tableCellBorderWidth}px solid
       ${themed({
-  light: token('color.border', akEditorTableBorder),
-  dark: token('color.border', akEditorTableBorderDark)
+  light: `var(--ds-border, ${akEditorTableBorder})`,
+  dark: `var(--ds-border, ${akEditorTableBorderDark})`
 })(props)};
     table-layout: fixed;
     font-size: 1em;
@@ -89,7 +87,7 @@ const tableSharedStyle = props => css`
         border-bottom: none;
       }
       th td {
-        background-color: ${token('color.background.neutral.subtle', 'white')};
+        background-color: ${"var(--ds-background-neutral-subtle, white)"};
       }
       th,
       td {
@@ -98,8 +96,8 @@ const tableSharedStyle = props => css`
         vertical-align: top;
         border: 1px solid
           ${themed({
-  light: token('color.border', akEditorTableBorder),
-  dark: token('color.border', akEditorTableBorderDark)
+  light: `var(--ds-border, ${akEditorTableBorder})`,
+  dark: `var(--ds-border, ${akEditorTableBorderDark})`
 })(props)};
         border-right-width: 0;
         border-bottom-width: 0;
@@ -133,8 +131,8 @@ const tableSharedStyle = props => css`
       }
       th {
         background-color: ${themed({
-  light: token('color.background.neutral', akEditorTableToolbar),
-  dark: token('color.background.neutral', akEditorTableToolbarDark)
+  light: `var(--ds-background-neutral, ${akEditorTableToolbar})`,
+  dark: `var(--ds-background-neutral, ${akEditorTableToolbarDark})`
 })(props)};
         text-align: left;
 
@@ -143,34 +141,34 @@ const tableSharedStyle = props => css`
         &:not([style]):not(.danger) {
           .${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER}:not(.danger) {
             background-color: ${themed({
-  light: token('elevation.surface.raised', 'rgb(235, 237, 240)'),
-  dark: token('elevation.surface.raised', 'rgb(36, 47, 66)')
+  light: "var(--ds-surface-raised, rgb(235, 237, 240))",
+  dark: "var(--ds-surface-raised, rgb(36, 47, 66))"
 })(props)};
 
             :not(.${akEditorSelectedNodeClassName}) {
               box-shadow: 0px 0px 0px 1px
-                ${token('color.border', 'transparent')};
+                ${"var(--ds-border, transparent)"};
             }
 
             .${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER} {
               background-image: ${overflowShadow({
   background: themed({
-    light: token('color.background.neutral', 'rgb(235, 237, 240)'),
-    dark: token('color.background.neutral', 'rgb(36, 47, 66)')
+    light: "var(--ds-background-neutral, rgb(235, 237, 240))",
+    dark: "var(--ds-background-neutral, rgb(36, 47, 66))"
   })(props),
-  width: `${gridSize()}px`
+  leftCoverWidth: `${gridSize() * 3}px`
 })};
 
               background-color: ${themed({
-  light: token('color.background.neutral', 'rgb(235, 237, 240)'),
-  dark: token('color.background.neutral', 'rgb(36, 47, 66)')
+  light: "var(--ds-background-neutral, rgb(235, 237, 240))",
+  dark: "var(--ds-background-neutral, rgb(36, 47, 66))"
 })(props)};
             }
 
             .${CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER} {
               background-color: ${themed({
-  light: token('color.background.neutral', 'rgb(226, 229, 233)'),
-  dark: token('color.background.neutral', DN20)
+  light: "var(--ds-background-neutral, rgb(226, 229, 233))",
+  dark: `var(--ds-background-neutral, ${DN20})`
 })(props)};
             }
 
@@ -178,21 +176,21 @@ const tableSharedStyle = props => css`
             > [data-ds--code--code-block] {
               background-image: ${overflowShadow({
   background: themed({
-    light: token('color.background.neutral', 'rgb(235, 237, 240)'),
-    dark: token('color.background.neutral', 'rgb(36, 47, 66)')
+    light: "var(--ds-background-neutral, rgb(235, 237, 240))",
+    dark: "var(--ds-background-neutral, rgb(36, 47, 66))"
   })(props),
-  width: `${gridSize()}px`
+  leftCoverWidth: `${gridSize() * 3}px`
 })}!important;
 
               background-color: ${themed({
-  light: token('color.background.neutral', 'rgb(235, 237, 240)'),
-  dark: token('color.background.neutral', 'rgb(36, 47, 66)')
+  light: "var(--ds-background-neutral, rgb(235, 237, 240))",
+  dark: "var(--ds-background-neutral, rgb(36, 47, 66))"
 })(props)}!important;
 
               // selector lives inside @atlaskit/code
               --ds--code--line-number-bg-color: ${themed({
-  light: token('color.background.neutral', 'rgb(226, 229, 233)'),
-  dark: token('color.background.neutral', DN20)
+  light: "var(--ds-background-neutral, rgb(226, 229, 233))",
+  dark: `var(--ds-background-neutral, ${DN20})`
 })(props)};
             }
           }

package/dist/es2019/types/next-editor-plugin.js

@@ -0,0 +1 @@
+export {};

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

@@ -5,16 +5,15 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { N200, N400 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { messages } from './messages';
 const captionWrapperStyle = css`
   margin-top: 8px;
   text-align: center;
   position: relative;
-  color: ${token('color.text.subtle', N400)};
+  color: ${`var(--ds-text-subtle, ${N400})`};
 `;
 const placeholderStyle = css`
-  color: ${token('color.text.subtlest', N200)};
+  color: ${`var(--ds-text-subtlest, ${N200})`};
   position: absolute;
   top: 0;
   width: 100%;

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

@@ -7,10 +7,9 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { DN50, DN600, N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "71.0.3";
+const packageVersion = "72.0.1";
 const halfFocusRing = 1;
 const dropOffset = `0, ${gridSize()}px`;
 
@@ -33,12 +32,12 @@ class DropList extends Component {
     _defineProperty(this, "menuWrapper", theme => {
       return css`
       color: ${themed({
-        light: token('color.text', N900),
-        dark: token('color.text', DN600)
+        light: `var(--ds-text, ${N900})`,
+        dark: `var(--ds-text, ${DN600})`
       })(theme)};
       background-color: ${themed({
-        light: token('elevation.surface.overlay', N0),
-        dark: token('elevation.surface.overlay', DN50)
+        light: `var(--ds-surface-overlay, ${N0})`,
+        dark: `var(--ds-surface-overlay, ${DN50})`
       })(theme)};
       border-radius: ${borderRadius()}px;
       box-shadow: 0 ${gridSize() / 2}px ${gridSize()}px -${gridSize() / 4}px ${N50A},

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

@@ -7,13 +7,16 @@ export default class EmojiNode extends PureComponent {
     super(props);
 
     _defineProperty(this, "renderWithProvider", providers => {
+      var _resourceConfig$optim;
+
       const {
         allowTextFallback,
         shortName,
         id,
         fallback,
         fitToHeight,
-        showTooltip
+        showTooltip,
+        resourceConfig
       } = this.props;
 
       if (allowTextFallback && !providers.emojiProvider) {
@@ -36,7 +39,13 @@ export default class EmojiNode extends PureComponent {
         },
         emojiProvider: providers.emojiProvider,
         showTooltip: showTooltip,
-        fitToHeight: fitToHeight
+        fitToHeight: fitToHeight,
+        optimistic: true,
+        optimisticImageURL: resourceConfig === null || resourceConfig === void 0 ? void 0 : (_resourceConfig$optim = resourceConfig.optimisticImageApi) === null || _resourceConfig$optim === void 0 ? void 0 : _resourceConfig$optim.getUrl({
+          id,
+          fallback,
+          shortName
+        })
       });
     });
 

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

@@ -8,7 +8,6 @@ import { akEditorLineHeight, akEditorSwoopCubicBezier, akLayoutGutterOffset, rel
 import * as colors from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { fontSize, gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 export const messages = defineMessages({
   collapseNode: {
     id: 'fabric.editor.collapseNode',
@@ -32,16 +31,16 @@ export const messages = defineMessages({
   }
 });
 const BORDER_RADIUS = gridSize() / 2;
-const EXPAND_COLLAPSED_BACKGROUND = token('color.background.neutral.subtle', 'transparent');
+const EXPAND_COLLAPSED_BACKGROUND = "var(--ds-background-neutral-subtle, transparent)";
 const EXPAND_SELECTED_BACKGROUND = themed({
-  light: token('elevation.surface', 'rgba(255, 255, 255, 0.6)'),
-  dark: token('elevation.surface', 'rgba(9, 10, 11, 0.29)')
+  light: "var(--ds-surface, rgba(255, 255, 255, 0.6))",
+  dark: "var(--ds-surface, rgba(9, 10, 11, 0.29))"
 });
-const EXPAND_FOCUSED_BORDER_COLOR = token('color.border.focused', colors.B300);
+const EXPAND_FOCUSED_BORDER_COLOR = `var(--ds-border-focused, ${colors.B300})`;
 const EXPAND_COLLAPSED_BORDER_COLOR = 'transparent';
 const EXPAND_EXPANDED_BORDER_COLOR = themed({
-  light: token('color.border', colors.N40A),
-  dark: token('color.border', colors.DN50)
+  light: `var(--ds-border, ${colors.N40A})`,
+  dark: `var(--ds-border, ${colors.DN50})`
 });
 export const ExpandIconWrapper = ({
   children,
@@ -56,15 +55,15 @@ const expandIconWrapperStyle = props => css`
   cursor: pointer;
   display: flex;
   color: ${themed({
-  light: token('color.icon', colors.N90),
-  dark: token('color.icon', '#d9dde3')
+  light: `var(--ds-icon, ${colors.N90})`,
+  dark: "var(--ds-icon, #d9dde3)"
 })(props)};
   border-radius: ${gridSize() / 2}px;
   width: 24px;
   height: 24px;
 
   &:hover {
-    background: ${token('color.background.neutral.subtle.hovered', colors.N30A)};
+    background: ${`var(--ds-background-neutral-subtle-hovered, ${colors.N30A})`};
   }
 
   svg {
@@ -123,8 +122,8 @@ const containerStyles = styleProps => {
       // https://product-fabric.atlassian.net/browse/DSP-4152
       border: 1px solid
         ${themed({
-    light: token('color.border', colors.N50A),
-    dark: token('color.border', colors.DN50)
+    light: `var(--ds-border, ${colors.N50A})`,
+    dark: `var(--ds-border, ${colors.DN50})`
   })(themeProps)};
       background: ${EXPAND_SELECTED_BACKGROUND(themeProps)};
     }
@@ -171,8 +170,8 @@ const titleInputStyles = props => css`
   line-height: ${akEditorLineHeight};
   font-weight: normal;
   color: ${themed({
-  light: token('color.text.subtlest', colors.N200A),
-  dark: token('color.text.subtlest', colors.DN600)
+  light: `var(--ds-text-subtlest, ${colors.N200A})`,
+  dark: `var(--ds-text-subtlest, ${colors.DN600})`
 })(props)};
   background: transparent;
   display: flex;
@@ -183,8 +182,8 @@ const titleInputStyles = props => css`
   &::placeholder {
     opacity: 0.6;
     color: ${themed({
-  light: token('color.text.subtlest', colors.N200A),
-  dark: token('color.text.subtlest', colors.DN600)
+  light: `var(--ds-text-subtlest, ${colors.N200A})`,
+  dark: `var(--ds-text-subtlest, ${colors.DN600})`
 })(props)};
   }
 `;
@@ -198,8 +197,8 @@ const titleContainerStyles = props => css`
   font-size: ${relativeFontSizeToBase16(fontSize())};
   width: 100%;
   color: ${themed({
-  light: token('color.text.subtle', colors.N300A),
-  dark: token('color.text.subtle', colors.DN600)
+  light: `var(--ds-text-subtle, ${colors.N300A})`,
+  dark: `var(--ds-text-subtle, ${colors.DN600})`
 })(props)};
   overflow: hidden;
   cursor: pointer;

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

@@ -5,17 +5,16 @@ import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { G400, N200, R400 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
-import { token } from '@atlaskit/tokens';
 const errorColor = css`
-  color: ${token('color.text.danger', R400)};
+  color: ${`var(--ds-text-danger, ${R400})`};
 `;
 const validColor = css`
-  color: ${token('color.text.success', G400)};
+  color: ${`var(--ds-text-success, ${G400})`};
 `;
 
 const messageStyle = props => css`
   ${h200(props)} font-weight: normal;
-  color: ${token('color.text.subtlest', N200)};
+  color: ${`var(--ds-text-subtlest, ${N200})`};
   margin-top: ${gridSize() / 2}px;
   display: flex;
   justify-content: baseline;

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

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
+import createFocusTrap from 'focus-trap';
 import rafSchedule from 'raf-schd';
 import { createPortal } from 'react-dom';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
@@ -16,6 +17,8 @@ export default class Popup extends React.Component {
       validPosition: true
     });
 
+    _defineProperty(this, "popupRef", /*#__PURE__*/React.createRef());
+
     _defineProperty(this, "placement", ['', '']);
 
     _defineProperty(this, "handleRef", popup => {
@@ -35,6 +38,24 @@ export default class Popup extends React.Component {
     _defineProperty(this, "resizeObserver", (_window = window) !== null && _window !== void 0 && _window.ResizeObserver ? new ResizeObserver(() => {
       this.scheduledUpdatePosition(this.props);
     }) : undefined);
+
+    _defineProperty(this, "initFocusTrap", rafSchedule(() => {
+      const popup = this.popupRef.current;
+
+      if (!popup) {
+        return;
+      }
+
+      const trapConfig = {
+        clickOutsideDeactivates: true,
+        escapeDeactivates: true,
+        initialFocus: popup,
+        fallbackFocus: popup,
+        returnFocusOnDeactivate: false
+      };
+      this.focusTrap = createFocusTrap(popup, trapConfig);
+      this.focusTrap.activate();
+    }));
   }
 
   /**
@@ -54,14 +75,15 @@ export default class Popup extends React.Component {
       stick,
       forcePlacement,
       allowOutOfBounds,
-      rect
+      rect,
+      preventOverflow
     } = props;
 
     if (!target || !popup) {
       return {};
     }
 
-    const placement = calculatePlacement(target, boundariesElement || document.body, fitWidth, fitHeight, alignX, alignY, forcePlacement);
+    const placement = calculatePlacement(target, boundariesElement || document.body, fitWidth, fitHeight, alignX, alignY, forcePlacement, preventOverflow);
 
     if (onPlacementChanged && this.placement.join('') !== placement.join('')) {
       onPlacementChanged(placement);
@@ -119,6 +141,7 @@ export default class Popup extends React.Component {
 
 
   initPopup(popup) {
+    this.popupRef.current = popup;
     const {
       target
     } = this.props;
@@ -144,6 +167,10 @@ export default class Popup extends React.Component {
      */
 
     this.scheduledUpdatePosition(this.props);
+
+    if (this.props.focusTrap) {
+      this.initFocusTrap();
+    }
   }
 
   UNSAFE_componentWillReceiveProps(newProps) {
@@ -152,6 +179,44 @@ export default class Popup extends React.Component {
     this.scheduledUpdatePosition(newProps);
   }
 
+  /**
+   * Cancels the initialisation of the focus trap if it has not yet occured
+   * Deactivates the focus trap if it exists
+   */
+  destroyFocusTrap() {
+    var _this$focusTrap;
+
+    this.initFocusTrap.cancel();
+    (_this$focusTrap = this.focusTrap) === null || _this$focusTrap === void 0 ? void 0 : _this$focusTrap.deactivate();
+  }
+  /**
+   * Handle pausing, unpausing, and initialising (if not yet initialised) of the focus trap
+   */
+
+
+  handleChangedFocusTrapProp(prevProps) {
+    if (prevProps.focusTrap !== this.props.focusTrap) {
+      // If currently set to disable, then pause the trap if it exists
+      if (!this.props.focusTrap) {
+        var _this$focusTrap2;
+
+        return (_this$focusTrap2 = this.focusTrap) === null || _this$focusTrap2 === void 0 ? void 0 : _this$focusTrap2.pause();
+      } // If set to enabled and trap already exists, unpause
+
+
+      if (this.focusTrap) {
+        this.focusTrap.unpause();
+      } // Else initialise the focus trap
+
+
+      return this.initFocusTrap();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    this.handleChangedFocusTrapProp(prevProps);
+  }
+
   componentDidMount() {
     window.addEventListener('resize', this.onResize);
     const {
@@ -186,6 +251,7 @@ export default class Popup extends React.Component {
     }
 
     this.scheduledUpdatePosition.cancel();
+    this.destroyFocusTrap();
   }
 
   renderPopup() {

package/dist/es2019/ui/Popup/utils.js

@@ -8,7 +8,7 @@ export function isTextNode(elem) {
  * Decides if given fitHeight fits below or above the target taking boundaries into account.
  */
 
-export function getVerticalPlacement(target, boundariesElement, fitHeight, alignY, forcePlacement) {
+export function getVerticalPlacement(target, boundariesElement, fitHeight, alignY, forcePlacement, preventOverflow) {
   if (forcePlacement && alignY) {
     return alignY;
   }
@@ -31,7 +31,13 @@ export function getVerticalPlacement(target, boundariesElement, fitHeight, align
     height: targetHeight
   } = target.getBoundingClientRect();
   const spaceAbove = targetTop - (boundariesTop - boundariesElement.scrollTop);
-  const spaceBelow = boundariesTop + boundariesHeight - (targetTop + targetHeight);
+  const spaceBelow = boundariesTop + boundariesHeight - (targetTop + targetHeight); // Force vertical placement to bottom if the space above doesn't accomodate the fitHeight
+
+  if (preventOverflow) {
+    if (spaceAbove <= fitHeight) {
+      return 'bottom';
+    }
+  }
 
   if (spaceBelow >= fitHeight || spaceBelow >= spaceAbove) {
     return 'bottom';
@@ -43,8 +49,9 @@ export function getVerticalPlacement(target, boundariesElement, fitHeight, align
  * Decides if given fitWidth fits to the left or to the right of the target taking boundaries into account.
  */
 
-export function getHorizontalPlacement(target, boundariesElement, fitWidth, alignX, forcePlacement) {
-  if (forcePlacement && alignX) {
+export function getHorizontalPlacement(target, boundariesElement, fitWidth, alignX, forcePlacement, preventOverflow) {
+  // force placement unless preventOverflow is enabled
+  if (forcePlacement && alignX && !preventOverflow) {
     return alignX;
   }
 
@@ -75,8 +82,8 @@ export function getHorizontalPlacement(target, boundariesElement, fitWidth, alig
 
   return 'right';
 }
-export function calculatePlacement(target, boundariesElement, fitWidth, fitHeight, alignX, alignY, forcePlacement) {
-  return [getVerticalPlacement(target, boundariesElement, fitHeight, alignY, forcePlacement), getHorizontalPlacement(target, boundariesElement, fitWidth, alignX, forcePlacement)];
+export function calculatePlacement(target, boundariesElement, fitWidth, fitHeight, alignX, alignY, forcePlacement, preventOverflow) {
+  return [getVerticalPlacement(target, boundariesElement, fitHeight, alignY, forcePlacement, preventOverflow), getHorizontalPlacement(target, boundariesElement, fitWidth, alignX, forcePlacement, preventOverflow)];
 }
 
 const calculateHorizontalPlacement = ({

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

@@ -6,15 +6,14 @@ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import QuestionsIcon from '@atlaskit/icon/glyph/question-circle';
 import { N30, N50 } from '@atlaskit/theme/colors';
 import { borderRadius, fontSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
+import { ACTION_SUBJECT_ID } from '../../analytics';
 import { unsupportedContentMessages } from '../../messages/unsupportedContent';
-import { ACTION_SUBJECT_ID } from '../../utils/analytics';
 import { trackUnsupportedContentTooltipDisplayedFor } from '../../utils/track-unsupported-content';
 import { getUnsupportedContent } from '../unsupported-content-helper';
 const blockNodeStyle = css`
-  background: ${token('color.background.disabled', N30)};
-  border: 1px dashed ${token('color.border.disabled', N50)};
+  background: ${`var(--ds-background-disabled, ${N30})`};
+  border: 1px dashed ${`var(--ds-border-disabled, ${N50})`};
   border-radius: ${borderRadius()}px;
   box-sizing: border-box;
   cursor: default;

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

@@ -6,16 +6,15 @@ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import QuestionsIcon from '@atlaskit/icon/glyph/question-circle';
 import { N30, N50 } from '@atlaskit/theme/colors';
 import { borderRadius, fontSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
+import { ACTION_SUBJECT_ID } from '../../analytics';
 import { unsupportedContentMessages } from '../../messages/unsupportedContent';
-import { ACTION_SUBJECT_ID } from '../../utils/analytics';
 import { trackUnsupportedContentTooltipDisplayedFor } from '../../utils/track-unsupported-content';
 import { getUnsupportedContent } from '../unsupported-content-helper';
 const inlineNodeStyle = css`
   align-items: center;
-  background: ${token('color.background.disabled', N30)};
-  border: 1px dashed ${token('color.border.disabled', N50)};
+  background: ${`var(--ds-background-disabled, ${N30})`};
+  border: 1px dashed ${`var(--ds-border-disabled, ${N50})`};
   border-radius: ${borderRadius()}px;
   box-sizing: border-box;
   cursor: default;