@doist/reactist 12.1.1 → 14.1.0

package/dist/reactist.cjs.development.js

@@ -479,9 +479,13 @@ function Tooltip(_ref) {
   });
   const child = React__default.Children.only(children);
 
-  if (!content) {
+  if (!content || !child) {
     return child;
   }
+
+  if (typeof child.ref === 'string') {
+    throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded');
+  }
   /**
    * Prevents the tooltip from automatically firing on focus all the time. This is to prevent
    * tooltips from showing when the trigger element is focused back after a popover or dialog that
@@ -513,13 +517,15 @@ function Tooltip(_ref) {
     child == null ? void 0 : (_child$props = child.props) == null ? void 0 : _child$props.onFocus == null ? void 0 : _child$props.onFocus(event);
   }
 
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(tooltip.TooltipAnchor, _objectSpread2(_objectSpread2({
-    state: state
-  }, child.props), {}, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(tooltip.TooltipAnchor, {
+    state: state,
     ref: child.ref,
     onFocus: handleFocus
-  }), anchorProps => {
-    return /*#__PURE__*/React__default.cloneElement(child, anchorProps);
+  }, anchorProps => {
+    // Let child props override anchor props so user can specify attributes like tabIndex
+    // Also, do not apply the child's props to TooltipAnchor as props like `as` can create problems
+    // by applying the replacement component/element twice
+    return /*#__PURE__*/React__default.cloneElement(child, _objectSpread2(_objectSpread2({}, anchorProps), child.props));
   }), state.visible ? /*#__PURE__*/React__default.createElement(tooltip.Tooltip, _objectSpread2(_objectSpread2({}, props), {}, {
     state: state,
     className: classNames('reactist_tooltip', className)
@@ -579,9 +585,9 @@ function Spinner({
   })));
 }
 
-var modules_b9569bce = {"baseButton":"_7a2031d6","label":"_09c23660","align-start":"dd82f17a","align-center":"_8a9315ae","align-end":"_6acb4219","size-small":"_1e48abcb","size-normal":"_949f7858","size-large":"_34ac3da9","disabled":"_7e5800ce","iconButton":"_1bdc5d38","startIcon":"_270d7bdf","endIcon":"_471c6e23","variant-primary":"a878a9a4","variant-secondary":"_81c213d2","variant-tertiary":"_12f96f70","variant-quaternary":"_8c546508","tone-destructive":"_441a7e3a"};
+var modules_b9569bce = {"baseButton":"a8af2163","label":"bbdb467b","shape-rounded":"ca02fc07","size-small":"_45ffe137","size-normal":"_352995bd","size-large":"_3991076f","disabled":"f82232b7","iconButton":"ef4c88db","startIcon":"a08c25c7","endIcon":"_2f6adc11","variant-primary":"_3d1243b2","variant-secondary":"_16b6b062","variant-tertiary":"cffaea5e","variant-quaternary":"_98cd5c3f","tone-destructive":"_99cb1c4d"};
 
-const _excluded$7 = ["as", "variant", "tone", "size", "disabled", "loading", "tooltip", "tooltipGapSize", "onClick", "exceptionallySetClassName", "children", "startIcon", "endIcon", "icon", "width", "align"];
+const _excluded$7 = ["as", "variant", "tone", "size", "shape", "disabled", "loading", "tooltip", "onClick", "exceptionallySetClassName", "children", "startIcon", "endIcon", "icon", "width", "align"];
 
 function preventDefault(event) {
   event.preventDefault();
@@ -601,10 +607,10 @@ const BaseButton = /*#__PURE__*/polymorphicComponent(function BaseButton(_ref, r
     variant,
     tone = 'normal',
     size = 'normal',
+    shape = 'normal',
     disabled = false,
     loading = false,
     tooltip,
-    tooltipGapSize,
     onClick,
     exceptionallySetClassName,
     children,
@@ -612,7 +618,7 @@ const BaseButton = /*#__PURE__*/polymorphicComponent(function BaseButton(_ref, r
     endIcon,
     icon,
     width = 'auto',
-    align
+    align = 'center'
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$7);
 
@@ -623,23 +629,26 @@ const BaseButton = /*#__PURE__*/polymorphicComponent(function BaseButton(_ref, r
     "aria-disabled": isDisabled,
     onClick: isDisabled ? preventDefault : onClick,
     width: icon ? undefined : width,
-    className: [exceptionallySetClassName, modules_b9569bce.baseButton, modules_b9569bce["variant-" + variant], modules_b9569bce["tone-" + tone], modules_b9569bce["size-" + size], width !== 'auto' && icon == null && align != null ? modules_b9569bce["align-" + align] : null, icon ? modules_b9569bce.iconButton : null, disabled ? modules_b9569bce.disabled : null]
+    className: [exceptionallySetClassName, modules_b9569bce.baseButton, modules_b9569bce["variant-" + variant], modules_b9569bce["tone-" + tone], modules_b9569bce["size-" + size], shape === 'rounded' ? modules_b9569bce['shape-rounded'] : null, icon ? modules_b9569bce.iconButton : null, disabled ? modules_b9569bce.disabled : null]
   }), icon ? loading && /*#__PURE__*/React.createElement(Spinner, null) || icon : /*#__PURE__*/React.createElement(React.Fragment, null, startIcon ? /*#__PURE__*/React.createElement(Box, {
     display: "flex",
     className: modules_b9569bce.startIcon,
     "aria-hidden": true
-  }, loading && !endIcon ? /*#__PURE__*/React.createElement(Spinner, null) : startIcon) : null, children ? /*#__PURE__*/React.createElement("span", {
-    className: modules_b9569bce.label
+  }, loading && !endIcon ? /*#__PURE__*/React.createElement(Spinner, null) : startIcon) : null, children ? /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    className: modules_b9569bce.label,
+    overflow: "hidden",
+    width: width === 'full' ? 'full' : undefined,
+    textAlign: width === 'auto' ? 'center' : align
   }, children) : null, endIcon || loading && !startIcon ? /*#__PURE__*/React.createElement(Box, {
     display: "flex",
     className: modules_b9569bce.endIcon,
     "aria-hidden": true
   }, loading ? /*#__PURE__*/React.createElement(Spinner, null) : endIcon) : null)); // If it's an icon-only button, make sure it uses the aria-label as tooltip if no tooltip was provided
 
-  const tooltipContent = icon ? tooltip != null ? tooltip : props['aria-label'] : tooltip;
+  const tooltipContent = icon && tooltip === undefined ? props['aria-label'] : tooltip;
   return tooltipContent ? /*#__PURE__*/React.createElement(Tooltip, {
-    content: tooltipContent,
-    gapSize: tooltipGapSize
+    content: tooltipContent
   }, buttonElement) : buttonElement;
 });
 
@@ -1549,7 +1558,7 @@ function usePrevious(value) {
   return ref.current;
 }
 
-var modules_40c67f5b = {"tab":"_15d4bbf4","tab-normal":"ca31866d","tab-primary":"_421272bd","tab-secondary":"acbdf95a","tab-tertiary":"_8c59ab40","tab-plain":"a41904c9"};
+var modules_40c67f5b = {"tab":"a1064a3b","track":"_06f1b8a1","tab-neutral":"dabbec7d","tab-themed":"e6f5ae4e","track-neutral":"_43913ce5","track-themed":"_39bdfdde","track-xsmall":"_1c148f4e","track-small":"_2a370df5","track-medium":"_77430437","track-large":"_33db5352","track-xlarge":"_60bf9564","track-xxlarge":"_29a35080"};
 
 const _excluded$m = ["as", "children", "id", "exceptionallySetClassName"],
       _excluded2$1 = ["children", "space"],
@@ -1563,8 +1572,7 @@ function Tabs({
   children,
   selectedId,
   defaultSelectedId,
-  color = 'primary',
-  variant = 'normal',
+  variant = 'neutral',
   onSelectedIdChange
 }) {
   const tabState = tab.useTabState({
@@ -1584,10 +1592,9 @@ function Tabs({
   const memoizedTabState = React.useMemo(function memoizeTabState() {
     return {
       tabState,
-      color,
       variant
     };
-  }, [color, variant, tabState]);
+  }, [variant, tabState]);
   return /*#__PURE__*/React.createElement(TabsContext.Provider, {
     value: memoizedTabState
   }, children);
@@ -1612,13 +1619,12 @@ const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref, ref) {
   }
 
   const {
-    color,
     variant,
     tabState
   } = tabContextValue;
   return /*#__PURE__*/React.createElement(tab.Tab, _objectSpread2(_objectSpread2({}, props), {}, {
     as: as,
-    className: classNames(exceptionallySetClassName, modules_40c67f5b.tab, modules_40c67f5b["tab-" + (variant != null ? variant : '')], modules_40c67f5b["tab-" + (color != null ? color : '')]),
+    className: classNames(exceptionallySetClassName, modules_40c67f5b.tab, modules_40c67f5b["tab-" + variant]),
     id: id,
     state: tabState,
     ref: ref
@@ -1631,7 +1637,7 @@ const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref, ref) {
 function TabList(_ref2) {
   let {
     children,
-    space = 'medium'
+    space = 'xsmall'
   } = _ref2,
       props = _objectWithoutProperties(_ref2, _excluded2$1);
 
@@ -1642,13 +1648,24 @@ function TabList(_ref2) {
   }
 
   const {
-    tabState
+    tabState,
+    variant
   } = tabContextValue;
-  return /*#__PURE__*/React.createElement(tab.TabList, _objectSpread2({
-    state: tabState
-  }, props), /*#__PURE__*/React.createElement(Inline, {
-    space: space
-  }, children));
+  return (
+    /*#__PURE__*/
+    // The extra <Box> prevents <Inline>'s negative margins from collapsing when used in a flex container
+    // which will render the track with the wrong height
+    React.createElement(Box, null, /*#__PURE__*/React.createElement(tab.TabList, _objectSpread2({
+      state: tabState,
+      as: Box,
+      position: "relative",
+      width: "maxContent"
+    }, props), /*#__PURE__*/React.createElement(Box, {
+      className: classNames(modules_40c67f5b.track, modules_40c67f5b["track-" + space], modules_40c67f5b["track-" + variant])
+    }), /*#__PURE__*/React.createElement(Inline, {
+      space: space
+    }, children)))
+  );
 }
 /**
  * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.
@@ -1679,13 +1696,14 @@ const TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref3, ref)
   const {
     tabState
   } = tabContextValue;
-  return /*#__PURE__*/React.createElement(tab.TabPanel, _objectSpread2(_objectSpread2({
+  const shouldRender = render === 'always' || render === 'active' && tabIsActive || render === 'lazy' && (tabIsActive || tabRendered);
+  return shouldRender ? /*#__PURE__*/React.createElement(tab.TabPanel, _objectSpread2(_objectSpread2({
     tabId: id
   }, props), {}, {
     state: tabState,
     as: as,
     ref: ref
-  }), render === 'always' ? children : null, render === 'active' && tabIsActive ? children : null, render === 'lazy' && (tabIsActive || tabRendered) ? children : null);
+  }), children) : null;
 });
 /**
  * Allows content to be rendered based on the current tab being selected while outside of the TabPanel
@@ -1967,26 +1985,6 @@ function Avatar(_ref) {
 
 Avatar.displayName = 'Avatar';
 
-function Checkbox({
-  label,
-  disabled,
-  checked = false,
-  onChange
-}) {
-  return /*#__PURE__*/React__default.createElement("label", {
-    className: "reactist_checkbox"
-  }, /*#__PURE__*/React__default.createElement("input", {
-    className: "reactist_checkbox--input",
-    value: label,
-    checked: checked,
-    disabled: disabled,
-    onChange: disabled || !onChange ? undefined : event => onChange(event.target.checked),
-    type: "checkbox"
-  }), label);
-}
-
-Checkbox.displayName = 'Checkbox';
-
 const _excluded$p = ["type", "variant", "size", "loading", "disabled", "tooltip", "onClick", "children"];
 /**
  * @deprecated
@@ -2163,7 +2161,8 @@ class Box$1 extends React__default.Component {
       style: {
         display: 'inline-block'
       },
-      className: className
+      className: className,
+      "data-testid": "reactist-dropdown-box"
     }, top && this._getBodyComponent(), this._getTriggerComponent(), !top && this._getBodyComponent());
   }
 
@@ -2221,7 +2220,8 @@ function Body({
     ref: setPosition,
     style: style,
     className: "body",
-    id: "reactist-dropdown-body"
+    id: "reactist-dropdown-body",
+    "data-testid": "reactist-dropdown-body"
   }, children);
 }
 
@@ -2288,6 +2288,7 @@ function ColorItem({
   tooltip
 }) {
   const item = /*#__PURE__*/React__default.createElement("span", {
+    "data-testid": "reactist-color-item",
     className: 'reactist color_item' + (isActive ? ' active' : ''),
     style: {
       backgroundColor: color
@@ -2303,15 +2304,6 @@ function ColorItem({
 
 ColorItem.displayName = 'ColorItem';
 
-const Input = /*#__PURE__*/React__default.forwardRef((props, ref) => {
-  const className = classNames('reactist_input', props.className);
-  return /*#__PURE__*/React__default.createElement("input", _objectSpread2(_objectSpread2({}, props), {}, {
-    className: className,
-    ref: ref
-  }));
-});
-Input.displayName = 'Input';
-
 const _excluded$r = ["children", "className", "translateKey", "isMac"];
 // Support for setting up how to translate modifiers globally.
 //
@@ -2590,308 +2582,6 @@ function KeyCapturer(props) {
   }, composingEventHandlers));
 }
 
-const hasEnoughSpace = (windowDimensions, elementDimensions, wrapperDimensions, wrapperPosition, position, gap = 0) => {
-  const {
-    height: windowHeight,
-    width: windowWidth
-  } = windowDimensions;
-  const {
-    height: elementHeight,
-    width: elementWidth
-  } = elementDimensions;
-  const {
-    height: wrapperHeight,
-    width: wrapperWidth
-  } = wrapperDimensions;
-  const {
-    x: wrapperX,
-    y: wrapperY
-  } = wrapperPosition;
-
-  const verticalPosition = _calculateVerticalPosition(wrapperPosition, wrapperDimensions, elementDimensions);
-
-  const horizontalPosition = _calculateHorizontalPosition(wrapperPosition, wrapperDimensions, elementDimensions);
-
-  const canPlaceVertically = verticalPosition >= 0 && verticalPosition + elementWidth <= windowWidth;
-  const canPlaceHorizontally = horizontalPosition >= 0 && horizontalPosition + elementHeight <= windowHeight;
-
-  if (position === 'top') {
-    return canPlaceVertically && wrapperY - elementHeight - gap >= 0;
-  } else if (position === 'right') {
-    return canPlaceHorizontally && wrapperX + wrapperWidth + elementWidth + gap <= windowWidth;
-  } else if (position === 'left') {
-    return canPlaceHorizontally && wrapperX - elementWidth - gap >= 0;
-  } else if (position === 'bottom') {
-    return canPlaceVertically && wrapperY + wrapperHeight + elementHeight + gap <= windowHeight;
-  }
-
-  return false;
-};
-
-function _calculateVerticalPosition(wrapperPosition, wrapperDimensions, elementDimensions) {
-  return wrapperPosition.x + (wrapperDimensions.width - elementDimensions.width) / 2;
-}
-
-function _calculateHorizontalPosition(wrapperPosition, wrapperDimensions, elementDimensions) {
-  return wrapperPosition.y + (wrapperDimensions.height - elementDimensions.height) / 2;
-}
-
-const calculateTopCenterPosition = (wrapperDimensions, wrapperPosition, elementDimensions, gap = 0) => {
-  const x = _calculateVerticalPosition(wrapperPosition, wrapperDimensions, elementDimensions);
-
-  const y = wrapperPosition.y - elementDimensions.height - gap;
-  return {
-    x,
-    y
-  };
-};
-
-const calculateBottomCenterPosition = (wrapperDimensions, wrapperPosition, elementDimensions, gap = 0) => {
-  const x = _calculateVerticalPosition(wrapperPosition, wrapperDimensions, elementDimensions);
-
-  const y = wrapperPosition.y + wrapperDimensions.height + gap;
-  return {
-    x,
-    y
-  };
-};
-
-const calculateRightCenterPosition = (wrapperDimensions, wrapperPosition, elementDimensions, gap = 0) => {
-  const x = wrapperPosition.x + wrapperDimensions.width + gap;
-
-  const y = _calculateHorizontalPosition(wrapperPosition, wrapperDimensions, elementDimensions);
-
-  return {
-    x,
-    y
-  };
-};
-
-const calculateLeftCenterPosition = (wrapperDimensions, wrapperPosition, elementDimensions, gap = 0) => {
-  const x = wrapperPosition.x - elementDimensions.width - gap;
-
-  const y = _calculateHorizontalPosition(wrapperPosition, wrapperDimensions, elementDimensions);
-
-  return {
-    x,
-    y
-  };
-};
-
-const calculatePosition = (position, wrapperDimensions, wrapperPosition, elementDimensions, gap = 0) => {
-  if (position === 'top') {
-    return calculateTopCenterPosition(wrapperDimensions, wrapperPosition, elementDimensions, gap);
-  } else if (position === 'right') {
-    return calculateRightCenterPosition(wrapperDimensions, wrapperPosition, elementDimensions, gap);
-  } else if (position === 'bottom') {
-    return calculateBottomCenterPosition(wrapperDimensions, wrapperPosition, elementDimensions, gap);
-  } else if (position === 'left') {
-    return calculateLeftCenterPosition(wrapperDimensions, wrapperPosition, elementDimensions, gap);
-  }
-
-  return wrapperPosition;
-};
-
-class Popover extends React__default.Component {
-  constructor(...args) {
-    super(...args);
-    this.popover = void 0;
-    this.wrapper = void 0;
-
-    this._updatePopoverPosition = () => {
-      const {
-        position,
-        allowVaguePositioning,
-        gapSize
-      } = this.props;
-      const wrapperRect = this.wrapper.getBoundingClientRect();
-      const popoverRect = this.popover.getBoundingClientRect(); // Instead of using the documentElement find the nearest absolutely positioned element
-
-      const documentEl = document.documentElement;
-      let node = this.wrapper;
-      let foundParent = false;
-
-      while (!foundParent) {
-        const styles = getComputedStyle(node);
-        const position = styles.getPropertyValue('position');
-
-        if (position === 'absolute' || node === documentEl || !node.parentElement) {
-          foundParent = true;
-        } else {
-          node = node.parentElement;
-        }
-      }
-
-      const nodeRect = node.getBoundingClientRect();
-      const windowDimensions = {
-        height: nodeRect.height,
-        width: nodeRect.width
-      };
-      const popoverDimensions = {
-        height: popoverRect.height,
-        width: popoverRect.width
-      };
-      const wrapperDimensions = {
-        height: wrapperRect.height,
-        width: wrapperRect.width
-      };
-      const wrapperPositionRelative = {
-        x: wrapperRect.left - nodeRect.left,
-        y: wrapperRect.top - nodeRect.top
-      };
-      const wrapperPositionAbsolute = {
-        x: wrapperRect.left,
-        y: wrapperRect.top
-      };
-      const positionsToTry = position === 'auto' ? ['top', 'right', 'bottom', 'left', 'top'] : position === 'vertical' ? ['top', 'bottom'] : position === 'horizontal' ? ['left', 'right'] : [position];
-
-      for (let index = 0; index < positionsToTry.length; index++) {
-        const currentPosition = positionsToTry[index];
-        const enoughSpaceAtPosition = currentPosition != null ? hasEnoughSpace(windowDimensions, popoverDimensions, wrapperDimensions, wrapperPositionRelative, currentPosition, gapSize) : false;
-
-        if (enoughSpaceAtPosition || index === positionsToTry.length - 1) {
-          const popoverPosition = currentPosition != null ? calculatePosition(currentPosition, wrapperDimensions, wrapperPositionAbsolute, popoverDimensions, gapSize) : wrapperPositionAbsolute;
-          this.popover.style.top = popoverPosition.y + "px";
-          this.popover.style.left = popoverPosition.x + "px";
-          /**
-           * Correct placement if vague positioning is allowed.
-           * When it's not allowed we "cut off" popovers and display them
-           * out of the viewport to maintain their centered position.
-           */
-
-          if (allowVaguePositioning) {
-            // correct horizontally
-            if (popoverPosition.x < 0) {
-              this.popover.style.left = 2 * gapSize + "px";
-            } // correct vertically
-
-
-            if (popoverPosition.y + popoverDimensions.height > windowDimensions.height) {
-              this.popover.style.top = windowDimensions.height - popoverDimensions.height - 2 * gapSize + "px";
-            }
-          }
-
-          if (currentPosition !== position) {
-            this.popover.className = this._getClassNameForPosition(currentPosition);
-          }
-
-          break;
-        }
-      }
-    };
-
-    this._getClassNameForPosition = position => {
-      const {
-        visible,
-        withArrow,
-        arrowClassName
-      } = this.props;
-      const className = classNames('reactist_popover', {
-        visible
-      });
-
-      if (visible && withArrow) {
-        return classNames(className, arrowClassName, {
-          arrow_top: position === 'bottom',
-          arrow_right: position === 'left',
-          arrow_bottom: position === 'auto' || position === 'top',
-          arrow_left: position === 'right'
-        });
-      }
-
-      return className;
-    };
-
-    this._updatePopoverRef = popover => {
-      this.popover = popover;
-
-      if (typeof this.props.popoverRef === 'function') {
-        this.props.popoverRef(popover);
-      }
-    };
-
-    this._updateWrapperRef = wrapper => {
-      this.wrapper = wrapper;
-
-      if (typeof this.props.wrapperRef === 'function') {
-        this.props.wrapperRef(wrapper);
-      }
-    };
-  }
-
-  componentDidMount() {
-    if (this.props.visible) {
-      this._updatePopoverPosition();
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    if (this.wrapper && this.props.visible) {
-      const positionChanged = prevProps.position !== this.props.position;
-      const vaguePositioningChanged = prevProps.allowVaguePositioning !== this.props.allowVaguePositioning;
-      const visibilityChanged = prevProps.visible !== this.props.visible;
-      const arrowChanged = prevProps.withArrow !== this.props.withArrow;
-      const gapSizeChanged = prevProps.gapSize !== this.props.gapSize;
-      const contentChanged = prevProps.content !== this.props.content;
-
-      if (positionChanged || vaguePositioningChanged || visibilityChanged || arrowChanged || gapSizeChanged || contentChanged) {
-        this._updatePopoverPosition();
-      }
-    }
-  }
-
-  render() {
-    const {
-      position,
-      wrapperClassName,
-      popoverClassName,
-      onMouseEnter,
-      onMouseLeave,
-      onClick,
-      trigger,
-      content
-    } = this.props;
-    const popoverClass = position ? this._getClassNameForPosition(position) : '';
-    const popoverContentClass = classNames('reactist_popover__content', popoverClassName);
-    const wrapperClass = classNames('reactist_popover__wrapper', wrapperClassName);
-    const triggerElement = React__default.Children.only(trigger);
-
-    function handleTriggerClick(event) {
-      // @ts-expect-error This is temporary while we revisit the Popover interface
-      if (onClick) onClick(event); // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-
-      if (typeof triggerElement.props.onClick === 'function') {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-call
-        triggerElement.props.onClick(event);
-      }
-    }
-
-    return /*#__PURE__*/React__default.createElement("span", {
-      className: wrapperClass,
-      onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave,
-      ref: this._updateWrapperRef
-    }, /*#__PURE__*/React__default.cloneElement(triggerElement, {
-      onClick: handleTriggerClick
-    }), /*#__PURE__*/React__default.createElement("span", {
-      className: popoverClass,
-      ref: this._updatePopoverRef
-    }, this.props.visible ? /*#__PURE__*/React__default.createElement("span", {
-      className: popoverContentClass
-    }, typeof content === 'function' ? content() : content) : null));
-  }
-
-}
-
-Popover.displayName = void 0;
-Popover.defaultProps = void 0;
-Popover.displayName = 'Popover';
-Popover.defaultProps = {
-  position: 'auto',
-  gapSize: 5 // default size of the arrow (see `tooltip.less`)
-
-};
-
 function ProgressBar({
   fillPercentage = 0,
   className,
@@ -2915,41 +2605,6 @@ function ProgressBar({
 
 ProgressBar.displayName = 'ProgressBar';
 
-const _excluded$s = ["value", "options", "onChange", "disabled", "className", "defaultValue"];
-
-function Select(_ref) {
-  let {
-    value,
-    options = [],
-    onChange,
-    disabled = true,
-    className = '',
-    defaultValue
-  } = _ref,
-      otherProps = _objectWithoutProperties(_ref, _excluded$s);
-
-  const selectClassName = classNames('reactist_select', {
-    disabled
-  }, className);
-  return /*#__PURE__*/React__default.createElement("select", _objectSpread2({
-    className: selectClassName,
-    value: value,
-    onChange: event => onChange ? onChange(event.target.value) : undefined,
-    disabled: disabled,
-    defaultValue: defaultValue
-  }, otherProps), options == null ? void 0 : options.map(option => /*#__PURE__*/React__default.createElement("option", {
-    key: option.key || option.value,
-    value: option.value,
-    disabled: option.disabled
-  }, option.text)));
-}
-
-Select.displayName = 'Select';
-Select.defaultProps = {
-  options: [],
-  disabled: false
-};
-
 dayjs.extend(LocalizedFormat);
 const TimeUtils = {
   SHORT_FORMAT_CURRENT_YEAR: 'L',
@@ -3147,7 +2802,7 @@ const CloseIcon$1 = () => /*#__PURE__*/React__default.createElement("svg", {
   d: "M11.293 12L5.146 5.854a.5.5 0 1 1 .708-.708L12 11.293l6.146-6.147a.5.5 0 0 1 .708.708L12.707 12l6.147 6.146a.5.5 0 0 1-.708.708L12 12.707l-6.146 6.147a.5.5 0 0 1-.708-.708L11.293 12z"
 }));
 
-const _excluded$t = ["id", "icon", "title", "subtitle", "children", "customCloseButton", "onClick", "onClose", "closeAltText", "className", "aria-live"];
+const _excluded$s = ["id", "icon", "title", "subtitle", "children", "customCloseButton", "onClick", "onClose", "closeAltText", "className", "aria-live"];
 
 function Notification(_ref) {
   let {
@@ -3163,7 +2818,7 @@ function Notification(_ref) {
     className,
     'aria-live': ariaLive = 'polite'
   } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded$t);
+      rest = _objectWithoutProperties(_ref, _excluded$s);
 
   const titleId = title ? id + "-title" : null;
   const titleIdAttribute = titleId ? {
@@ -3213,7 +2868,7 @@ function Notification(_ref) {
   }, customCloseButton != null ? customCloseButton : /*#__PURE__*/React__default.createElement(CloseIcon$1, null)) : null);
 }
 
-const _excluded$u = ["children", "onItemSelect"],
+const _excluded$t = ["children", "onItemSelect"],
       _excluded2$3 = ["exceptionallySetClassName"],
       _excluded3$2 = ["exceptionallySetClassName"],
       _excluded4$1 = ["value", "children", "onSelect", "hideOnSelect", "onClick", "exceptionallySetClassName", "as"],
@@ -3235,7 +2890,7 @@ function Menu(_ref) {
     children,
     onItemSelect
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$u);
+      props = _objectWithoutProperties(_ref, _excluded$t);
 
   const state = Ariakit.useMenuState(_objectSpread2({
     focusLoop: true,
@@ -3411,268 +3066,69 @@ const MenuGroup = /*#__PURE__*/polymorphicComponent(function MenuGroup(_ref5, re
   }, label) : null, children);
 });
 
-/** @deprecated */
-
-class Box$2 extends React__default.Component {
-  constructor(...args) {
-    super(...args);
-
-    this._closeModal = () => {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      const modalElement = document.getElementById('modal_box');
-      ReactDOM.unmountComponentAtNode(modalElement);
-    };
-
-    this._handleKeyDown = event => {
-      if (event.keyCode === 27) {
-        // ESC
-        this._closeModal();
-
-        if (event.preventDefault) event.preventDefault();
-      }
-    };
-
-    this._handleOverlayClick = event => {
-      if (event.target instanceof Element && (event.target.id === 'reactist-overlay' || event.target.id === 'reactist-overlay-inner')) {
-        this._closeModal();
-      }
-    };
-  }
-
-  componentDidMount() {
-    window.addEventListener('keydown', this._handleKeyDown);
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('keydown', this._handleKeyDown);
-  }
-
-  render() {
-    const {
-      large,
-      medium,
-      style,
-      children,
-      closeOnOverlayClick
-    } = this.props;
-    const className = classNames('reactist_modal_box', {
-      large,
-      medium
-    }, this.props.className);
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "reactist_overlay",
-      id: "reactist-overlay",
-      onClick: closeOnOverlayClick ? this._handleOverlayClick : undefined
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "reactist_overlay_inner",
-      id: "reactist-overlay-inner"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      style: style,
-      className: className
-    }, children)));
-  }
-
-}
-
-Box$2.displayName = void 0;
-Box$2.defaultProps = void 0;
-Box$2.displayName = 'Modal.Box';
-Box$2.defaultProps = {
-  large: false,
-  closeOnOverlayClick: false
-};
-/** @deprecated */
-
-class Header extends React__default.Component {
-  _closeModal(event) {
-    event.preventDefault();
-
-    if (typeof this.props.beforeClose === 'function') {
-      this.props.beforeClose();
-    } // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-
-
-    const modalElement = document.getElementById('modal_box');
-    ReactDOM.unmountComponentAtNode(modalElement);
-  }
-
-  render() {
-    return (
-      /*#__PURE__*/
-
-      /* eslint-disable jsx-a11y/anchor-is-valid */
-      React__default.createElement("div", {
-        className: "reactist_modal_box__header"
-      }, /*#__PURE__*/React__default.createElement("p", null, this.props.title && /*#__PURE__*/React__default.createElement("span", {
-        className: "title"
-      }, this.props.title), this.props.subtitle && /*#__PURE__*/React__default.createElement("span", {
-        className: "subtitle"
-      }, this.props.subtitle), this.props.children), /*#__PURE__*/React__default.createElement("a", {
-        className: "close",
-        onClick: this._closeModal.bind(this),
-        href: "#"
-      }, /*#__PURE__*/React__default.createElement(CloseIcon$1, null)))
-      /* eslint-enable jsx-a11y/anchor-is-valid */
-
-    );
-  }
-
-}
-
-Header.displayName = void 0;
-Header.defaultProps = void 0;
-Header.displayName = 'Modal.Header';
-/** @deprecated */
-
-class Body$1 extends React__default.Component {
-  _closeModal(event) {
-    event.preventDefault(); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-
-    const modalElement = document.getElementById('modal_box');
-    ReactDOM.unmountComponentAtNode(modalElement);
-  }
-
-  render() {
-    const {
-      icon,
-      plain,
-      children,
-      style,
-      showCloseIcon
-    } = this.props;
-    const className = classNames('reactist_modal_box__body', {
-      plain
-    }, this.props.className);
-    return (
-      /*#__PURE__*/
-
-      /* eslint-disable jsx-a11y/anchor-is-valid */
-      React__default.createElement("div", {
-        className: className,
-        style: style
-      }, showCloseIcon && /*#__PURE__*/React__default.createElement("a", {
-        className: "close",
-        onClick: this._closeModal.bind(this),
-        href: "#"
-      }, /*#__PURE__*/React__default.createElement(CloseIcon$1, null)), icon ? /*#__PURE__*/React__default.createElement("div", {
-        className: "dialog"
-      }, /*#__PURE__*/React__default.createElement("div", {
-        className: "reactist_icon"
-      }, icon), /*#__PURE__*/React__default.createElement("div", {
-        className: "content"
-      }, children)) : children)
-      /* eslint-enable jsx-a11y/anchor-is-valid */
-
-    );
-  }
-
-}
-
-Body$1.displayName = void 0;
-Body$1.defaultProps = void 0;
-Body$1.displayName = 'Modal.Body';
-Body$1.defaultProps = {
-  showCloseIcon: false
-};
-/** @deprecated */
-
-class Actions extends React__default.Component {
-  _onClick(onClick) {
-    if (onClick) {
-      onClick();
-    } // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-
+const Input = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  const className = classNames('reactist_input', props.className);
+  return /*#__PURE__*/React__default.createElement("input", _objectSpread2(_objectSpread2({}, props), {}, {
+    className: className,
+    ref: ref
+  }));
+});
+Input.displayName = 'Input';
 
-    const modalElement = document.getElementById('modal_box');
-    ReactDOM.unmountComponentAtNode(modalElement);
-  }
+const _excluded$u = ["value", "options", "onChange", "disabled", "className", "defaultValue"];
 
-  render() {
-    const children = React__default.Children.map( // see: https://github.com/microsoft/TypeScript/issues/21699
-    // @ts-expect-error Children cannot be typed properly yet in React
-    this.props.children, child => {
-      var _child$props;
-
-      if (child != null && (_child$props = child.props) != null && _child$props.close) {
-        return /*#__PURE__*/React__default.cloneElement(child, {
-          onClick: () => this._onClick(child.props.onClick)
-        });
-      } else {
-        return child ? /*#__PURE__*/React__default.cloneElement(child) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
-      }
-    });
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "reactist_modal_box__actions"
-    }, children);
-  }
+function Select(_ref) {
+  let {
+    value,
+    options = [],
+    onChange,
+    disabled = true,
+    className = '',
+    defaultValue
+  } = _ref,
+      otherProps = _objectWithoutProperties(_ref, _excluded$u);
 
+  const selectClassName = classNames('reactist_select', {
+    disabled
+  }, className);
+  return /*#__PURE__*/React__default.createElement("select", _objectSpread2({
+    className: selectClassName,
+    value: value,
+    onChange: event => onChange ? onChange(event.target.value) : undefined,
+    disabled: disabled,
+    defaultValue: defaultValue
+  }, otherProps), options == null ? void 0 : options.map(option => /*#__PURE__*/React__default.createElement("option", {
+    key: option.key || option.value,
+    value: option.value,
+    disabled: option.disabled
+  }, option.text)));
 }
 
-Actions.displayName = void 0;
-Actions.displayName = 'Modal.Actions';
-
-var index = {
-  Box: Box$2,
-  Header,
-  Body: Body$1,
-  Actions
+Select.displayName = 'Select';
+Select.defaultProps = {
+  options: [],
+  disabled: false
 };
 
-/** @deprecated */
-
-function Loading$1({
-  className,
-  spinnerColor = '#3F82EF',
-  bgColor = '#D9E6FB',
-  size = 24,
-  'aria-label': ariaLabel = 'Loading'
-}) {
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classNames('reactist_loading', className),
-    "aria-label": ariaLabel,
-    "aria-live": "assertive",
-    role: "alert"
-  }, /*#__PURE__*/React__default.createElement("span", {
-    className: "reactist_loading--spinner"
-  }, /*#__PURE__*/React__default.createElement("svg", {
-    width: size,
-    height: size,
-    viewBox: '0 0 24 24'
-  }, /*#__PURE__*/React__default.createElement("g", {
-    fill: "none",
-    fillRule: "nonzero"
-  }, /*#__PURE__*/React__default.createElement("path", {
-    fill: spinnerColor,
-    d: "M17.945 3.958A9.955 9.955 0 0 0 12 2c-2.19 0-4.217.705-5.865 1.9L5.131 2.16A11.945 11.945 0 0 1 12 0c2.59 0 4.99.82 6.95 2.217l-1.005 1.741z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    fill: bgColor,
-    d: "M5.13 2.16L6.136 3.9A9.987 9.987 0 0 0 2 12c0 5.523 4.477 10 10 10s10-4.477 10-10a9.986 9.986 0 0 0-4.055-8.042l1.006-1.741A11.985 11.985 0 0 1 24 12c0 6.627-5.373 12-12 12S0 18.627 0 12c0-4.073 2.029-7.671 5.13-9.84z"
-  })))));
-}
-
-Loading$1.displayName = 'Loading';
-
 exports.Alert = Alert;
 exports.Avatar = Avatar;
 exports.Box = Box;
 exports.Button = Button;
 exports.ButtonLink = ButtonLink;
 exports.COLORS = COLORS;
-exports.Checkbox = Checkbox;
 exports.CheckboxField = CheckboxField;
 exports.ColorPicker = ColorPicker;
 exports.Column = Column;
 exports.Columns = Columns;
 exports.DeprecatedButton = Button$1;
-exports.DeprecatedLoading = Loading$1;
-exports.DeprecatedModal = index;
+exports.DeprecatedDropdown = Dropdown;
+exports.DeprecatedInput = Input;
+exports.DeprecatedSelect = Select;
 exports.Divider = Divider;
-exports.Dropdown = Dropdown;
 exports.Heading = Heading;
 exports.Hidden = Hidden;
 exports.HiddenVisually = HiddenVisually;
 exports.Inline = Inline;
-exports.Input = Input;
 exports.KeyCapturer = KeyCapturer;
 exports.KeyboardShortcut = KeyboardShortcut;
 exports.Loading = Loading;
@@ -3690,10 +3146,8 @@ exports.ModalHeader = ModalHeader;
 exports.Notice = Notice;
 exports.Notification = Notification;
 exports.PasswordField = PasswordField;
-exports.Popover = Popover;
 exports.ProgressBar = ProgressBar;
 exports.SUPPORTED_KEYS = SUPPORTED_KEYS;
-exports.Select = Select;
 exports.SelectField = SelectField;
 exports.Stack = Stack;
 exports.SubMenu = SubMenu;