@doist/reactist 10.0.0-beta.1 → 10.0.0-beta.10

package/dist/reactist.cjs.development.js

@@ -8,9 +8,11 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var classNames = _interopDefault(require('classnames'));
 var flattenChildren = _interopDefault(require('react-keyed-flatten-children'));
-var reakitUtils = require('reakit-utils');
 var Tooltip$1 = require('reakit/Tooltip');
+var reakitUtils = require('reakit-utils');
 var Tab$1 = require('reakit/Tab');
+var dialog = require('@reach/dialog');
+var FocusLock = _interopDefault(require('react-focus-lock'));
 var ReactDOM = _interopDefault(require('react-dom'));
 var PropTypes = _interopDefault(require('prop-types'));
 var dayjs = _interopDefault(require('dayjs'));
@@ -109,9 +111,6 @@ function polymorphicComponent(render) {
   return /*#__PURE__*/React.forwardRef(render);
 }
 
-function isResponsivePropArray(responsiveProp) {
-  return Array.isArray(responsiveProp);
-}
 /**
  * Builds a css module class name for a given prop + prop-value combination.
  *
@@ -130,7 +129,6 @@ function isResponsivePropArray(responsiveProp) {
  * @param value the given prop's value
  */
 
-
 function getClassNames(styles, property, value) {
   if (!value) {
     return null;
@@ -138,14 +136,6 @@ function getClassNames(styles, property, value) {
 
   var classList = [];
 
-  if (isResponsivePropArray(value)) {
-    value = {
-      mobile: value[0],
-      tablet: value[1],
-      desktop: value[2]
-    };
-  }
-
   if (typeof value === 'string') {
     classList.push(styles[property + "-" + value]);
   } else {
@@ -186,14 +176,6 @@ function mapResponsiveProp(fromValue, mapper) {
     return mapper(fromValue);
   }
 
-  if (isResponsivePropArray(fromValue)) {
-    fromValue = {
-      mobile: fromValue[0],
-      tablet: fromValue[1],
-      desktop: fromValue[2]
-    };
-  }
-
   return {
     mobile: fromValue.mobile ? mapper(fromValue.mobile) : undefined,
     tablet: fromValue.tablet ? mapper(fromValue.tablet) : undefined,
@@ -201,7 +183,7 @@ function mapResponsiveProp(fromValue, mapper) {
   };
 }
 
-var modules_54d944f2 = {"box":"a09dcadd","position-absolute":"_2c8e3b30","position-fixed":"_8bae4d9e","position-relative":"b8a56665","position-sticky":"ac1fb233","tablet-position-absolute":"_1b62ab32","tablet-position-fixed":"_64c4c82f","tablet-position-relative":"_0a54ed39","tablet-position-sticky":"_3d6c1112","desktop-position-absolute":"_588ab5f7","desktop-position-fixed":"cafee9d3","desktop-position-relative":"_5543b61e","desktop-position-sticky":"b1c159cc","display-block":"ff9b5262","display-flex":"_42dd2b38","display-inline":"f7f27044","display-inlineBlock":"b1865bfc","display-inlineFlex":"_41fd8594","display-none":"_56d89280","tablet-display-block":"_17e08c5b","tablet-display-flex":"_3f5b2c55","tablet-display-inline":"_782df251","tablet-display-inlineBlock":"_5fd4b849","tablet-display-inlineFlex":"d23d32dc","tablet-display-none":"_204387f1","desktop-display-block":"_7294a740","desktop-display-flex":"c3786325","desktop-display-inline":"abe84853","desktop-display-inlineBlock":"_659a3c11","desktop-display-inlineFlex":"_66853d40","desktop-display-none":"bfb0df33","minWidth-0":"_0688f863","minWidth-xsmall":"cf3c7c4d","minWidth-small":"ab997cf2","minWidth-medium":"_42b40675","minWidth-large":"_820eddb2","minWidth-xlarge":"_9050c057","maxWidth-xsmall":"_45b5d9f3","maxWidth-small":"f6e39c80","maxWidth-medium":"_38e08e0f","maxWidth-large":"cfab6cbf","maxWidth-xlarge":"c64ac49c","maxWidth-full":"f2bdc36e","flexDirection-column":"ea553c4c","flexDirection-row":"_35c0f923","tablet-flexDirection-column":"ca082ff1","tablet-flexDirection-row":"_4699259f","desktop-flexDirection-column":"_7e15076c","desktop-flexDirection-row":"_301f1bcd","flexWrap-wrap":"ae1c1355","flexWrap-nowrap":"_10c2f307","flexShrink-0":"_0ea6f62c","flexGrow-0":"_0d73a72b","flexGrow-1":"f1d88ded","alignItems-flexStart":"_957aa705","alignItems-center":"c2380527","alignItems-flexEnd":"_5bd61684","alignItems-baseline":"_219c8788","tablet-alignItems-flexStart":"_7380ef94","tablet-alignItems-center":"e3bf5e08","tablet-alignItems-flexEnd":"_07d7b9df","tablet-alignItems-baseline":"a18d059c","desktop-alignItems-flexStart":"_02f174d6","desktop-alignItems-center":"_17cd4647","desktop-alignItems-flexEnd":"_7c8acb96","desktop-alignItems-baseline":"fbaa5c82","justifyContent-flexStart":"b36b35c0","justifyContent-center":"_28989ab3","justifyContent-flexEnd":"_2a0b33ed","justifyContent-spaceBetween":"_413854f1","tablet-justifyContent-flexStart":"bc886bc1","tablet-justifyContent-center":"_47e99e1f","tablet-justifyContent-flexEnd":"dcd5d747","tablet-justifyContent-spaceBetween":"f78dc694","desktop-justifyContent-flexStart":"_8af32248","desktop-justifyContent-center":"_76b92f39","desktop-justifyContent-flexEnd":"b10ab37c","desktop-justifyContent-spaceBetween":"df924fe5","overflow-hidden":"afcc1f85","overflow-auto":"b2daf955","overflow-visible":"_31cda334","overflow-scroll":"_48497a8e","width-full":"_14248731","height-full":"e0313003","bg-default":"beeba006","bg-aside":"_9765429c","bg-highlight":"f5a8d39a","bg-selected":"_376f320a","borderRadius-standard":"c811738c","borderRadius-full":"_8c612fbf","border-standard":"a8f6a58b"};
+var modules_54d944f2 = {"box":"_26c5201d","position-absolute":"_77c3d8d1","position-fixed":"_37cb98fb","position-relative":"df16028f","position-sticky":"_4205abac","tablet-position-absolute":"d6993b5e","tablet-position-fixed":"a015e0f5","tablet-position-relative":"_236dd3b1","tablet-position-sticky":"b7ac4837","desktop-position-absolute":"fd93a726","desktop-position-fixed":"_49228edc","desktop-position-relative":"d972b518","desktop-position-sticky":"b2a2baf3","display-block":"_22f1edd1","display-flex":"c23d2d6f","display-inline":"_5359896d","display-inlineBlock":"a54a41a6","display-inlineFlex":"d02f3d43","display-none":"_760c0710","tablet-display-block":"_64e2ebe6","tablet-display-flex":"_25274f78","tablet-display-inline":"_2077d063","tablet-display-inlineBlock":"aaed581f","tablet-display-inlineFlex":"_1d4a6eb5","tablet-display-none":"_66f24c78","desktop-display-block":"_145cca89","desktop-display-flex":"_1861c899","desktop-display-inline":"_96a720c8","desktop-display-inlineBlock":"_56acf5d5","desktop-display-inlineFlex":"_2a268e4b","desktop-display-none":"b4f30b9e","minWidth-0":"_0b071847","minWidth-xsmall":"_8b67f007","minWidth-small":"e3ec3474","minWidth-medium":"_5cccd4fc","minWidth-large":"_06eeac65","minWidth-xlarge":"ee1b6344","maxWidth-xsmall":"_2df097d0","maxWidth-small":"b771df2a","maxWidth-medium":"_00ad4e35","maxWidth-large":"_4a848dab","maxWidth-xlarge":"bf216b15","maxWidth-full":"a60a7855","flexDirection-column":"_4cf1b6c9","flexDirection-row":"e056fa5a","tablet-flexDirection-column":"b9aa8d99","tablet-flexDirection-row":"_2e8b3442","desktop-flexDirection-column":"_2162c612","desktop-flexDirection-row":"_279bf1e4","flexWrap-wrap":"_346d3a71","flexWrap-nowrap":"_786fd122","flexShrink-0":"_4b864fc2","flexGrow-0":"_795f552f","flexGrow-1":"a68bcd0f","alignItems-flexStart":"_34e24973","alignItems-center":"_648380f4","alignItems-flexEnd":"_18b4e1d6","alignItems-baseline":"_805c1b65","tablet-alignItems-flexStart":"fd4006c2","tablet-alignItems-center":"c3ba10a7","tablet-alignItems-flexEnd":"_984cd304","tablet-alignItems-baseline":"_696cc167","desktop-alignItems-flexStart":"_74133d54","desktop-alignItems-center":"_92ab46df","desktop-alignItems-flexEnd":"_177026d9","desktop-alignItems-baseline":"ebd2f31f","justifyContent-flexStart":"_4969235b","justifyContent-center":"_9594db58","justifyContent-flexEnd":"_6789fdd3","justifyContent-spaceAround":"b9902d94","justifyContent-spaceBetween":"_3c3ae41b","justifyContent-spaceEvenly":"_8dce8767","tablet-justifyContent-flexStart":"_6bd82354","tablet-justifyContent-center":"_3044c29a","tablet-justifyContent-flexEnd":"_13da8745","tablet-justifyContent-spaceAround":"_981fa9c8","tablet-justifyContent-spaceBetween":"d34811a6","tablet-justifyContent-spaceEvenly":"_53e07124","desktop-justifyContent-flexStart":"e709f277","desktop-justifyContent-center":"abc87cc4","desktop-justifyContent-flexEnd":"ce410292","desktop-justifyContent-spaceBetween":"_5ab1bc04","overflow-hidden":"_11a684c0","overflow-auto":"_2c024f85","overflow-visible":"_4d4892bd","overflow-scroll":"_22ffbb40","width-full":"_330d9b0b","height-full":"fb8deb05","bg-default":"_133f5c00","bg-aside":"b2be7ffe","bg-highlight":"a45e67ff","bg-selected":"b90226b5","borderRadius-standard":"_6e988219","borderRadius-full":"_14cf204e","border-primary":"a710cfdd","border-secondary":"_52263feb","border-tertiary":"_546ec3ef","textAlign-start":"_7fa90cb9","textAlign-center":"_54c80396","textAlign-end":"e4b1ea49","textAlign-justify":"_0eecd510","tablet-textAlign-start":"a309e75d","tablet-textAlign-center":"_67fb1a07","tablet-textAlign-end":"_0fa851ec","tablet-textAlign-justify":"_585a0e34","desktop-textAlign-start":"_5f909690","desktop-textAlign-center":"_13e03993","desktop-textAlign-end":"f142a1cb","desktop-textAlign-justify":"_2bba79a9"};
 
 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"};
 
@@ -214,8 +196,7 @@ var Box = /*#__PURE__*/polymorphicComponent(function Box(_ref, ref) {
       component = _ref$as === void 0 ? 'div' : _ref$as,
       _ref$position = _ref.position,
       position = _ref$position === void 0 ? 'static' : _ref$position,
-      _ref$display = _ref.display,
-      display = _ref$display === void 0 ? 'block' : _ref$display,
+      display = _ref.display,
       _ref$flexDirection = _ref.flexDirection,
       flexDirection = _ref$flexDirection === void 0 ? 'row' : _ref$flexDirection,
       flexWrap = _ref.flexWrap,
@@ -231,6 +212,8 @@ 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,
       padding = _ref.padding,
       paddingY = _ref.paddingY,
       paddingX = _ref.paddingX,
@@ -247,7 +230,7 @@ var Box = /*#__PURE__*/polymorphicComponent(function Box(_ref, ref) {
       marginLeft = _ref.marginLeft,
       className = _ref.className,
       children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, ["as", "position", "display", "flexDirection", "flexWrap", "flexGrow", "flexShrink", "alignItems", "justifyContent", "overflow", "width", "height", "background", "border", "borderRadius", "minWidth", "maxWidth", "padding", "paddingY", "paddingX", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "margin", "marginY", "marginX", "marginTop", "marginRight", "marginBottom", "marginLeft", "className", "children"]);
+      props = _objectWithoutPropertiesLoose(_ref, ["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 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;
@@ -257,9 +240,9 @@ var Box = /*#__PURE__*/polymorphicComponent(function Box(_ref, ref) {
   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 = typeof display === 'string' && display !== 'flex' && display !== 'inlineFlex';
+  var omitFlex = !display || typeof display === 'string' && display !== 'flex' && display !== 'inlineFlex';
   return /*#__PURE__*/React.createElement(component, _objectSpread2(_objectSpread2({}, props), {}, {
-    className: classNames(className, modules_54d944f2.box, getClassNames(modules_54d944f2, 'display', display), position !== 'static' ? getClassNames(modules_54d944f2, 'position', position) : null, minWidth != null ? getClassNames(modules_54d944f2, 'minWidth', String(minWidth)) : null, getClassNames(modules_54d944f2, 'maxWidth', maxWidth), // 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_54d944f2, 'minWidth', String(minWidth)) : null, getClassNames(modules_54d944f2, 'maxWidth', maxWidth), textAlign !== 'start' ? getClassNames(modules_54d944f2, 'textAlign', textAlign) : null, // 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
@@ -268,7 +251,7 @@ var Box = /*#__PURE__*/polymorphicComponent(function Box(_ref, ref) {
   }), children);
 });
 
-var modules_67f2d07a = {"space-xsmall":"bc73ab9d","column":"_7efa4861","space-small":"c93ef522","space-medium":"a3bcceae","space-large":"_6e3b6830","space-xlarge":"c8935f26","space-xxlarge":"_0f819fef","tablet-space-xsmall":"b37242bb","tablet-space-small":"bbdf9471","tablet-space-medium":"_66c6998d","tablet-space-large":"bce245a1","tablet-space-xlarge":"fdff6b7f","tablet-space-xxlarge":"e4ec3d8d","desktop-space-xsmall":"_4a75307e","desktop-space-small":"_97b495ec","desktop-space-medium":"be376830","desktop-space-large":"_9b3b7633","desktop-space-xlarge":"_791a2950","desktop-space-xxlarge":"f49836a3","columnWidth-auto":"a4c294e6","columnWidth-1-2":"de029ae3","columnWidth-1-3":"_102223f4","columnWidth-2-3":"_35209410","columnWidth-1-4":"_785d4274","columnWidth-3-4":"d4b300a7","columnWidth-1-5":"c7e02813","columnWidth-2-5":"d305894b","columnWidth-3-5":"_420612f0","columnWidth-4-5":"a9c44d9e","tablet-tablet-space-xsmall":"b8d9d8fb"};
+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 Column = /*#__PURE__*/polymorphicComponent(function Column(_ref, ref) {
   var _ref$width = _ref.width,
@@ -281,6 +264,7 @@ var Column = /*#__PURE__*/polymorphicComponent(function Column(_ref, ref) {
     className: [exceptionallySetClassName, modules_67f2d07a.column, width !== 'content' ? getClassNames(modules_67f2d07a, 'columnWidth', width.replace('/', '-')) : null],
     minWidth: 0,
     width: width !== 'content' ? 'full' : undefined,
+    height: "full",
     flexShrink: width === 'content' ? 0 : undefined,
     ref: ref
   }), children);
@@ -298,6 +282,7 @@ var Columns = /*#__PURE__*/polymorphicComponent(function Columns(_ref2, ref) {
 
   return /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
     className: [exceptionallySetClassName, getClassNames(modules_67f2d07a, 'space', space)],
+    display: "flex",
     flexDirection: collapseBelow === 'desktop' ? {
       mobile: 'column',
       tablet: 'column',
@@ -306,28 +291,26 @@ var Columns = /*#__PURE__*/polymorphicComponent(function Columns(_ref2, ref) {
       mobile: 'column',
       tablet: 'row'
     } : 'row',
-    display: "flex",
     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;
     }),
-    flexGrow: 1,
     ref: ref
   }), children);
 });
 
-var modules_c742c4d7 = {"divider":"_9b6c04bf","weight-strong":"_6354eb7c"};
+var modules_c742c4d7 = {"weight-primary":"_3f3a401c","weight-secondary":"_03b05b70","weight-tertiary":"b6f67ff8"};
 
 function Divider(_ref) {
   var _ref$weight = _ref.weight,
-      weight = _ref$weight === void 0 ? 'regular' : _ref$weight,
+      weight = _ref$weight === void 0 ? 'tertiary' : _ref$weight,
       props = _objectWithoutPropertiesLoose(_ref, ["weight"]);
 
   return /*#__PURE__*/React.createElement(Box, Object.assign({
     as: "hr",
-    className: [modules_c742c4d7.divider, weight !== 'regular' ? getClassNames(modules_c742c4d7, 'weight', weight) : null]
+    className: getClassNames(modules_c742c4d7, 'weight', weight)
   }, props));
 }
 
@@ -365,28 +348,28 @@ var Stack = /*#__PURE__*/polymorphicComponent(function Stack(_ref, ref) {
   var as = _ref.as,
       space = _ref.space,
       _ref$align = _ref.align,
-      align = _ref$align === void 0 ? 'left' : _ref$align,
+      align = _ref$align === void 0 ? 'start' : _ref$align,
       _ref$dividers = _ref.dividers,
-      dividers = _ref$dividers === void 0 ? false : _ref$dividers,
+      dividers = _ref$dividers === void 0 ? 'none' : _ref$dividers,
       children = _ref.children,
       exceptionallySetClassName = _ref.exceptionallySetClassName,
       props = _objectWithoutPropertiesLoose(_ref, ["as", "space", "align", "dividers", "children", "exceptionallySetClassName"]);
 
-  var alignProps = align === 'left' ? undefined : {
+  var alignProps = align === 'start' ? undefined : {
     width: 'full',
     flexDirection: 'column',
     display: 'flex',
     alignItems: mapResponsiveProp(align, function (align) {
-      return align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : 'center';
+      return align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center';
     })
   };
   return /*#__PURE__*/React.createElement(Box, Object.assign({}, props, alignProps, {
     as: as,
     className: [exceptionallySetClassName, getClassNames(modules_3af3b7ac, 'space', space)],
     ref: ref
-  }), dividers ? React.Children.map(flattenChildren(children), function (child, index) {
+  }), dividers !== 'none' ? React.Children.map(flattenChildren(children), function (child, index) {
     return index > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
-      weight: typeof dividers === 'string' ? dividers : undefined
+      weight: dividers
     }), child) : child;
   }) : children);
 });
@@ -568,7 +551,28 @@ function Alert(_ref) {
   }, /*#__PURE__*/React.createElement(CloseIcon, null))) : null));
 }
 
-var modules_aa6c8f31 = {"container":"ddb8bfab","spinner":"_01b03448","spinnerBackground":"_0d5f86cd"};
+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 sizeMapping = {
   small: 24,
@@ -576,30 +580,24 @@ var sizeMapping = {
   large: 48
 };
 
-function LoadingSpinner(_ref) {
+function Loading(_ref) {
+  var _sizeMapping$size;
+
   var _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'small' : _ref$size,
-      label = _ref.label;
-  var numericSize = sizeMapping[size];
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: modules_aa6c8f31.container,
-    "aria-label": label,
-    "aria-live": "polite",
-    role: "alert"
-  }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement("svg", {
-    width: numericSize,
-    height: numericSize,
-    viewBox: "0 0 24 24"
-  }, /*#__PURE__*/React__default.createElement("g", {
-    fill: "none",
-    fillRule: "nonzero"
-  }, /*#__PURE__*/React__default.createElement("path", {
-    className: modules_aa6c8f31.spinner,
-    d: "M17.945 3.958A9.955 9.955 0 0 0 12 2c-2.19 0-4.217.705-5.865 1.9L5.131 2.16A11.945 11.945 0 0 1 12 0c2.59 0 4.99.82 6.95 2.217l-1.005 1.741z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    className: modules_aa6c8f31.spinnerBackground,
-    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"
-  })))));
+      exceptionallySetClassName = _ref.exceptionallySetClassName,
+      props = _objectWithoutPropertiesLoose(_ref, ["size", "exceptionallySetClassName"]);
+
+  var numericSize = (_sizeMapping$size = sizeMapping[size]) !== null && _sizeMapping$size !== void 0 ? _sizeMapping$size : sizeMapping.small;
+  return /*#__PURE__*/React__default.createElement(Box, Object.assign({}, props, {
+    className: exceptionallySetClassName,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    role: "progressbar"
+  }), /*#__PURE__*/React__default.createElement(Spinner, {
+    size: numericSize
+  }));
 }
 
 var modules_1b547e7e = {"container":"_464500ae","tone-info":"_1abfe147","tone-positive":"_36ce9859","tone-caution":"f92214b7","tone-critical":"be6cf28e"};
@@ -623,7 +621,7 @@ function Notice(_ref) {
   })), /*#__PURE__*/React.createElement(Column, null, children)));
 }
 
-var modules_949d2ff4 = {"heading":"dc0d313f","weight-light":"_243fe799","tone-secondary":"cc7ebd5e","tone-danger":"_88837360","size-largest":"_8636903b","size-larger":"b8feff86","size-smaller":"_4ad45c57","line-clamp-1":"_57cacb08","lineClamp":"_03e5a21b","line-clamp-2":"_0ed29808","line-clamp-3":"_1952de13","line-clamp-4":"aed92dda","line-clamp-5":"cba31398"};
+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 Heading = /*#__PURE__*/React.forwardRef(function Heading(_ref, ref) {
   var level = _ref.level,
@@ -634,40 +632,46 @@ var Heading = /*#__PURE__*/React.forwardRef(function Heading(_ref, ref) {
       tone = _ref$tone === void 0 ? 'normal' : _ref$tone,
       children = _ref.children,
       lineClamp = _ref.lineClamp,
+      align = _ref.align,
       exceptionallySetClassName = _ref.exceptionallySetClassName,
-      props = _objectWithoutPropertiesLoose(_ref, ["level", "weight", "size", "tone", "children", "lineClamp", "exceptionallySetClassName"]);
+      props = _objectWithoutPropertiesLoose(_ref, ["level", "weight", "size", "tone", "children", "lineClamp", "align", "exceptionallySetClassName"]);
 
   // 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, {
-    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.lineClamp : null, lineClamp ? getClassNames(modules_949d2ff4, 'line-clamp', lineClamp.toString()) : null],
+    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
+    // See https://github.com/Doist/reactist/pull/528
+    paddingRight: lineClamp ? 'xsmall' : undefined,
     as: headingElementName,
     ref: ref
   }), children);
 });
 
-var modules_a9637dd3 = {"text":"_0724c018","size-caption":"_216ff235","size-copy":"_810cf668","size-body":"_5026d1c4","size-subtitle":"_0b7bc398","weight-semibold":"d83ee11d","weight-bold":"b82a428d","tone-secondary":"_6fe7945e","tone-danger":"b7e32ab7","line-clamp-1":"_90523093","lineClamp":"_27e07644","line-clamp-2":"cc75b41a","line-clamp-3":"_3cac2385","line-clamp-4":"d8ab7b00","line-clamp-5":"_6abe9042"};
+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 Text = /*#__PURE__*/polymorphicComponent(function Text(_ref, ref) {
-  var _ref$as = _ref.as,
-      as = _ref$as === void 0 ? 'span' : _ref$as,
+  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, ["as", "size", "weight", "tone", "children", "lineClamp", "exceptionallySetClassName"]);
+      props = _objectWithoutPropertiesLoose(_ref, ["as", "size", "weight", "tone", "align", "children", "lineClamp", "exceptionallySetClassName"]);
 
-  var lineClampMultipleLines = typeof lineClamp === 'string' ? parseInt(lineClamp, 10) > 1 : (lineClamp || 0) > 1;
+  var lineClampMultipleLines = typeof lineClamp === 'string' ? Number(lineClamp) > 1 : (lineClamp !== null && lineClamp !== void 0 ? lineClamp : 1) > 1;
   return /*#__PURE__*/React.createElement(Box, Object.assign({}, 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.lineClamp : null, lineClamp ? getClassNames(modules_a9637dd3, 'line-clamp', lineClamp.toString()) : null],
+    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,
     // Prevents emojis from being cut-off
     // See https://github.com/Doist/reactist/pull/528
     paddingRight: lineClamp ? 'xsmall' : undefined,
@@ -675,26 +679,242 @@ var Text = /*#__PURE__*/polymorphicComponent(function Text(_ref, ref) {
   }), children);
 });
 
-var modules_b0eaa640 = {"container":"e8c14f99"};
+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, ["children", "content", "position", "gapSize", "className"]);
+
+  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"};
+
+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, ["as", "variant", "tone", "size", "disabled", "loading", "tooltip", "onClick", "exceptionallySetClassName", "children", "startIcon", "endIcon", "icon"]);
+
+  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;
+});
+
+/**
+ * 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, ["variant", "tone", "size", "type", "disabled", "exceptionallySetClassName"]);
+
+  return /*#__PURE__*/React.createElement(BaseButton, Object.assign({}, props, {
+    as: "button",
+    ref: ref,
+    variant: variant,
+    tone: tone,
+    size: size,
+    type: type,
+    disabled: disabled,
+    exceptionallySetClassName: exceptionallySetClassName
+  }));
+});
+
+/**
+ * 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
+ */
 
 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 ? 'default' : _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,
-      exceptionallySetClassName = _ref.exceptionallySetClassName,
-      props = _objectWithoutPropertiesLoose(_ref, ["as", "variant", "size", "openInNewTab", "exceptionallySetClassName"]);
+      props = _objectWithoutPropertiesLoose(_ref, ["as", "variant", "tone", "size", "exceptionallySetClassName", "openInNewTab"]);
 
-  return /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(BaseButton, Object.assign({}, props, {
     as: as,
-    display: "inlineFlex",
-    alignItems: "center",
-    justifyContent: "center",
-    className: [exceptionallySetClassName, modules_b0eaa640.container, 'reactist_button', variant ? "reactist_button--" + variant : null, size !== 'default' ? "reactist_button--" + size : null],
     ref: ref,
+    variant: variant,
+    tone: tone,
+    size: size,
+    exceptionallySetClassName: exceptionallySetClassName,
     target: openInNewTab ? '_blank' : undefined,
     rel: openInNewTab ? 'noopener noreferrer' : undefined
   }));
@@ -775,7 +995,7 @@ function CheckboxIcon(_ref2) {
   }));
 }
 
-var modules_664a6a80 = {"container":"b9b36ef5","disabled":"_58e9fb09","checked":"_15f68109"};
+var modules_664a6a80 = {"container":"f9e0a1b8","disabled":"_01411889","checked":"ffdfd8fb"};
 
 var CheckboxField = /*#__PURE__*/React.forwardRef(function CheckboxField(_ref, ref) {
   var _ref2, _props$checked, _props$checked2;
@@ -834,124 +1054,13 @@ var CheckboxField = /*#__PURE__*/React.forwardRef(function CheckboxField(_ref, r
     checked: isChecked,
     indeterminate: indeterminate,
     disabled: disabled
-  }), label ? /*#__PURE__*/React.createElement("span", null, label) : null);
+  }), label ? /*#__PURE__*/React.createElement(Text, null, label) : null);
 });
 
-var SHOW_DELAY = 500;
-var HIDE_DELAY = 100;
+var uid = 0;
 
-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, ["children", "content", "position", "gapSize", "className"]);
-
-  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 uid = 0;
-
-function uniqueId() {
-  return uid++;
+function uniqueId() {
+  return uid++;
 }
 
 function generateElementId(prefix) {
@@ -968,7 +1077,7 @@ function useId(providedId) {
   return ref.current;
 }
 
-var modules_540a88ff = {"primaryLabel":"e4c83510","secondaryLabel":"be85c720","auxiliaryLabel":"_7e9cad91"};
+var modules_540a88ff = {"container":"ed7d894c","primaryLabel":"_22213081","secondaryLabel":"be8637dd","auxiliaryLabel":"_72b46ad5"};
 
 function FieldHint(props) {
   return /*#__PURE__*/React.createElement(Text, Object.assign({
@@ -995,7 +1104,7 @@ function BaseField(_ref) {
   return /*#__PURE__*/React.createElement(Stack, {
     space: "small"
   }, /*#__PURE__*/React.createElement(Box, {
-    className: className,
+    className: [className, modules_540a88ff.container],
     maxWidth: maxWidth,
     hidden: hidden
   }, /*#__PURE__*/React.createElement(Box, {
@@ -1071,7 +1180,7 @@ function PasswordHiddenIcon(props) {
 
 var modules_3f03ead6 = {"inputWrapper":"_460d581b"};
 
-var modules_aaf25250 = {"inputWrapper":"_0cc2c509"};
+var modules_aaf25250 = {"inputWrapper":"dd9ffeab"};
 
 var PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref, ref) {
   var label = _ref.label,
@@ -1134,7 +1243,7 @@ var PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref, r
   });
 });
 
-var modules_1fa9b208 = {"selectWrapper":"d259b5cb"};
+var modules_1fa9b208 = {"selectWrapper":"_828e09c5"};
 
 var SelectField = /*#__PURE__*/React.forwardRef(function SelectField(_ref, ref) {
   var id = _ref.id,
@@ -1180,7 +1289,7 @@ function SelectChevron(props) {
   }));
 }
 
-var modules_8e05f7c9 = {"container":"eed01ee8","disabled":"f1bb9c43","checked":"_93104a64","toggle":"_8fcd019a","label":"_975b23a7","handle":"a4cc2623"};
+var modules_8e05f7c9 = {"container":"_99a80509","disabled":"b5cf26ef","checked":"a63c43a2","toggle":"f318ae83","label":"_427926b9","handle":"_9fcd994c"};
 
 var SwitchField = /*#__PURE__*/React.forwardRef(function SwitchField(_ref, ref) {
   var _ref2, _props$checked, _props$checked2;
@@ -1236,14 +1345,14 @@ var SwitchField = /*#__PURE__*/React.forwardRef(function SwitchField(_ref, ref)
     }
   }))), /*#__PURE__*/React.createElement("span", {
     className: modules_8e05f7c9.handle
-  })), /*#__PURE__*/React.createElement("span", {
-    className: modules_8e05f7c9.label
+  })), /*#__PURE__*/React.createElement(Text, {
+    exceptionallySetClassName: modules_8e05f7c9.label
   }, label)), hint ? /*#__PURE__*/React.createElement(FieldHint, {
     id: hintId
   }, hint) : null);
 });
 
-var modules_2728c236 = {"container":"b2fe9429"};
+var modules_2728c236 = {"container":"_5a579f96"};
 
 function TextArea(_ref) {
   var id = _ref.id,
@@ -1323,7 +1432,7 @@ function usePrevious(value) {
   return ref.current;
 }
 
-var modules_40c67f5b = {"tab":"ce7a2c92","tab-normal":"_90aaabf7","tab-primary":"_6e0665d3","tab-secondary":"_9135146c","tab-tertiary":"e96fb06e","tab-plain":"f81d8e09"};
+var modules_40c67f5b = {"tab":"_7cdcd0b6","tab-normal":"af6705d0","tab-primary":"ad705020","tab-secondary":"_69a2043b","tab-tertiary":"_5b695667","tab-plain":"_88d3dc5e"};
 
 var TabsContext = /*#__PURE__*/React.createContext(null);
 /**
@@ -1365,7 +1474,6 @@ 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;
@@ -1388,7 +1496,6 @@ function Tab(_ref2) {
  * A component used to group `<Tab>` elements together.
  */
 
-
 function TabList(_ref3) {
   var children = _ref3.children,
       _ref3$space = _ref3.space,
@@ -1411,12 +1518,14 @@ function TabList(_ref3) {
  * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.
  */
 
-
-function TabPanel(_ref4) {
+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;
+      render = _ref4$render === void 0 ? 'always' : _ref4$render,
+      props = _objectWithoutPropertiesLoose(_ref4, ["children", "id", "as", "render"]);
+
   var tabContextValue = React.useContext(TabsContext);
 
   var _React$useState = React.useState(false),
@@ -1438,14 +1547,16 @@ function TabPanel(_ref4) {
 
   return /*#__PURE__*/React.createElement(Tab$1.TabPanel, Object.assign({
     tabId: id
-  }, tabState), render === 'always' ? children : null, render === 'active' && tabIsActive ? children : null, render === 'lazy' && (tabIsActive || tabRendered) ? children : null);
-}
+  }, tabState, props, {
+    as: as,
+    ref: ref
+  }), render === 'always' ? children : null, render === 'active' && tabIsActive ? children : null, render === 'lazy' && (tabIsActive || tabRendered) ? children : null);
+});
 /**
  * Allows content to be rendered based on the current tab being selected while outside of the TabPanel
  * component. Can be placed freely within the main `<Tabs>` component.
  */
 
-
 function TabAwareSlot(_ref5) {
   var children = _ref5.children;
   var tabContextValue = React.useContext(TabsContext);
@@ -1454,6 +1565,194 @@ function TabAwareSlot(_ref5) {
   }) : null;
 }
 
+var modules_8f59d13b = {"reach-portal":"_72b0d072","fadein":"_3ef30abf","fitContent":"_99107d2f","container":"badff007","medium":"_3b39110c","small":"fc325d7b","large":"_5751d6d0","overlay":"_0091d9c5","expand":"_52207af6","buttonContainer":"b97b958d"};
+
+var ModalContext = /*#__PURE__*/React.createContext({
+  onDismiss: undefined,
+  height: 'fitContent'
+});
+
+function isNotInternalFrame(element) {
+  return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe');
+}
+/**
+ * Renders a modal that sits on top of the rest of the content in the entire page.
+ *
+ * Follows the WAI-ARIA Dialog (Modal) Pattern.
+ *
+ * @see ModalHeader
+ * @see ModalFooter
+ * @see ModalBody
+ */
+
+
+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, ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "autoFocus", "children"]);
+
+  var contextValue = React.useMemo(function () {
+    return {
+      onDismiss: onDismiss,
+      height: height
+    };
+  }, [onDismiss, height]);
+  return /*#__PURE__*/React.createElement(dialog.DialogOverlay, {
+    isOpen: isOpen,
+    onDismiss: onDismiss,
+    dangerouslyBypassFocusLock // We're setting up our own focus lock below
+    : true,
+    className: classNames(modules_8f59d13b.overlay, modules_8f59d13b[height], modules_8f59d13b[width]),
+    "data-testid": "modal-overlay"
+  }, /*#__PURE__*/React.createElement(FocusLock, {
+    autoFocus: autoFocus,
+    whiteList: isNotInternalFrame
+  }, /*#__PURE__*/React.createElement(dialog.DialogContent, Object.assign({}, props, {
+    as: Box,
+    borderRadius: "full",
+    background: "default",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    height: height === 'expand' ? 'full' : undefined,
+    flexGrow: height === 'expand' ? 1 : 0,
+    className: [exceptionallySetClassName, modules_8f59d13b.container]
+  }), /*#__PURE__*/React.createElement(ModalContext.Provider, {
+    value: contextValue
+  }, children))));
+}
+/**
+ * The close button rendered by ModalHeader. Provided independently so that consumers can customize
+ * the button's label.
+ *
+ * @see ModalHeader
+ */
+
+function ModalCloseButton(props) {
+  var _React$useContext = React.useContext(ModalContext),
+      onDismiss = _React$useContext.onDismiss;
+
+  return /*#__PURE__*/React.createElement(Button, Object.assign({}, props, {
+    variant: "quaternary",
+    onClick: onDismiss,
+    icon: /*#__PURE__*/React.createElement(CloseIcon, null)
+  }));
+}
+/**
+ * Renders a standard modal header area with an optional close button.
+ *
+ * @see Modal
+ * @see ModalFooter
+ * @see ModalBody
+ */
+
+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, ["children", "button", "withDivider", "exceptionallySetClassName"]);
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
+    as: "header",
+    paddingLeft: "large",
+    paddingRight: "small",
+    paddingY: "small",
+    className: exceptionallySetClassName
+  }), /*#__PURE__*/React.createElement(Columns, {
+    space: "large",
+    alignY: "center"
+  }, /*#__PURE__*/React.createElement(Column, {
+    width: "auto"
+  }, children), /*#__PURE__*/React.createElement(Column, {
+    width: "content",
+    exceptionallySetClassName: modules_8f59d13b.buttonContainer
+  }, typeof button !== 'boolean' ? button : button === true ? /*#__PURE__*/React.createElement(ModalCloseButton, {
+    "aria-label": "Close modal"
+  }) : null))), withDivider ? /*#__PURE__*/React.createElement(Divider, null) : null);
+}
+/**
+ * Renders the body of a modal.
+ *
+ * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other
+ * things, that the contet of the modal body expands or contracts depending on the modal height
+ * setting or the size of the content. The body content also automatically scrolls when it's too
+ * large to fit the available space.
+ *
+ * @see Modal
+ * @see ModalHeader
+ * @see ModalFooter
+ */
+
+function ModalBody(_ref3) {
+  var exceptionallySetClassName = _ref3.exceptionallySetClassName,
+      children = _ref3.children,
+      props = _objectWithoutPropertiesLoose(_ref3, ["exceptionallySetClassName", "children"]);
+
+  var _React$useContext2 = React.useContext(ModalContext),
+      height = _React$useContext2.height;
+
+  return /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
+    className: exceptionallySetClassName,
+    flexGrow: height === 'expand' ? 1 : 0,
+    height: height === 'expand' ? 'full' : undefined,
+    overflow: "auto"
+  }), /*#__PURE__*/React.createElement(Box, {
+    padding: "large",
+    paddingBottom: "xxlarge"
+  }, children));
+}
+/**
+ * Renders a standard modal footer area.
+ *
+ * @see Modal
+ * @see ModalHeader
+ * @see ModalBody
+ */
+
+function ModalFooter(_ref4) {
+  var exceptionallySetClassName = _ref4.exceptionallySetClassName,
+      _ref4$withDivider = _ref4.withDivider,
+      withDivider = _ref4$withDivider === void 0 ? false : _ref4$withDivider,
+      props = _objectWithoutPropertiesLoose(_ref4, ["exceptionallySetClassName", "withDivider"]);
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, withDivider ? /*#__PURE__*/React.createElement(Divider, null) : null, /*#__PURE__*/React.createElement(Box, Object.assign({
+    as: "footer"
+  }, props, {
+    className: exceptionallySetClassName,
+    padding: "large"
+  })));
+} //
+// ModalActions
+//
+
+/**
+ * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).
+ * @see ModalFooter
+ */
+
+function ModalActions(_ref5) {
+  var children = _ref5.children,
+      props = _objectWithoutPropertiesLoose(_ref5, ["children"]);
+
+  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);
+  })));
+}
+
 function getInitials(name) {
   if (!name) {
     return '';
@@ -1506,7 +1805,33 @@ function Avatar(_ref) {
 
 Avatar.displayName = 'Avatar';
 
-var Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref) {
+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;
+  return /*#__PURE__*/React__default.createElement("label", {
+    className: "reactist_checkbox"
+  }, /*#__PURE__*/React__default.createElement("input", {
+    className: "reactist_checkbox--input",
+    value: label,
+    checked: checked,
+    disabled: disabled,
+    onChange: disabled || !onChange ? undefined : function (event) {
+      return onChange(event.target.checked);
+    },
+    type: "checkbox"
+  }), label);
+}
+
+Checkbox.displayName = 'Checkbox';
+
+/**
+ * @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,
@@ -1535,35 +1860,13 @@ var Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref) {
     content: tooltip
   }, button) : button;
 });
-Button.displayName = 'Button';
-Button.defaultProps = {
+Button$1.displayName = 'Button';
+Button$1.defaultProps = {
   size: 'default',
   loading: false,
   disabled: false
 };
 
-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;
-  return /*#__PURE__*/React__default.createElement("label", {
-    className: "reactist_checkbox"
-  }, /*#__PURE__*/React__default.createElement("input", {
-    className: "reactist_checkbox--input",
-    value: label,
-    checked: checked,
-    disabled: disabled,
-    onChange: disabled || !onChange ? undefined : function (event) {
-      return onChange(event.target.checked);
-    },
-    type: "checkbox"
-  }), label);
-}
-
-Checkbox.displayName = 'Checkbox';
-
 var Box$1 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Box, _React$Component);
 
@@ -1722,7 +2025,7 @@ var Trigger = /*#__PURE__*/React__default.forwardRef(function Trigger(_ref, ref)
     if (onClick) onClick(event);
   }
 
-  return /*#__PURE__*/React__default.createElement(Button, Object.assign({}, props, {
+  return /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, props, {
     className: classNames('trigger', className),
     onClick: handleClick,
     tooltip: tooltip,
@@ -2339,299 +2642,19 @@ function KeyCapturer(props) {
   return /*#__PURE__*/React__default.cloneElement(children, _objectSpread2((_objectSpread2$1 = {}, _objectSpread2$1[eventName] = handleKeyEvent, _objectSpread2$1), composingEventHandlers));
 }
 
-function Loading(_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;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classNames('reactist_loading', className),
-    "aria-label": ariaLabel,
-    "aria-live": "assertive",
-    role: "alert"
-  }, /*#__PURE__*/React__default.createElement("span", {
-    className: "reactist_loading--spinner"
-  }, /*#__PURE__*/React__default.createElement("svg", {
-    width: size,
-    height: size,
-    viewBox: '0 0 24 24'
-  }, /*#__PURE__*/React__default.createElement("g", {
-    fill: "none",
-    fillRule: "nonzero"
-  }, /*#__PURE__*/React__default.createElement("path", {
-    fill: spinnerColor,
-    d: "M17.945 3.958A9.955 9.955 0 0 0 12 2c-2.19 0-4.217.705-5.865 1.9L5.131 2.16A11.945 11.945 0 0 1 12 0c2.59 0 4.99.82 6.95 2.217l-1.005 1.741z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    fill: bgColor,
-    d: "M5.13 2.16L6.136 3.9A9.987 9.987 0 0 0 2 12c0 5.523 4.477 10 10 10s10-4.477 10-10a9.986 9.986 0 0 0-4.055-8.042l1.006-1.741A11.985 11.985 0 0 1 24 12c0 6.627-5.373 12-12 12S0 18.627 0 12c0-4.073 2.029-7.671 5.13-9.84z"
-  })))));
-}
+var hasEnoughSpace = function hasEnoughSpace(windowDimensions, elementDimensions, wrapperDimensions, wrapperPosition, position, gap) {
+  if (gap === void 0) {
+    gap = 0;
+  }
 
-Loading.displayName = 'Loading';
-
-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"
-  }));
-};
-
-var Box$2 = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(Box, _React$Component);
-
-  function Box() {
-    var _this;
-
-    _this = _React$Component.apply(this, arguments) || this;
-
-    _this._closeModal = function () {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      var modalElement = document.getElementById('modal_box');
-      ReactDOM.unmountComponentAtNode(modalElement);
-    };
-
-    _this._handleKeyDown = function (event) {
-      if (event.keyCode === 27) {
-        // ESC
-        _this._closeModal();
-
-        if (event.preventDefault) event.preventDefault();
-      }
-    };
-
-    _this._handleOverlayClick = function (event) {
-      if (event.target instanceof Element && (event.target.id === 'reactist-overlay' || event.target.id === 'reactist-overlay-inner')) {
-        _this._closeModal();
-      }
-    };
-
-    return _this;
-  }
-
-  var _proto = Box.prototype;
-
-  _proto.componentDidMount = function componentDidMount() {
-    window.addEventListener('keydown', this._handleKeyDown);
-  };
-
-  _proto.componentWillUnmount = function 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
-    }, this.props.className);
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "reactist_overlay",
-      id: "reactist-overlay",
-      onClick: closeOnOverlayClick ? this._handleOverlayClick : undefined
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "reactist_overlay_inner",
-      id: "reactist-overlay-inner"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      style: style,
-      className: className
-    }, children)));
-  };
-
-  return Box;
-}(React__default.Component);
-
-Box$2.displayName = 'Modal.Box';
-Box$2.defaultProps = {
-  large: false,
-  closeOnOverlayClick: false
-};
-
-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) {
-    event.preventDefault();
-
-    if (typeof this.props.beforeClose === 'function') {
-      this.props.beforeClose();
-    } // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-
-
-    var modalElement = document.getElementById('modal_box');
-    ReactDOM.unmountComponentAtNode(modalElement);
-  };
-
-  _proto2.render = function render() {
-    return (
-      /*#__PURE__*/
-
-      /* eslint-disable jsx-a11y/anchor-is-valid */
-      React__default.createElement("div", {
-        className: "reactist_modal_box__header"
-      }, /*#__PURE__*/React__default.createElement("p", null, this.props.title && /*#__PURE__*/React__default.createElement("span", {
-        className: "title"
-      }, this.props.title), this.props.subtitle && /*#__PURE__*/React__default.createElement("span", {
-        className: "subtitle"
-      }, this.props.subtitle), this.props.children), /*#__PURE__*/React__default.createElement("a", {
-        className: "close",
-        onClick: this._closeModal.bind(this),
-        href: "#"
-      }, /*#__PURE__*/React__default.createElement(CloseIcon$1, null)))
-      /* eslint-enable jsx-a11y/anchor-is-valid */
-
-    );
-  };
-
-  return Header;
-}(React__default.Component);
-
-Header.displayName = 'Modal.Header';
-
-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) {
-    event.preventDefault(); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-
-    var 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
-    }, this.props.className);
-    return (
-      /*#__PURE__*/
-
-      /* eslint-disable jsx-a11y/anchor-is-valid */
-      React__default.createElement("div", {
-        className: className,
-        style: style
-      }, showCloseIcon && /*#__PURE__*/React__default.createElement("a", {
-        className: "close",
-        onClick: this._closeModal.bind(this),
-        href: "#"
-      }, /*#__PURE__*/React__default.createElement(CloseIcon$1, null)), icon ? /*#__PURE__*/React__default.createElement("div", {
-        className: "dialog"
-      }, /*#__PURE__*/React__default.createElement("div", {
-        className: "reactist_icon"
-      }, icon), /*#__PURE__*/React__default.createElement("div", {
-        className: "content"
-      }, children)) : children)
-      /* eslint-enable jsx-a11y/anchor-is-valid */
-
-    );
-  };
-
-  return Body;
-}(React__default.Component);
-
-Body$1.displayName = 'Modal.Body';
-Body$1.defaultProps = {
-  showCloseIcon: false
-};
-
-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) {
-    if (onClick) {
-      onClick();
-    } // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-
-
-    var 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
-    // @ts-expect-error Children cannot be typed properly yet in React
-    this.props.children, function (child) {
-      var _child$props;
-
-      if (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.close) {
-        return /*#__PURE__*/React__default.cloneElement(child, {
-          onClick: function onClick() {
-            return _this2._onClick(child.props.onClick);
-          }
-        });
-      } else {
-        return child ? /*#__PURE__*/React__default.cloneElement(child) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
-      }
-    });
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "reactist_modal_box__actions"
-    }, children);
-  };
-
-  return Actions;
-}(React__default.Component);
-
-Actions.displayName = 'Modal.Actions';
-
-var index = {
-  Box: Box$2,
-  Header: Header,
-  Body: Body$1,
-  Actions: Actions
-};
-
-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;
+  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;
 
   var verticalPosition = _calculateVerticalPosition(wrapperPosition, wrapperDimensions, elementDimensions);
 
@@ -3307,10 +3330,22 @@ Tip.defaultProps = {
   top: false
 };
 
-function Notification(_ref) {
-  var id = _ref.id,
-      icon = _ref.icon,
-      title = _ref.title,
+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"
+  }));
+};
+
+function Notification(_ref) {
+  var id = _ref.id,
+      icon = _ref.icon,
+      title = _ref.title,
       subtitle = _ref.subtitle,
       children = _ref.children,
       customCloseButton = _ref.customCloseButton,
@@ -3574,6 +3609,281 @@ var MenuGroup = /*#__PURE__*/polymorphicComponent(function MenuGroud(_ref7, ref)
   }, label) : null, children);
 });
 
+/** @deprecated */
+
+var Box$2 = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Box, _React$Component);
+
+  function Box() {
+    var _this;
+
+    _this = _React$Component.apply(this, arguments) || this;
+
+    _this._closeModal = function () {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      var modalElement = document.getElementById('modal_box');
+      ReactDOM.unmountComponentAtNode(modalElement);
+    };
+
+    _this._handleKeyDown = function (event) {
+      if (event.keyCode === 27) {
+        // ESC
+        _this._closeModal();
+
+        if (event.preventDefault) event.preventDefault();
+      }
+    };
+
+    _this._handleOverlayClick = function (event) {
+      if (event.target instanceof Element && (event.target.id === 'reactist-overlay' || event.target.id === 'reactist-overlay-inner')) {
+        _this._closeModal();
+      }
+    };
+
+    return _this;
+  }
+
+  var _proto = Box.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    window.addEventListener('keydown', this._handleKeyDown);
+  };
+
+  _proto.componentWillUnmount = function 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
+    }, this.props.className);
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "reactist_overlay",
+      id: "reactist-overlay",
+      onClick: closeOnOverlayClick ? this._handleOverlayClick : undefined
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "reactist_overlay_inner",
+      id: "reactist-overlay-inner"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      style: style,
+      className: className
+    }, children)));
+  };
+
+  return Box;
+}(React__default.Component);
+
+Box$2.displayName = 'Modal.Box';
+Box$2.defaultProps = {
+  large: false,
+  closeOnOverlayClick: false
+};
+/** @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) {
+    event.preventDefault();
+
+    if (typeof this.props.beforeClose === 'function') {
+      this.props.beforeClose();
+    } // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
+
+    var modalElement = document.getElementById('modal_box');
+    ReactDOM.unmountComponentAtNode(modalElement);
+  };
+
+  _proto2.render = function render() {
+    return (
+      /*#__PURE__*/
+
+      /* eslint-disable jsx-a11y/anchor-is-valid */
+      React__default.createElement("div", {
+        className: "reactist_modal_box__header"
+      }, /*#__PURE__*/React__default.createElement("p", null, this.props.title && /*#__PURE__*/React__default.createElement("span", {
+        className: "title"
+      }, this.props.title), this.props.subtitle && /*#__PURE__*/React__default.createElement("span", {
+        className: "subtitle"
+      }, this.props.subtitle), this.props.children), /*#__PURE__*/React__default.createElement("a", {
+        className: "close",
+        onClick: this._closeModal.bind(this),
+        href: "#"
+      }, /*#__PURE__*/React__default.createElement(CloseIcon$1, null)))
+      /* eslint-enable jsx-a11y/anchor-is-valid */
+
+    );
+  };
+
+  return Header;
+}(React__default.Component);
+
+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) {
+    event.preventDefault(); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
+    var 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
+    }, this.props.className);
+    return (
+      /*#__PURE__*/
+
+      /* eslint-disable jsx-a11y/anchor-is-valid */
+      React__default.createElement("div", {
+        className: className,
+        style: style
+      }, showCloseIcon && /*#__PURE__*/React__default.createElement("a", {
+        className: "close",
+        onClick: this._closeModal.bind(this),
+        href: "#"
+      }, /*#__PURE__*/React__default.createElement(CloseIcon$1, null)), icon ? /*#__PURE__*/React__default.createElement("div", {
+        className: "dialog"
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "reactist_icon"
+      }, icon), /*#__PURE__*/React__default.createElement("div", {
+        className: "content"
+      }, children)) : children)
+      /* eslint-enable jsx-a11y/anchor-is-valid */
+
+    );
+  };
+
+  return Body;
+}(React__default.Component);
+
+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) {
+    if (onClick) {
+      onClick();
+    } // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
+
+    var 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
+    // @ts-expect-error Children cannot be typed properly yet in React
+    this.props.children, function (child) {
+      var _child$props;
+
+      if (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.close) {
+        return /*#__PURE__*/React__default.cloneElement(child, {
+          onClick: function onClick() {
+            return _this2._onClick(child.props.onClick);
+          }
+        });
+      } else {
+        return child ? /*#__PURE__*/React__default.cloneElement(child) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
+      }
+    });
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "reactist_modal_box__actions"
+    }, children);
+  };
+
+  return Actions;
+}(React__default.Component);
+
+Actions.displayName = 'Modal.Actions';
+
+var index = {
+  Box: Box$2,
+  Header: Header,
+  Body: Body$1,
+  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;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('reactist_loading', className),
+    "aria-label": ariaLabel,
+    "aria-live": "assertive",
+    role: "alert"
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "reactist_loading--spinner"
+  }, /*#__PURE__*/React__default.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: '0 0 24 24'
+  }, /*#__PURE__*/React__default.createElement("g", {
+    fill: "none",
+    fillRule: "nonzero"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fill: spinnerColor,
+    d: "M17.945 3.958A9.955 9.955 0 0 0 12 2c-2.19 0-4.217.705-5.865 1.9L5.131 2.16A11.945 11.945 0 0 1 12 0c2.59 0 4.99.82 6.95 2.217l-1.005 1.741z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: bgColor,
+    d: "M5.13 2.16L6.136 3.9A9.987 9.987 0 0 0 2 12c0 5.523 4.477 10 10 10s10-4.477 10-10a9.986 9.986 0 0 0-4.055-8.042l1.006-1.741A11.985 11.985 0 0 1 24 12c0 6.627-5.373 12-12 12S0 18.627 0 12c0-4.073 2.029-7.671 5.13-9.84z"
+  })))));
+}
+
+Loading$1.displayName = 'Loading';
+
 exports.Alert = Alert;
 exports.Avatar = Avatar;
 exports.Box = Box;
@@ -3585,6 +3895,9 @@ exports.CheckboxField = CheckboxField;
 exports.ColorPicker = ColorPicker;
 exports.Column = Column;
 exports.Columns = Columns;
+exports.DeprecatedButton = Button$1;
+exports.DeprecatedLoading = Loading$1;
+exports.DeprecatedModal = index;
 exports.Divider = Divider;
 exports.Dropdown = Dropdown;
 exports.ErrorMessage = ErrorMessage;
@@ -3597,13 +3910,17 @@ exports.Input = Input;
 exports.KeyCapturer = KeyCapturer;
 exports.KeyboardShortcut = KeyboardShortcut;
 exports.Loading = Loading;
-exports.LoadingSpinner = LoadingSpinner;
 exports.Menu = Menu;
 exports.MenuButton = MenuButton;
 exports.MenuGroup = MenuGroup;
 exports.MenuItem = MenuItem;
 exports.MenuList = MenuList;
-exports.Modal = index;
+exports.Modal = Modal;
+exports.ModalActions = ModalActions;
+exports.ModalBody = ModalBody;
+exports.ModalCloseButton = ModalCloseButton;
+exports.ModalFooter = ModalFooter;
+exports.ModalHeader = ModalHeader;
 exports.Notice = Notice;
 exports.Notification = Notification;
 exports.PasswordField = PasswordField;