@jetbrains/ring-ui 5.0.89 → 5.0.91

package/components/button/button.css

@@ -86,6 +86,7 @@
 
   &[disabled].active {
     background-color: var(--ring-disabled-selected-background-color);
+    box-shadow: button-shadow var(--ring-border-selected-disabled-color);
   }
 
   &[disabled],

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

@@ -39,7 +39,7 @@
 }
 
 .buttonGroup .button[disabled] {
-  --ring-button-group-button-border-color: var(--ring-border-unselected-disabled-color);
+  --ring-button-group-button-border-color: var(--ring-border-disabled-color);
 
   /* stylelint-disable-next-line selector-max-specificity */
   &::before,
@@ -55,7 +55,7 @@
 
     background-color: var(--ring-disabled-background-color);
 
-    box-shadow: 0 1px var(--ring-border-unselected-disabled-color) inset, 0 -1px var(--ring-border-unselected-disabled-color) inset;
+    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 */
@@ -130,7 +130,7 @@
 
 /* stylelint-disable-next-line selector-max-specificity */
 .buttonGroup .button.active[disabled] {
-  box-shadow: button-shadow var(--ring-border-disabled-color);
+  box-shadow: button-shadow var(--ring-border-selected-disabled-color);
 }
 
 .split {

package/components/button-ng/button-ng.examples.js

@@ -8,7 +8,6 @@ import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 import IconNG from '../icon-ng/icon-ng';
 import CheckboxNG from '../checkbox-ng/checkbox-ng';
 import Theme from '../global/theme';
-import styles from '../global/variables_dark.css';
 
 import ButtonNG from './button-ng';
 
@@ -87,8 +86,6 @@ export const basic = () => {
   return `
     <div ng-controller="testCtrl">
       <div class="buttons">${renderAllButtons()}</div>
-
-      <div class="buttons ${styles.dark}">${renderAllButtons()}</div>
     </div>
   `;
 

package/components/checkbox/checkbox.css

@@ -43,6 +43,9 @@
 .icon.icon {
   position: absolute;
 
+  top: -1px;
+  left: -1px;
+
   width: calc(unit * 2);
   height: calc(unit * 2);
 
@@ -58,18 +61,10 @@
 
 .check {
   composes: icon;
-
-  top: -1px;
-  left: -1px;
 }
 
 .minus {
   composes: icon;
-
-  top: 1px;
-  left: 2px;
-
-  opacity: 0;
 }
 
 .input {
@@ -116,20 +111,20 @@
 
   /* stylelint-disable-next-line selector-max-specificity */
   &[disabled][disabled] + .cell {
-    border-color: var(--ring-border-unselected-disabled-color);
+    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 {
-    border-color: var(--ring-border-disabled-color);
+    border-color: var(--ring-border-selected-disabled-color);
   }
 
   /* stylelint-disable-next-line selector-max-specificity */
   &[disabled]:checked + .cell .check,
   &[disabled]:indeterminate + .cell .minus {
-    color: var(--ring-border-disabled-color);
+    color: var(--ring-border-selected-disabled-color);
   }
 
   /* stylelint-disable-next-line selector-max-specificity */

package/components/checkbox/checkbox.js

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import checkmarkIcon from '@jetbrains/icons/checkmark-14px';
-import minusIcon from '@jetbrains/icons/remove-10px';
+import minusIcon from '@jetbrains/icons/remove-14px';
 import Icon from '../icon/icon';
 import { refObject } from '../global/prop-types';
 import composeRefs from '../global/composeRefs';

package/components/global/theme.d.ts

@@ -1,14 +1,21 @@
-import React, { HTMLAttributes } from 'react';
+import React, { HTMLAttributes, ReactElement } from 'react';
 declare enum Theme {
     AUTO = "auto",
     LIGHT = "light",
     DARK = "dark"
 }
 export declare function useTheme(): Theme.LIGHT | Theme.DARK;
+export declare function useThemeClasses(theme: Theme): string;
+export interface WithThemeClassesProps {
+    theme: Theme;
+    children: (classes: string) => ReactElement;
+}
+export declare function WithThemeClasses({ theme, children }: WithThemeClassesProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export declare function applyTheme(theme: Theme.DARK | Theme.LIGHT, container: HTMLElement): void;
 export interface ThemeProviderProps extends HTMLAttributes<HTMLDivElement> {
     theme?: Theme;
     passToPopups?: boolean;
+    target?: HTMLElement;
 }
 export declare const ThemeProvider: React.ForwardRefExoticComponent<ThemeProviderProps & React.RefAttributes<HTMLDivElement>>;
 export default Theme;

package/components/global/theme.js

@@ -22,6 +22,18 @@ export function useTheme() {
     }, []);
     return dark ? Theme.DARK : Theme.LIGHT;
 }
+export function useThemeClasses(theme) {
+    const systemTheme = useTheme();
+    const resolvedTheme = theme === Theme.AUTO ? systemTheme : theme;
+    return classNames({
+        [styles.dark]: resolvedTheme === Theme.DARK,
+        [defaultStyles.light]: resolvedTheme === Theme.LIGHT
+    });
+}
+export function WithThemeClasses({ theme, children }) {
+    const themeClasses = useThemeClasses(theme);
+    return children(themeClasses);
+}
 export function applyTheme(theme, container) {
     if (theme === Theme.DARK) {
         container.classList.remove(defaultStyles.light);
@@ -34,20 +46,22 @@ export function applyTheme(theme, container) {
         container.classList.add(defaultStyles.light);
     }
 }
-export const ThemeProvider = forwardRef(function ThemeProvider({ theme = Theme.AUTO, className, passToPopups, children, ...restProps }, ref) {
+export const ThemeProvider = forwardRef(function ThemeProvider({ theme = Theme.AUTO, className, passToPopups, children, target, ...restProps }, ref) {
     const systemTheme = useTheme();
     const resolvedTheme = theme === Theme.AUTO ? systemTheme : theme;
     const id = useMemo(() => getUID('popups-with-theme-'), []);
-    const themeClasses = classNames({
-        [styles.dark]: resolvedTheme === Theme.DARK,
-        [defaultStyles.light]: resolvedTheme === Theme.LIGHT
-    });
+    useEffect(() => {
+        if (target != null) {
+            applyTheme(resolvedTheme, target);
+        }
+    }, [resolvedTheme, target]);
+    const themeClasses = useThemeClasses(theme);
     const parentTarget = useContext(PopupTargetContext);
-    return (<div ref={ref} className={classNames(className, themeClasses)} {...restProps}>{passToPopups
+    return (<div ref={ref} className={target != null ? undefined : classNames(className, themeClasses)} {...restProps}>{passToPopups
             ? (<PopupTarget id={id}>
-              {target => (<>
+              {popupTarget => (<>
                   {children}
-                  {createPortal(<div className={themeClasses}>{target}</div>, parentTarget && getPopupContainer(parentTarget) || document.body)}
+                  {createPortal(<div className={themeClasses}>{popupTarget}</div>, parentTarget && getPopupContainer(parentTarget) || document.body)}
                 </>)}
             </PopupTarget>)
             : children}

package/components/global/variables.css

@@ -13,10 +13,12 @@
   --ring-icon-color: rgb(var(--ring-icon-components)); /* #b8d1e5 */
   --ring-icon-secondary-components: 153, 153, 153;
   --ring-icon-secondary-color: rgb(var(--ring-icon-secondary-components)); /* #999 */
-  --ring-border-disabled-components: 212, 212, 212;
-  --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #d4d4d4 */
+  --ring-border-disabled-components: 232, 232, 232;
+  --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #e8e8e8 */
+  --ring-border-selected-disabled-components: 212, 212, 212;
+  --ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #d4d4d4 */
   --ring-border-unselected-disabled-components: 232, 232, 232;
-  --ring-border-unselected-disabled-color: rgb(var(--ring-border-unselected-disabled-components)); /* #e8e8e8 */
+  --ring-border-unselected-disabled-color: rgb(var(--ring-border-unselected-disabled-components)); /* #e8e8e8 */ /* TODO remove in 6.0 */
   --ring-icon-disabled-components: 212, 212, 212;
   --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #d4d4d4 */
   --ring-border-hover-components: 128, 198, 255;

package/components/global/variables_dark.css

@@ -11,10 +11,12 @@
   --ring-icon-color: rgb(var(--ring-icon-components)); /* #80929d */
   --ring-icon-secondary-components: 128, 146, 157;
   --ring-icon-secondary-color: rgb(var(--ring-icon-secondary-components)); /* #80929d */
-  --ring-border-disabled-components: 71, 81, 89;
-  --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #475159 */
+  --ring-border-disabled-components: 54, 54, 54;
+  --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #363636 */
+  --ring-border-selected-disabled-components: 54, 54, 54;
+  --ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #363636 */
   --ring-border-unselected-disabled-components: 54, 54, 54;
-  --ring-border-unselected-disabled-color: rgb(var(--ring-border-unselected-disabled-components)); /* #363636 */
+  --ring-border-unselected-disabled-color: rgb(var(--ring-border-unselected-disabled-components)); /* #363636 */ /* TODO remove in 6.0 */
   --ring-icon-disabled-components: 80, 82, 83;
   --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #505253 */
   --ring-border-hover-components: 112, 177, 230;
@@ -59,8 +61,8 @@
   --ring-heading-color: var(--ring-text-color);
   --ring-secondary-components: 128, 146, 157;
   --ring-secondary-color: rgb(var(--ring-secondary-components)); /* #80929d */
-  --ring-disabled-components: 128, 146, 157;
-  --ring-disabled-color: rgb(var(--ring-disabled-components)); /* #80929d */
+  --ring-disabled-components: 81, 95, 104;
+  --ring-disabled-color: rgb(var(--ring-disabled-components)); /* #515F68 */
 
   /* Background */
   --ring-content-background-components: 35, 39, 43;
@@ -85,10 +87,10 @@
   --ring-warning-background-color: rgb(var(--ring-warning-background-components)); /* #593d01 */
   --ring-added-background-components: 54, 89, 71;
   --ring-added-background-color: rgb(var(--ring-added-background-components)); /* #365947 */
-  --ring-disabled-background-components: 48, 48, 48;
-  --ring-disabled-background-color: rgb(var(--ring-disabled-background-components)); /* #303030 */
-  --ring-disabled-selected-background-components: 54, 54, 54;
-  --ring-disabled-selected-background-color: rgb(var(--ring-disabled-selected-background-components)); /* #363636 */
+  --ring-disabled-background-components: 54, 54, 54;
+  --ring-disabled-background-color: rgb(var(--ring-disabled-background-components)); /* #363636 */
+  --ring-disabled-selected-background-components: 44, 47, 51;
+  --ring-disabled-selected-background-color: rgb(var(--ring-disabled-selected-background-components)); /* #2C2F33 */
   --ring-button-danger-active-components: 38, 8, 10;
   --ring-button-danger-active-color: rgb(var(--ring-button-danger-active-components)); /* #26080a */
   --ring-button-primary-background-components: 0, 126, 229;

package/components/header/header.css

@@ -11,7 +11,8 @@
   --ring-header-link-color: var(--ring-link-color);
 }
 
-.dark {
+.dark,
+:global(.ring-ui-theme-dark) {
   --ring-header-link-color: var(--ring-text-color);
 }
 

package/components/loader-inline/loader-inline.css

@@ -8,7 +8,8 @@
   --ring-loader-inline-stops: #ff00eb, #bd3bff, #008eff, #58ba00, #f48700, #ff00eb;
 }
 
-.dark {
+.dark,
+:global(.ring-ui-theme-dark) {
   /* stylelint-disable-next-line color-no-hex */
   --ring-loader-inline-stops: #ff2eef, #d178ff, #289fff, #88d444, #ffe000, #ff2eef;
 }

package/components/message/message.js

@@ -6,7 +6,7 @@ import Popup from '../popup/popup';
 import { Directions } from '../popup/popup.consts';
 import Icon from '../icon/icon';
 import Button from '../button/button';
-import Theme, { ThemeProvider } from '../global/theme';
+import Theme, { ThemeProvider, WithThemeClasses } from '../global/theme';
 import darkStyles from '../global/variables_dark.css';
 import styles from './message.css';
 /**
@@ -96,17 +96,19 @@ export default class Message extends Component {
             ? [this.props.direction]
             : this.props.directions;
         const { direction } = this.state;
-        return (<Popup ref={this.popupRef} hidden={false} directions={popupDirections} className={classes} offset={UNIT * 2} onDirectionChange={this._onDirectionChange} {...popupProps}>
-        <ThemeProvider theme={theme} passToPopups>
-          {direction && (<div className={tailClasses} style={getTailOffsets(this.getTailOffset())[direction]}/>)}
+        return (<WithThemeClasses theme={theme}>
+        {themeClasses => (<Popup ref={this.popupRef} hidden={false} directions={popupDirections} className={classNames(classes, themeClasses)} offset={UNIT * 2} onDirectionChange={this._onDirectionChange} {...popupProps}>
+            <ThemeProvider theme={theme} passToPopups>
+              {direction && (<div className={tailClasses} style={getTailOffsets(this.getTailOffset())[direction]}/>)}
 
-          {icon && <Icon className={styles.icon} glyph={icon}/>}
-          {title && <h1 data-test="rgMessageTitle" className={styles.title}>{title}</h1>}
-          {children && <div className={styles.description}>{children}</div>}
-          {(onClose || buttonProps) && (<Button className={styles.button} onClick={onClose} primary {...buttonProps}>{translations.gotIt}</Button>)}
-          {onDismiss && <Button onClick={onDismiss} text>{translations.dismiss}</Button>}
-        </ThemeProvider>
-      </Popup>);
+              {icon && <Icon className={styles.icon} glyph={icon}/>}
+              {title && <h1 data-test="rgMessageTitle" className={styles.title}>{title}</h1>}
+              {children && <div className={styles.description}>{children}</div>}
+              {(onClose || buttonProps) && (<Button className={styles.button} onClick={onClose} primary {...buttonProps}>{translations.gotIt}</Button>)}
+              {onDismiss && <Button onClick={onDismiss} text>{translations.dismiss}</Button>}
+            </ThemeProvider>
+          </Popup>)}
+      </WithThemeClasses>);
     }
 }
 Message.propTypes = {

package/components/place-under-ng/place-under-ng.examples.js

@@ -68,8 +68,7 @@ basic.parameters = {
     right: 0;
     width: 50%;
     padding: 16px;
-    background-color: #666;
-    color: #fff;
+    background-color: var(--ring-selected-background-color);
   }
 
   .head {
@@ -81,14 +80,14 @@ basic.parameters = {
     top: 0;
     width: 100%;
     padding: 16px;
-    background-color: #CCC;
+    background-color: var(--ring-hover-background-color);
   }
 
   .scrollable {
     height: 1000px;
     padding: 16px;
     padding-top: 64px;
-    background-color: #EEE;
+    background-color: var(--ring-sidebar-background-color);
   }
 </style>
       `

package/components/popup/position.js

@@ -46,7 +46,9 @@ function verticalOverflow(styles, scrollingCoordinates, attrs) {
     const viewportMinX = scrollingCoordinates.top + attrs.sidePadding;
     const viewportMaxX = scrollingCoordinates.top + containerHeight - attrs.sidePadding;
     const topOverflow = Math.max(viewportMinX - styles.top, 0);
-    const popupHeight = attrs.popup.clientHeight;
+    const popupHeight = attrs.maxHeight && typeof attrs.maxHeight === 'number'
+        ? Math.min(attrs.popup.scrollHeight, attrs.maxHeight)
+        : attrs.popup.scrollHeight;
     const verticalDiff = styles.top + popupHeight - viewportMaxX;
     const bottomOverflow = Math.max(verticalDiff, 0);
     return topOverflow + bottomOverflow;
@@ -128,7 +130,7 @@ export default function position(attrs) {
         const overflowAttrs = { ...attrs, popup };
         const directionsMatrix = getPositionStyles(popup, anchorRect, anchorLeft, anchorTop, offset);
         if (!autoPositioning || directions.length === 1) {
-            styles = directionsMatrix[directions[0]];
+            styles = { ...directionsMatrix[directions[0]] };
             chosenDirection = directions[0];
         }
         else {
@@ -143,7 +145,7 @@ export default function position(attrs) {
                     horizontalOverflow(stylesB, scroll, overflowAttrs);
                 return overflowA - overflowB;
             });
-            styles = sortedByIncreasingOverflow[0].styles;
+            styles = { ...sortedByIncreasingOverflow[0].styles };
             chosenDirection = sortedByIncreasingOverflow[0].direction;
         }
         // because of the anchor negative margin top and left also may become negative

package/components/progress-bar/progress-bar.css

@@ -8,7 +8,8 @@
   --ring-progress-bar-line-background-color: rgba(255, 255, 255, 0.6);
 }
 
-.dark {
+.dark,
+:global(.ring-ui-theme-dark) {
   --ring-progress-bar-background-color: rgba(255, 255, 255, 0.3);
   --ring-progress-bar-line-background-color: rgba(255, 255, 255, 0.4);
 }

package/components/progress-bar-ng/progress-bar-ng.examples.js

@@ -1,7 +1,6 @@
 import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-import darkStyles from '../global/variables_dark.css';
 
 import RingProgressBar from './progress-bar-ng';
 
@@ -34,9 +33,6 @@ export const basic = () => {
         <div style="height: 25px; padding-top: 25px;">
           <rg-progress-bar label="'Progress'" value="ctrl.value" class="example-progress"></rg-progress-bar>
         </div>
-        <div class="${darkStyles.dark}" style="height: 25px; background: var(--ring-content-background-color); padding-top: 25px;">
-          <rg-progress-bar label="'Progress'" value="ctrl.value" class="example-progress"></rg-progress-bar>
-        </div>
         <div style="height: 25px; background: #F0F0F0; padding-top: 25px;">
           <rg-progress-bar label="'Progress'" value="ctrl.value" class="example-progress"></rg-progress-bar>
         </div>

package/components/radio/radio.css

@@ -76,7 +76,7 @@
   opacity: 0;
 
   &[disabled] + .circle {
-    border-color: var(--ring-border-unselected-disabled-color);
+    border-color: var(--ring-border-disabled-color);
     background-color: var(--ring-disabled-background-color);
   }
 
@@ -105,11 +105,11 @@
 
   /* stylelint-disable-next-line selector-max-specificity */
   &[disabled]:checked + .circle {
-    border-color: var(--ring-border-disabled-color);
+    border-color: var(--ring-border-selected-disabled-color);
 
     /* stylelint-disable-next-line selector-max-specificity */
     &::after {
-      background-color: var(--ring-border-disabled-color);
+      background-color: var(--ring-border-selected-disabled-color);
     }
   }
 

package/components/table-legacy-ng/table-legacy-ng.examples.js

@@ -173,7 +173,6 @@ export const withSidebar = () => {
             <rg-legacy-table-title>Avatar</rg-legacy-table-title>
             <rg-legacy-table-title>Check</rg-legacy-table-title>
             <rg-legacy-table-title active>Name</rg-legacy-table-title>
-            <rg-legacy-table-title></rg-legacy-table-title>
           </rg-legacy-table-header>
 
           <rg-legacy-table-row row-item="item" ng-repeat="item in ctrl.itemsArray">
@@ -183,10 +182,6 @@ export const withSidebar = () => {
             </rg-legacy-table-column>
             <rg-legacy-table-checkbox-cell aria-label="Toggle row checked state"></rg-legacy-table-checkbox-cell>
             <rg-legacy-table-column limited>{{::item.name }}</rg-legacy-table-column>
-            <rg-legacy-table-column>
-              <rg-sidebar-toggle-button ng-show="item.active"
-                model="ctrl.isShowSideBar"></rg-sidebar-toggle-button>
-            </rg-legacy-table-column>
           </rg-legacy-table-row>
         </rg-legacy-table>
       </div>

package/components/tabs/tabs.css

@@ -9,7 +9,8 @@
   --ring-selected-tab-color: var(--ring-text-color);
 }
 
-.dark {
+.dark,
+:global(.ring-ui-theme-dark) {
   --ring-selected-tab-color: var(--ring-main-color);
 }
 

package/components/tabs-ng/tabs-ng.examples.js

@@ -1,7 +1,6 @@
 import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-import darkStyles from '../global/variables_dark.css';
 
 import RingTabs from './tabs-ng';
 
@@ -29,36 +28,3 @@ export const basic = () => {
 };
 
 basic.storyName = 'basic';
-
-export const dark = () => {
-  angular.module(APP_NAME, [RingTabs]);
-
-  return `
-    <div class="${darkStyles.dark}">
-      <rg-tabs class="container container_tabs">
-        <rg-tabs-pane x-title="Settings">Settings tab content</rg-tabs-pane>
-        <rg-tabs-pane x-title="Access" counter="7">Access tab content</rg-tabs-pane>
-        <rg-tabs-pane x-title="Disabled" ng-disabled="true" counter="8">Inaccessible tab content</rg-tabs-pane>
-        <rg-tabs-pane x-title="Members">Members tab content</rg-tabs-pane>
-        <rg-tabs-pane x-title="Members" counter="666">Members 666 tab content</rg-tabs-pane>
-      </rg-tabs>
-    </div>
-    `;
-};
-
-dark.storyName = 'dark';
-
-dark.parameters = {
-  storyStyles: `
-    <style>
-      body {
-        margin: 0 !important;
-      }
-
-      .container {
-        padding: 8px;
-        background: var(--ring-content-background-color);
-        color: var(--ring-text-color);
-      }
-    </style>`
-};

package/dist/_helpers/theme.js

@@ -26,6 +26,22 @@ function useTheme() {
   }, []);
   return dark ? Theme.DARK : Theme.LIGHT;
 }
+function useThemeClasses(theme) {
+  const systemTheme = useTheme();
+  const resolvedTheme = theme === Theme.AUTO ? systemTheme : theme;
+  return classNames({
+    [modules_59717246.dark]: resolvedTheme === Theme.DARK,
+    [modules_6381a4b3.light]: resolvedTheme === Theme.LIGHT
+  });
+}
+function WithThemeClasses(_ref) {
+  let {
+    theme,
+    children
+  } = _ref;
+  const themeClasses = useThemeClasses(theme);
+  return children(themeClasses);
+}
 function applyTheme(theme, container) {
   if (theme === Theme.DARK) {
     container.classList.remove(modules_6381a4b3.light);
@@ -37,31 +53,34 @@ function applyTheme(theme, container) {
     container.classList.add(modules_6381a4b3.light);
   }
 }
-const ThemeProvider = /*#__PURE__*/forwardRef(function ThemeProvider(_ref, ref) {
+const ThemeProvider = /*#__PURE__*/forwardRef(function ThemeProvider(_ref2, ref) {
   let {
     theme = Theme.AUTO,
     className,
     passToPopups,
     children,
+    target,
     ...restProps
-  } = _ref;
+  } = _ref2;
   const systemTheme = useTheme();
   const resolvedTheme = theme === Theme.AUTO ? systemTheme : theme;
   const id = useMemo(() => getUID('popups-with-theme-'), []);
-  const themeClasses = classNames({
-    [modules_59717246.dark]: resolvedTheme === Theme.DARK,
-    [modules_6381a4b3.light]: resolvedTheme === Theme.LIGHT
-  });
+  useEffect(() => {
+    if (target != null) {
+      applyTheme(resolvedTheme, target);
+    }
+  }, [resolvedTheme, target]);
+  const themeClasses = useThemeClasses(theme);
   const parentTarget = useContext(PopupTargetContext);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref,
-    className: classNames(className, themeClasses)
+    className: target != null ? undefined : classNames(className, themeClasses)
   }, restProps), passToPopups ? /*#__PURE__*/React.createElement(PopupTarget, {
     id: id
-  }, target => /*#__PURE__*/React.createElement(React.Fragment, null, children, /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
+  }, popupTarget => /*#__PURE__*/React.createElement(React.Fragment, null, children, /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
     className: themeClasses
-  }, target), parentTarget && getPopupContainer(parentTarget) || document.body))) : children);
+  }, popupTarget), parentTarget && getPopupContainer(parentTarget) || document.body))) : children);
 });
 var Theme$1 = Theme;
 
-export { Theme$1 as T, ThemeProvider as a, applyTheme as b, modules_59717246 as m, useTheme as u };
+export { Theme$1 as T, WithThemeClasses as W, ThemeProvider as a, useThemeClasses as b, applyTheme as c, modules_59717246 as m, useTheme as u };

package/dist/checkbox/checkbox.js

@@ -3,7 +3,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import checkmarkIcon from '@jetbrains/icons/checkmark-14px';
-import minusIcon from '@jetbrains/icons/remove-10px';
+import minusIcon from '@jetbrains/icons/remove-14px';
 import Icon from '../icon/icon.js';
 import { refObject } from '../global/prop-types.js';
 import composeRefs from '../global/composeRefs.js';

package/dist/data-list/data-list.js

@@ -42,7 +42,7 @@ import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../_helpers/checkbox.js';
 
 class DataList extends PureComponent {

package/dist/data-list/item.js

@@ -29,7 +29,7 @@ import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../_helpers/checkbox.js';
 import '../global/get-uid.js';
 

package/dist/data-list/title.js

@@ -9,7 +9,7 @@ import '../global/prop-types.js';
 export { T as default } from '../_helpers/title.js';
 import '../global/composeRefs.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../icon/icon.js';
 import 'util-deprecate';
 import '../icon/icon__constants.js';

package/dist/data-list-ng/data-list-ng.js

@@ -48,7 +48,7 @@ import '../_helpers/button__classes.js';
 import '../_helpers/title.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../_helpers/checkbox.js';
 import '../data-list/selection.js';
 

package/dist/dropdown-menu/dropdown-menu.js

@@ -36,7 +36,7 @@ import '../global/url.js';
 import '../avatar/fallback-avatar.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-14px';
-import '@jetbrains/icons/remove-10px';
+import '@jetbrains/icons/remove-14px';
 import '../icon/icon.js';
 import '../icon/icon__constants.js';
 import '../_helpers/icon.js';