@jetbrains/ring-ui 6.0.34 → 6.0.36

package/babel.config.js

@@ -8,7 +8,10 @@ module.exports = function config(api) {
       ['@jetbrains/babel-preset-jetbrains', {
         typeScript: true,
         useBuiltIns: 'usage',
-        corejs: '3'
+        corejs: '3',
+        react: {
+          runtime: 'automatic'
+        }
       }]
     ],
     plugins: [

package/components/alert/alert.css

@@ -1,6 +1,5 @@
 @import "../global/variables.css";
 
-@value link from "../link/link.css";
 @value animation-duration: 300ms;
 @value animation-easing: ease-out;
 
@@ -57,12 +56,6 @@
 
   line-height: 20px;
 
-  & :global(.ring-link),
-  /* This link styles are used in link.css */
-  & .link {
-    color: var(--ring-main-color);
-  }
-
   &.withCloseButton {
     margin-right: calc(var(--ring-unit) * 5);
   }

package/components/alert/alert.d.ts

@@ -1,4 +1,5 @@
-import React, { PureComponent, ReactNode } from 'react';
+import { PureComponent, ReactNode } from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import Theme from '../global/theme';
 export declare const ANIMATION_TIME = 500;

package/components/alert/alert.js

@@ -1,4 +1,5 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
+import * as React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import exceptionIcon from '@jetbrains/icons/exception';

package/components/alert/container.d.ts

@@ -1,4 +1,4 @@
-import React, { PureComponent, HTMLAttributes } from 'react';
+import { PureComponent, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 /**
  * @name Alert Container
@@ -11,5 +11,5 @@ export default class Alerts extends PureComponent<AlertContainerProps> {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
     };
-    render(): React.ReactPortal | null;
+    render(): import("react").ReactPortal | null;
 }

package/components/alert/container.js

@@ -1,4 +1,4 @@
-import React, { Children, cloneElement, PureComponent, isValidElement } from 'react';
+import { Children, cloneElement, PureComponent, isValidElement } from 'react';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';

package/components/alert-service/alert-service.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode, Ref } from 'react';
+import { ReactNode, Ref } from 'react';
 import Alert, { AlertProps, AlertType } from '../alert/alert';
 export interface AlertItem extends Partial<Omit<AlertProps, 'children'>> {
     key: string | number;
@@ -14,7 +14,7 @@ declare class AlertService {
     containerElement: HTMLDivElement;
     reactRoot: import("react-dom/client").Root;
     _getShowingAlerts(): AlertItem[];
-    renderAlertContainer(alerts: readonly AlertItem[]): React.JSX.Element;
+    renderAlertContainer(alerts: readonly AlertItem[]): import("react").JSX.Element;
     /**
      * Renders alert container into virtual node to skip maintaining container
      */

package/components/alert-service/alert-service.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { createRoot } from 'react-dom/client';
 import getUID from '../global/get-uid';
 import Alert, { ANIMATION_TIME, Container as AlertContainer } from '../alert/alert';

package/components/auth/down-notification.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 export interface BackendDownTranslations {
     backendIsNotAvailable: string;
     checkAgain: string;

package/components/auth/down-notification.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import alertService from '../alert-service/alert-service';
 import Alert from '../alert/alert';

package/components/auth/iframe-flow.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import loginDialogService from '../login-dialog/service';
 import Link from '../link/link';
 import AuthResponseParser from './response-parser';

package/components/auth-dialog/auth-dialog.d.ts

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 /**
  * @name Auth Dialog
@@ -56,5 +56,5 @@ export default class AuthDialog extends Component<AuthDialogProps> {
     componentWillUnmount(): void;
     onEscPress: () => void;
     onRetryPress: () => Promise<void>;
-    render(): React.JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/components/auth-dialog/auth-dialog.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Content } from '../island/island';

package/components/auth-dialog-service/auth-dialog-service.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { ControlsHeightContext, getGlobalControlsHeight } from '../global/controls-height';
 import AuthDialog from '../auth-dialog/auth-dialog';

package/components/avatar/avatar.d.ts

@@ -1,4 +1,4 @@
-import React, { PureComponent, ImgHTMLAttributes } from 'react';
+import { PureComponent, ImgHTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 /**
  * @name Avatar
@@ -47,6 +47,6 @@ export default class Avatar extends PureComponent<AvatarProps> {
     };
     handleError: () => void;
     handleSuccess: () => void;
-    render(): React.JSX.Element;
+    render(): import("react").JSX.Element;
 }
 export type AvatarAttrs = JSX.LibraryManagedAttributes<typeof Avatar, AvatarProps>;

package/components/avatar/avatar.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { encodeURL, isDataURI, parseQueryString } from '../global/url';

package/components/avatar/fallback-avatar.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import PropTypes from 'prop-types';
 import { Size } from './avatar';
 export interface FallbackAvatarProps {
@@ -6,7 +6,7 @@ export interface FallbackAvatarProps {
     size: Size;
     round: boolean | null | undefined;
 }
-declare function FallbackAvatar({ username, size, round }: FallbackAvatarProps): React.JSX.Element;
+declare function FallbackAvatar({ username, size, round }: FallbackAvatarProps): import("react").JSX.Element;
 declare namespace FallbackAvatar {
     var propTypes: {
         username: PropTypes.Validator<string>;

package/components/avatar/fallback-avatar.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import getUID from '../global/get-uid';
 const colorPairs = [

package/components/badge/badge.d.ts

@@ -1,4 +1,4 @@
-import React, { PureComponent, HTMLAttributes } from 'react';
+import { PureComponent, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 export interface BadgeProps extends HTMLAttributes<HTMLElement> {
     gray?: boolean | null | undefined;
@@ -20,5 +20,5 @@ export default class Badge extends PureComponent<BadgeProps> {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         'data-test': PropTypes.Requireable<string>;
     };
-    render(): React.JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/components/badge/badge.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import dataTests from '../global/data-tests';

package/components/breadcrumbs/breadcrumbs.css

@@ -0,0 +1,7 @@
+.separator {
+  margin: 0 var(--ring-unit);
+
+  color: var(--ring-borders-color);
+
+  font-size: 16px;
+}

package/components/breadcrumbs/breadcrumbs.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export interface BreadcrumbsSeparatorAttrs {
+    separatorClassName?: string | null | undefined;
+    children?: ReactNode;
+}
+export default function Breadcrumbs({ separatorClassName, children }: BreadcrumbsSeparatorAttrs): import("react").JSX.Element[];

package/components/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,11 @@
+import classNames from 'classnames';
+import { Children, Fragment } from 'react';
+import styles from './breadcrumbs.css';
+export default function Breadcrumbs({ separatorClassName, children }) {
+    return Children.toArray(children).map((child, index) => (
+    // eslint-disable-next-line react/no-array-index-key
+    <Fragment key={index}>
+      {index > 0 && <span className={classNames(styles.separator, separatorClassName)}>{'/'}</span>}
+      {child}
+    </Fragment>));
+}

package/components/button/button.d.ts

@@ -1,4 +1,5 @@
-import React, { PureComponent, ButtonHTMLAttributes } from 'react';
+import { PureComponent, ButtonHTMLAttributes } from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import { IconProps, IconType, Size } from '../icon/icon';
 import { ClickableLinkProps } from '../link/clickableLink';

package/components/button/button.js

@@ -1,4 +1,5 @@
-import React, { createRef, PureComponent } from 'react';
+import { createRef, PureComponent } from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import chevronDown from '@jetbrains/icons/chevron-10px';

package/components/button-group/button-group.css

@@ -40,7 +40,7 @@
 .buttonGroup .button[disabled] {
   --ring-button-group-button-border-color: var(--ring-border-disabled-color);
 
-  /* stylelint-disable-next-line selector-max-specificity */
+  /* stylelint-disable selector-max-specificity */
   &::before,
   &::after {
     position: absolute;
@@ -57,15 +57,14 @@
     box-shadow: 0 1px var(--ring-border-disabled-color) inset, 0 -1px var(--ring-border-disabled-color) inset;
   }
 
-  /* stylelint-disable-next-line selector-max-specificity */
   &::before {
     left: calc(var(--ring-border-radius) * -1);
   }
 
-  /* stylelint-disable-next-line selector-max-specificity */
   &::after {
     right: calc(var(--ring-border-radius) * -1);
   }
+  /* stylelint-enable */
 }
 
 .buttonGroup > .button:first-child,
@@ -102,36 +101,32 @@
   }
 }
 
-/* stylelint-disable-next-line selector-max-specificity */
+/* stylelint-disable selector-max-specificity */
 .buttonGroup .button.button:hover:not(:disabled),
-/* stylelint-disable-next-line selector-max-specificity */
 .buttonGroup .button.button:active:not(:disabled) {
   border-radius: var(--ring-border-radius);
   box-shadow: button-shadow var(--ring-border-hover-color);
 }
 
-/* stylelint-disable-next-line selector-max-specificity */
 .buttonGroup .button.button:focus-visible {
   border-radius: var(--ring-border-radius);
   box-shadow: button-shadow var(--ring-border-hover-color), 0 0 0 1px var(--ring-border-hover-color);
 }
 
-/* stylelint-disable-next-line selector-max-specificity */
 .buttonGroup .button.button.active {
   border-radius: var(--ring-border-radius);
   box-shadow: button-shadow var(--ring-main-color);
 }
 
-/* stylelint-disable-next-line selector-max-specificity */
 .buttonGroup .button:focus-visible.active {
   border-radius: var(--ring-border-radius);
   box-shadow: button-shadow var(--ring-main-color), 0 0 0 1px var(--ring-border-hover-color);
 }
 
-/* stylelint-disable-next-line selector-max-specificity */
 .buttonGroup .button.active[disabled] {
   box-shadow: button-shadow var(--ring-border-selected-disabled-color);
 }
+/* stylelint-enable */
 
 .split {
   composes: common;
@@ -172,13 +167,14 @@
   border-bottom-left-radius: var(--ring-border-radius);
 }
 
-/* stylelint-disable-next-line selector-max-specificity */
+/* stylelint-disable selector-max-specificity */
 .common > button:first-child > div:first-child,
 .common > .button:first-child > div:first-child,
 .common > :first-child .button > div:first-child {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
+/* stylelint-enable */
 
 .common > .button:last-child,
 .common > button:last-child,
@@ -187,13 +183,14 @@
   border-bottom-right-radius: var(--ring-border-radius);
 }
 
-/* stylelint-disable-next-line selector-max-specificity */
+/* stylelint-disable selector-max-specificity */
 .common > .button:last-child > div:first-child,
 .common > button:last-child > div:first-child,
 .common > :last-child .button > div:first-child {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
+/* stylelint-enable */
 
 .split .primary:not(:last-child) {
   margin-right: 1px;
@@ -234,3 +231,7 @@
     }
   }
 }
+
+.help {
+  margin-top: calc(var(--ring-unit) * 0.5);
+}

package/components/button-group/button-group.d.ts

@@ -1,9 +1,11 @@
-import React, { PureComponent, HTMLAttributes } from 'react';
+import { PureComponent, HTMLAttributes, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import Caption from './caption';
 export interface ButtonGroupProps extends HTMLAttributes<HTMLElement> {
     split?: boolean | null | undefined;
     'data-test'?: string | null | undefined;
+    label?: ReactNode;
+    help?: ReactNode;
 }
 /**
  * @name Button Group
@@ -13,6 +15,6 @@ export default class ButtonGroup extends PureComponent<ButtonGroupProps> {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
     };
-    render(): React.JSX.Element;
+    render(): import("react").JSX.Element;
 }
 export { Caption };

package/components/button-group/button-group.js

@@ -1,7 +1,9 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import dataTests from '../global/data-tests';
+import ControlLabel from '../control-label/control-label';
+import ControlHelp from '../control-help/control-help';
 import Caption from './caption';
 import styles from './button-group.css';
 /**
@@ -13,9 +15,13 @@ export default class ButtonGroup extends PureComponent {
         className: PropTypes.string
     };
     render() {
-        const { className, split, 'data-test': dataTest, ...restProps } = this.props;
+        const { className, split, 'data-test': dataTest, label, help, ...restProps } = this.props;
         const classes = classNames(split ? styles.split : styles.buttonGroup, className);
-        return (<div {...restProps} data-test={dataTests('ring-button-group', dataTest)} className={classes}/>);
+        return (<>
+        {label && <ControlLabel>{label}</ControlLabel>}
+        <div {...restProps} data-test={dataTests('ring-button-group', dataTest)} className={classes}/>
+        {help && <ControlHelp className={styles.help}>{help}</ControlHelp>}
+      </>);
     }
 }
 export { Caption };

package/components/button-group/caption.d.ts

@@ -1,8 +1,8 @@
-import React, { PureComponent, HTMLAttributes } from 'react';
+import { PureComponent, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 export default class Caption extends PureComponent<HTMLAttributes<HTMLElement>> {
     static propTypes: {
         className: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
-    render(): React.JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/components/button-group/caption.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import styles from './button-group.css';

package/components/button-set/button-set.d.ts

@@ -1,4 +1,4 @@
-import React, { PureComponent, HTMLAttributes } from 'react';
+import { PureComponent, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 export interface ButtonSetProps extends HTMLAttributes<HTMLElement> {
     'data-test'?: string | null | undefined;
@@ -12,5 +12,5 @@ export default class ButtonSet extends PureComponent<ButtonSetProps> {
         className: PropTypes.Requireable<string>;
         'data-test': PropTypes.Requireable<string>;
     };
-    render(): React.JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/components/button-set/button-set.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import dataTests from '../global/data-tests';

package/components/button-toolbar/button-toolbar.d.ts

@@ -1,4 +1,4 @@
-import React, { PureComponent, HTMLAttributes } from 'react';
+import { PureComponent, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 export interface ButtonToolbarProps extends HTMLAttributes<HTMLElement> {
     'data-test'?: string | null | undefined;
@@ -12,5 +12,5 @@ export default class ButtonToolbar extends PureComponent<ButtonToolbarProps> {
         className: PropTypes.Requireable<string>;
         'data-test': PropTypes.Requireable<string>;
     };
-    render(): React.JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/components/button-toolbar/button-toolbar.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import dataTests from '../global/data-tests';

package/components/checkbox/checkbox.css

@@ -5,7 +5,8 @@
 .checkbox {
   position: relative;
 
-  display: inline-block;
+  display: inline-flex;
+  align-items: baseline;
 
   text-align: left;
 
@@ -79,28 +80,26 @@
 
   opacity: 0;
 
-  /* stylelint-disable-next-line selector-max-specificity */
-  &:checked + .cell,
-  &:indeterminate + .cell {
+  /* stylelint-disable selector-max-specificity */
+  &:checked + .cellWrapper .cell,
+  &:indeterminate + .cellWrapper .cell {
     border-color: transparent;
     background-color: var(--ring-main-color);
   }
 
-  /* stylelint-disable-next-line selector-max-specificity */
-  &:checked + .cell .check {
+  &:checked + .cellWrapper .check {
     opacity: 1;
   }
 
-  &:focus-visible + .cell,
-  &.focus + .cell {
+  &:focus-visible + .cellWrapper .cell,
+  &.focus + .cellWrapper .cell {
     transition: background-color var(--ring-ease);
 
     border-color: var(--ring-border-hover-color);
     box-shadow: 0 0 0 1px var(--ring-border-hover-color);
   }
 
-  /* stylelint-disable-next-line selector-max-specificity */
-  &:indeterminate + .cell .minus {
+  &:indeterminate + .cellWrapper .minus {
     opacity: 1;
   }
 
@@ -108,31 +107,28 @@
     pointer-events: none;
   }
 
-  /* stylelint-disable-next-line selector-max-specificity */
-  &[disabled][disabled] + .cell {
+  &[disabled][disabled] + .cellWrapper .cell {
     border-color: var(--ring-border-disabled-color);
     background-color: var(--ring-disabled-background-color);
   }
 
-  /* stylelint-disable-next-line selector-max-specificity */
-  &[disabled]:checked + .cell,
-  &[disabled]:indeterminate + .cell {
+  &[disabled]:checked + .cellWrapper .cell,
+  &[disabled]:indeterminate + .cellWrapper .cell {
     border-color: var(--ring-border-selected-disabled-color);
     background-color: var(--ring-border-selected-disabled-color);
   }
 
-  /* stylelint-disable-next-line selector-max-specificity */
-  &[disabled]:checked + .cell .check,
-  &[disabled]:indeterminate + .cell .minus {
+  &[disabled]:checked + .cellWrapper .check,
+  &[disabled]:indeterminate + .cellWrapper .minus {
     color: var(--ring-disabled-background-color);
   }
 
-  /* stylelint-disable-next-line selector-max-specificity */
-  &:indeterminate:indeterminate + .cell .check {
+  &:indeterminate:indeterminate + .cellWrapper .check {
     transition: none;
 
     opacity: 0;
   }
+  /* stylelint-enable */
 
   &[disabled] ~ .label {
     color: var(--ring-disabled-color);

package/components/checkbox/checkbox.d.ts

@@ -1,4 +1,4 @@
-import React, { PureComponent, InputHTMLAttributes, CSSProperties, Ref } from 'react';
+import { PureComponent, InputHTMLAttributes, CSSProperties, Ref, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
     label?: string | null | undefined;
@@ -8,6 +8,7 @@ export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
     labelClassName?: string | null | undefined;
     indeterminate: boolean;
     inputRef?: Ref<HTMLInputElement>;
+    help?: ReactNode;
 }
 /**
  * @name Checkbox
@@ -41,5 +42,5 @@ export default class Checkbox extends PureComponent<CheckboxProps> {
     componentDidUpdate(prevProps: CheckboxProps): void;
     input?: HTMLInputElement | null;
     inputRef: (el: HTMLInputElement | null) => void;
-    render(): React.JSX.Element;
+    render(): import("react").JSX.Element;
 }

package/components/checkbox/checkbox.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import checkmarkIcon from '@jetbrains/icons/checkmark-12px';
@@ -6,6 +6,7 @@ import minusIcon from '@jetbrains/icons/remove-12px';
 import Icon from '../icon/icon';
 import { refObject } from '../global/prop-types';
 import composeRefs from '../global/composeRefs';
+import ControlHelp from '../control-help/control-help';
 import styles from './checkbox.css';
 /**
  * @name Checkbox
@@ -55,18 +56,23 @@ export default class Checkbox extends PureComponent {
         this.input = el;
     };
     render() {
-        const { children, label, className, containerClassName, containerStyle, cellClassName, labelClassName, indeterminate, inputRef, ...restProps } = this.props;
+        const { children, label, className, containerClassName, containerStyle, cellClassName, labelClassName, indeterminate, inputRef, help, ...restProps } = this.props;
         const classes = classNames(styles.input, className);
         const containerClasses = classNames(styles.checkbox, containerClassName);
         const cellClasses = classNames(styles.cell, cellClassName);
         const labelClasses = classNames(styles.label, labelClassName);
         return (<label className={containerClasses} style={containerStyle} data-test="ring-checkbox">
         <input {...restProps} data-checked={restProps.checked} ref={composeRefs(this.inputRef, inputRef)} type="checkbox" className={classes}/>
-        <span className={cellClasses}>
-          <Icon glyph={checkmarkIcon} className={styles.check}/>
-          <Icon glyph={minusIcon} className={styles.minus}/>
+        <div className={styles.cellWrapper}>
+          <span className={cellClasses}>
+            <Icon glyph={checkmarkIcon} className={styles.check}/>
+            <Icon glyph={minusIcon} className={styles.minus}/>
+          </span>
+        </div>
+        <span className={labelClasses}>
+          {label || children}
+          {help && <ControlHelp>{help}</ControlHelp>}
         </span>
-        <span className={labelClasses}>{label || children}</span>
       </label>);
     }
 }

package/components/code/code.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="highlight.js" />
-import React, { PureComponent, Ref } from 'react';
+import { PureComponent, Ref } from 'react';
 import PropTypes from 'prop-types';
 import highlight from 'highlight.js/lib/core';
 declare function noop(): void;
@@ -37,8 +37,8 @@ export default class Code extends PureComponent<CodeProps> {
     code?: HTMLElement | null;
     highlight(): Promise<void>;
     get codeRef(): HTMLElement | null | undefined;
-    get initCodeRef(): React.RefObject<HTMLElement> | ((ref: HTMLElement | null) => void);
-    render(): React.JSX.Element;
+    get initCodeRef(): import("react").RefObject<HTMLElement> | ((ref: HTMLElement | null) => void);
+    render(): import("react").JSX.Element;
 }
 declare const code: (strings: TemplateStringsArray, ...interpolations: unknown[]) => void;
 export { code, highlight };

package/components/code/code.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import highlight from 'highlight.js/lib/core';