@doist/reactist 9.2.0-beta.7 → 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 VisuallyHidden = require('reakit/VisuallyHidden');
-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'));
@@ -96,13 +98,19 @@ function _assertThisInitialized(self) {
   return self;
 }
 
-/* eslint-disable @typescript-eslint/ban-types */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * A wrapper to use React.forwardRef with polymorphic components in a type-safe manner. This is a
+ * convenience over merely using React.forwardRef directly, and then manually forcing the resulting
+ * value to be typed using `as PolymorphicComponent<…>`.
+ *
+ * @see PolymorphicComponent for details about what this type does
+ */
 
-function forwardRefWithAs(render) {
+function polymorphicComponent(render) {
   return /*#__PURE__*/React.forwardRef(render);
 }
 
-var prefix = ['', 'tablet-', 'desktop-'];
 /**
  * Builds a css module class name for a given prop + prop-value combination.
  *
@@ -126,9 +134,15 @@ function getClassNames(styles, property, value) {
     return null;
   }
 
-  var classList = typeof value === 'string' ? [styles[property + "-" + value]] : value.map(function (s, i) {
-    return styles["" + prefix[i] + property + "-" + s];
-  });
+  var classList = [];
+
+  if (typeof value === 'string') {
+    classList.push(styles[property + "-" + value]);
+  } else {
+    if (value.mobile) classList.push(styles[property + "-" + value.mobile]);
+    if (value.tablet) classList.push(styles["tablet-" + property + "-" + value.tablet]);
+    if (value.desktop) classList.push(styles["desktop-" + property + "-" + value.desktop]);
+  }
 
   if ( !classList.every(Boolean)) {
     // eslint-disable-next-line no-console
@@ -144,8 +158,9 @@ function getClassNames(styles, property, value) {
 /**
  * A mapping over a responsive prop value.
  *
- * Since response values can be a tuple (array) but also a scalar value, this helper makes it easier
- * to .map over this "array" but keeps it consistent for the case when it is a scalar value as well.
+ * Since response values can be an object but also a scalar value, this helper makes it easier to
+ * to map the values when it's an object but keeps it consistent for the case when it is a scalar
+ * value as well.
  *
  * @param fromValue the responsive prop value
  * @param mapper the mapping function
@@ -153,28 +168,35 @@ function getClassNames(styles, property, value) {
 
 
 function mapResponsiveProp(fromValue, mapper) {
-  if (typeof fromValue === 'string' || typeof fromValue === 'number' || typeof fromValue === 'boolean') {
-    return mapper(fromValue);
+  if (!fromValue) {
+    return undefined;
   }
 
-  if (Array.isArray(fromValue)) {
-    return fromValue.map(mapper);
+  if (typeof fromValue !== 'object') {
+    return mapper(fromValue);
   }
 
-  return undefined;
+  return {
+    mobile: fromValue.mobile ? mapper(fromValue.mobile) : undefined,
+    tablet: fromValue.tablet ? mapper(fromValue.tablet) : undefined,
+    desktop: fromValue.desktop ? mapper(fromValue.desktop) : undefined
+  };
 }
 
-var modules_54d944f2 = {"box":"_7c657f27","position-absolute":"_24f0305b","position-fixed":"f22516c3","position-relative":"dd3031f0","position-sticky":"c55e1376","tablet-position-absolute":"c01b4973","tablet-position-fixed":"fe61c08e","tablet-position-relative":"_42cf42ae","tablet-position-sticky":"_1cd29585","desktop-position-absolute":"_3bf17b40","desktop-position-fixed":"_3c190375","desktop-position-relative":"_21549264","desktop-position-sticky":"b3301c9a","display-block":"d0eafb3e","display-flex":"_29841fc9","display-inline":"be8e98ca","display-inlineBlock":"_009244ff","display-inlineFlex":"_366b4e11","display-none":"_685beb97","tablet-display-block":"ae57c505","tablet-display-flex":"e79407a2","tablet-display-inline":"_4b3944fb","tablet-display-inlineBlock":"_04228de9","tablet-display-inlineFlex":"_29bbb522","tablet-display-none":"_2d2052e6","desktop-display-block":"b1ba4d16","desktop-display-flex":"cb21a300","desktop-display-inline":"_9b2d213a","desktop-display-inlineBlock":"c6b19ae4","desktop-display-inlineFlex":"e2d9e9ae","desktop-display-none":"_69d56326","minWidth-0":"f87e83dc","minWidth-xsmall":"_2ca630ec","minWidth-small":"_7a1a60f1","minWidth-medium":"c0a2d8db","minWidth-large":"_95c19faa","minWidth-xlarge":"_4ab999ca","maxWidth-xsmall":"_1ca5dbf5","maxWidth-small":"c3ff7c04","maxWidth-medium":"_74540095","maxWidth-large":"_811b6141","maxWidth-xlarge":"_52023176","flexDirection-column":"_7ce9375b","flexDirection-row":"_953fabba","tablet-flexDirection-column":"bfc2801e","tablet-flexDirection-row":"_65c778a0","desktop-flexDirection-column":"_23be346b","desktop-flexDirection-row":"_986465f5","flexWrap-wrap":"_2c4c621c","flexWrap-nowrap":"c3633c19","flexShrink-0":"b477fff2","flexGrow-0":"b1b675a2","flexGrow-1":"_8e345e7d","alignItems-flexStart":"_9e819789","alignItems-center":"_3ae82bc9","alignItems-flexEnd":"_00f518cd","tablet-alignItems-flexStart":"ef284703","tablet-alignItems-center":"c0033f6b","tablet-alignItems-flexEnd":"_23222959","desktop-alignItems-flexStart":"f5ff68ae","desktop-alignItems-center":"eaa36a65","desktop-alignItems-flexEnd":"_2f176e1d","justifyContent-flexStart":"_4749a6dc","justifyContent-center":"c07ae3c5","justifyContent-flexEnd":"_92f94735","justifyContent-spaceBetween":"_654ccdee","tablet-justifyContent-flexStart":"_1598cc97","tablet-justifyContent-center":"a70ab2a6","tablet-justifyContent-flexEnd":"_6a961a37","tablet-justifyContent-spaceBetween":"_0d9709e0","desktop-justifyContent-flexStart":"_9f212924","desktop-justifyContent-center":"c6fbe3ef","desktop-justifyContent-flexEnd":"cdb44e6c","desktop-justifyContent-spaceBetween":"_70f074d7","overflow-hidden":"_01b1b3d3","overflow-auto":"f99741e1","overflow-visible":"_3f62d2f4","overflow-scroll":"_58821030","width-full":"_5ff2e0fb","height-full":"b43d8faa","paddingTop-xsmall":"_43d03f23","paddingTop-small":"c82a83d3","paddingTop-medium":"_05b7d9e9","paddingTop-large":"_221cd893","paddingTop-xlarge":"a303d58a","paddingTop-xxlarge":"_543c0127","tablet-paddingTop-xsmall":"a2e0fd3e","tablet-paddingTop-small":"_0bde39f9","tablet-paddingTop-medium":"_5f4af3c6","tablet-paddingTop-large":"fa89daaa","tablet-paddingTop-xlarge":"_5f9a63f3","tablet-paddingTop-xxlarge":"c45f5234","desktop-paddingTop-xsmall":"_9cf8b441","desktop-paddingTop-small":"_2813d05c","desktop-paddingTop-medium":"_8703333a","desktop-paddingTop-large":"_13793865","desktop-paddingTop-xlarge":"_240da042","desktop-paddingTop-xxlarge":"c9c7fbc2","paddingRight-xsmall":"d495bb28","paddingRight-small":"_042ac90b","paddingRight-medium":"_1b11d4ca","paddingRight-large":"bf68852a","paddingRight-xlarge":"_4e4767c7","paddingRight-xxlarge":"bfa73acf","tablet-paddingRight-xsmall":"d6462717","tablet-paddingRight-small":"f797ebe8","tablet-paddingRight-medium":"_44ba8f12","tablet-paddingRight-large":"_40c5576f","tablet-paddingRight-xlarge":"e7ee4168","tablet-paddingRight-xxlarge":"_860d8fbf","desktop-paddingRight-xsmall":"c97156fd","desktop-paddingRight-small":"c9953041","desktop-paddingRight-medium":"_37914764","desktop-paddingRight-large":"_1ca8c885","desktop-paddingRight-xlarge":"_75d49cdb","desktop-paddingRight-xxlarge":"d32fa11d","paddingBottom-xsmall":"bc3ad5d0","paddingBottom-small":"_46557bc6","paddingBottom-medium":"b923b5a7","paddingBottom-large":"_21795b21","paddingBottom-xlarge":"_1843b8d5","paddingBottom-xxlarge":"aa17bf37","tablet-paddingBottom-xsmall":"a28f6624","tablet-paddingBottom-small":"_7da0f299","tablet-paddingBottom-medium":"_50149ce3","tablet-paddingBottom-large":"a6ab60e2","tablet-paddingBottom-xlarge":"ce605666","tablet-paddingBottom-xxlarge":"b956675e","desktop-paddingBottom-xsmall":"d5326ae6","desktop-paddingBottom-small":"_6803052d","desktop-paddingBottom-medium":"_69a10a83","desktop-paddingBottom-large":"_5a8a9ae8","desktop-paddingBottom-xlarge":"_8b25ea98","desktop-paddingBottom-xxlarge":"dfd70349","paddingLeft-xsmall":"_805ae294","paddingLeft-small":"df5b5dfd","paddingLeft-medium":"eadadb70","paddingLeft-large":"_96f7a1d7","paddingLeft-xlarge":"bcc8a161","paddingLeft-xxlarge":"_3f7a75c6","tablet-paddingLeft-xsmall":"_98624fbc","tablet-paddingLeft-small":"b27f1381","tablet-paddingLeft-medium":"_21610d64","tablet-paddingLeft-large":"fa50a773","tablet-paddingLeft-xlarge":"b89f0a01","tablet-paddingLeft-xxlarge":"e9b75114","desktop-paddingLeft-xsmall":"_1d2763bd","desktop-paddingLeft-small":"_2b159c75","desktop-paddingLeft-medium":"_91d5fe19","desktop-paddingLeft-large":"_1818546c","desktop-paddingLeft-xlarge":"fe23556f","desktop-paddingLeft-xxlarge":"b69c0660","bg-default":"_191675e3","bg-aside":"c9237bd2","bg-highlight":"c6d1677f","bg-selected":"e4c307c8","borderRadius-standard":"d96494dc","borderRadius-full":"e4c4cad8","border-standard":"ba98367a"};
+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"};
 
-var Box = /*#__PURE__*/forwardRefWithAs(function Box(_ref, ref) {
-  var _ref2, _ref3, _ref4, _ref5;
+var modules_131405ac = {"marginTop-xsmall":"c7813d79","marginTop-small":"d3449da6","marginTop-medium":"_4ea254c1","marginTop-large":"c0844f64","marginTop-xlarge":"_213145b4","marginTop-xxlarge":"df61c84c","marginTop--xsmall":"efe72b13","marginTop--small":"_870c2768","marginTop--medium":"_0b927c57","marginTop--large":"_461db014","marginTop--xlarge":"_2a3a8cb8","marginTop--xxlarge":"_9bcda921","tablet-marginTop-xsmall":"_6add01e4","tablet-marginTop-small":"_735ef86b","tablet-marginTop-medium":"_0477d068","tablet-marginTop-large":"_2c90af97","tablet-marginTop-xlarge":"_63a82db6","tablet-marginTop-xxlarge":"_03cd7726","tablet-marginTop--xsmall":"c986a62a","tablet-marginTop--small":"be2bdcdd","tablet-marginTop--medium":"_47d2686b","tablet-marginTop--large":"_25e5af9d","tablet-marginTop--xlarge":"ee82f441","tablet-marginTop--xxlarge":"a6f9d404","desktop-marginTop-xsmall":"_4d8d9a36","desktop-marginTop-small":"e813cee7","desktop-marginTop-medium":"_56975b7d","desktop-marginTop-large":"_53b367f6","desktop-marginTop-xlarge":"d69e7311","desktop-marginTop-xxlarge":"_92f57c7e","desktop-marginTop--xsmall":"_96880d3e","desktop-marginTop--small":"dc3f3555","desktop-marginTop--medium":"_86dd06bb","desktop-marginTop--large":"c93ef12e","desktop-marginTop--xlarge":"bc8fd4a2","desktop-marginTop--xxlarge":"b12a9124","marginRight-xsmall":"_6016f4fb","marginRight-small":"b85e3dfa","marginRight-medium":"_297575f4","marginRight-large":"b401ac6c","marginRight-xlarge":"dc3ec387","marginRight-xxlarge":"_24694604","marginRight--xsmall":"_8e9bf2ee","marginRight--small":"ae9d1115","marginRight--medium":"_14e46fc3","marginRight--large":"_3370631b","marginRight--xlarge":"_3f0e9b50","marginRight--xxlarge":"bc13e010","tablet-marginRight-xsmall":"_6fa1aae3","tablet-marginRight-small":"_2976c5cb","tablet-marginRight-medium":"_38d94802","tablet-marginRight-large":"db9569b5","tablet-marginRight-xlarge":"_4a52f06d","tablet-marginRight-xxlarge":"_8a0f0410","tablet-marginRight--xsmall":"e7d40e9d","tablet-marginRight--small":"_680fde91","tablet-marginRight--medium":"_021010ca","tablet-marginRight--large":"_9e52c87c","tablet-marginRight--xlarge":"_4d602613","tablet-marginRight--xxlarge":"_21b1b65a","desktop-marginRight-xsmall":"_7321bc07","desktop-marginRight-small":"fa1721f4","desktop-marginRight-medium":"_3fd7b4b8","desktop-marginRight-large":"_4fdc2f74","desktop-marginRight-xlarge":"c0254761","desktop-marginRight-xxlarge":"_710a5f09","desktop-marginRight--xsmall":"e08bee7f","desktop-marginRight--small":"e5ab73d2","desktop-marginRight--medium":"_5e731477","desktop-marginRight--large":"_0f57a22e","desktop-marginRight--xlarge":"_25f26ed3","desktop-marginRight--xxlarge":"_11a3b4e0","marginBottom-xsmall":"_6a4f69f7","marginBottom-small":"db26b033","marginBottom-medium":"c7313022","marginBottom-large":"a5885889","marginBottom-xlarge":"_33dfbd8e","marginBottom-xxlarge":"_795ad2de","marginBottom--xsmall":"a329dbd3","marginBottom--small":"_85e739fb","marginBottom--medium":"_681f65ff","marginBottom--large":"caf50d8f","marginBottom--xlarge":"_1e084cbf","marginBottom--xxlarge":"_3dfb1c7e","tablet-marginBottom-xsmall":"ef4735be","tablet-marginBottom-small":"de55afba","tablet-marginBottom-medium":"_0e33ce88","tablet-marginBottom-large":"_8ca391fc","tablet-marginBottom-xlarge":"_3a609d23","tablet-marginBottom-xxlarge":"_3e1177e4","tablet-marginBottom--xsmall":"d384884d","tablet-marginBottom--small":"_75254cec","tablet-marginBottom--medium":"_5d9f127d","tablet-marginBottom--large":"_835f1089","tablet-marginBottom--xlarge":"dad52a72","tablet-marginBottom--xxlarge":"_8703a4bf","desktop-marginBottom-xsmall":"_90fd20e9","desktop-marginBottom-small":"f3769191","desktop-marginBottom-medium":"_156410f8","desktop-marginBottom-large":"_7fed74d0","desktop-marginBottom-xlarge":"_477dc10e","desktop-marginBottom-xxlarge":"_85c82d89","desktop-marginBottom--xsmall":"_4f09c1e0","desktop-marginBottom--small":"_9523e048","desktop-marginBottom--medium":"efe10240","desktop-marginBottom--large":"c43971e6","desktop-marginBottom--xlarge":"f9b4da15","desktop-marginBottom--xxlarge":"a10fdf70","marginLeft-xsmall":"f9be90b4","marginLeft-small":"f53218d5","marginLeft-medium":"c4a9b3ab","marginLeft-large":"_5755e2c3","marginLeft-xlarge":"_33fc9354","marginLeft-xxlarge":"_4749a3bf","marginLeft--xsmall":"c76cb3c7","marginLeft--small":"_96003c07","marginLeft--medium":"_09988d07","marginLeft--large":"b4a486f6","marginLeft--xlarge":"f396e75e","marginLeft--xxlarge":"_81d1f26d","tablet-marginLeft-xsmall":"_0a46e8f1","tablet-marginLeft-small":"_57c970af","tablet-marginLeft-medium":"_4b6099d3","tablet-marginLeft-large":"_378fcff5","tablet-marginLeft-xlarge":"f8785663","tablet-marginLeft-xxlarge":"_72f957ee","tablet-marginLeft--xsmall":"_2288c7e1","tablet-marginLeft--small":"b27c1c05","tablet-marginLeft--medium":"_702cbb13","tablet-marginLeft--large":"_1a2748b4","tablet-marginLeft--xlarge":"b8c043a5","tablet-marginLeft--xxlarge":"_8dc8ff63","desktop-marginLeft-xsmall":"c2af646d","desktop-marginLeft-small":"c03d07be","desktop-marginLeft-medium":"_915fb1d3","desktop-marginLeft-large":"_64214ee1","desktop-marginLeft-xlarge":"_7be4a22c","desktop-marginLeft-xxlarge":"_5ec0a401","desktop-marginLeft--xsmall":"ea29f1ee","desktop-marginLeft--small":"c26652c7","desktop-marginLeft--medium":"c24f6af9","desktop-marginLeft--large":"c2671f27","desktop-marginLeft--xlarge":"cc51a04e","desktop-marginLeft--xxlarge":"fd581f54"};
 
-  var _ref$component = _ref.component,
-      component = _ref$component === void 0 ? 'div' : _ref$component,
+var Box = /*#__PURE__*/polymorphicComponent(function Box(_ref, ref) {
+  var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9;
+
+  var _ref$as = _ref.as,
+      component = _ref$as === void 0 ? 'div' : _ref$as,
       _ref$position = _ref.position,
       position = _ref$position === void 0 ? 'static' : _ref$position,
-      _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,
@@ -190,6 +212,8 @@ var Box = /*#__PURE__*/forwardRefWithAs(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,
@@ -197,91 +221,117 @@ var Box = /*#__PURE__*/forwardRefWithAs(function Box(_ref, ref) {
       paddingRight = _ref.paddingRight,
       paddingBottom = _ref.paddingBottom,
       paddingLeft = _ref.paddingLeft,
+      margin = _ref.margin,
+      marginY = _ref.marginY,
+      marginX = _ref.marginX,
+      marginTop = _ref.marginTop,
+      marginRight = _ref.marginRight,
+      marginBottom = _ref.marginBottom,
+      marginLeft = _ref.marginLeft,
       className = _ref.className,
       children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, ["component", "position", "display", "flexDirection", "flexWrap", "flexGrow", "flexShrink", "alignItems", "justifyContent", "overflow", "width", "height", "background", "border", "borderRadius", "minWidth", "maxWidth", "padding", "paddingY", "paddingX", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "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;
   var resolvedPaddingBottom = (_ref4 = paddingBottom !== null && paddingBottom !== void 0 ? paddingBottom : paddingY) !== null && _ref4 !== void 0 ? _ref4 : padding;
   var resolvedPaddingLeft = (_ref5 = paddingLeft !== null && paddingLeft !== void 0 ? paddingLeft : paddingX) !== null && _ref5 !== void 0 ? _ref5 : padding;
-  var isFlex = display === 'flex' || display === 'inlineFlex';
+  var resolvedMarginTop = (_ref6 = marginTop !== null && marginTop !== void 0 ? marginTop : marginY) !== null && _ref6 !== void 0 ? _ref6 : margin;
+  var resolvedMarginRight = (_ref7 = marginRight !== null && marginRight !== void 0 ? marginRight : marginX) !== null && _ref7 !== void 0 ? _ref7 : margin;
+  var resolvedMarginBottom = (_ref8 = marginBottom !== null && marginBottom !== void 0 ? marginBottom : marginY) !== null && _ref8 !== void 0 ? _ref8 : margin;
+  var resolvedMarginLeft = (_ref9 = marginLeft !== null && marginLeft !== void 0 ? marginLeft : marginX) !== null && _ref9 !== void 0 ? _ref9 : margin;
+  var omitFlex = !display || typeof display === 'string' && display !== 'flex' && display !== 'inlineFlex';
   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), getClassNames(modules_54d944f2, 'paddingTop', resolvedPaddingTop), getClassNames(modules_54d944f2, 'paddingRight', resolvedPaddingRight), getClassNames(modules_54d944f2, 'paddingBottom', resolvedPaddingBottom), getClassNames(modules_54d944f2, 'paddingLeft', resolvedPaddingLeft), isFlex ? getClassNames(modules_54d944f2, 'flexDirection', flexDirection) : null, isFlex ? getClassNames(modules_54d944f2, 'flexWrap', flexWrap) : null, isFlex ? getClassNames(modules_54d944f2, 'alignItems', alignItems) : null, isFlex ? getClassNames(modules_54d944f2, 'justifyContent', justifyContent) : null, flexShrink != null ? getClassNames(modules_54d944f2, 'flexShrink', String(flexShrink)) : null, flexGrow != null ? getClassNames(modules_54d944f2, 'flexGrow', String(flexGrow)) : null, getClassNames(modules_54d944f2, 'overflow', overflow), getClassNames(modules_54d944f2, 'width', width), 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,
+    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
+    getClassNames(modules_54d944f2, 'overflow', overflow), getClassNames(modules_54d944f2, 'width', width), 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);
 });
 
-var modules_67f2d07a = {"space-xsmall":"d3ea2e32","column":"_2c41e2e2","space-small":"a54f89c4","space-medium":"_621ee6ab","space-large":"ff213312","space-xlarge":"faec1923","space-xxlarge":"a2ba5afa","tablet-space-xsmall":"_689d0d7b","tablet-space-small":"_29378ee5","tablet-space-medium":"_89b5095d","tablet-space-large":"_816e1598","tablet-space-xlarge":"cada9458","tablet-space-xxlarge":"_77b032f7","desktop-space-xsmall":"dab649e7","desktop-space-small":"_4633217f","desktop-space-medium":"edd549c1","desktop-space-large":"_80d262e2","desktop-space-xlarge":"_76b375ca","desktop-space-xxlarge":"_003fb9cf","columnWidth-auto":"c46d4782","columnWidth-1-2":"_28af3e54","columnWidth-1-3":"_54564dd0","columnWidth-2-3":"_7c5429a5","columnWidth-1-4":"_39a5dfa0","columnWidth-3-4":"e84a9027","columnWidth-1-5":"ccb09205","columnWidth-2-5":"_65fa2c16","columnWidth-3-5":"_68494fd9","columnWidth-4-5":"a618a594"};
+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 modules_3af3b7ac = {"space-xsmall":"_7b475ead","space-small":"_5641699f","space-medium":"_1a1c63e4","space-large":"_560f80a0","space-xlarge":"_84ffebbc","space-xxlarge":"b60a65cb","tablet-space-xsmall":"d808f5c3","tablet-space-small":"a51c76b3","tablet-space-medium":"_7185a7aa","tablet-space-large":"af82e610","tablet-space-xlarge":"_88b4ff46","tablet-space-xxlarge":"_9de15321","desktop-space-xsmall":"_6fb32d20","desktop-space-small":"_07ee315a","desktop-space-medium":"a270d7ec","desktop-space-large":"ea6ebb29","desktop-space-xlarge":"_35b36178","desktop-space-xxlarge":"_56c7dc23"};
-
-var Column = /*#__PURE__*/forwardRefWithAs(function Column(_ref, ref) {
+var Column = /*#__PURE__*/polymorphicComponent(function Column(_ref, ref) {
   var _ref$width = _ref.width,
       width = _ref$width === void 0 ? 'auto' : _ref$width,
       children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, ["component", "width", "children"]);
+      exceptionallySetClassName = _ref.exceptionallySetClassName,
+      props = _objectWithoutPropertiesLoose(_ref, ["width", "children", "exceptionallySetClassName"]);
 
-  return /*#__PURE__*/React.createElement(Box, Object.assign({
-    className: [modules_67f2d07a.column, width !== 'content' ? getClassNames(modules_67f2d07a, 'columnWidth', width.replace('/', '-')) : null],
+  return /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
+    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
-  }, props), children);
+  }), children);
 });
-var Columns = /*#__PURE__*/forwardRefWithAs(function Columns(_ref2, ref) {
+var Columns = /*#__PURE__*/polymorphicComponent(function Columns(_ref2, ref) {
   var space = _ref2.space,
-      align = _ref2.align,
-      alignY = _ref2.alignY,
+      _ref2$align = _ref2.align,
+      align = _ref2$align === void 0 ? 'left' : _ref2$align,
+      _ref2$alignY = _ref2.alignY,
+      alignY = _ref2$alignY === void 0 ? 'top' : _ref2$alignY,
       collapseBelow = _ref2.collapseBelow,
       children = _ref2.children,
-      props = _objectWithoutPropertiesLoose(_ref2, ["space", "align", "alignY", "collapseBelow", "children"]);
+      exceptionallySetClassName = _ref2.exceptionallySetClassName,
+      props = _objectWithoutPropertiesLoose(_ref2, ["space", "align", "alignY", "collapseBelow", "children", "exceptionallySetClassName"]);
 
-  return /*#__PURE__*/React.createElement(Box, Object.assign({
-    className: [getClassNames(modules_67f2d07a, 'space', space), getClassNames(modules_3af3b7ac, 'space', space)],
-    flexDirection: collapseBelow === 'desktop' ? ['column', 'column', 'row'] : collapseBelow === 'tablet' ? ['column', 'row'] : 'row',
+  return /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
+    className: [exceptionallySetClassName, getClassNames(modules_67f2d07a, 'space', space)],
     display: "flex",
+    flexDirection: collapseBelow === 'desktop' ? {
+      mobile: 'column',
+      tablet: 'column',
+      desktop: 'row'
+    } : collapseBelow === 'tablet' ? {
+      mobile: 'column',
+      tablet: 'row'
+    } : 'row',
     alignItems: mapResponsiveProp(alignY, function (alignY) {
-      return alignY === 'top' ? 'flexStart' : alignY === 'bottom' ? 'flexEnd' : 'center';
+      return alignY === 'top' ? 'flexStart' : alignY === 'bottom' ? 'flexEnd' : alignY;
     }),
     justifyContent: mapResponsiveProp(align, function (align) {
-      return align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : 'center';
+      return align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : align;
     }),
     ref: ref
-  }, props), children);
+  }), 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({
-    component: "hr",
-    className: [modules_c742c4d7.divider, weight !== 'regular' ? getClassNames(modules_c742c4d7, 'weight', weight) : null]
+    as: "hr",
+    className: getClassNames(modules_c742c4d7, 'weight', weight)
   }, props));
 }
 
 var modules_da5d5c21 = {"space-xsmall":"_6b1279e0","space-small":"_0d82c42d","space-medium":"_556714e1","space-large":"e90b43fb","space-xlarge":"a9c34345","space-xxlarge":"aa102efe","tablet-space-xsmall":"_34d16157","tablet-space-small":"c7e0e54f","tablet-space-medium":"_7f2a4e4b","tablet-space-large":"ae256487","tablet-space-xlarge":"e88be0f7","tablet-space-xxlarge":"dc7bcb18","desktop-space-xsmall":"_853f3012","desktop-space-small":"_3bfaf758","desktop-space-medium":"_36462a93","desktop-space-large":"e73081b7","desktop-space-xlarge":"e22ec9dd","desktop-space-xxlarge":"_4a20bd12"};
 
-var Inline = /*#__PURE__*/forwardRefWithAs(function Inline(_ref, ref) {
-  var component = _ref.component,
+var Inline = /*#__PURE__*/polymorphicComponent(function Inline(_ref, ref) {
+  var as = _ref.as,
       space = _ref.space,
       _ref$align = _ref.align,
       align = _ref$align === void 0 ? 'left' : _ref$align,
       _ref$alignY = _ref.alignY,
       alignY = _ref$alignY === void 0 ? 'center' : _ref$alignY,
       children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, ["component", "space", "align", "alignY", "children"]);
+      exceptionallySetClassName = _ref.exceptionallySetClassName,
+      props = _objectWithoutPropertiesLoose(_ref, ["as", "space", "align", "alignY", "children", "exceptionallySetClassName"]);
 
-  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Box, Object.assign({
-    component: component,
+  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
+    as: as,
     display: "flex",
     flexWrap: "wrap",
-    className: getClassNames(modules_da5d5c21, 'space', space),
+    className: [exceptionallySetClassName, getClassNames(modules_da5d5c21, 'space', space)],
     ref: ref,
     alignItems: mapResponsiveProp(alignY, function (alignY) {
       return alignY === 'top' ? 'flexStart' : alignY === 'bottom' ? 'flexEnd' : 'center';
@@ -289,29 +339,106 @@ var Inline = /*#__PURE__*/forwardRefWithAs(function Inline(_ref, ref) {
     justifyContent: mapResponsiveProp(align, function (align) {
       return align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : 'center';
     })
-  }, props), children));
+  }), children));
 });
 
-var Stack = /*#__PURE__*/forwardRefWithAs(function Stack(_ref, ref) {
-  var component = _ref.component,
+var modules_3af3b7ac = {"space-xsmall":"_7b475ead","space-small":"_5641699f","space-medium":"_1a1c63e4","space-large":"_560f80a0","space-xlarge":"_84ffebbc","space-xxlarge":"b60a65cb","tablet-space-xsmall":"d808f5c3","tablet-space-small":"a51c76b3","tablet-space-medium":"_7185a7aa","tablet-space-large":"af82e610","tablet-space-xlarge":"_88b4ff46","tablet-space-xxlarge":"_9de15321","desktop-space-xsmall":"_6fb32d20","desktop-space-small":"_07ee315a","desktop-space-medium":"a270d7ec","desktop-space-large":"ea6ebb29","desktop-space-xlarge":"_35b36178","desktop-space-xxlarge":"_56c7dc23"};
+
+var Stack = /*#__PURE__*/polymorphicComponent(function Stack(_ref, ref) {
+  var as = _ref.as,
       space = _ref.space,
+      _ref$align = _ref.align,
+      align = _ref$align === void 0 ? 'start' : _ref$align,
       _ref$dividers = _ref.dividers,
-      dividers = _ref$dividers === void 0 ? false : _ref$dividers,
+      dividers = _ref$dividers === void 0 ? 'none' : _ref$dividers,
       children = _ref.children,
-      className = _ref.className,
-      props = _objectWithoutPropertiesLoose(_ref, ["component", "space", "dividers", "children", "className"]);
-
-  return /*#__PURE__*/React.createElement(Box, Object.assign({
-    component: component,
-    className: [className, getClassNames(modules_3af3b7ac, 'space', space)],
+      exceptionallySetClassName = _ref.exceptionallySetClassName,
+      props = _objectWithoutPropertiesLoose(_ref, ["as", "space", "align", "dividers", "children", "exceptionallySetClassName"]);
+
+  var alignProps = align === 'start' ? undefined : {
+    width: 'full',
+    flexDirection: 'column',
+    display: 'flex',
+    alignItems: mapResponsiveProp(align, function (align) {
+      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
-  }, props), 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);
 });
 
+var modules_4689e97e = {"hiddenOnPrint":"_0e595dea"};
+
+/**
+ * A component that allows to specify how to hide itself on certain responsive screen sizes, or on
+ * print media.
+ *
+ * @see HiddenProps
+ * @see HiddenVisually for hiding content only visually, while keeping it available for assistive
+ *   technologies.
+ */
+
+var Hidden = /*#__PURE__*/polymorphicComponent(function Hidden(_ref, ref) {
+  var _ref$display = _ref.display,
+      display = _ref$display === void 0 ? 'block' : _ref$display,
+      children = _ref.children,
+      exceptionallySetClassName = _ref.exceptionallySetClassName,
+      props = _objectWithoutPropertiesLoose(_ref, ["display", "children", "exceptionallySetClassName"]);
+
+  var hiddenOnPrint = 'print' in props && props.print;
+  var hiddenOnDesktop = ('above' in props);
+  var hiddenOnMobile = ('below' in props);
+  var hiddenOnTablet = 'below' in props && props.below === 'desktop' || 'above' in props && props.above === 'mobile';
+
+  if (hiddenOnDesktop && hiddenOnMobile) {
+    // eslint-disable-next-line no-console
+    console.warn('<Hidden /> should receive either above="…" or below="…" but not both');
+  }
+
+  if (!hiddenOnDesktop && !hiddenOnMobile && !hiddenOnPrint) {
+    // eslint-disable-next-line no-console
+    console.warn('<Hidden /> did not receive any criteria to hide itself');
+  } // We need to delete these so they do not get forwarded to the Box
+
+
+  if ('above' in props) delete props['above'];
+  if ('below' in props) delete props['below'];
+  if ('print' in props) delete props['print'];
+  return /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
+    ref: ref,
+    className: [exceptionallySetClassName, hiddenOnPrint ? modules_4689e97e.hiddenOnPrint : null],
+    display: hiddenOnDesktop && hiddenOnMobile ? 'none' : {
+      mobile: hiddenOnMobile ? 'none' : display,
+      tablet: hiddenOnTablet ? 'none' : display,
+      desktop: hiddenOnDesktop ? 'none' : display
+    }
+  }), children);
+});
+
+var modules_61c16c43 = {"hiddenVisually":"_618235b7"};
+
+/**
+ * Provides content to assistive technologies while hiding it from the screen.
+ *
+ * @see Hidden for fully hiding content, and only under certain conditions.
+ */
+
+var HiddenVisually = /*#__PURE__*/polymorphicComponent(function HiddenVisually(props, ref) {
+  return /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
+    ref: ref,
+    position: "absolute",
+    overflow: "hidden",
+    className: modules_61c16c43.hiddenVisually
+  }));
+});
+
 var alertIconForTone = {
   info: AlertInfoIcon,
   positive: AlertPositiveIcon,
@@ -424,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,
@@ -432,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"};
@@ -479,7 +621,7 @@ function Notice(_ref) {
   })), /*#__PURE__*/React.createElement(Column, null, children)));
 }
 
-var modules_949d2ff4 = {"heading":"_651c59b1","weight-light":"_2e864c80","tone-secondary":"aa91354d","tone-danger":"_7bd53203","size-largest":"_2c8398a3","size-larger":"e5a28b9c","size-smaller":"f33a726c","line-clamp-1":"_539acfae","lineClamp":"_8b287e55","line-clamp-2":"_90e5ba4e","line-clamp-3":"a8fde227","line-clamp-4":"_2a71623f","line-clamp-5":"e506bf70"};
+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,
@@ -490,182 +632,53 @@ var Heading = /*#__PURE__*/React.forwardRef(function Heading(_ref, ref) {
       tone = _ref$tone === void 0 ? 'normal' : _ref$tone,
       children = _ref.children,
       lineClamp = _ref.lineClamp,
-      props = _objectWithoutPropertiesLoose(_ref, ["level", "weight", "size", "tone", "children", "lineClamp"]);
+      align = _ref.align,
+      exceptionallySetClassName = _ref.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: [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],
-    component: headingElementName,
+    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":"e25b6eac","size-xsmall":"_7be564c9","size-small":"_0b65f3be","size-large":"_148c266b","size-xlarge":"efa6a189","weight-medium":"a1ce91c1","weight-strong":"_615a6cf6","tone-secondary":"e1348c0a","tone-danger":"f2471c06","line-clamp-1":"_8f257fa0","lineClamp":"b219e836","line-clamp-2":"d1379189","line-clamp-3":"edc9a040","line-clamp-4":"d463b64b","line-clamp-5":"_4feee537"};
+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__*/forwardRefWithAs(function Text(_ref, ref) {
-  var _ref$component = _ref.component,
-      component = _ref$component === void 0 ? 'span' : _ref$component,
+var Text = /*#__PURE__*/polymorphicComponent(function Text(_ref, ref) {
+  var as = _ref.as,
       _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'standard' : _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,
-      rest = _objectWithoutPropertiesLoose(_ref, ["component", "size", "weight", "tone", "children", "lineClamp"]);
+      exceptionallySetClassName = _ref.exceptionallySetClassName,
+      props = _objectWithoutPropertiesLoose(_ref, ["as", "size", "weight", "tone", "align", "children", "lineClamp", "exceptionallySetClassName"]);
 
-  var lineClampMultipleLines = typeof lineClamp === 'string' ? parseInt(lineClamp, 10) > 1 : (lineClamp || 0) > 1;
-  return /*#__PURE__*/React.createElement(Box, Object.assign({}, rest, {
-    component: component,
-    className: [modules_a9637dd3.text, size !== 'standard' ? 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],
+  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.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,
     ref: ref
   }), children);
 });
 
-var modules_b0eaa640 = {"container":"e8c14f99"};
-
-var ButtonLink = /*#__PURE__*/forwardRefWithAs(function ButtonLink(_ref, ref) {
-  var _ref$component = _ref.component,
-      component = _ref$component === void 0 ? 'a' : _ref$component,
-      variant = _ref.variant,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'default' : _ref$size,
-      _ref$openInNewTab = _ref.openInNewTab,
-      openInNewTab = _ref$openInNewTab === void 0 ? false : _ref$openInNewTab,
-      props = _objectWithoutPropertiesLoose(_ref, ["component", "variant", "size", "openInNewTab"]);
-
-  return /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
-    component: component,
-    display: "inlineFlex",
-    alignItems: "center",
-    justifyContent: "center",
-    className: [modules_b0eaa640.container, 'reactist_button', variant ? "reactist_button--" + variant : null, size !== 'default' ? "reactist_button--" + size : null],
-    ref: ref,
-    target: openInNewTab ? '_blank' : undefined,
-    rel: openInNewTab ? 'noopener noreferrer' : undefined
-  }));
-});
-
-var modules_3d05deee = {"container":"_12eda218"};
-
-var TextLink = /*#__PURE__*/forwardRefWithAs(function TextLink(_ref, ref) {
-  var _ref$component = _ref.component,
-      component = _ref$component === void 0 ? 'a' : _ref$component,
-      _ref$openInNewTab = _ref.openInNewTab,
-      openInNewTab = _ref$openInNewTab === void 0 ? false : _ref$openInNewTab,
-      props = _objectWithoutPropertiesLoose(_ref, ["component", "tone", "openInNewTab"]);
-
-  return /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
-    component: component,
-    display: "inline",
-    className: modules_3d05deee.container,
-    ref: ref,
-    target: openInNewTab ? '_blank' : undefined,
-    rel: openInNewTab ? 'noopener noreferrer' : undefined
-  }));
-});
-
-var svgPath = {
-  checked: 'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2.457 4.293l-5.293 5.293-1.793-1.793a1 1 0 1 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0l6-6a1 1 0 1 0-1.414-1.414z',
-  unchecked: 'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm0 1H6a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z',
-  mixed: 'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2 7H8a1 1 0 0 0 0 2h8a1 1 0 0 0 0-2z',
-  filled: 'M6 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V6C4 4.89543 4.89543 4 6 4Z'
-};
-
-function getPathKey(_ref) {
-  var checked = _ref.checked,
-      indeterminate = _ref.indeterminate,
-      disabled = _ref.disabled;
-
-  if (indeterminate) {
-    return 'mixed'; // indeterminate, when true, overrides the checked state
-  }
-
-  if (checked) {
-    return 'checked';
-  } // We only used 'filled' when unchecked AND disabled, because the default unchecked icon
-  // is not enough to convey the disabled state with opacity alone. For all other cases
-  // above, when disabled, we use the same icon the corresponds to that state, and the
-  // opacity conveys the fact that the checkbox is disabled.
-  // See https://twist.com/a/1585/ch/414345/t/2257308/c/65201390
-
-
-  if (disabled) {
-    return 'filled';
-  }
-
-  return 'unchecked';
-}
-
-function CheckboxIcon(_ref2) {
-  var checked = _ref2.checked,
-      indeterminate = _ref2.indeterminate,
-      disabled = _ref2.disabled,
-      props = _objectWithoutPropertiesLoose(_ref2, ["checked", "indeterminate", "disabled"]);
-
-  var pathKey = getPathKey({
-    checked: checked,
-    indeterminate: indeterminate,
-    disabled: disabled
-  });
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    fill: "currentColor",
-    fillRule: "nonzero",
-    d: svgPath[pathKey]
-  }));
-}
-
-var modules_664a6a80 = {"container":"_6ba70fbf","checked":"_13189b71"};
-
-function CheckboxField(_ref) {
-  var _ref2;
-
-  var label = _ref.label,
-      className = _ref.className,
-      style = _ref.style,
-      checked = _ref.checked,
-      _ref$indeterminate = _ref.indeterminate,
-      indeterminate = _ref$indeterminate === void 0 ? false : _ref$indeterminate,
-      props = _objectWithoutPropertiesLoose(_ref, ["label", "className", "style", "checked", "indeterminate"]);
-
-  if (!label && !props['aria-label'] && !props['aria-labelledby']) {
-    // eslint-disable-next-line no-console
-    console.warn('A Checkbox needs a label');
-  }
-
-  var checkboxRef = React.useRef(null);
-  React.useEffect(function setIndeterminate() {
-    if (checkboxRef.current) {
-      checkboxRef.current.indeterminate = indeterminate;
-    }
-  }, [indeterminate]);
-  return /*#__PURE__*/React.createElement(Box, {
-    component: "label",
-    display: "flex",
-    alignItems: "center",
-    className: [className, modules_664a6a80.container, (_ref2 = {}, _ref2[modules_664a6a80.checked] = checked, _ref2), 'focus-marker-enabled-within'],
-    style: style
-  }, /*#__PURE__*/React.createElement(VisuallyHidden.VisuallyHidden, null, /*#__PURE__*/React.createElement("input", Object.assign({}, props, {
-    ref: checkboxRef,
-    type: "checkbox",
-    checked: checked
-  }))), /*#__PURE__*/React.createElement(CheckboxIcon, {
-    "aria-hidden": true,
-    checked: checked,
-    indeterminate: indeterminate,
-    disabled: props.disabled
-  }), label ? /*#__PURE__*/React.createElement("span", null, label) : null);
-}
-
 var SHOW_DELAY = 500;
 var HIDE_DELAY = 100;
 
@@ -777,79 +790,347 @@ function useDelay() {
   }, [clearTimeouts]);
 }
 
-var uid = 0;
-
-function uniqueId() {
-  return uid++;
-}
+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 generateElementId(prefix) {
-  var num = uniqueId();
-  return prefix + "-" + num;
+function preventDefault(event) {
+  event.preventDefault();
 }
-function useId(providedId) {
-  var ref = React.useRef(providedId !== null && providedId !== void 0 ? providedId : null);
-
-  if (!ref.current) {
-    ref.current = generateElementId('element');
-  }
+/**
+ * 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
+ */
 
-  return ref.current;
-}
 
-var modules_540a88ff = {"container":"_4014f55e","primaryLabel":"_52b4c04a","secondaryLabel":"a4e7d84d","auxiliaryLabel":"_28fba036"};
+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"]);
 
-function FieldHint(_ref) {
-  var id = _ref.id,
-      children = _ref.children;
-  return /*#__PURE__*/React.createElement(Text, {
-    component: "p",
-    tone: "secondary",
-    size: "small",
-    id: id,
-    className: modules_540a88ff.fieldHint
-  }, children);
-}
+  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;
+});
 
-function BaseField(_ref2) {
-  var label = _ref2.label,
-      secondaryLabel = _ref2.secondaryLabel,
-      auxiliaryLabel = _ref2.auxiliaryLabel,
-      hint = _ref2.hint,
-      className = _ref2.className,
-      children = _ref2.children,
-      maxWidth = _ref2.maxWidth,
-      hidden = _ref2.hidden,
-      props = _objectWithoutPropertiesLoose(_ref2, ["label", "secondaryLabel", "auxiliaryLabel", "hint", "className", "children", "maxWidth", "hidden"]);
+/**
+ * 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 id = useId(props.id);
-  var hintId = useId();
-  var ariaDescribedBy = hint ? classNames(hintId, props['aria-describedby']) : props['aria-describedby'];
+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 ? 'normal' : _ref$size,
+      exceptionallySetClassName = _ref.exceptionallySetClassName,
+      _ref$openInNewTab = _ref.openInNewTab,
+      openInNewTab = _ref$openInNewTab === void 0 ? false : _ref$openInNewTab,
+      props = _objectWithoutPropertiesLoose(_ref, ["as", "variant", "tone", "size", "exceptionallySetClassName", "openInNewTab"]);
+
+  return /*#__PURE__*/React.createElement(BaseButton, Object.assign({}, props, {
+    as: as,
+    ref: ref,
+    variant: variant,
+    tone: tone,
+    size: size,
+    exceptionallySetClassName: exceptionallySetClassName,
+    target: openInNewTab ? '_blank' : undefined,
+    rel: openInNewTab ? 'noopener noreferrer' : undefined
+  }));
+});
+
+var modules_3d05deee = {"container":"_12eda218"};
+
+var TextLink = /*#__PURE__*/polymorphicComponent(function TextLink(_ref, ref) {
+  var _ref$as = _ref.as,
+      as = _ref$as === void 0 ? 'a' : _ref$as,
+      _ref$openInNewTab = _ref.openInNewTab,
+      openInNewTab = _ref$openInNewTab === void 0 ? false : _ref$openInNewTab,
+      exceptionallySetClassName = _ref.exceptionallySetClassName,
+      props = _objectWithoutPropertiesLoose(_ref, ["as", "openInNewTab", "exceptionallySetClassName"]);
+
+  return /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
+    as: as,
+    display: "inline",
+    className: [exceptionallySetClassName, modules_3d05deee.container],
+    ref: ref,
+    target: openInNewTab ? '_blank' : undefined,
+    rel: openInNewTab ? 'noopener noreferrer' : undefined
+  }));
+});
+
+var svgPath = {
+  checked: 'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2.457 4.293l-5.293 5.293-1.793-1.793a1 1 0 1 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0l6-6a1 1 0 1 0-1.414-1.414z',
+  unchecked: 'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm0 1H6a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z',
+  mixed: 'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2 7H8a1 1 0 0 0 0 2h8a1 1 0 0 0 0-2z',
+  filled: 'M6 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V6C4 4.89543 4.89543 4 6 4Z'
+};
+
+function getPathKey(_ref) {
+  var checked = _ref.checked,
+      indeterminate = _ref.indeterminate,
+      disabled = _ref.disabled;
+
+  if (indeterminate) {
+    return 'mixed'; // indeterminate, when true, overrides the checked state
+  }
+
+  if (checked) {
+    return 'checked';
+  } // We only used 'filled' when unchecked AND disabled, because the default unchecked icon
+  // is not enough to convey the disabled state with opacity alone. For all other cases
+  // above, when disabled, we use the same icon the corresponds to that state, and the
+  // opacity conveys the fact that the checkbox is disabled.
+  // See https://twist.com/a/1585/ch/414345/t/2257308/c/65201390
+
+
+  if (disabled) {
+    return 'filled';
+  }
+
+  return 'unchecked';
+}
+
+function CheckboxIcon(_ref2) {
+  var checked = _ref2.checked,
+      indeterminate = _ref2.indeterminate,
+      disabled = _ref2.disabled,
+      props = _objectWithoutPropertiesLoose(_ref2, ["checked", "indeterminate", "disabled"]);
+
+  var pathKey = getPathKey({
+    checked: checked,
+    indeterminate: indeterminate,
+    disabled: disabled
+  });
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    fillRule: "nonzero",
+    d: svgPath[pathKey]
+  }));
+}
+
+var modules_664a6a80 = {"container":"f9e0a1b8","disabled":"_01411889","checked":"ffdfd8fb"};
+
+var CheckboxField = /*#__PURE__*/React.forwardRef(function CheckboxField(_ref, ref) {
+  var _ref2, _props$checked, _props$checked2;
+
+  var label = _ref.label,
+      disabled = _ref.disabled,
+      indeterminate = _ref.indeterminate,
+      defaultChecked = _ref.defaultChecked,
+      _onChange = _ref.onChange,
+      props = _objectWithoutPropertiesLoose(_ref, ["label", "disabled", "indeterminate", "defaultChecked", "onChange"]);
+
+  var isControlledComponent = typeof props.checked === 'boolean';
+
+  if (typeof indeterminate === 'boolean' && !isControlledComponent) {
+    // eslint-disable-next-line no-console
+    console.warn('Cannot use indeterminate on an uncontrolled checkbox');
+    indeterminate = undefined;
+  }
+
+  if (!label && !props['aria-label'] && !props['aria-labelledby']) {
+    // eslint-disable-next-line no-console
+    console.warn('A Checkbox needs a label');
+  }
+
+  var _React$useState = React.useState((_ref2 = (_props$checked = props.checked) !== null && _props$checked !== void 0 ? _props$checked : defaultChecked) !== null && _ref2 !== void 0 ? _ref2 : false),
+      checkedState = _React$useState[0],
+      setChecked = _React$useState[1];
+
+  var isChecked = (_props$checked2 = props.checked) !== null && _props$checked2 !== void 0 ? _props$checked2 : checkedState;
+  var internalRef = React.useRef(null);
+  var combinedRef = reakitUtils.useForkRef(internalRef, ref);
+  React.useEffect(function setIndeterminate() {
+    if (internalRef.current && typeof indeterminate === 'boolean') {
+      internalRef.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
   return /*#__PURE__*/React.createElement(Box, {
+    as: "label",
+    display: "flex",
+    alignItems: "center",
+    className: [modules_664a6a80.container, disabled ? modules_664a6a80.disabled : null, isChecked ? modules_664a6a80.checked : null, 'focus-marker-enabled-within']
+  }, /*#__PURE__*/React.createElement(HiddenVisually, null, /*#__PURE__*/React.createElement("input", Object.assign({}, props, {
+    ref: combinedRef,
+    type: "checkbox",
+    checked: isChecked,
+    disabled: disabled,
+    onChange: function onChange(event) {
+      _onChange === null || _onChange === void 0 ? void 0 : _onChange(event);
+
+      if (!event.defaultPrevented) {
+        setChecked(event.currentTarget.checked);
+      }
+    }
+  }))), /*#__PURE__*/React.createElement(CheckboxIcon, {
+    "aria-hidden": true,
+    checked: isChecked,
+    indeterminate: indeterminate,
+    disabled: disabled
+  }), label ? /*#__PURE__*/React.createElement(Text, null, label) : null);
+});
+
+var uid = 0;
+
+function uniqueId() {
+  return uid++;
+}
+
+function generateElementId(prefix) {
+  var num = uniqueId();
+  return prefix + "-" + num;
+}
+function useId(providedId) {
+  var ref = React.useRef(providedId !== null && providedId !== void 0 ? providedId : null);
+
+  if (!ref.current) {
+    ref.current = generateElementId('element');
+  }
+
+  return ref.current;
+}
+
+var modules_540a88ff = {"container":"ed7d894c","primaryLabel":"_22213081","secondaryLabel":"be8637dd","auxiliaryLabel":"_72b46ad5"};
+
+function FieldHint(props) {
+  return /*#__PURE__*/React.createElement(Text, Object.assign({
+    as: "p",
+    tone: "secondary",
+    size: "copy"
+  }, props));
+}
+
+function BaseField(_ref) {
+  var label = _ref.label,
+      secondaryLabel = _ref.secondaryLabel,
+      auxiliaryLabel = _ref.auxiliaryLabel,
+      hint = _ref.hint,
+      className = _ref.className,
+      children = _ref.children,
+      maxWidth = _ref.maxWidth,
+      hidden = _ref.hidden,
+      originalAriaDescribedBy = _ref['aria-describedby'],
+      originalId = _ref.id;
+  var id = useId(originalId);
+  var hintId = useId();
+  var ariaDescribedBy = originalAriaDescribedBy !== null && originalAriaDescribedBy !== void 0 ? originalAriaDescribedBy : hint ? hintId : undefined;
+  return /*#__PURE__*/React.createElement(Stack, {
+    space: "small"
+  }, /*#__PURE__*/React.createElement(Box, {
     className: [className, modules_540a88ff.container],
     maxWidth: maxWidth,
     hidden: hidden
   }, /*#__PURE__*/React.createElement(Box, {
-    component: "span",
+    as: "span",
     display: "flex",
     justifyContent: "spaceBetween",
     alignItems: "flexEnd",
     paddingBottom: "small"
   }, /*#__PURE__*/React.createElement(Text, {
-    component: "label",
+    size: "body",
+    as: "label",
     htmlFor: id
   }, label ? /*#__PURE__*/React.createElement("span", {
     className: modules_540a88ff.primaryLabel
   }, label) : null, secondaryLabel ? /*#__PURE__*/React.createElement("span", {
     className: modules_540a88ff.secondaryLabel
   }, "\xA0(", secondaryLabel, ")") : null), auxiliaryLabel ? /*#__PURE__*/React.createElement(Box, {
-    className: modules_540a88ff.auxiliaryLabel
+    className: modules_540a88ff.auxiliaryLabel,
+    paddingLeft: "small"
   }, auxiliaryLabel) : null), children(ariaDescribedBy ? {
     id: id,
     'aria-describedby': ariaDescribedBy
   } : {
     id: id
-  }), hint ? /*#__PURE__*/React.createElement(FieldHint, {
+  })), hint ? /*#__PURE__*/React.createElement(FieldHint, {
+    hidden: hidden,
     id: hintId
   }, hint) : null);
 }
@@ -899,7 +1180,7 @@ function PasswordHiddenIcon(props) {
 
 var modules_3f03ead6 = {"inputWrapper":"_460d581b"};
 
-var modules_aaf25250 = {"inputWrapper":"_509cf6b5"};
+var modules_aaf25250 = {"inputWrapper":"dd9ffeab"};
 
 var PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref, ref) {
   var label = _ref.label,
@@ -907,9 +1188,11 @@ var PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref, r
       auxiliaryLabel = _ref.auxiliaryLabel,
       hint = _ref.hint,
       maxWidth = _ref.maxWidth,
-      togglePasswordLabel = _ref.togglePasswordLabel,
+      _ref$togglePasswordLa = _ref.togglePasswordLabel,
+      togglePasswordLabel = _ref$togglePasswordLa === void 0 ? 'Toggle password visibility' : _ref$togglePasswordLa,
       hidden = _ref.hidden,
-      props = _objectWithoutPropertiesLoose(_ref, ["label", "secondaryLabel", "auxiliaryLabel", "hint", "maxWidth", "togglePasswordLabel", "hidden"]);
+      ariaDescribedBy = _ref['aria-describedby'],
+      props = _objectWithoutPropertiesLoose(_ref, ["label", "secondaryLabel", "auxiliaryLabel", "hint", "maxWidth", "togglePasswordLabel", "hidden", "aria-describedby"]);
 
   var id = useId(props.id);
   var internalRef = React.useRef(null);
@@ -935,7 +1218,8 @@ var PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref, r
     auxiliaryLabel: auxiliaryLabel,
     hint: hint,
     maxWidth: maxWidth,
-    hidden: hidden
+    hidden: hidden,
+    "aria-describedby": ariaDescribedBy
   }, function (extraProps) {
     return /*#__PURE__*/React.createElement(Box, {
       display: "flex",
@@ -959,9 +1243,9 @@ var PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref, r
   });
 });
 
-var modules_1fa9b208 = {"selectWrapper":"b320fb0f"};
+var modules_1fa9b208 = {"selectWrapper":"_828e09c5"};
 
-function SelectField(_ref) {
+var SelectField = /*#__PURE__*/React.forwardRef(function SelectField(_ref, ref) {
   var id = _ref.id,
       label = _ref.label,
       secondaryLabel = _ref.secondaryLabel,
@@ -969,7 +1253,9 @@ function SelectField(_ref) {
       hint = _ref.hint,
       maxWidth = _ref.maxWidth,
       children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "maxWidth", "children"]);
+      hidden = _ref.hidden,
+      ariaDescribedBy = _ref['aria-describedby'],
+      props = _objectWithoutPropertiesLoose(_ref, ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "maxWidth", "children", "hidden", "aria-describedby"]);
 
   return /*#__PURE__*/React.createElement(BaseField, {
     id: id,
@@ -977,15 +1263,19 @@ function SelectField(_ref) {
     secondaryLabel: secondaryLabel,
     auxiliaryLabel: auxiliaryLabel,
     hint: hint,
-    maxWidth: maxWidth
+    maxWidth: maxWidth,
+    hidden: hidden,
+    "aria-describedby": ariaDescribedBy
   }, function (extraProps) {
     return /*#__PURE__*/React.createElement(Box, {
       className: modules_1fa9b208.selectWrapper
-    }, /*#__PURE__*/React.createElement("select", Object.assign({}, props, extraProps), children), /*#__PURE__*/React.createElement(SelectChevron, {
+    }, /*#__PURE__*/React.createElement("select", Object.assign({}, props, extraProps, {
+      ref: ref
+    }), children), /*#__PURE__*/React.createElement(SelectChevron, {
       "aria-hidden": true
     }));
   });
-}
+});
 
 function SelectChevron(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
@@ -999,54 +1289,70 @@ function SelectChevron(props) {
   }));
 }
 
-var modules_8e05f7c9 = {"container":"_81e23633","disabled":"aa388da4","inputWrapper":"_196b41c2","handle":"_272b1f96","checked":"f3d4f232"};
-
-function join() {
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
-  }
+var modules_8e05f7c9 = {"container":"_99a80509","disabled":"b5cf26ef","checked":"a63c43a2","toggle":"f318ae83","label":"_427926b9","handle":"_9fcd994c"};
 
-  var list = args.map(function (s) {
-    return s === null || s === void 0 ? void 0 : s.trim();
-  }).filter(Boolean);
-  return list.length > 0 ? list.join(' ') : undefined;
-}
+var SwitchField = /*#__PURE__*/React.forwardRef(function SwitchField(_ref, ref) {
+  var _ref2, _props$checked, _props$checked2;
 
-function SwitchField(_ref) {
   var label = _ref.label,
       hint = _ref.hint,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$checked = _ref.checked,
-      checked = _ref$checked === void 0 ? false : _ref$checked,
-      maxWidth = _ref.maxWidth,
-      props = _objectWithoutPropertiesLoose(_ref, ["label", "hint", "disabled", "checked", "maxWidth"]);
+      hidden = _ref.hidden,
+      defaultChecked = _ref.defaultChecked,
+      originalId = _ref.id,
+      originalAriaDescribedBy = _ref['aria-describedby'],
+      _onChange = _ref.onChange,
+      props = _objectWithoutPropertiesLoose(_ref, ["label", "hint", "disabled", "hidden", "defaultChecked", "id", "aria-describedby", "onChange"]);
 
-  var id = useId(props.id);
+  var id = useId(originalId);
   var hintId = useId();
-  return /*#__PURE__*/React.createElement(Box, {
-    className: [modules_8e05f7c9.container, disabled ? modules_8e05f7c9.disabled : null],
-    maxWidth: maxWidth
+  var ariaDescribedBy = originalAriaDescribedBy !== null && originalAriaDescribedBy !== void 0 ? originalAriaDescribedBy : hint ? hintId : undefined;
+
+  var _React$useState = React.useState((_ref2 = (_props$checked = props.checked) !== null && _props$checked !== void 0 ? _props$checked : defaultChecked) !== null && _ref2 !== void 0 ? _ref2 : false),
+      checkedState = _React$useState[0],
+      setChecked = _React$useState[1];
+
+  var isChecked = (_props$checked2 = props.checked) !== null && _props$checked2 !== void 0 ? _props$checked2 : checkedState;
+  return /*#__PURE__*/React.createElement(Stack, {
+    space: "small",
+    hidden: hidden
   }, /*#__PURE__*/React.createElement(Box, {
-    component: "label",
+    className: [modules_8e05f7c9.container, disabled ? modules_8e05f7c9.disabled : null, isChecked ? modules_8e05f7c9.checked : null],
+    as: "label",
     display: "flex",
     alignItems: "center"
   }, /*#__PURE__*/React.createElement(Box, {
-    className: [modules_8e05f7c9.inputWrapper, checked ? modules_8e05f7c9.checked : null]
-  }, /*#__PURE__*/React.createElement("input", Object.assign({
+    position: "relative",
+    display: "inlineBlock",
+    overflow: "visible",
+    marginRight: "small",
+    flexShrink: 0,
+    className: modules_8e05f7c9.toggle
+  }, /*#__PURE__*/React.createElement(HiddenVisually, null, /*#__PURE__*/React.createElement("input", Object.assign({}, props, {
     id: id,
     type: "checkbox",
-    checked: checked,
     disabled: disabled,
-    "aria-describedby": join(hint ? hintId : null, props['aria-describedby'])
-  }, props)), /*#__PURE__*/React.createElement("span", {
+    "aria-describedby": ariaDescribedBy,
+    ref: ref,
+    checked: isChecked,
+    onChange: function onChange(event) {
+      _onChange === null || _onChange === void 0 ? void 0 : _onChange(event);
+
+      if (!event.defaultPrevented) {
+        setChecked(event.currentTarget.checked);
+      }
+    }
+  }))), /*#__PURE__*/React.createElement("span", {
     className: modules_8e05f7c9.handle
-  })), /*#__PURE__*/React.createElement("span", null, label)), hint ? /*#__PURE__*/React.createElement(FieldHint, {
+  })), /*#__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,
@@ -1082,7 +1388,8 @@ var TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
       type = _ref$type === void 0 ? 'text' : _ref$type,
       maxWidth = _ref.maxWidth,
       hidden = _ref.hidden,
-      props = _objectWithoutPropertiesLoose(_ref, ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "type", "maxWidth", "hidden"]);
+      ariaDescribedBy = _ref['aria-describedby'],
+      props = _objectWithoutPropertiesLoose(_ref, ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "type", "maxWidth", "hidden", "aria-describedby"]);
 
   return /*#__PURE__*/React.createElement(BaseField, {
     id: id,
@@ -1091,7 +1398,8 @@ var TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
     auxiliaryLabel: auxiliaryLabel,
     hint: hint,
     maxWidth: maxWidth,
-    hidden: hidden
+    hidden: hidden,
+    "aria-describedby": ariaDescribedBy
   }, function (extraProps) {
     return /*#__PURE__*/React.createElement(Box, {
       className: modules_aaf25250.inputWrapper
@@ -1102,36 +1410,379 @@ var TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
   });
 });
 
-function getInitials(name) {
-  if (!name) {
-    return '';
-  }
+/**
+ * usePrevious tracks the change of the given value -
+ * when a given value has been changed from a previous call,
+ * it will return the value prior to the change.
+ *
+ * Example:
+ *
+ * const [x, setX] = useState(1)
+ * const prevX = usePrevious(x)
+ *
+ * Suppose `setX(2)` is called, then in the next component render
+ * x = 2 and prevX = 1
+ */
 
-  var seed = name.trim().split(' ');
-  var firstInitial = seed[0];
-  var lastInitial = seed[seed.length - 1];
-  var initials = firstInitial[0]; // Better readable this way.
-  // eslint-disable-next-line @typescript-eslint/prefer-string-starts-ends-with
+function usePrevious(value) {
+  var ref = React.useRef(null);
+  React.useEffect(function () {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
 
-  if (firstInitial[0] !== lastInitial[0]) {
-    initials += lastInitial[0];
+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);
+/**
+ * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.
+ */
+
+function Tabs(_ref) {
+  var children = _ref.children,
+      selectedId = _ref.selectedId,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'primary' : _ref$color,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'normal' : _ref$variant;
+  var tabState = Tab$1.useTabState({
+    selectedId: selectedId
+  });
+  var previousSelectedId = usePrevious(selectedId);
+  var actualSelectedId = tabState.selectedId,
+      select = tabState.select;
+  React.useEffect(function selectTab() {
+    if (previousSelectedId !== selectedId && selectedId !== actualSelectedId && selectedId !== undefined) {
+      select(selectedId);
+    }
+  }, [selectedId, actualSelectedId, select, previousSelectedId]);
+  var memoizedTabState = React.useMemo(function memoizeTabState() {
+    return _objectSpread2(_objectSpread2({}, tabState), {}, {
+      color: color,
+      variant: variant
+    });
+  }, // There is no guarantee that useTabState returns a stable object when there are no changes, so
+  // following reakit/Tab's example we only return a new objet when any of its values have changed
+  // eslint-disable-next-line
+  [color, variant].concat(Object.values(tabState)));
+  return /*#__PURE__*/React.createElement(TabsContext.Provider, {
+    value: memoizedTabState
+  }, children);
+}
+/**
+ * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.
+ */
+
+function Tab(_ref2) {
+  var children = _ref2.children,
+      id = _ref2.id;
+  var tabContextValue = React.useContext(TabsContext);
+
+  if (!tabContextValue) {
+    return null;
   }
 
-  return initials.toUpperCase();
+  var color = tabContextValue.color,
+      variant = tabContextValue.variant,
+      tabState = _objectWithoutPropertiesLoose(tabContextValue, ["color", "variant"]);
+
+  return /*#__PURE__*/React.createElement(Tab$1.Tab, Object.assign({
+    className: classNames(modules_40c67f5b.tab, modules_40c67f5b["tab-" + (variant !== null && variant !== void 0 ? variant : '')], modules_40c67f5b["tab-" + (color !== null && color !== void 0 ? color : '')]),
+    id: id
+  }, tabState), children);
 }
+/**
+ * A component used to group `<Tab>` elements together.
+ */
 
-function emailToIndex(email, maxIndex) {
-  var seed = email.split('@')[0];
-  var hash = seed.charCodeAt(0) + seed.charCodeAt(seed.length - 1) || 0;
-  return hash % maxIndex;
+function TabList(_ref3) {
+  var children = _ref3.children,
+      _ref3$space = _ref3.space,
+      space = _ref3$space === void 0 ? 'medium' : _ref3$space,
+      props = _objectWithoutPropertiesLoose(_ref3, ["children", "space"]);
+
+  var tabContextValue = React.useContext(TabsContext);
+
+  if (!tabContextValue) {
+    return null;
+  }
+
+  var tabState = _objectWithoutPropertiesLoose(tabContextValue, ["color", "variant"]);
+
+  return /*#__PURE__*/React.createElement(Tab$1.TabList, Object.assign({}, props, tabState), /*#__PURE__*/React.createElement(Inline, {
+    space: space
+  }, children));
 }
+/**
+ * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.
+ */
 
-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'];
+var TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref4, ref) {
+  var children = _ref4.children,
+      id = _ref4.id,
+      as = _ref4.as,
+      _ref4$render = _ref4.render,
+      render = _ref4$render === void 0 ? 'always' : _ref4$render,
+      props = _objectWithoutPropertiesLoose(_ref4, ["children", "id", "as", "render"]);
 
-function Avatar(_ref) {
-  var user = _ref.user,
-      avatarUrl = _ref.avatarUrl,
+  var tabContextValue = React.useContext(TabsContext);
+
+  var _React$useState = React.useState(false),
+      tabRendered = _React$useState[0],
+      setTabRendered = _React$useState[1];
+
+  var tabIsActive = (tabContextValue === null || tabContextValue === void 0 ? void 0 : tabContextValue.selectedId) === id;
+  React.useEffect(function trackTabRenderedState() {
+    if (!tabRendered && tabIsActive) {
+      setTabRendered(true);
+    }
+  }, [tabRendered, tabIsActive]);
+
+  if (!tabContextValue) {
+    return null;
+  }
+
+  var tabState = _objectWithoutPropertiesLoose(tabContextValue, ["color", "variant"]);
+
+  return /*#__PURE__*/React.createElement(Tab$1.TabPanel, Object.assign({
+    tabId: id
+  }, 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);
+  return tabContextValue ? children({
+    selectedId: tabContextValue.selectedId
+  }) : 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 '';
+  }
+
+  var seed = name.trim().split(' ');
+  var firstInitial = seed[0];
+  var lastInitial = seed[seed.length - 1];
+  var initials = firstInitial[0]; // Better readable this way.
+  // eslint-disable-next-line @typescript-eslint/prefer-string-starts-ends-with
+
+  if (firstInitial[0] !== lastInitial[0]) {
+    initials += lastInitial[0];
+  }
+
+  return initials.toUpperCase();
+}
+
+function emailToIndex(email, maxIndex) {
+  var seed = email.split('@')[0];
+  var hash = seed.charCodeAt(0) + seed.charCodeAt(seed.length - 1) || 0;
+  return hash % maxIndex;
+}
+
+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,
+      avatarUrl = _ref.avatarUrl,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'l' : _ref$size,
       className = _ref.className,
@@ -1154,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,
@@ -1176,42 +1853,20 @@ var Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref) {
     ref: ref,
     type: type,
     className: className,
-    disabled: disabled || loading,
-    onClick: onClick
+    "aria-disabled": disabled || loading,
+    onClick: disabled || loading ? undefined : onClick
   }), children);
   return tooltip ? /*#__PURE__*/React__default.createElement(Tooltip, {
     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);
 
@@ -1302,7 +1957,9 @@ var Box$1 = /*#__PURE__*/function (_React$Component) {
   };
 
   _proto._getTriggerComponent = function _getTriggerComponent() {
-    var _trigger = this.props.children && this.props.children[0];
+    var _this$props$children;
+
+    var _trigger = (_this$props$children = this.props.children) === null || _this$props$children === void 0 ? void 0 : _this$props$children[0];
 
     return _trigger ? /*#__PURE__*/React__default.cloneElement(_trigger, {
       onClick: this._toggleShowBody
@@ -1330,7 +1987,7 @@ var Box$1 = /*#__PURE__*/function (_React$Component) {
       top: top,
       bottom: !top
     });
-    var body = children && children[1];
+    var body = children === null || children === void 0 ? void 0 : children[1];
     var contentMarkup = typeof body === 'function' ? body(props) : body ? /*#__PURE__*/React__default.cloneElement(body, props) : undefined;
     return /*#__PURE__*/React__default.createElement("div", {
       className: className,
@@ -1368,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,
@@ -1476,7 +2133,7 @@ function ColorItem(_ref2) {
       backgroundColor: color
     },
     onClick: function onClick() {
-      return _onClick && _onClick(colorIndex);
+      return _onClick === null || _onClick === void 0 ? void 0 : _onClick(colorIndex);
     }
   }, /*#__PURE__*/React__default.createElement("span", {
     className: "color_item--inner_ring"
@@ -1507,6 +2164,8 @@ var ErrorMessage = /*#__PURE__*/function (_React$Component) {
     };
 
     _this._hide = function () {
+      var _this$props$onHide, _this$props;
+
       _this._clearTimeout();
 
       _this.setState(function () {
@@ -1515,7 +2174,7 @@ var ErrorMessage = /*#__PURE__*/function (_React$Component) {
         };
       });
 
-      _this.props.onHide && _this.props.onHide();
+      (_this$props$onHide = (_this$props = _this.props).onHide) === null || _this$props$onHide === void 0 ? void 0 : _this$props$onHide.call(_this$props);
     };
 
     var isValidMessage = _this._isValidMessage(props.message);
@@ -1750,7 +2409,7 @@ function hasModifiers(str) {
 }
 
 function isSpecialKey(str) {
-  return /^(mod|cmd|ctrl|control|alt|shift|space)$/i.test(str);
+  return /^(mod|cmd|ctrl|control|alt|shift|space|super)$/i.test(str);
 }
 
 function parseKeys(shortcut, isMac, translateKey) {
@@ -1778,12 +2437,14 @@ function parseKeys(shortcut, isMac, translateKey) {
 }
 
 function KeyboardShortcut(_ref) {
+  var _navigator$platform$t, _navigator$platform;
+
   var children = _ref.children,
       className = _ref.className,
       _ref$translateKey = _ref.translateKey,
       translateKey = _ref$translateKey === void 0 ? globalTranslateKey : _ref$translateKey,
       _ref$isMac = _ref.isMac,
-      isMac = _ref$isMac === void 0 ? navigator.platform != null && navigator.platform.toUpperCase().includes('MAC') : _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, ["children", "className", "translateKey", "isMac"]);
 
   var shortcuts = typeof children === 'string' ? [children] : children;
@@ -1981,332 +2642,54 @@ 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"
-  })))));
-}
-
-Loading.displayName = 'Loading';
+var hasEnoughSpace = function hasEnoughSpace(windowDimensions, elementDimensions, wrapperDimensions, wrapperPosition, position, gap) {
+  if (gap === void 0) {
+    gap = 0;
+  }
 
-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 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 Box$2 = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(Box, _React$Component);
+  var verticalPosition = _calculateVerticalPosition(wrapperPosition, wrapperDimensions, elementDimensions);
 
-  function Box() {
-    var _this;
+  var horizontalPosition = _calculateHorizontalPosition(wrapperPosition, wrapperDimensions, elementDimensions);
 
-    _this = _React$Component.apply(this, arguments) || this;
+  var canPlaceVertically = verticalPosition >= 0 && verticalPosition + elementWidth <= windowWidth;
+  var canPlaceHorizontally = horizontalPosition >= 0 && horizontalPosition + elementHeight <= windowHeight;
 
-    _this._closeModal = function () {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      var modalElement = document.getElementById('modal_box');
-      ReactDOM.unmountComponentAtNode(modalElement);
-    };
+  if (position === 'top') {
+    return canPlaceVertically && wrapperY - elementHeight - gap >= 0;
+  } else if (position === 'right') {
+    return canPlaceHorizontally && wrapperX + wrapperWidth + elementWidth + gap <= windowWidth;
+  } else if (position === 'left') {
+    return canPlaceHorizontally && wrapperX - elementWidth - gap >= 0;
+  } else if (position === 'bottom') {
+    return canPlaceVertically && wrapperY + wrapperHeight + elementHeight + gap <= windowHeight;
+  }
 
-    _this._handleKeyDown = function (event) {
-      if (event.keyCode === 27) {
-        // ESC
-        _this._closeModal();
+  return false;
+};
 
-        if (event.preventDefault) event.preventDefault();
-      }
-    };
+var _calculateVerticalPosition = function _calculateVerticalPosition(wrapperPosition, wrapperDimensions, elementDimensions) {
+  return wrapperPosition.x + (wrapperDimensions.width - elementDimensions.width) / 2;
+};
 
-    _this._handleOverlayClick = function (event) {
-      if (event.target instanceof Element && (event.target.id === 'reactist-overlay' || event.target.id === 'reactist-overlay-inner')) {
-        _this._closeModal();
-      }
-    };
+var _calculateHorizontalPosition = function _calculateHorizontalPosition(wrapperPosition, wrapperDimensions, elementDimensions) {
+  return wrapperPosition.y + (wrapperDimensions.height - elementDimensions.height) / 2;
+};
 
-    return _this;
+var calculateTopCenterPosition = function calculateTopCenterPosition(wrapperDimensions, wrapperPosition, elementDimensions, gap) {
+  if (gap === void 0) {
+    gap = 0;
   }
 
-  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) {
-      if (child && child.props && 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 verticalPosition = _calculateVerticalPosition(wrapperPosition, wrapperDimensions, elementDimensions);
-
-  var horizontalPosition = _calculateHorizontalPosition(wrapperPosition, wrapperDimensions, elementDimensions);
-
-  var canPlaceVertically = verticalPosition >= 0 && verticalPosition + elementWidth <= windowWidth;
-  var canPlaceHorizontally = horizontalPosition >= 0 && horizontalPosition + elementHeight <= windowHeight;
-
-  if (position === 'top') {
-    return canPlaceVertically && wrapperY - elementHeight - gap >= 0;
-  } else if (position === 'right') {
-    return canPlaceHorizontally && wrapperX + wrapperWidth + elementWidth + gap <= windowWidth;
-  } else if (position === 'left') {
-    return canPlaceHorizontally && wrapperX - elementWidth - gap >= 0;
-  } else if (position === 'bottom') {
-    return canPlaceVertically && wrapperY + wrapperHeight + elementHeight + gap <= windowHeight;
-  }
-
-  return false;
-};
-
-var _calculateVerticalPosition = function _calculateVerticalPosition(wrapperPosition, wrapperDimensions, elementDimensions) {
-  return wrapperPosition.x + (wrapperDimensions.width - elementDimensions.width) / 2;
-};
-
-var _calculateHorizontalPosition = function _calculateHorizontalPosition(wrapperPosition, wrapperDimensions, elementDimensions) {
-  return wrapperPosition.y + (wrapperDimensions.height - elementDimensions.height) / 2;
-};
-
-var calculateTopCenterPosition = function calculateTopCenterPosition(wrapperDimensions, wrapperPosition, elementDimensions, gap) {
-  if (gap === void 0) {
-    gap = 0;
-  }
-
-  var x = _calculateVerticalPosition(wrapperPosition, wrapperDimensions, elementDimensions);
+  var x = _calculateVerticalPosition(wrapperPosition, wrapperDimensions, elementDimensions);
 
   var y = wrapperPosition.y - elementDimensions.height - gap;
   return {
@@ -2638,7 +3021,7 @@ function RangeInput(_ref) {
     max: max,
     step: stepSize,
     onChange: function onChange(event) {
-      return _onChange && _onChange(parseInt(event.target.value));
+      return _onChange === null || _onChange === void 0 ? void 0 : _onChange(parseInt(event.target.value));
     }
   }), /*#__PURE__*/React__default.createElement("span", {
     className: "range_btn plus",
@@ -2673,7 +3056,7 @@ function Select(_ref) {
     },
     disabled: disabled,
     defaultValue: defaultValue
-  }, otherProps), options && options.map(function (option) {
+  }, otherProps), options === null || options === void 0 ? void 0 : options.map(function (option) {
     return /*#__PURE__*/React__default.createElement("option", {
       key: option.key || option.value,
       value: option.value,
@@ -2947,6 +3330,18 @@ Tip.defaultProps = {
   top: false
 };
 
+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,
@@ -3008,128 +3403,6 @@ function Notification(_ref) {
   }, customCloseButton !== null && customCloseButton !== void 0 ? customCloseButton : /*#__PURE__*/React__default.createElement(CloseIcon$1, null)) : null);
 }
 
-var Tabs = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(Tabs, _React$Component);
-
-  function Tabs(props, context) {
-    var _this;
-
-    _this = _React$Component.call(this, props, context) || this;
-
-    _this._switchActiveTab = function (tab, i) {
-      _this.setState(function () {
-        return {
-          activeTabIndex: i
-        };
-      });
-
-      if (_this.props.onChange) _this.props.onChange(tab.props.value);
-    };
-
-    _this._renderTabLinks = function (tabs) {
-      return tabs.map(function (t, i) {
-        var _t$props = t.props,
-            title = _t$props.title,
-            disabled = _t$props.disabled;
-        var value = t.props.value || i;
-        var className = classNames('reactist_tabs__header--item', {
-          disabled: disabled,
-          active: i === _this.state.activeTabIndex
-        });
-        return (
-          /*#__PURE__*/
-          // eslint-disable-next-line jsx-a11y/anchor-is-valid
-          React__default.createElement("a", {
-            className: className,
-            href: "",
-            key: value,
-            onClick: function onClick(event) {
-              event.preventDefault();
-
-              if (!disabled) {
-                _this._switchActiveTab(t, i);
-              }
-            }
-          }, title)
-        );
-      });
-    };
-
-    var defaultTab = props.defaultTab,
-        onChange = props.onChange;
-    var children = React__default.Children.toArray(_this.props.children);
-    var hasDefault = defaultTab || defaultTab === 0;
-
-    if (hasDefault || onChange) {
-      if (children) {
-        var missing = children.find(function (c) {
-          return !c.props.value && c.props.value !== 0;
-        });
-        if (missing) throw new Error('(Tab) Missing property: all Tab must have "value" set if "defaultTab" or "onChange" is used');
-      }
-    }
-
-    if (hasDefault && children) {
-      var i = children.findIndex(function (x) {
-        return x.props.value === defaultTab;
-      });
-      if (i === -1) throw new Error( // `hasDefault` being `true` guarantees `defaultTab` being a `number`.
-      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-      "(Tabs) Unable to find Tab with the matching defaultTab value \"" + defaultTab + "\"");
-      _this.state = {
-        activeTabIndex: i
-      };
-    } else {
-      _this.state = {
-        activeTabIndex: 0
-      };
-    }
-
-    return _this;
-  }
-
-  var _proto = Tabs.prototype;
-
-  _proto.render = function render() {
-    // ensures that single or no child components don't throw
-    var children = React__default.Children.toArray(this.props.children);
-    var activeTab = children[this.state.activeTabIndex] || children[0] || null;
-    var cls = classNames("reactist_tabs" + (this.props.spreadLayout ? '--spreadlayout' : ''));
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: cls
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "reactist_tabs__header"
-    }, this._renderTabLinks(children)), /*#__PURE__*/React__default.createElement("div", {
-      className: "reactist_tabs__body"
-    }, activeTab));
-  };
-
-  return Tabs;
-}(React__default.Component);
-
-Tabs.displayName = 'Tabs';
-Tabs.defaultProps = {
-  spreadLayout: false
-};
-
-var Tab = function Tab(_ref) {
-  var children = _ref.children,
-      className = _ref.className;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classNames('reactist_tabs__tab', className)
-  }, children);
-};
-
-Tab.displayName = 'Tab';
-Tab.defaultProps = {
-  disabled: false
-};
-
-/* eslint-disable @typescript-eslint/ban-types */
-function forwardRefWithAs$1(render) {
-  return /*#__PURE__*/React.forwardRef(render);
-}
-
 var MenuContext = /*#__PURE__*/React.createContext( // Reakit gives us no means to obtain a valid initial/default value of type MenuStateReturn
 // (it is normally obtained by calling useMenuState but we can't call hooks outside components).
 // This is however of little consequence since this value is only used if some of the components
@@ -3160,25 +3433,22 @@ function Menu(_ref) {
   return /*#__PURE__*/React.createElement(MenuContext.Provider, {
     value: value
   }, children);
-} //
-// MenuButton
-//
-
+}
 /**
  * A button to toggle a dropdown menu open or closed.
  */
 
 
-var MenuButton = /*#__PURE__*/forwardRefWithAs$1(function MenuButton(_ref2, ref) {
-  var className = _ref2.className,
-      props = _objectWithoutPropertiesLoose(_ref2, ["className"]);
+var MenuButton = /*#__PURE__*/polymorphicComponent(function MenuButton(_ref2, ref) {
+  var exceptionallySetClassName = _ref2.exceptionallySetClassName,
+      props = _objectWithoutPropertiesLoose(_ref2, ["exceptionallySetClassName"]);
 
   var _React$useContext = React.useContext(MenuContext),
       state = _objectWithoutPropertiesLoose(_React$useContext, ["handleItemSelect"]);
 
   return /*#__PURE__*/React.createElement(Reakit.MenuButton, Object.assign({}, props, state, {
     ref: ref,
-    className: classNames('reactist_menubutton', className)
+    className: classNames('reactist_menubutton', exceptionallySetClassName)
   }));
 });
 var BACKDROP_STYLE = {
@@ -3216,16 +3486,16 @@ function MenuBackdrop(_ref3) {
  */
 
 
-var MenuList = /*#__PURE__*/forwardRefWithAs$1(function MenuList(_ref4, ref) {
-  var className = _ref4.className,
-      props = _objectWithoutPropertiesLoose(_ref4, ["className"]);
+var MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref4, ref) {
+  var exceptionallySetClassName = _ref4.exceptionallySetClassName,
+      props = _objectWithoutPropertiesLoose(_ref4, ["exceptionallySetClassName"]);
 
   var _React$useContext2 = React.useContext(MenuContext),
       state = _objectWithoutPropertiesLoose(_React$useContext2, ["handleItemSelect"]);
 
   return state.visible ? /*#__PURE__*/React.createElement(MenuBackdrop, Object.assign({}, state), /*#__PURE__*/React.createElement(Reakit.Menu, Object.assign({}, props, state, {
     ref: ref,
-    className: classNames('reactist_menulist', className)
+    className: classNames('reactist_menulist', exceptionallySetClassName)
   }))) : null;
 });
 /**
@@ -3233,14 +3503,15 @@ var MenuList = /*#__PURE__*/forwardRefWithAs$1(function MenuList(_ref4, ref) {
  * callback.
  */
 
-var MenuItem = /*#__PURE__*/forwardRefWithAs$1(function MenuItem(_ref5, ref) {
+var MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref) {
   var value = _ref5.value,
       children = _ref5.children,
       onSelect = _ref5.onSelect,
       _ref5$hideOnSelect = _ref5.hideOnSelect,
       hideOnSelect = _ref5$hideOnSelect === void 0 ? true : _ref5$hideOnSelect,
       onClick = _ref5.onClick,
-      props = _objectWithoutPropertiesLoose(_ref5, ["value", "children", "onSelect", "hideOnSelect", "onClick"]);
+      exceptionallySetClassName = _ref5.exceptionallySetClassName,
+      props = _objectWithoutPropertiesLoose(_ref5, ["value", "children", "onSelect", "hideOnSelect", "onClick", "exceptionallySetClassName"]);
 
   var _React$useContext3 = React.useContext(MenuContext),
       handleItemSelect = _React$useContext3.handleItemSelect,
@@ -3256,7 +3527,8 @@ var MenuItem = /*#__PURE__*/forwardRefWithAs$1(function MenuItem(_ref5, ref) {
   }, [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value]);
   return /*#__PURE__*/React.createElement(Reakit.MenuItem, Object.assign({}, props, state, {
     ref: ref,
-    onClick: handleClick
+    onClick: handleClick,
+    className: exceptionallySetClassName
   }), children);
 });
 /**
@@ -3318,22 +3590,300 @@ var SubMenu = /*#__PURE__*/React.forwardRef(function SubMenu(_ref6, ref) {
  * before and/or after the group if you so wish.
  */
 
-var MenuGroup = /*#__PURE__*/forwardRefWithAs$1(function MenuGroud(_ref7, ref) {
+var MenuGroup = /*#__PURE__*/polymorphicComponent(function MenuGroud(_ref7, ref) {
   var label = _ref7.label,
       children = _ref7.children,
-      props = _objectWithoutPropertiesLoose(_ref7, ["label", "children"]);
+      exceptionallySetClassName = _ref7.exceptionallySetClassName,
+      props = _objectWithoutPropertiesLoose(_ref7, ["label", "children", "exceptionallySetClassName"]);
 
   var _React$useContext5 = React.useContext(MenuContext),
       state = _objectWithoutPropertiesLoose(_React$useContext5, ["handleItemSelect"]);
 
   return /*#__PURE__*/React.createElement(Reakit.MenuGroup, Object.assign({
     ref: ref
-  }, props, state), label ? /*#__PURE__*/React.createElement("div", {
+  }, props, state, {
+    className: exceptionallySetClassName
+  }), label ? /*#__PURE__*/React.createElement("div", {
     role: "presentation",
     className: "reactist_menugroup__label"
   }, 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;
@@ -3345,23 +3895,32 @@ 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;
 exports.Heading = Heading;
+exports.Hidden = Hidden;
+exports.HiddenVisually = HiddenVisually;
 exports.Icon = Icon;
 exports.Inline = Inline;
 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;
@@ -3375,6 +3934,9 @@ exports.Stack = Stack;
 exports.SubMenu = SubMenu;
 exports.SwitchField = SwitchField;
 exports.Tab = Tab;
+exports.TabAwareSlot = TabAwareSlot;
+exports.TabList = TabList;
+exports.TabPanel = TabPanel;
 exports.Tabs = Tabs;
 exports.Text = Text;
 exports.TextArea = TextArea;
@@ -3383,4 +3945,5 @@ exports.TextLink = TextLink;
 exports.Time = Time;
 exports.Tip = Tip;
 exports.Tooltip = Tooltip;
+exports.usePrevious = usePrevious;
 //# sourceMappingURL=reactist.cjs.development.js.map