@plesk/ui-library 3.31.2 → 3.32.0

package/esm/components/Action/Action.js

@@ -1,12 +1,13 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2022. Plesk International GmbH. All rights reserved.
 
-import React, { isValidElement, Children } from 'react';
+import { isValidElement, Children } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import { wrapFunction } from '../utils';
 import Icon, { ICON_SIZE_16 } from '../Icon';
 import Spinner from '../Spinner';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * `Action` component is used mostly for navigation, to go between pages, and not for immediate action or submitting data.
  * @since 0.0.68
@@ -46,10 +47,11 @@ const Action = _ref => {
     className: classNames(props.className, `${baseClassName}__content`) || undefined
   };
   if (progress) {
-    icon = /*#__PURE__*/React.createElement(Icon, {
+    icon = /*#__PURE__*/_jsx(Icon, {
       size: size,
-      className: `${baseClassName}__icon`
-    }, /*#__PURE__*/React.createElement(Spinner, null));
+      className: `${baseClassName}__icon`,
+      children: /*#__PURE__*/_jsx(Spinner, {})
+    });
     tagProps.onClick = e => e.preventDefault();
     tagProps.tabIndex = -1;
   }
@@ -64,17 +66,24 @@ const Action = _ref => {
       }
     });
   }
-  return /*#__PURE__*/React.createElement(RootTag, _extends({
+  return /*#__PURE__*/_jsxs(RootTag, {
     className: classNames(baseClassName, {
       [`${baseClassName}--size-${size}`]: icon || progress,
       [`${baseClassName}--progress`]: progress,
       [`${baseClassName}--nowrap`]: nowrap,
       [`${baseClassName}--icon`]: !Children.toArray(children).length && !rightAddon && !bottomAddon
-    }, className)
-  }, restOuterProps), /*#__PURE__*/React.createElement(Tag, tagProps, icon, children), rightAddon ? /*#__PURE__*/React.createElement("span", {
-    className: `${baseClassName}__right-addon`
-  }, rightAddon) : null, bottomAddon ? /*#__PURE__*/React.createElement("span", {
-    className: `${baseClassName}__bottom-addon`
-  }, bottomAddon) : null);
+    }, className),
+    ...restOuterProps,
+    children: [/*#__PURE__*/_jsxs(Tag, {
+      ...tagProps,
+      children: [icon, children]
+    }), rightAddon ? /*#__PURE__*/_jsx("span", {
+      className: `${baseClassName}__right-addon`,
+      children: rightAddon
+    }) : null, bottomAddon ? /*#__PURE__*/_jsx("span", {
+      className: `${baseClassName}__bottom-addon`,
+      children: bottomAddon
+    }) : null]
+  });
 };
 export default Action;

package/esm/components/Alert/Alert.js

@@ -1,9 +1,9 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-import React from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * `Alert` component is used for highlighting important content.
  *  For showing messages about state of the system it is recommended to use [StatusMessage](#!/StatusMessage)
@@ -19,13 +19,15 @@ const Alert = _ref => {
     onClose,
     ...props
   } = _ref;
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/_jsxs("div", {
     className: classNames(baseClassName, {
       [`${baseClassName}--${intent}`]: intent
-    }, className)
-  }, props), onClose && /*#__PURE__*/React.createElement("span", {
-    className: "close",
-    onClick: onClose
-  }), children);
+    }, className),
+    ...props,
+    children: [onClose && /*#__PURE__*/_jsx("span", {
+      className: "close",
+      onClick: onClose
+    }), children]
+  });
 };
 export default Alert;

package/esm/components/Alert/Alert.stories.js

@@ -1,18 +1,27 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-import React from 'react';
 import Alert from './Alert';
-export const Basic = args => /*#__PURE__*/React.createElement(Alert, args);
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const Basic = args => /*#__PURE__*/_jsx(Alert, {
+  ...args
+});
 Basic.args = {
   children: 'Content'
 };
-export const Intents = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Basic, _extends({
-  intent: "info"
-}, Basic.args)), /*#__PURE__*/React.createElement(Basic, _extends({
-  intent: "success"
-}, Basic.args)), /*#__PURE__*/React.createElement(Basic, _extends({
-  intent: "warning"
-}, Basic.args)), /*#__PURE__*/React.createElement(Basic, _extends({
-  intent: "danger"
-}, Basic.args)));
+export const Intents = () => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsx(Basic, {
+    intent: "info",
+    ...Basic.args
+  }), /*#__PURE__*/_jsx(Basic, {
+    intent: "success",
+    ...Basic.args
+  }), /*#__PURE__*/_jsx(Basic, {
+    intent: "warning",
+    ...Basic.args
+  }), /*#__PURE__*/_jsx(Basic, {
+    intent: "danger",
+    ...Basic.args
+  })]
+});

package/esm/components/AutoClosable/AutoClosable.js

@@ -2,7 +2,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 import { findDOMNode } from 'react-dom';
-import React, { Component, Children, createContext } from 'react';
+import { Component, Children, createContext } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 const AutoClosableContext = /*#__PURE__*/createContext(null);
 /**
  * This is helper component for handling outside clicks.
@@ -43,9 +44,7 @@ class AutoClosable extends Component {
           return node.current;
         }
         return null;
-      }).some(node => {
-        return Boolean(node && el instanceof Node && node.contains(el));
-      });
+      }).some(node => Boolean(node && el instanceof Node && node.contains(el)));
       if (isClickOnIgnoredNode) {
         return;
       }
@@ -71,9 +70,10 @@ class AutoClosable extends Component {
     }
   }
   render() {
-    return /*#__PURE__*/React.createElement(AutoClosableContext.Provider, {
-      value: this
-    }, Children.only(this.props.children));
+    return /*#__PURE__*/_jsx(AutoClosableContext.Provider, {
+      value: this,
+      children: Children.only(this.props.children)
+    });
   }
 }
 AutoClosable.contextType = AutoClosableContext;

package/esm/components/AuxiliaryActions/AuxiliaryActions.js

@@ -1,9 +1,9 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-import React, { cloneElement, isValidElement, Children } from 'react';
+import { cloneElement, isValidElement, Children } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Auxiliary Actions component is used for executing additional (not primary) actions.
  * @since 0.4.1
@@ -12,16 +12,20 @@ const AuxiliaryActions = _ref => {
   let {
     baseClassName = `${CLS_PREFIX}auxiliary-actions`,
     className,
-    separator = /*#__PURE__*/React.createElement("span", {
-      className: `${baseClassName}__separator`
-    }, ' | '),
+    separator = /*#__PURE__*/_jsx("span", {
+      className: `${baseClassName}__separator`,
+      children: ' | '
+    }),
     children,
     ...props
   } = _ref;
-  return /*#__PURE__*/React.createElement("span", _extends({
-    className: classNames(baseClassName, className)
-  }, props), Children.toArray(children).reduce((accu, elem, index) => accu.length === 0 ? [elem] : [...accu, /*#__PURE__*/isValidElement(separator) ? /*#__PURE__*/cloneElement(separator, {
-    key: index
-  }) : separator, elem], []));
+  return /*#__PURE__*/_jsx("span", {
+    className: classNames(baseClassName, className),
+    ...props,
+    children: Children.toArray(children).reduce((accu, elem, index) => accu.length === 0 ? [elem] : [...accu, /*#__PURE__*/isValidElement(separator) ? /*#__PURE__*/cloneElement(separator, {
+      key: index
+    }) // eslint-disable-line react/no-array-index-key
+    : separator, elem], [])
+  });
 };
 export default AuxiliaryActions;

package/esm/components/Badge/Badge.js

@@ -1,11 +1,12 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-import React, { isValidElement, cloneElement, Children } from 'react';
+import { isValidElement, cloneElement, Children } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Label from '../Label';
 import Icon from '../Icon';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * `Badge` component is used for showing small numerical value or status attached to an interface element.
  * @since 0.0.58
@@ -23,9 +24,10 @@ const Badge = _ref => {
   const isAmpty = !label;
   if (Children.toArray(children).length && !hidden) {
     if (! /*#__PURE__*/isValidElement(label)) {
-      label = /*#__PURE__*/React.createElement(Label, {
-        intent: "danger"
-      }, label);
+      label = /*#__PURE__*/_jsx(Label, {
+        intent: "danger",
+        children: label
+      });
     }
     if ( /*#__PURE__*/isValidElement(label)) {
       const cloneProps = {
@@ -41,8 +43,10 @@ const Badge = _ref => {
   } else {
     label = null;
   }
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: classNames(baseClassName, className)
-  }, props), children, label);
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames(baseClassName, className),
+    ...props,
+    children: [children, label]
+  });
 };
 export default Badge;

package/esm/components/Breadcrumbs/Breadcrumbs.js

@@ -1,11 +1,12 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 import { isRtl } from '../../utils';
-import React, { Children } from 'react';
+import { Children } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Icon from '../Icon';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * `Breadcrumbs` component indicates a position of current page in general hierarchy of all pages,
  * and it is used for navigation up to the main page of the product.
@@ -18,18 +19,23 @@ const Breadcrumbs = _ref => {
     children,
     ...props
   } = _ref;
-  return /*#__PURE__*/React.createElement("nav", _extends({
+  return /*#__PURE__*/_jsx("nav", {
     role: "navigation",
     "aria-label": "Breadcrumbs",
-    className: classNames(baseClassName, className)
-  }, props), /*#__PURE__*/React.createElement("ul", {
-    className: `${baseClassName}__list`
-  }, Children.map(children, child => /*#__PURE__*/React.createElement("li", {
-    className: `${baseClassName}__item`
-  }, child, /*#__PURE__*/React.createElement("span", {
-    className: `${baseClassName}__separator`
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: isRtl() ? 'chevron-left' : 'chevron-right'
-  }))))));
+    className: classNames(baseClassName, className),
+    ...props,
+    children: /*#__PURE__*/_jsx("ul", {
+      className: `${baseClassName}__list`,
+      children: Children.map(children, child => /*#__PURE__*/_jsxs("li", {
+        className: `${baseClassName}__item`,
+        children: [child, /*#__PURE__*/_jsx("span", {
+          className: `${baseClassName}__separator`,
+          children: /*#__PURE__*/_jsx(Icon, {
+            name: isRtl() ? 'chevron-left' : 'chevron-right'
+          })
+        })]
+      }))
+    })
+  });
 };
 export default Breadcrumbs;

package/esm/components/Button/Button.js

@@ -1,8 +1,5 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-/* eslint-disable react/no-deprecated */
-
 import React, { cloneElement, forwardRef, isValidElement, useContext, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -31,6 +28,9 @@ const oldIconNames = {
 };
 import ResponsiveContext from '../ResponsiveContext';
 import OnDarkContext from '../OnDarkContext';
+import ButtonContext from './ButtonContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const renderIcon = _ref => {
   let {
     baseClassName,
@@ -51,7 +51,7 @@ const renderCaret = _ref2 => {
   } = _ref2;
   let caretElement;
   if (typeof caret === 'boolean' && caret) {
-    caretElement = /*#__PURE__*/React.createElement(Icon, {
+    caretElement = /*#__PURE__*/_jsx(Icon, {
       name: "chevron-down",
       size: size === 'lg' ? '16' : '12'
     });
@@ -76,7 +76,7 @@ const Button = /*#__PURE__*/forwardRef((_ref3, ref) => {
     baseClassName,
     className,
     component: Tag,
-    size,
+    size: propsSize,
     intent,
     ghost,
     selected: selectedProp,
@@ -97,6 +97,8 @@ const Button = /*#__PURE__*/forwardRef((_ref3, ref) => {
     return !selectedState;
   };
   const isCollapsed = useContext(ResponsiveContext);
+  const buttonContextConfig = useContext(ButtonContext);
+  const size = propsSize || buttonContextConfig.defaultProps.size;
   const componentProps = {};
   if (Tag === 'button') {
     componentProps.type = 'button';
@@ -132,7 +134,7 @@ const Button = /*#__PURE__*/forwardRef((_ref3, ref) => {
   }
   const isArrowButton = arrow === 'forward' || arrow === 'backward';
   const hasAriaDisabled = Tag === 'button' && disabled && tooltip;
-  let button = /*#__PURE__*/React.createElement(Tag, _extends({
+  let button = /*#__PURE__*/_jsxs(Tag, {
     ref: ref,
     className: classNames(baseClassName, {
       [`${baseClassName}--${size}`]: size,
@@ -148,27 +150,34 @@ const Button = /*#__PURE__*/forwardRef((_ref3, ref) => {
       [`${baseClassName}--on-dark`]: useContext(OnDarkContext)
     }, className),
     disabled: hasAriaDisabled ? undefined : disabled,
-    "aria-disabled": hasAriaDisabled ? 'true' : undefined
-  }, componentProps, props), /*#__PURE__*/React.createElement("span", {
-    className: `${baseClassName}__inner`
-  }, state === 'loading' ? /*#__PURE__*/React.createElement(Spinner, {
-    className: `${baseClassName}__spinner`
-  }) : renderIcon({
-    baseClassName,
-    icon,
-    size,
-    empty: !childrenElement
-  }), /*#__PURE__*/React.createElement("span", null, childrenElement), renderCaret({
-    baseClassName,
-    size,
-    caret
-  })), isArrowButton && !ghost && /*#__PURE__*/React.createElement("span", {
-    className: `${baseClassName}__arrow`
-  }));
+    "aria-disabled": hasAriaDisabled ? 'true' : undefined,
+    ...componentProps,
+    ...props,
+    children: [/*#__PURE__*/_jsxs("span", {
+      className: `${baseClassName}__inner`,
+      children: [state === 'loading' ? /*#__PURE__*/_jsx(Spinner, {
+        className: `${baseClassName}__spinner`
+      }) : renderIcon({
+        baseClassName,
+        icon,
+        size,
+        empty: !childrenElement
+      }), /*#__PURE__*/_jsx("span", {
+        children: childrenElement
+      }), renderCaret({
+        baseClassName,
+        size,
+        caret
+      })]
+    }), isArrowButton && !ghost && /*#__PURE__*/_jsx("span", {
+      className: `${baseClassName}__arrow`
+    })]
+  });
   if (tooltipElement) {
-    button = /*#__PURE__*/React.createElement(Tooltip, {
-      title: tooltipElement
-    }, button);
+    button = /*#__PURE__*/_jsx(Tooltip, {
+      title: tooltipElement,
+      children: button
+    });
   }
   return button;
 });

package/esm/components/Button/Button.stories.js

@@ -1,64 +1,99 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-import React from 'react';
 import Button from './Button';
-export const Basic = args => /*#__PURE__*/React.createElement(Button, args);
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const Basic = args => /*#__PURE__*/_jsx(Button, {
+  ...args
+});
 Basic.args = {
   children: 'Click me'
 };
-export const Ghost = args => /*#__PURE__*/React.createElement(Button, _extends({
-  ghost: true
-}, args));
+export const Ghost = args => /*#__PURE__*/_jsx(Button, {
+  ghost: true,
+  ...args
+});
 Ghost.args = {
   icon: 'gear'
 };
-export const Intents = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Basic, _extends({
-  intent: "info"
-}, Basic.args)), ` `, /*#__PURE__*/React.createElement(Basic, _extends({
-  intent: "success"
-}, Basic.args)), ` `, /*#__PURE__*/React.createElement(Basic, _extends({
-  intent: "warning"
-}, Basic.args)), ` `, /*#__PURE__*/React.createElement(Basic, _extends({
-  intent: "danger"
-}, Basic.args)));
-export const Arrows = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Basic, _extends({
-  arrow: "forward"
-}, Basic.args)), ` `, /*#__PURE__*/React.createElement(Basic, _extends({
-  arrow: "forward",
-  size: "lg"
-}, Basic.args)), ` `, /*#__PURE__*/React.createElement(Basic, _extends({
-  arrow: "forward",
-  icon: "cpu"
-}, Basic.args)), ` `, /*#__PURE__*/React.createElement(Basic, _extends({
-  arrow: "forward",
-  intent: "danger"
-}, Basic.args))), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Basic, _extends({
-  arrow: "backward"
-}, Basic.args)), ` `, /*#__PURE__*/React.createElement(Basic, _extends({
-  arrow: "backward",
-  size: "lg"
-}, Basic.args)), ` `, /*#__PURE__*/React.createElement(Basic, _extends({
-  arrow: "backward",
-  icon: "cpu"
-}, Basic.args)), ` `, /*#__PURE__*/React.createElement(Basic, _extends({
-  arrow: "backward",
-  intent: "danger"
-}, Basic.args))));
+export const Intents = () => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsx(Basic, {
+    intent: "info",
+    ...Basic.args
+  }), ` `, /*#__PURE__*/_jsx(Basic, {
+    intent: "success",
+    ...Basic.args
+  }), ` `, /*#__PURE__*/_jsx(Basic, {
+    intent: "warning",
+    ...Basic.args
+  }), ` `, /*#__PURE__*/_jsx(Basic, {
+    intent: "danger",
+    ...Basic.args
+  })]
+});
+export const Arrows = () => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsxs("p", {
+    children: [/*#__PURE__*/_jsx(Basic, {
+      arrow: "forward",
+      ...Basic.args
+    }), ` `, /*#__PURE__*/_jsx(Basic, {
+      arrow: "forward",
+      size: "lg",
+      ...Basic.args
+    }), ` `, /*#__PURE__*/_jsx(Basic, {
+      arrow: "forward",
+      icon: "cpu",
+      ...Basic.args
+    }), ` `, /*#__PURE__*/_jsx(Basic, {
+      arrow: "forward",
+      intent: "danger",
+      ...Basic.args
+    })]
+  }), /*#__PURE__*/_jsxs("p", {
+    children: [/*#__PURE__*/_jsx(Basic, {
+      arrow: "backward",
+      ...Basic.args
+    }), ` `, /*#__PURE__*/_jsx(Basic, {
+      arrow: "backward",
+      size: "lg",
+      ...Basic.args
+    }), ` `, /*#__PURE__*/_jsx(Basic, {
+      arrow: "backward",
+      icon: "cpu",
+      ...Basic.args
+    }), ` `, /*#__PURE__*/_jsx(Basic, {
+      arrow: "backward",
+      intent: "danger",
+      ...Basic.args
+    })]
+  })]
+});
 export const States = () => [{
   intent: 'primary'
 }, {
   disabled: true
 }, {
   ghost: true
-}].map((props, index) => /*#__PURE__*/React.createElement("p", {
-  key: index.toString()
-}, /*#__PURE__*/React.createElement(Basic, _extends({
-  state: "hovered"
-}, Basic.args, props)), ` `, /*#__PURE__*/React.createElement(Basic, _extends({
-  state: "active"
-}, Basic.args, props)), ` `, /*#__PURE__*/React.createElement(Basic, _extends({
-  state: "loading"
-}, Basic.args, props)), ` `, /*#__PURE__*/React.createElement(Basic, _extends({
-  state: "focused"
-}, Basic.args, props))));
+}].map((props, index) =>
+/*#__PURE__*/
+// eslint-disable-next-line react/no-array-index-key
+_jsxs("p", {
+  children: [/*#__PURE__*/_jsx(Basic, {
+    state: "hovered",
+    ...Basic.args,
+    ...props
+  }), ` `, /*#__PURE__*/_jsx(Basic, {
+    state: "active",
+    ...Basic.args,
+    ...props
+  }), ` `, /*#__PURE__*/_jsx(Basic, {
+    state: "loading",
+    ...Basic.args,
+    ...props
+  }), ` `, /*#__PURE__*/_jsx(Basic, {
+    state: "focused",
+    ...Basic.args,
+    ...props
+  })]
+}, index.toString()));

package/esm/components/Button/ButtonContext.js

@@ -0,0 +1,18 @@
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+import { createContext } from 'react';
+const defaultValue = {
+  defaultProps: {
+    size: undefined
+  }
+};
+export const ButtonContext = /*#__PURE__*/createContext(defaultValue);
+export const getButtonContextValue = value => ({
+  ...defaultValue,
+  ...value,
+  defaultProps: {
+    ...defaultValue.defaultProps,
+    ...(value.defaultProps || {})
+  }
+});
+export default ButtonContext;

package/esm/components/ButtonGroup/ButtonGroup.js

@@ -1,9 +1,8 @@
-import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
-import React from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * `ButtonGroup` component is used for visual grouping of several [Buttons](#!/Button) together.
  * @since 0.0.37
@@ -16,9 +15,11 @@ const ButtonGroup = _ref => {
     innerRef,
     ...props
   } = _ref;
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/_jsx("div", {
     className: classNames(baseClassName, className),
-    ref: innerRef
-  }, props), children);
+    ref: innerRef,
+    ...props,
+    children: children
+  });
 };
 export default ButtonGroup;