@doist/reactist 12.0.4 → 13.0.0

package/dist/reactist.cjs.development.js

@@ -579,9 +579,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 +601,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 +612,7 @@ const BaseButton = /*#__PURE__*/polymorphicComponent(function BaseButton(_ref, r
     endIcon,
     icon,
     width = 'auto',
-    align
+    align = 'center'
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$7);
 
@@ -623,23 +623,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;
 });
 
@@ -886,7 +889,7 @@ const Heading = /*#__PURE__*/React.forwardRef(function Heading(_ref, ref) {
   }), children);
 });
 
-var modules_a9637dd3 = {"text":"_2282cb83","size-caption":"_087a8179","size-copy":"a4423c2a","size-subtitle":"_03365a63","weight-semibold":"_5213e4ab","weight-bold":"_3d58c8f2","tone-secondary":"_892a359a","tone-danger":"f9cb5d8a","tone-positive":"fcedb234","lineClampMultipleLines":"_765949c1","lineClamp-1":"c3e4800e","lineClamp-2":"b25b652b","lineClamp-3":"bb13d214","lineClamp-4":"_6db1928e","lineClamp-5":"e9944c1d"};
+var modules_a9637dd3 = {"text":"a83bd4e0","size-caption":"_266d6623","size-copy":"a8d37c6e","size-subtitle":"_39f4eb1f","weight-semibold":"_7be5c531","weight-bold":"e214ff2e","tone-secondary":"_6a3e5ade","tone-danger":"_8f5b5f2b","tone-positive":"_9ae47ae4","lineClampMultipleLines":"_969f18f7","lineClamp-1":"_2f303ac3","lineClamp-2":"d3e04245","lineClamp-3":"_33411704","lineClamp-4":"bfc32640","lineClamp-5":"f813c82f"};
 
 const _excluded$c = ["as", "size", "weight", "tone", "align", "children", "lineClamp", "exceptionallySetClassName"];
 const Text = /*#__PURE__*/polymorphicComponent(function Text(_ref, ref) {
@@ -1116,7 +1119,7 @@ function useId(providedId) {
   return ref.current;
 }
 
-var modules_540a88ff = {"container":"ed7d894c","primaryLabel":"_22213081","secondaryLabel":"be8637dd","auxiliaryLabel":"_72b46ad5"};
+var modules_540a88ff = {"container":"_2e189908","auxiliaryLabel":"_83051e0a","bordered":"fd20ef50","error":"d1a17d92","primaryLabel":"_75e0afa0","secondaryLabel":"d04a867d","messageIcon":"_77b2107e"};
 
 function FieldHint(props) {
   return /*#__PURE__*/React.createElement(Text, _objectSpread2({
@@ -1126,11 +1129,52 @@ function FieldHint(props) {
   }, props));
 }
 
+function MessageIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _objectSpread2({
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5ZM1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8ZM8.66667 10.3333C8.66667 10.7015 8.36819 11 8 11C7.63181 11 7.33333 10.7015 7.33333 10.3333C7.33333 9.96514 7.63181 9.66667 8 9.66667C8.36819 9.66667 8.66667 9.96514 8.66667 10.3333ZM8.65766 5.65766C8.65766 5.29445 8.36322 5 8 5C7.99087 5.00008 7.98631 5.00013 7.98175 5.00025C7.97719 5.00038 7.97263 5.00059 7.96352 5.00101C7.60086 5.02116 7.3232 5.33149 7.34335 5.69415L7.50077 8.52774C7.53575 9.15742 8.46425 9.15742 8.49923 8.52774L8.65665 5.69415C8.65707 5.68503 8.65728 5.68047 8.65741 5.67591C8.65754 5.67135 8.65758 5.66679 8.65766 5.65766Z",
+    fill: "currentColor"
+  }));
+}
+
+function FieldMessage({
+  id,
+  children,
+  tone
+}) {
+  const textTone = tone === 'error' ? 'danger' : tone === 'success' ? 'positive' : 'normal';
+  return /*#__PURE__*/React.createElement(Text, {
+    as: "p",
+    tone: textTone,
+    size: "copy",
+    id: id
+  }, /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    marginRight: "xsmall",
+    display: "inlineFlex",
+    className: modules_540a88ff.messageIcon
+  }, tone === 'loading' ? /*#__PURE__*/React.createElement(Spinner, {
+    size: 16
+  }) : /*#__PURE__*/React.createElement(MessageIcon, {
+    "aria-hidden": true
+  })), children);
+}
+
 function BaseField({
+  variant = 'default',
   label,
   secondaryLabel,
   auxiliaryLabel,
   hint,
+  message,
+  tone = 'neutral',
   className,
   children,
   maxWidth,
@@ -1140,21 +1184,26 @@ function BaseField({
 }) {
   const id = useId(originalId);
   const hintId = useId();
-  const ariaDescribedBy = originalAriaDescribedBy != null ? originalAriaDescribedBy : hint ? hintId : undefined;
+  const messageId = useId();
+  const ariaDescribedBy = originalAriaDescribedBy != null ? originalAriaDescribedBy : [message ? messageId : null, hintId].filter(Boolean).join(' ');
+  const childrenProps = {
+    id,
+    'aria-describedby': ariaDescribedBy,
+    'aria-invalid': tone === 'error' ? true : undefined
+  };
   return /*#__PURE__*/React.createElement(Stack, {
-    space: "small"
-  }, /*#__PURE__*/React.createElement(Box, {
-    className: [className, modules_540a88ff.container],
-    maxWidth: maxWidth,
+    space: "small",
     hidden: hidden
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: [className, modules_540a88ff.container, tone === 'error' ? modules_540a88ff.error : null, variant === 'bordered' ? modules_540a88ff.bordered : null],
+    maxWidth: maxWidth
   }, /*#__PURE__*/React.createElement(Box, {
     as: "span",
     display: "flex",
     justifyContent: "spaceBetween",
-    alignItems: "flexEnd",
-    paddingBottom: "small"
+    alignItems: "flexEnd"
   }, /*#__PURE__*/React.createElement(Text, {
-    size: "body",
+    size: variant === 'bordered' ? 'caption' : 'body',
     as: "label",
     htmlFor: id
   }, label ? /*#__PURE__*/React.createElement("span", {
@@ -1164,13 +1213,10 @@ function BaseField({
   }, "\u00A0(", secondaryLabel, ")") : null), auxiliaryLabel ? /*#__PURE__*/React.createElement(Box, {
     className: modules_540a88ff.auxiliaryLabel,
     paddingLeft: "small"
-  }, auxiliaryLabel) : null), children(ariaDescribedBy ? {
-    id,
-    'aria-describedby': ariaDescribedBy
-  } : {
-    id
-  })), hint ? /*#__PURE__*/React.createElement(FieldHint, {
-    hidden: hidden,
+  }, auxiliaryLabel) : null), children(childrenProps)), message ? /*#__PURE__*/React.createElement(FieldMessage, {
+    id: messageId,
+    tone: tone
+  }, message) : null, hint ? /*#__PURE__*/React.createElement(FieldHint, {
     id: hintId
   }, hint) : null);
 }
@@ -1218,17 +1264,20 @@ function PasswordHiddenIcon(props) {
   })));
 }
 
-var modules_3f03ead6 = {"inputWrapper":"_460d581b"};
+var modules_3f03ead6 = {"inputWrapper":"_66b448b3"};
 
-var modules_aaf25250 = {"inputWrapper":"dd9ffeab"};
+var modules_aaf25250 = {"inputWrapper":"_9d172ece","bordered":"c59d0239","error":"_7e63ee20"};
 
-const _excluded$h = ["label", "secondaryLabel", "auxiliaryLabel", "hint", "maxWidth", "togglePasswordLabel", "hidden", "aria-describedby"];
+const _excluded$h = ["variant", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "togglePasswordLabel", "hidden", "aria-describedby"];
 const PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref, ref) {
   let {
+    variant = 'default',
     label,
     secondaryLabel,
     auxiliaryLabel,
     hint,
+    message,
+    tone,
     maxWidth,
     togglePasswordLabel = 'Toggle password visibility',
     hidden,
@@ -1249,18 +1298,21 @@ const PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref,
   }
 
   return /*#__PURE__*/React.createElement(BaseField, {
+    variant: variant,
     id: id,
     label: label,
     secondaryLabel: secondaryLabel,
     auxiliaryLabel: auxiliaryLabel,
     hint: hint,
+    message: message,
+    tone: tone,
     maxWidth: maxWidth,
     hidden: hidden,
     "aria-describedby": ariaDescribedBy
   }, extraProps => /*#__PURE__*/React.createElement(Box, {
     display: "flex",
     alignItems: "center",
-    className: [modules_3f03ead6.inputWrapper, modules_aaf25250.inputWrapper]
+    className: [modules_3f03ead6.inputWrapper, modules_aaf25250.inputWrapper, tone === 'error' ? modules_aaf25250.error : null, variant === 'bordered' ? modules_aaf25250.bordered : null]
   }, /*#__PURE__*/React.createElement("input", _objectSpread2(_objectSpread2(_objectSpread2({}, props), extraProps), {}, {
     ref: inputRef,
     type: isPasswordVisible ? 'text' : 'password'
@@ -1278,9 +1330,9 @@ const PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref,
   })))));
 });
 
-var modules_1fa9b208 = {"selectWrapper":"_828e09c5"};
+var modules_1fa9b208 = {"selectWrapper":"_07e75293","error":"f147bcea"};
 
-const _excluded$i = ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "maxWidth", "children", "hidden", "aria-describedby"];
+const _excluded$i = ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "children", "hidden", "aria-describedby"];
 const SelectField = /*#__PURE__*/React.forwardRef(function SelectField(_ref, ref) {
   let {
     id,
@@ -1288,6 +1340,8 @@ const SelectField = /*#__PURE__*/React.forwardRef(function SelectField(_ref, ref
     secondaryLabel,
     auxiliaryLabel,
     hint,
+    message,
+    tone,
     maxWidth,
     children,
     hidden,
@@ -1301,11 +1355,13 @@ const SelectField = /*#__PURE__*/React.forwardRef(function SelectField(_ref, ref
     secondaryLabel: secondaryLabel,
     auxiliaryLabel: auxiliaryLabel,
     hint: hint,
+    message: message,
+    tone: tone,
     maxWidth: maxWidth,
     hidden: hidden,
     "aria-describedby": ariaDescribedBy
   }, extraProps => /*#__PURE__*/React.createElement(Box, {
-    className: modules_1fa9b208.selectWrapper
+    className: [modules_1fa9b208.selectWrapper, tone === 'error' ? modules_1fa9b208.error : null]
   }, /*#__PURE__*/React.createElement("select", _objectSpread2(_objectSpread2(_objectSpread2({}, props), extraProps), {}, {
     ref: ref
   }), children), /*#__PURE__*/React.createElement(SelectChevron, {
@@ -1401,42 +1457,52 @@ const SwitchField = /*#__PURE__*/React.forwardRef(function SwitchField(_ref, ref
   }, hint) : null);
 });
 
-var modules_2728c236 = {"container":"_5a579f96"};
+var modules_2728c236 = {"container":"d6ec37c5","bordered":"a60d6043","error":"bef49c61"};
 
-const _excluded$k = ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "maxWidth"];
+const _excluded$k = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth"];
 
 function TextArea(_ref) {
   let {
+    variant = 'default',
     id,
     label,
     secondaryLabel,
     auxiliaryLabel,
     hint,
+    message,
+    tone,
     maxWidth
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$k);
 
   return /*#__PURE__*/React.createElement(BaseField, {
+    variant: variant,
     id: id,
     label: label,
     secondaryLabel: secondaryLabel,
     auxiliaryLabel: auxiliaryLabel,
     hint: hint,
-    className: modules_2728c236.container,
+    message: message,
+    tone: tone,
+    className: [modules_2728c236.container, tone === 'error' ? modules_2728c236.error : null, variant === 'bordered' ? modules_2728c236.bordered : null],
     maxWidth: maxWidth
   }, extraProps => /*#__PURE__*/React.createElement(Box, {
-    width: "full"
+    width: "full",
+    display: "flex"
   }, /*#__PURE__*/React.createElement("textarea", _objectSpread2(_objectSpread2({}, props), extraProps))));
 }
 
-const _excluded$l = ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "type", "maxWidth", "hidden", "aria-describedby"];
+const _excluded$l = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "type", "maxWidth", "hidden", "aria-describedby"];
 const TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
   let {
+    variant = 'default',
     id,
     label,
     secondaryLabel,
     auxiliaryLabel,
     hint,
+    message,
+    tone,
     type = 'text',
     maxWidth,
     hidden,
@@ -1445,16 +1511,19 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
       props = _objectWithoutProperties(_ref, _excluded$l);
 
   return /*#__PURE__*/React.createElement(BaseField, {
+    variant: variant,
     id: id,
     label: label,
     secondaryLabel: secondaryLabel,
     auxiliaryLabel: auxiliaryLabel,
     hint: hint,
+    message: message,
+    tone: tone,
     maxWidth: maxWidth,
     hidden: hidden,
     "aria-describedby": ariaDescribedBy
   }, extraProps => /*#__PURE__*/React.createElement(Box, {
-    className: modules_aaf25250.inputWrapper
+    className: [modules_aaf25250.inputWrapper, tone === 'error' ? modules_aaf25250.error : null, variant === 'bordered' ? modules_aaf25250.bordered : null]
   }, /*#__PURE__*/React.createElement("input", _objectSpread2(_objectSpread2(_objectSpread2({}, props), extraProps), {}, {
     type: type,
     ref: ref
@@ -1901,26 +1970,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
@@ -2237,15 +2286,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.
 //
@@ -2524,308 +2564,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,
@@ -2849,41 +2587,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',
@@ -3081,7 +2784,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 {
@@ -3097,7 +2800,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 ? {
@@ -3147,7 +2850,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"],
@@ -3169,7 +2872,7 @@ function Menu(_ref) {
     children,
     onItemSelect
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$u);
+      props = _objectWithoutProperties(_ref, _excluded$t);
 
   const state = Ariakit.useMenuState(_objectSpread2({
     focusLoop: true,
@@ -3345,268 +3048,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;
@@ -3624,10 +3128,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;