@doist/reactist 10.0.0-beta.4 → 10.0.0-beta.8

package/dist/reactist.cjs.development.js

@@ -183,7 +183,7 @@ function mapResponsiveProp(fromValue, mapper) {
   };
 }
 
-var modules_54d944f2 = {"box":"_3aac345d","position-absolute":"_5f5fbe05","position-fixed":"_2e1dcb18","position-relative":"_6b073eae","position-sticky":"ed69c0f9","tablet-position-absolute":"b895daa3","tablet-position-fixed":"_81f67db7","tablet-position-relative":"bf7d2da5","tablet-position-sticky":"e0ab99ed","desktop-position-absolute":"_5dade286","desktop-position-fixed":"_584d7ee7","desktop-position-relative":"c7f56545","desktop-position-sticky":"_70b5ef21","display-block":"_5bca176b","display-flex":"_32670f8f","display-inline":"_3f9cb619","display-inlineBlock":"a42dded2","display-inlineFlex":"_7a45d80c","display-none":"a469c553","tablet-display-block":"_8e5cf5df","tablet-display-flex":"_640f3795","tablet-display-inline":"f1a1c131","tablet-display-inlineBlock":"e9f55809","tablet-display-inlineFlex":"_9fd7bd31","tablet-display-none":"_389a387a","desktop-display-block":"_3e730e39","desktop-display-flex":"_8407ca0e","desktop-display-inline":"_596653e1","desktop-display-inlineBlock":"eb198bac","desktop-display-inlineFlex":"c89ef13b","desktop-display-none":"_868c554e","minWidth-0":"a6e042e3","minWidth-xsmall":"_9ce11446","minWidth-small":"_2db5e251","minWidth-medium":"ef281ffc","minWidth-large":"f938efbe","minWidth-xlarge":"f87c0f55","maxWidth-xsmall":"_873d4d51","maxWidth-small":"_400d4800","maxWidth-medium":"_94ecdffd","maxWidth-large":"f9eeefb5","maxWidth-xlarge":"_2253ed9a","maxWidth-full":"bde40dfb","flexDirection-column":"c45f6767","flexDirection-row":"c167e8da","tablet-flexDirection-column":"c0ca97a9","tablet-flexDirection-row":"_45ebc391","desktop-flexDirection-column":"dfd69d4d","desktop-flexDirection-row":"f3d06da6","flexWrap-wrap":"_7fb6a141","flexWrap-nowrap":"_30a701b3","flexShrink-0":"_24cf9746","flexGrow-0":"d2a4825d","flexGrow-1":"a2a05bbf","alignItems-flexStart":"_4ada17a4","alignItems-center":"c2c1d3b2","alignItems-flexEnd":"_259506f5","alignItems-baseline":"_3cb51936","tablet-alignItems-flexStart":"_86497cb0","tablet-alignItems-center":"_5a281eb4","tablet-alignItems-flexEnd":"d7c8f9b0","tablet-alignItems-baseline":"_9b92f4b7","desktop-alignItems-flexStart":"_4d2b7f03","desktop-alignItems-center":"_521b4677","desktop-alignItems-flexEnd":"_239714b3","desktop-alignItems-baseline":"_49fa952b","justifyContent-flexStart":"_84c5c8b7","justifyContent-center":"_84df2447","justifyContent-flexEnd":"_96a7db47","justifyContent-spaceAround":"e7ad8d72","justifyContent-spaceBetween":"e5a5ea05","justifyContent-spaceEvenly":"_08952f29","tablet-justifyContent-flexStart":"_69d750a7","tablet-justifyContent-center":"be616f82","tablet-justifyContent-flexEnd":"_4e22f886","tablet-justifyContent-spaceAround":"_9b848fa4","tablet-justifyContent-spaceBetween":"_346ba50f","tablet-justifyContent-spaceEvenly":"_8e101549","desktop-justifyContent-flexStart":"_3e1b3f62","desktop-justifyContent-center":"a285086c","desktop-justifyContent-flexEnd":"_32759d54","desktop-justifyContent-spaceBetween":"_543f6141","overflow-hidden":"d91c9bdf","overflow-auto":"_438cafe6","overflow-visible":"_9527349d","overflow-scroll":"a086ce42","width-full":"d32e2047","height-full":"_2d523b97","bg-default":"_581ad1ab","bg-aside":"a554f678","bg-highlight":"_2d74468c","bg-selected":"eb3848be","borderRadius-standard":"_14fe8bc8","borderRadius-full":"c1bf716d","border-standard":"f605be96","textAlign-start":"_083a10ea","textAlign-center":"_8c05b9dc","textAlign-end":"e9c0981c","textAlign-justify":"a21c651d","tablet-textAlign-start":"_62b208d9","tablet-textAlign-center":"_7198bfc5","tablet-textAlign-end":"_4156cdf8","tablet-textAlign-justify":"_5dce5b3b","desktop-textAlign-start":"_526ba24a","desktop-textAlign-center":"f98d87d4","desktop-textAlign-end":"_9679b54a","desktop-textAlign-justify":"_4b25a07f"};
+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"};
 
@@ -251,7 +251,7 @@ var Box = /*#__PURE__*/polymorphicComponent(function Box(_ref, ref) {
   }), children);
 });
 
-var modules_67f2d07a = {"space-xsmall":"bc73ab9d","column":"_7efa4861","space-small":"c93ef522","space-medium":"a3bcceae","space-large":"_6e3b6830","space-xlarge":"c8935f26","space-xxlarge":"_0f819fef","tablet-space-xsmall":"b37242bb","tablet-space-small":"bbdf9471","tablet-space-medium":"_66c6998d","tablet-space-large":"bce245a1","tablet-space-xlarge":"fdff6b7f","tablet-space-xxlarge":"e4ec3d8d","desktop-space-xsmall":"_4a75307e","desktop-space-small":"_97b495ec","desktop-space-medium":"be376830","desktop-space-large":"_9b3b7633","desktop-space-xlarge":"_791a2950","desktop-space-xxlarge":"f49836a3","columnWidth-auto":"a4c294e6","columnWidth-1-2":"de029ae3","columnWidth-1-3":"_102223f4","columnWidth-2-3":"_35209410","columnWidth-1-4":"_785d4274","columnWidth-3-4":"d4b300a7","columnWidth-1-5":"c7e02813","columnWidth-2-5":"d305894b","columnWidth-3-5":"_420612f0","columnWidth-4-5":"a9c44d9e","tablet-tablet-space-xsmall":"b8d9d8fb"};
+var modules_67f2d07a = {"space-xsmall":"_6f59c771","column":"_91e05f0f","space-small":"_5a55af26","space-medium":"fa261310","space-large":"_6ebd4e46","space-xlarge":"_55ce4aea","space-xxlarge":"_04c9c3ac","tablet-space-xsmall":"ab76d8cd","tablet-space-small":"_14629bfb","tablet-space-medium":"_5b4e39ea","tablet-space-large":"ba270182","tablet-space-xlarge":"b96e7ec7","tablet-space-xxlarge":"d276612c","desktop-space-xsmall":"d7a73106","desktop-space-small":"_8f5e0e9e","desktop-space-medium":"_3a168411","desktop-space-large":"_0abcc12e","desktop-space-xlarge":"e0bafc60","desktop-space-xxlarge":"d2df9afd","columnWidth-auto":"b18d0b47","columnWidth-1-2":"_102a6b27","columnWidth-1-3":"_829872fe","columnWidth-2-3":"cf5aef9a","columnWidth-1-4":"_931bf714","columnWidth-3-4":"b0303130","columnWidth-1-5":"f6589a6f","columnWidth-2-5":"_2823aed9","columnWidth-3-5":"d00ba3bb","columnWidth-4-5":"_338f2d7c","tablet-tablet-space-xsmall":"_06582234"};
 
 var Column = /*#__PURE__*/polymorphicComponent(function Column(_ref, ref) {
   var _ref$width = _ref.width,
@@ -301,16 +301,16 @@ var Columns = /*#__PURE__*/polymorphicComponent(function Columns(_ref2, ref) {
   }), children);
 });
 
-var modules_c742c4d7 = {"divider":"_9b6c04bf","weight-strong":"_6354eb7c"};
+var modules_c742c4d7 = {"weight-primary":"_3f3a401c","weight-secondary":"_03b05b70","weight-tertiary":"b6f67ff8"};
 
 function Divider(_ref) {
   var _ref$weight = _ref.weight,
-      weight = _ref$weight === void 0 ? 'regular' : _ref$weight,
+      weight = _ref$weight === void 0 ? 'primary' : _ref$weight,
       props = _objectWithoutPropertiesLoose(_ref, ["weight"]);
 
   return /*#__PURE__*/React.createElement(Box, Object.assign({
     as: "hr",
-    className: [modules_c742c4d7.divider, weight !== 'regular' ? getClassNames(modules_c742c4d7, 'weight', weight) : null]
+    className: getClassNames(modules_c742c4d7, 'weight', weight)
   }, props));
 }
 
@@ -348,28 +348,28 @@ var Stack = /*#__PURE__*/polymorphicComponent(function Stack(_ref, ref) {
   var as = _ref.as,
       space = _ref.space,
       _ref$align = _ref.align,
-      align = _ref$align === void 0 ? 'left' : _ref$align,
+      align = _ref$align === void 0 ? 'start' : _ref$align,
       _ref$dividers = _ref.dividers,
-      dividers = _ref$dividers === void 0 ? false : _ref$dividers,
+      dividers = _ref$dividers === void 0 ? 'none' : _ref$dividers,
       children = _ref.children,
       exceptionallySetClassName = _ref.exceptionallySetClassName,
       props = _objectWithoutPropertiesLoose(_ref, ["as", "space", "align", "dividers", "children", "exceptionallySetClassName"]);
 
-  var alignProps = align === 'left' ? undefined : {
+  var alignProps = align === 'start' ? undefined : {
     width: 'full',
     flexDirection: 'column',
     display: 'flex',
     alignItems: mapResponsiveProp(align, function (align) {
-      return align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : 'center';
+      return align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center';
     })
   };
   return /*#__PURE__*/React.createElement(Box, Object.assign({}, props, alignProps, {
     as: as,
     className: [exceptionallySetClassName, getClassNames(modules_3af3b7ac, 'space', space)],
     ref: ref
-  }), dividers ? React.Children.map(flattenChildren(children), function (child, index) {
+  }), dividers !== 'none' ? React.Children.map(flattenChildren(children), function (child, index) {
     return index > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
-      weight: typeof dividers === 'string' ? dividers : undefined
+      weight: dividers
     }), child) : child;
   }) : children);
 });
@@ -551,7 +551,28 @@ function Alert(_ref) {
   }, /*#__PURE__*/React.createElement(CloseIcon, null))) : null));
 }
 
-var modules_c802dd57 = {"svg":"_95dc6d43","spinner":"_376ad002","spinnerBackground":"_0d462ef1"};
+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,
@@ -574,22 +595,9 @@ function Loading(_ref) {
     alignItems: "center",
     justifyContent: "center",
     role: "progressbar"
-  }), /*#__PURE__*/React__default.createElement("svg", {
-    "aria-hidden": true,
-    width: numericSize,
-    height: numericSize,
-    viewBox: "0 0 24 24",
-    className: modules_c802dd57.svg
-  }, /*#__PURE__*/React__default.createElement("g", {
-    fill: "none",
-    fillRule: "nonzero"
-  }, /*#__PURE__*/React__default.createElement("path", {
-    className: modules_c802dd57.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_c802dd57.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"
-  }))));
+  }), /*#__PURE__*/React__default.createElement(Spinner, {
+    size: numericSize
+  }));
 }
 
 var modules_1b547e7e = {"container":"_464500ae","tone-info":"_1abfe147","tone-positive":"_36ce9859","tone-caution":"f92214b7","tone-critical":"be6cf28e"};
@@ -782,7 +790,7 @@ function useDelay() {
   }, [clearTimeouts]);
 }
 
-var modules_b9569bce = {"baseButton":"_87170772","size-small":"d9f9fdf7","size-large":"_4dee42b4","iconButton":"_5f5bd879","startIcon":"b822f783","endIcon":"_77e64a49","variant-primary":"_769efd56","variant-secondary":"_1b1f9418","variant-tertiary":"b9267ccc","variant-quaternary":"_19687b17","tone-destructive":"_67b5f87d"};
+var modules_b9569bce = {"label":"_1f20c88a","baseButton":"_623015f3","size-small":"_062de645","size-normal":"_55e2a6a9","size-large":"cab32a7c","disabled":"e71c191a","iconButton":"_368efc16","startIcon":"d35389c1","endIcon":"_900d41d8","variant-primary":"_7c95e162","variant-secondary":"_9cb889aa","variant-tertiary":"_611b5b28","variant-quaternary":"_80c2bb84","tone-destructive":"ee13c455"};
 
 function preventDefault(event) {
   event.preventDefault();
@@ -808,6 +816,8 @@ var BaseButton = /*#__PURE__*/polymorphicComponent(function BaseButton(_ref, ref
       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,
@@ -815,23 +825,26 @@ var BaseButton = /*#__PURE__*/polymorphicComponent(function BaseButton(_ref, ref
       startIcon = _ref.startIcon,
       endIcon = _ref.endIcon,
       icon = _ref.icon,
-      props = _objectWithoutPropertiesLoose(_ref, ["as", "variant", "tone", "size", "disabled", "tooltip", "onClick", "exceptionallySetClassName", "children", "startIcon", "endIcon", "icon"]);
+      props = _objectWithoutPropertiesLoose(_ref, ["as", "variant", "tone", "size", "disabled", "loading", "tooltip", "onClick", "exceptionallySetClassName", "children", "startIcon", "endIcon", "icon"]);
 
+  var isDisabled = loading || disabled;
   var buttonElement = /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
     as: as,
     ref: ref,
-    "aria-disabled": disabled,
-    onClick: disabled ? preventDefault : onClick,
-    className: [exceptionallySetClassName, modules_b9569bce.baseButton, modules_b9569bce["variant-" + variant], modules_b9569bce["tone-" + tone], modules_b9569bce["size-" + size], icon ? modules_b9569bce.iconButton : null]
-  }), icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React.createElement(React.Fragment, null, startIcon ? /*#__PURE__*/React.createElement(Box, {
+    "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
-  }, startIcon) : null, children ? /*#__PURE__*/React.createElement("span", null, children) : null, endIcon ? /*#__PURE__*/React.createElement(Box, {
+  }, 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
-  }, endIcon) : null)); // If it's an icon-only button, make sure it uses the aria-label as tooltip if no tooltip was provided
+  }, 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, {
@@ -890,12 +903,10 @@ var ButtonLink = /*#__PURE__*/polymorphicComponent(function ButtonLink(_ref, ref
       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,
       exceptionallySetClassName = _ref.exceptionallySetClassName,
       _ref$openInNewTab = _ref.openInNewTab,
       openInNewTab = _ref$openInNewTab === void 0 ? false : _ref$openInNewTab,
-      props = _objectWithoutPropertiesLoose(_ref, ["as", "variant", "tone", "size", "disabled", "exceptionallySetClassName", "openInNewTab"]);
+      props = _objectWithoutPropertiesLoose(_ref, ["as", "variant", "tone", "size", "exceptionallySetClassName", "openInNewTab"]);
 
   return /*#__PURE__*/React.createElement(BaseButton, Object.assign({}, props, {
     as: as,
@@ -903,7 +914,6 @@ var ButtonLink = /*#__PURE__*/polymorphicComponent(function ButtonLink(_ref, ref
     variant: variant,
     tone: tone,
     size: size,
-    disabled: disabled,
     exceptionallySetClassName: exceptionallySetClassName,
     target: openInNewTab ? '_blank' : undefined,
     rel: openInNewTab ? 'noopener noreferrer' : undefined
@@ -1044,7 +1054,7 @@ var CheckboxField = /*#__PURE__*/React.forwardRef(function CheckboxField(_ref, r
     checked: isChecked,
     indeterminate: indeterminate,
     disabled: disabled
-  }), label ? /*#__PURE__*/React.createElement("span", null, label) : null);
+  }), label ? /*#__PURE__*/React.createElement(Text, null, label) : null);
 });
 
 var uid = 0;
@@ -1170,7 +1180,7 @@ function PasswordHiddenIcon(props) {
 
 var modules_3f03ead6 = {"inputWrapper":"_460d581b"};
 
-var modules_aaf25250 = {"inputWrapper":"_0cc2c509"};
+var modules_aaf25250 = {"inputWrapper":"dd9ffeab"};
 
 var PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref, ref) {
   var label = _ref.label,
@@ -1233,7 +1243,7 @@ var PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref, r
   });
 });
 
-var modules_1fa9b208 = {"selectWrapper":"d259b5cb"};
+var modules_1fa9b208 = {"selectWrapper":"_828e09c5"};
 
 var SelectField = /*#__PURE__*/React.forwardRef(function SelectField(_ref, ref) {
   var id = _ref.id,
@@ -1335,14 +1345,14 @@ var SwitchField = /*#__PURE__*/React.forwardRef(function SwitchField(_ref, ref)
     }
   }))), /*#__PURE__*/React.createElement("span", {
     className: modules_8e05f7c9.handle
-  })), /*#__PURE__*/React.createElement("span", {
-    className: modules_8e05f7c9.label
+  })), /*#__PURE__*/React.createElement(Text, {
+    exceptionallySetClassName: modules_8e05f7c9.label
   }, label)), hint ? /*#__PURE__*/React.createElement(FieldHint, {
     id: hintId
   }, hint) : null);
 });
 
-var modules_2728c236 = {"container":"b2fe9429"};
+var modules_2728c236 = {"container":"_5a579f96"};
 
 function TextArea(_ref) {
   var id = _ref.id,
@@ -1555,15 +1565,15 @@ function TabAwareSlot(_ref5) {
   }) : null;
 }
 
-var modules_8f59d13b = {"reach-portal":"a10ce414","fadein":"ee360cf7","container":"_0a2c8d99","medium":"_10a02e68","small":"d9fd58ab","large":"_6d0ae841","overlay":"_7697ed54","expand":"_66f243e6","buttonContainer":"_090ab6cf","closeButton":"a1a65bcc"};
+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 isInternalFrame(element) {
-  return element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe';
+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.
@@ -1604,7 +1614,7 @@ function Modal(_ref) {
     "data-testid": "modal-overlay"
   }, /*#__PURE__*/React.createElement(FocusLock, {
     autoFocus: autoFocus,
-    whiteList: isInternalFrame
+    whiteList: isNotInternalFrame
   }, /*#__PURE__*/React.createElement(dialog.DialogContent, Object.assign({}, props, {
     as: Box,
     borderRadius: "full",
@@ -1626,20 +1636,15 @@ function Modal(_ref) {
  * @see ModalHeader
  */
 
-
-function ModalCloseButton(_ref2) {
-  var label = _ref2.label,
-      props = _objectWithoutPropertiesLoose(_ref2, ["label"]);
-
+function ModalCloseButton(props) {
   var _React$useContext = React.useContext(ModalContext),
       onDismiss = _React$useContext.onDismiss;
 
-  return /*#__PURE__*/React.createElement("button", Object.assign({}, props, {
-    type: "button",
+  return /*#__PURE__*/React.createElement(Button, Object.assign({}, props, {
+    variant: "quaternary",
     onClick: onDismiss,
-    className: modules_8f59d13b.closeButton,
-    "aria-label": label
-  }), /*#__PURE__*/React.createElement(CloseIcon, null));
+    icon: /*#__PURE__*/React.createElement(CloseIcon, null)
+  }));
 }
 /**
  * Renders a standard modal header area with an optional close button.
@@ -1649,19 +1654,19 @@ function ModalCloseButton(_ref2) {
  * @see ModalBody
  */
 
-
-function ModalHeader(_ref3) {
-  var children = _ref3.children,
-      _ref3$button = _ref3.button,
-      button = _ref3$button === void 0 ? true : _ref3$button,
-      _ref3$withDivider = _ref3.withDivider,
-      withDivider = _ref3$withDivider === void 0 ? false : _ref3$withDivider,
-      exceptionallySetClassName = _ref3.exceptionallySetClassName,
-      props = _objectWithoutPropertiesLoose(_ref3, ["children", "button", "withDivider", "exceptionallySetClassName"]);
+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",
-    paddingX: "large",
+    paddingLeft: "large",
+    paddingRight: "small",
     paddingY: "small",
     className: exceptionallySetClassName
   }), /*#__PURE__*/React.createElement(Columns, {
@@ -1673,7 +1678,7 @@ function ModalHeader(_ref3) {
     width: "content",
     exceptionallySetClassName: modules_8f59d13b.buttonContainer
   }, typeof button !== 'boolean' ? button : button === true ? /*#__PURE__*/React.createElement(ModalCloseButton, {
-    label: "Close dialog"
+    "aria-label": "Close modal"
   }) : null))), withDivider ? /*#__PURE__*/React.createElement(Divider, null) : null);
 }
 /**
@@ -1689,11 +1694,10 @@ function ModalHeader(_ref3) {
  * @see ModalFooter
  */
 
-
-function ModalBody(_ref4) {
-  var exceptionallySetClassName = _ref4.exceptionallySetClassName,
-      children = _ref4.children,
-      props = _objectWithoutPropertiesLoose(_ref4, ["exceptionallySetClassName", "children"]);
+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;
@@ -1716,12 +1720,11 @@ function ModalBody(_ref4) {
  * @see ModalBody
  */
 
-
-function ModalFooter(_ref5) {
-  var exceptionallySetClassName = _ref5.exceptionallySetClassName,
-      _ref5$withDivider = _ref5.withDivider,
-      withDivider = _ref5$withDivider === void 0 ? false : _ref5$withDivider,
-      props = _objectWithoutPropertiesLoose(_ref5, ["exceptionallySetClassName", "withDivider"]);
+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"
@@ -1738,10 +1741,9 @@ function ModalFooter(_ref5) {
  * @see ModalFooter
  */
 
-
-function ModalActions(_ref6) {
-  var children = _ref6.children,
-      props = _objectWithoutPropertiesLoose(_ref6, ["children"]);
+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",