@doist/reactist 11.5.0 → 12.0.1

package/dist/reactist.cjs.development.js

@@ -8,16 +8,16 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var classNames = _interopDefault(require('classnames'));
 var flattenChildren = _interopDefault(require('react-keyed-flatten-children'));
-var Tooltip$1 = require('reakit/Tooltip');
-var reakitUtils = require('reakit-utils');
-var Tab$1 = require('reakit/Tab');
+var tooltip = require('ariakit/tooltip');
+var ariakitUtils = require('ariakit-utils');
+var tab = require('ariakit/tab');
 var dialog = require('@reach/dialog');
 var FocusLock = _interopDefault(require('react-focus-lock'));
 var ReactDOM = _interopDefault(require('react-dom'));
 var dayjs = _interopDefault(require('dayjs'));
 var LocalizedFormat = _interopDefault(require('dayjs/plugin/localizedFormat'));
-var Reakit = require('reakit/Menu');
-var Popover$1 = require('reakit/Popover');
+var Ariakit = require('ariakit/menu');
+var portal = require('ariakit/portal');
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -72,22 +72,6 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-
-  _setPrototypeOf(subClass, superClass);
-}
-
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-
-  return _setPrototypeOf(o, p);
-}
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -103,12 +87,25 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
   }
 
-  return self;
+  return target;
 }
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -147,7 +144,7 @@ function getClassNames(styles, property, value) {
     return null;
   }
 
-  var classList = [];
+  const classList = [];
 
   if (typeof value === 'string') {
     classList.push(styles[property + "-" + value]);
@@ -160,9 +157,9 @@ function getClassNames(styles, property, value) {
   if ( !classList.every(Boolean)) {
     // eslint-disable-next-line no-console
     console.warn('Not all generated class names were found', {
-      property: property,
-      value: value,
-      classList: classList
+      property,
+      value,
+      classList
     });
   }
 
@@ -204,81 +201,81 @@ var modules_131405ac = {"marginTop-xsmall":"c7813d79","marginTop-small":"d3449da
 
 var modules_89b7671c = {"minWidth-0":"_68ab48ca","minWidth-xsmall":"_6fa2b565","minWidth-small":"dd50fabd","minWidth-medium":"e7e2c808","minWidth-large":"_6abbe25e","minWidth-xlarge":"_54f479ac","maxWidth-xsmall":"_148492bc","maxWidth-small":"bd023b96","maxWidth-medium":"e102903f","maxWidth-large":"_0e8d76d7","maxWidth-xlarge":"_47a031d0","maxWidth-full":"cd4c8183","width-0":"_5f5959e8","width-full":"_8c75067a","width-auto":"_56a651f6","width-maxContent":"_26f87bb8","width-minContent":"_07a6ab44","width-fitContent":"a87016fa","width-xsmall":"_1a972e50","width-small":"c96d8261","width-medium":"f3829d42","width-large":"_2caef228","width-xlarge":"_069e1491"};
 
-var _excluded = ["as", "position", "display", "flexDirection", "flexWrap", "flexGrow", "flexShrink", "alignItems", "justifyContent", "alignSelf", "overflow", "width", "height", "background", "border", "borderRadius", "minWidth", "maxWidth", "textAlign", "padding", "paddingY", "paddingX", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "margin", "marginY", "marginX", "marginTop", "marginRight", "marginBottom", "marginLeft", "className", "children"];
-var Box = /*#__PURE__*/polymorphicComponent(function Box(_ref, ref) {
+const _excluded = ["as", "position", "display", "flexDirection", "flexWrap", "flexGrow", "flexShrink", "alignItems", "justifyContent", "alignSelf", "overflow", "width", "height", "background", "border", "borderRadius", "minWidth", "maxWidth", "textAlign", "padding", "paddingY", "paddingX", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "margin", "marginY", "marginX", "marginTop", "marginRight", "marginBottom", "marginLeft", "className", "children"];
+const Box = /*#__PURE__*/polymorphicComponent(function Box(_ref, ref) {
   var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9;
 
-  var _ref$as = _ref.as,
-      component = _ref$as === void 0 ? 'div' : _ref$as,
-      _ref$position = _ref.position,
-      position = _ref$position === void 0 ? 'static' : _ref$position,
-      display = _ref.display,
-      _ref$flexDirection = _ref.flexDirection,
-      flexDirection = _ref$flexDirection === void 0 ? 'row' : _ref$flexDirection,
-      flexWrap = _ref.flexWrap,
-      flexGrow = _ref.flexGrow,
-      flexShrink = _ref.flexShrink,
-      alignItems = _ref.alignItems,
-      justifyContent = _ref.justifyContent,
-      alignSelf = _ref.alignSelf,
-      overflow = _ref.overflow,
-      width = _ref.width,
-      height = _ref.height,
-      background = _ref.background,
-      border = _ref.border,
-      borderRadius = _ref.borderRadius,
-      minWidth = _ref.minWidth,
-      maxWidth = _ref.maxWidth,
-      textAlign = _ref.textAlign,
-      padding = _ref.padding,
-      paddingY = _ref.paddingY,
-      paddingX = _ref.paddingX,
-      paddingTop = _ref.paddingTop,
-      paddingRight = _ref.paddingRight,
-      paddingBottom = _ref.paddingBottom,
-      paddingLeft = _ref.paddingLeft,
-      margin = _ref.margin,
-      marginY = _ref.marginY,
-      marginX = _ref.marginX,
-      marginTop = _ref.marginTop,
-      marginRight = _ref.marginRight,
-      marginBottom = _ref.marginBottom,
-      marginLeft = _ref.marginLeft,
-      className = _ref.className,
-      children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  var resolvedPaddingTop = (_ref2 = paddingTop !== null && paddingTop !== void 0 ? paddingTop : paddingY) !== null && _ref2 !== void 0 ? _ref2 : padding;
-  var resolvedPaddingRight = (_ref3 = paddingRight !== null && paddingRight !== void 0 ? paddingRight : paddingX) !== null && _ref3 !== void 0 ? _ref3 : padding;
-  var resolvedPaddingBottom = (_ref4 = paddingBottom !== null && paddingBottom !== void 0 ? paddingBottom : paddingY) !== null && _ref4 !== void 0 ? _ref4 : padding;
-  var resolvedPaddingLeft = (_ref5 = paddingLeft !== null && paddingLeft !== void 0 ? paddingLeft : paddingX) !== null && _ref5 !== void 0 ? _ref5 : padding;
-  var resolvedMarginTop = (_ref6 = marginTop !== null && marginTop !== void 0 ? marginTop : marginY) !== null && _ref6 !== void 0 ? _ref6 : margin;
-  var resolvedMarginRight = (_ref7 = marginRight !== null && marginRight !== void 0 ? marginRight : marginX) !== null && _ref7 !== void 0 ? _ref7 : margin;
-  var resolvedMarginBottom = (_ref8 = marginBottom !== null && marginBottom !== void 0 ? marginBottom : marginY) !== null && _ref8 !== void 0 ? _ref8 : margin;
-  var resolvedMarginLeft = (_ref9 = marginLeft !== null && marginLeft !== void 0 ? marginLeft : marginX) !== null && _ref9 !== void 0 ? _ref9 : margin;
-  var omitFlex = !display || typeof display === 'string' && display !== 'flex' && display !== 'inlineFlex';
+  let {
+    as: component = 'div',
+    position = 'static',
+    display,
+    flexDirection = 'row',
+    flexWrap,
+    flexGrow,
+    flexShrink,
+    alignItems,
+    justifyContent,
+    alignSelf,
+    overflow,
+    width,
+    height,
+    background,
+    border,
+    borderRadius,
+    minWidth,
+    maxWidth,
+    textAlign,
+    padding,
+    paddingY,
+    paddingX,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    margin,
+    marginY,
+    marginX,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+    className,
+    children
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  const resolvedPaddingTop = (_ref2 = paddingTop != null ? paddingTop : paddingY) != null ? _ref2 : padding;
+  const resolvedPaddingRight = (_ref3 = paddingRight != null ? paddingRight : paddingX) != null ? _ref3 : padding;
+  const resolvedPaddingBottom = (_ref4 = paddingBottom != null ? paddingBottom : paddingY) != null ? _ref4 : padding;
+  const resolvedPaddingLeft = (_ref5 = paddingLeft != null ? paddingLeft : paddingX) != null ? _ref5 : padding;
+  const resolvedMarginTop = (_ref6 = marginTop != null ? marginTop : marginY) != null ? _ref6 : margin;
+  const resolvedMarginRight = (_ref7 = marginRight != null ? marginRight : marginX) != null ? _ref7 : margin;
+  const resolvedMarginBottom = (_ref8 = marginBottom != null ? marginBottom : marginY) != null ? _ref8 : margin;
+  const resolvedMarginLeft = (_ref9 = marginLeft != null ? marginLeft : marginX) != null ? _ref9 : margin;
+  const omitFlex = !display || typeof display === 'string' && display !== 'flex' && display !== 'inlineFlex';
   return /*#__PURE__*/React.createElement(component, _objectSpread2(_objectSpread2({}, props), {}, {
     className: classNames(className, modules_54d944f2.box, display ? getClassNames(modules_54d944f2, 'display', display) : null, position !== 'static' ? getClassNames(modules_54d944f2, 'position', position) : null, minWidth != null ? getClassNames(modules_89b7671c, 'minWidth', String(minWidth)) : null, getClassNames(modules_89b7671c, 'maxWidth', maxWidth), getClassNames(modules_54d944f2, 'textAlign', textAlign), // padding
     getClassNames(modules_b537a8ee, 'paddingTop', resolvedPaddingTop), getClassNames(modules_b537a8ee, 'paddingRight', resolvedPaddingRight), getClassNames(modules_b537a8ee, 'paddingBottom', resolvedPaddingBottom), getClassNames(modules_b537a8ee, 'paddingLeft', resolvedPaddingLeft), // margin
     getClassNames(modules_131405ac, 'marginTop', resolvedMarginTop), getClassNames(modules_131405ac, 'marginRight', resolvedMarginRight), getClassNames(modules_131405ac, 'marginBottom', resolvedMarginBottom), getClassNames(modules_131405ac, 'marginLeft', resolvedMarginLeft), // flex props
     omitFlex ? null : getClassNames(modules_54d944f2, 'flexDirection', flexDirection), omitFlex ? null : getClassNames(modules_54d944f2, 'flexWrap', flexWrap), omitFlex ? null : getClassNames(modules_54d944f2, 'alignItems', alignItems), omitFlex ? null : getClassNames(modules_54d944f2, 'justifyContent', justifyContent), alignSelf != null ? getClassNames(modules_54d944f2, 'alignSelf', alignSelf) : null, flexShrink != null ? getClassNames(modules_54d944f2, 'flexShrink', String(flexShrink)) : null, flexGrow != null ? getClassNames(modules_54d944f2, 'flexGrow', String(flexGrow)) : null, // other props
     getClassNames(modules_54d944f2, 'overflow', overflow), width != null ? getClassNames(modules_89b7671c, 'width', String(width)) : null, getClassNames(modules_54d944f2, 'height', height), getClassNames(modules_54d944f2, 'bg', background), borderRadius !== 'none' ? getClassNames(modules_54d944f2, 'borderRadius', borderRadius) : null, border !== 'none' ? getClassNames(modules_54d944f2, 'border', border) : null) || undefined,
-    ref: ref
+    ref
   }), children);
 });
 
 var modules_67f2d07a = {"space-xsmall":"_6f59c771","column":"_91e05f0f","space-small":"_5a55af26","space-medium":"fa261310","space-large":"_6ebd4e46","space-xlarge":"_55ce4aea","space-xxlarge":"_04c9c3ac","tablet-space-xsmall":"ab76d8cd","tablet-space-small":"_14629bfb","tablet-space-medium":"_5b4e39ea","tablet-space-large":"ba270182","tablet-space-xlarge":"b96e7ec7","tablet-space-xxlarge":"d276612c","desktop-space-xsmall":"d7a73106","desktop-space-small":"_8f5e0e9e","desktop-space-medium":"_3a168411","desktop-space-large":"_0abcc12e","desktop-space-xlarge":"e0bafc60","desktop-space-xxlarge":"d2df9afd","columnWidth-auto":"b18d0b47","columnWidth-1-2":"_102a6b27","columnWidth-1-3":"_829872fe","columnWidth-2-3":"cf5aef9a","columnWidth-1-4":"_931bf714","columnWidth-3-4":"b0303130","columnWidth-1-5":"f6589a6f","columnWidth-2-5":"_2823aed9","columnWidth-3-5":"d00ba3bb","columnWidth-4-5":"_338f2d7c","tablet-tablet-space-xsmall":"_06582234"};
 
-var _excluded$1 = ["width", "children", "exceptionallySetClassName"],
-    _excluded2 = ["space", "align", "alignY", "collapseBelow", "children", "exceptionallySetClassName"];
-var Column = /*#__PURE__*/polymorphicComponent(function Column(_ref, ref) {
-  var _ref$width = _ref.width,
-      width = _ref$width === void 0 ? 'auto' : _ref$width,
-      children = _ref.children,
-      exceptionallySetClassName = _ref.exceptionallySetClassName,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-
-  return /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
+const _excluded$1 = ["width", "children", "exceptionallySetClassName"],
+      _excluded2 = ["space", "align", "alignY", "collapseBelow", "children", "exceptionallySetClassName"];
+const Column = /*#__PURE__*/polymorphicComponent(function Column(_ref, ref) {
+  let {
+    width = 'auto',
+    children,
+    exceptionallySetClassName
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$1);
+
+  return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
     className: [exceptionallySetClassName, modules_67f2d07a.column, width !== 'content' ? getClassNames(modules_67f2d07a, 'columnWidth', width.replace('/', '-')) : null],
     minWidth: 0,
     width: width !== 'content' ? 'full' : undefined,
@@ -287,18 +284,18 @@ var Column = /*#__PURE__*/polymorphicComponent(function Column(_ref, ref) {
     ref: ref
   }), children);
 });
-var Columns = /*#__PURE__*/polymorphicComponent(function Columns(_ref2, ref) {
-  var space = _ref2.space,
-      _ref2$align = _ref2.align,
-      align = _ref2$align === void 0 ? 'left' : _ref2$align,
-      _ref2$alignY = _ref2.alignY,
-      alignY = _ref2$alignY === void 0 ? 'top' : _ref2$alignY,
-      collapseBelow = _ref2.collapseBelow,
-      children = _ref2.children,
-      exceptionallySetClassName = _ref2.exceptionallySetClassName,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-
-  return /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
+const Columns = /*#__PURE__*/polymorphicComponent(function Columns(_ref2, ref) {
+  let {
+    space,
+    align = 'left',
+    alignY = 'top',
+    collapseBelow,
+    children,
+    exceptionallySetClassName
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
+  return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
     className: [exceptionallySetClassName, getClassNames(modules_67f2d07a, 'space', space)],
     display: "flex",
     flexDirection: collapseBelow === 'desktop' ? {
@@ -309,26 +306,23 @@ var Columns = /*#__PURE__*/polymorphicComponent(function Columns(_ref2, ref) {
       mobile: 'column',
       tablet: 'row'
     } : 'row',
-    alignItems: mapResponsiveProp(alignY, function (alignY) {
-      return alignY === 'top' ? 'flexStart' : alignY === 'bottom' ? 'flexEnd' : alignY;
-    }),
-    justifyContent: mapResponsiveProp(align, function (align) {
-      return align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : align;
-    }),
+    alignItems: mapResponsiveProp(alignY, alignY => alignY === 'top' ? 'flexStart' : alignY === 'bottom' ? 'flexEnd' : alignY),
+    justifyContent: mapResponsiveProp(align, align => align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : align),
     ref: ref
   }), children);
 });
 
 var modules_c742c4d7 = {"weight-primary":"_3f3a401c","weight-secondary":"_03b05b70","weight-tertiary":"b6f67ff8"};
 
-var _excluded$2 = ["weight"];
+const _excluded$2 = ["weight"];
 
 function Divider(_ref) {
-  var _ref$weight = _ref.weight,
-      weight = _ref$weight === void 0 ? 'tertiary' : _ref$weight,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  let {
+    weight = 'tertiary'
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$2);
 
-  return /*#__PURE__*/React.createElement(Box, Object.assign({
+  return /*#__PURE__*/React.createElement(Box, _objectSpread2({
     as: "hr",
     className: getClassNames(modules_c742c4d7, 'weight', weight)
   }, props));
@@ -336,69 +330,61 @@ function Divider(_ref) {
 
 var modules_da5d5c21 = {"space-xsmall":"_6b1279e0","space-small":"_0d82c42d","space-medium":"_556714e1","space-large":"e90b43fb","space-xlarge":"a9c34345","space-xxlarge":"aa102efe","tablet-space-xsmall":"_34d16157","tablet-space-small":"c7e0e54f","tablet-space-medium":"_7f2a4e4b","tablet-space-large":"ae256487","tablet-space-xlarge":"e88be0f7","tablet-space-xxlarge":"dc7bcb18","desktop-space-xsmall":"_853f3012","desktop-space-small":"_3bfaf758","desktop-space-medium":"_36462a93","desktop-space-large":"e73081b7","desktop-space-xlarge":"e22ec9dd","desktop-space-xxlarge":"_4a20bd12"};
 
-var _excluded$3 = ["as", "space", "align", "alignY", "children", "exceptionallySetClassName"];
-var Inline = /*#__PURE__*/polymorphicComponent(function Inline(_ref, ref) {
-  var as = _ref.as,
-      space = _ref.space,
-      _ref$align = _ref.align,
-      align = _ref$align === void 0 ? 'left' : _ref$align,
-      _ref$alignY = _ref.alignY,
-      alignY = _ref$alignY === void 0 ? 'center' : _ref$alignY,
-      children = _ref.children,
-      exceptionallySetClassName = _ref.exceptionallySetClassName,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-
-  return /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
+const _excluded$3 = ["as", "space", "align", "alignY", "children", "exceptionallySetClassName"];
+const Inline = /*#__PURE__*/polymorphicComponent(function Inline(_ref, ref) {
+  let {
+    as,
+    space,
+    align = 'left',
+    alignY = 'center',
+    children,
+    exceptionallySetClassName
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$3);
+
+  return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
     as: as,
     display: "flex",
     flexWrap: "wrap",
     className: [exceptionallySetClassName, getClassNames(modules_da5d5c21, 'space', space)],
     ref: ref,
-    alignItems: mapResponsiveProp(alignY, function (alignY) {
-      return alignY === 'top' ? 'flexStart' : alignY === 'bottom' ? 'flexEnd' : 'center';
-    }),
-    justifyContent: mapResponsiveProp(align, function (align) {
-      return align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : 'center';
-    })
+    alignItems: mapResponsiveProp(alignY, alignY => alignY === 'top' ? 'flexStart' : alignY === 'bottom' ? 'flexEnd' : 'center'),
+    justifyContent: mapResponsiveProp(align, align => align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : 'center')
   }), children);
 });
 
 var modules_3af3b7ac = {"space-xsmall":"_7b475ead","space-small":"_5641699f","space-medium":"_1a1c63e4","space-large":"_560f80a0","space-xlarge":"_84ffebbc","space-xxlarge":"b60a65cb","tablet-space-xsmall":"d808f5c3","tablet-space-small":"a51c76b3","tablet-space-medium":"_7185a7aa","tablet-space-large":"af82e610","tablet-space-xlarge":"_88b4ff46","tablet-space-xxlarge":"_9de15321","desktop-space-xsmall":"_6fb32d20","desktop-space-small":"_07ee315a","desktop-space-medium":"a270d7ec","desktop-space-large":"ea6ebb29","desktop-space-xlarge":"_35b36178","desktop-space-xxlarge":"_56c7dc23"};
 
-var _excluded$4 = ["as", "space", "align", "dividers", "children", "exceptionallySetClassName"];
-var Stack = /*#__PURE__*/polymorphicComponent(function Stack(_ref, ref) {
-  var as = _ref.as,
-      space = _ref.space,
-      _ref$align = _ref.align,
-      align = _ref$align === void 0 ? 'start' : _ref$align,
-      _ref$dividers = _ref.dividers,
-      dividers = _ref$dividers === void 0 ? 'none' : _ref$dividers,
-      children = _ref.children,
-      exceptionallySetClassName = _ref.exceptionallySetClassName,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-
-  var alignProps = align === 'start' ? undefined : {
+const _excluded$4 = ["as", "space", "align", "dividers", "children", "exceptionallySetClassName"];
+const Stack = /*#__PURE__*/polymorphicComponent(function Stack(_ref, ref) {
+  let {
+    as,
+    space,
+    align = 'start',
+    dividers = 'none',
+    children,
+    exceptionallySetClassName
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$4);
+
+  const alignProps = align === 'start' ? undefined : {
     width: 'full',
     flexDirection: 'column',
     display: 'flex',
-    alignItems: mapResponsiveProp(align, function (align) {
-      return align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center';
-    })
+    alignItems: mapResponsiveProp(align, align => align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center')
   };
-  return /*#__PURE__*/React.createElement(Box, Object.assign({}, props, alignProps, {
+  return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2(_objectSpread2({}, props), alignProps), {}, {
     as: as,
     className: [exceptionallySetClassName, getClassNames(modules_3af3b7ac, 'space', space)],
     ref: ref
-  }), dividers !== 'none' ? React.Children.map(flattenChildren(children), function (child, index) {
-    return index > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
-      weight: dividers
-    }), child) : child;
-  }) : children);
+  }), dividers !== 'none' ? React.Children.map(flattenChildren(children), (child, index) => index > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
+    weight: dividers
+  }), child) : child) : children);
 });
 
 var modules_4689e97e = {"hiddenOnPrint":"_0e595dea"};
 
-var _excluded$5 = ["display", "children", "exceptionallySetClassName"];
+const _excluded$5 = ["display", "children", "exceptionallySetClassName"];
 /**
  * A component that allows to specify how to hide itself on certain responsive screen sizes, or on
  * print media.
@@ -408,17 +394,18 @@ var _excluded$5 = ["display", "children", "exceptionallySetClassName"];
  *   technologies.
  */
 
-var Hidden = /*#__PURE__*/polymorphicComponent(function Hidden(_ref, ref) {
-  var _ref$display = _ref.display,
-      display = _ref$display === void 0 ? 'block' : _ref$display,
-      children = _ref.children,
-      exceptionallySetClassName = _ref.exceptionallySetClassName,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+const Hidden = /*#__PURE__*/polymorphicComponent(function Hidden(_ref, ref) {
+  let {
+    display = 'block',
+    children,
+    exceptionallySetClassName
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$5);
 
-  var hiddenOnPrint = 'print' in props && props.print;
-  var hiddenOnDesktop = ('above' in props);
-  var hiddenOnMobile = ('below' in props);
-  var hiddenOnTablet = 'below' in props && props.below === 'desktop' || 'above' in props && props.above === 'mobile';
+  const hiddenOnPrint = 'print' in props && props.print;
+  const hiddenOnDesktop = ('above' in props);
+  const hiddenOnMobile = ('below' in props);
+  const hiddenOnTablet = 'below' in props && props.below === 'desktop' || 'above' in props && props.above === 'mobile';
 
   if (hiddenOnDesktop && hiddenOnMobile) {
     // eslint-disable-next-line no-console
@@ -434,7 +421,7 @@ var Hidden = /*#__PURE__*/polymorphicComponent(function Hidden(_ref, ref) {
   if ('above' in props) delete props['above'];
   if ('below' in props) delete props['below'];
   if ('print' in props) delete props['print'];
-  return /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
     ref: ref,
     className: [exceptionallySetClassName, hiddenOnPrint ? modules_4689e97e.hiddenOnPrint : null],
     display: hiddenOnDesktop && hiddenOnMobile ? 'none' : {
@@ -453,8 +440,8 @@ var modules_61c16c43 = {"hiddenVisually":"_618235b7"};
  * @see Hidden for fully hiding content, and only under certain conditions.
  */
 
-var HiddenVisually = /*#__PURE__*/polymorphicComponent(function HiddenVisually(props, ref) {
-  return /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
+const HiddenVisually = /*#__PURE__*/polymorphicComponent(function HiddenVisually(props, ref) {
+  return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
     ref: ref,
     position: "absolute",
     overflow: "hidden",
@@ -462,41 +449,35 @@ var HiddenVisually = /*#__PURE__*/polymorphicComponent(function HiddenVisually(p
   }));
 });
 
-var _excluded$6 = ["children", "content", "position", "gapSize", "className"];
+const _excluded$6 = ["children", "content", "position", "gapSize", "className"];
 
-var SHOW_DELAY = 500;
-var HIDE_DELAY = 100;
+const SHOW_DELAY = 500;
+const HIDE_DELAY = 100;
 
 function useDelayedTooltipState(initialState) {
-  var tooltipState = Tooltip$1.useTooltipState(initialState);
-  var delay = useDelay();
-  return React__default.useMemo(function () {
-    return _objectSpread2(_objectSpread2({}, tooltipState), {}, {
-      show: delay(function () {
-        return tooltipState.show();
-      }, SHOW_DELAY),
-      hide: delay(function () {
-        return tooltipState.hide();
-      }, HIDE_DELAY)
-    });
-  }, [delay, tooltipState]);
+  const tooltipState = tooltip.useTooltipState(initialState);
+  const delay = useDelay();
+  return React__default.useMemo(() => _objectSpread2(_objectSpread2({}, tooltipState), {}, {
+    show: delay(() => tooltipState.show(), SHOW_DELAY),
+    hide: delay(() => tooltipState.hide(), HIDE_DELAY)
+  }), [delay, tooltipState]);
 }
 
 function Tooltip(_ref) {
-  var children = _ref.children,
-      content = _ref.content,
-      _ref$position = _ref.position,
-      position = _ref$position === void 0 ? 'top' : _ref$position,
-      _ref$gapSize = _ref.gapSize,
-      gapSize = _ref$gapSize === void 0 ? 3 : _ref$gapSize,
-      className = _ref.className,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
-
-  var tooltip = useDelayedTooltipState({
+  let {
+    children,
+    content,
+    position = 'top',
+    gapSize = 3,
+    className
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$6);
+
+  const state = useDelayedTooltipState({
     placement: position,
     gutter: gapSize
   });
-  var child = React__default.Children.only(children);
+  const child = React__default.Children.only(children);
 
   if (!content) {
     return child;
@@ -515,10 +496,10 @@ function Tooltip(_ref) {
     // This may be resolved soon in an upcoming version of reakit:
     // https://github.com/reakit/reakit/issues/750
     function handleKeyUp(e) {
-      var eventKey = e.key;
+      const eventKey = e.key;
 
       if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {
-        tooltip.show();
+        state.show();
       }
     }
 
@@ -526,19 +507,24 @@ function Tooltip(_ref) {
       once: true
     }); // Prevent tooltip.show from being called by TooltipReference
 
-    event.preventDefault(); // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
-
-    if (typeof child.props.onFocus === 'function') child.props.onFocus(event);
+    event.preventDefault();
+    child.props.onFocus == null ? void 0 : child.props.onFocus(event);
   }
 
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tooltip$1.TooltipReference, Object.assign({}, tooltip, {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment
-    ref: child.ref
-  }, child.props, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(tooltip.TooltipAnchor, {
+    state: state,
     onFocus: handleFocus
-  }), function (referenceProps) {
-    return /*#__PURE__*/React__default.cloneElement(child, referenceProps);
-  }), tooltip.visible ? /*#__PURE__*/React__default.createElement(Tooltip$1.Tooltip, Object.assign({}, tooltip, props, {
+  }, anchorProps => {
+    const {
+      onFocus,
+      onBlur
+    } = anchorProps;
+    return /*#__PURE__*/React__default.cloneElement(child, _objectSpread2(_objectSpread2(_objectSpread2({}, anchorProps), child.props), {}, {
+      onFocus,
+      onBlur
+    }));
+  }), state.visible ? /*#__PURE__*/React__default.createElement(tooltip.Tooltip, _objectSpread2(_objectSpread2({}, props), {}, {
+    state: state,
     className: classNames('reactist_tooltip', className)
   }), typeof content === 'function' ? content() : content) : null);
 }
@@ -557,18 +543,16 @@ function Tooltip(_ref) {
  */
 
 function useDelay() {
-  var timeoutRef = React__default.useRef();
-  var clearTimeouts = React__default.useCallback(function clearTimeouts() {
+  const timeoutRef = React__default.useRef();
+  const clearTimeouts = React__default.useCallback(function clearTimeouts() {
     if (timeoutRef.current != null) {
       clearTimeout(timeoutRef.current);
     }
   }, []); // Runs clearTimeouts when the component is unmounted
 
-  React__default.useEffect(function () {
-    return clearTimeouts;
-  }, [clearTimeouts]);
+  React__default.useEffect(() => clearTimeouts, [clearTimeouts]);
   return React__default.useCallback(function delay(fn, delay) {
-    return function () {
+    return () => {
       clearTimeouts();
       timeoutRef.current = setTimeout(fn, delay);
     };
@@ -577,9 +561,9 @@ function useDelay() {
 
 var modules_c7f5018f = {"svg":"_51539197","spinner":"_54fbe2b3","tint":"a0c466ed","fill":"_745b73d3"};
 
-function Spinner(_ref) {
-  var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 24 : _ref$size;
+function Spinner({
+  size = 24
+}) {
   return /*#__PURE__*/React.createElement("svg", {
     "aria-hidden": true,
     width: size,
@@ -600,7 +584,7 @@ function Spinner(_ref) {
 
 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 _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", "disabled", "loading", "tooltip", "tooltipGapSize", "onClick", "exceptionallySetClassName", "children", "startIcon", "endIcon", "icon", "width", "align"];
 
 function preventDefault(event) {
   event.preventDefault();
@@ -614,33 +598,29 @@ function preventDefault(event) {
  */
 
 
-var BaseButton = /*#__PURE__*/polymorphicComponent(function BaseButton(_ref, ref) {
-  var _ref$as = _ref.as,
-      as = _ref$as === void 0 ? 'div' : _ref$as,
-      variant = _ref.variant,
-      _ref$tone = _ref.tone,
-      tone = _ref$tone === void 0 ? 'normal' : _ref$tone,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'normal' : _ref$size,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$loading = _ref.loading,
-      loading = _ref$loading === void 0 ? false : _ref$loading,
-      tooltip = _ref.tooltip,
-      tooltipGapSize = _ref.tooltipGapSize,
-      onClick = _ref.onClick,
-      exceptionallySetClassName = _ref.exceptionallySetClassName,
-      children = _ref.children,
-      startIcon = _ref.startIcon,
-      endIcon = _ref.endIcon,
-      icon = _ref.icon,
-      _ref$width = _ref.width,
-      width = _ref$width === void 0 ? 'auto' : _ref$width,
-      align = _ref.align,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
-
-  var isDisabled = loading || disabled;
-  var buttonElement = /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
+const BaseButton = /*#__PURE__*/polymorphicComponent(function BaseButton(_ref, ref) {
+  let {
+    as = 'div',
+    variant,
+    tone = 'normal',
+    size = 'normal',
+    disabled = false,
+    loading = false,
+    tooltip,
+    tooltipGapSize,
+    onClick,
+    exceptionallySetClassName,
+    children,
+    startIcon,
+    endIcon,
+    icon,
+    width = 'auto',
+    align
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$7);
+
+  const isDisabled = loading || disabled;
+  const buttonElement = /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
     as: as,
     ref: ref,
     "aria-disabled": isDisabled,
@@ -659,14 +639,14 @@ var BaseButton = /*#__PURE__*/polymorphicComponent(function BaseButton(_ref, ref
     "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
 
-  var tooltipContent = icon ? tooltip !== null && tooltip !== void 0 ? tooltip : props['aria-label'] : tooltip;
+  const tooltipContent = icon ? tooltip != null ? tooltip : props['aria-label'] : tooltip;
   return tooltipContent ? /*#__PURE__*/React.createElement(Tooltip, {
     content: tooltipContent,
     gapSize: tooltipGapSize
   }, buttonElement) : buttonElement;
 });
 
-var _excluded$8 = ["variant", "tone", "size", "type", "disabled", "exceptionallySetClassName"];
+const _excluded$8 = ["variant", "tone", "size", "type", "disabled", "exceptionallySetClassName"];
 /**
  * A semantic button that also looks like a button, and provides all the necessary visual variants.
  * It follows the [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).
@@ -674,20 +654,18 @@ var _excluded$8 = ["variant", "tone", "size", "type", "disabled", "exceptionally
  * @see ButtonLink
  */
 
-var Button = /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
-  var variant = _ref.variant,
-      _ref$tone = _ref.tone,
-      tone = _ref$tone === void 0 ? 'normal' : _ref$tone,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'normal' : _ref$size,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'button' : _ref$type,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      exceptionallySetClassName = _ref.exceptionallySetClassName,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
-
-  return /*#__PURE__*/React.createElement(BaseButton, Object.assign({}, props, {
+const Button = /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
+  let {
+    variant,
+    tone = 'normal',
+    size = 'normal',
+    type = 'button',
+    disabled = false,
+    exceptionallySetClassName
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$8);
+
+  return /*#__PURE__*/React.createElement(BaseButton, _objectSpread2(_objectSpread2({}, props), {}, {
     as: "button",
     ref: ref,
     variant: variant,
@@ -699,8 +677,8 @@ var Button = /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
   }));
 });
 
-var _excluded$9 = ["tone"];
-var alertIconForTone = {
+const _excluded$9 = ["tone"];
+const alertIconForTone = {
   info: AlertInfoIcon,
   positive: AlertPositiveIcon,
   caution: AlertCautionIcon,
@@ -708,15 +686,17 @@ var alertIconForTone = {
 };
 
 function AlertIcon(_ref) {
-  var tone = _ref.tone,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+  let {
+    tone
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$9);
 
-  var Icon = alertIconForTone[tone];
-  return Icon ? /*#__PURE__*/React.createElement(Icon, Object.assign({}, props)) : null;
+  const Icon = alertIconForTone[tone];
+  return Icon ? /*#__PURE__*/React.createElement(Icon, _objectSpread2({}, props)) : null;
 }
 
 function AlertInfoIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  return /*#__PURE__*/React.createElement("svg", _objectSpread2({
     width: "24",
     height: "24",
     fill: "none",
@@ -730,7 +710,7 @@ function AlertInfoIcon(props) {
 }
 
 function AlertPositiveIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  return /*#__PURE__*/React.createElement("svg", _objectSpread2({
     width: "24",
     height: "24",
     fill: "none",
@@ -744,7 +724,7 @@ function AlertPositiveIcon(props) {
 }
 
 function AlertCautionIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  return /*#__PURE__*/React.createElement("svg", _objectSpread2({
     width: "24",
     height: "24",
     fill: "none",
@@ -758,7 +738,7 @@ function AlertCautionIcon(props) {
 }
 
 function AlertCriticalIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  return /*#__PURE__*/React.createElement("svg", _objectSpread2({
     width: "24",
     height: "24",
     fill: "none",
@@ -772,7 +752,7 @@ function AlertCriticalIcon(props) {
 }
 
 function CloseIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  return /*#__PURE__*/React.createElement("svg", _objectSpread2({
     xmlns: "http://www.w3.org/2000/svg",
     width: "24",
     height: "24"
@@ -784,12 +764,13 @@ function CloseIcon(props) {
 
 var modules_6205a58e = {"container":"eb665121","tone-info":"d0373ff9","tone-positive":"bb18dcab","tone-caution":"_0af02331","tone-critical":"f76146f9"};
 
-function Alert(_ref) {
-  var id = _ref.id,
-      children = _ref.children,
-      tone = _ref.tone,
-      closeLabel = _ref.closeLabel,
-      onClose = _ref.onClose;
+function Alert({
+  id,
+  children,
+  tone,
+  closeLabel,
+  onClose
+}) {
   return /*#__PURE__*/React.createElement(Box, {
     id: id,
     role: "alert",
@@ -821,8 +802,9 @@ function Alert(_ref) {
   })) : null));
 }
 
-var _excluded$a = ["size", "exceptionallySetClassName"];
-var sizeMapping = {
+const _excluded$a = ["size", "exceptionallySetClassName"];
+const sizeMapping = {
+  xsmall: 16,
   small: 24,
   medium: 36,
   large: 48
@@ -831,14 +813,15 @@ var sizeMapping = {
 function Loading(_ref) {
   var _sizeMapping$size;
 
-  var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'small' : _ref$size,
-      exceptionallySetClassName = _ref.exceptionallySetClassName,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+  let {
+    size = 'small',
+    exceptionallySetClassName
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$a);
 
-  var numericSize = (_sizeMapping$size = sizeMapping[size]) !== null && _sizeMapping$size !== void 0 ? _sizeMapping$size : sizeMapping.small;
-  var ariaLabel = props['aria-label'] ? props['aria-label'] : !props['aria-labelledby'] ? 'Loading…' : undefined;
-  return /*#__PURE__*/React__default.createElement(Box, Object.assign({}, props, {
+  const numericSize = (_sizeMapping$size = sizeMapping[size]) != null ? _sizeMapping$size : sizeMapping.small;
+  const ariaLabel = props['aria-label'] ? props['aria-label'] : !props['aria-labelledby'] ? 'Loading…' : undefined;
+  return /*#__PURE__*/React__default.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
     "aria-label": ariaLabel,
     className: exceptionallySetClassName,
     display: "flex",
@@ -853,10 +836,11 @@ function Loading(_ref) {
 
 var modules_1b547e7e = {"container":"_464500ae","tone-info":"_1abfe147","tone-positive":"_36ce9859","tone-caution":"f92214b7","tone-critical":"be6cf28e"};
 
-function Notice(_ref) {
-  var id = _ref.id,
-      children = _ref.children,
-      tone = _ref.tone;
+function Notice({
+  id,
+  children,
+  tone
+}) {
   return /*#__PURE__*/React.createElement(Box, {
     id: id,
     role: "alert",
@@ -876,25 +860,25 @@ function Notice(_ref) {
 
 var modules_949d2ff4 = {"heading":"_71a1610c","weight-light":"_63750f40","tone-secondary":"_9ce984cf","tone-danger":"_1acad35e","size-largest":"_3da27a00","size-larger":"df220733","size-smaller":"eb373739","lineClampMultipleLines":"f53cfd2b","lineClamp-1":"e4819fc9","lineClamp-2":"a0ed6177","lineClamp-3":"_180d433e","lineClamp-4":"_40826ad9","lineClamp-5":"_5999b247"};
 
-var _excluded$b = ["level", "weight", "size", "tone", "children", "lineClamp", "align", "exceptionallySetClassName"];
-var Heading = /*#__PURE__*/React.forwardRef(function Heading(_ref, ref) {
-  var level = _ref.level,
-      _ref$weight = _ref.weight,
-      weight = _ref$weight === void 0 ? 'regular' : _ref$weight,
-      size = _ref.size,
-      _ref$tone = _ref.tone,
-      tone = _ref$tone === void 0 ? 'normal' : _ref$tone,
-      children = _ref.children,
-      lineClamp = _ref.lineClamp,
-      align = _ref.align,
-      exceptionallySetClassName = _ref.exceptionallySetClassName,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+const _excluded$b = ["level", "weight", "size", "tone", "children", "lineClamp", "align", "exceptionallySetClassName"];
+const Heading = /*#__PURE__*/React.forwardRef(function Heading(_ref, ref) {
+  let {
+    level,
+    weight = 'regular',
+    size,
+    tone = 'normal',
+    children,
+    lineClamp,
+    align,
+    exceptionallySetClassName
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$b);
 
   // In TypeScript v4.1, this would be properly recognized without needing the type assertion
   // https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#template-literal-types
-  var headingElementName = "h" + level;
-  var lineClampMultipleLines = typeof lineClamp === 'string' ? parseInt(lineClamp, 10) > 1 : (lineClamp || 0) > 1;
-  return /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
+  const headingElementName = "h" + level;
+  const lineClampMultipleLines = typeof lineClamp === 'string' ? parseInt(lineClamp, 10) > 1 : (lineClamp || 0) > 1;
+  return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
     className: [exceptionallySetClassName, modules_949d2ff4.heading, weight !== 'regular' ? getClassNames(modules_949d2ff4, 'weight', weight) : null, tone !== 'normal' ? getClassNames(modules_949d2ff4, 'tone', tone) : null, getClassNames(modules_949d2ff4, 'size', size), lineClampMultipleLines ? modules_949d2ff4.lineClampMultipleLines : null, lineClamp ? getClassNames(modules_949d2ff4, 'lineClamp', lineClamp.toString()) : null],
     textAlign: align,
     // Prevents emojis from being cut-off
@@ -905,25 +889,24 @@ var Heading = /*#__PURE__*/React.forwardRef(function Heading(_ref, ref) {
   }), children);
 });
 
-var modules_a9637dd3 = {"text":"c5028ea8","size-caption":"_05d3a546","size-copy":"_100565e3","size-subtitle":"b8f72625","weight-semibold":"_398ecda1","weight-bold":"_8054cd6b","tone-secondary":"_6abd56b1","tone-danger":"_274b4a47","lineClampMultipleLines":"_724b0054","lineClamp-1":"_51ac6ee4","lineClamp-2":"b0742803","lineClamp-3":"dd664c95","lineClamp-4":"b02775b5","lineClamp-5":"da91b300"};
-
-var _excluded$c = ["as", "size", "weight", "tone", "align", "children", "lineClamp", "exceptionallySetClassName"];
-var Text = /*#__PURE__*/polymorphicComponent(function Text(_ref, ref) {
-  var as = _ref.as,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'body' : _ref$size,
-      _ref$weight = _ref.weight,
-      weight = _ref$weight === void 0 ? 'regular' : _ref$weight,
-      _ref$tone = _ref.tone,
-      tone = _ref$tone === void 0 ? 'normal' : _ref$tone,
-      align = _ref.align,
-      children = _ref.children,
-      lineClamp = _ref.lineClamp,
-      exceptionallySetClassName = _ref.exceptionallySetClassName,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
-
-  var lineClampMultipleLines = typeof lineClamp === 'string' ? Number(lineClamp) > 1 : (lineClamp !== null && lineClamp !== void 0 ? lineClamp : 1) > 1;
-  return /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
+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"};
+
+const _excluded$c = ["as", "size", "weight", "tone", "align", "children", "lineClamp", "exceptionallySetClassName"];
+const Text = /*#__PURE__*/polymorphicComponent(function Text(_ref, ref) {
+  let {
+    as,
+    size = 'body',
+    weight = 'regular',
+    tone = 'normal',
+    align,
+    children,
+    lineClamp,
+    exceptionallySetClassName
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$c);
+
+  const lineClampMultipleLines = typeof lineClamp === 'string' ? Number(lineClamp) > 1 : (lineClamp != null ? lineClamp : 1) > 1;
+  return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
     as: as,
     className: [exceptionallySetClassName, modules_a9637dd3.text, size !== 'body' ? getClassNames(modules_a9637dd3, 'size', size) : null, weight !== 'regular' ? getClassNames(modules_a9637dd3, 'weight', weight) : null, tone !== 'normal' ? getClassNames(modules_a9637dd3, 'tone', tone) : null, lineClampMultipleLines ? modules_a9637dd3.lineClampMultipleLines : null, lineClamp ? getClassNames(modules_a9637dd3, 'lineClamp', lineClamp.toString()) : null],
     textAlign: align,
@@ -934,7 +917,7 @@ var Text = /*#__PURE__*/polymorphicComponent(function Text(_ref, ref) {
   }), children);
 });
 
-var _excluded$d = ["as", "variant", "tone", "size", "exceptionallySetClassName", "openInNewTab"];
+const _excluded$d = ["as", "variant", "tone", "size", "exceptionallySetClassName", "openInNewTab"];
 /**
  * A semantic link that looks like a button, exactly matching the `Button` component in all visual
  * aspects.
@@ -942,20 +925,18 @@ var _excluded$d = ["as", "variant", "tone", "size", "exceptionallySetClassName",
  * @see Button
  */
 
-var ButtonLink = /*#__PURE__*/polymorphicComponent(function ButtonLink(_ref, ref) {
-  var _ref$as = _ref.as,
-      as = _ref$as === void 0 ? 'a' : _ref$as,
-      variant = _ref.variant,
-      _ref$tone = _ref.tone,
-      tone = _ref$tone === void 0 ? 'normal' : _ref$tone,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'normal' : _ref$size,
-      exceptionallySetClassName = _ref.exceptionallySetClassName,
-      _ref$openInNewTab = _ref.openInNewTab,
-      openInNewTab = _ref$openInNewTab === void 0 ? false : _ref$openInNewTab,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
-
-  return /*#__PURE__*/React.createElement(BaseButton, Object.assign({}, props, {
+const ButtonLink = /*#__PURE__*/polymorphicComponent(function ButtonLink(_ref, ref) {
+  let {
+    as = 'a',
+    variant,
+    tone = 'normal',
+    size = 'normal',
+    exceptionallySetClassName,
+    openInNewTab = false
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$d);
+
+  return /*#__PURE__*/React.createElement(BaseButton, _objectSpread2(_objectSpread2({}, props), {}, {
     as: as,
     ref: ref,
     variant: variant,
@@ -967,18 +948,18 @@ var ButtonLink = /*#__PURE__*/polymorphicComponent(function ButtonLink(_ref, ref
   }));
 });
 
-var modules_3d05deee = {"container":"b55607a1"};
+var modules_3d05deee = {"container":"_232127ef"};
 
-var _excluded$e = ["as", "openInNewTab", "exceptionallySetClassName"];
-var TextLink = /*#__PURE__*/polymorphicComponent(function TextLink(_ref, ref) {
-  var _ref$as = _ref.as,
-      as = _ref$as === void 0 ? 'a' : _ref$as,
-      _ref$openInNewTab = _ref.openInNewTab,
-      openInNewTab = _ref$openInNewTab === void 0 ? false : _ref$openInNewTab,
-      exceptionallySetClassName = _ref.exceptionallySetClassName,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+const _excluded$e = ["as", "openInNewTab", "exceptionallySetClassName"];
+const TextLink = /*#__PURE__*/polymorphicComponent(function TextLink(_ref, ref) {
+  let {
+    as = 'a',
+    openInNewTab = false,
+    exceptionallySetClassName
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$e);
 
-  return /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
     as: as,
     display: "inline",
     className: [exceptionallySetClassName, modules_3d05deee.container],
@@ -988,19 +969,19 @@ var TextLink = /*#__PURE__*/polymorphicComponent(function TextLink(_ref, ref) {
   }));
 });
 
-var _excluded$f = ["checked", "indeterminate", "disabled"];
-var svgPath = {
+const _excluded$f = ["checked", "indeterminate", "disabled"];
+const svgPath = {
   checked: 'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2.457 4.293l-5.293 5.293-1.793-1.793a1 1 0 1 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0l6-6a1 1 0 1 0-1.414-1.414z',
   unchecked: 'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm0 1H6a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z',
   mixed: 'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2 7H8a1 1 0 0 0 0 2h8a1 1 0 0 0 0-2z',
   filled: 'M6 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V6C4 4.89543 4.89543 4 6 4Z'
 };
 
-function getPathKey(_ref) {
-  var checked = _ref.checked,
-      indeterminate = _ref.indeterminate,
-      disabled = _ref.disabled;
-
+function getPathKey({
+  checked,
+  indeterminate,
+  disabled
+}) {
   if (indeterminate) {
     return 'mixed'; // indeterminate, when true, overrides the checked state
   }
@@ -1021,18 +1002,20 @@ function getPathKey(_ref) {
   return 'unchecked';
 }
 
-function CheckboxIcon(_ref2) {
-  var checked = _ref2.checked,
-      indeterminate = _ref2.indeterminate,
-      disabled = _ref2.disabled,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
+function CheckboxIcon(_ref) {
+  let {
+    checked,
+    indeterminate,
+    disabled
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$f);
 
-  var pathKey = getPathKey({
-    checked: checked,
-    indeterminate: indeterminate,
-    disabled: disabled
+  const pathKey = getPathKey({
+    checked,
+    indeterminate,
+    disabled
   });
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  return /*#__PURE__*/React.createElement("svg", _objectSpread2({
     xmlns: "http://www.w3.org/2000/svg",
     width: "24",
     height: "24",
@@ -1046,18 +1029,20 @@ function CheckboxIcon(_ref2) {
 
 var modules_664a6a80 = {"container":"_96c4d12f","disabled":"_5048e2a5","checked":"_42187b48","keyFocused":"_3510166f"};
 
-var _excluded$g = ["label", "disabled", "indeterminate", "defaultChecked", "onChange"];
-var CheckboxField = /*#__PURE__*/React.forwardRef(function CheckboxField(_ref, ref) {
+const _excluded$g = ["label", "disabled", "indeterminate", "defaultChecked", "onChange"];
+const CheckboxField = /*#__PURE__*/React.forwardRef(function CheckboxField(_ref, ref) {
   var _ref2, _props$checked, _props$checked2;
 
-  var label = _ref.label,
-      disabled = _ref.disabled,
-      indeterminate = _ref.indeterminate,
-      defaultChecked = _ref.defaultChecked,
-      _onChange = _ref.onChange,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+  let {
+    label,
+    disabled,
+    indeterminate,
+    defaultChecked,
+    onChange
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$g);
 
-  var isControlledComponent = typeof props.checked === 'boolean';
+  const isControlledComponent = typeof props.checked === 'boolean';
 
   if (typeof indeterminate === 'boolean' && !isControlledComponent) {
     // eslint-disable-next-line no-console
@@ -1070,17 +1055,11 @@ var CheckboxField = /*#__PURE__*/React.forwardRef(function CheckboxField(_ref, r
     console.warn('A Checkbox needs a label');
   }
 
-  var _React$useState = React.useState(false),
-      keyFocused = _React$useState[0],
-      setKeyFocused = _React$useState[1];
-
-  var _React$useState2 = React.useState((_ref2 = (_props$checked = props.checked) !== null && _props$checked !== void 0 ? _props$checked : defaultChecked) !== null && _ref2 !== void 0 ? _ref2 : false),
-      checkedState = _React$useState2[0],
-      setChecked = _React$useState2[1];
-
-  var isChecked = (_props$checked2 = props.checked) !== null && _props$checked2 !== void 0 ? _props$checked2 : checkedState;
-  var internalRef = React.useRef(null);
-  var combinedRef = reakitUtils.useForkRef(internalRef, ref);
+  const [keyFocused, setKeyFocused] = React.useState(false);
+  const [checkedState, setChecked] = React.useState((_ref2 = (_props$checked = props.checked) != null ? _props$checked : defaultChecked) != null ? _ref2 : false);
+  const isChecked = (_props$checked2 = props.checked) != null ? _props$checked2 : checkedState;
+  const internalRef = React.useRef(null);
+  const combinedRef = ariakitUtils.useForkRef(internalRef, ref);
   React.useEffect(function setIndeterminate() {
     if (internalRef.current && typeof indeterminate === 'boolean') {
       internalRef.current.indeterminate = indeterminate;
@@ -1091,30 +1070,26 @@ var CheckboxField = /*#__PURE__*/React.forwardRef(function CheckboxField(_ref, r
     display: "flex",
     alignItems: "center",
     className: [modules_664a6a80.container, disabled ? modules_664a6a80.disabled : null, isChecked ? modules_664a6a80.checked : null, keyFocused ? modules_664a6a80.keyFocused : null]
-  }, /*#__PURE__*/React.createElement("input", Object.assign({}, props, {
+  }, /*#__PURE__*/React.createElement("input", _objectSpread2(_objectSpread2({}, props), {}, {
     ref: combinedRef,
     type: "checkbox",
     "aria-checked": indeterminate ? 'mixed' : isChecked,
     checked: isChecked,
     disabled: disabled,
-    onChange: function onChange(event) {
-      _onChange === null || _onChange === void 0 ? void 0 : _onChange(event);
+    onChange: event => {
+      onChange == null ? void 0 : onChange(event);
 
       if (!event.defaultPrevented) {
         setChecked(event.currentTarget.checked);
       }
     },
-    onBlur: function onBlur(event) {
-      var _props$onBlur;
-
+    onBlur: event => {
       setKeyFocused(false);
-      props === null || props === void 0 ? void 0 : (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 ? void 0 : _props$onBlur.call(props, event);
+      props == null ? void 0 : props.onBlur == null ? void 0 : props.onBlur(event);
     },
-    onKeyUp: function onKeyUp(event) {
-      var _props$onKeyUp;
-
+    onKeyUp: event => {
       setKeyFocused(true);
-      props === null || props === void 0 ? void 0 : (_props$onKeyUp = props.onKeyUp) === null || _props$onKeyUp === void 0 ? void 0 : _props$onKeyUp.call(props, event);
+      props == null ? void 0 : props.onKeyUp == null ? void 0 : props.onKeyUp(event);
     }
   })), /*#__PURE__*/React.createElement(CheckboxIcon, {
     checked: isChecked,
@@ -1124,18 +1099,18 @@ var CheckboxField = /*#__PURE__*/React.forwardRef(function CheckboxField(_ref, r
   }), label ? /*#__PURE__*/React.createElement(Text, null, label) : null);
 });
 
-var uid = 0;
+let uid = 0;
 
 function uniqueId() {
   return uid++;
 }
 
 function generateElementId(prefix) {
-  var num = uniqueId();
+  const num = uniqueId();
   return prefix + "-" + num;
 }
 function useId(providedId) {
-  var ref = React.useRef(providedId !== null && providedId !== void 0 ? providedId : null);
+  const ref = React.useRef(providedId != null ? providedId : null);
 
   if (!ref.current) {
     ref.current = generateElementId('element');
@@ -1147,27 +1122,28 @@ function useId(providedId) {
 var modules_540a88ff = {"container":"ed7d894c","primaryLabel":"_22213081","secondaryLabel":"be8637dd","auxiliaryLabel":"_72b46ad5"};
 
 function FieldHint(props) {
-  return /*#__PURE__*/React.createElement(Text, Object.assign({
+  return /*#__PURE__*/React.createElement(Text, _objectSpread2({
     as: "p",
     tone: "secondary",
     size: "copy"
   }, props));
 }
 
-function BaseField(_ref) {
-  var label = _ref.label,
-      secondaryLabel = _ref.secondaryLabel,
-      auxiliaryLabel = _ref.auxiliaryLabel,
-      hint = _ref.hint,
-      className = _ref.className,
-      children = _ref.children,
-      maxWidth = _ref.maxWidth,
-      hidden = _ref.hidden,
-      originalAriaDescribedBy = _ref['aria-describedby'],
-      originalId = _ref.id;
-  var id = useId(originalId);
-  var hintId = useId();
-  var ariaDescribedBy = originalAriaDescribedBy !== null && originalAriaDescribedBy !== void 0 ? originalAriaDescribedBy : hint ? hintId : undefined;
+function BaseField({
+  label,
+  secondaryLabel,
+  auxiliaryLabel,
+  hint,
+  className,
+  children,
+  maxWidth,
+  hidden,
+  'aria-describedby': originalAriaDescribedBy,
+  id: originalId
+}) {
+  const id = useId(originalId);
+  const hintId = useId();
+  const ariaDescribedBy = originalAriaDescribedBy != null ? originalAriaDescribedBy : hint ? hintId : undefined;
   return /*#__PURE__*/React.createElement(Stack, {
     space: "small"
   }, /*#__PURE__*/React.createElement(Box, {
@@ -1188,14 +1164,14 @@ function BaseField(_ref) {
     className: modules_540a88ff.primaryLabel
   }, label) : null, secondaryLabel ? /*#__PURE__*/React.createElement("span", {
     className: modules_540a88ff.secondaryLabel
-  }, "\xA0(", secondaryLabel, ")") : null), auxiliaryLabel ? /*#__PURE__*/React.createElement(Box, {
+  }, "\u00A0(", secondaryLabel, ")") : null), auxiliaryLabel ? /*#__PURE__*/React.createElement(Box, {
     className: modules_540a88ff.auxiliaryLabel,
     paddingLeft: "small"
   }, auxiliaryLabel) : null), children(ariaDescribedBy ? {
-    id: id,
+    id,
     'aria-describedby': ariaDescribedBy
   } : {
-    id: id
+    id
   })), hint ? /*#__PURE__*/React.createElement(FieldHint, {
     hidden: hidden,
     id: hintId
@@ -1203,7 +1179,7 @@ function BaseField(_ref) {
 }
 
 function PasswordVisibleIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  return /*#__PURE__*/React.createElement("svg", _objectSpread2({
     xmlns: "http://www.w3.org/2000/svg",
     width: "24",
     height: "24"
@@ -1221,7 +1197,7 @@ function PasswordVisibleIcon(props) {
 }
 
 function PasswordHiddenIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  return /*#__PURE__*/React.createElement("svg", _objectSpread2({
     xmlns: "http://www.w3.org/2000/svg",
     width: "24",
     height: "24"
@@ -1249,34 +1225,30 @@ var modules_3f03ead6 = {"inputWrapper":"_460d581b"};
 
 var modules_aaf25250 = {"inputWrapper":"dd9ffeab"};
 
-var _excluded$h = ["label", "secondaryLabel", "auxiliaryLabel", "hint", "maxWidth", "togglePasswordLabel", "hidden", "aria-describedby"];
-var PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref, ref) {
-  var label = _ref.label,
-      secondaryLabel = _ref.secondaryLabel,
-      auxiliaryLabel = _ref.auxiliaryLabel,
-      hint = _ref.hint,
-      maxWidth = _ref.maxWidth,
-      _ref$togglePasswordLa = _ref.togglePasswordLabel,
-      togglePasswordLabel = _ref$togglePasswordLa === void 0 ? 'Toggle password visibility' : _ref$togglePasswordLa,
-      hidden = _ref.hidden,
-      ariaDescribedBy = _ref['aria-describedby'],
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
-
-  var id = useId(props.id);
-  var internalRef = React.useRef(null);
-  var inputRef = reakitUtils.useForkRef(internalRef, ref);
-
-  var _React$useState = React.useState(false),
-      isPasswordVisible = _React$useState[0],
-      setPasswordVisible = _React$useState[1];
+const _excluded$h = ["label", "secondaryLabel", "auxiliaryLabel", "hint", "maxWidth", "togglePasswordLabel", "hidden", "aria-describedby"];
+const PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref, ref) {
+  let {
+    label,
+    secondaryLabel,
+    auxiliaryLabel,
+    hint,
+    maxWidth,
+    togglePasswordLabel = 'Toggle password visibility',
+    hidden,
+    'aria-describedby': ariaDescribedBy
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$h);
+
+  const id = useId(props.id);
+  const internalRef = React.useRef(null);
+  const inputRef = ariakitUtils.useForkRef(internalRef, ref);
+  const [isPasswordVisible, setPasswordVisible] = React.useState(false);
 
   function togglePasswordVisibility() {
     var _internalRef$current;
 
-    setPasswordVisible(function (v) {
-      return !v;
-    });
-    (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.focus();
+    setPasswordVisible(v => !v);
+    (_internalRef$current = internalRef.current) == null ? void 0 : _internalRef$current.focus();
   }
 
   return /*#__PURE__*/React.createElement(BaseField, {
@@ -1288,43 +1260,43 @@ var PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref, r
     maxWidth: maxWidth,
     hidden: hidden,
     "aria-describedby": ariaDescribedBy
-  }, function (extraProps) {
-    return /*#__PURE__*/React.createElement(Box, {
-      display: "flex",
-      alignItems: "center",
-      className: [modules_3f03ead6.inputWrapper, modules_aaf25250.inputWrapper]
-    }, /*#__PURE__*/React.createElement("input", Object.assign({}, props, extraProps, {
-      ref: inputRef,
-      type: isPasswordVisible ? 'text' : 'password'
-    })), /*#__PURE__*/React.createElement(Tooltip, {
-      content: togglePasswordLabel
-    }, /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      onClick: togglePasswordVisibility,
-      "aria-label": togglePasswordLabel,
-      tabIndex: -1
-    }, isPasswordVisible ? /*#__PURE__*/React.createElement(PasswordVisibleIcon, {
-      "aria-hidden": true
-    }) : /*#__PURE__*/React.createElement(PasswordHiddenIcon, {
-      "aria-hidden": true
-    }))));
-  });
+  }, extraProps => /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    alignItems: "center",
+    className: [modules_3f03ead6.inputWrapper, modules_aaf25250.inputWrapper]
+  }, /*#__PURE__*/React.createElement("input", _objectSpread2(_objectSpread2(_objectSpread2({}, props), extraProps), {}, {
+    ref: inputRef,
+    type: isPasswordVisible ? 'text' : 'password'
+  })), /*#__PURE__*/React.createElement(Tooltip, {
+    content: togglePasswordLabel
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: togglePasswordVisibility,
+    "aria-label": togglePasswordLabel,
+    tabIndex: -1
+  }, isPasswordVisible ? /*#__PURE__*/React.createElement(PasswordVisibleIcon, {
+    "aria-hidden": true
+  }) : /*#__PURE__*/React.createElement(PasswordHiddenIcon, {
+    "aria-hidden": true
+  })))));
 });
 
 var modules_1fa9b208 = {"selectWrapper":"_828e09c5"};
 
-var _excluded$i = ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "maxWidth", "children", "hidden", "aria-describedby"];
-var SelectField = /*#__PURE__*/React.forwardRef(function SelectField(_ref, ref) {
-  var id = _ref.id,
-      label = _ref.label,
-      secondaryLabel = _ref.secondaryLabel,
-      auxiliaryLabel = _ref.auxiliaryLabel,
-      hint = _ref.hint,
-      maxWidth = _ref.maxWidth,
-      children = _ref.children,
-      hidden = _ref.hidden,
-      ariaDescribedBy = _ref['aria-describedby'],
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+const _excluded$i = ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "maxWidth", "children", "hidden", "aria-describedby"];
+const SelectField = /*#__PURE__*/React.forwardRef(function SelectField(_ref, ref) {
+  let {
+    id,
+    label,
+    secondaryLabel,
+    auxiliaryLabel,
+    hint,
+    maxWidth,
+    children,
+    hidden,
+    'aria-describedby': ariaDescribedBy
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$i);
 
   return /*#__PURE__*/React.createElement(BaseField, {
     id: id,
@@ -1335,19 +1307,17 @@ var SelectField = /*#__PURE__*/React.forwardRef(function SelectField(_ref, ref)
     maxWidth: maxWidth,
     hidden: hidden,
     "aria-describedby": ariaDescribedBy
-  }, function (extraProps) {
-    return /*#__PURE__*/React.createElement(Box, {
-      className: modules_1fa9b208.selectWrapper
-    }, /*#__PURE__*/React.createElement("select", Object.assign({}, props, extraProps, {
-      ref: ref
-    }), children), /*#__PURE__*/React.createElement(SelectChevron, {
-      "aria-hidden": true
-    }));
-  });
+  }, extraProps => /*#__PURE__*/React.createElement(Box, {
+    className: modules_1fa9b208.selectWrapper
+  }, /*#__PURE__*/React.createElement("select", _objectSpread2(_objectSpread2(_objectSpread2({}, props), extraProps), {}, {
+    ref: ref
+  }), children), /*#__PURE__*/React.createElement(SelectChevron, {
+    "aria-hidden": true
+  })));
 });
 
 function SelectChevron(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  return /*#__PURE__*/React.createElement("svg", _objectSpread2({
     width: "16",
     height: "16",
     fill: "none",
@@ -1360,38 +1330,32 @@ function SelectChevron(props) {
 
 var modules_8e05f7c9 = {"container":"ec63c3f1","disabled":"_7de9c06d","checked":"a37981fc","toggle":"_2a17ac45","label":"_68cc9707","handle":"_91409c7f","keyFocused":"a6490371"};
 
-var _excluded$j = ["label", "hint", "disabled", "hidden", "defaultChecked", "id", "aria-describedby", "aria-label", "aria-labelledby", "onChange"];
-var SwitchField = /*#__PURE__*/React.forwardRef(function SwitchField(_ref, ref) {
+const _excluded$j = ["label", "hint", "disabled", "hidden", "defaultChecked", "id", "aria-describedby", "aria-label", "aria-labelledby", "onChange"];
+const SwitchField = /*#__PURE__*/React.forwardRef(function SwitchField(_ref, ref) {
   var _ref2, _props$checked, _props$checked2;
 
-  var label = _ref.label,
-      hint = _ref.hint,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      hidden = _ref.hidden,
-      defaultChecked = _ref.defaultChecked,
-      originalId = _ref.id,
-      originalAriaDescribedBy = _ref['aria-describedby'],
-      originalAriaLabel = _ref['aria-label'],
-      originalAriaLabelledby = _ref['aria-labelledby'],
-      _onChange = _ref.onChange,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
-
-  var id = useId(originalId);
-  var hintId = useId();
-  var ariaDescribedBy = originalAriaDescribedBy !== null && originalAriaDescribedBy !== void 0 ? originalAriaDescribedBy : hint ? hintId : undefined;
-  var ariaLabel = originalAriaLabel !== null && originalAriaLabel !== void 0 ? originalAriaLabel : undefined;
-  var ariaLabelledBy = originalAriaLabelledby !== null && originalAriaLabelledby !== void 0 ? originalAriaLabelledby : undefined;
-
-  var _React$useState = React.useState(false),
-      keyFocused = _React$useState[0],
-      setKeyFocused = _React$useState[1];
-
-  var _React$useState2 = React.useState((_ref2 = (_props$checked = props.checked) !== null && _props$checked !== void 0 ? _props$checked : defaultChecked) !== null && _ref2 !== void 0 ? _ref2 : false),
-      checkedState = _React$useState2[0],
-      setChecked = _React$useState2[1];
-
-  var isChecked = (_props$checked2 = props.checked) !== null && _props$checked2 !== void 0 ? _props$checked2 : checkedState;
+  let {
+    label,
+    hint,
+    disabled = false,
+    hidden,
+    defaultChecked,
+    id: originalId,
+    'aria-describedby': originalAriaDescribedBy,
+    'aria-label': originalAriaLabel,
+    'aria-labelledby': originalAriaLabelledby,
+    onChange
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$j);
+
+  const id = useId(originalId);
+  const hintId = useId();
+  const ariaDescribedBy = originalAriaDescribedBy != null ? originalAriaDescribedBy : hint ? hintId : undefined;
+  const ariaLabel = originalAriaLabel != null ? originalAriaLabel : undefined;
+  const ariaLabelledBy = originalAriaLabelledby != null ? originalAriaLabelledby : undefined;
+  const [keyFocused, setKeyFocused] = React.useState(false);
+  const [checkedState, setChecked] = React.useState((_ref2 = (_props$checked = props.checked) != null ? _props$checked : defaultChecked) != null ? _ref2 : false);
+  const isChecked = (_props$checked2 = props.checked) != null ? _props$checked2 : checkedState;
   return /*#__PURE__*/React.createElement(Stack, {
     space: "small",
     hidden: hidden
@@ -1407,7 +1371,7 @@ var SwitchField = /*#__PURE__*/React.forwardRef(function SwitchField(_ref, ref)
     marginRight: "small",
     flexShrink: 0,
     className: modules_8e05f7c9.toggle
-  }, /*#__PURE__*/React.createElement(HiddenVisually, null, /*#__PURE__*/React.createElement("input", Object.assign({}, props, {
+  }, /*#__PURE__*/React.createElement(HiddenVisually, null, /*#__PURE__*/React.createElement("input", _objectSpread2(_objectSpread2({}, props), {}, {
     id: id,
     type: "checkbox",
     disabled: disabled,
@@ -1416,24 +1380,20 @@ var SwitchField = /*#__PURE__*/React.forwardRef(function SwitchField(_ref, ref)
     "aria-labelledby": ariaLabelledBy,
     ref: ref,
     checked: isChecked,
-    onChange: function onChange(event) {
-      _onChange === null || _onChange === void 0 ? void 0 : _onChange(event);
+    onChange: event => {
+      onChange == null ? void 0 : onChange(event);
 
       if (!event.defaultPrevented) {
         setChecked(event.currentTarget.checked);
       }
     },
-    onBlur: function onBlur(event) {
-      var _props$onBlur;
-
+    onBlur: event => {
       setKeyFocused(false);
-      props === null || props === void 0 ? void 0 : (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 ? void 0 : _props$onBlur.call(props, event);
+      props == null ? void 0 : props.onBlur == null ? void 0 : props.onBlur(event);
     },
-    onKeyUp: function onKeyUp(event) {
-      var _props$onKeyUp;
-
+    onKeyUp: event => {
       setKeyFocused(true);
-      props === null || props === void 0 ? void 0 : (_props$onKeyUp = props.onKeyUp) === null || _props$onKeyUp === void 0 ? void 0 : _props$onKeyUp.call(props, event);
+      props == null ? void 0 : props.onKeyUp == null ? void 0 : props.onKeyUp(event);
     }
   }))), /*#__PURE__*/React.createElement("span", {
     className: modules_8e05f7c9.handle
@@ -1446,16 +1406,18 @@ var SwitchField = /*#__PURE__*/React.forwardRef(function SwitchField(_ref, ref)
 
 var modules_2728c236 = {"container":"_5a579f96"};
 
-var _excluded$k = ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "maxWidth"];
+const _excluded$k = ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "maxWidth"];
 
 function TextArea(_ref) {
-  var id = _ref.id,
-      label = _ref.label,
-      secondaryLabel = _ref.secondaryLabel,
-      auxiliaryLabel = _ref.auxiliaryLabel,
-      hint = _ref.hint,
-      maxWidth = _ref.maxWidth,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+  let {
+    id,
+    label,
+    secondaryLabel,
+    auxiliaryLabel,
+    hint,
+    maxWidth
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$k);
 
   return /*#__PURE__*/React.createElement(BaseField, {
     id: id,
@@ -1465,26 +1427,25 @@ function TextArea(_ref) {
     hint: hint,
     className: modules_2728c236.container,
     maxWidth: maxWidth
-  }, function (extraProps) {
-    return /*#__PURE__*/React.createElement(Box, {
-      width: "full"
-    }, /*#__PURE__*/React.createElement("textarea", Object.assign({}, props, extraProps)));
-  });
-}
-
-var _excluded$l = ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "type", "maxWidth", "hidden", "aria-describedby"];
-var TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
-  var id = _ref.id,
-      label = _ref.label,
-      secondaryLabel = _ref.secondaryLabel,
-      auxiliaryLabel = _ref.auxiliaryLabel,
-      hint = _ref.hint,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'text' : _ref$type,
-      maxWidth = _ref.maxWidth,
-      hidden = _ref.hidden,
-      ariaDescribedBy = _ref['aria-describedby'],
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+  }, extraProps => /*#__PURE__*/React.createElement(Box, {
+    width: "full"
+  }, /*#__PURE__*/React.createElement("textarea", _objectSpread2(_objectSpread2({}, props), extraProps))));
+}
+
+const _excluded$l = ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "type", "maxWidth", "hidden", "aria-describedby"];
+const TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
+  let {
+    id,
+    label,
+    secondaryLabel,
+    auxiliaryLabel,
+    hint,
+    type = 'text',
+    maxWidth,
+    hidden,
+    'aria-describedby': ariaDescribedBy
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$l);
 
   return /*#__PURE__*/React.createElement(BaseField, {
     id: id,
@@ -1495,14 +1456,12 @@ var TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
     maxWidth: maxWidth,
     hidden: hidden,
     "aria-describedby": ariaDescribedBy
-  }, function (extraProps) {
-    return /*#__PURE__*/React.createElement(Box, {
-      className: modules_aaf25250.inputWrapper
-    }, /*#__PURE__*/React.createElement("input", Object.assign({}, props, extraProps, {
-      type: type,
-      ref: ref
-    })));
-  });
+  }, extraProps => /*#__PURE__*/React.createElement(Box, {
+    className: modules_aaf25250.inputWrapper
+  }, /*#__PURE__*/React.createElement("input", _objectSpread2(_objectSpread2(_objectSpread2({}, props), extraProps), {}, {
+    type: type,
+    ref: ref
+  }))));
 });
 
 /**
@@ -1520,52 +1479,52 @@ var TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
  */
 
 function usePrevious(value) {
-  var ref = React.useRef(null);
-  React.useEffect(function () {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
     ref.current = value;
   }, [value]);
   return ref.current;
 }
 
-var modules_40c67f5b = {"tab":"bae5f7d8","tab-normal":"ad3e25c3","tab-primary":"_3a9a0bad","tab-secondary":"_143d4b7d","tab-tertiary":"c9c5d77d","tab-plain":"_92c440c0"};
+var modules_40c67f5b = {"tab":"_15d4bbf4","tab-normal":"ca31866d","tab-primary":"_421272bd","tab-secondary":"acbdf95a","tab-tertiary":"_8c59ab40","tab-plain":"a41904c9"};
 
-var _excluded$m = ["color", "variant"],
-    _excluded2$1 = ["children", "space"],
-    _excluded3 = ["color", "variant"],
-    _excluded4 = ["children", "id", "as", "render"],
-    _excluded5 = ["color", "variant"];
-var TabsContext = /*#__PURE__*/React.createContext(null);
+const _excluded$m = ["as", "children", "id", "exceptionallySetClassName"],
+      _excluded2$1 = ["children", "space"],
+      _excluded3 = ["children", "id", "as", "render"];
+const TabsContext = /*#__PURE__*/React.createContext(null);
 /**
  * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.
  */
 
-function Tabs(_ref) {
-  var children = _ref.children,
-      selectedId = _ref.selectedId,
-      _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'primary' : _ref$color,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'normal' : _ref$variant;
-  var tabState = Tab$1.useTabState({
-    selectedId: selectedId
+function Tabs({
+  children,
+  selectedId,
+  defaultSelectedId,
+  color = 'primary',
+  variant = 'normal',
+  onSelectedIdChange
+}) {
+  const tabState = tab.useTabState({
+    selectedId,
+    setSelectedId: onSelectedIdChange
   });
-  var previousSelectedId = usePrevious(selectedId);
-  var actualSelectedId = tabState.selectedId,
-      select = tabState.select;
-  React.useEffect(function selectTab() {
-    if (previousSelectedId !== selectedId && selectedId !== actualSelectedId && selectedId !== undefined) {
-      select(selectedId);
+  const previousDefaultSelectedId = usePrevious(defaultSelectedId);
+  const {
+    selectedId: actualSelectedId,
+    select
+  } = tabState;
+  React.useEffect(function selectDefaultTab() {
+    if (!selectedId && defaultSelectedId !== previousDefaultSelectedId && defaultSelectedId !== actualSelectedId && defaultSelectedId !== undefined) {
+      select(defaultSelectedId);
     }
-  }, [selectedId, actualSelectedId, select, previousSelectedId]);
-  var memoizedTabState = React.useMemo(function memoizeTabState() {
-    return _objectSpread2(_objectSpread2({}, tabState), {}, {
-      color: color,
-      variant: variant
-    });
-  }, // There is no guarantee that useTabState returns a stable object when there are no changes, so
-  // following reakit/Tab's example we only return a new objet when any of its values have changed
-  // eslint-disable-next-line
-  [color, variant].concat(Object.values(tabState)));
+  }, [selectedId, defaultSelectedId, actualSelectedId, select, previousDefaultSelectedId]);
+  const memoizedTabState = React.useMemo(function memoizeTabState() {
+    return {
+      tabState,
+      color,
+      variant
+    };
+  }, [color, variant, tabState]);
   return /*#__PURE__*/React.createElement(TabsContext.Provider, {
     value: memoizedTabState
   }, children);
@@ -1574,43 +1533,57 @@ function Tabs(_ref) {
  * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.
  */
 
-function Tab(_ref2) {
-  var children = _ref2.children,
-      id = _ref2.id;
-  var tabContextValue = React.useContext(TabsContext);
+const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref, ref) {
+  let {
+    as,
+    children,
+    id,
+    exceptionallySetClassName
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$m);
+
+  const tabContextValue = React.useContext(TabsContext);
 
   if (!tabContextValue) {
     return null;
   }
 
-  var color = tabContextValue.color,
-      variant = tabContextValue.variant,
-      tabState = _objectWithoutPropertiesLoose(tabContextValue, _excluded$m);
-
-  return /*#__PURE__*/React.createElement(Tab$1.Tab, Object.assign({
-    className: classNames(modules_40c67f5b.tab, modules_40c67f5b["tab-" + (variant !== null && variant !== void 0 ? variant : '')], modules_40c67f5b["tab-" + (color !== null && color !== void 0 ? color : '')]),
-    id: id
-  }, tabState), children);
-}
+  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 : '')]),
+    id: id,
+    state: tabState,
+    ref: ref
+  }), children);
+});
 /**
  * A component used to group `<Tab>` elements together.
  */
 
-function TabList(_ref3) {
-  var children = _ref3.children,
-      _ref3$space = _ref3.space,
-      space = _ref3$space === void 0 ? 'medium' : _ref3$space,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$1);
+function TabList(_ref2) {
+  let {
+    children,
+    space = 'medium'
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded2$1);
 
-  var tabContextValue = React.useContext(TabsContext);
+  const tabContextValue = React.useContext(TabsContext);
 
   if (!tabContextValue) {
     return null;
   }
 
-  var tabState = _objectWithoutPropertiesLoose(tabContextValue, _excluded3);
-
-  return /*#__PURE__*/React.createElement(Tab$1.TabList, Object.assign({}, props, tabState), /*#__PURE__*/React.createElement(Inline, {
+  const {
+    tabState
+  } = tabContextValue;
+  return /*#__PURE__*/React.createElement(tab.TabList, _objectSpread2({
+    state: tabState
+  }, props), /*#__PURE__*/React.createElement(Inline, {
     space: space
   }, children));
 }
@@ -1618,21 +1591,18 @@ function TabList(_ref3) {
  * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.
  */
 
-var TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref4, ref) {
-  var children = _ref4.children,
-      id = _ref4.id,
-      as = _ref4.as,
-      _ref4$render = _ref4.render,
-      render = _ref4$render === void 0 ? 'always' : _ref4$render,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
-
-  var tabContextValue = React.useContext(TabsContext);
-
-  var _React$useState = React.useState(false),
-      tabRendered = _React$useState[0],
-      setTabRendered = _React$useState[1];
-
-  var tabIsActive = (tabContextValue === null || tabContextValue === void 0 ? void 0 : tabContextValue.selectedId) === id;
+const TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref3, ref) {
+  let {
+    children,
+    id,
+    as,
+    render = 'always'
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded3);
+
+  const tabContextValue = React.useContext(TabsContext);
+  const [tabRendered, setTabRendered] = React.useState(false);
+  const tabIsActive = (tabContextValue == null ? void 0 : tabContextValue.tabState.selectedId) === id;
   React.useEffect(function trackTabRenderedState() {
     if (!tabRendered && tabIsActive) {
       setTabRendered(true);
@@ -1643,11 +1613,13 @@ var TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref4, ref) {
     return null;
   }
 
-  var tabState = _objectWithoutPropertiesLoose(tabContextValue, _excluded5);
-
-  return /*#__PURE__*/React.createElement(Tab$1.TabPanel, Object.assign({
+  const {
+    tabState
+  } = tabContextValue;
+  return /*#__PURE__*/React.createElement(tab.TabPanel, _objectSpread2(_objectSpread2({
     tabId: id
-  }, tabState, props, {
+  }, props), {}, {
+    state: tabState,
     as: as,
     ref: ref
   }), render === 'always' ? children : null, render === 'active' && tabIsActive ? children : null, render === 'lazy' && (tabIsActive || tabRendered) ? children : null);
@@ -1657,22 +1629,23 @@ var TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref4, ref) {
  * component. Can be placed freely within the main `<Tabs>` component.
  */
 
-function TabAwareSlot(_ref5) {
-  var children = _ref5.children;
-  var tabContextValue = React.useContext(TabsContext);
+function TabAwareSlot({
+  children
+}) {
+  const tabContextValue = React.useContext(TabsContext);
   return tabContextValue ? children({
-    selectedId: tabContextValue.selectedId
+    selectedId: tabContextValue == null ? void 0 : tabContextValue.tabState.selectedId
   }) : null;
 }
 
-var modules_8f59d13b = {"reach-portal":"dddb40c3","fadein":"_955f2d73","fitContent":"_95c7550e","container":"_88079712","full":"_4779d078","large":"_5fd86231","medium":"bdfb5931","small":"_4e848a11","xlarge":"d673fba2","overlay":"ea9ae0cc","expand":"a8bf8a4f","buttonContainer":"_44d6850e"};
+var modules_8f59d13b = {"reach-portal":"_37bef8d8","fadein":"_77f9687f","fitContent":"bcc4e0a5","container":"d4832c2d","full":"b0c3b021","large":"_573d6aa5","medium":"_8550d996","small":"_43bb18f5","xlarge":"_57b4159d","overlay":"cb63f300","expand":"e741893e","buttonContainer":"bb1ce281","headerContent":"c5ef989c"};
 
-var _excluded$n = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "autoFocus", "children"],
-    _excluded2$2 = ["children", "button", "withDivider", "exceptionallySetClassName"],
-    _excluded3$1 = ["exceptionallySetClassName", "children"],
-    _excluded4$1 = ["exceptionallySetClassName", "withDivider"],
-    _excluded5$1 = ["children"];
-var ModalContext = /*#__PURE__*/React.createContext({
+const _excluded$n = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "autoFocus", "children"],
+      _excluded2$2 = ["children", "button", "withDivider", "exceptionallySetClassName"],
+      _excluded3$1 = ["exceptionallySetClassName", "children"],
+      _excluded4 = ["exceptionallySetClassName", "withDivider"],
+      _excluded5 = ["children"];
+const ModalContext = /*#__PURE__*/React.createContext({
   onDismiss: undefined,
   height: 'fitContent'
 });
@@ -1692,24 +1665,21 @@ function isNotInternalFrame(element) {
 
 
 function Modal(_ref) {
-  var isOpen = _ref.isOpen,
-      onDismiss = _ref.onDismiss,
-      _ref$height = _ref.height,
-      height = _ref$height === void 0 ? 'fitContent' : _ref$height,
-      _ref$width = _ref.width,
-      width = _ref$width === void 0 ? 'medium' : _ref$width,
-      exceptionallySetClassName = _ref.exceptionallySetClassName,
-      _ref$autoFocus = _ref.autoFocus,
-      autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
-      children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
-
-  var contextValue = React.useMemo(function () {
-    return {
-      onDismiss: onDismiss,
-      height: height
-    };
-  }, [onDismiss, height]);
+  let {
+    isOpen,
+    onDismiss,
+    height = 'fitContent',
+    width = 'medium',
+    exceptionallySetClassName,
+    autoFocus = true,
+    children
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$n);
+
+  const contextValue = React.useMemo(() => ({
+    onDismiss,
+    height
+  }), [onDismiss, height]);
   return /*#__PURE__*/React.createElement(dialog.DialogOverlay, {
     isOpen: isOpen,
     onDismiss: onDismiss,
@@ -1721,7 +1691,7 @@ function Modal(_ref) {
     autoFocus: autoFocus,
     whiteList: isNotInternalFrame,
     returnFocus: true
-  }, /*#__PURE__*/React.createElement(dialog.DialogContent, Object.assign({}, props, {
+  }, /*#__PURE__*/React.createElement(dialog.DialogContent, _objectSpread2(_objectSpread2({}, props), {}, {
     as: Box,
     borderRadius: "full",
     background: "default",
@@ -1743,17 +1713,11 @@ function Modal(_ref) {
  */
 
 function ModalCloseButton(props) {
-  var _React$useContext = React.useContext(ModalContext),
-      onDismiss = _React$useContext.onDismiss;
-
-  var _React$useState = React.useState(false),
-      includeInTabOrder = _React$useState[0],
-      setIncludeInTabOrder = _React$useState[1];
-
-  var _React$useState2 = React.useState(false),
-      isMounted = _React$useState2[0],
-      setIsMounted = _React$useState2[1];
-
+  const {
+    onDismiss
+  } = React.useContext(ModalContext);
+  const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false);
+  const [isMounted, setIsMounted] = React.useState(false);
   React.useEffect(function skipAutoFocus() {
     if (isMounted) {
       setIncludeInTabOrder(true);
@@ -1761,7 +1725,7 @@ function ModalCloseButton(props) {
       setIsMounted(true);
     }
   }, [isMounted]);
-  return /*#__PURE__*/React.createElement(Button, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(Button, _objectSpread2(_objectSpread2({}, props), {}, {
     variant: "quaternary",
     onClick: onDismiss,
     icon: /*#__PURE__*/React.createElement(CloseIcon, null),
@@ -1777,18 +1741,18 @@ function ModalCloseButton(props) {
  */
 
 function ModalHeader(_ref2) {
-  var children = _ref2.children,
-      _ref2$button = _ref2.button,
-      button = _ref2$button === void 0 ? true : _ref2$button,
-      _ref2$withDivider = _ref2.withDivider,
-      withDivider = _ref2$withDivider === void 0 ? false : _ref2$withDivider,
-      exceptionallySetClassName = _ref2.exceptionallySetClassName,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
+  let {
+    children,
+    button = true,
+    withDivider = false,
+    exceptionallySetClassName
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded2$2);
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
     as: "header",
     paddingLeft: "large",
-    paddingRight: "small",
+    paddingRight: button === false || button === null ? 'large' : 'small',
     paddingY: "small",
     className: exceptionallySetClassName
   }), /*#__PURE__*/React.createElement(Columns, {
@@ -1796,7 +1760,9 @@ function ModalHeader(_ref2) {
     alignY: "center"
   }, /*#__PURE__*/React.createElement(Column, {
     width: "auto"
-  }, children), button === false || button === null ? null : /*#__PURE__*/React.createElement(Column, {
+  }, children), button === false || button === null ? /*#__PURE__*/React.createElement("div", {
+    className: modules_8f59d13b.headerContent
+  }) : /*#__PURE__*/React.createElement(Column, {
     width: "content",
     exceptionallySetClassName: modules_8f59d13b.buttonContainer,
     "data-testid": "button-container"
@@ -1819,14 +1785,16 @@ function ModalHeader(_ref2) {
  */
 
 function ModalBody(_ref3) {
-  var exceptionallySetClassName = _ref3.exceptionallySetClassName,
-      children = _ref3.children,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded3$1);
-
-  var _React$useContext2 = React.useContext(ModalContext),
-      height = _React$useContext2.height;
-
-  return /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
+  let {
+    exceptionallySetClassName,
+    children
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded3$1);
+
+  const {
+    height
+  } = React.useContext(ModalContext);
+  return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
     className: exceptionallySetClassName,
     flexGrow: height === 'expand' ? 1 : 0,
     height: height === 'expand' ? 'full' : undefined,
@@ -1845,14 +1813,15 @@ function ModalBody(_ref3) {
  */
 
 function ModalFooter(_ref4) {
-  var exceptionallySetClassName = _ref4.exceptionallySetClassName,
-      _ref4$withDivider = _ref4.withDivider,
-      withDivider = _ref4$withDivider === void 0 ? false : _ref4$withDivider,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded4$1);
+  let {
+    exceptionallySetClassName,
+    withDivider = false
+  } = _ref4,
+      props = _objectWithoutProperties(_ref4, _excluded4);
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, withDivider ? /*#__PURE__*/React.createElement(Divider, null) : null, /*#__PURE__*/React.createElement(Box, Object.assign({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, withDivider ? /*#__PURE__*/React.createElement(Divider, null) : null, /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({
     as: "footer"
-  }, props, {
+  }, props), {}, {
     className: exceptionallySetClassName,
     padding: "large"
   })));
@@ -1863,65 +1832,71 @@ function ModalFooter(_ref4) {
  */
 
 function ModalActions(_ref5) {
-  var children = _ref5.children,
-      props = _objectWithoutPropertiesLoose(_ref5, _excluded5$1);
+  let {
+    children
+  } = _ref5,
+      props = _objectWithoutProperties(_ref5, _excluded5);
 
-  return /*#__PURE__*/React.createElement(ModalFooter, Object.assign({}, props), /*#__PURE__*/React.createElement(Inline, {
+  return /*#__PURE__*/React.createElement(ModalFooter, _objectSpread2({}, props), /*#__PURE__*/React.createElement(Inline, {
     align: "right",
     space: "large"
   }, children));
 }
 
 function getInitials(name) {
+  var _initials;
+
   if (!name) {
     return '';
   }
 
-  var seed = name.trim().split(' ');
-  var firstInitial = seed[0];
-  var lastInitial = seed[seed.length - 1];
-  var initials = firstInitial[0]; // Better readable this way.
-  // eslint-disable-next-line @typescript-eslint/prefer-string-starts-ends-with
+  const seed = name.trim().split(' ');
+  const firstInitial = seed[0];
+  const lastInitial = seed[seed.length - 1];
+  let initials = firstInitial == null ? void 0 : firstInitial[0];
 
-  if (firstInitial[0] !== lastInitial[0]) {
+  if (firstInitial != null && lastInitial != null && initials != null && // Better readable this way.
+  // eslint-disable-next-line @typescript-eslint/prefer-string-starts-ends-with
+  firstInitial[0] !== lastInitial[0]) {
     initials += lastInitial[0];
   }
 
-  return initials.toUpperCase();
+  return (_initials = initials) == null ? void 0 : _initials.toUpperCase();
 }
 
 function emailToIndex(email, maxIndex) {
-  var seed = email.split('@')[0];
-  var hash = seed.charCodeAt(0) + seed.charCodeAt(seed.length - 1) || 0;
+  const seed = email.split('@')[0];
+  const hash = seed ? seed.charCodeAt(0) + seed.charCodeAt(seed.length - 1) || 0 : 0;
   return hash % maxIndex;
 }
 
 var modules_08f3eeac = {"avatar":"_38a1be89","size-xxs":"d32e92ae","size-xs":"_0667d719","size-s":"cf529fcf","size-m":"_6e268eab","size-l":"d64c62cf","size-xl":"_44fb77de","size-xxl":"_01f85e0e","size-xxxl":"_41a5fe19","tablet-size-xxs":"_6ab1577d","tablet-size-xs":"b52a4963","tablet-size-s":"_714a8419","tablet-size-m":"_81cd4d51","tablet-size-l":"bf0a4edb","tablet-size-xl":"e4f0dabd","tablet-size-xxl":"_67ea065d","tablet-size-xxxl":"_2af7f76f","desktop-size-xxs":"_759081dc","desktop-size-xs":"_8290d1c1","desktop-size-s":"_48ea172d","desktop-size-m":"_758f6641","desktop-size-l":"f9ada088","desktop-size-xl":"d3bb7470","desktop-size-xxl":"_9a312ee3","desktop-size-xxxl":"a1d30c23"};
 
-var _excluded$o = ["user", "avatarUrl", "size", "className", "colorList", "exceptionallySetClassName"];
-var AVATAR_COLORS = ['#fcc652', '#e9952c', '#e16b2d', '#d84b40', '#e8435a', '#e5198a', '#ad3889', '#86389c', '#a8a8a8', '#98be2f', '#5d9d50', '#5f9f85', '#5bbcb6', '#32a3bf', '#2bafeb', '#2d88c3', '#3863cc', '#5e5e5e'];
+const _excluded$o = ["user", "avatarUrl", "size", "className", "colorList", "exceptionallySetClassName"];
+const AVATAR_COLORS = ['#fcc652', '#e9952c', '#e16b2d', '#d84b40', '#e8435a', '#e5198a', '#ad3889', '#86389c', '#a8a8a8', '#98be2f', '#5d9d50', '#5f9f85', '#5bbcb6', '#32a3bf', '#2bafeb', '#2d88c3', '#3863cc', '#5e5e5e'];
 
 function Avatar(_ref) {
-  var user = _ref.user,
-      avatarUrl = _ref.avatarUrl,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'l' : _ref$size,
-      className = _ref.className,
-      _ref$colorList = _ref.colorList,
-      colorList = _ref$colorList === void 0 ? AVATAR_COLORS : _ref$colorList,
-      exceptionallySetClassName = _ref.exceptionallySetClassName,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
-
-  var userInitials = getInitials(user.name) || getInitials(user.email);
-  var avatarSize = size ? size : 'l';
-  var style = avatarUrl ? {
+  let {
+    user,
+    avatarUrl,
+    size = 'l',
+    className,
+    colorList = AVATAR_COLORS,
+    exceptionallySetClassName
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$o);
+
+  const userInitials = getInitials(user.name) || getInitials(user.email);
+  const avatarSize = size ? size : 'l';
+  const style = avatarUrl ? {
     backgroundImage: "url(" + avatarUrl + ")",
-    textIndent: '-9999px'
+    textIndent: '-9999px' // hide the initials
+
   } : {
     backgroundColor: colorList[emailToIndex(user.email, colorList.length)]
   };
-  var sizeClassName = getClassNames(modules_08f3eeac, 'size', avatarSize);
-  return /*#__PURE__*/React__default.createElement(Box, Object.assign({
+  const sizeClassName = getClassNames(modules_08f3eeac, 'size', avatarSize);
+  return /*#__PURE__*/React__default.createElement(Box, _objectSpread2({
     className: [className, modules_08f3eeac.avatar, sizeClassName, exceptionallySetClassName],
     style: style
   }, props), userInitials);
@@ -1929,12 +1904,12 @@ function Avatar(_ref) {
 
 Avatar.displayName = 'Avatar';
 
-function Checkbox(_ref) {
-  var label = _ref.label,
-      disabled = _ref.disabled,
-      _ref$checked = _ref.checked,
-      checked = _ref$checked === void 0 ? false : _ref$checked,
-      onChange = _ref.onChange;
+function Checkbox({
+  label,
+  disabled,
+  checked = false,
+  onChange
+}) {
   return /*#__PURE__*/React__default.createElement("label", {
     className: "reactist_checkbox"
   }, /*#__PURE__*/React__default.createElement("input", {
@@ -1942,39 +1917,35 @@ function Checkbox(_ref) {
     value: label,
     checked: checked,
     disabled: disabled,
-    onChange: disabled || !onChange ? undefined : function (event) {
-      return onChange(event.target.checked);
-    },
+    onChange: disabled || !onChange ? undefined : event => onChange(event.target.checked),
     type: "checkbox"
   }), label);
 }
 
 Checkbox.displayName = 'Checkbox';
 
-var _excluded$p = ["type", "variant", "size", "loading", "disabled", "tooltip", "onClick", "children"];
+const _excluded$p = ["type", "variant", "size", "loading", "disabled", "tooltip", "onClick", "children"];
 /**
  * @deprecated
  */
 
-var Button$1 = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref) {
-  var _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'button' : _ref$type,
-      variant = _ref.variant,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'default' : _ref$size,
-      _ref$loading = _ref.loading,
-      loading = _ref$loading === void 0 ? false : _ref$loading,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      tooltip = _ref.tooltip,
-      onClick = _ref.onClick,
-      children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
-
-  var className = classNames('reactist_button', variant ? "reactist_button--" + variant : null, size !== 'default' ? "reactist_button--" + size : null, {
+const Button$1 = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref) {
+  let {
+    type = 'button',
+    variant,
+    size = 'default',
+    loading = false,
+    disabled = false,
+    tooltip,
+    onClick,
+    children
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$p);
+
+  const className = classNames('reactist_button', variant ? "reactist_button--" + variant : null, size !== 'default' ? "reactist_button--" + size : null, {
     'reactist_button--loading': loading
   }, props.className);
-  var button = /*#__PURE__*/React__default.createElement("button", Object.assign({}, props, {
+  const button = /*#__PURE__*/React__default.createElement("button", _objectSpread2(_objectSpread2({}, props), {}, {
     ref: ref,
     type: type,
     className: className,
@@ -1992,159 +1963,159 @@ Button$1.defaultProps = {
   disabled: false
 };
 
-var _excluded$q = ["children", "onClick", "tooltip", "className"];
-
-var Box$1 = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(Box, _React$Component);
-
-  function Box(props, context) {
-    var _this;
+const _excluded$q = ["children", "onClick", "tooltip", "className"];
 
-    _this = _React$Component.call(this, props, context) || this;
+class Box$1 extends React__default.Component {
+  constructor(props, context) {
+    super(props, context);
+    this._timeout = void 0;
 
-    _this._handleClickOutside = function (event) {
-      var dropdownDOMNode = ReactDOM.findDOMNode(_assertThisInitialized(_this));
-      if (dropdownDOMNode && !dropdownDOMNode.contains(event.target)) _this._toggleShowBody();else if (!_this.props.allowBodyInteractions) {
+    this._handleClickOutside = event => {
+      const dropdownDOMNode = ReactDOM.findDOMNode(this);
+      if (dropdownDOMNode && !dropdownDOMNode.contains(event.target)) this._toggleShowBody();else if (!this.props.allowBodyInteractions) {
         // won't close when body interactions are allowed
-        _this._timeout = setTimeout(function () {
-          if (_this.state.showBody) {
-            _this._toggleShowBody();
+        this._timeout = setTimeout(() => {
+          if (this.state.showBody) {
+            this._toggleShowBody();
           }
         }, 100);
       }
     };
 
-    _this._toggleShowBody = function () {
-      if (!_this.state.showBody) {
+    this._toggleShowBody = () => {
+      if (!this.state.showBody) {
         // will show
-        if (_this.props.onShowBody) _this.props.onShowBody();
-        document.addEventListener('click', _this._handleClickOutside, true);
+        if (this.props.onShowBody) this.props.onShowBody();
+        document.addEventListener('click', this._handleClickOutside, true);
       } else {
         // will hide
-        if (_this.props.onHideBody) _this.props.onHideBody();
-        document.removeEventListener('click', _this._handleClickOutside, true);
+        if (this.props.onHideBody) this.props.onHideBody();
+        document.removeEventListener('click', this._handleClickOutside, true);
       }
 
-      _this.setState({
-        showBody: !_this.state.showBody
+      this.setState({
+        showBody: !this.state.showBody
       });
-    }; // https://facebook.github.io/react/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components
-
+    };
 
-    _this._setPosition = function (body) {
+    this._setPosition = body => {
       if (body) {
-        var scrollingParent = document.getElementById(_this.props.scrolling_parent ? _this.props.scrolling_parent : '');
+        const scrollingParent = document.getElementById(this.props.scrolling_parent ? this.props.scrolling_parent : '');
 
         if (scrollingParent) {
-          var dropdown = ReactDOM.findDOMNode(_assertThisInitialized(_this));
+          const dropdown = ReactDOM.findDOMNode(this);
 
           if (!dropdown) {
             return;
           }
 
-          var dropdownVerticalPosition = ReactDOM.findDOMNode(_assertThisInitialized(_this)).offsetTop;
-          var dropdownTrigger = dropdown.querySelector('.trigger');
+          const dropdownVerticalPosition = ReactDOM.findDOMNode(this).offsetTop;
+          const dropdownTrigger = dropdown.querySelector('.trigger');
 
           if (!dropdownTrigger) {
             return;
           }
 
-          var dropdownTriggerHeight = dropdownTrigger.clientHeight;
-          var dropdownBodyHeight = body.clientHeight;
-          var scrollingParentHeight = scrollingParent.clientHeight;
-          var scrollingParentOffset = scrollingParent.scrollTop;
-          var bottomOffset = scrollingParentHeight + scrollingParentOffset - dropdownVerticalPosition - dropdownTriggerHeight;
-          var top = bottomOffset < dropdownBodyHeight;
+          const dropdownTriggerHeight = dropdownTrigger.clientHeight;
+          const dropdownBodyHeight = body.clientHeight;
+          const scrollingParentHeight = scrollingParent.clientHeight;
+          const scrollingParentOffset = scrollingParent.scrollTop;
+          const bottomOffset = scrollingParentHeight + scrollingParentOffset - dropdownVerticalPosition - dropdownTriggerHeight;
+          const top = bottomOffset < dropdownBodyHeight;
 
-          if (top !== _this.state.top) {
-            _this.setState({
-              top: top
+          if (top !== this.state.top) {
+            this.setState({
+              top
             });
           }
         }
       }
     };
 
-    _this.state = {
+    this.state = {
       showBody: false,
       top: props.top || false
     };
-    _this._timeout = undefined;
-    return _this;
+    this._timeout = undefined;
   }
 
-  var _proto = Box.prototype;
-
-  _proto.componentWillUnmount = function componentWillUnmount() {
+  componentWillUnmount() {
     document.removeEventListener('click', this._handleClickOutside, true);
 
     if (this._timeout) {
       clearTimeout(this._timeout);
     }
-  };
+  }
 
-  _proto._getTriggerComponent = function _getTriggerComponent() {
+  _getTriggerComponent() {
     var _this$props$children;
 
-    var _trigger = (_this$props$children = this.props.children) === null || _this$props$children === void 0 ? void 0 : _this$props$children[0];
+    const _trigger = (_this$props$children = this.props.children) == null ? void 0 : _this$props$children[0];
 
     return _trigger ? /*#__PURE__*/React__default.cloneElement(_trigger, {
       onClick: this._toggleShowBody
     }) : undefined;
-  };
+  } // https://facebook.github.io/react/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components
+
 
-  _proto._getBodyComponent = function _getBodyComponent() {
+  _getBodyComponent() {
     if (!this.state.showBody) {
       return null;
     }
 
-    var top = this.state.top;
-    var _this$props = this.props,
-        _this$props$right = _this$props.right,
-        right = _this$props$right === void 0 ? false : _this$props$right,
-        children = _this$props.children;
-    var props = {
-      top: top,
-      right: right,
+    const {
+      top
+    } = this.state;
+    const {
+      right = false,
+      children
+    } = this.props;
+    const props = {
+      top,
+      right,
       setPosition: this._setPosition
     };
-    var className = classNames({
+    const className = classNames({
       body_wrapper: true,
       with_arrow: true,
       top: top,
       bottom: !top
     });
-    var body = children === null || children === void 0 ? void 0 : children[1];
-    var contentMarkup = typeof body === 'function' ? body(props) : body ? /*#__PURE__*/React__default.cloneElement(body, props) : undefined;
+    const body = children == null ? void 0 : children[1];
+    const contentMarkup = typeof body === 'function' ? body(props) : body ? /*#__PURE__*/React__default.cloneElement(body, props) : undefined;
     return /*#__PURE__*/React__default.createElement("div", {
       className: className,
       style: {
         position: 'relative'
       }
     }, contentMarkup);
-  };
+  }
 
-  _proto.render = function render() {
-    var className = classNames('reactist_dropdown', this.props.className);
-    var top = this.state.top;
+  render() {
+    const className = classNames('reactist_dropdown', this.props.className);
+    const {
+      top
+    } = this.state;
     return /*#__PURE__*/React__default.createElement("div", {
       style: {
         display: 'inline-block'
       },
       className: className
     }, top && this._getBodyComponent(), this._getTriggerComponent(), !top && this._getBodyComponent());
-  };
+  }
 
-  return Box;
-}(React__default.Component);
+}
 
+Box$1.displayName = void 0;
 Box$1.displayName = 'Dropdown.Box';
-var Trigger = /*#__PURE__*/React__default.forwardRef(function Trigger(_ref, ref) {
-  var children = _ref.children,
-      onClick = _ref.onClick,
-      tooltip = _ref.tooltip,
-      className = _ref.className,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+const Trigger = /*#__PURE__*/React__default.forwardRef(function Trigger(_ref, ref) {
+  let {
+    children,
+    onClick,
+    tooltip,
+    className
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$q);
 
   function handleClick(event) {
     event.preventDefault();
@@ -2152,7 +2123,7 @@ var Trigger = /*#__PURE__*/React__default.forwardRef(function Trigger(_ref, ref)
     if (onClick) onClick(event);
   }
 
-  return /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, props, {
+  return /*#__PURE__*/React__default.createElement(Button$1, _objectSpread2(_objectSpread2({}, props), {}, {
     className: classNames('trigger', className),
     onClick: handleClick,
     tooltip: tooltip,
@@ -2161,12 +2132,13 @@ var Trigger = /*#__PURE__*/React__default.forwardRef(function Trigger(_ref, ref)
 });
 Trigger.displayName = 'Dropdown.Trigger';
 
-function Body(_ref2) {
-  var top = _ref2.top,
-      right = _ref2.right,
-      children = _ref2.children,
-      setPosition = _ref2.setPosition;
-  var style = {
+function Body({
+  top,
+  right,
+  children,
+  setPosition
+}) {
+  const style = {
     position: 'absolute',
     right: 0,
     top: 0
@@ -2191,39 +2163,36 @@ function Body(_ref2) {
 }
 
 Body.displayName = 'Dropdown.Body';
-var Dropdown = {
+const Dropdown = {
   Box: Box$1,
-  Trigger: Trigger,
-  Body: Body
+  Trigger,
+  Body
 };
 
-var COLORS = ['#606060', '#4A90E2', '#03B3B2', '#008299', '#82BA00', '#D24726', '#AC193D', '#DC4FAD', '#3BD5FB', '#74E8D3', '#FFCC00', '#FB886E', '#CCCCCC'];
+const COLORS = ['#606060', '#4A90E2', '#03B3B2', '#008299', '#82BA00', '#D24726', '#AC193D', '#DC4FAD', '#3BD5FB', '#74E8D3', '#FFCC00', '#FB886E', '#CCCCCC'];
 
-var _isNamedColor = function _isNamedColor(color) {
-  return typeof color !== 'string';
-};
+const _isNamedColor = color => typeof color !== 'string';
 
-var _getColor = function _getColor(colorList, colorIndex) {
-  var index = colorIndex >= colorList.length ? 0 : colorIndex;
+const _getColor = (colorList, colorIndex) => {
+  const index = colorIndex >= colorList.length ? 0 : colorIndex;
   return colorList[index];
 };
 
-function ColorPicker(_ref) {
-  var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 0 : _ref$color,
-      small = _ref.small,
-      onChange = _ref.onChange,
-      _ref$colorList = _ref.colorList,
-      colorList = _ref$colorList === void 0 ? COLORS : _ref$colorList;
+function ColorPicker({
+  color = 0,
+  small,
+  onChange,
+  colorList = COLORS
+}) {
   return /*#__PURE__*/React__default.createElement(Dropdown.Box, {
     right: true,
     className: "reactist_color_picker"
-  }, /*#__PURE__*/React__default.createElement(Dropdown.Trigger, null, function () {
-    var backgroundColor = _getColor(colorList, color);
+  }, /*#__PURE__*/React__default.createElement(Dropdown.Trigger, null, (() => {
+    const backgroundColor = _getColor(colorList, color);
 
     return /*#__PURE__*/React__default.createElement("span", {
       className: classNames('color_trigger', {
-        small: small
+        small
       }),
       style: {
         backgroundColor: _isNamedColor(backgroundColor) ? backgroundColor.color : backgroundColor
@@ -2231,9 +2200,9 @@ function ColorPicker(_ref) {
     }, /*#__PURE__*/React__default.createElement("span", {
       className: "color_trigger--inner_ring"
     }));
-  }()), /*#__PURE__*/React__default.createElement(Dropdown.Body, null, /*#__PURE__*/React__default.createElement("div", {
+  })()), /*#__PURE__*/React__default.createElement(Dropdown.Body, null, /*#__PURE__*/React__default.createElement("div", {
     className: "color_options"
-  }, colorList.reduce(function (items, currentColor, currentIndex) {
+  }, colorList.reduce((items, currentColor, currentIndex) => {
     items.push( /*#__PURE__*/React__default.createElement(ColorItem, {
       isActive: color >= colorList.length ? currentIndex === 0 : currentIndex === color,
       key: currentIndex,
@@ -2248,20 +2217,19 @@ function ColorPicker(_ref) {
 
 ColorPicker.displayName = 'ColorPicker';
 
-function ColorItem(_ref2) {
-  var color = _ref2.color,
-      colorIndex = _ref2.colorIndex,
-      isActive = _ref2.isActive,
-      _onClick = _ref2.onClick,
-      tooltip = _ref2.tooltip;
-  var item = /*#__PURE__*/React__default.createElement("span", {
+function ColorItem({
+  color,
+  colorIndex,
+  isActive,
+  onClick,
+  tooltip
+}) {
+  const item = /*#__PURE__*/React__default.createElement("span", {
     className: 'reactist color_item' + (isActive ? ' active' : ''),
     style: {
       backgroundColor: color
     },
-    onClick: function onClick() {
-      return _onClick === null || _onClick === void 0 ? void 0 : _onClick(colorIndex);
-    }
+    onClick: () => onClick == null ? void 0 : onClick(colorIndex)
   }, /*#__PURE__*/React__default.createElement("span", {
     className: "color_item--inner_ring"
   }));
@@ -2272,24 +2240,22 @@ function ColorItem(_ref2) {
 
 ColorItem.displayName = 'ColorItem';
 
-var Input = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
-  var className = classNames('reactist_input', props.className);
-  return /*#__PURE__*/React__default.createElement("input", Object.assign({}, props, {
+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';
 
-var _excluded$r = ["children", "className", "translateKey", "isMac"];
+const _excluded$r = ["children", "className", "translateKey", "isMac"];
 // Support for setting up how to translate modifiers globally.
 //
 
-var globalTranslateKey = function globalTranslateKey(key) {
-  return key;
-};
+let globalTranslateKey = key => key;
 
-KeyboardShortcut.setTranslateKey = function (tr) {
+KeyboardShortcut.setTranslateKey = tr => {
   globalTranslateKey = tr;
 };
 
@@ -2333,9 +2299,9 @@ function isSpecialKey(str) {
 }
 
 function parseKeys(shortcut, isMac, translateKey) {
-  var t = isMac ? translateKeyMac : translateKey;
+  const t = isMac ? translateKeyMac : translateKey;
 
-  var _hasModifiers = hasModifiers(shortcut);
+  const _hasModifiers = hasModifiers(shortcut);
 
   function mapIndividualKey(str) {
     if (isSpecialKey(str)) {
@@ -2359,31 +2325,27 @@ function parseKeys(shortcut, isMac, translateKey) {
 function KeyboardShortcut(_ref) {
   var _navigator$platform$t, _navigator$platform;
 
-  var children = _ref.children,
-      className = _ref.className,
-      _ref$translateKey = _ref.translateKey,
-      translateKey = _ref$translateKey === void 0 ? globalTranslateKey : _ref$translateKey,
-      _ref$isMac = _ref.isMac,
-      isMac = _ref$isMac === void 0 ? (_navigator$platform$t = (_navigator$platform = navigator.platform) === null || _navigator$platform === void 0 ? void 0 : _navigator$platform.toUpperCase().includes('MAC')) !== null && _navigator$platform$t !== void 0 ? _navigator$platform$t : false : _ref$isMac,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+  let {
+    children,
+    className,
+    translateKey = globalTranslateKey,
+    isMac = (_navigator$platform$t = (_navigator$platform = navigator.platform) == null ? void 0 : _navigator$platform.toUpperCase().includes('MAC')) != null ? _navigator$platform$t : false
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$r);
 
-  var shortcuts = typeof children === 'string' ? [children] : children;
-  return /*#__PURE__*/React.createElement("span", Object.assign({
+  const shortcuts = typeof children === 'string' ? [children] : children;
+  return /*#__PURE__*/React.createElement("span", _objectSpread2({
     className: classNames('reactist_keyboard_shortcut', className, {
       'reactist_keyboard_shortcut--macos': isMac
     })
-  }, props), shortcuts.map(function (shortcut, i) {
-    return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: i
-    }, i === 0 ? null : ', ', /*#__PURE__*/React.createElement("kbd", null, parseKeys(shortcut, isMac, translateKey).map(function (key, j) {
-      return /*#__PURE__*/React.createElement("kbd", {
-        key: j
-      }, key);
-    })));
-  }));
+  }, props), shortcuts.map((shortcut, i) => /*#__PURE__*/React.createElement(React.Fragment, {
+    key: i
+  }, i === 0 ? null : ', ', /*#__PURE__*/React.createElement("kbd", null, parseKeys(shortcut, isMac, translateKey).map((key, j) => /*#__PURE__*/React.createElement("kbd", {
+    key: j
+  }, key))))));
 }
 
-var SUPPORTED_KEYS = {
+const SUPPORTED_KEYS = {
   ARROW_UP: 'ArrowUp',
   ARROW_RIGHT: 'ArrowRight',
   ARROW_DOWN: 'ArrowDown',
@@ -2392,8 +2354,8 @@ var SUPPORTED_KEYS = {
   BACKSPACE: 'Backspace',
   ESCAPE: 'Escape'
 };
-var KeyCapturerResolver = {
-  resolveByKey: function resolveByKey(eventKey) {
+const KeyCapturerResolver = {
+  resolveByKey(eventKey) {
     switch (eventKey) {
       case 'Left': // IE specific
 
@@ -2446,7 +2408,8 @@ var KeyCapturerResolver = {
         }
     }
   },
-  resolveByKeyCode: function resolveByKeyCode(keyCode) {
+
+  resolveByKeyCode(keyCode) {
     switch (keyCode) {
       case 37:
         {
@@ -2489,8 +2452,9 @@ var KeyCapturerResolver = {
         }
     }
   }
+
 };
-var keyEventHandlerMapping = {
+const keyEventHandlerMapping = {
   ArrowUp: 'onArrowUp',
   ArrowDown: 'onArrowDown',
   ArrowLeft: 'onArrowLeft',
@@ -2499,7 +2463,7 @@ var keyEventHandlerMapping = {
   Backspace: 'onBackspace',
   Escape: 'onEscape'
 };
-var keyPropagatePropMapping = {
+const keyPropagatePropMapping = {
   ArrowUp: 'propagateArrowUp',
   ArrowDown: 'propagateArrowDown',
   ArrowLeft: 'propagateArrowLeft',
@@ -2518,27 +2482,26 @@ var keyPropagatePropMapping = {
  */
 
 function KeyCapturer(props) {
-  var _objectSpread2$1;
-
-  var children = props.children,
-      _props$eventName = props.eventName,
-      eventName = _props$eventName === void 0 ? 'onKeyDown' : _props$eventName;
-  var composingRef = React.useRef(false);
-  var composingEventHandlers = props.onEnter ? {
-    onCompositionStart: function onCompositionStart() {
+  const {
+    children,
+    eventName = 'onKeyDown'
+  } = props;
+  const composingRef = React.useRef(false);
+  const composingEventHandlers = props.onEnter ? {
+    onCompositionStart: () => {
       composingRef.current = true;
     },
-    onCompositionEnd: function onCompositionEnd() {
+    onCompositionEnd: () => {
       composingRef.current = false;
     }
   } : undefined;
 
   function handleKeyEvent(event) {
     // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
-    var key = event.key !== undefined ? KeyCapturerResolver.resolveByKey(event.key) : KeyCapturerResolver.resolveByKeyCode(event.keyCode);
+    const key = event.key !== undefined ? KeyCapturerResolver.resolveByKey(event.key) : KeyCapturerResolver.resolveByKeyCode(event.keyCode);
     if (!key) return;
-    var propagateEvent = props[keyPropagatePropMapping[key]] || false;
-    var eventHandler = props[keyEventHandlerMapping[key]];
+    const propagateEvent = props[keyPropagatePropMapping[key]] || false;
+    const eventHandler = props[keyEventHandlerMapping[key]];
 
     if (key === 'Enter' && eventHandler) {
       if (composingRef.current || // Safari fires the onCompositionEnd event before the keydown event, so we
@@ -2559,29 +2522,35 @@ function KeyCapturer(props) {
     }
   }
 
-  return /*#__PURE__*/React__default.cloneElement(children, _objectSpread2((_objectSpread2$1 = {}, _objectSpread2$1[eventName] = handleKeyEvent, _objectSpread2$1), composingEventHandlers));
+  return /*#__PURE__*/React__default.cloneElement(children, _objectSpread2({
+    [eventName]: handleKeyEvent
+  }, composingEventHandlers));
 }
 
-var hasEnoughSpace = function hasEnoughSpace(windowDimensions, elementDimensions, wrapperDimensions, wrapperPosition, position, gap) {
-  if (gap === void 0) {
-    gap = 0;
-  }
-
-  var windowHeight = windowDimensions.height,
-      windowWidth = windowDimensions.width;
-  var elementHeight = elementDimensions.height,
-      elementWidth = elementDimensions.width;
-  var wrapperHeight = wrapperDimensions.height,
-      wrapperWidth = wrapperDimensions.width;
-  var wrapperX = wrapperPosition.x,
-      wrapperY = wrapperPosition.y;
+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;
 
-  var verticalPosition = _calculateVerticalPosition(wrapperPosition, wrapperDimensions, elementDimensions);
+  const verticalPosition = _calculateVerticalPosition(wrapperPosition, wrapperDimensions, elementDimensions);
 
-  var horizontalPosition = _calculateHorizontalPosition(wrapperPosition, wrapperDimensions, elementDimensions);
+  const horizontalPosition = _calculateHorizontalPosition(wrapperPosition, wrapperDimensions, elementDimensions);
 
-  var canPlaceVertically = verticalPosition >= 0 && verticalPosition + elementWidth <= windowWidth;
-  var canPlaceHorizontally = horizontalPosition >= 0 && horizontalPosition + elementHeight <= windowHeight;
+  const canPlaceVertically = verticalPosition >= 0 && verticalPosition + elementWidth <= windowWidth;
+  const canPlaceHorizontally = horizontalPosition >= 0 && horizontalPosition + elementHeight <= windowHeight;
 
   if (position === 'top') {
     return canPlaceVertically && wrapperY - elementHeight - gap >= 0;
@@ -2596,77 +2565,57 @@ var hasEnoughSpace = function hasEnoughSpace(windowDimensions, elementDimensions
   return false;
 };
 
-var _calculateVerticalPosition = function _calculateVerticalPosition(wrapperPosition, wrapperDimensions, elementDimensions) {
+function _calculateVerticalPosition(wrapperPosition, wrapperDimensions, elementDimensions) {
   return wrapperPosition.x + (wrapperDimensions.width - elementDimensions.width) / 2;
-};
+}
 
-var _calculateHorizontalPosition = function _calculateHorizontalPosition(wrapperPosition, wrapperDimensions, elementDimensions) {
+function _calculateHorizontalPosition(wrapperPosition, wrapperDimensions, elementDimensions) {
   return wrapperPosition.y + (wrapperDimensions.height - elementDimensions.height) / 2;
-};
-
-var calculateTopCenterPosition = function calculateTopCenterPosition(wrapperDimensions, wrapperPosition, elementDimensions, gap) {
-  if (gap === void 0) {
-    gap = 0;
-  }
+}
 
-  var x = _calculateVerticalPosition(wrapperPosition, wrapperDimensions, elementDimensions);
+const calculateTopCenterPosition = (wrapperDimensions, wrapperPosition, elementDimensions, gap = 0) => {
+  const x = _calculateVerticalPosition(wrapperPosition, wrapperDimensions, elementDimensions);
 
-  var y = wrapperPosition.y - elementDimensions.height - gap;
+  const y = wrapperPosition.y - elementDimensions.height - gap;
   return {
-    x: x,
-    y: y
+    x,
+    y
   };
 };
 
-var calculateBottomCenterPosition = function calculateBottomCenterPosition(wrapperDimensions, wrapperPosition, elementDimensions, gap) {
-  if (gap === void 0) {
-    gap = 0;
-  }
-
-  var x = _calculateVerticalPosition(wrapperPosition, wrapperDimensions, elementDimensions);
+const calculateBottomCenterPosition = (wrapperDimensions, wrapperPosition, elementDimensions, gap = 0) => {
+  const x = _calculateVerticalPosition(wrapperPosition, wrapperDimensions, elementDimensions);
 
-  var y = wrapperPosition.y + wrapperDimensions.height + gap;
+  const y = wrapperPosition.y + wrapperDimensions.height + gap;
   return {
-    x: x,
-    y: y
+    x,
+    y
   };
 };
 
-var calculateRightCenterPosition = function calculateRightCenterPosition(wrapperDimensions, wrapperPosition, elementDimensions, gap) {
-  if (gap === void 0) {
-    gap = 0;
-  }
-
-  var x = wrapperPosition.x + wrapperDimensions.width + gap;
+const calculateRightCenterPosition = (wrapperDimensions, wrapperPosition, elementDimensions, gap = 0) => {
+  const x = wrapperPosition.x + wrapperDimensions.width + gap;
 
-  var y = _calculateHorizontalPosition(wrapperPosition, wrapperDimensions, elementDimensions);
+  const y = _calculateHorizontalPosition(wrapperPosition, wrapperDimensions, elementDimensions);
 
   return {
-    x: x,
-    y: y
+    x,
+    y
   };
 };
 
-var calculateLeftCenterPosition = function calculateLeftCenterPosition(wrapperDimensions, wrapperPosition, elementDimensions, gap) {
-  if (gap === void 0) {
-    gap = 0;
-  }
-
-  var x = wrapperPosition.x - elementDimensions.width - gap;
+const calculateLeftCenterPosition = (wrapperDimensions, wrapperPosition, elementDimensions, gap = 0) => {
+  const x = wrapperPosition.x - elementDimensions.width - gap;
 
-  var y = _calculateHorizontalPosition(wrapperPosition, wrapperDimensions, elementDimensions);
+  const y = _calculateHorizontalPosition(wrapperPosition, wrapperDimensions, elementDimensions);
 
   return {
-    x: x,
-    y: y
+    x,
+    y
   };
 };
 
-var calculatePosition = function calculatePosition(position, wrapperDimensions, wrapperPosition, elementDimensions, gap) {
-  if (gap === void 0) {
-    gap = 0;
-  }
-
+const calculatePosition = (position, wrapperDimensions, wrapperPosition, elementDimensions, gap = 0) => {
   if (position === 'top') {
     return calculateTopCenterPosition(wrapperDimensions, wrapperPosition, elementDimensions, gap);
   } else if (position === 'right') {
@@ -2680,72 +2629,67 @@ var calculatePosition = function calculatePosition(position, wrapperDimensions,
   return wrapperPosition;
 };
 
-var Popover = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(Popover, _React$Component);
-
-  function Popover() {
-    var _this;
-
-    _this = _React$Component.apply(this, arguments) || this;
-
-    _this._updatePopoverPosition = function () {
-      var _this$props = _this.props,
-          position = _this$props.position,
-          allowVaguePositioning = _this$props.allowVaguePositioning,
-          gapSize = _this$props.gapSize;
-
-      var wrapperRect = _this.wrapper.getBoundingClientRect();
-
-      var popoverRect = _this.popover.getBoundingClientRect(); // Instead of using the documentElement find the nearest absolutely positioned element
-
-
-      var documentEl = document.documentElement;
-      var node = _this.wrapper;
-      var foundParent = false;
+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) {
-        var styles = getComputedStyle(node);
+        const styles = getComputedStyle(node);
+        const position = styles.getPropertyValue('position');
 
-        var _position = styles.getPropertyValue('position');
-
-        if (_position === 'absolute' || node === documentEl || !node.parentElement) {
+        if (position === 'absolute' || node === documentEl || !node.parentElement) {
           foundParent = true;
         } else {
           node = node.parentElement;
         }
       }
 
-      var nodeRect = node.getBoundingClientRect();
-      var windowDimensions = {
+      const nodeRect = node.getBoundingClientRect();
+      const windowDimensions = {
         height: nodeRect.height,
         width: nodeRect.width
       };
-      var popoverDimensions = {
+      const popoverDimensions = {
         height: popoverRect.height,
         width: popoverRect.width
       };
-      var wrapperDimensions = {
+      const wrapperDimensions = {
         height: wrapperRect.height,
         width: wrapperRect.width
       };
-      var wrapperPositionRelative = {
+      const wrapperPositionRelative = {
         x: wrapperRect.left - nodeRect.left,
         y: wrapperRect.top - nodeRect.top
       };
-      var wrapperPositionAbsolute = {
+      const wrapperPositionAbsolute = {
         x: wrapperRect.left,
         y: wrapperRect.top
       };
-      var positionsToTry = position === 'auto' ? ['top', 'right', 'bottom', 'left', 'top'] : position === 'vertical' ? ['top', 'bottom'] : position === 'horizontal' ? ['left', 'right'] : [position];
+      const positionsToTry = position === 'auto' ? ['top', 'right', 'bottom', 'left', 'top'] : position === 'vertical' ? ['top', 'bottom'] : position === 'horizontal' ? ['left', 'right'] : [position];
 
-      for (var index = 0; index < positionsToTry.length; index++) {
-        var currentPosition = positionsToTry[index];
-        var enoughSpaceAtPosition = hasEnoughSpace(windowDimensions, popoverDimensions, wrapperDimensions, wrapperPositionRelative, currentPosition, gapSize);
+      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) {
-          var popoverPosition = calculatePosition(currentPosition, wrapperDimensions, wrapperPositionAbsolute, popoverDimensions, gapSize);
-          _this.popover.style.top = popoverPosition.y + "px";
-          _this.popover.style.left = popoverPosition.x + "px";
+          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
@@ -2755,17 +2699,17 @@ var Popover = /*#__PURE__*/function (_React$Component) {
           if (allowVaguePositioning) {
             // correct horizontally
             if (popoverPosition.x < 0) {
-              _this.popover.style.left = 2 * gapSize + "px";
+              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";
+              this.popover.style.top = windowDimensions.height - popoverDimensions.height - 2 * gapSize + "px";
             }
           }
 
           if (currentPosition !== position) {
-            _this.popover.className = _this._getClassNameForPosition(currentPosition);
+            this.popover.className = this._getClassNameForPosition(currentPosition);
           }
 
           break;
@@ -2773,13 +2717,14 @@ var Popover = /*#__PURE__*/function (_React$Component) {
       }
     };
 
-    _this._getClassNameForPosition = function (position) {
-      var _this$props2 = _this.props,
-          visible = _this$props2.visible,
-          withArrow = _this$props2.withArrow,
-          arrowClassName = _this$props2.arrowClassName;
-      var className = classNames('reactist_popover', {
-        visible: visible
+    this._getClassNameForPosition = position => {
+      const {
+        visible,
+        withArrow,
+        arrowClassName
+      } = this.props;
+      const className = classNames('reactist_popover', {
+        visible
       });
 
       if (visible && withArrow) {
@@ -2794,62 +2739,59 @@ var Popover = /*#__PURE__*/function (_React$Component) {
       return className;
     };
 
-    _this._updatePopoverRef = function (popover) {
-      _this.popover = popover;
+    this._updatePopoverRef = popover => {
+      this.popover = popover;
 
-      if (typeof _this.props.popoverRef === 'function') {
-        _this.props.popoverRef(popover);
+      if (typeof this.props.popoverRef === 'function') {
+        this.props.popoverRef(popover);
       }
     };
 
-    _this._updateWrapperRef = function (wrapper) {
-      _this.wrapper = wrapper;
+    this._updateWrapperRef = wrapper => {
+      this.wrapper = wrapper;
 
-      if (typeof _this.props.wrapperRef === 'function') {
-        _this.props.wrapperRef(wrapper);
+      if (typeof this.props.wrapperRef === 'function') {
+        this.props.wrapperRef(wrapper);
       }
     };
-
-    return _this;
   }
 
-  var _proto = Popover.prototype;
-
-  _proto.componentDidMount = function componentDidMount() {
+  componentDidMount() {
     if (this.props.visible) {
       this._updatePopoverPosition();
     }
-  };
+  }
 
-  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps) {
     if (this.wrapper && this.props.visible) {
-      var positionChanged = prevProps.position !== this.props.position;
-      var vaguePositioningChanged = prevProps.allowVaguePositioning !== this.props.allowVaguePositioning;
-      var visibilityChanged = prevProps.visible !== this.props.visible;
-      var arrowChanged = prevProps.withArrow !== this.props.withArrow;
-      var gapSizeChanged = prevProps.gapSize !== this.props.gapSize;
-      var contentChanged = prevProps.content !== this.props.content;
+      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();
       }
     }
-  };
+  }
 
-  _proto.render = function render() {
-    var _this$props3 = this.props,
-        position = _this$props3.position,
-        wrapperClassName = _this$props3.wrapperClassName,
-        popoverClassName = _this$props3.popoverClassName,
-        onMouseEnter = _this$props3.onMouseEnter,
-        onMouseLeave = _this$props3.onMouseLeave,
-        onClick = _this$props3.onClick,
-        trigger = _this$props3.trigger,
-        content = _this$props3.content;
-    var popoverClass = position ? this._getClassNameForPosition(position) : '';
-    var popoverContentClass = classNames('reactist_popover__content', popoverClassName);
-    var wrapperClass = classNames('reactist_popover__wrapper', wrapperClassName);
-    var triggerElement = React__default.Children.only(trigger);
+  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
@@ -2874,24 +2816,26 @@ var Popover = /*#__PURE__*/function (_React$Component) {
     }, this.props.visible ? /*#__PURE__*/React__default.createElement("span", {
       className: popoverContentClass
     }, typeof content === 'function' ? content() : content) : null));
-  };
+  }
 
-  return Popover;
-}(React__default.Component);
+}
 
+Popover.displayName = void 0;
+Popover.defaultProps = void 0;
 Popover.displayName = 'Popover';
 Popover.defaultProps = {
   position: 'auto',
-  gapSize: 5
+  gapSize: 5 // default size of the arrow (see `tooltip.less`)
+
 };
 
-function ProgressBar(_ref) {
-  var _ref$fillPercentage = _ref.fillPercentage,
-      fillPercentage = _ref$fillPercentage === void 0 ? 0 : _ref$fillPercentage,
-      className = _ref.className,
-      ariaValuetext = _ref['aria-valuetext'];
-  var finalClassName = classNames('reactist_progress_bar', className);
-  var width = fillPercentage < 0 ? 0 : fillPercentage > 100 ? 100 : fillPercentage;
+function ProgressBar({
+  fillPercentage = 0,
+  className,
+  'aria-valuetext': ariaValuetext
+}) {
+  const finalClassName = classNames('reactist_progress_bar', className);
+  const width = fillPercentage < 0 ? 0 : fillPercentage > 100 ? 100 : fillPercentage;
   return /*#__PURE__*/React__default.createElement("div", {
     className: finalClassName
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -2902,44 +2846,39 @@ function ProgressBar(_ref) {
   }), /*#__PURE__*/React__default.createElement(HiddenVisually, null, /*#__PURE__*/React__default.createElement("progress", {
     value: width,
     max: 100,
-    "aria-valuetext": ariaValuetext !== null && ariaValuetext !== void 0 ? ariaValuetext : undefined
+    "aria-valuetext": ariaValuetext != null ? ariaValuetext : undefined
   })));
 }
 
 ProgressBar.displayName = 'ProgressBar';
 
-var _excluded$s = ["value", "options", "onChange", "disabled", "className", "defaultValue"];
+const _excluded$s = ["value", "options", "onChange", "disabled", "className", "defaultValue"];
 
 function Select(_ref) {
-  var value = _ref.value,
-      _ref$options = _ref.options,
-      options = _ref$options === void 0 ? [] : _ref$options,
-      _onChange = _ref.onChange,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? true : _ref$disabled,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      defaultValue = _ref.defaultValue,
-      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$s);
-
-  var selectClassName = classNames('reactist_select', {
-    disabled: disabled
+  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", Object.assign({
+  return /*#__PURE__*/React__default.createElement("select", _objectSpread2({
     className: selectClassName,
     value: value,
-    onChange: function onChange(event) {
-      return _onChange ? _onChange(event.target.value) : undefined;
-    },
+    onChange: event => onChange ? onChange(event.target.value) : undefined,
     disabled: disabled,
     defaultValue: defaultValue
-  }, otherProps), options === null || options === void 0 ? void 0 : options.map(function (option) {
-    return /*#__PURE__*/React__default.createElement("option", {
-      key: option.key || option.value,
-      value: option.value,
-      disabled: option.disabled
-    }, option.text);
-  }));
+  }, 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';
@@ -2949,36 +2888,27 @@ Select.defaultProps = {
 };
 
 dayjs.extend(LocalizedFormat);
-var TimeUtils = {
+const TimeUtils = {
   SHORT_FORMAT_CURRENT_YEAR: 'L',
   SHORT_FORMAT_PAST_YEAR: 'LL',
   LONG_FORMAT: 'LL, LT',
-  timeAgo: function timeAgo(timestamp, config) {
-    if (config === void 0) {
-      config = {};
-    }
 
-    var _config = config,
-        _config$locale = _config.locale,
-        locale = _config$locale === void 0 ? 'en' : _config$locale,
-        _config$shortFormatCu = _config.shortFormatCurrentYear,
-        shortFormatCurrentYear = _config$shortFormatCu === void 0 ? this.SHORT_FORMAT_CURRENT_YEAR : _config$shortFormatCu,
-        _config$shortFormatPa = _config.shortFormatPastYear,
-        shortFormatPastYear = _config$shortFormatPa === void 0 ? this.SHORT_FORMAT_PAST_YEAR : _config$shortFormatPa,
-        _config$daysSuffix = _config.daysSuffix,
-        daysSuffix = _config$daysSuffix === void 0 ? 'd' : _config$daysSuffix,
-        _config$hoursSuffix = _config.hoursSuffix,
-        hoursSuffix = _config$hoursSuffix === void 0 ? 'h' : _config$hoursSuffix,
-        _config$minutesSuffix = _config.minutesSuffix,
-        minutesSuffix = _config$minutesSuffix === void 0 ? 'm' : _config$minutesSuffix,
-        _config$momentsAgo = _config.momentsAgo,
-        momentsAgo = _config$momentsAgo === void 0 ? 'moments ago' : _config$momentsAgo;
-    var now = dayjs();
-    var date = dayjs(timestamp * 1000);
+  timeAgo(timestamp, config = {}) {
+    const {
+      locale = 'en',
+      shortFormatCurrentYear = this.SHORT_FORMAT_CURRENT_YEAR,
+      shortFormatPastYear = this.SHORT_FORMAT_PAST_YEAR,
+      daysSuffix = 'd',
+      hoursSuffix = 'h',
+      minutesSuffix = 'm',
+      momentsAgo = 'moments ago'
+    } = config;
+    const now = dayjs();
+    const date = dayjs(timestamp * 1000);
     date.locale(locale);
-    var diffMinutes = now.diff(date, 'minute');
-    var diffHours = now.diff(date, 'hour');
-    var diffDays = now.diff(date, 'day');
+    const diffMinutes = now.diff(date, 'minute');
+    const diffHours = now.diff(date, 'hour');
+    const diffDays = now.diff(date, 'day');
 
     if (diffDays > 1) {
       if (date.isSame(now, 'year')) {
@@ -2996,19 +2926,14 @@ var TimeUtils = {
       return momentsAgo;
     }
   },
-  formatTime: function formatTime(timestamp, config) {
-    if (config === void 0) {
-      config = {};
-    }
 
-    var _config2 = config,
-        _config2$locale = _config2.locale,
-        locale = _config2$locale === void 0 ? 'en' : _config2$locale,
-        _config2$shortFormatC = _config2.shortFormatCurrentYear,
-        shortFormatCurrentYear = _config2$shortFormatC === void 0 ? this.SHORT_FORMAT_CURRENT_YEAR : _config2$shortFormatC,
-        _config2$shortFormatP = _config2.shortFormatPastYear,
-        shortFormatPastYear = _config2$shortFormatP === void 0 ? this.SHORT_FORMAT_PAST_YEAR : _config2$shortFormatP;
-    var date = dayjs(timestamp * 1000);
+  formatTime(timestamp, config = {}) {
+    const {
+      locale = 'en',
+      shortFormatCurrentYear = this.SHORT_FORMAT_CURRENT_YEAR,
+      shortFormatPastYear = this.SHORT_FORMAT_PAST_YEAR
+    } = config;
+    const date = dayjs(timestamp * 1000);
     date.locale(locale);
 
     if (date.isSame(dayjs(), 'year')) {
@@ -3017,49 +2942,40 @@ var TimeUtils = {
       return date.format(shortFormatPastYear);
     }
   },
-  formatTimeLong: function formatTimeLong(timestamp, config) {
-    if (config === void 0) {
-      config = {};
-    }
 
-    var _config3 = config,
-        _config3$locale = _config3.locale,
-        locale = _config3$locale === void 0 ? 'en' : _config3$locale,
-        _config3$longFormat = _config3.longFormat,
-        longFormat = _config3$longFormat === void 0 ? this.LONG_FORMAT : _config3$longFormat;
-    var date = dayjs(timestamp * 1000);
+  formatTimeLong(timestamp, config = {}) {
+    const {
+      locale = 'en',
+      longFormat = this.LONG_FORMAT
+    } = config;
+    const date = dayjs(timestamp * 1000);
     date.locale(locale);
     return date.format(longFormat);
   }
-};
-
-var DELAY = 60000;
 
-var Time = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(Time, _React$Component);
+};
 
-  function Time(props) {
-    var _this;
+const DELAY = 60000;
 
-    _this = _React$Component.call(this, props) || this;
-    _this.refreshInterval = undefined;
-    _this.state = {
+class Time extends React__default.Component {
+  constructor(props) {
+    super(props);
+    this.refreshInterval = void 0;
+    this.refreshInterval = undefined;
+    this.state = {
       hovered: false,
       mouseX: undefined,
       mouseY: undefined
     };
-    return _this;
   }
 
-  var _proto = Time.prototype;
-
-  _proto.componentDidMount = function componentDidMount() {
+  componentDidMount() {
     if (this.props.refresh) {
       this._refresh();
     }
-  };
+  }
 
-  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps) {
     if (!prevProps.refresh && this.props.refresh) {
       this._refresh();
     }
@@ -3069,34 +2985,35 @@ var Time = /*#__PURE__*/function (_React$Component) {
         clearTimeout(this.refreshInterval);
       }
     }
-  };
+  }
 
-  _proto.componentWillUnmount = function componentWillUnmount() {
+  componentWillUnmount() {
     if (this.refreshInterval) {
       clearTimeout(this.refreshInterval);
     }
-  };
+  }
 
-  _proto._setHovered = function _setHovered(hovered, event) {
-    var _this$state = this.state,
-        mouseX = _this$state.mouseX,
-        mouseY = _this$state.mouseY;
-    var clientX = event.clientX,
-        clientY = event.clientY;
+  _setHovered(hovered, event) {
+    const {
+      mouseX,
+      mouseY
+    } = this.state;
+    const {
+      clientX,
+      clientY
+    } = event;
 
     if (clientX !== mouseX || clientY !== mouseY) {
       // mouse has moved
-      this.setState(function () {
-        return {
-          hovered: hovered,
-          mouseX: clientX,
-          mouseY: clientY
-        };
-      });
+      this.setState(() => ({
+        hovered,
+        mouseX: clientX,
+        mouseY: clientY
+      }));
     }
-  };
+  }
 
-  _proto._renderTime = function _renderTime(config) {
+  _renderTime(config) {
     if (!this.props.time) {
       return;
     }
@@ -3112,43 +3029,36 @@ var Time = /*#__PURE__*/function (_React$Component) {
     }
 
     return TimeUtils.timeAgo(this.props.time, config);
-  };
-
-  _proto._refresh = function _refresh() {
-    var _this2 = this;
+  }
 
-    this.refreshInterval = setInterval(function () {
-      _this2.forceUpdate();
+  _refresh() {
+    this.refreshInterval = setInterval(() => {
+      this.forceUpdate();
     }, DELAY);
-  };
-
-  _proto.render = function render() {
-    var _this3 = this;
+  }
 
-    var className = 'reactist_time';
+  render() {
+    let className = 'reactist_time';
 
     if (this.props.className) {
       className = this.props.className;
     }
 
-    var timeComponent = this._renderTime(this.props.config);
+    const timeComponent = this._renderTime(this.props.config);
 
     return /*#__PURE__*/React__default.createElement("time", {
       className: className,
-      onMouseEnter: function onMouseEnter(event) {
-        return _this3._setHovered(true, event);
-      },
-      onMouseLeave: function onMouseLeave(event) {
-        return _this3._setHovered(false, event);
-      }
+      onMouseEnter: event => this._setHovered(true, event),
+      onMouseLeave: event => this._setHovered(false, event)
     }, this.props.tooltipOnHover ? /*#__PURE__*/React__default.createElement(Tooltip, {
       content: this.props.tooltip || this.props.time && TimeUtils.formatTimeLong(this.props.time, this.props.config)
     }, /*#__PURE__*/React__default.createElement("span", null, timeComponent)) : timeComponent);
-  };
+  }
 
-  return Time;
-}(React__default.Component);
+}
 
+Time.displayName = void 0;
+Time.defaultProps = void 0;
 Time.displayName = 'Time';
 Time.defaultProps = {
   expandOnHover: false,
@@ -3164,67 +3074,65 @@ Time.defaultProps = {
   }
 };
 
-var CloseIcon$1 = function CloseIcon() {
-  return /*#__PURE__*/React__default.createElement("svg", {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24"
-  }, /*#__PURE__*/React__default.createElement("path", {
-    fill: "gray",
-    fillRule: "evenodd",
-    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 CloseIcon$1 = () => /*#__PURE__*/React__default.createElement("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24"
+}, /*#__PURE__*/React__default.createElement("path", {
+  fill: "gray",
+  fillRule: "evenodd",
+  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"
+}));
 
-var _excluded$t = ["id", "icon", "title", "subtitle", "children", "customCloseButton", "onClick", "onClose", "closeAltText", "className", "aria-live"];
+const _excluded$t = ["id", "icon", "title", "subtitle", "children", "customCloseButton", "onClick", "onClose", "closeAltText", "className", "aria-live"];
 
 function Notification(_ref) {
-  var id = _ref.id,
-      icon = _ref.icon,
-      title = _ref.title,
-      subtitle = _ref.subtitle,
-      children = _ref.children,
-      customCloseButton = _ref.customCloseButton,
-      onClick = _ref.onClick,
-      onClose = _ref.onClose,
-      _ref$closeAltText = _ref.closeAltText,
-      closeAltText = _ref$closeAltText === void 0 ? 'Close' : _ref$closeAltText,
-      className = _ref.className,
-      _ref$ariaLive = _ref['aria-live'],
-      ariaLive = _ref$ariaLive === void 0 ? 'polite' : _ref$ariaLive,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$t);
-
-  var titleId = title ? id + "-title" : null;
-  var titleIdAttribute = titleId ? {
+  let {
+    id,
+    icon,
+    title,
+    subtitle,
+    children,
+    customCloseButton,
+    onClick,
+    onClose,
+    closeAltText = 'Close',
+    className,
+    'aria-live': ariaLive = 'polite'
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded$t);
+
+  const titleId = title ? id + "-title" : null;
+  const titleIdAttribute = titleId ? {
     id: titleId
   } : null;
-  var subtitleId = subtitle ? id + "-subtitle" : null;
-  var subtitleIdAttribute = subtitleId ? {
+  const subtitleId = subtitle ? id + "-subtitle" : null;
+  const subtitleIdAttribute = subtitleId ? {
     id: subtitleId
   } : null;
-  var contentId = children ? id + "-content" : null;
-  var contentIdAttribute = children ? {
+  const contentId = children ? id + "-content" : null;
+  const contentIdAttribute = children ? {
     id: id + "-content"
   } : null;
-  var ariaLabelledBy = contentId ? {
+  const ariaLabelledBy = contentId ? {
     'aria-labelledby': contentId
   } : titleId ? {
     'aria-labelledby': titleId
   } : null;
-  var ariaDescribedBy = subtitleId && !children ? {
+  const ariaDescribedBy = subtitleId && !children ? {
     'aria-describedby': subtitleId
   } : null;
-  var notificationContent = /*#__PURE__*/React__default.createElement("div", Object.assign({
+  const notificationContent = /*#__PURE__*/React__default.createElement("div", _objectSpread2({
     className: "reactist-notification__content"
-  }, contentIdAttribute), children !== null && children !== void 0 ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, title ? /*#__PURE__*/React__default.createElement("h3", Object.assign({
+  }, contentIdAttribute), children != null ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, title ? /*#__PURE__*/React__default.createElement("h3", _objectSpread2({
     className: "reactist-notification__title"
-  }, titleIdAttribute), title) : null, subtitle ? /*#__PURE__*/React__default.createElement("p", Object.assign({
+  }, titleIdAttribute), title) : null, subtitle ? /*#__PURE__*/React__default.createElement("p", _objectSpread2({
     className: "reactist-notification__subtitle"
   }, subtitleIdAttribute), subtitle) : null));
-  var notificationBody = /*#__PURE__*/React__default.createElement("div", {
+  const notificationBody = /*#__PURE__*/React__default.createElement("div", {
     className: "reactist-notification__icon-content-group"
-  }, icon !== null && icon !== void 0 ? icon : null, notificationContent);
-  return /*#__PURE__*/React__default.createElement("div", Object.assign({
+  }, icon != null ? icon : null, notificationContent);
+  return /*#__PURE__*/React__default.createElement("div", _objectSpread2(_objectSpread2(_objectSpread2({
     id: id,
     role: "alert",
     className: classNames('reactist-notification', className, {
@@ -3232,28 +3140,22 @@ function Notification(_ref) {
       'reactist-notification--with-close-button': Boolean(onClose)
     }),
     "aria-live": ariaLive
-  }, ariaLabelledBy, ariaDescribedBy, rest), onClick ? /*#__PURE__*/React__default.createElement("button", {
+  }, ariaLabelledBy), ariaDescribedBy), rest), onClick ? /*#__PURE__*/React__default.createElement("button", {
     className: "reactist-notification__button",
     onClick: onClick
   }, notificationBody) : notificationBody, onClose ? /*#__PURE__*/React__default.createElement("button", {
     className: "reactist-notification__close-button",
     onClick: onClose,
     "aria-label": closeAltText
-  }, customCloseButton !== null && customCloseButton !== void 0 ? customCloseButton : /*#__PURE__*/React__default.createElement(CloseIcon$1, null)) : null);
-}
-
-var _excluded$u = ["children", "onItemSelect"],
-    _excluded2$3 = ["exceptionallySetClassName"],
-    _excluded3$2 = ["handleItemSelect"],
-    _excluded4$2 = ["exceptionallySetClassName"],
-    _excluded5$2 = ["handleItemSelect"],
-    _excluded6 = ["value", "children", "onSelect", "hideOnSelect", "onClick", "exceptionallySetClassName"],
-    _excluded7 = ["handleItemSelect"],
-    _excluded8 = ["children", "onItemSelect"],
-    _excluded9 = ["handleItemSelect"],
-    _excluded10 = ["label", "children", "exceptionallySetClassName"],
-    _excluded11 = ["handleItemSelect"];
-var MenuContext = /*#__PURE__*/React.createContext( // Reakit gives us no means to obtain a valid initial/default value of type MenuStateReturn
+  }, customCloseButton != null ? customCloseButton : /*#__PURE__*/React__default.createElement(CloseIcon$1, null)) : null);
+}
+
+const _excluded$u = ["children", "onItemSelect"],
+      _excluded2$3 = ["exceptionallySetClassName"],
+      _excluded3$2 = ["exceptionallySetClassName"],
+      _excluded4$1 = ["value", "children", "onSelect", "hideOnSelect", "onClick", "exceptionallySetClassName", "as"],
+      _excluded5$1 = ["label", "children", "exceptionallySetClassName"];
+const MenuContext = /*#__PURE__*/React.createContext( // Ariakit gives us no means to obtain a valid initial/default value of type MenuStateReturn
 // (it is normally obtained by calling useMenuState but we can't call hooks outside components).
 // This is however of little consequence since this value is only used if some of the components
 // are used outside Menu, something that should not happen and we do not support.
@@ -3265,22 +3167,24 @@ var MenuContext = /*#__PURE__*/React.createContext( // Reakit gives us no means
  */
 
 function Menu(_ref) {
-  var children = _ref.children,
-      onItemSelect = _ref.onItemSelect,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
-
-  var state = Reakit.useMenuState(_objectSpread2({
-    loop: true,
-    unstable_offset: [8, 8]
+  let {
+    children,
+    onItemSelect
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$u);
+
+  const state = Ariakit.useMenuState(_objectSpread2({
+    focusLoop: true,
+    gutter: 8,
+    shift: 8
   }, props));
-  var handleItemSelect = React.useCallback(function handleItemSelect(value) {
+  const handleItemSelect = React.useCallback(function handleItemSelect(value) {
     if (onItemSelect) onItemSelect(value);
   }, [onItemSelect]);
-  var value = React.useMemo(function () {
-    return _objectSpread2(_objectSpread2({}, state), {}, {
-      handleItemSelect: handleItemSelect
-    });
-  }, [state, handleItemSelect]);
+  const value = React.useMemo(() => ({
+    state,
+    handleItemSelect
+  }), [state, handleItemSelect]);
   return /*#__PURE__*/React.createElement(MenuContext.Provider, {
     value: value
   }, children);
@@ -3290,69 +3194,38 @@ function Menu(_ref) {
  */
 
 
-var MenuButton = /*#__PURE__*/polymorphicComponent(function MenuButton(_ref2, ref) {
-  var exceptionallySetClassName = _ref2.exceptionallySetClassName,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
-
-  var _React$useContext = React.useContext(MenuContext),
-      state = _objectWithoutPropertiesLoose(_React$useContext, _excluded3$2);
+const MenuButton = /*#__PURE__*/polymorphicComponent(function MenuButton(_ref2, ref) {
+  let {
+    exceptionallySetClassName
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded2$3);
 
-  return /*#__PURE__*/React.createElement(Reakit.MenuButton, Object.assign({}, props, state, {
+  const {
+    state
+  } = React.useContext(MenuContext);
+  return /*#__PURE__*/React.createElement(Ariakit.MenuButton, _objectSpread2(_objectSpread2({}, props), {}, {
+    state: state,
     ref: ref,
     className: classNames('reactist_menubutton', exceptionallySetClassName)
   }));
 });
-var BACKDROP_STYLE = {
-  width: '100%',
-  height: '100%',
-  position: 'fixed',
-  top: 0,
-  left: 0
-};
-/**
- * Internal component to provide a backdrop/overlay to all menus. This is needed because reakit's
- * menus do not show an overlay by default.
- */
-
-function MenuBackdrop(_ref3) {
-  var baseId = _ref3.baseId,
-      visible = _ref3.visible,
-      animated = _ref3.animated,
-      animating = _ref3.animating,
-      stopAnimation = _ref3.stopAnimation,
-      modal = _ref3.modal,
-      children = _ref3.children;
-  return /*#__PURE__*/React.createElement(Popover$1.PopoverBackdrop, {
-    baseId: baseId,
-    visible: visible,
-    animated: animated,
-    animating: animating,
-    stopAnimation: stopAnimation,
-    modal: modal,
-    style: BACKDROP_STYLE
-  }, children);
-}
 /**
  * The dropdown menu itself, containing a list of menu items.
  */
 
-
-var MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref4, ref) {
-  var exceptionallySetClassName = _ref4.exceptionallySetClassName,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded4$2);
-
-  var _React$useContext2 = React.useContext(MenuContext),
-      state = _objectWithoutPropertiesLoose(_React$useContext2, _excluded5$2);
-
-  var previousVisible = usePrevious(state.visible);
-  React.useEffect(function focusTriggerOnClose() {
-    if (state.visible === false && previousVisible === true) {
-      var _state$unstable_refer, _state$unstable_refer2;
-
-      (_state$unstable_refer = state.unstable_referenceRef) === null || _state$unstable_refer === void 0 ? void 0 : (_state$unstable_refer2 = _state$unstable_refer.current) === null || _state$unstable_refer2 === void 0 ? void 0 : _state$unstable_refer2.focus();
-    }
-  }, [state.visible, previousVisible, state.unstable_referenceRef]);
-  return state.visible ? /*#__PURE__*/React.createElement(MenuBackdrop, Object.assign({}, state), /*#__PURE__*/React.createElement(Reakit.Menu, Object.assign({}, props, state, {
+const MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref3, ref) {
+  let {
+    exceptionallySetClassName
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded3$2);
+
+  const {
+    state
+  } = React.useContext(MenuContext);
+  return state.visible ? /*#__PURE__*/React.createElement(portal.Portal, {
+    preserveTabOrder: true
+  }, /*#__PURE__*/React.createElement(Ariakit.Menu, _objectSpread2(_objectSpread2({}, props), {}, {
+    state: state,
     ref: ref,
     className: classNames('reactist_menulist', exceptionallySetClassName)
   }))) : null;
@@ -3362,32 +3235,39 @@ var MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref4, ref) {
  * callback.
  */
 
-var MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref) {
-  var value = _ref5.value,
-      children = _ref5.children,
-      onSelect = _ref5.onSelect,
-      _ref5$hideOnSelect = _ref5.hideOnSelect,
-      hideOnSelect = _ref5$hideOnSelect === void 0 ? true : _ref5$hideOnSelect,
-      onClick = _ref5.onClick,
-      exceptionallySetClassName = _ref5.exceptionallySetClassName,
-      props = _objectWithoutPropertiesLoose(_ref5, _excluded6);
-
-  var _React$useContext3 = React.useContext(MenuContext),
-      handleItemSelect = _React$useContext3.handleItemSelect,
-      state = _objectWithoutPropertiesLoose(_React$useContext3, _excluded7);
-
-  var hide = state.hide;
-  var handleClick = React.useCallback(function handleClick(event) {
-    onClick === null || onClick === void 0 ? void 0 : onClick(event);
-    var onSelectResult = onSelect && !event.defaultPrevented ? onSelect() : undefined;
-    var shouldClose = onSelectResult !== false && hideOnSelect;
+const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref4, ref) {
+  let {
+    value,
+    children,
+    onSelect,
+    hideOnSelect = true,
+    onClick,
+    exceptionallySetClassName,
+    as = 'button'
+  } = _ref4,
+      props = _objectWithoutProperties(_ref4, _excluded4$1);
+
+  const {
+    handleItemSelect,
+    state
+  } = React.useContext(MenuContext);
+  const {
+    hide
+  } = state;
+  const handleClick = React.useCallback(function handleClick(event) {
+    onClick == null ? void 0 : onClick(event);
+    const onSelectResult = onSelect && !event.defaultPrevented ? onSelect() : undefined;
+    const shouldClose = onSelectResult !== false && hideOnSelect;
     handleItemSelect(value);
     if (shouldClose) hide();
   }, [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value]);
-  return /*#__PURE__*/React.createElement(Reakit.MenuItem, Object.assign({}, props, state, {
+  return /*#__PURE__*/React.createElement(Ariakit.MenuItem, _objectSpread2(_objectSpread2({}, props), {}, {
+    as: as,
+    state: state,
     ref: ref,
     onClick: handleClick,
-    className: exceptionallySetClassName
+    className: exceptionallySetClassName,
+    hideOnClick: false
   }), children);
 });
 /**
@@ -3412,35 +3292,32 @@ var MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref) {
  * opening a sub-menu with the menu items list below it.
  */
 
-var SubMenu = /*#__PURE__*/React.forwardRef(function SubMenu(_ref6, ref) {
-  var children = _ref6.children,
-      onItemSelect = _ref6.onItemSelect,
-      props = _objectWithoutPropertiesLoose(_ref6, _excluded8);
-
-  var _React$useContext4 = React.useContext(MenuContext),
-      parentMenuItemSelect = _React$useContext4.handleItemSelect,
-      state = _objectWithoutPropertiesLoose(_React$useContext4, _excluded9);
-
-  var parentMenuHide = state.hide;
-  var handleSubItemSelect = React.useCallback(function handleSubItemSelect(value) {
+const SubMenu = /*#__PURE__*/React.forwardRef(function SubMenu({
+  children,
+  onItemSelect
+}, ref) {
+  const {
+    handleItemSelect: parentMenuItemSelect,
+    state
+  } = React.useContext(MenuContext);
+  const {
+    hide: parentMenuHide
+  } = state;
+  const handleSubItemSelect = React.useCallback(function handleSubItemSelect(value) {
     if (onItemSelect) onItemSelect(value);
     parentMenuItemSelect(value);
     parentMenuHide();
   }, [parentMenuHide, parentMenuItemSelect, onItemSelect]);
-
-  var _React$Children$toArr = React.Children.toArray(children),
-      button = _React$Children$toArr[0],
-      list = _React$Children$toArr[1];
-
-  return /*#__PURE__*/React.createElement(Reakit.MenuItem, Object.assign({}, state, props, {
-    ref: ref
-  }), function (buttonProps) {
-    return /*#__PURE__*/React.createElement(Menu, {
-      onItemSelect: handleSubItemSelect
-    }, /*#__PURE__*/React.cloneElement(button, _objectSpread2(_objectSpread2({}, buttonProps), {}, {
-      className: classNames(buttonProps.className, 'reactist_submenu_button')
-    })), list);
+  const [button, list] = React.Children.toArray(children);
+  const menuProps = Ariakit.useMenuItem({
+    state
   });
+  return /*#__PURE__*/React.createElement(Menu, {
+    onItemSelect: handleSubItemSelect
+  }, /*#__PURE__*/React.cloneElement(button, _objectSpread2(_objectSpread2({}, menuProps), {}, {
+    className: classNames(menuProps.className, 'reactist_submenu_button'),
+    ref
+  })), list);
 });
 /**
  * A way to semantically group some menu items.
@@ -3449,18 +3326,20 @@ var SubMenu = /*#__PURE__*/React.forwardRef(function SubMenu(_ref6, ref) {
  * before and/or after the group if you so wish.
  */
 
-var MenuGroup = /*#__PURE__*/polymorphicComponent(function MenuGroud(_ref7, ref) {
-  var label = _ref7.label,
-      children = _ref7.children,
-      exceptionallySetClassName = _ref7.exceptionallySetClassName,
-      props = _objectWithoutPropertiesLoose(_ref7, _excluded10);
-
-  var _React$useContext5 = React.useContext(MenuContext),
-      state = _objectWithoutPropertiesLoose(_React$useContext5, _excluded11);
-
-  return /*#__PURE__*/React.createElement(Reakit.MenuGroup, Object.assign({
-    ref: ref
-  }, props, state, {
+const MenuGroup = /*#__PURE__*/polymorphicComponent(function MenuGroup(_ref5, ref) {
+  let {
+    label,
+    children,
+    exceptionallySetClassName
+  } = _ref5,
+      props = _objectWithoutProperties(_ref5, _excluded5$1);
+
+  const {
+    state
+  } = React.useContext(MenuContext);
+  return /*#__PURE__*/React.createElement(Ariakit.MenuGroup, _objectSpread2(_objectSpread2({}, props), {}, {
+    ref: ref,
+    state: state,
     className: exceptionallySetClassName
   }), label ? /*#__PURE__*/React.createElement("div", {
     role: "presentation",
@@ -3470,58 +3349,51 @@ var MenuGroup = /*#__PURE__*/polymorphicComponent(function MenuGroud(_ref7, ref)
 
 /** @deprecated */
 
-var Box$2 = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(Box, _React$Component);
-
-  function Box() {
-    var _this;
-
-    _this = _React$Component.apply(this, arguments) || this;
+class Box$2 extends React__default.Component {
+  constructor(...args) {
+    super(...args);
 
-    _this._closeModal = function () {
+    this._closeModal = () => {
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      var modalElement = document.getElementById('modal_box');
+      const modalElement = document.getElementById('modal_box');
       ReactDOM.unmountComponentAtNode(modalElement);
     };
 
-    _this._handleKeyDown = function (event) {
+    this._handleKeyDown = event => {
       if (event.keyCode === 27) {
         // ESC
-        _this._closeModal();
+        this._closeModal();
 
         if (event.preventDefault) event.preventDefault();
       }
     };
 
-    _this._handleOverlayClick = function (event) {
+    this._handleOverlayClick = event => {
       if (event.target instanceof Element && (event.target.id === 'reactist-overlay' || event.target.id === 'reactist-overlay-inner')) {
-        _this._closeModal();
+        this._closeModal();
       }
     };
-
-    return _this;
   }
 
-  var _proto = Box.prototype;
-
-  _proto.componentDidMount = function componentDidMount() {
+  componentDidMount() {
     window.addEventListener('keydown', this._handleKeyDown);
-  };
+  }
 
-  _proto.componentWillUnmount = function componentWillUnmount() {
+  componentWillUnmount() {
     window.removeEventListener('keydown', this._handleKeyDown);
-  };
+  }
 
-  _proto.render = function render() {
-    var _this$props = this.props,
-        large = _this$props.large,
-        medium = _this$props.medium,
-        style = _this$props.style,
-        children = _this$props.children,
-        closeOnOverlayClick = _this$props.closeOnOverlayClick;
-    var className = classNames('reactist_modal_box', {
-      large: large,
-      medium: medium
+  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",
@@ -3534,11 +3406,12 @@ var Box$2 = /*#__PURE__*/function (_React$Component) {
       style: style,
       className: className
     }, children)));
-  };
+  }
 
-  return Box;
-}(React__default.Component);
+}
 
+Box$2.displayName = void 0;
+Box$2.defaultProps = void 0;
 Box$2.displayName = 'Modal.Box';
 Box$2.defaultProps = {
   large: false,
@@ -3546,16 +3419,8 @@ Box$2.defaultProps = {
 };
 /** @deprecated */
 
-var Header = /*#__PURE__*/function (_React$Component2) {
-  _inheritsLoose(Header, _React$Component2);
-
-  function Header() {
-    return _React$Component2.apply(this, arguments) || this;
-  }
-
-  var _proto2 = Header.prototype;
-
-  _proto2._closeModal = function _closeModal(event) {
+class Header extends React__default.Component {
+  _closeModal(event) {
     event.preventDefault();
 
     if (typeof this.props.beforeClose === 'function') {
@@ -3563,11 +3428,11 @@ var Header = /*#__PURE__*/function (_React$Component2) {
     } // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 
 
-    var modalElement = document.getElementById('modal_box');
+    const modalElement = document.getElementById('modal_box');
     ReactDOM.unmountComponentAtNode(modalElement);
-  };
+  }
 
-  _proto2.render = function render() {
+  render() {
     return (
       /*#__PURE__*/
 
@@ -3586,39 +3451,33 @@ var Header = /*#__PURE__*/function (_React$Component2) {
       /* eslint-enable jsx-a11y/anchor-is-valid */
 
     );
-  };
+  }
 
-  return Header;
-}(React__default.Component);
+}
 
+Header.displayName = void 0;
+Header.defaultProps = void 0;
 Header.displayName = 'Modal.Header';
 /** @deprecated */
 
-var Body$1 = /*#__PURE__*/function (_React$Component3) {
-  _inheritsLoose(Body, _React$Component3);
-
-  function Body() {
-    return _React$Component3.apply(this, arguments) || this;
-  }
-
-  var _proto3 = Body.prototype;
-
-  _proto3._closeModal = function _closeModal(event) {
+class Body$1 extends React__default.Component {
+  _closeModal(event) {
     event.preventDefault(); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 
-    var modalElement = document.getElementById('modal_box');
+    const modalElement = document.getElementById('modal_box');
     ReactDOM.unmountComponentAtNode(modalElement);
-  };
+  }
 
-  _proto3.render = function render() {
-    var _this$props2 = this.props,
-        icon = _this$props2.icon,
-        plain = _this$props2.plain,
-        children = _this$props2.children,
-        style = _this$props2.style,
-        showCloseIcon = _this$props2.showCloseIcon;
-    var className = classNames('reactist_modal_box__body', {
-      plain: plain
+  render() {
+    const {
+      icon,
+      plain,
+      children,
+      style,
+      showCloseIcon
+    } = this.props;
+    const className = classNames('reactist_modal_box__body', {
+      plain
     }, this.props.className);
     return (
       /*#__PURE__*/
@@ -3641,49 +3500,38 @@ var Body$1 = /*#__PURE__*/function (_React$Component3) {
       /* eslint-enable jsx-a11y/anchor-is-valid */
 
     );
-  };
+  }
 
-  return Body;
-}(React__default.Component);
+}
 
+Body$1.displayName = void 0;
+Body$1.defaultProps = void 0;
 Body$1.displayName = 'Modal.Body';
 Body$1.defaultProps = {
   showCloseIcon: false
 };
 /** @deprecated */
 
-var Actions = /*#__PURE__*/function (_React$Component4) {
-  _inheritsLoose(Actions, _React$Component4);
-
-  function Actions() {
-    return _React$Component4.apply(this, arguments) || this;
-  }
-
-  var _proto4 = Actions.prototype;
-
-  _proto4._onClick = function _onClick(onClick) {
+class Actions extends React__default.Component {
+  _onClick(onClick) {
     if (onClick) {
       onClick();
     } // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 
 
-    var modalElement = document.getElementById('modal_box');
+    const modalElement = document.getElementById('modal_box');
     ReactDOM.unmountComponentAtNode(modalElement);
-  };
-
-  _proto4.render = function render() {
-    var _this2 = this;
+  }
 
-    var children = React__default.Children.map( // see: https://github.com/microsoft/TypeScript/issues/21699
+  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, function (child) {
+    this.props.children, child => {
       var _child$props;
 
-      if (child !== null && child !== void 0 && (_child$props = child.props) !== null && _child$props !== void 0 && _child$props.close) {
+      if (child != null && (_child$props = child.props) != null && _child$props.close) {
         return /*#__PURE__*/React__default.cloneElement(child, {
-          onClick: function onClick() {
-            return _this2._onClick(child.props.onClick);
-          }
+          onClick: () => this._onClick(child.props.onClick)
         });
       } else {
         return child ? /*#__PURE__*/React__default.cloneElement(child) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
@@ -3692,32 +3540,29 @@ var Actions = /*#__PURE__*/function (_React$Component4) {
     return /*#__PURE__*/React__default.createElement("div", {
       className: "reactist_modal_box__actions"
     }, children);
-  };
+  }
 
-  return Actions;
-}(React__default.Component);
+}
 
+Actions.displayName = void 0;
 Actions.displayName = 'Modal.Actions';
 
 var index = {
   Box: Box$2,
-  Header: Header,
+  Header,
   Body: Body$1,
-  Actions: Actions
+  Actions
 };
 
 /** @deprecated */
 
-function Loading$1(_ref) {
-  var className = _ref.className,
-      _ref$spinnerColor = _ref.spinnerColor,
-      spinnerColor = _ref$spinnerColor === void 0 ? '#3F82EF' : _ref$spinnerColor,
-      _ref$bgColor = _ref.bgColor,
-      bgColor = _ref$bgColor === void 0 ? '#D9E6FB' : _ref$bgColor,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 24 : _ref$size,
-      _ref$ariaLabel = _ref['aria-label'],
-      ariaLabel = _ref$ariaLabel === void 0 ? 'Loading' : _ref$ariaLabel;
+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,