@doist/reactist 11.0.0 → 11.3.0

package/dist/reactist.cjs.development.js

@@ -196,7 +196,7 @@ function mapResponsiveProp(fromValue, mapper) {
   };
 }
 
-var modules_54d944f2 = {"box":"_2a8ae321","position-absolute":"_29e047b9","position-fixed":"fe54fea9","position-relative":"_6a95a38d","position-sticky":"ccc689fe","tablet-position-absolute":"aad88ae1","tablet-position-fixed":"_2044ccd3","tablet-position-relative":"a0904035","tablet-position-sticky":"_770506a5","desktop-position-absolute":"_5a954855","desktop-position-fixed":"_2dc73359","desktop-position-relative":"_6ab005ed","desktop-position-sticky":"fa60c726","display-block":"_221ad6a3","display-flex":"_6764f5bc","display-inline":"_50c37dba","display-inlineBlock":"_16546fe0","display-inlineFlex":"_2782a687","display-none":"b70b4fb7","tablet-display-block":"_5b3547cc","tablet-display-flex":"_099432e6","tablet-display-inline":"d99fcd80","tablet-display-inlineBlock":"_8f160568","tablet-display-inlineFlex":"_5b7b4be4","tablet-display-none":"_553721f8","desktop-display-block":"_6b86b317","desktop-display-flex":"eb20eda4","desktop-display-inline":"be19d1e9","desktop-display-inlineBlock":"dcf7c80a","desktop-display-inlineFlex":"e4f02b1f","desktop-display-none":"_3974e6d8","flexDirection-column":"daf5e366","flexDirection-row":"_47f2ddb7","tablet-flexDirection-column":"_27490d54","tablet-flexDirection-row":"_0317f51b","desktop-flexDirection-column":"_97590faa","desktop-flexDirection-row":"bf5d416e","flexWrap-wrap":"_210c1f9e","flexWrap-nowrap":"_2c775d07","flexShrink-0":"_25cae61d","flexGrow-0":"_6068a9cf","flexGrow-1":"c63f682c","alignItems-flexStart":"_0e774dfc","alignItems-center":"_5695a5d5","alignItems-flexEnd":"_139515d8","alignItems-baseline":"cea92f0a","tablet-alignItems-flexStart":"_3dc7ec16","tablet-alignItems-center":"_7993a7fa","tablet-alignItems-flexEnd":"b90d7edc","tablet-alignItems-baseline":"_7bd633f1","desktop-alignItems-flexStart":"_260d232b","desktop-alignItems-center":"_9e2e0a07","desktop-alignItems-flexEnd":"fc97448b","desktop-alignItems-baseline":"_0f76a529","justifyContent-flexStart":"_21d759bf","justifyContent-center":"ff70e049","justifyContent-flexEnd":"ae15d5ad","justifyContent-spaceAround":"_84374266","justifyContent-spaceBetween":"e72a8ca2","justifyContent-spaceEvenly":"_86224cb5","tablet-justifyContent-flexStart":"dceedee0","tablet-justifyContent-center":"_34ab3dab","tablet-justifyContent-flexEnd":"d5da2eb9","tablet-justifyContent-spaceAround":"_1677560d","tablet-justifyContent-spaceBetween":"ef77b2e7","tablet-justifyContent-spaceEvenly":"_685ef848","desktop-justifyContent-flexStart":"_695667f2","desktop-justifyContent-center":"ebb180cc","desktop-justifyContent-flexEnd":"bd5bb675","desktop-justifyContent-spaceBetween":"ae08a70c","overflow-hidden":"_4afa6fac","overflow-auto":"d8d342e4","overflow-visible":"c104da68","overflow-scroll":"_2d6bc0d0","height-full":"_99458759","bg-default":"aadb417c","bg-aside":"_36dca662","bg-highlight":"a1054115","bg-selected":"d17b4e9a","borderRadius-standard":"e3a3ee05","borderRadius-full":"be0cb60b","border-primary":"b9999f44","border-secondary":"_91063996","border-tertiary":"_0902977e","textAlign-start":"a7c58898","textAlign-center":"_2c9a262a","textAlign-end":"_46f07e93","textAlign-justify":"e526003e","tablet-textAlign-start":"_26864fce","tablet-textAlign-center":"e8f51d21","tablet-textAlign-end":"c1dc8b90","tablet-textAlign-justify":"_36bb3fa9","desktop-textAlign-start":"_942e35b0","desktop-textAlign-center":"_92da5c98","desktop-textAlign-end":"_2b0ecaf6","desktop-textAlign-justify":"_3dd24641"};
+var modules_54d944f2 = {"box":"f9408a0e","position-absolute":"_7807dcdd","position-fixed":"dc5f328c","position-relative":"_0e4ff085","position-sticky":"_4019d94a","tablet-position-absolute":"b1865c0f","tablet-position-fixed":"af8c5967","tablet-position-relative":"ef2b609f","tablet-position-sticky":"_04935ffd","desktop-position-absolute":"bda94091","desktop-position-fixed":"_691dfd31","desktop-position-relative":"efda904e","desktop-position-sticky":"bcf04687","display-block":"b5b9f34a","display-flex":"_6e9db9aa","display-inline":"ece6d246","display-inlineBlock":"e5e2223f","display-inlineFlex":"f344a0e2","display-none":"_9002f8c2","tablet-display-block":"d896f0ff","tablet-display-flex":"_56412665","tablet-display-inline":"_6b430cc5","tablet-display-inlineBlock":"_4158c5ad","tablet-display-inlineFlex":"c598eaab","tablet-display-none":"_5a2a6d3f","desktop-display-block":"_132ef8fb","desktop-display-flex":"_5bd11385","desktop-display-inline":"a51c2ec9","desktop-display-inlineBlock":"_93506988","desktop-display-inlineFlex":"_385d45a5","desktop-display-none":"_921732eb","flexDirection-column":"_41ef5755","flexDirection-row":"_6cad1a19","tablet-flexDirection-column":"f1c16205","tablet-flexDirection-row":"_65305ae1","desktop-flexDirection-column":"_4916f0f9","desktop-flexDirection-row":"_430dfc8e","flexWrap-wrap":"_3d2d56fe","flexWrap-nowrap":"_826e4adf","flexShrink-0":"f8344e0f","flexGrow-0":"f117e2ab","flexGrow-1":"_1355325c","alignItems-flexStart":"c5b05c6a","alignItems-center":"_21b8bafa","alignItems-flexEnd":"_56d73c9b","alignItems-baseline":"_052e0707","tablet-alignItems-flexStart":"_90048c98","tablet-alignItems-center":"_7e189a0b","tablet-alignItems-flexEnd":"b8aefb5c","tablet-alignItems-baseline":"_4c1a5ef9","desktop-alignItems-flexStart":"f4d052ef","desktop-alignItems-center":"e5478926","desktop-alignItems-flexEnd":"b4f5051a","desktop-alignItems-baseline":"b21adace","justifyContent-flexStart":"be6deb6a","justifyContent-center":"d8eaf780","justifyContent-flexEnd":"_9212ca89","justifyContent-spaceAround":"_5d2cd095","justifyContent-spaceBetween":"_00d5fe7e","justifyContent-spaceEvenly":"ce4f4c2d","tablet-justifyContent-flexStart":"_6580dbbc","tablet-justifyContent-center":"_3f689891","tablet-justifyContent-flexEnd":"_628df8db","tablet-justifyContent-spaceAround":"_3ea88b4f","tablet-justifyContent-spaceBetween":"_4554d93d","tablet-justifyContent-spaceEvenly":"eb13fb50","desktop-justifyContent-flexStart":"_36dc744d","desktop-justifyContent-center":"ee7077ab","desktop-justifyContent-flexEnd":"_4edc8c86","desktop-justifyContent-spaceBetween":"_7e147696","alignSelf-stretch":"c0655cd6","alignSelf-flexStart":"_11863030","alignSelf-center":"c6d86139","alignSelf-flexEnd":"c0bd1f82","alignSelf-baseline":"_95686aec","tablet-alignSelf-stretch":"_9b712cc7","tablet-alignSelf-flexStart":"f7b935f7","tablet-alignSelf-center":"bf9ad125","tablet-alignSelf-flexEnd":"_3b4f8c3c","tablet-alignSelf-baseline":"_49d27079","desktop-alignSelf-stretch":"_63d27ffa","desktop-alignSelf-flexStart":"d45796cc","desktop-alignSelf-center":"c91c7bf7","desktop-alignSelf-flexEnd":"f2453212","desktop-alignSelf-baseline":"_3882757c","overflow-hidden":"_473810b4","overflow-auto":"_051c2340","overflow-visible":"_14e451d1","overflow-scroll":"_4d8555f8","height-full":"_867d251e","bg-default":"_2d928bf8","bg-aside":"db3f5af6","bg-highlight":"c990fcc3","bg-selected":"_976a662f","borderRadius-standard":"_46b52f05","borderRadius-full":"_1c8b326b","border-primary":"_0ef8c314","border-secondary":"_14871605","border-tertiary":"_36c045c3","textAlign-start":"d745aa1e","textAlign-center":"_31cf99c5","textAlign-end":"_10a7a030","textAlign-justify":"_2cfc8b46","tablet-textAlign-start":"e6b7bb40","tablet-textAlign-center":"_47dcb91c","tablet-textAlign-end":"_1d4011ce","tablet-textAlign-justify":"_18407499","desktop-textAlign-start":"_565de5cf","desktop-textAlign-center":"_64254ba3","desktop-textAlign-end":"_3cc6a504","desktop-textAlign-justify":"_0efec659"};
 
 var modules_b537a8ee = {"paddingTop-xsmall":"c4803194","paddingTop-small":"_4e9ab24b","paddingTop-medium":"_1d226e27","paddingTop-large":"eb6097f1","paddingTop-xlarge":"d3229ba4","paddingTop-xxlarge":"_47978ba4","tablet-paddingTop-xsmall":"f987719c","tablet-paddingTop-small":"_8dbc4b4d","tablet-paddingTop-medium":"ae44fe07","tablet-paddingTop-large":"ffe9548d","tablet-paddingTop-xlarge":"f2b76a44","tablet-paddingTop-xxlarge":"c6eb8f43","desktop-paddingTop-xsmall":"_8699b560","desktop-paddingTop-small":"_02c374b7","desktop-paddingTop-medium":"_0dd0332f","desktop-paddingTop-large":"da55f1f6","desktop-paddingTop-xlarge":"_8ef2a278","desktop-paddingTop-xxlarge":"_8b493b28","paddingRight-xsmall":"_211eebc7","paddingRight-small":"ad0ccf15","paddingRight-medium":"a03e39af","paddingRight-large":"f0941ead","paddingRight-xlarge":"e47c5a43","paddingRight-xxlarge":"e849a5cf","tablet-paddingRight-xsmall":"_85374228","tablet-paddingRight-small":"_89df37b9","tablet-paddingRight-medium":"_1cc50ebe","tablet-paddingRight-large":"_1060982b","tablet-paddingRight-xlarge":"be58847d","tablet-paddingRight-xxlarge":"_45093484","desktop-paddingRight-xsmall":"f8d99d6a","desktop-paddingRight-small":"efa076d9","desktop-paddingRight-medium":"e59caa64","desktop-paddingRight-large":"da42f46a","desktop-paddingRight-xlarge":"b3ee2580","desktop-paddingRight-xxlarge":"_3ef94658","paddingBottom-xsmall":"b0e6eab4","paddingBottom-small":"_9510d053","paddingBottom-medium":"d7af60c9","paddingBottom-large":"b75f86cd","paddingBottom-xlarge":"fbd4ce29","paddingBottom-xxlarge":"_33e3ad63","tablet-paddingBottom-xsmall":"f0302da7","tablet-paddingBottom-small":"_4f9b8012","tablet-paddingBottom-medium":"_4333e20e","tablet-paddingBottom-large":"_30bbc76c","tablet-paddingBottom-xlarge":"ba5a4008","tablet-paddingBottom-xxlarge":"_423a3b1a","desktop-paddingBottom-xsmall":"b40139b7","desktop-paddingBottom-small":"f96071fa","desktop-paddingBottom-medium":"fe803c9a","desktop-paddingBottom-large":"_01686eb9","desktop-paddingBottom-xlarge":"afa763d8","desktop-paddingBottom-xxlarge":"a95785f1","paddingLeft-xsmall":"cad4e2ec","paddingLeft-small":"d70b3c17","paddingLeft-medium":"_8c851bd6","paddingLeft-large":"_078feb3c","paddingLeft-xlarge":"_76ab968c","paddingLeft-xxlarge":"aaca85d7","tablet-paddingLeft-xsmall":"_5eb0e5aa","tablet-paddingLeft-small":"_0384fb4f","tablet-paddingLeft-medium":"edffff6f","tablet-paddingLeft-large":"_873b9a46","tablet-paddingLeft-xlarge":"_89105db5","tablet-paddingLeft-xxlarge":"db1966fe","desktop-paddingLeft-xsmall":"b17f826b","desktop-paddingLeft-small":"_6dc83610","desktop-paddingLeft-medium":"_3421b8b2","desktop-paddingLeft-large":"_68cec7a6","desktop-paddingLeft-xlarge":"_94bde020","desktop-paddingLeft-xxlarge":"b94ee579"};
 
@@ -204,7 +204,7 @@ 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", "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 _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) {
   var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9;
 
@@ -220,6 +220,7 @@ var Box = /*#__PURE__*/polymorphicComponent(function Box(_ref, ref) {
       flexShrink = _ref.flexShrink,
       alignItems = _ref.alignItems,
       justifyContent = _ref.justifyContent,
+      alignSelf = _ref.alignSelf,
       overflow = _ref.overflow,
       width = _ref.width,
       height = _ref.height,
@@ -228,8 +229,7 @@ var Box = /*#__PURE__*/polymorphicComponent(function Box(_ref, ref) {
       borderRadius = _ref.borderRadius,
       minWidth = _ref.minWidth,
       maxWidth = _ref.maxWidth,
-      _ref$textAlign = _ref.textAlign,
-      textAlign = _ref$textAlign === void 0 ? 'start' : _ref$textAlign,
+      textAlign = _ref.textAlign,
       padding = _ref.padding,
       paddingY = _ref.paddingY,
       paddingX = _ref.paddingX,
@@ -258,10 +258,10 @@ var Box = /*#__PURE__*/polymorphicComponent(function Box(_ref, ref) {
   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';
   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), textAlign !== 'start' ? getClassNames(modules_54d944f2, 'textAlign', textAlign) : null, // padding
+    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), flexShrink != null ? getClassNames(modules_54d944f2, 'flexShrink', String(flexShrink)) : null, flexGrow != null ? getClassNames(modules_54d944f2, 'flexGrow', String(flexGrow)) : null, // other 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
   }), children);
@@ -348,7 +348,7 @@ var Inline = /*#__PURE__*/polymorphicComponent(function Inline(_ref, ref) {
       exceptionallySetClassName = _ref.exceptionallySetClassName,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
-  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
     as: as,
     display: "flex",
     flexWrap: "wrap",
@@ -360,7 +360,7 @@ var Inline = /*#__PURE__*/polymorphicComponent(function Inline(_ref, ref) {
     justifyContent: mapResponsiveProp(align, function (align) {
       return align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : 'center';
     })
-  }), children));
+  }), 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"};
@@ -462,7 +462,240 @@ var HiddenVisually = /*#__PURE__*/polymorphicComponent(function HiddenVisually(p
   }));
 });
 
-var _excluded$6 = ["tone"];
+var _excluded$6 = ["children", "content", "position", "gapSize", "className"];
+
+var SHOW_DELAY = 500;
+var 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]);
+}
+
+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({
+    placement: position,
+    gutter: gapSize
+  });
+  var child = React__default.Children.only(children);
+
+  if (!content) {
+    return child;
+  }
+  /**
+   * Prevents the tooltip from automatically firing on focus all the time. This is to prevent
+   * tooltips from showing when the trigger element is focused back after a popover or dialog that
+   * it opened was closed. See link below for more details.
+   * @see https://github.com/reakit/reakit/discussions/749
+   */
+
+
+  function handleFocus(event) {
+    // If focus is not followed by a key up event, does it mean that it's not
+    // an intentional keyboard focus? Not sure but it seems to work.
+    // 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;
+
+      if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {
+        tooltip.show();
+      }
+    }
+
+    event.currentTarget.addEventListener('keyup', handleKeyUp, {
+      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);
+  }
+
+  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, {
+    onFocus: handleFocus
+  }), function (referenceProps) {
+    return /*#__PURE__*/React__default.cloneElement(child, referenceProps);
+  }), tooltip.visible ? /*#__PURE__*/React__default.createElement(Tooltip$1.Tooltip, Object.assign({}, tooltip, props, {
+    className: classNames('reactist_tooltip', className)
+  }), typeof content === 'function' ? content() : content) : null);
+}
+// Internal helpers
+//
+
+/**
+ * Returns a function offering the same interface as setTimeout, but cleans up on unmount.
+ *
+ * The timeout state is shared, and only one delayed function can be active at any given time. If
+ * a new delayed function is called while another one was waiting for its time to run, that older
+ * invocation is cleared and it never runs.
+ *
+ * This is suitable for our use case here, but probably not the most intuitive thing in general.
+ * That's why this is not made a shared util or something like it.
+ */
+
+function useDelay() {
+  var timeoutRef = React__default.useRef();
+  var 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]);
+  return React__default.useCallback(function delay(fn, delay) {
+    return function () {
+      clearTimeouts();
+      timeoutRef.current = setTimeout(fn, delay);
+    };
+  }, [clearTimeouts]);
+}
+
+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;
+  return /*#__PURE__*/React.createElement("svg", {
+    "aria-hidden": true,
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    className: modules_c7f5018f.svg
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "nonzero"
+  }, /*#__PURE__*/React.createElement("path", {
+    className: modules_c7f5018f.tint,
+    d: "M17.945 3.958A9.955 9.955 0 0 0 12 2c-2.19 0-4.217.705-5.865 1.9L5.131 2.16A11.945 11.945 0 0 1 12 0c2.59 0 4.99.82 6.95 2.217l-1.005 1.741z"
+  }), /*#__PURE__*/React.createElement("path", {
+    className: modules_c7f5018f.fill,
+    d: "M5.13 2.16L6.136 3.9A9.987 9.987 0 0 0 2 12c0 5.523 4.477 10 10 10s10-4.477 10-10a9.986 9.986 0 0 0-4.055-8.042l1.006-1.741A11.985 11.985 0 0 1 24 12c0 6.627-5.373 12-12 12S0 18.627 0 12c0-4.073 2.029-7.671 5.13-9.84z"
+  })));
+}
+
+var modules_b9569bce = {"label":"_1f20c88a","baseButton":"_623015f3","size-small":"_062de645","size-normal":"_55e2a6a9","size-large":"cab32a7c","disabled":"e71c191a","iconButton":"_368efc16","startIcon":"d35389c1","endIcon":"_900d41d8","variant-primary":"_7c95e162","variant-secondary":"_9cb889aa","variant-tertiary":"_611b5b28","variant-quaternary":"_80c2bb84","tone-destructive":"ee13c455"};
+
+var _excluded$7 = ["as", "variant", "tone", "size", "disabled", "loading", "tooltip", "tooltipGapSize", "onClick", "exceptionallySetClassName", "children", "startIcon", "endIcon", "icon"];
+
+function preventDefault(event) {
+  event.preventDefault();
+}
+/**
+ * The component that powers `Button` and `ButtonLink`, where the button styling logic and some
+ * common functionality resides. This component is internal to Reactist.
+ *
+ * @see Button
+ * @see ButtonLink
+ */
+
+
+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,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+
+  var isDisabled = loading || disabled;
+  var buttonElement = /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
+    as: as,
+    ref: ref,
+    "aria-disabled": isDisabled,
+    onClick: isDisabled ? preventDefault : onClick,
+    className: [exceptionallySetClassName, modules_b9569bce.baseButton, modules_b9569bce["variant-" + variant], modules_b9569bce["tone-" + tone], modules_b9569bce["size-" + size], icon ? modules_b9569bce.iconButton : null, disabled ? modules_b9569bce.disabled : null]
+  }), icon ? loading && /*#__PURE__*/React.createElement(Spinner, null) || icon : /*#__PURE__*/React.createElement(React.Fragment, null, startIcon ? /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    className: modules_b9569bce.startIcon,
+    "aria-hidden": true
+  }, loading && !endIcon ? /*#__PURE__*/React.createElement(Spinner, null) : startIcon) : null, children ? /*#__PURE__*/React.createElement("span", {
+    className: modules_b9569bce.label
+  }, children) : null, endIcon || loading && !startIcon ? /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    className: modules_b9569bce.endIcon,
+    "aria-hidden": true
+  }, loading ? /*#__PURE__*/React.createElement(Spinner, null) : endIcon) : null)); // If it's an icon-only button, make sure it uses the aria-label as tooltip if no tooltip was provided
+
+  var tooltipContent = icon ? tooltip !== null && tooltip !== void 0 ? 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"];
+/**
+ * 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).
+ *
+ * @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, {
+    as: "button",
+    ref: ref,
+    variant: variant,
+    tone: tone,
+    size: size,
+    type: type,
+    disabled: disabled,
+    exceptionallySetClassName: exceptionallySetClassName
+  }));
+});
+
+var _excluded$9 = ["tone"];
 var alertIconForTone = {
   info: AlertInfoIcon,
   positive: AlertPositiveIcon,
@@ -472,7 +705,7 @@ var alertIconForTone = {
 
 function AlertIcon(_ref) {
   var tone = _ref.tone,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
 
   var Icon = alertIconForTone[tone];
   return Icon ? /*#__PURE__*/React.createElement(Icon, Object.assign({}, props)) : null;
@@ -545,7 +778,7 @@ function CloseIcon(props) {
   }));
 }
 
-var modules_6205a58e = {"container":"ad19f859","tone-info":"_7fd19074","tone-positive":"b6504efb","tone-caution":"_1668c1a3","tone-critical":"_59663dff"};
+var modules_6205a58e = {"container":"eb665121","tone-info":"d0373ff9","tone-positive":"bb18dcab","tone-caution":"_0af02331","tone-critical":"f76146f9"};
 
 function Alert(_ref) {
   var id = _ref.id,
@@ -557,7 +790,7 @@ function Alert(_ref) {
     id: id,
     role: "alert",
     "aria-live": "polite",
-    padding: "small",
+    borderRadius: "standard",
     className: [modules_6205a58e.container, getClassNames(modules_6205a58e, 'tone', tone)]
   }, /*#__PURE__*/React.createElement(Columns, {
     space: "small",
@@ -566,39 +799,25 @@ function Alert(_ref) {
     width: "content"
   }, /*#__PURE__*/React.createElement(AlertIcon, {
     tone: tone
-  })), /*#__PURE__*/React.createElement(Column, null, children), onClose != null ? /*#__PURE__*/React.createElement(Column, {
+  })), /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(Box, {
+    paddingY: "xsmall",
+    paddingRight: onClose != null && closeLabel != null ? undefined : 'small'
+  }, children)), onClose != null && closeLabel != null ? /*#__PURE__*/React.createElement(Column, {
     width: "content"
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "quaternary",
+    size: "small",
     onClick: onClose,
-    "aria-label": closeLabel
-  }, /*#__PURE__*/React.createElement(CloseIcon, null))) : null));
-}
-
-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;
-  return /*#__PURE__*/React.createElement("svg", {
-    "aria-hidden": true,
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    className: modules_c7f5018f.svg
-  }, /*#__PURE__*/React.createElement("g", {
-    fill: "none",
-    fillRule: "nonzero"
-  }, /*#__PURE__*/React.createElement("path", {
-    className: modules_c7f5018f.tint,
-    d: "M17.945 3.958A9.955 9.955 0 0 0 12 2c-2.19 0-4.217.705-5.865 1.9L5.131 2.16A11.945 11.945 0 0 1 12 0c2.59 0 4.99.82 6.95 2.217l-1.005 1.741z"
-  }), /*#__PURE__*/React.createElement("path", {
-    className: modules_c7f5018f.fill,
-    d: "M5.13 2.16L6.136 3.9A9.987 9.987 0 0 0 2 12c0 5.523 4.477 10 10 10s10-4.477 10-10a9.986 9.986 0 0 0-4.055-8.042l1.006-1.741A11.985 11.985 0 0 1 24 12c0 6.627-5.373 12-12 12S0 18.627 0 12c0-4.073 2.029-7.671 5.13-9.84z"
-  })));
+    "aria-label": closeLabel,
+    icon: /*#__PURE__*/React.createElement(CloseIcon, null),
+    style: {
+      // @ts-expect-error not sure how to make TypeScript understand custom CSS properties
+      '--reactist-btn-hover-fill': 'transparent'
+    }
+  })) : null));
 }
 
-var _excluded$7 = ["size", "exceptionallySetClassName"];
+var _excluded$a = ["size", "exceptionallySetClassName"];
 var sizeMapping = {
   small: 24,
   medium: 36,
@@ -611,7 +830,7 @@ function Loading(_ref) {
   var _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'small' : _ref$size,
       exceptionallySetClassName = _ref.exceptionallySetClassName,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+      props = _objectWithoutPropertiesLoose(_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;
@@ -646,12 +865,14 @@ function Notice(_ref) {
     width: "content"
   }, /*#__PURE__*/React.createElement(AlertIcon, {
     tone: tone
-  })), /*#__PURE__*/React.createElement(Column, null, children)));
+  })), /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(Box, {
+    paddingY: "xsmall"
+  }, children))));
 }
 
-var modules_949d2ff4 = {"heading":"_2f45487c","weight-light":"a20cbde9","tone-secondary":"_75f44518","tone-danger":"_3952cc59","size-largest":"b71d22ef","size-larger":"f15346e2","size-smaller":"_3cae1428","lineClampMultipleLines":"_347f6fcd","lineClamp-1":"_895c0b16","lineClamp-2":"_2e4808bd","lineClamp-3":"_1bdb7bdc","lineClamp-4":"_159943ea","lineClamp-5":"e44e008d"};
+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$8 = ["level", "weight", "size", "tone", "children", "lineClamp", "align", "exceptionallySetClassName"];
+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,
@@ -663,7 +884,7 @@ var Heading = /*#__PURE__*/React.forwardRef(function Heading(_ref, ref) {
       lineClamp = _ref.lineClamp,
       align = _ref.align,
       exceptionallySetClassName = _ref.exceptionallySetClassName,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+      props = _objectWithoutPropertiesLoose(_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
@@ -680,9 +901,9 @@ var Heading = /*#__PURE__*/React.forwardRef(function Heading(_ref, ref) {
   }), children);
 });
 
-var modules_a9637dd3 = {"text":"c12d1277","size-caption":"c88e1204","size-copy":"_426d67ec","size-subtitle":"f978d6c7","weight-semibold":"_0c31eccd","weight-bold":"aba17bdd","tone-secondary":"_2767b43d","tone-danger":"e8ae531e","lineClampMultipleLines":"dc839422","lineClamp-1":"e2d23135","lineClamp-2":"_7c778b7e","lineClamp-3":"_5ff41166","lineClamp-4":"b7a4998e","lineClamp-5":"_6a7f8803"};
+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$9 = ["as", "size", "weight", "tone", "align", "children", "lineClamp", "exceptionallySetClassName"];
+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,
@@ -695,7 +916,7 @@ var Text = /*#__PURE__*/polymorphicComponent(function Text(_ref, ref) {
       children = _ref.children,
       lineClamp = _ref.lineClamp,
       exceptionallySetClassName = _ref.exceptionallySetClassName,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+      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, {
@@ -709,225 +930,11 @@ var Text = /*#__PURE__*/polymorphicComponent(function Text(_ref, ref) {
   }), children);
 });
 
-var _excluded$a = ["children", "content", "position", "gapSize", "className"];
-
-var SHOW_DELAY = 500;
-var 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]);
-}
-
-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$a);
-
-  var tooltip = useDelayedTooltipState({
-    placement: position,
-    gutter: gapSize
-  });
-  var child = React__default.Children.only(children);
-
-  if (!content) {
-    return child;
-  }
-  /**
-   * Prevents the tooltip from automatically firing on focus all the time. This is to prevent
-   * tooltips from showing when the trigger element is focused back after a popover or dialog that
-   * it opened was closed. See link below for more details.
-   * @see https://github.com/reakit/reakit/discussions/749
-   */
-
-
-  function handleFocus(event) {
-    // If focus is not followed by a key up event, does it mean that it's not
-    // an intentional keyboard focus? Not sure but it seems to work.
-    // 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;
-
-      if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {
-        tooltip.show();
-      }
-    }
-
-    event.currentTarget.addEventListener('keyup', handleKeyUp, {
-      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);
-  }
-
-  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, {
-    onFocus: handleFocus
-  }), function (referenceProps) {
-    return /*#__PURE__*/React__default.cloneElement(child, referenceProps);
-  }), tooltip.visible ? /*#__PURE__*/React__default.createElement(Tooltip$1.Tooltip, Object.assign({}, tooltip, props, {
-    className: classNames('reactist_tooltip', className)
-  }), typeof content === 'function' ? content() : content) : null);
-}
-// Internal helpers
-//
-
-/**
- * Returns a function offering the same interface as setTimeout, but cleans up on unmount.
- *
- * The timeout state is shared, and only one delayed function can be active at any given time. If
- * a new delayed function is called while another one was waiting for its time to run, that older
- * invocation is cleared and it never runs.
- *
- * This is suitable for our use case here, but probably not the most intuitive thing in general.
- * That's why this is not made a shared util or something like it.
- */
-
-function useDelay() {
-  var timeoutRef = React__default.useRef();
-  var 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]);
-  return React__default.useCallback(function delay(fn, delay) {
-    return function () {
-      clearTimeouts();
-      timeoutRef.current = setTimeout(fn, delay);
-    };
-  }, [clearTimeouts]);
-}
-
-var modules_b9569bce = {"label":"_1f20c88a","baseButton":"_623015f3","size-small":"_062de645","size-normal":"_55e2a6a9","size-large":"cab32a7c","disabled":"e71c191a","iconButton":"_368efc16","startIcon":"d35389c1","endIcon":"_900d41d8","variant-primary":"_7c95e162","variant-secondary":"_9cb889aa","variant-tertiary":"_611b5b28","variant-quaternary":"_80c2bb84","tone-destructive":"ee13c455"};
-
-var _excluded$b = ["as", "variant", "tone", "size", "disabled", "loading", "tooltip", "onClick", "exceptionallySetClassName", "children", "startIcon", "endIcon", "icon"];
-
-function preventDefault(event) {
-  event.preventDefault();
-}
-/**
- * The component that powers `Button` and `ButtonLink`, where the button styling logic and some
- * common functionality resides. This component is internal to Reactist.
- *
- * 🎨 [Figma](https://www.figma.com/file/LYlWNzvhMDh907l07mPPQk/Product-Web?node-id=4693%3A175143)
- *
- * @see Button
- * @see ButtonLink
- */
-
-
-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,
-      onClick = _ref.onClick,
-      exceptionallySetClassName = _ref.exceptionallySetClassName,
-      children = _ref.children,
-      startIcon = _ref.startIcon,
-      endIcon = _ref.endIcon,
-      icon = _ref.icon,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
-
-  var isDisabled = loading || disabled;
-  var buttonElement = /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
-    as: as,
-    ref: ref,
-    "aria-disabled": isDisabled,
-    onClick: isDisabled ? preventDefault : onClick,
-    className: [exceptionallySetClassName, modules_b9569bce.baseButton, modules_b9569bce["variant-" + variant], modules_b9569bce["tone-" + tone], modules_b9569bce["size-" + size], icon ? modules_b9569bce.iconButton : null, disabled ? modules_b9569bce.disabled : null]
-  }), icon ? loading && /*#__PURE__*/React.createElement(Spinner, null) || icon : /*#__PURE__*/React.createElement(React.Fragment, null, startIcon ? /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    className: modules_b9569bce.startIcon,
-    "aria-hidden": true
-  }, loading && !endIcon ? /*#__PURE__*/React.createElement(Spinner, null) : startIcon) : null, children ? /*#__PURE__*/React.createElement("span", {
-    className: modules_b9569bce.label
-  }, children) : null, endIcon || loading && !startIcon ? /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    className: modules_b9569bce.endIcon,
-    "aria-hidden": true
-  }, loading ? /*#__PURE__*/React.createElement(Spinner, null) : endIcon) : null)); // If it's an icon-only button, make sure it uses the aria-label as tooltip if no tooltip was provided
-
-  var tooltipContent = icon ? tooltip !== null && tooltip !== void 0 ? tooltip : props['aria-label'] : tooltip;
-  return tooltipContent ? /*#__PURE__*/React.createElement(Tooltip, {
-    content: tooltipContent
-  }, buttonElement) : buttonElement;
-});
-
-var _excluded$c = ["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).
- *
- * 🎨 [Figma](https://www.figma.com/file/LYlWNzvhMDh907l07mPPQk/Product-Web?node-id=4693%3A175143)
- *
- * @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$c);
-
-  return /*#__PURE__*/React.createElement(BaseButton, Object.assign({}, props, {
-    as: "button",
-    ref: ref,
-    variant: variant,
-    tone: tone,
-    size: size,
-    type: type,
-    disabled: disabled,
-    exceptionallySetClassName: exceptionallySetClassName
-  }));
-});
-
 var _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.
  *
- *🎨 [Figma](https://www.figma.com/file/LYlWNzvhMDh907l07mPPQk/Product-Web?node-id=4693%3A175143)
- *
  * @see Button
  */
 
@@ -956,7 +963,7 @@ var ButtonLink = /*#__PURE__*/polymorphicComponent(function ButtonLink(_ref, ref
   }));
 });
 
-var modules_3d05deee = {"container":"_12eda218"};
+var modules_3d05deee = {"container":"b55607a1"};
 
 var _excluded$e = ["as", "openInNewTab", "exceptionallySetClassName"];
 var TextLink = /*#__PURE__*/polymorphicComponent(function TextLink(_ref, ref) {
@@ -1516,7 +1523,7 @@ function usePrevious(value) {
   return ref.current;
 }
 
-var modules_40c67f5b = {"tab":"_7cdcd0b6","tab-normal":"af6705d0","tab-primary":"ad705020","tab-secondary":"_69a2043b","tab-tertiary":"_5b695667","tab-plain":"_88d3dc5e"};
+var modules_40c67f5b = {"tab":"bae5f7d8","tab-normal":"ad3e25c3","tab-primary":"_3a9a0bad","tab-secondary":"_143d4b7d","tab-tertiary":"c9c5d77d","tab-plain":"_92c440c0"};
 
 var _excluded$m = ["color", "variant"],
     _excluded2$1 = ["children", "space"],
@@ -1737,7 +1744,7 @@ function ModalCloseButton(props) {
 
   var _React$useState = React.useState(false),
       includeInTabOrder = _React$useState[0],
-      setincludeInTabOrder = _React$useState[1];
+      setIncludeInTabOrder = _React$useState[1];
 
   var _React$useState2 = React.useState(false),
       isMounted = _React$useState2[0],
@@ -1745,7 +1752,7 @@ function ModalCloseButton(props) {
 
   React.useEffect(function skipAutoFocus() {
     if (isMounted) {
-      setincludeInTabOrder(true);
+      setIncludeInTabOrder(true);
     } else {
       setIsMounted(true);
     }
@@ -1785,13 +1792,14 @@ function ModalHeader(_ref2) {
     alignY: "center"
   }, /*#__PURE__*/React.createElement(Column, {
     width: "auto"
-  }, children), /*#__PURE__*/React.createElement(Column, {
+  }, children), button === false || button === null ? null : /*#__PURE__*/React.createElement(Column, {
     width: "content",
-    exceptionallySetClassName: modules_8f59d13b.buttonContainer
-  }, typeof button !== 'boolean' ? button : button === true ? /*#__PURE__*/React.createElement(ModalCloseButton, {
+    exceptionallySetClassName: modules_8f59d13b.buttonContainer,
+    "data-testid": "button-container"
+  }, typeof button === 'boolean' ? /*#__PURE__*/React.createElement(ModalCloseButton, {
     "aria-label": "Close modal",
     autoFocus: false
-  }) : null))), withDivider ? /*#__PURE__*/React.createElement(Divider, null) : null);
+  }) : button))), withDivider ? /*#__PURE__*/React.createElement(Divider, null) : null);
 }
 /**
  * Renders the body of a modal.
@@ -1844,10 +1852,7 @@ function ModalFooter(_ref4) {
     className: exceptionallySetClassName,
     padding: "large"
   })));
-} //
-// ModalActions
-//
-
+}
 /**
  * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).
  * @see ModalFooter
@@ -1860,9 +1865,7 @@ function ModalActions(_ref5) {
   return /*#__PURE__*/React.createElement(ModalFooter, Object.assign({}, props), /*#__PURE__*/React.createElement(Inline, {
     align: "right",
     space: "large"
-  }, React.Children.map(children, function (child) {
-    return /*#__PURE__*/React.createElement("div", null, child);
-  })));
+  }, children));
 }
 
 function getInitials(name) {
@@ -1889,8 +1892,10 @@ function emailToIndex(email, maxIndex) {
   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'];
-var AVATAR_SIZES = ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'];
 
 function Avatar(_ref) {
   var user = _ref.user,
@@ -1899,20 +1904,23 @@ function Avatar(_ref) {
       size = _ref$size === void 0 ? 'l' : _ref$size,
       className = _ref.className,
       _ref$colorList = _ref.colorList,
-      colorList = _ref$colorList === void 0 ? AVATAR_COLORS : _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 && AVATAR_SIZES.includes(size) ? size : 'l';
-  var avatarClass = classNames("reactist_avatar reactist_avatar_size--" + avatarSize, className);
+  var avatarSize = size ? size : 'l';
   var style = avatarUrl ? {
     backgroundImage: "url(" + avatarUrl + ")",
     textIndent: '-9999px'
   } : {
     backgroundColor: colorList[emailToIndex(user.email, colorList.length)]
   };
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: avatarClass,
+  var sizeClassName = getClassNames(modules_08f3eeac, 'size', avatarSize);
+  return /*#__PURE__*/React__default.createElement(Box, Object.assign({
+    className: [className, modules_08f3eeac.avatar, sizeClassName, exceptionallySetClassName],
     style: style
-  }, userInitials);
+  }, props), userInitials);
 }
 
 Avatar.displayName = 'Avatar';
@@ -1939,7 +1947,7 @@ function Checkbox(_ref) {
 
 Checkbox.displayName = 'Checkbox';
 
-var _excluded$o = ["type", "variant", "size", "loading", "disabled", "tooltip", "onClick", "children"];
+var _excluded$p = ["type", "variant", "size", "loading", "disabled", "tooltip", "onClick", "children"];
 /**
  * @deprecated
  */
@@ -1957,7 +1965,7 @@ var Button$1 = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref)
       tooltip = _ref.tooltip,
       onClick = _ref.onClick,
       children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
 
   var className = classNames('reactist_button', variant ? "reactist_button--" + variant : null, size !== 'default' ? "reactist_button--" + size : null, {
     'reactist_button--loading': loading
@@ -1980,7 +1988,7 @@ Button$1.defaultProps = {
   disabled: false
 };
 
-var _excluded$p = ["children", "onClick", "tooltip", "className"];
+var _excluded$q = ["children", "onClick", "tooltip", "className"];
 
 var Box$1 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Box, _React$Component);
@@ -2132,7 +2140,7 @@ var Trigger = /*#__PURE__*/React__default.forwardRef(function Trigger(_ref, ref)
       onClick = _ref.onClick,
       tooltip = _ref.tooltip,
       className = _ref.className,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
 
   function handleClick(event) {
     event.preventDefault();
@@ -2269,7 +2277,7 @@ var Input = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
 });
 Input.displayName = 'Input';
 
-var _excluded$q = ["children", "className", "translateKey", "isMac"];
+var _excluded$r = ["children", "className", "translateKey", "isMac"];
 // Support for setting up how to translate modifiers globally.
 //
 
@@ -2353,7 +2361,7 @@ function KeyboardShortcut(_ref) {
       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$q);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
 
   var shortcuts = typeof children === 'string' ? [children] : children;
   return /*#__PURE__*/React.createElement("span", Object.assign({
@@ -2896,7 +2904,7 @@ function ProgressBar(_ref) {
 
 ProgressBar.displayName = 'ProgressBar';
 
-var _excluded$r = ["value", "options", "onChange", "disabled", "className", "defaultValue"];
+var _excluded$s = ["value", "options", "onChange", "disabled", "className", "defaultValue"];
 
 function Select(_ref) {
   var value = _ref.value,
@@ -2908,7 +2916,7 @@ function Select(_ref) {
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
       defaultValue = _ref.defaultValue,
-      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$s);
 
   var selectClassName = classNames('reactist_select', {
     disabled: disabled
@@ -3164,7 +3172,7 @@ var CloseIcon$1 = function CloseIcon() {
   }));
 };
 
-var _excluded$s = ["id", "icon", "title", "subtitle", "children", "customCloseButton", "onClick", "onClose", "closeAltText", "className", "aria-live"];
+var _excluded$t = ["id", "icon", "title", "subtitle", "children", "customCloseButton", "onClick", "onClose", "closeAltText", "className", "aria-live"];
 
 function Notification(_ref) {
   var id = _ref.id,
@@ -3180,7 +3188,7 @@ function Notification(_ref) {
       className = _ref.className,
       _ref$ariaLive = _ref['aria-live'],
       ariaLive = _ref$ariaLive === void 0 ? 'polite' : _ref$ariaLive,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$t);
 
   var titleId = title ? id + "-title" : null;
   var titleIdAttribute = titleId ? {
@@ -3230,7 +3238,7 @@ function Notification(_ref) {
   }, customCloseButton !== null && customCloseButton !== void 0 ? customCloseButton : /*#__PURE__*/React__default.createElement(CloseIcon$1, null)) : null);
 }
 
-var _excluded$t = ["children", "onItemSelect"],
+var _excluded$u = ["children", "onItemSelect"],
     _excluded2$3 = ["exceptionallySetClassName"],
     _excluded3$2 = ["handleItemSelect"],
     _excluded4$2 = ["exceptionallySetClassName"],
@@ -3255,10 +3263,11 @@ var MenuContext = /*#__PURE__*/React.createContext( // Reakit gives us no means
 function Menu(_ref) {
   var children = _ref.children,
       onItemSelect = _ref.onItemSelect,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
 
   var state = Reakit.useMenuState(_objectSpread2({
-    loop: true
+    loop: true,
+    unstable_offset: [8, 8]
   }, props));
   var handleItemSelect = React.useCallback(function handleItemSelect(value) {
     if (onItemSelect) onItemSelect(value);