@jetbrains/ring-ui 5.0.0-beta.2 → 5.0.0-beta.22

package/components/toggle/toggle.css

@@ -9,10 +9,10 @@
 .toggle {
   cursor: pointer;
 
-  &:hover {
-    & .switch {
-      background-color: var(--ring-border-hover-color);
-    }
+  &:hover .switch {
+    transition: none;
+
+    background-color: var(--ring-border-hover-color);
   }
 
   &.disabled {
@@ -21,42 +21,17 @@
 }
 
 .label {
-  margin-left: calc(unit / 2);
+  margin-left: unit;
 }
 
 .leftLabel {
-  margin-right: calc(unit / 2);
-}
-
-.light {
-  & .switch {
-    background-color: var(--ring-icon-color);
-
-    &::before {
-      background-color: var(--ring-content-background-color);
-    }
-  }
-}
-
-.dark {
-  & .switch {
-    background-color: var(--ring-hint-color);
-
-    &::before {
-      background-color: var(--ring-navigation-background-color);
-    }
-  }
+  margin-right: unit;
 }
 
 .switchWrapper {
   position: relative;
 
   display: inline-block;
-
-  width: calc(unit * 3);
-  height: calc(unit * 2);
-
-  vertical-align: -3px;
 }
 
 .input {
@@ -82,12 +57,12 @@
 
   transition: background-color timing-function duration;
 
+  background-color: var(--ring-icon-color);
+
   @nest .input:focus + & {
     box-shadow: inset 0 0 0 1px var(--ring-border-hover-color), 0 0 0 1px var(--ring-border-hover-color);
   }
 
-  border-radius: unit;
-
   &::before {
     position: absolute;
     top: padding;
@@ -103,6 +78,7 @@
     transform: translateX(padding);
 
     border-radius: calc(unit * 0.75);
+    background-color: var(--ring-content-background-color);
   }
 }
 
@@ -110,8 +86,58 @@
   background-color: var(--ring-main-color);
 }
 
-.input:checked + ::before {
-  transform: translateX(calc(unit * 1.5 - padding));
+:checked:hover + .switch {
+  background-color: var(--ring-main-hover-color);
+}
+
+.size16 {
+  & .switchWrapper {
+    width: calc(unit * 3);
+    height: calc(unit * 2);
+
+    vertical-align: -3px;
+  }
+
+  & .switch {
+    border-radius: unit;
+
+    &::before {
+      width: calc(unit * 1.5);
+      height: calc(unit * 1.5);
+
+      border-radius: calc(unit * 0.75);
+    }
+  }
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  & .input:checked + ::before {
+    transform: translateX(calc(unit * 1.5 - padding));
+  }
+}
+
+.size14 {
+  & .switchWrapper {
+    width: calc(unit * 3);
+    height: 14px;
+
+    vertical-align: -2px;
+  }
+
+  & .switch {
+    border-radius: 7px;
+
+    &::before {
+      width: 10px;
+      height: 10px;
+
+      border-radius: 5px;
+    }
+  }
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  & .input:checked + ::before {
+    transform: translateX(12px);
+  }
 }
 
 .size20 {

package/components/toggle/toggle.d.ts

@@ -1,18 +1,18 @@
-import React, { ComponentPropsWithRef, InputHTMLAttributes, PureComponent, ReactNode } from 'react';
+import { InputHTMLAttributes, PureComponent, ReactNode } from 'react';
 import PropTypes from 'prop-types';
-import { ThemeProps } from '../global/theme';
 export declare const Size: {
+    Size14: string;
     Size16: string;
     Size20: string;
 };
 /**
   * @name Toggle
   */
-export interface ToggleProps extends ThemeProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+export interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    size: string;
     pale?: boolean | null | undefined;
     leftLabel?: ReactNode;
     'data-test'?: string | null | undefined;
-    size?: string | null | undefined;
 }
 declare class Toggle extends PureComponent<ToggleProps> {
     static propTypes: {
@@ -27,93 +27,13 @@ declare class Toggle extends PureComponent<ToggleProps> {
         pale: PropTypes.Requireable<boolean>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         onTransitionEnd: PropTypes.Requireable<(...args: any[]) => any>;
-        theme: PropTypes.Requireable<string>;
         size: PropTypes.Requireable<string>;
         'data-test': PropTypes.Requireable<string>;
     };
+    static defaultProps: {
+        size: string;
+    };
     render(): JSX.Element;
 }
-declare const ThemedToggle: React.NamedExoticComponent<Omit<(Pick<ToggleProps, "className" | "src" | "color" | "height" | "id" | "lang" | "max" | "min" | "name" | "style" | "type" | "width" | "role" | "tabIndex" | "crossOrigin" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "dir" | "form" | "slot" | "title" | "pattern" | "list" | "size" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "step" | "theme" | "value" | "multiple" | "disabled" | "data-test" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "alt" | "required" | "accept" | "autoComplete" | "capture" | "checked" | "enterKeyHint" | "maxLength" | "minLength" | "readOnly" | "pale" | "leftLabel"> & Pick<PropTypes.InferProps<{
-    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    name: PropTypes.Requireable<string>;
-    className: PropTypes.Requireable<string>;
-    title: PropTypes.Requireable<string>;
-    leftLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    defaultChecked: PropTypes.Requireable<boolean>;
-    checked: PropTypes.Requireable<boolean>;
-    disabled: PropTypes.Requireable<boolean>;
-    pale: PropTypes.Requireable<boolean>;
-    onChange: PropTypes.Requireable<(...args: any[]) => any>;
-    onTransitionEnd: PropTypes.Requireable<(...args: any[]) => any>;
-    theme: PropTypes.Requireable<string>;
-    size: PropTypes.Requireable<string>;
-    'data-test': PropTypes.Requireable<string>;
-}>, never> & Pick<ToggleProps, "src" | "color" | "height" | "id" | "lang" | "max" | "min" | "style" | "type" | "width" | "role" | "tabIndex" | "crossOrigin" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEndCapture" | "dir" | "form" | "slot" | "pattern" | "list" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "step" | "value" | "multiple" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "alt" | "required" | "accept" | "autoComplete" | "capture" | "enterKeyHint" | "maxLength" | "minLength" | "readOnly">) | (Pick<ToggleProps, "className" | "src" | "color" | "height" | "id" | "lang" | "max" | "min" | "name" | "style" | "type" | "width" | "role" | "tabIndex" | "crossOrigin" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "dir" | "form" | "slot" | "title" | "pattern" | "list" | "size" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "step" | "theme" | "value" | "multiple" | "disabled" | "data-test" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "alt" | "required" | "accept" | "autoComplete" | "capture" | "checked" | "enterKeyHint" | "maxLength" | "minLength" | "readOnly" | "pale" | "leftLabel"> & Pick<PropTypes.InferProps<React.WeakValidationMap<ToggleProps> & {
-    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    name: PropTypes.Requireable<string>;
-    className: PropTypes.Requireable<string>;
-    title: PropTypes.Requireable<string>;
-    leftLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    defaultChecked: PropTypes.Requireable<boolean>;
-    checked: PropTypes.Requireable<boolean>;
-    disabled: PropTypes.Requireable<boolean>;
-    pale: PropTypes.Requireable<boolean>;
-    onChange: PropTypes.Requireable<(...args: any[]) => any>;
-    onTransitionEnd: PropTypes.Requireable<(...args: any[]) => any>;
-    theme: PropTypes.Requireable<string>;
-    size: PropTypes.Requireable<string>;
-    'data-test': PropTypes.Requireable<string>;
-}>, "inlist"> & Pick<ToggleProps, never>), "theme"> & import("../global/theme").ThemeOuterProps & React.RefAttributes<Toggle>> & {
-    readonly type: React.ForwardRefExoticComponent<Omit<(Pick<ToggleProps, "className" | "src" | "color" | "height" | "id" | "lang" | "max" | "min" | "name" | "style" | "type" | "width" | "role" | "tabIndex" | "crossOrigin" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "dir" | "form" | "slot" | "title" | "pattern" | "list" | "size" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "step" | "theme" | "value" | "multiple" | "disabled" | "data-test" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "alt" | "required" | "accept" | "autoComplete" | "capture" | "checked" | "enterKeyHint" | "maxLength" | "minLength" | "readOnly" | "pale" | "leftLabel"> & Pick<PropTypes.InferProps<{
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        name: PropTypes.Requireable<string>;
-        className: PropTypes.Requireable<string>;
-        title: PropTypes.Requireable<string>;
-        leftLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        defaultChecked: PropTypes.Requireable<boolean>;
-        checked: PropTypes.Requireable<boolean>;
-        disabled: PropTypes.Requireable<boolean>;
-        pale: PropTypes.Requireable<boolean>;
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        onTransitionEnd: PropTypes.Requireable<(...args: any[]) => any>;
-        theme: PropTypes.Requireable<string>;
-        size: PropTypes.Requireable<string>;
-        'data-test': PropTypes.Requireable<string>;
-    }>, never> & Pick<ToggleProps, "src" | "color" | "height" | "id" | "lang" | "max" | "min" | "style" | "type" | "width" | "role" | "tabIndex" | "crossOrigin" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEndCapture" | "dir" | "form" | "slot" | "pattern" | "list" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "step" | "value" | "multiple" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "alt" | "required" | "accept" | "autoComplete" | "capture" | "enterKeyHint" | "maxLength" | "minLength" | "readOnly">) | (Pick<ToggleProps, "className" | "src" | "color" | "height" | "id" | "lang" | "max" | "min" | "name" | "style" | "type" | "width" | "role" | "tabIndex" | "crossOrigin" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "dir" | "form" | "slot" | "title" | "pattern" | "list" | "size" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "step" | "theme" | "value" | "multiple" | "disabled" | "data-test" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "alt" | "required" | "accept" | "autoComplete" | "capture" | "checked" | "enterKeyHint" | "maxLength" | "minLength" | "readOnly" | "pale" | "leftLabel"> & Pick<PropTypes.InferProps<React.WeakValidationMap<ToggleProps> & {
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        name: PropTypes.Requireable<string>;
-        className: PropTypes.Requireable<string>;
-        title: PropTypes.Requireable<string>;
-        leftLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        defaultChecked: PropTypes.Requireable<boolean>;
-        checked: PropTypes.Requireable<boolean>;
-        disabled: PropTypes.Requireable<boolean>;
-        pale: PropTypes.Requireable<boolean>;
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        onTransitionEnd: PropTypes.Requireable<(...args: any[]) => any>;
-        theme: PropTypes.Requireable<string>;
-        size: PropTypes.Requireable<string>;
-        'data-test': PropTypes.Requireable<string>;
-    }>, "inlist"> & Pick<ToggleProps, never>), "theme"> & import("../global/theme").ThemeOuterProps & React.RefAttributes<Toggle>>;
-} & {
-    prototype: Toggle;
-    propTypes: {
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        name: PropTypes.Requireable<string>;
-        className: PropTypes.Requireable<string>;
-        title: PropTypes.Requireable<string>;
-        leftLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        defaultChecked: PropTypes.Requireable<boolean>;
-        checked: PropTypes.Requireable<boolean>;
-        disabled: PropTypes.Requireable<boolean>;
-        pale: PropTypes.Requireable<boolean>;
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        onTransitionEnd: PropTypes.Requireable<(...args: any[]) => any>;
-        theme: PropTypes.Requireable<string>;
-        size: PropTypes.Requireable<string>;
-        'data-test': PropTypes.Requireable<string>;
-    };
-    contextType?: React.Context<any> | undefined;
-};
-export declare type ToggleAttrs = ComponentPropsWithRef<typeof ThemedToggle>;
-export default ThemedToggle;
+export declare type ToggleAttrs = JSX.LibraryManagedAttributes<typeof Toggle, ToggleProps>;
+export default Toggle;

package/components/toggle/{toggle.jsx → toggle.js}

@@ -1,10 +1,10 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { withTheme } from '../global/theme';
 import dataTests from '../global/data-tests';
 import styles from './toggle.css';
 export const Size = {
+    Size14: styles.size14,
     Size16: styles.size16,
     Size20: styles.size20
 };
@@ -21,13 +21,15 @@ class Toggle extends PureComponent {
         pale: PropTypes.bool,
         onChange: PropTypes.func,
         onTransitionEnd: PropTypes.func,
-        theme: PropTypes.string,
         size: PropTypes.oneOf(Object.values(Size)),
         'data-test': PropTypes.string
     };
+    static defaultProps = {
+        size: Size.Size14
+    };
     render() {
-        const { className, children, disabled, pale, title, leftLabel, theme, size = Size.Size16, 'data-test': dataTest, onTransitionEnd, ...restProps } = this.props;
-        const classes = classNames(className, size, styles.toggle, styles[theme], disabled && styles.disabled);
+        const { className, children, disabled, pale, title, leftLabel, size = Size.Size16, 'data-test': dataTest, onTransitionEnd, ...restProps } = this.props;
+        const classes = classNames(className, size, styles.toggle, disabled && styles.disabled);
         return (<label className={classes} title={title} data-test={dataTests('ring-toggle', dataTest)}>
         {leftLabel && <span className={styles.leftLabel}>{leftLabel}</span>}
 
@@ -41,6 +43,4 @@ class Toggle extends PureComponent {
       </label>);
     }
 }
-const ThemedToggle = withTheme()(Toggle);
-ThemedToggle.propTypes = Toggle.propTypes;
-export default ThemedToggle;
+export default Toggle;

package/components/tooltip/tooltip.css

@@ -8,3 +8,10 @@
 
   text-align: left;
 }
+
+.long {
+  padding: unit calc(unit * 1.5);
+
+  font-size: var(--ring-font-size-smaller);
+  line-height: var(--ring-line-height-lowest);
+}

package/components/tooltip/tooltip.d.ts

@@ -13,6 +13,7 @@ export interface TooltipProps extends Omit<AllHTMLAttributes<HTMLSpanElement>, '
     popupProps?: Partial<PopupAttrs> | null | undefined;
     title?: ReactNode | null | undefined;
     'data-test'?: string | null | undefined;
+    long?: boolean | null | undefined;
 }
 /**
  * @name Tooltip

package/components/tooltip/{tooltip.jsx → tooltip.js}

@@ -1,5 +1,6 @@
 import React, { Component, createContext } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import Popup from '../popup/popup';
 import { Listeners } from '../global/dom';
 import dataTests from '../global/data-tests';
@@ -110,7 +111,7 @@ export default class Tooltip extends Component {
         this.setState({ showNestedPopup: false });
     };
     render() {
-        const { children, 'data-test': dataTest, title, delay, selfOverflowOnly, popupProps, ...restProps } = this.props;
+        const { children, 'data-test': dataTest, title, delay, selfOverflowOnly, popupProps, long, ...restProps } = this.props;
         const ariaProps = typeof title === 'string' && !!title
             ? { 'aria-label': title, role: 'tooltip' }
             : {};
@@ -118,7 +119,7 @@ export default class Tooltip extends Component {
         return (<TooltipContext.Provider value={{ onNestedTooltipShow, onNestedTooltipHide }}>
         <span {...ariaProps} {...restProps} ref={this.containerRef} data-test={dataTests('ring-tooltip', dataTest)} data-test-title={typeof title === 'string' ? title : undefined}>
           {children}
-          <Popup trapFocus={false} hidden={!this.state.showPopup || this.state.showNestedPopup} onCloseAttempt={this.hidePopup} maxHeight={400} className={styles.tooltip} attached={false} top={4} dontCloseOnAnchorClick ref={this.popupRef} {...popupProps}>{title}</Popup>
+          <Popup trapFocus={false} hidden={!this.state.showPopup || this.state.showNestedPopup} onCloseAttempt={this.hidePopup} maxHeight={400} className={classNames(styles.tooltip, { [styles.long]: long })} attached={false} top={4} dontCloseOnAnchorClick ref={this.popupRef} {...popupProps}>{title}</Popup>
         </span>
       </TooltipContext.Provider>);
     }

package/components/tooltip-ng/tooltip-ng.js

@@ -1,9 +1,9 @@
 import angular from 'angular';
 
 import {createElement} from 'react';
-import {render} from 'react-dom';
 import classNames from 'classnames';
 
+import {render} from '../global/react-render-adapter';
 import Popup from '../popup/popup';
 
 import './tooltip-ng.css';
@@ -58,15 +58,18 @@ name.factory('RgTooltipPopup', function RgTooltipPopupDirective() {
       trapFocus: false
     };
 
-    this.renderPopup = props => {
-      this.popup = render(
-        createElement(Popup, {
-          ...this.defaultProps,
-          ...props
-        }, this.text),
-        this.wrapperElement
-      );
-    };
+    this.renderPopup = props => render(
+      createElement(Popup, {
+        ...this.defaultProps,
+        ...props,
+        ref: instance => {
+          if (instance != null) {
+            this.popup = instance;
+          }
+        }
+      }, this.text),
+      this.wrapperElement
+    );
 
     this.displayTooltip = customClass => {
       const text = textGetter();

package/components/user-agreement/service.d.ts

@@ -75,37 +75,13 @@ export default class UserAgreementService {
             remindLater: import("prop-types").Validator<string>;
         }>>;
         className: import("prop-types").Requireable<string>;
-    }>, never> & Pick<import("./user-agreement").UserAgreementProps, never>, "className" | "text" | "preview" | "onRemindLater"> & Partial<Pick<Pick<import("./user-agreement").UserAgreementProps, keyof import("./user-agreement").UserAgreementProps> & Pick<import("prop-types").InferProps<{
-        show: import("prop-types").Requireable<boolean>;
-        preview: import("prop-types").Requireable<boolean>;
-        text: import("prop-types").Validator<string>;
-        onAccept: import("prop-types").Requireable<(...args: any[]) => any>;
-        onDecline: import("prop-types").Requireable<(...args: any[]) => any>;
-        onClose: import("prop-types").Requireable<(...args: any[]) => any>;
-        onRemindLater: import("prop-types").Requireable<(...args: any[]) => any>;
-        translations: import("prop-types").Requireable<import("prop-types").InferProps<{
-            userAgreement: import("prop-types").Validator<string>;
-            accept: import("prop-types").Validator<string>;
-            decline: import("prop-types").Validator<string>;
-            close: import("prop-types").Validator<string>;
-            scrollToAccept: import("prop-types").Validator<string>;
-            remindLater: import("prop-types").Validator<string>;
-        }>>;
-        className: import("prop-types").Requireable<string>;
-    }>, never> & Pick<import("./user-agreement").UserAgreementProps, never>, "show" | "onClose" | "translations" | "onAccept" | "onDecline">> & Partial<Pick<{
-        translations: {
-            userAgreement: string;
-            accept: string;
-            decline: string;
-            close: string;
-            scrollToAccept: string;
-            remindLater: string;
-        };
-        show: boolean;
-        onAccept: () => void;
-        onDecline: () => void;
-        onClose: () => void;
-    }, never>>> | undefined) => Promise<unknown>;
+    }>, never> & Pick<import("./user-agreement").UserAgreementProps, never>, "className" | "text" | "preview" | "onRemindLater"> & {
+        onClose?: (() => void) | undefined;
+        show?: boolean | undefined;
+        translations?: UserAgreementTranslations | undefined;
+        onAccept?: (() => void) | undefined;
+        onDecline?: (() => void) | undefined;
+    } & {}> | undefined) => Promise<unknown>;
     hideDialog: (withoutNotifications?: boolean | undefined) => void;
     showDialogOrAlert: (withoutNotifications?: boolean | undefined, preview?: boolean | undefined, restOptions?: Partial<Pick<Pick<import("./user-agreement").UserAgreementProps, keyof import("./user-agreement").UserAgreementProps> & Pick<import("prop-types").InferProps<{
         show: import("prop-types").Requireable<boolean>;
@@ -124,37 +100,13 @@ export default class UserAgreementService {
             remindLater: import("prop-types").Validator<string>;
         }>>;
         className: import("prop-types").Requireable<string>;
-    }>, never> & Pick<import("./user-agreement").UserAgreementProps, never>, "className" | "text" | "preview" | "onRemindLater"> & Partial<Pick<Pick<import("./user-agreement").UserAgreementProps, keyof import("./user-agreement").UserAgreementProps> & Pick<import("prop-types").InferProps<{
-        show: import("prop-types").Requireable<boolean>;
-        preview: import("prop-types").Requireable<boolean>;
-        text: import("prop-types").Validator<string>;
-        onAccept: import("prop-types").Requireable<(...args: any[]) => any>;
-        onDecline: import("prop-types").Requireable<(...args: any[]) => any>;
-        onClose: import("prop-types").Requireable<(...args: any[]) => any>;
-        onRemindLater: import("prop-types").Requireable<(...args: any[]) => any>;
-        translations: import("prop-types").Requireable<import("prop-types").InferProps<{
-            userAgreement: import("prop-types").Validator<string>;
-            accept: import("prop-types").Validator<string>;
-            decline: import("prop-types").Validator<string>;
-            close: import("prop-types").Validator<string>;
-            scrollToAccept: import("prop-types").Validator<string>;
-            remindLater: import("prop-types").Validator<string>;
-        }>>;
-        className: import("prop-types").Requireable<string>;
-    }>, never> & Pick<import("./user-agreement").UserAgreementProps, never>, "show" | "onClose" | "translations" | "onAccept" | "onDecline">> & Partial<Pick<{
-        translations: {
-            userAgreement: string;
-            accept: string;
-            decline: string;
-            close: string;
-            scrollToAccept: string;
-            remindLater: string;
-        };
-        show: boolean;
-        onAccept: () => void;
-        onDecline: () => void;
-        onClose: () => void;
-    }, never>>> | undefined) => Promise<unknown>;
+    }>, never> & Pick<import("./user-agreement").UserAgreementProps, never>, "className" | "text" | "preview" | "onRemindLater"> & {
+        onClose?: (() => void) | undefined;
+        show?: boolean | undefined;
+        translations?: UserAgreementTranslations | undefined;
+        onAccept?: (() => void) | undefined;
+        onDecline?: (() => void) | undefined;
+    } & {}> | undefined) => Promise<unknown>;
     hideDialogAndAlert: (withoutNotifications?: boolean | undefined) => void;
     onAccept: () => Promise<void>;
     onDecline: () => void;

package/components/user-agreement/{service.jsx → service.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, unmountComponentAtNode } from 'react-dom';
+import { render, unmountComponentAtNode } from '../global/react-render-adapter';
 import Storage from '../storage/storage';
 import alertService from '../alert-service/alert-service';
 import Link from '../link/link';

package/components/user-agreement/{user-agreement.jsx → user-agreement.js}

@@ -57,7 +57,7 @@ export default class UserAgreement extends PureComponent {
         return (<Dialog label={translations.userAgreement} show={show} className={classNames(style.agreementDialog, className)} contentClassName={style.dialogContent} trapFocus autoFocusFirst={false} data-test="user-agreement">
         <Header>{translations.userAgreement}</Header>
         <Content fade onScrollToBottom={this.onScrollToBottom}>
-          <Markdown source={text}/>
+          <Markdown>{text}</Markdown>
         </Content>
         {!preview && (<Panel>
             {onRemindLater && !scrolledDown && (<div className={style.suggestion}>{translations.scrollToAccept}</div>)}

package/dist/_helpers/anchor.js

@@ -4,9 +4,9 @@ import PropTypes from 'prop-types';
 import chevronDown from '@jetbrains/icons/chevron-10px';
 import classNames from 'classnames';
 import Icon from '../icon/icon.js';
-import ThemedButton from '../button/button.js';
+import { Button } from '../button/button.js';
 
-var modules_d9414203 = {"dropdown":"dropdown_rui_4da7","anchor":"anchor_rui_4da7","chevron":"chevron_rui_4da7"};
+var modules_d9414203 = {"dropdown":"dropdown_rui_13c4","anchor":"anchor_rui_13c4","chevron":"chevron_rui_13c4"};
 
 const Anchor = _ref => {
   let {
@@ -14,7 +14,7 @@ const Anchor = _ref => {
     className,
     ...restProps
   } = _ref;
-  return /*#__PURE__*/React.createElement(ThemedButton, _extends({
+  return /*#__PURE__*/React.createElement(Button, _extends({
     "data-test-ring-dropdown-anchor": true,
     text: true,
     className: classNames(modules_d9414203.anchor, className)

package/dist/_helpers/badge.js

@@ -1,3 +1,3 @@
-var modules_6c9187df = {"unit":"8px","badge":"badge_rui_1d2b","gray":"gray_rui_1d2b","valid":"valid_rui_1d2b","invalid":"invalid_rui_1d2b","disabled":"disabled_rui_1d2b"};
+var modules_6c9187df = {"unit":"8px","badge":"badge_rui_4b7d","gray":"gray_rui_4b7d","valid":"valid_rui_4b7d","invalid":"invalid_rui_4b7d","disabled":"disabled_rui_4b7d"};
 
 export { modules_6c9187df as m };

package/dist/_helpers/button-group.js

@@ -1,3 +1,3 @@
-var modules_1068e447 = {"unit":"8px","buttonGroup":"buttonGroup_rui_b9c8 buttonGroup_rui_ec74","button":"button_rui_b9c8","caption":"caption_rui_b9c8 font_rui_750f","active":"active_rui_b9c8"};
+var modules_1068e447 = {"unit":"8px","button":"button_rui_0b90","active":"active_rui_0b90","primary":"primary_rui_0b90","button-shadow":"inset 0 0 0 1px","buttonGroup":"buttonGroup_rui_bbca common_rui_bbca buttonGroup_rui_f4fc","common":"common_rui_bbca","split":"split_rui_bbca common_rui_bbca","caption":"caption_rui_bbca font_rui_8bff"};
 
 export { modules_1068e447 as m };