@jetbrains/ring-ui-built 7.0.0-beta.1 → 7.0.0-beta.11

package/components/_helpers/select__filter.js

@@ -1,9 +1,6 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, c as _objectWithoutProperties, d as _objectSpread2, e as _classCallCheck, f as _callSuper } from './_rollupPluginBabelHelpers.js';
-import 'core-js/modules/es.array.concat.js';
-import 'core-js/modules/es.array.filter.js';
-import 'core-js/modules/es.object.to-string.js';
+import { _ as _defineProperty, a as _objectWithoutProperties, b as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { I as Input } from './input.js';
 import sniffr from '../global/sniffer.js';
@@ -13,85 +10,69 @@ import { jsx } from 'react/jsx-runtime';
 
 var modules_b607bec2 = {"filterWithTagsFocused":"filterWithTagsFocused_rui_4b23","light":"light_rui_2ac4","filterWithTags":"filterWithTags_rui_4b23","filterWrapper":"filterWrapper_rui_4b23","filterWithTagsInput":"filterWithTagsInput_rui_4b23","filter":"filter_rui_4b23","popup":"popup_rui_4b23","filterIcon":"filterIcon_rui_4b23","bottomLine":"bottomLine_rui_4b23","bottomLineOverItem":"bottomLineOverItem_rui_4b23","message":"message_rui_4b23","selectAll":"selectAll_rui_4b23"};
 
-var _excluded = ["className", "listId"];
+const _excluded = ["className", "listId"];
 function noop() {}
-var SelectFilter = /*#__PURE__*/function (_Component) {
-  function SelectFilter() {
-    var _this;
-    _classCallCheck(this, SelectFilter);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, SelectFilter, [].concat(args));
-    _defineProperty(_this, "input", void 0);
-    _defineProperty(_this, "inputRef", function (el) {
-      _this.input = el;
-      _this.props.inputRef(el);
+class SelectFilter extends Component {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "input", void 0);
+    _defineProperty(this, "inputRef", el => {
+      this.input = el;
+      this.props.inputRef(el);
     });
-    return _this;
   }
-  _inherits(SelectFilter, _Component);
-  return _createClass(SelectFilter, [{
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.blur();
-    }
-  }, {
-    key: "focus",
-    value: function focus() {
-      var input = this.input;
-      if (input && input !== document.activeElement) {
-        sniffr.browser.name === 'firefox' ? input.select() : input.focus();
+  componentWillUnmount() {
+    this.blur();
+  }
+  focus() {
+    const {
+      input
+    } = this;
+    if (input && input !== document.activeElement) {
+      if (sniffr.browser.name === 'firefox') {
+        input.select();
+      } else {
+        input.focus();
       }
     }
-  }, {
-    key: "blur",
-    value: function blur() {
-      if (this.input && this.input === document.activeElement) {
-        this.input.blur();
-      }
+  }
+  blur() {
+    if (this.input && this.input === document.activeElement) {
+      this.input.blur();
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props = this.props,
-        className = _this$props.className,
-        listId = _this$props.listId,
-        restProps = _objectWithoutProperties(_this$props, _excluded);
-      var classes = classNames(modules_b607bec2.filter, className);
-      return /*#__PURE__*/jsx(ActiveItemContext.ValueContext.Consumer, {
-        children: function children(activeItemId) {
-          return /*#__PURE__*/jsx(I18nContext.Consumer, {
-            children: function children(_ref) {
-              var _restProps$placeholde;
-              var translate = _ref.translate;
-              return /*#__PURE__*/jsx(Input, _objectSpread2(_objectSpread2({}, restProps), {}, {
-                placeholder: (_restProps$placeholde = restProps.placeholder) !== null && _restProps$placeholde !== void 0 ? _restProps$placeholde : translate('filterItems'),
-                "aria-owns": listId,
-                "aria-activedescendant": activeItemId,
-                autoComplete: "off",
-                autoFocus: true,
-                borderless: true,
-                inputRef: _this2.inputRef,
-                className: classes
-              }));
-            }
-          });
+  }
+  render() {
+    const _this$props = this.props,
+      {
+        className,
+        listId
+      } = _this$props,
+      restProps = _objectWithoutProperties(_this$props, _excluded);
+    const classes = classNames(modules_b607bec2.filter, className);
+    return /*#__PURE__*/jsx(ActiveItemContext.ValueContext.Consumer, {
+      children: activeItemId => /*#__PURE__*/jsx(I18nContext.Consumer, {
+        children: _ref => {
+          var _restProps$placeholde;
+          let {
+            translate
+          } = _ref;
+          return /*#__PURE__*/jsx(Input, _objectSpread2(_objectSpread2({}, restProps), {}, {
+            placeholder: (_restProps$placeholde = restProps.placeholder) !== null && _restProps$placeholde !== void 0 ? _restProps$placeholde : translate('filterItems'),
+            "aria-owns": listId,
+            "aria-activedescendant": activeItemId,
+            autoComplete: "off",
+            autoFocus: true,
+            borderless: true,
+            inputRef: this.inputRef,
+            className: classes
+          }));
         }
-      });
-    }
-  }]);
-}(Component);
+      })
+    });
+  }
+}
 _defineProperty(SelectFilter, "defaultProps", {
   inputRef: noop
 });
-SelectFilter.propTypes = {
-  placeholder: PropTypes.string,
-  className: PropTypes.string,
-  inputRef: PropTypes.func,
-  listId: PropTypes.string,
-  activeItemId: PropTypes.string
-};
 
 export { SelectFilter as S, modules_b607bec2 as m };

package/components/_helpers/services-link.js

@@ -1,48 +1,32 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, c as _objectWithoutProperties, d as _objectSpread2, e as _classCallCheck, f as _callSuper } from './_rollupPluginBabelHelpers.js';
+import { a as _objectWithoutProperties, b as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
 import { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import Link from '../link/link.js';
 import { jsx } from 'react/jsx-runtime';
 
 var modules_74a7bf8b = {"light":"light_rui_2ac4","services":"services_rui_27f4","active":"active_rui_27f4","item":"item_rui_27f4","itemLogo":"itemLogo_rui_27f4","activeItem":"activeItem_rui_27f4 item_rui_27f4 active_rui_27f4","line":"line_rui_27f4","itemStacked":"itemStacked_rui_27f4","activeItemStacked":"activeItemStacked_rui_27f4 itemStacked_rui_27f4 active_rui_27f4"};
 
-var _excluded = ["service"];
-var ServicesLink = /*#__PURE__*/function (_PureComponent) {
-  function ServicesLink() {
-    _classCallCheck(this, ServicesLink);
-    return _callSuper(this, ServicesLink, arguments);
+const _excluded = ["service"];
+class ServicesLink extends PureComponent {
+  render() {
+    const _this$props = this.props,
+      {
+        service
+      } = _this$props,
+      props = _objectWithoutProperties(_this$props, _excluded);
+    return /*#__PURE__*/jsx(Link, _objectSpread2(_objectSpread2({
+      target: "_self",
+      href: service.homeUrl
+    }, props), {}, {
+      children: service.iconUrl ? [/*#__PURE__*/jsx("span", {
+        className: modules_74a7bf8b.itemLogo,
+        style: {
+          backgroundImage: "url(".concat(service.iconUrl, ")")
+        }
+      }, "icon"), /*#__PURE__*/jsx("div", {
+        children: service.name
+      }, "text")] : service.name
+    }));
   }
-  _inherits(ServicesLink, _PureComponent);
-  return _createClass(ServicesLink, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        service = _this$props.service,
-        props = _objectWithoutProperties(_this$props, _excluded);
-      return /*#__PURE__*/jsx(Link, _objectSpread2(_objectSpread2({
-        target: "_self",
-        href: service.homeUrl
-      }, props), {}, {
-        children: service.iconUrl ? [/*#__PURE__*/jsx("span", {
-          className: modules_74a7bf8b.itemLogo,
-          style: {
-            backgroundImage: "url(".concat(service.iconUrl, ")")
-          }
-        }, "icon"), /*#__PURE__*/jsx("div", {
-          children: service.name
-        }, "text")] : service.name
-      }));
-    }
-  }]);
-}(PureComponent);
-_defineProperty(ServicesLink, "propTypes", {
-  isActive: PropTypes.bool,
-  service: PropTypes.shape({
-    applicationName: PropTypes.string,
-    iconUrl: PropTypes.string,
-    homeUrl: PropTypes.string,
-    name: PropTypes.string
-  })
-});
+}
 
 export { ServicesLink as S, modules_74a7bf8b as m };

package/components/_helpers/sidebar.js

@@ -1,125 +1,114 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, c as _objectWithoutProperties, d as _objectSpread2, e as _classCallCheck, f as _callSuper } from './_rollupPluginBabelHelpers.js';
-import 'core-js/modules/es.array.concat.js';
+import { _ as _defineProperty, a as _objectWithoutProperties, b as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Waypoint } from 'react-waypoint';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var modules_b8a9dd4f = {"extra-small-screen-media":"i__const_extra_small_screen_media_0","small-screen-media":"i__const_small_screen_media_1","sidebarWidth":"calc(var(--ring-unit)*30)","light":"light_rui_2ac4","contentLayout":"contentLayout_rui_6166","contentLayoutContent":"contentLayoutContent_rui_6166","sidebarContainer":"sidebarContainer_rui_6166","sidebarContainerRight":"sidebarContainerRight_rui_6166","sidebar":"sidebar_rui_6166","sidebarRight":"sidebarRight_rui_6166","sidebarFixedTop":"sidebarFixedTop_rui_6166","sidebarFixedBottom":"sidebarFixedBottom_rui_6166","bottomMarker":"bottomMarker_rui_6166","contentLayoutResponsive":"contentLayoutResponsive_rui_6166"};
 
-var _excluded = ["right", "children", "className", "containerClassName", "fixedClassName", "contentNode"];
-var ABOVE = 'above';
-var INSIDE = 'inside';
-var Sidebar = /*#__PURE__*/function (_Component) {
-  function Sidebar() {
-    var _this;
-    _classCallCheck(this, Sidebar);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, Sidebar, [].concat(args));
-    _defineProperty(_this, "state", {
+const _excluded = ["right", "children", "className", "containerClassName", "fixedClassName", "contentNode"];
+const ABOVE = 'above';
+const INSIDE = 'inside';
+class Sidebar extends Component {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "state", {
       topIsOutside: true,
       bottomIsOutside: true,
       sidebarVisibleHeight: undefined
     });
-    _defineProperty(_this, "sidebarNode", void 0);
-    _defineProperty(_this, "handleTopWaypoint", function (_ref) {
-      var currentPosition = _ref.currentPosition;
-      _this.setState({
+    _defineProperty(this, "sidebarNode", void 0);
+    _defineProperty(this, "handleTopWaypoint", _ref => {
+      let {
+        currentPosition
+      } = _ref;
+      this.setState({
         topIsOutside: currentPosition === ABOVE
       });
     });
-    _defineProperty(_this, "handleBottomWaypoint", function (_ref2) {
-      var currentPosition = _ref2.currentPosition,
-        waypointTop = _ref2.waypointTop;
-      _this.setState({
+    _defineProperty(this, "handleBottomWaypoint", _ref2 => {
+      let {
+        currentPosition,
+        waypointTop
+      } = _ref2;
+      this.setState({
         sidebarVisibleHeight: waypointTop,
         bottomIsOutside: currentPosition !== INSIDE
       });
     });
-    _defineProperty(_this, "sidebarRef", function (node) {
-      _this.sidebarNode = node;
+    _defineProperty(this, "sidebarRef", node => {
+      this.sidebarNode = node;
     });
-    return _this;
   }
-  _inherits(Sidebar, _Component);
-  return _createClass(Sidebar, [{
-    key: "shouldUseFixation",
-    value: function shouldUseFixation() {
-      var contentNode = this.props.contentNode;
-      var sidebarNode = this.sidebarNode;
-      if (!contentNode || !sidebarNode) {
-        return false;
-      }
-      return contentNode.offsetHeight >= sidebarNode.offsetHeight;
-    }
-  }, {
-    key: "shouldFixateBottom",
-    value: function shouldFixateBottom() {
-      var _this$state = this.state,
-        topIsOutside = _this$state.topIsOutside,
-        bottomIsOutside = _this$state.bottomIsOutside;
-      return !bottomIsOutside && topIsOutside && this.shouldUseFixation();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        right = _this$props.right,
-        children = _this$props.children,
-        className = _this$props.className,
-        containerClassName = _this$props.containerClassName,
-        fixedClassName = _this$props.fixedClassName;
-        _this$props.contentNode;
-        var restProps = _objectWithoutProperties(_this$props, _excluded);
-      var _this$state2 = this.state,
-        topIsOutside = _this$state2.topIsOutside,
-        bottomIsOutside = _this$state2.bottomIsOutside,
-        sidebarVisibleHeight = _this$state2.sidebarVisibleHeight;
-      var shouldFixateTop = bottomIsOutside && topIsOutside && this.shouldUseFixation();
-      var shouldFixateBottom = this.shouldFixateBottom();
-      var containerClasses = classNames(modules_b8a9dd4f.sidebarContainer, containerClassName, {
-        [modules_b8a9dd4f.sidebarContainerRight]: right
-      });
-      var classes = classNames(modules_b8a9dd4f.sidebar, className, {
-        [modules_b8a9dd4f.sidebarRight]: right,
-        [modules_b8a9dd4f.sidebarFixedTop]: shouldFixateTop,
-        [modules_b8a9dd4f.sidebarFixedBottom]: shouldFixateBottom,
-        [fixedClassName !== null && fixedClassName !== void 0 ? fixedClassName : '']: shouldFixateTop || shouldFixateBottom
-      });
-      var style = {
-        maxHeight: shouldFixateBottom && sidebarVisibleHeight ? "".concat(sidebarVisibleHeight, "px") : undefined
-      };
-      return /*#__PURE__*/jsxs("aside", {
-        className: containerClasses,
-        ref: this.sidebarRef,
-        children: [/*#__PURE__*/jsx(Waypoint, {
-          onEnter: this.handleTopWaypoint,
-          onLeave: this.handleTopWaypoint
-        }), /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({}, restProps), {}, {
-          style: style,
-          className: classes,
-          children: children
-        })), /*#__PURE__*/jsx("div", {
-          className: modules_b8a9dd4f.bottomMarker,
-          children: /*#__PURE__*/jsx(Waypoint, {
-            onEnter: this.handleBottomWaypoint,
-            onLeave: this.handleBottomWaypoint
-          })
-        })]
-      });
+  shouldUseFixation() {
+    const {
+      contentNode
+    } = this.props;
+    const {
+      sidebarNode
+    } = this;
+    if (!contentNode || !sidebarNode) {
+      return false;
     }
-  }]);
-}(Component);
-_defineProperty(Sidebar, "propTypes", {
-  right: PropTypes.bool,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  containerClassName: PropTypes.string,
-  fixedClassName: PropTypes.string,
-  contentNode: PropTypes.object
-});
+    return contentNode.offsetHeight >= sidebarNode.offsetHeight;
+  }
+  shouldFixateBottom() {
+    const {
+      topIsOutside,
+      bottomIsOutside
+    } = this.state;
+    return !bottomIsOutside && topIsOutside && this.shouldUseFixation();
+  }
+  render() {
+    const _this$props = this.props,
+      {
+        right,
+        children,
+        className,
+        containerClassName,
+        fixedClassName,
+        contentNode
+      } = _this$props,
+      restProps = _objectWithoutProperties(_this$props, _excluded);
+    const {
+      topIsOutside,
+      bottomIsOutside,
+      sidebarVisibleHeight
+    } = this.state;
+    const shouldFixateTop = bottomIsOutside && topIsOutside && this.shouldUseFixation();
+    const shouldFixateBottom = this.shouldFixateBottom();
+    const containerClasses = classNames(modules_b8a9dd4f.sidebarContainer, containerClassName, {
+      [modules_b8a9dd4f.sidebarContainerRight]: right
+    });
+    const classes = classNames(modules_b8a9dd4f.sidebar, className, {
+      [modules_b8a9dd4f.sidebarRight]: right,
+      [modules_b8a9dd4f.sidebarFixedTop]: shouldFixateTop,
+      [modules_b8a9dd4f.sidebarFixedBottom]: shouldFixateBottom,
+      [fixedClassName !== null && fixedClassName !== void 0 ? fixedClassName : '']: shouldFixateTop || shouldFixateBottom
+    });
+    const style = {
+      maxHeight: shouldFixateBottom && sidebarVisibleHeight ? "".concat(sidebarVisibleHeight, "px") : undefined
+    };
+    return /*#__PURE__*/jsxs("aside", {
+      className: containerClasses,
+      ref: this.sidebarRef,
+      children: [/*#__PURE__*/jsx(Waypoint, {
+        onEnter: this.handleTopWaypoint,
+        onLeave: this.handleTopWaypoint
+      }), /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({}, restProps), {}, {
+        style: style,
+        className: classes,
+        children: children
+      })), /*#__PURE__*/jsx("div", {
+        className: modules_b8a9dd4f.bottomMarker,
+        children: /*#__PURE__*/jsx(Waypoint, {
+          onEnter: this.handleBottomWaypoint,
+          onLeave: this.handleBottomWaypoint
+        })
+      })]
+    });
+  }
+}
 
 export { Sidebar as S, modules_b8a9dd4f as m };

package/components/_helpers/tab-link.js

@@ -1,18 +1,19 @@
-import { c as _objectWithoutProperties, d as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
+import { a as _objectWithoutProperties, b as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
 import { memo } from 'react';
-import PropTypes from 'prop-types';
 import Link from '../link/link.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var modules_02138f4a = {"dark":"dark_rui_f090","line-shadow":"inset 0 -1px 0 0","selected-line-shadow":"inset 0 -2px 0 0","light":"light_rui_2ac4","link":"link_rui_fa1d","withLinks":"withLinks_rui_fa1d","hover":"hover_rui_fa1d","pseudo":"pseudo_rui_fa1d","active":"active_rui_fa1d","inherit":"inherit_rui_fa1d","tabs":"tabs_rui_fa1d font_rui_f295","titles":"titles_rui_fa1d","title":"title_rui_fa1d font_rui_f295","selected":"selected_rui_fa1d","collapsed":"collapsed_rui_fa1d","titleLegacy":"titleLegacy_rui_fa1d","visible":"visible_rui_fa1d","container":"container_rui_fa1d","hidden":"hidden_rui_fa1d","hiddenBold":"hiddenBold_rui_fa1d","hiddenRegular":"hiddenRegular_rui_fa1d","tabCounter":"tabCounter_rui_fa1d","autoCollapseContainer":"autoCollapseContainer_rui_fa1d","autoCollapse":"autoCollapse_rui_fa1d","rendered":"rendered_rui_fa1d","adjusted":"adjusted_rui_fa1d","measure":"measure_rui_fa1d","morePopup":"morePopup_rui_fa1d","chevron":"chevron_rui_fa1d","morePopupBeforeEnd":"morePopupBeforeEnd_rui_fa1d"};
 
-var _excluded = ["isSelected", "title", "collapsed"];
+const _excluded = ["isSelected", "title", "collapsed"];
 function TabLink(_ref) {
-  var isSelected = _ref.isSelected,
-    title = _ref.title,
-    collapsed = _ref.collapsed,
+  let {
+      isSelected,
+      title,
+      collapsed
+    } = _ref,
     restProps = _objectWithoutProperties(_ref, _excluded);
-  var renderedTitle = typeof title === 'function' ? title(isSelected, collapsed) : title;
+  const renderedTitle = typeof title === 'function' ? title(isSelected, collapsed) : title;
   return /*#__PURE__*/jsx(Link, _objectSpread2(_objectSpread2({}, restProps), {}, {
     children: /*#__PURE__*/jsxs("div", {
       className: modules_02138f4a.container,
@@ -32,11 +33,6 @@ function TabLink(_ref) {
     })
   }));
 }
-TabLink.propTypes = {
-  isSelected: PropTypes.bool,
-  collapsed: PropTypes.bool,
-  title: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.node])
-};
 var TabLink$1 = /*#__PURE__*/memo(TabLink);
 
 export { TabLink$1 as T, modules_02138f4a as m };

package/components/_helpers/theme.js

@@ -1,5 +1,6 @@
-import { i as _slicedToArray, c as _objectWithoutProperties, d as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
-import { useState, useEffect, forwardRef, useMemo, useContext } from 'react';
+import { a as _objectWithoutProperties, b as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { createContext, useState, useEffect, forwardRef, useMemo, useContext } from 'react';
 import classNames from 'classnames';
 import { createPortal } from 'react-dom';
 import { PopupTargetContext, PopupTarget } from '../popup/popup.target.js';
@@ -11,92 +12,101 @@ var modules_6381a4b3 = {"light":"light_rui_2ac4"};
 
 var modules_59717246 = {"dark":"dark_rui_f090"};
 
-var _excluded = ["theme", "className", "passToPopups", "children", "target"];
+const _excluded = ["theme", "className", "passToPopups", "children", "WrapperComponent", "target"];
 var Theme;
 (function (Theme) {
   Theme["AUTO"] = "auto";
   Theme["LIGHT"] = "light";
   Theme["DARK"] = "dark";
 })(Theme || (Theme = {}));
-var darkMatcher = window.matchMedia('(prefers-color-scheme: dark)');
+const ThemeContext = /*#__PURE__*/createContext({
+  theme: Theme.LIGHT
+});
+const GLOBAL_DARK_CLASS_NAME = 'ring-ui-theme-dark';
+const darkMatcher = window.matchMedia('(prefers-color-scheme: dark)');
 function useTheme() {
-  var _useState = useState(darkMatcher.matches),
-    _useState2 = _slicedToArray(_useState, 2),
-    dark = _useState2[0],
-    setDark = _useState2[1];
-  useEffect(function () {
-    var onChange = function onChange(e) {
-      return setDark(e.matches);
-    };
+  const [dark, setDark] = useState(darkMatcher.matches);
+  useEffect(() => {
+    const onChange = e => setDark(e.matches);
     darkMatcher.addEventListener('change', onChange);
-    return function () {
-      return darkMatcher.removeEventListener('change', onChange);
-    };
+    return () => darkMatcher.removeEventListener('change', onChange);
   }, []);
   return dark ? Theme.DARK : Theme.LIGHT;
 }
 function useThemeClasses(theme) {
-  var systemTheme = useTheme();
-  var resolvedTheme = theme === Theme.AUTO ? systemTheme : theme;
+  const systemTheme = useTheme();
+  const resolvedTheme = theme === Theme.AUTO ? systemTheme : theme;
   return classNames({
     [modules_59717246.dark]: resolvedTheme === Theme.DARK,
+    [GLOBAL_DARK_CLASS_NAME]: resolvedTheme === Theme.DARK,
     [modules_6381a4b3.light]: resolvedTheme === Theme.LIGHT
   });
 }
 function WithThemeClasses(_ref) {
-  var theme = _ref.theme,
-    children = _ref.children;
-  var themeClasses = useThemeClasses(theme);
+  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);
     container.classList.add(modules_59717246.dark);
-    container.classList.add('ring-ui-theme-dark');
+    container.classList.add(GLOBAL_DARK_CLASS_NAME);
   } else {
     container.classList.remove(modules_59717246.dark);
-    container.classList.remove('ring-ui-theme-dark');
+    container.classList.remove(GLOBAL_DARK_CLASS_NAME);
     container.classList.add(modules_6381a4b3.light);
   }
 }
-var ThemeProvider = /*#__PURE__*/forwardRef(function ThemeProvider(_ref2, ref) {
-  var _ref2$theme = _ref2.theme,
-    theme = _ref2$theme === void 0 ? Theme.AUTO : _ref2$theme,
-    className = _ref2.className,
-    passToPopups = _ref2.passToPopups,
-    _children = _ref2.children,
-    target = _ref2.target,
+const DefaultWrapper = /*#__PURE__*/forwardRef(function Wrapper(props, ref) {
+  return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({}, props), {}, {
+    ref: ref
+  }));
+});
+const ThemeProvider = /*#__PURE__*/forwardRef(function ThemeProvider(_ref2, ref) {
+  let {
+      theme = Theme.AUTO,
+      className,
+      passToPopups,
+      children,
+      WrapperComponent = DefaultWrapper,
+      target
+    } = _ref2,
     restProps = _objectWithoutProperties(_ref2, _excluded);
-  var systemTheme = useTheme();
-  var resolvedTheme = theme === Theme.AUTO ? systemTheme : theme;
-  var id = useMemo(function () {
-    return getUID('popups-with-theme-');
-  }, []);
-  useEffect(function () {
+  const systemTheme = useTheme();
+  const resolvedTheme = theme === Theme.AUTO ? systemTheme : theme;
+  const id = useMemo(() => getUID('popups-with-theme-'), []);
+  const themeValue = useMemo(() => ({
+    theme: resolvedTheme
+  }), [resolvedTheme]);
+  useEffect(() => {
     if (target != null) {
       applyTheme(resolvedTheme, target);
     }
   }, [resolvedTheme, target]);
-  var themeClasses = useThemeClasses(theme);
-  var parentTarget = useContext(PopupTargetContext);
-  return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({
-    ref: ref,
-    className: target != null ? undefined : classNames(className, themeClasses)
-  }, restProps), {}, {
-    children: passToPopups ? /*#__PURE__*/jsx(PopupTarget, {
-      id: id,
-      children: function children(popupTarget) {
-        return /*#__PURE__*/jsxs(Fragment, {
-          children: [_children, /*#__PURE__*/createPortal( /*#__PURE__*/jsx("div", {
+  const themeClasses = useThemeClasses(theme);
+  const parentTarget = useContext(PopupTargetContext);
+  return /*#__PURE__*/jsx(ThemeContext.Provider, {
+    value: themeValue,
+    children: /*#__PURE__*/jsx(WrapperComponent, _objectSpread2(_objectSpread2({
+      ref: ref,
+      className: target != null ? undefined : classNames(className, themeClasses)
+    }, restProps), {}, {
+      children: passToPopups ? /*#__PURE__*/jsx(PopupTarget, {
+        id: id,
+        children: popupTarget => /*#__PURE__*/jsxs(Fragment, {
+          children: [children, /*#__PURE__*/createPortal(/*#__PURE__*/jsx("div", {
             className: themeClasses,
             children: popupTarget
           }), parentTarget && getPopupContainer(parentTarget) || document.body)]
-        });
-      }
-    }) : _children
-  }));
+        })
+      }) : children
+    }))
+  });
 });
 var Theme$1 = Theme;
 
-export { Theme$1 as T, WithThemeClasses as W, ThemeProvider as a, useThemeClasses as b, applyTheme as c, modules_59717246 as m, useTheme as u };
+export { GLOBAL_DARK_CLASS_NAME as G, Theme$1 as T, WithThemeClasses as W, ThemeProvider as a, ThemeContext as b, useThemeClasses as c, applyTheme as d, modules_59717246 as m, useTheme as u };