@jetbrains/ring-ui-built 6.0.35 → 6.0.36

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,14 +1,15 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, f as _classCallCheck, g as _callSuper, h as _asyncToGenerator, i as _regeneratorRuntime } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { _ as _defineProperty, a as _inherits, b as _createClass, e as _classCallCheck, f as _callSuper, g as _asyncToGenerator, h as _regeneratorRuntime } from '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/es.array.concat.js';
 import 'core-js/modules/es.regexp.exec.js';
 import 'core-js/modules/es.string.replace.js';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import '../island/island.js';
 import Dialog from '../dialog/dialog.js';
 import { Button } from '../button/button.js';
 import { H2 } from '../heading/heading.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import ContentWrapper from '../island/content.js';
 import '../global/data-tests.js';
 import 'core-js/modules/es.array.reduce.js';
@@ -148,42 +149,51 @@ var AuthDialog = /*#__PURE__*/function (_Component) {
       var retrying = this.state.retrying;
       var defaultTitle = serviceName ? loginToCaption : loginCaption;
       var title = (this.props.title || defaultTitle).replace('%serviceName%', serviceName !== null && serviceName !== void 0 ? serviceName : '').replace('{{serviceName}}', serviceName !== null && serviceName !== void 0 ? serviceName : '');
-      return /*#__PURE__*/React.createElement(Dialog, {
+      return /*#__PURE__*/jsx(Dialog, {
         label: title,
         "data-test": "ring-auth-dialog",
         className: className,
         contentClassName: classNames(className, modules_ae521deb.dialog),
         onEscPress: this.onEscPress,
         show: show,
-        trapFocus: true
-      }, /*#__PURE__*/React.createElement(ContentWrapper, null, /*#__PURE__*/React.createElement("div", {
-        className: modules_ae521deb.content
-      }, serviceImage && /*#__PURE__*/React.createElement("img", {
-        alt: "".concat(serviceName, " logo"),
-        className: modules_ae521deb.logo,
-        src: serviceImage
-      }), /*#__PURE__*/React.createElement(H2, {
-        className: modules_ae521deb.title
-      }, title), errorMessage && /*#__PURE__*/React.createElement("div", {
-        className: modules_ae521deb.error
-      }, errorMessage), /*#__PURE__*/React.createElement(Button, {
-        primary: true,
-        className: modules_ae521deb.firstButton,
-        "data-test": "auth-dialog-confirm-button",
-        onClick: onConfirm
-      }, confirmLabel), onTryAgain && /*#__PURE__*/React.createElement(Button, {
-        className: modules_ae521deb.button,
-        "data-test": "auth-dialog-retry-button",
-        onClick: function onClick() {
-          return _this2.onRetryPress();
-        },
-        loader: retrying,
-        disabled: retrying
-      }, tryAgainLabel), /*#__PURE__*/React.createElement(Button, {
-        className: modules_ae521deb.button,
-        "data-test": "auth-dialog-cancel-button",
-        onClick: onCancel
-      }, cancelLabel))));
+        trapFocus: true,
+        children: /*#__PURE__*/jsx(ContentWrapper, {
+          children: /*#__PURE__*/jsxs("div", {
+            className: modules_ae521deb.content,
+            children: [serviceImage && /*#__PURE__*/jsx("img", {
+              alt: "".concat(serviceName, " logo"),
+              className: modules_ae521deb.logo,
+              src: serviceImage
+            }), /*#__PURE__*/jsx(H2, {
+              className: modules_ae521deb.title,
+              children: title
+            }), errorMessage && /*#__PURE__*/jsx("div", {
+              className: modules_ae521deb.error,
+              children: errorMessage
+            }), /*#__PURE__*/jsx(Button, {
+              primary: true,
+              className: modules_ae521deb.firstButton,
+              "data-test": "auth-dialog-confirm-button",
+              onClick: onConfirm,
+              children: confirmLabel
+            }), onTryAgain && /*#__PURE__*/jsx(Button, {
+              className: modules_ae521deb.button,
+              "data-test": "auth-dialog-retry-button",
+              onClick: function onClick() {
+                return _this2.onRetryPress();
+              },
+              loader: retrying,
+              disabled: retrying,
+              children: tryAgainLabel
+            }), /*#__PURE__*/jsx(Button, {
+              className: modules_ae521deb.button,
+              "data-test": "auth-dialog-cancel-button",
+              onClick: onCancel,
+              children: cancelLabel
+            })]
+          })
+        })
+      });
     }
   }]);
 }(Component);

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

@@ -1,8 +1,9 @@
 import { d as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
-import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { ControlsHeightContext, getGlobalControlsHeight } from '../global/controls-height.js';
 import AuthDialog from '../auth-dialog/auth-dialog.js';
+import { jsx } from 'react/jsx-runtime';
+import 'react';
 import 'core-js/modules/es.array.concat.js';
 import 'core-js/modules/es.regexp.exec.js';
 import 'core-js/modules/es.string.replace.js';
@@ -64,18 +65,16 @@ import 'scrollbar-width';
 import '../heading/heading.js';
 import '../_helpers/heading.js';
 
-/**
- * @name Auth Dialog Service
- */
 var containerElement = document.createElement('div');
 var reactRoot = createRoot(containerElement);
 /**
  * Renders AuthDialog into virtual node to skip maintaining container
  */
 function renderAuthDialog(props) {
-  reactRoot.render( /*#__PURE__*/React.createElement(ControlsHeightContext.Provider, {
-    value: getGlobalControlsHeight()
-  }, /*#__PURE__*/React.createElement(AuthDialog, props)));
+  reactRoot.render( /*#__PURE__*/jsx(ControlsHeightContext.Provider, {
+    value: getGlobalControlsHeight(),
+    children: /*#__PURE__*/jsx(AuthDialog, _objectSpread2({}, props))
+  }));
 }
 function showAuthDialog() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

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,11 +1,12 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, c as _objectWithoutProperties, d as _objectSpread2, e as _extends, j as _slicedToArray, f as _classCallCheck, g as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { _ as _defineProperty, a as _inherits, b as _createClass, c as _objectWithoutProperties, d as _objectSpread2, i as _slicedToArray, e as _classCallCheck, f as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/es.array.concat.js';
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { isDataURI, parseQueryString, encodeURL } from '../global/url.js';
 import { getPixelRatio } from '../global/dom.js';
 import FallbackAvatar from './fallback-avatar.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import 'core-js/modules/es.array.index-of.js';
 import 'core-js/modules/es.regexp.exec.js';
 import 'core-js/modules/es.string.match.js';
@@ -28,9 +29,6 @@ import 'core-js/modules/es.regexp.to-string.js';
 var modules_61ca8c75 = {"light":"light_rui_2ac4","avatar":"avatar_rui_006c","subavatar":"subavatar_rui_006c","empty":"empty_rui_006c"};
 
 var _excluded = ["size", "url", "dpr", "style", "round", "subavatar", "subavatarSize", "username", "skipParams"];
-/**
- * @name Avatar
- */
 var Size;
 (function (Size) {
   Size[Size["Size18"] = 18] = "Size18";
@@ -94,16 +92,17 @@ var Avatar = /*#__PURE__*/function (_PureComponent) {
         width: subavatarSizeString
       }, style);
       if (!url || this.state.errorUrl === url) {
-        return /*#__PURE__*/React.createElement("span", _extends({}, restProps, {
+        return /*#__PURE__*/jsx("span", _objectSpread2(_objectSpread2({}, restProps), {}, {
           "data-test": "avatar",
           className: classNames(modules_61ca8c75.avatar, this.props.className, {
             [modules_61ca8c75.empty]: username == null
           }),
-          style: styleObj
-        }), username != null && /*#__PURE__*/React.createElement(FallbackAvatar, {
-          size: size,
-          round: round,
-          username: username
+          style: styleObj,
+          children: username != null && /*#__PURE__*/jsx(FallbackAvatar, {
+            size: size,
+            round: round,
+            username: username
+          })
         }));
       }
       var src = url;
@@ -129,24 +128,26 @@ var Avatar = /*#__PURE__*/function (_PureComponent) {
           subavatarSizeString
         });
         subavatarSrc = skipParams ? subavatar : encodeURL(_urlStart, _queryParams);
-        return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", _extends({}, restProps, {
-          onError: this.handleError,
-          onLoad: this.handleSuccess,
-          className: classNames(modules_61ca8c75.avatar, this.props.className),
-          style: styleObj,
-          src: src,
-          alt: "User avatar"
-        })), /*#__PURE__*/React.createElement("img", _extends({}, restProps, {
-          "data-test": "avatar",
-          onError: this.handleError,
-          onLoad: this.handleSuccess,
-          className: classNames(modules_61ca8c75.subavatar),
-          style: styleObjGroup,
-          src: subavatarSrc,
-          alt: "Subavatar"
-        })));
+        return /*#__PURE__*/jsxs("div", {
+          children: [/*#__PURE__*/jsx("img", _objectSpread2(_objectSpread2({}, restProps), {}, {
+            onError: this.handleError,
+            onLoad: this.handleSuccess,
+            className: classNames(modules_61ca8c75.avatar, this.props.className),
+            style: styleObj,
+            src: src,
+            alt: "User avatar"
+          })), /*#__PURE__*/jsx("img", _objectSpread2(_objectSpread2({}, restProps), {}, {
+            "data-test": "avatar",
+            onError: this.handleError,
+            onLoad: this.handleSuccess,
+            className: classNames(modules_61ca8c75.subavatar),
+            style: styleObjGroup,
+            src: subavatarSrc,
+            alt: "Subavatar"
+          }))]
+        });
       } else {
-        return /*#__PURE__*/React.createElement("img", _extends({}, restProps, {
+        return /*#__PURE__*/jsx("img", _objectSpread2(_objectSpread2({}, restProps), {}, {
           "data-test": "avatar",
           onError: this.handleError,
           onLoad: this.handleSuccess,

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 { j as _slicedToArray, k as _toConsumableArray } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { i as _slicedToArray, j as _toConsumableArray } from '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/es.array.concat.js';
 import 'core-js/modules/es.array.filter.js';
 import 'core-js/modules/es.array.from.js';
@@ -7,9 +7,10 @@ import 'core-js/modules/es.array.slice.js';
 import 'core-js/modules/es.object.to-string.js';
 import 'core-js/modules/es.regexp.exec.js';
 import 'core-js/modules/es.string.split.js';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import getUID from '../global/get-uid.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import 'core-js/modules/es.regexp.to-string.js';
 
 var colorPairs = [['#60A800', '#D5CA00'], ['#21D370', '#03E9E1'], ['#3BA1FF', '#36E97D'], ['#00C243', '#00FFFF'], ['#4BE098', '#627FFF'], ['#168BFA', '#26F7C7'], ['#9D4CFF', '#39D3C3'], ['#0A81F6', '#0ACFF6'], ['#765AF8', '#5A91F8'], ['#9E54FF', '#0ACFF6'], ['#B345F1', '#669DFF'], ['#765AF8', '#C059EE'], ['#9039D0', '#C239D0'], ['#9F2AFF', '#FD56FD'], ['#AB3AF2', '#E40568'], ['#9F2AFF', '#E9A80B'], ['#D50F6B', '#E73AE8'], ['#ED5502', '#E73AE8'], ['#ED358C', '#DBED18'], ['#ED358C', '#F9902E'], ['#FF7500', '#FFCA00']];
@@ -105,42 +106,54 @@ function FallbackAvatar(_ref) {
   var gradientId = useMemo(function () {
     return getUID('gradient-');
   }, []);
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/jsxs("svg", {
     viewBox: "0 0 ".concat(sizeKey, " ").concat(sizeKey),
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
-    id: gradientId,
-    x1: "0",
-    y1: "0",
-    x2: "0",
-    y2: "1"
-  }, /*#__PURE__*/React.createElement("stop", {
-    stopColor: fromColor,
-    offset: "0"
-  }), /*#__PURE__*/React.createElement("stop", {
-    stopColor: toColor,
-    offset: "1"
-  }))), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("rect", {
-    fill: "url(#".concat(gradientId, ")"),
-    x: "0",
-    y: "0",
-    width: sizeKey,
-    height: sizeKey,
-    rx: radius,
-    ry: radius
-  }), /*#__PURE__*/React.createElement("text", {
-    x: sizes.text.x,
-    y: sizes.text.y,
-    fontFamily: "Arial, Helvetica, sans-serif",
-    fontSize: sizes.fontSize,
-    letterSpacing: sizes.letterSpacing,
-    fill: "#FFFFFF",
-    textAnchor: sizes.textAnchor,
-    cursor: "default"
-  }, /*#__PURE__*/React.createElement("tspan", null, extractLetters(username)), sizes.underscore && /*#__PURE__*/React.createElement("tspan", {
-    x: sizes.underscore.x,
-    y: sizes.underscore.y
-  }, '_')), /*#__PURE__*/React.createElement("title", null, username)));
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/jsx("defs", {
+      children: /*#__PURE__*/jsxs("linearGradient", {
+        id: gradientId,
+        x1: "0",
+        y1: "0",
+        x2: "0",
+        y2: "1",
+        children: [/*#__PURE__*/jsx("stop", {
+          stopColor: fromColor,
+          offset: "0"
+        }), /*#__PURE__*/jsx("stop", {
+          stopColor: toColor,
+          offset: "1"
+        })]
+      })
+    }), /*#__PURE__*/jsxs("g", {
+      children: [/*#__PURE__*/jsx("rect", {
+        fill: "url(#".concat(gradientId, ")"),
+        x: "0",
+        y: "0",
+        width: sizeKey,
+        height: sizeKey,
+        rx: radius,
+        ry: radius
+      }), /*#__PURE__*/jsxs("text", {
+        x: sizes.text.x,
+        y: sizes.text.y,
+        fontFamily: "Arial, Helvetica, sans-serif",
+        fontSize: sizes.fontSize,
+        letterSpacing: sizes.letterSpacing,
+        fill: "#FFFFFF",
+        textAnchor: sizes.textAnchor,
+        cursor: "default",
+        children: [/*#__PURE__*/jsx("tspan", {
+          children: extractLetters(username)
+        }), sizes.underscore && /*#__PURE__*/jsx("tspan", {
+          x: sizes.underscore.x,
+          y: sizes.underscore.y,
+          children: '_'
+        })]
+      }), /*#__PURE__*/jsx("title", {
+        children: username
+      })]
+    })]
+  });
 }
 FallbackAvatar.propTypes = {
   username: PropTypes.string.isRequired,

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,18 +1,16 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, c as _objectWithoutProperties, e as _extends, f as _classCallCheck, g as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
-import React, { PureComponent } from 'react';
+import { _ as _defineProperty, a as _inherits, b as _createClass, c as _objectWithoutProperties, d as _objectSpread2, e as _classCallCheck, f as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import joinDataTestAttributes from '../global/data-tests.js';
 import { m as modules_6c9187df } from '../_helpers/badge.js';
+import { jsx } from 'react/jsx-runtime';
 import 'core-js/modules/es.array.concat.js';
 import 'core-js/modules/es.array.reduce.js';
 import 'core-js/modules/es.object.entries.js';
 import 'core-js/modules/es.object.to-string.js';
 
 var _excluded = ["gray", "valid", "invalid", "disabled", "className", "children", "data-test"];
-/**
- * @name Badge
- */
 var Badge = /*#__PURE__*/function (_PureComponent) {
   function Badge() {
     _classCallCheck(this, Badge);
@@ -37,10 +35,11 @@ var Badge = /*#__PURE__*/function (_PureComponent) {
         [modules_6c9187df.invalid]: invalid,
         [modules_6c9187df.disabled]: disabled
       });
-      return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+      return /*#__PURE__*/jsx("span", _objectSpread2(_objectSpread2({}, props), {}, {
         "data-test": joinDataTestAttributes('ring-badge', dataTest),
-        className: classes
-      }), children);
+        className: classes,
+        children: children
+      }));
     }
   }]);
 }(PureComponent);

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,27 @@
+import 'core-js/modules/es.array.map.js';
+import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/es.promise.js';
+import classNames from 'classnames';
+import { Children, Fragment } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var modules_18e4daa4 = {"separator":"separator_rui_09b2"};
+
+function Breadcrumbs(_ref) {
+  var separatorClassName = _ref.separatorClassName,
+    children = _ref.children;
+  return Children.toArray(children).map(function (child, index) {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/no-array-index-key
+      jsxs(Fragment, {
+        children: [index > 0 && /*#__PURE__*/jsx("span", {
+          className: classNames(modules_18e4daa4.separator, separatorClassName),
+          children: '/'
+        }), child]
+      }, index)
+    );
+  });
+}
+
+export { Breadcrumbs as default };

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,6 +1,6 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, c as _objectWithoutProperties, d as _objectSpread2, e as _extends, f as _classCallCheck, g as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { _ as _defineProperty, a as _inherits, b as _createClass, c as _objectWithoutProperties, d as _objectSpread2, e as _classCallCheck, f as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/es.array.concat.js';
-import React, { PureComponent, createRef } from 'react';
+import { PureComponent, createRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import chevronDown from '@jetbrains/icons/chevron-10px';
@@ -8,6 +8,7 @@ import Icon from '../icon/icon.js';
 import ClickableLink from '../link/clickableLink.js';
 import { ControlsHeightContext } from '../global/controls-height.js';
 import { g as getButtonClasses, m as modules_e81895c9 } from '../_helpers/button__classes.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Size } from '../icon/icon__constants.js';
 import 'util-deprecate';
 import '../_helpers/icon__svg.js';
@@ -22,12 +23,6 @@ import 'core-js/modules/es.weak-map.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 
 var _excluded = ["active", "danger", "delayed", "loader", "primary", "short", "text", "inline", "dropdown", "height", "icon", "iconSize", "iconClassName", "iconSuppressSizeWarning", "className", "children"];
-/**
- * @name Button
- */
-/**
- * A component for displaying variously styled buttons.
- */
 var Button = /*#__PURE__*/function (_PureComponent) {
   function Button() {
     var _this;
@@ -75,28 +70,34 @@ var Button = /*#__PURE__*/function (_PureComponent) {
         inline,
         height
       });
-      var content = /*#__PURE__*/React.createElement("span", {
-        className: modules_e81895c9.content
-      }, icon && /*#__PURE__*/React.createElement("span", {
-        className: classNames(modules_e81895c9.icon, iconClassName)
-      }, /*#__PURE__*/React.createElement(Icon, {
-        glyph: icon,
-        size: iconSize,
-        loading: loader,
-        suppressSizeWarning: iconSuppressSizeWarning
-      })), children && /*#__PURE__*/React.createElement("span", null, children), dropdown && /*#__PURE__*/React.createElement(Icon, {
-        glyph: chevronDown,
-        className: modules_e81895c9.dropdownIcon
-      }));
+      var content = /*#__PURE__*/jsxs("span", {
+        className: modules_e81895c9.content,
+        children: [icon && /*#__PURE__*/jsx("span", {
+          className: classNames(modules_e81895c9.icon, iconClassName),
+          children: /*#__PURE__*/jsx(Icon, {
+            glyph: icon,
+            size: iconSize,
+            loading: loader,
+            suppressSizeWarning: iconSuppressSizeWarning
+          })
+        }), children && /*#__PURE__*/jsx("span", {
+          children: children
+        }), dropdown && /*#__PURE__*/jsx(Icon, {
+          glyph: chevronDown,
+          className: modules_e81895c9.dropdownIcon
+        })]
+      });
       var commonProps = _objectSpread2(_objectSpread2({
         tabIndex: loader ? -1 : 0
       }, props), {}, {
         className: classes,
-        children: /*#__PURE__*/React.createElement(React.Fragment, null, loader && !text && !icon && /*#__PURE__*/React.createElement("div", {
-          className: modules_e81895c9.loaderBackground
-        }), content)
+        children: /*#__PURE__*/jsxs(Fragment, {
+          children: [loader && !text && !icon && /*#__PURE__*/jsx("div", {
+            className: modules_e81895c9.loaderBackground
+          }), content]
+        })
       });
-      return commonProps.href != null ? /*#__PURE__*/React.createElement(ClickableLink, commonProps) : /*#__PURE__*/React.createElement("button", _extends({
+      return commonProps.href != null ? /*#__PURE__*/jsx(ClickableLink, _objectSpread2({}, commonProps)) : /*#__PURE__*/jsx("button", _objectSpread2({
         ref: this.buttonRef,
         type: "button"
       }, commonProps));

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,21 +1,21 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, c as _objectWithoutProperties, e as _extends, f as _classCallCheck, g as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { _ as _defineProperty, a as _inherits, b as _createClass, c as _objectWithoutProperties, d as _objectSpread2, e as _classCallCheck, f as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/es.regexp.exec.js';
 import 'core-js/modules/es.string.split.js';
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import joinDataTestAttributes from '../global/data-tests.js';
+import { ControlLabel } from '../control-label/control-label.js';
+import ControlHelp from '../control-help/control-help.js';
 import { m as modules_1068e447 } from '../_helpers/caption.js';
 export { C as Caption } from '../_helpers/caption.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import 'core-js/modules/es.array.concat.js';
 import 'core-js/modules/es.array.reduce.js';
 import 'core-js/modules/es.object.entries.js';
 import 'core-js/modules/es.object.to-string.js';
 
-var _excluded = ["className", "split", "data-test"];
-/**
- * @name Button Group
- */
+var _excluded = ["className", "split", "data-test", "label", "help"];
 var ButtonGroup = /*#__PURE__*/function (_PureComponent) {
   function ButtonGroup() {
     _classCallCheck(this, ButtonGroup);
@@ -29,12 +29,21 @@ var ButtonGroup = /*#__PURE__*/function (_PureComponent) {
         className = _this$props.className,
         split = _this$props.split,
         dataTest = _this$props['data-test'],
+        label = _this$props.label,
+        help = _this$props.help,
         restProps = _objectWithoutProperties(_this$props, _excluded);
       var classes = classNames(split ? modules_1068e447.split : modules_1068e447.buttonGroup, className);
-      return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-        "data-test": joinDataTestAttributes('ring-button-group', dataTest),
-        className: classes
-      }));
+      return /*#__PURE__*/jsxs(Fragment, {
+        children: [label && /*#__PURE__*/jsx(ControlLabel, {
+          children: label
+        }), /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({}, restProps), {}, {
+          "data-test": joinDataTestAttributes('ring-button-group', dataTest),
+          className: classes
+        })), help && /*#__PURE__*/jsx(ControlHelp, {
+          className: modules_1068e447.help,
+          children: help
+        })]
+      });
     }
   }]);
 }(PureComponent);