@doist/reactist 28.7.4 → 29.1.0

package/dist/reactist.cjs.development.js

@@ -115,19 +115,19 @@ function mapResponsiveProp(fromValue, mapper) {
     return {
         mobile: fromValue.mobile ? mapper(fromValue.mobile) : undefined,
         tablet: fromValue.tablet ? mapper(fromValue.tablet) : undefined,
-        desktop: fromValue.desktop ? mapper(fromValue.desktop) : undefined
+        desktop: fromValue.desktop ? mapper(fromValue.desktop) : undefined,
     };
 }
 
 var modules_54d944f2 = {"box":"_19abae45","position-absolute":"c77f2a47","position-fixed":"_2fe771e3","position-relative":"_7fb159a0","position-sticky":"_1b0c2c53","tablet-position-absolute":"fbfd01f5","tablet-position-fixed":"_718d00e5","tablet-position-relative":"ce0fef03","tablet-position-sticky":"_8ede9d51","desktop-position-absolute":"_5037d59d","desktop-position-fixed":"_2cf38f34","desktop-position-relative":"bf2d89a9","desktop-position-sticky":"_0a00a995","display-block":"_5e944bac","display-flex":"a7c6de33","display-inline":"_8ed03dfe","display-inlineBlock":"d7c72ae2","display-inlineFlex":"baf095bf","display-none":"fdecf61b","tablet-display-block":"e67bff4d","tablet-display-flex":"cd8908ce","tablet-display-inline":"_859da319","tablet-display-inlineBlock":"_9cfe10c7","tablet-display-inlineFlex":"bdc812ae","tablet-display-none":"_21f0dae7","desktop-display-block":"d94bf997","desktop-display-flex":"e6925ae5","desktop-display-inline":"_57151837","desktop-display-inlineBlock":"_7721cd07","desktop-display-inlineFlex":"_0e197a41","desktop-display-none":"dc1fe7a5","flexDirection-column":"_1e47f652","flexDirection-row":"_194d8611","tablet-flexDirection-column":"_11ca3004","tablet-flexDirection-row":"_7e4f2f2b","desktop-flexDirection-column":"fbca1929","desktop-flexDirection-row":"_50dd05a2","flexWrap-wrap":"afd15909","flexWrap-nowrap":"_7682c7ed","flexShrink-0":"b834b77e","flexGrow-0":"_89d517e2","flexGrow-1":"bfa58fdf","alignItems-flexStart":"_4e2075e2","alignItems-center":"_8ad6a17c","alignItems-flexEnd":"a6235493","alignItems-baseline":"_1e964f8a","tablet-alignItems-flexStart":"_87c0c7f8","tablet-alignItems-center":"_812a2195","tablet-alignItems-flexEnd":"_207fa4f7","tablet-alignItems-baseline":"_6415fbe8","desktop-alignItems-flexStart":"_84ec8c58","desktop-alignItems-center":"afdff695","desktop-alignItems-flexEnd":"_78607c32","desktop-alignItems-baseline":"_57428c98","justifyContent-flexStart":"_9e8363f8","justifyContent-center":"f88bdaf1","justifyContent-flexEnd":"_0315ed60","justifyContent-spaceAround":"_81fc01b2","justifyContent-spaceBetween":"_54d85bfe","justifyContent-spaceEvenly":"b09b6390","tablet-justifyContent-flexStart":"bea77b61","tablet-justifyContent-center":"_2f6925fc","tablet-justifyContent-flexEnd":"_462a9e07","tablet-justifyContent-spaceAround":"_1c555ae4","tablet-justifyContent-spaceBetween":"_7a9768a8","tablet-justifyContent-spaceEvenly":"_859b8158","desktop-justifyContent-flexStart":"c190fc20","desktop-justifyContent-center":"_73777561","desktop-justifyContent-flexEnd":"d2151eb8","desktop-justifyContent-spaceBetween":"b8ec7870","alignSelf-stretch":"d607c41c","alignSelf-flexStart":"_30b9c3a2","alignSelf-center":"f1f37bf1","alignSelf-flexEnd":"_341847ab","alignSelf-baseline":"_2c7dfaf8","tablet-alignSelf-stretch":"_8be172b1","tablet-alignSelf-flexStart":"_84af0ad2","tablet-alignSelf-center":"_2fb0b3f1","tablet-alignSelf-flexEnd":"d8b98da0","tablet-alignSelf-baseline":"_096c96ed","desktop-alignSelf-stretch":"_217cc45f","desktop-alignSelf-flexStart":"_29964d59","desktop-alignSelf-center":"e76ee627","desktop-alignSelf-flexEnd":"_7435c694","desktop-alignSelf-baseline":"_84758309","overflow-hidden":"_47471e4e","overflow-auto":"_37460640","overflow-visible":"_73d1ede9","overflow-scroll":"a39c32d7","height-full":"_5cede05a","bg-default":"b50b47ee","bg-aside":"_5912d165","bg-highlight":"c4b77c63","bg-selected":"_7ab4d8a9","bg-toast":"_9ce2e0c1","borderRadius-standard":"f6a2af5a","borderRadius-full":"_7e67e1f6","border-primary":"f5b8570f","border-secondary":"_5dd76b5f","border-tertiary":"_7c14c801","textAlign-start":"_57086b20","textAlign-center":"b7f35b86","textAlign-end":"_6596dbcd","textAlign-justify":"d5210e4f","tablet-textAlign-start":"_97da11d5","tablet-textAlign-center":"_9add5f3d","tablet-textAlign-end":"f8b12189","tablet-textAlign-justify":"d5acd111","desktop-textAlign-start":"b33bdab7","desktop-textAlign-center":"_0fc7972b","desktop-textAlign-end":"a0f648ae","desktop-textAlign-justify":"a0bdba20","overlayScroll":"d19e99ad"};
 
-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 modules_8b5c09cb = {"gap-none":"_64ed24f4","gap-xsmall":"_2580a74b","gap-small":"c68f8bf6","gap-medium":"_43e5f8e9","gap-large":"_966b120f","gap-xlarge":"f957894c","gap-xxlarge":"_8cca104b","tablet-gap-none":"_5797cee2","tablet-gap-xsmall":"_9015672f","tablet-gap-small":"_7ec86eec","tablet-gap-medium":"_714d7179","tablet-gap-large":"ae1deb59","tablet-gap-xlarge":"e1cfce55","tablet-gap-xxlarge":"_168a8ff8","desktop-gap-none":"_43e2b619","desktop-gap-xsmall":"_0ea9bf88","desktop-gap-small":"d451307a","desktop-gap-medium":"bf93cf66","desktop-gap-large":"_1430cddf","desktop-gap-xlarge":"fa00c93e","desktop-gap-xxlarge":"_6f3aee54"};
 
 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 modules_89b7671c = {"minWidth-0":"_68ab48ca","minWidth-xsmall":"_6fa2b565","minWidth-small":"dd50fabd","minWidth-medium":"e7e2c808","minWidth-large":"_6abbe25e","minWidth-xlarge":"_54f479ac","maxWidth-xsmall":"_148492bc","maxWidth-small":"bd023b96","maxWidth-medium":"e102903f","maxWidth-large":"_0e8d76d7","maxWidth-xlarge":"_47a031d0","maxWidth-full":"cd4c8183","width-0":"_5f5959e8","width-full":"_8c75067a","width-auto":"_56a651f6","width-maxContent":"_26f87bb8","width-minContent":"_07a6ab44","width-fitContent":"a87016fa","width-xsmall":"_1a972e50","width-small":"c96d8261","width-medium":"f3829d42","width-large":"_2caef228","width-xlarge":"_069e1491"};
+var 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 modules_8b5c09cb = {"gap-none":"_64ed24f4","gap-xsmall":"_2580a74b","gap-small":"c68f8bf6","gap-medium":"_43e5f8e9","gap-large":"_966b120f","gap-xlarge":"f957894c","gap-xxlarge":"_8cca104b","tablet-gap-none":"_5797cee2","tablet-gap-xsmall":"_9015672f","tablet-gap-small":"_7ec86eec","tablet-gap-medium":"_714d7179","tablet-gap-large":"ae1deb59","tablet-gap-xlarge":"e1cfce55","tablet-gap-xxlarge":"_168a8ff8","desktop-gap-none":"_43e2b619","desktop-gap-xsmall":"_0ea9bf88","desktop-gap-small":"d451307a","desktop-gap-medium":"bf93cf66","desktop-gap-large":"_1430cddf","desktop-gap-xlarge":"fa00c93e","desktop-gap-xxlarge":"_6f3aee54"};
+var modules_89b7671c = {"minWidth-0":"_68ab48ca","minWidth-xsmall":"_6fa2b565","minWidth-small":"dd50fabd","minWidth-medium":"e7e2c808","minWidth-large":"_6abbe25e","minWidth-xlarge":"_54f479ac","maxWidth-xsmall":"_148492bc","maxWidth-small":"bd023b96","maxWidth-medium":"e102903f","maxWidth-large":"_0e8d76d7","maxWidth-xlarge":"_47a031d0","maxWidth-full":"cd4c8183","width-0":"_5f5959e8","width-full":"_8c75067a","width-auto":"_56a651f6","width-maxContent":"_26f87bb8","width-minContent":"_07a6ab44","width-fitContent":"a87016fa","width-xsmall":"_1a972e50","width-small":"c96d8261","width-medium":"f3829d42","width-large":"_2caef228","width-xlarge":"_069e1491"};
 
 function getBoxClassNames(_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j;
@@ -188,7 +188,7 @@ var Box$1 = polymorphicComponent(function Box(_a, ref) {
             marginBottom: marginBottom,
             marginLeft: marginLeft,
             overlayScroll: overlayScroll,
-            className: className
+            className: className,
         }), ref: ref }), children);
 });
 
@@ -225,31 +225,6 @@ function Divider(_a) {
     return React__namespace.createElement(Box$1, tslib.__assign({ as: "hr", className: getClassNames(modules_c742c4d7, 'weight', weight) }, props));
 }
 
-var Inline = polymorphicComponent(function Inline(_a, ref) {
-    var as = _a.as, space = _a.space, _b = _a.align, align = _b === void 0 ? 'left' : _b, _c = _a.alignY, alignY = _c === void 0 ? 'center' : _c, children = _a.children, exceptionallySetClassName = _a.exceptionallySetClassName, props = tslib.__rest(_a, ["as", "space", "align", "alignY", "children", "exceptionallySetClassName"]);
-    return (React__namespace.createElement(Box$1, tslib.__assign({}, props, { as: as, display: "flex", flexWrap: "wrap", gap: space, className: exceptionallySetClassName, ref: ref, alignItems: mapResponsiveProp(alignY, function (alignY) {
-            return alignY === 'top' ? 'flexStart' : alignY === 'bottom' ? 'flexEnd' : 'center';
-        }), justifyContent: mapResponsiveProp(align, function (align) {
-            return align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : 'center';
-        }) }), children));
-});
-
-var Stack = polymorphicComponent(function Stack(_a, ref) {
-    var as = _a.as, space = _a.space, align = _a.align, _b = _a.dividers, dividers = _b === void 0 ? 'none' : _b, _c = _a.width, width = _c === void 0 ? 'full' : _c, children = _a.children, exceptionallySetClassName = _a.exceptionallySetClassName, props = tslib.__rest(_a, ["as", "space", "align", "dividers", "width", "children", "exceptionallySetClassName"]);
-    var alignItems = align === undefined
-        ? undefined
-        : mapResponsiveProp(align, function (align) {
-            return align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center';
-        });
-    return (React__namespace.createElement(Box$1, tslib.__assign({}, props, { display: "flex", flexDirection: "column", width: width, alignItems: alignItems, gap: space, as: as, className: exceptionallySetClassName, ref: ref }), dividers !== 'none'
-        ? React__namespace.Children.map(flattenChildren__default["default"](children), function (child, index) {
-            return index > 0 ? (React__namespace.createElement(React__namespace.Fragment, null,
-                React__namespace.createElement(Divider, { weight: dividers }),
-                child)) : (child);
-        })
-        : children));
-});
-
 var modules_4689e97e = {"hiddenOnPrint":"_0e595dea"};
 
 /**
@@ -287,7 +262,7 @@ var Hidden = polymorphicComponent(function Hidden(_a, ref) {
             : {
                 mobile: hiddenOnMobile ? 'none' : display,
                 tablet: hiddenOnTablet ? 'none' : display,
-                desktop: hiddenOnDesktop ? 'none' : display
+                desktop: hiddenOnDesktop ? 'none' : display,
             } }), children));
 });
 
@@ -302,23 +277,30 @@ var HiddenVisually = polymorphicComponent(function HiddenVisually(props, ref) {
     return (React__namespace.createElement(Box$1, tslib.__assign({}, props, { ref: ref, position: "absolute", overflow: "hidden", className: modules_61c16c43.hiddenVisually })));
 });
 
-var uid = 0;
-function uniqueId() {
-    return uid++;
-}
-function generateElementId(prefix) {
-    var num = uniqueId();
-    return "".concat(prefix, "-").concat(num);
-}
-function useId(providedId) {
-    var ref = React__namespace.useRef(providedId !== null && providedId !== void 0 ? providedId : null);
-    if (!ref.current) {
-        ref.current = generateElementId('element');
-    }
-    return ref.current;
-}
+var Inline = polymorphicComponent(function Inline(_a, ref) {
+    var as = _a.as, space = _a.space, _b = _a.align, align = _b === void 0 ? 'left' : _b, _c = _a.alignY, alignY = _c === void 0 ? 'center' : _c, children = _a.children, exceptionallySetClassName = _a.exceptionallySetClassName, props = tslib.__rest(_a, ["as", "space", "align", "alignY", "children", "exceptionallySetClassName"]);
+    return (React__namespace.createElement(Box$1, tslib.__assign({}, props, { as: as, display: "flex", flexWrap: "wrap", gap: space, className: exceptionallySetClassName, ref: ref, alignItems: mapResponsiveProp(alignY, function (alignY) {
+            return alignY === 'top' ? 'flexStart' : alignY === 'bottom' ? 'flexEnd' : 'center';
+        }), justifyContent: mapResponsiveProp(align, function (align) {
+            return align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : 'center';
+        }) }), children));
+});
 
-var modules_afa80466 = {"banner":"e1b2ef74","image":"_8d3ff024","title":"_9ad57971","description":"_99daf106","secondary":"_59ea31f7","icon":"b1ae548b","closeButton":"c2e4ec08","copy":"cd270dad","inlineLink":"cbbd2929","staticContent":"d3bd2674","actions":"_1a63a5e1","content":"_1705b6ee"};
+var Stack = polymorphicComponent(function Stack(_a, ref) {
+    var as = _a.as, space = _a.space, align = _a.align, _b = _a.dividers, dividers = _b === void 0 ? 'none' : _b, _c = _a.width, width = _c === void 0 ? 'full' : _c, children = _a.children, exceptionallySetClassName = _a.exceptionallySetClassName, props = tslib.__rest(_a, ["as", "space", "align", "dividers", "width", "children", "exceptionallySetClassName"]);
+    var alignItems = align === undefined
+        ? undefined
+        : mapResponsiveProp(align, function (align) {
+            return align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center';
+        });
+    return (React__namespace.createElement(Box$1, tslib.__assign({}, props, { display: "flex", flexDirection: "column", width: width, alignItems: alignItems, gap: space, as: as, className: exceptionallySetClassName, ref: ref }), dividers !== 'none'
+        ? React__namespace.Children.map(flattenChildren__default["default"](children), function (child, index) {
+            return index > 0 ? (React__namespace.createElement(React__namespace.Fragment, null,
+                React__namespace.createElement(Divider, { weight: dividers }),
+                child)) : (child);
+        })
+        : children));
+});
 
 var modules_c7f5018f = {"svg":"_51539197","spinner":"_54fbe2b3","tint":"a0c466ed","fill":"_745b73d3"};
 
@@ -336,7 +318,7 @@ var defaultShowTimeout = 500;
 var defaultHideTimeout = 100;
 var TooltipContext = React__namespace.createContext({
     showTimeout: defaultShowTimeout,
-    hideTimeout: defaultHideTimeout
+    hideTimeout: defaultHideTimeout,
 });
 function TooltipProvider(_a) {
     var _b = _a.showTimeout, showTimeout = _b === void 0 ? defaultShowTimeout : _b, _c = _a.hideTimeout, hideTimeout = _c === void 0 ? defaultHideTimeout : _c, children = _a.children;
@@ -349,7 +331,7 @@ var Tooltip = React__namespace.forwardRef(function (_a, ref) {
     var tooltip = react.useTooltipStore({
         placement: position,
         showTimeout: showTimeout !== null && showTimeout !== void 0 ? showTimeout : globalShowTimeout,
-        hideTimeout: hideTimeout !== null && hideTimeout !== void 0 ? hideTimeout : globalHideTimeout
+        hideTimeout: hideTimeout !== null && hideTimeout !== void 0 ? hideTimeout : globalHideTimeout,
     });
     React__namespace.useImperativeHandle(ref, function () { return tooltip; }, [tooltip]);
     var isOpen = tooltip.useState('open');
@@ -418,11 +400,6 @@ var IconButton = React__namespace.forwardRef(function IconButton(_a, ref) {
     return tooltipContent ? (React__namespace.createElement(Tooltip, { content: tooltipContent }, buttonElement)) : (buttonElement);
 });
 
-function CloseIcon(props) {
-    return (React__namespace.createElement("svg", tslib.__assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24" }, props),
-        React__namespace.createElement("path", { fill: "currentColor", d: "M5.146 5.146a.5.5 0 0 1 .708 0L12 11.293l6.146-6.147a.5.5 0 0 1 .638-.057l.07.057a.5.5 0 0 1 0 .708L12.707 12l6.147 6.146a.5.5 0 0 1 .057.638l-.057.07a.5.5 0 0 1-.708 0L12 12.707l-6.146 6.147a.5.5 0 0 1-.638.057l-.07-.057a.5.5 0 0 1 0-.708L11.293 12 5.146 5.854a.5.5 0 0 1-.057-.638z" })));
-}
-
 var modules_de8ae2e5 = {"info":"_447f8e53","upgrade":"cdb7a2b8","experiment":"_210efb55","warning":"cd91167f","error":"a52763ee","success":"c6229331"};
 
 var bannerIconForType = {
@@ -431,7 +408,7 @@ var bannerIconForType = {
     experiment: BannerExperimentIcon,
     warning: BannerWarningIcon,
     error: BannerErrorIcon,
-    success: BannerSuccessIcon
+    success: BannerSuccessIcon,
 };
 function BannerIcon(_a) {
     var type = _a.type, props = tslib.__rest(_a, ["type"]);
@@ -464,6 +441,11 @@ function BannerSuccessIcon(props) {
         React__namespace.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M21 12.25a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-5.555-2.99a.75.75 0 0 1 1.06 1.06l-5.303 5.303a.748.748 0 0 1-1.061 0L7.666 13.15a.75.75 0 1 1 1.06-1.06l1.945 1.944 4.774-4.773Z", clipRule: "evenodd" })));
 }
 
+function CloseIcon(props) {
+    return (React__namespace.createElement("svg", tslib.__assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24" }, props),
+        React__namespace.createElement("path", { fill: "currentColor", d: "M5.146 5.146a.5.5 0 0 1 .708 0L12 11.293l6.146-6.147a.5.5 0 0 1 .638-.057l.07.057a.5.5 0 0 1 0 .708L12.707 12l6.147 6.146a.5.5 0 0 1 .057.638l-.057.07a.5.5 0 0 1-.708 0L12 12.707l-6.146 6.147a.5.5 0 0 1-.638.057l-.07-.057a.5.5 0 0 1 0-.708L11.293 12 5.146 5.854a.5.5 0 0 1-.057-.638z" })));
+}
+
 var modules_3d05deee = {"default":"_468ce45c","inherit":"_54f92a1e","underline":"cdc8b08c","no-underline":"_06995bac","container":"d77fcdc6"};
 
 var TextLink = polymorphicComponent(function TextLink(_a, ref) {
@@ -476,6 +458,29 @@ var TextLink = polymorphicComponent(function TextLink(_a, ref) {
         ], ref: ref, target: openInNewTab ? '_blank' : undefined, rel: openInNewTab ? 'noopener noreferrer' : undefined })));
 });
 
+var uid = 0;
+function uniqueId() {
+    return uid++;
+}
+function generateElementId(prefix) {
+    var num = uniqueId();
+    return "".concat(prefix, "-").concat(num);
+}
+/**
+ * @deprecated Use `useId` available from React 18 or above instead.
+ */
+function useId(providedId) {
+    var ref = React__namespace.useRef(providedId !== null && providedId !== void 0 ? providedId : null);
+    // eslint-disable-next-line react-hooks/refs
+    if (!ref.current) {
+        ref.current = generateElementId('element');
+    }
+    // eslint-disable-next-line react-hooks/refs
+    return ref.current;
+}
+
+var modules_afa80466 = {"banner":"_84addf6f","image":"_95759431","title":"_4103765b","description":"cf9f3361","secondary":"f4b524bc","icon":"_423bcd02","closeButton":"_0f89a4a4","copy":"_141483aa","inlineLink":"fd918521","actions":"e16490a8","topContent":"b1b4f510","content":"_105440c8"};
+
 /**
  * Type guard to check if the action is an Action object (button or link)
  */
@@ -486,30 +491,32 @@ function isActionObject$1(action) {
         (action.type === 'button' || action.type === 'link'));
 }
 var Banner = React__namespace.forwardRef(function Banner(_a, ref) {
-    var id = _a.id, type = _a.type, title = _a.title, description = _a.description, action = _a.action, icon = _a.icon, image = _a.image, inlineLinks = _a.inlineLinks, closeLabel = _a.closeLabel, onClose = _a.onClose, props = tslib.__rest(_a, ["id", "type", "title", "description", "action", "icon", "image", "inlineLinks", "closeLabel", "onClose"]);
+    var id = _a.id, type = _a.type, title = _a.title, description = _a.description, children = _a.children, action = _a.action, icon = _a.icon, image = _a.image, inlineLinks = _a.inlineLinks, closeLabel = _a.closeLabel, onClose = _a.onClose, props = tslib.__rest(_a, ["id", "type", "title", "description", "children", "action", "icon", "image", "inlineLinks", "closeLabel", "onClose"]);
     var titleId = useId();
     var descriptionId = useId();
     var closeButton = onClose ? (React__namespace.createElement(IconButton, { exceptionallySetClassName: modules_afa80466.closeButton, variant: "quaternary", onClick: onClose, icon: React__namespace.createElement(CloseIcon, null), "aria-label": closeLabel !== null && closeLabel !== void 0 ? closeLabel : 'Close banner' })) : null;
     return (React__namespace.createElement(Box$1, tslib.__assign({}, props, { ref: ref, id: id, display: "flex", flexDirection: "column", justifyContent: "center", role: "status", "aria-labelledby": title ? titleId : descriptionId, "aria-describedby": title ? descriptionId : undefined, "aria-live": "polite", tabIndex: 0, borderRadius: "full", className: modules_afa80466.banner }),
         image ? React__namespace.createElement(Box$1, { className: modules_afa80466.image }, image) : null,
-        React__namespace.createElement(Box$1, { className: modules_afa80466.content, display: "flex", gap: "small", alignItems: "center" },
-            React__namespace.createElement(Box$1, { className: modules_afa80466.staticContent, display: "flex", gap: "small", flexGrow: 1 },
-                React__namespace.createElement(Box$1, { className: modules_afa80466.icon },
-                    type === 'neutral' ? icon : React__namespace.createElement(BannerIcon, { type: type }),
-                    closeButton),
-                React__namespace.createElement(Box$1, { className: modules_afa80466.copy, display: "flex", flexDirection: "column" },
-                    title ? (React__namespace.createElement(Box$1, { id: titleId, className: modules_afa80466.title }, title)) : null,
-                    React__namespace.createElement(Box$1, { id: descriptionId, className: [modules_afa80466.description, title ? modules_afa80466.secondary : null] },
-                        description, inlineLinks === null || inlineLinks === void 0 ? void 0 :
-                        inlineLinks.map(function (_a, index) {
-                            var label = _a.label, props = tslib.__rest(_a, ["label"]);
-                            return (React__namespace.createElement(React__namespace.Fragment, { key: index },
-                                React__namespace.createElement(TextLink, tslib.__assign({}, props, { exceptionallySetClassName: modules_afa80466.inlineLink }), label),
-                                index < inlineLinks.length - 1 ? React__namespace.createElement("span", null, " \u00B7 ") : ''));
-                        })))),
-            action || closeButton ? (React__namespace.createElement(Box$1, { className: modules_afa80466.actions, display: "flex", gap: "small" },
-                action ? (isActionObject$1(action) ? (action.type === 'button' ? (React__namespace.createElement(ActionButton, tslib.__assign({}, action))) : (React__namespace.createElement(ActionLink, tslib.__assign({}, action)))) : (action)) : null,
-                closeButton)) : null)));
+        React__namespace.createElement(Box$1, { className: modules_afa80466.content, display: "flex", gap: "small" },
+            React__namespace.createElement(Box$1, { className: modules_afa80466.icon },
+                type === 'neutral' ? icon : React__namespace.createElement(BannerIcon, { type: type }),
+                closeButton),
+            React__namespace.createElement(Box$1, { display: "flex", flexDirection: "column", gap: "small", flexGrow: 1 },
+                React__namespace.createElement(Box$1, { className: modules_afa80466.topContent, display: "flex", gap: "small", alignItems: "flexStart" },
+                    React__namespace.createElement(Box$1, { className: modules_afa80466.copy, display: "flex", flexDirection: "column", flexGrow: 1 },
+                        title ? (React__namespace.createElement(Box$1, { id: titleId, className: modules_afa80466.title }, title)) : null,
+                        React__namespace.createElement(Box$1, { id: descriptionId, className: [modules_afa80466.description, title ? modules_afa80466.secondary : null] },
+                            description, inlineLinks === null || inlineLinks === void 0 ? void 0 :
+                            inlineLinks.map(function (_a, index) {
+                                var label = _a.label, props = tslib.__rest(_a, ["label"]);
+                                return (React__namespace.createElement(React__namespace.Fragment, { key: index },
+                                    React__namespace.createElement(TextLink, tslib.__assign({}, props, { exceptionallySetClassName: modules_afa80466.inlineLink }), label),
+                                    index < inlineLinks.length - 1 ? React__namespace.createElement("span", null, " \u00B7 ") : ''));
+                            }))),
+                    action || closeButton ? (React__namespace.createElement(Box$1, { className: modules_afa80466.actions, display: "flex", gap: "small" },
+                        action ? (isActionObject$1(action) ? (action.type === 'button' ? (React__namespace.createElement(ActionButton, tslib.__assign({}, action))) : (React__namespace.createElement(ActionLink, tslib.__assign({}, action)))) : (action)) : null,
+                        closeButton)) : null),
+                children))));
 });
 function ActionButton(_a) {
     _a.type; var label = _a.label, props = tslib.__rest(_a, ["type", "label"]);
@@ -524,7 +531,7 @@ var sizeMapping = {
     xsmall: 16,
     small: 24,
     medium: 36,
-    large: 48
+    large: 48,
 };
 function Loading(_a) {
     var _b;
@@ -543,7 +550,7 @@ var alertIconForTone = {
     info: AlertInfoIcon,
     positive: AlertPositiveIcon,
     caution: AlertCautionIcon,
-    critical: AlertCriticalIcon
+    critical: AlertCriticalIcon,
 };
 function AlertIcon(_a) {
     var tone = _a.tone, props = tslib.__rest(_a, ["tone"]);
@@ -724,7 +731,7 @@ function useToastsAnimation() {
         Array.from(refs.entries()).forEach(function (_a) {
             var id = _a[0], element = _a[1];
             if (!element) {
-                refs["delete"](id);
+                refs.delete(id);
                 return;
             }
             var prevTop = positions.get(id);
@@ -734,7 +741,7 @@ function useToastsAnimation() {
                 animations.push({
                     element: element,
                     transition: ENTRANCE_TRANSITION,
-                    transforms: [{ property: 'transform', from: "translateY(".concat(prevTop - top, "px)") }]
+                    transforms: [{ property: 'transform', from: "translateY(".concat(prevTop - top, "px)") }],
                 });
             }
             else if (typeof prevTop !== 'number') {
@@ -745,7 +752,7 @@ function useToastsAnimation() {
                     transforms: [
                         { property: 'transform', from: "translateY(".concat(height, "px)") },
                         { property: 'opacity', from: '0' },
-                    ]
+                    ],
                 });
             }
             positions.set(id, element.getBoundingClientRect().top);
@@ -763,7 +770,7 @@ function useToastsAnimation() {
                 element: element,
                 transforms: [{ property: 'opacity', to: '0' }],
                 transition: EXIT_TRANSITION,
-                done: onAnimationDone
+                done: onAnimationDone,
             });
         }
     }, [refs]);
@@ -958,7 +965,7 @@ 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'
+    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(_a) {
     var checked = _a.checked, indeterminate = _a.indeterminate, disabled = _a.disabled;
@@ -985,8 +992,6 @@ function CheckboxIcon(_a) {
         React__namespace.createElement("path", { fill: "currentColor", fillRule: "nonzero", d: svgPath[pathKey] })));
 }
 
-var modules_664a6a80 = {"disabled":"_131a2ca4","checked":"_95b1556d","keyFocused":"_49de7ebd","icon":"_6b4b1851","label":"_9047f3bd","container":"_84dfdb83"};
-
 /**
  * Sets both a function and object React ref.
  */
@@ -1022,6 +1027,8 @@ function useForkRef() {
     refs);
 }
 
+var modules_664a6a80 = {"disabled":"_131a2ca4","checked":"_95b1556d","keyFocused":"_49de7ebd","icon":"_6b4b1851","label":"_9047f3bd","container":"_84dfdb83"};
+
 var CheckboxField = React__namespace.forwardRef(function CheckboxField(_a, ref) {
     var _b, _c, _d;
     var label = _a.label, icon = _a.icon, disabled = _a.disabled, indeterminate = _a.indeterminate, defaultChecked = _a.defaultChecked, onChange = _a.onChange, props = tslib.__rest(_a, ["label", "icon", "disabled", "indeterminate", "defaultChecked", "onChange"]);
@@ -1071,13 +1078,6 @@ var CheckboxField = React__namespace.forwardRef(function CheckboxField(_a, ref)
             React__namespace.createElement(Text, null, label))) : null));
 });
 
-function PasswordVisibleIcon(props) {
-    return (React__namespace.createElement("svg", tslib.__assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24" }, props),
-        React__namespace.createElement("g", { fill: "none", fillRule: "evenodd", stroke: "gray" },
-            React__namespace.createElement("path", { d: "M21.358 12C17.825 7.65 14.692 5.5 12 5.5c-2.624 0-5.67 2.043-9.097 6.181a.5.5 0 0 0 0 .638C6.331 16.457 9.376 18.5 12 18.5c2.692 0 5.825-2.15 9.358-6.5z" }),
-            React__namespace.createElement("circle", { cx: "12", cy: "12", r: "3.5" }))));
-}
-
 function PasswordHiddenIcon(props) {
     return (React__namespace.createElement("svg", tslib.__assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24" }, props),
         React__namespace.createElement("g", { fill: "gray", fillRule: "evenodd", transform: "translate(2 4)" },
@@ -1086,6 +1086,13 @@ function PasswordHiddenIcon(props) {
             React__namespace.createElement("rect", { width: "21", height: "1", x: "-.722", y: "7.778", rx: ".5", transform: "rotate(-45 9.778 8.278)" }))));
 }
 
+function PasswordVisibleIcon(props) {
+    return (React__namespace.createElement("svg", tslib.__assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24" }, props),
+        React__namespace.createElement("g", { fill: "none", fillRule: "evenodd", stroke: "gray" },
+            React__namespace.createElement("path", { d: "M21.358 12C17.825 7.65 14.692 5.5 12 5.5c-2.624 0-5.67 2.043-9.097 6.181a.5.5 0 0 0 0 .638C6.331 16.457 9.376 18.5 12 18.5c2.692 0 5.825-2.15 9.358-6.5z" }),
+            React__namespace.createElement("circle", { cx: "12", cy: "12", r: "3.5" }))));
+}
+
 var modules_540a88ff = {"auxiliaryLabel":"bfa9e249","bordered":"e8d81883","error":"_656b054e","primaryLabel":"_0eded49a","loadingIcon":"fbf1bee1","container":"d6795f2d"};
 
 // Define the remaining characters before the character count turns red
@@ -1110,14 +1117,14 @@ function validateInputLength(_a) {
     if (!maxLength) {
         return {
             count: null,
-            tone: 'neutral'
+            tone: 'neutral',
         };
     }
     var currentLength = String(value || '').length;
     var isNearMaxLength = maxLength - currentLength <= MAX_LENGTH_THRESHOLD;
     return {
         count: "".concat(currentLength, "/").concat(maxLength),
-        tone: isNearMaxLength ? 'error' : 'neutral'
+        tone: isNearMaxLength ? 'error' : 'neutral',
     };
 }
 /**
@@ -1128,8 +1135,10 @@ function BaseField(_a) {
     var id = useId(originalId);
     var messageId = useId();
     var inputLength = validateInputLength({ value: value, maxLength: maxLength });
-    var _f = React__namespace.useState(inputLength.count), characterCount = _f[0], setCharacterCount = _f[1];
-    var _g = React__namespace.useState(inputLength.tone), characterCountTone = _g[0], setCharacterCountTone = _g[1];
+    var _f = React__namespace.useState(value), previousValue = _f[0], setPreviousValue = _f[1];
+    var _g = React__namespace.useState(maxLength), previousMaxLength = _g[0], setPreviousMaxLength = _g[1];
+    var _h = React__namespace.useState(inputLength.count), characterCount = _h[0], setCharacterCount = _h[1];
+    var _j = React__namespace.useState(inputLength.tone), characterCountTone = _j[0], setCharacterCountTone = _j[1];
     var ariaDescribedBy = originalAriaDescribedBy !== null && originalAriaDescribedBy !== void 0 ? originalAriaDescribedBy : (message ? messageId : null);
     var renderCharacterCountBelow = characterCountPosition === 'below' && characterCount !== null;
     var renderCharacterCountInline = characterCountPosition === 'inline' && characterCount !== null;
@@ -1142,24 +1151,19 @@ function BaseField(_a) {
             }
             var inputLength = validateInputLength({
                 value: event.currentTarget.value,
-                maxLength: maxLength
+                maxLength: maxLength,
             });
             setCharacterCount(inputLength.count);
             setCharacterCountTone(inputLength.tone);
         }, 
         // If the character count is inline, we pass it as a prop to the children element so it can be rendered inline
         characterCountElement: renderCharacterCountInline ? renderCharacterCount() : null });
-    React__namespace.useEffect(function updateCharacterCountOnPropChange() {
-        if (!maxLength) {
-            return;
-        }
-        var inputLength = validateInputLength({
-            value: value,
-            maxLength: maxLength
-        });
+    if (value !== previousValue || maxLength !== previousMaxLength) {
+        setPreviousValue(value);
+        setPreviousMaxLength(maxLength);
         setCharacterCount(inputLength.count);
         setCharacterCountTone(inputLength.tone);
-    }, [maxLength, value]);
+    }
     return (React__namespace.createElement(Stack, { space: "xsmall", hidden: hidden },
         React__namespace.createElement(Box$1, { display: "flex", flexDirection: "row", className: [
                 className,
@@ -1179,7 +1183,7 @@ function BaseField(_a) {
             characterCountPosition === 'below' ? (React__namespace.createElement(Column, { width: "content" }, renderCharacterCount())) : null)) : null));
 }
 
-var modules_aaf25250 = {"inputWrapper":"_3aa2a591","readOnly":"_88dd4657","bordered":"f9ddac83","error":"_7b4ae67d","slot":"_92010b01"};
+var modules_aaf25250 = {"inputWrapper":"b1fcd7d9","readOnly":"_2075eb4a","bordered":"_2134b64f","error":"_097b28b0","slot":"_7c4f9584"};
 
 var TextField = React__namespace.forwardRef(function TextField(_a, ref) {
     var _b = _a.variant, variant = _b === void 0 ? 'default' : _b, id = _a.id, label = _a.label, value = _a.value, auxiliaryLabel = _a.auxiliaryLabel, message = _a.message, tone = _a.tone, _c = _a.type, type = _c === void 0 ? 'text' : _c, maxWidth = _a.maxWidth, maxLength = _a.maxLength, hidden = _a.hidden, ariaDescribedBy = _a["aria-describedby"], startSlot = _a.startSlot, endSlot = _a.endSlot, originalOnChange = _a.onChange, _d = _a.characterCountPosition, characterCountPosition = _d === void 0 ? 'below' : _d, _e = _a.endSlotPosition, endSlotPosition = _e === void 0 ? 'bottom' : _e, props = tslib.__rest(_a, ["variant", "id", "label", "value", "auxiliaryLabel", "message", "tone", "type", "maxWidth", "maxLength", "hidden", 'aria-describedby', "startSlot", "endSlot", "onChange", "characterCountPosition", "endSlotPosition"]);
@@ -1223,7 +1227,7 @@ var PasswordField = React__namespace.forwardRef(function PasswordField(_a, ref)
             React__namespace.createElement(IconButton, { variant: "quaternary", icon: React__namespace.createElement(Icon, { "aria-hidden": true }), "aria-label": togglePasswordLabel, onClick: function () { return setPasswordVisible(function (v) { return !v; }); } })) })));
 });
 
-var modules_1fa9b208 = {"selectWrapper":"b2a0c397","bordered":"_85aa4d58","error":"f79ed3fb"};
+var modules_1fa9b208 = {"selectWrapper":"_7f5f473c","bordered":"_63e2fa62","error":"_3a255678"};
 
 var SelectField = React__namespace.forwardRef(function SelectField(_a, ref) {
     var _b = _a.variant, variant = _b === void 0 ? 'default' : _b, id = _a.id, label = _a.label, value = _a.value, auxiliaryLabel = _a.auxiliaryLabel, message = _a.message, tone = _a.tone, maxWidth = _a.maxWidth, children = _a.children, hidden = _a.hidden, ariaDescribedBy = _a["aria-describedby"], originalOnChange = _a.onChange, props = tslib.__rest(_a, ["variant", "id", "label", "value", "auxiliaryLabel", "message", "tone", "maxWidth", "children", "hidden", 'aria-describedby', "onChange"]);
@@ -1394,10 +1398,10 @@ function Avatar(_a) {
     var style = avatarUrl
         ? {
             backgroundImage: "url(".concat(avatarUrl, ")"),
-            textIndent: '-9999px'
+            textIndent: '-9999px', // hide the initials
         }
         : {
-            backgroundColor: colorList[emailToIndex(user.email, colorList.length)]
+            backgroundColor: colorList[emailToIndex(user.email, colorList.length)],
         };
     var sizeClassName = getClassNames(modules_08f3eeac, 'size', avatarSize);
     return (React__namespace.createElement(Box$1, tslib.__assign({ className: [className, modules_08f3eeac.avatar, sizeClassName, exceptionallySetClassName], style: style }, props), userInitials));
@@ -1412,122 +1416,262 @@ function Badge(_a) {
         , display: "inline", className: [modules_33c7c985.badge, modules_33c7c985["badge-".concat(tone)]] }), label));
 }
 
-var modules_8f59d13b = {"overlay":"_756b318e","fadein":"_21966801","fitContent":"_52bde55e","full":"bf469f5d","large":"_3208ba07","medium":"_29f86ad4","small":"_64c0762d","xsmall":"_3196b4d0","xlarge":"_3517025e","expand":"_8d20cc11","buttonContainer":"_37ed43a6","headerContent":"_7df92d5c","container":"_46152754"};
-
-var ModalContext = React__namespace.createContext({
-    onDismiss: undefined,
-    height: 'fitContent',
-    dividers: undefined
+var MenuContext = React__namespace.createContext({
+    menuStore: null,
+    handleItemSelect: function () { return undefined; },
+    getAnchorRect: null,
+    setAnchorRect: function () { return undefined; },
 });
-function isNotInternalFrame(element) {
-    return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe');
-}
+var SubMenuContext = React__namespace.createContext({ isSubMenu: false });
 /**
- * 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
+ * Wrapper component to control a menu. It does not render anything, only providing the state
+ * management for the menu components inside it.
  */
-function Modal(_a) {
-    var isOpen = _a.isOpen, onDismiss = _a.onDismiss, _b = _a.height, height = _b === void 0 ? 'fitContent' : _b, dividers = _a.dividers, _c = _a.width, width = _c === void 0 ? 'medium' : _c, exceptionallySetClassName = _a.exceptionallySetClassName, exceptionallySetOverlayClassName = _a.exceptionallySetOverlayClassName, _d = _a.autoFocus, autoFocus = _d === void 0 ? true : _d, _e = _a.hideOnEscape, hideOnEscape = _e === void 0 ? true : _e, _f = _a.hideOnInteractOutside, hideOnInteractOutside = _f === void 0 ? true : _f, children = _a.children, portalElement = _a.portalElement, onKeyDown = _a.onKeyDown; 
-    // @ts-expect-error we want to make sure to not pass it to the Dialog component
-    _a.className; var props = tslib.__rest(_a, ["isOpen", "onDismiss", "height", "dividers", "width", "exceptionallySetClassName", "exceptionallySetOverlayClassName", "autoFocus", "hideOnEscape", "hideOnInteractOutside", "children", "portalElement", "onKeyDown", "className"]);
-    var setOpen = React__namespace.useCallback(function (visible) {
-        if (!visible) {
-            onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
-        }
-    }, [onDismiss]);
-    var store = react.useDialogStore({ open: isOpen, setOpen: setOpen });
-    var contextValue = React__namespace.useMemo(function () { return ({ onDismiss: onDismiss, height: height, dividers: dividers }); }, [
-        onDismiss,
-        height,
-        dividers,
-    ]);
-    var portalRef = React__namespace.useRef(null);
-    var dialogRef = React__namespace.useRef(null);
-    var backdropRef = React__namespace.useRef(null);
-    var handleBackdropClick = React__namespace.useCallback(function (event) {
-        var _a, _b;
-        if (
-        // The focus lock element takes up the same space as the backdrop and is where the event bubbles up from,
-        // so instead of checking the backdrop as the event target, we need to make sure it's just above the dialog
-        !((_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) &&
-            (
-            // Events fired from other portals will bubble up to the backdrop, even if it isn't a child in the DOM
-            (_b = backdropRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target))) {
-            event.stopPropagation();
-            onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
-        }
-    }, [onDismiss]);
-    React__namespace.useLayoutEffect(function disableAccessibilityTreeOutside() {
-        if (!isOpen || !portalRef.current) {
-            return;
-        }
-        return ariaHidden.hideOthers(portalRef.current);
-    }, [isOpen]);
-    var handleKeyDown = React__namespace.useCallback(function handleKeyDown(event) {
-        if (hideOnEscape &&
-            onDismiss != null &&
-            event.key === 'Escape' &&
-            !event.defaultPrevented) {
-            event.stopPropagation();
-            onDismiss();
-        }
-        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-    }, [onDismiss, hideOnEscape, onKeyDown]);
-    if (!isOpen) {
-        return null;
-    }
-    return (React__namespace.createElement(react.Portal, { portalRef: portalRef, portalElement: portalElement },
-        React__namespace.createElement(Box$1, { "data-testid": "modal-overlay", "data-overlay": true, className: classNames__default["default"](modules_8f59d13b.overlay, modules_8f59d13b[height], modules_8f59d13b[width], exceptionallySetOverlayClassName), 
-            /**
-             * We're using `onPointerDown` instead of `onClick` to prevent the modal from
-             * closing when the click starts inside the modal and ends on the backdrop.
-             */
-            onPointerDown: hideOnInteractOutside ? handleBackdropClick : undefined, ref: backdropRef },
-            React__namespace.createElement(FocusLock__default["default"], { autoFocus: autoFocus, whiteList: isNotInternalFrame, returnFocus: true, crossFrame: false },
-                React__namespace.createElement(react.Dialog, tslib.__assign({}, props, { ref: dialogRef, render: React__namespace.createElement(Box$1, { borderRadius: "full", background: "default", display: "flex", flexDirection: "column", overflow: "hidden", height: height === 'expand' ? 'full' : undefined, flexGrow: height === 'expand' ? 1 : 0 }), className: classNames__default["default"](exceptionallySetClassName, modules_8f59d13b.container), store: store, preventBodyScroll: true, 
-                    // Disable focus lock as we set up our own using ReactFocusLock
-                    modal: false, autoFocus: false, autoFocusOnShow: false, autoFocusOnHide: false, 
-                    // Disable portal and backdrop as we control their markup
-                    portal: false, backdrop: false, hideOnInteractOutside: false, hideOnEscape: false, onKeyDown: handleKeyDown }),
-                    React__namespace.createElement(ModalContext.Provider, { value: contextValue }, children))))));
+function Menu(_a) {
+    var children = _a.children, onItemSelect = _a.onItemSelect, props = tslib.__rest(_a, ["children", "onItemSelect"]);
+    var _b = React__namespace.useState(null), anchorRect = _b[0], setAnchorRect = _b[1];
+    var getAnchorRect = React__namespace.useMemo(function () { return (anchorRect ? function () { return anchorRect; } : null); }, [anchorRect]);
+    var menuStore = react.useMenuStore(tslib.__assign({ focusLoop: true }, props));
+    var value = React__namespace.useMemo(function () { return ({ menuStore: menuStore, handleItemSelect: onItemSelect, getAnchorRect: getAnchorRect, setAnchorRect: setAnchorRect }); }, [menuStore, onItemSelect, getAnchorRect, setAnchorRect]);
+    return React__namespace.createElement(MenuContext.Provider, { value: value }, children);
 }
 /**
- * The close button rendered by ModalHeader. Provided independently so that consumers can customize
- * the button's label.
- *
- * @see ModalHeader
+ * A button to toggle a dropdown menu open or closed.
  */
-function ModalCloseButton(props) {
-    var onDismiss = React__namespace.useContext(ModalContext).onDismiss;
-    var _a = React__namespace.useState(false), includeInTabOrder = _a[0], setIncludeInTabOrder = _a[1];
-    var _b = React__namespace.useState(false), isMounted = _b[0], setIsMounted = _b[1];
-    React__namespace.useEffect(function skipAutoFocus() {
-        if (isMounted) {
-            setIncludeInTabOrder(true);
-        }
-        else {
-            setIsMounted(true);
-        }
-    }, [isMounted]);
-    return (React__namespace.createElement(IconButton, tslib.__assign({}, props, { variant: "quaternary", onClick: onDismiss, icon: React__namespace.createElement(CloseIcon, null), tabIndex: includeInTabOrder ? 0 : -1 })));
-}
+var MenuButton = React__namespace.forwardRef(function MenuButton(_a, ref) {
+    var exceptionallySetClassName = _a.exceptionallySetClassName, props = tslib.__rest(_a, ["exceptionallySetClassName"]);
+    var menuStore = React__namespace.useContext(MenuContext).menuStore;
+    if (!menuStore) {
+        throw new Error('MenuButton must be wrapped in <Menu/>');
+    }
+    return (React__namespace.createElement(react.MenuButton, tslib.__assign({}, props, { store: menuStore, ref: ref, className: classNames__default["default"]('reactist_menubutton', exceptionallySetClassName) })));
+});
+var ContextMenuTrigger = React__namespace.forwardRef(function ContextMenuTrigger(_a, ref) {
+    var render = _a.render, props = tslib.__rest(_a, ["render"]);
+    var _b = React__namespace.useContext(MenuContext), setAnchorRect = _b.setAnchorRect, menuStore = _b.menuStore;
+    if (!menuStore) {
+        throw new Error('ContextMenuTrigger must be wrapped in <Menu/>');
+    }
+    var handleContextMenu = React__namespace.useCallback(function handleContextMenu(event) {
+        event.preventDefault();
+        setAnchorRect({ x: event.clientX, y: event.clientY });
+        menuStore.show();
+    }, [setAnchorRect, menuStore]);
+    var isOpen = menuStore.useState('open');
+    React__namespace.useEffect(function () {
+        if (!isOpen)
+            setAnchorRect(null);
+    }, [isOpen, setAnchorRect]);
+    return React__namespace.createElement(react.Role.div, tslib.__assign({}, props, { onContextMenu: handleContextMenu, ref: ref, render: render }));
+});
 /**
- * Renders a standard modal header area with an optional close button.
- *
- * @see Modal
- * @see ModalFooter
- * @see ModalBody
+ * The dropdown menu itself, containing a list of menu items.
  */
-function ModalHeader(_a) {
-    var children = _a.children, _b = _a.button, button = _b === void 0 ? true : _b, _c = _a.withDivider, withDivider = _c === void 0 ? false : _c, exceptionallySetClassName = _a.exceptionallySetClassName, props = tslib.__rest(_a, ["children", "button", "withDivider", "exceptionallySetClassName"]);
-    var dividers = React__namespace.useContext(ModalContext).dividers;
-    return (React__namespace.createElement(React__namespace.Fragment, null,
-        React__namespace.createElement(Box$1, tslib.__assign({}, props, { as: "header", paddingLeft: "large", paddingRight: button === false || button === null ? 'large' : 'small', paddingY: "small", className: exceptionallySetClassName }),
+var MenuList = React__namespace.forwardRef(function MenuList(_a, ref) {
+    var exceptionallySetClassName = _a.exceptionallySetClassName, _b = _a.modal, modal = _b === void 0 ? true : _b, flip = _a.flip, props = tslib.__rest(_a, ["exceptionallySetClassName", "modal", "flip"]);
+    var _c = React__namespace.useContext(MenuContext), menuStore = _c.menuStore, getAnchorRect = _c.getAnchorRect;
+    if (!menuStore) {
+        throw new Error('MenuList must be wrapped in <Menu/>');
+    }
+    var isSubMenu = React__namespace.useContext(SubMenuContext).isSubMenu;
+    var isOpen = menuStore.useState('open');
+    return isOpen ? (React__namespace.createElement(react.Portal, { preserveTabOrder: true },
+        React__namespace.createElement(react.Menu, tslib.__assign({}, props, { store: menuStore, gutter: 8, shift: 4, ref: ref, className: classNames__default["default"]('reactist_menulist', exceptionallySetClassName), getAnchorRect: getAnchorRect !== null && getAnchorRect !== void 0 ? getAnchorRect : undefined, modal: modal, flip: flip !== null && flip !== void 0 ? flip : (isSubMenu ? 'left bottom' : undefined) })))) : null;
+});
+/**
+ * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`
+ * callback.
+ */
+var MenuItem = React__namespace.forwardRef(function MenuItem(_a, ref) {
+    var value = _a.value, children = _a.children, onSelect = _a.onSelect, _b = _a.hideOnSelect, hideOnSelect = _b === void 0 ? true : _b, onClick = _a.onClick, exceptionallySetClassName = _a.exceptionallySetClassName, props = tslib.__rest(_a, ["value", "children", "onSelect", "hideOnSelect", "onClick", "exceptionallySetClassName"]);
+    var _c = React__namespace.useContext(MenuContext), handleItemSelect = _c.handleItemSelect, menuStore = _c.menuStore;
+    if (!menuStore) {
+        throw new Error('MenuItem must be wrapped in <Menu/>');
+    }
+    var hide = menuStore.hide;
+    var handleClick = React__namespace.useCallback(function handleClick(event) {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        var onSelectResult = onSelect && !event.defaultPrevented ? onSelect() : undefined;
+        var shouldClose = onSelectResult !== false && hideOnSelect;
+        handleItemSelect === null || handleItemSelect === void 0 ? void 0 : handleItemSelect(value);
+        if (shouldClose)
+            hide();
+    }, [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value]);
+    return (React__namespace.createElement(react.MenuItem, tslib.__assign({}, props, { store: menuStore, ref: ref, onClick: handleClick, className: exceptionallySetClassName, hideOnClick: false }), children));
+});
+/**
+ * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have
+ * a sub-menu.
+ *
+ * Its children are expected to have the structure of a first level menu (a `MenuButton` and a
+ * `MenuList`).
+ *
+ * ```jsx
+ * <MenuItem label="Edit profile" />
+ * <SubMenu>
+ *   <MenuButton>More options</MenuButton>
+ *   <MenuList>
+ *     <MenuItem label="Preferences" />
+ *     <MenuItem label="Sign out" />
+ *   </MenuList>
+ * </SubMenu>
+ * ```
+ *
+ * The `MenuButton` will become a menu item in the current menu items list, and it will lead to
+ * opening a sub-menu with the menu items list below it.
+ */
+var SubMenu = React__namespace.forwardRef(function SubMenu(_a, ref) {
+    var children = _a.children, onItemSelect = _a.onItemSelect;
+    var _b = React__namespace.useContext(MenuContext), parentMenuItemSelect = _b.handleItemSelect, menuStore = _b.menuStore;
+    if (!menuStore) {
+        throw new Error('SubMenu must be wrapped in <Menu/>');
+    }
+    var parentMenuHide = menuStore.hide;
+    var handleSubItemSelect = React__namespace.useCallback(function handleSubItemSelect(value) {
+        onItemSelect === null || onItemSelect === void 0 ? void 0 : onItemSelect(value);
+        parentMenuItemSelect === null || parentMenuItemSelect === void 0 ? void 0 : parentMenuItemSelect(value);
+        parentMenuHide();
+    }, [parentMenuHide, parentMenuItemSelect, onItemSelect]);
+    var _c = React__namespace.Children.toArray(children), button = _c[0], list = _c[1];
+    var buttonElement = button;
+    var subMenuContextValue = React__namespace.useMemo(function () { return ({ isSubMenu: true }); }, []);
+    return (React__namespace.createElement(Menu, { onItemSelect: handleSubItemSelect },
+        React__namespace.createElement(react.MenuItem, { store: menuStore, ref: ref, hideOnClick: false, render: buttonElement }, buttonElement.props.children),
+        React__namespace.createElement(SubMenuContext.Provider, { value: subMenuContextValue }, list)));
+});
+/**
+ * A way to semantically group some menu items.
+ *
+ * This group does not add any visual separator. You can do that yourself adding `<hr />` elements
+ * before and/or after the group if you so wish.
+ */
+var MenuGroup = React__namespace.forwardRef(function MenuGroup(_a, ref) {
+    var label = _a.label, children = _a.children, exceptionallySetClassName = _a.exceptionallySetClassName, props = tslib.__rest(_a, ["label", "children", "exceptionallySetClassName"]);
+    var menuStore = React__namespace.useContext(MenuContext).menuStore;
+    if (!menuStore) {
+        throw new Error('MenuGroup must be wrapped in <Menu/>');
+    }
+    return (React__namespace.createElement(react.MenuGroup, tslib.__assign({}, props, { ref: ref, store: menuStore, className: exceptionallySetClassName }),
+        label ? (React__namespace.createElement("div", { role: "presentation", className: "reactist_menugroup__label" }, label)) : null,
+        children));
+});
+
+var modules_8f59d13b = {"overlay":"_05da64fc","fadein":"_54ef8301","fitContent":"a191ee44","full":"b15ec657","large":"e1dec24f","medium":"_9346579f","small":"_33e2ba14","xsmall":"_13b3dd02","xlarge":"_1b7c26ab","expand":"_2e29ea19","buttonContainer":"_309f02f2","headerContent":"_094bb706","container":"_6910d6c2"};
+
+var ModalContext = React__namespace.createContext({
+    onDismiss: undefined,
+    height: 'fitContent',
+    dividers: undefined,
+});
+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(_a) {
+    var isOpen = _a.isOpen, onDismiss = _a.onDismiss, _b = _a.height, height = _b === void 0 ? 'fitContent' : _b, dividers = _a.dividers, _c = _a.width, width = _c === void 0 ? 'medium' : _c, exceptionallySetClassName = _a.exceptionallySetClassName, exceptionallySetOverlayClassName = _a.exceptionallySetOverlayClassName, _d = _a.autoFocus, autoFocus = _d === void 0 ? true : _d, _e = _a.hideOnEscape, hideOnEscape = _e === void 0 ? true : _e, _f = _a.hideOnInteractOutside, hideOnInteractOutside = _f === void 0 ? true : _f, children = _a.children, portalElement = _a.portalElement, onKeyDown = _a.onKeyDown; 
+    // @ts-expect-error we want to make sure to not pass it to the Dialog component
+    _a.className; var props = tslib.__rest(_a, ["isOpen", "onDismiss", "height", "dividers", "width", "exceptionallySetClassName", "exceptionallySetOverlayClassName", "autoFocus", "hideOnEscape", "hideOnInteractOutside", "children", "portalElement", "onKeyDown", "className"]);
+    var setOpen = React__namespace.useCallback(function (visible) {
+        if (!visible) {
+            onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+        }
+    }, [onDismiss]);
+    var store = react.useDialogStore({ open: isOpen, setOpen: setOpen });
+    var contextValue = React__namespace.useMemo(function () { return ({ onDismiss: onDismiss, height: height, dividers: dividers }); }, [onDismiss, height, dividers]);
+    var portalRef = React__namespace.useRef(null);
+    var dialogRef = React__namespace.useRef(null);
+    var backdropRef = React__namespace.useRef(null);
+    var handleBackdropClick = React__namespace.useCallback(function (event) {
+        var _a, _b;
+        if (
+        // The focus lock element takes up the same space as the backdrop and is where the event bubbles up from,
+        // so instead of checking the backdrop as the event target, we need to make sure it's just above the dialog
+        !((_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) &&
+            (
+            // Events fired from other portals will bubble up to the backdrop, even if it isn't a child in the DOM
+            (_b = backdropRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target))) {
+            event.stopPropagation();
+            onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+        }
+    }, [onDismiss]);
+    React__namespace.useLayoutEffect(function disableAccessibilityTreeOutside() {
+        if (!isOpen || !portalRef.current) {
+            return;
+        }
+        return ariaHidden.hideOthers(portalRef.current);
+    }, [isOpen]);
+    var handleKeyDown = React__namespace.useCallback(function handleKeyDown(event) {
+        if (hideOnEscape &&
+            onDismiss != null &&
+            event.key === 'Escape' &&
+            !event.defaultPrevented) {
+            event.stopPropagation();
+            onDismiss();
+        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    }, [onDismiss, hideOnEscape, onKeyDown]);
+    if (!isOpen) {
+        return null;
+    }
+    return (React__namespace.createElement(react.Portal, { portalRef: portalRef, portalElement: portalElement },
+        React__namespace.createElement(Box$1, { "data-testid": "modal-overlay", "data-overlay": true, className: classNames__default["default"](modules_8f59d13b.overlay, modules_8f59d13b[height], modules_8f59d13b[width], exceptionallySetOverlayClassName), 
+            /**
+             * We're using `onPointerDown` instead of `onClick` to prevent the modal from
+             * closing when the click starts inside the modal and ends on the backdrop.
+             */
+            onPointerDown: hideOnInteractOutside ? handleBackdropClick : undefined, ref: backdropRef },
+            React__namespace.createElement(FocusLock__default["default"], { autoFocus: autoFocus, whiteList: isNotInternalFrame, returnFocus: true, crossFrame: false },
+                React__namespace.createElement(react.Dialog, tslib.__assign({}, props, { ref: dialogRef, render: React__namespace.createElement(Box$1, { borderRadius: "full", background: "default", display: "flex", flexDirection: "column", overflow: "hidden", height: height === 'expand' ? 'full' : undefined, flexGrow: height === 'expand' ? 1 : 0 }), className: classNames__default["default"](exceptionallySetClassName, modules_8f59d13b.container), store: store, preventBodyScroll: true, 
+                    // Disable focus lock as we set up our own using ReactFocusLock
+                    modal: false, autoFocus: false, autoFocusOnShow: false, autoFocusOnHide: false, 
+                    // Disable portal and backdrop as we control their markup
+                    portal: false, backdrop: false, hideOnInteractOutside: false, hideOnEscape: false, onKeyDown: handleKeyDown }),
+                    React__namespace.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 onDismiss = React__namespace.useContext(ModalContext).onDismiss;
+    var buttonRef = React__namespace.useRef(null);
+    React__namespace.useLayoutEffect(function skipAutoFocus() {
+        var button = buttonRef.current;
+        if (!button) {
+            return;
+        }
+        button.tabIndex = -1;
+        var rafId = requestAnimationFrame(function () {
+            button.tabIndex = 0;
+        });
+        return function () {
+            cancelAnimationFrame(rafId);
+        };
+    }, []);
+    return (React__namespace.createElement(IconButton, tslib.__assign({}, props, { ref: buttonRef, variant: "quaternary", onClick: onDismiss, icon: React__namespace.createElement(CloseIcon, null) })));
+}
+/**
+ * Renders a standard modal header area with an optional close button.
+ *
+ * @see Modal
+ * @see ModalFooter
+ * @see ModalBody
+ */
+function ModalHeader(_a) {
+    var children = _a.children, _b = _a.button, button = _b === void 0 ? true : _b, _c = _a.withDivider, withDivider = _c === void 0 ? false : _c, exceptionallySetClassName = _a.exceptionallySetClassName, props = tslib.__rest(_a, ["children", "button", "withDivider", "exceptionallySetClassName"]);
+    var dividers = React__namespace.useContext(ModalContext).dividers;
+    return (React__namespace.createElement(React__namespace.Fragment, null,
+        React__namespace.createElement(Box$1, tslib.__assign({}, props, { as: "header", paddingLeft: "large", paddingRight: button === false || button === null ? 'large' : 'small', paddingY: "small", className: exceptionallySetClassName }),
             React__namespace.createElement(Columns, { space: "large", alignY: "center" },
                 React__namespace.createElement(Column, { width: "auto" }, children),
                 button === false || button === null ? (React__namespace.createElement("div", { className: modules_8f59d13b.headerContent })) : (React__namespace.createElement(Column, { width: "content", exceptionallySetClassName: modules_8f59d13b.buttonContainer, "data-testid": "button-container" }, typeof button === 'boolean' ? (React__namespace.createElement(ModalCloseButton, { "aria-label": "Close modal", autoFocus: false })) : (button))))),
@@ -1586,7 +1730,7 @@ function Tabs(_a) {
     var tabStore = react.useTabStore({
         defaultSelectedId: defaultSelectedId,
         selectedId: selectedId,
-        setSelectedId: onSelectedIdChange
+        setSelectedId: onSelectedIdChange,
     });
     var actualSelectedId = tabStore.useState('selectedId');
     var memoizedTabState = React__namespace.useMemo(function () { var _a; return ({ tabStore: tabStore, variant: variant, selectedId: (_a = selectedId !== null && selectedId !== void 0 ? selectedId : actualSelectedId) !== null && _a !== void 0 ? _a : null }); }, [variant, tabStore, selectedId, actualSelectedId]);
@@ -1625,7 +1769,7 @@ function TabList(_a) {
             setSelectedTabElement(selectedTab);
             setSelectedTabStyle({
                 left: "".concat(selectedTab.offsetLeft, "px"),
-                width: "".concat(selectedTab.offsetWidth, "px")
+                width: "".concat(selectedTab.offsetWidth, "px"),
             });
         }
     }, [selectedId]);
@@ -1667,7 +1811,7 @@ function TabList(_a) {
     var justifyContentAlignMap = {
         start: 'flexStart',
         end: 'flexEnd',
-        center: 'center'
+        center: 'center',
     };
     return (
     // This extra <Box> not only provides alignment for the tabs, but also prevents <Inline>'s
@@ -1714,146 +1858,6 @@ function TabAwareSlot(_a) {
     return tabContextValue ? children({ selectedId: selectedId }) : null;
 }
 
-var MenuContext = React__namespace.createContext({
-    menuStore: null,
-    handleItemSelect: function () { return undefined; },
-    getAnchorRect: null,
-    setAnchorRect: function () { return undefined; }
-});
-var SubMenuContext = React__namespace.createContext({ isSubMenu: false });
-/**
- * Wrapper component to control a menu. It does not render anything, only providing the state
- * management for the menu components inside it.
- */
-function Menu(_a) {
-    var children = _a.children, onItemSelect = _a.onItemSelect, props = tslib.__rest(_a, ["children", "onItemSelect"]);
-    var _b = React__namespace.useState(null), anchorRect = _b[0], setAnchorRect = _b[1];
-    var getAnchorRect = React__namespace.useMemo(function () { return (anchorRect ? function () { return anchorRect; } : null); }, [anchorRect]);
-    var menuStore = react.useMenuStore(tslib.__assign({ focusLoop: true }, props));
-    var value = React__namespace.useMemo(function () { return ({ menuStore: menuStore, handleItemSelect: onItemSelect, getAnchorRect: getAnchorRect, setAnchorRect: setAnchorRect }); }, [menuStore, onItemSelect, getAnchorRect, setAnchorRect]);
-    return React__namespace.createElement(MenuContext.Provider, { value: value }, children);
-}
-/**
- * A button to toggle a dropdown menu open or closed.
- */
-var MenuButton = React__namespace.forwardRef(function MenuButton(_a, ref) {
-    var exceptionallySetClassName = _a.exceptionallySetClassName, props = tslib.__rest(_a, ["exceptionallySetClassName"]);
-    var menuStore = React__namespace.useContext(MenuContext).menuStore;
-    if (!menuStore) {
-        throw new Error('MenuButton must be wrapped in <Menu/>');
-    }
-    return (React__namespace.createElement(react.MenuButton, tslib.__assign({}, props, { store: menuStore, ref: ref, className: classNames__default["default"]('reactist_menubutton', exceptionallySetClassName) })));
-});
-var ContextMenuTrigger = React__namespace.forwardRef(function ContextMenuTrigger(_a, ref) {
-    var render = _a.render, props = tslib.__rest(_a, ["render"]);
-    var _b = React__namespace.useContext(MenuContext), setAnchorRect = _b.setAnchorRect, menuStore = _b.menuStore;
-    if (!menuStore) {
-        throw new Error('ContextMenuTrigger must be wrapped in <Menu/>');
-    }
-    var handleContextMenu = React__namespace.useCallback(function handleContextMenu(event) {
-        event.preventDefault();
-        setAnchorRect({ x: event.clientX, y: event.clientY });
-        menuStore.show();
-    }, [setAnchorRect, menuStore]);
-    var isOpen = menuStore.useState('open');
-    React__namespace.useEffect(function () {
-        if (!isOpen)
-            setAnchorRect(null);
-    }, [isOpen, setAnchorRect]);
-    return React__namespace.createElement(react.Role.div, tslib.__assign({}, props, { onContextMenu: handleContextMenu, ref: ref, render: render }));
-});
-/**
- * The dropdown menu itself, containing a list of menu items.
- */
-var MenuList = React__namespace.forwardRef(function MenuList(_a, ref) {
-    var exceptionallySetClassName = _a.exceptionallySetClassName, _b = _a.modal, modal = _b === void 0 ? true : _b, flip = _a.flip, props = tslib.__rest(_a, ["exceptionallySetClassName", "modal", "flip"]);
-    var _c = React__namespace.useContext(MenuContext), menuStore = _c.menuStore, getAnchorRect = _c.getAnchorRect;
-    if (!menuStore) {
-        throw new Error('MenuList must be wrapped in <Menu/>');
-    }
-    var isSubMenu = React__namespace.useContext(SubMenuContext).isSubMenu;
-    var isOpen = menuStore.useState('open');
-    return isOpen ? (React__namespace.createElement(react.Portal, { preserveTabOrder: true },
-        React__namespace.createElement(react.Menu, tslib.__assign({}, props, { store: menuStore, gutter: 8, shift: 4, ref: ref, className: classNames__default["default"]('reactist_menulist', exceptionallySetClassName), getAnchorRect: getAnchorRect !== null && getAnchorRect !== void 0 ? getAnchorRect : undefined, modal: modal, flip: flip !== null && flip !== void 0 ? flip : (isSubMenu ? 'left bottom' : undefined) })))) : null;
-});
-/**
- * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`
- * callback.
- */
-var MenuItem = React__namespace.forwardRef(function MenuItem(_a, ref) {
-    var value = _a.value, children = _a.children, onSelect = _a.onSelect, _b = _a.hideOnSelect, hideOnSelect = _b === void 0 ? true : _b, onClick = _a.onClick, exceptionallySetClassName = _a.exceptionallySetClassName, props = tslib.__rest(_a, ["value", "children", "onSelect", "hideOnSelect", "onClick", "exceptionallySetClassName"]);
-    var _c = React__namespace.useContext(MenuContext), handleItemSelect = _c.handleItemSelect, menuStore = _c.menuStore;
-    if (!menuStore) {
-        throw new Error('MenuItem must be wrapped in <Menu/>');
-    }
-    var hide = menuStore.hide;
-    var handleClick = React__namespace.useCallback(function handleClick(event) {
-        onClick === null || onClick === void 0 ? void 0 : onClick(event);
-        var onSelectResult = onSelect && !event.defaultPrevented ? onSelect() : undefined;
-        var shouldClose = onSelectResult !== false && hideOnSelect;
-        handleItemSelect === null || handleItemSelect === void 0 ? void 0 : handleItemSelect(value);
-        if (shouldClose)
-            hide();
-    }, [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value]);
-    return (React__namespace.createElement(react.MenuItem, tslib.__assign({}, props, { store: menuStore, ref: ref, onClick: handleClick, className: exceptionallySetClassName, hideOnClick: false }), children));
-});
-/**
- * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have
- * a sub-menu.
- *
- * Its children are expected to have the structure of a first level menu (a `MenuButton` and a
- * `MenuList`).
- *
- * ```jsx
- * <MenuItem label="Edit profile" />
- * <SubMenu>
- *   <MenuButton>More options</MenuButton>
- *   <MenuList>
- *     <MenuItem label="Preferences" />
- *     <MenuItem label="Sign out" />
- *   </MenuList>
- * </SubMenu>
- * ```
- *
- * The `MenuButton` will become a menu item in the current menu items list, and it will lead to
- * opening a sub-menu with the menu items list below it.
- */
-var SubMenu = React__namespace.forwardRef(function SubMenu(_a, ref) {
-    var children = _a.children, onItemSelect = _a.onItemSelect;
-    var _b = React__namespace.useContext(MenuContext), parentMenuItemSelect = _b.handleItemSelect, menuStore = _b.menuStore;
-    if (!menuStore) {
-        throw new Error('SubMenu must be wrapped in <Menu/>');
-    }
-    var parentMenuHide = menuStore.hide;
-    var handleSubItemSelect = React__namespace.useCallback(function handleSubItemSelect(value) {
-        onItemSelect === null || onItemSelect === void 0 ? void 0 : onItemSelect(value);
-        parentMenuItemSelect === null || parentMenuItemSelect === void 0 ? void 0 : parentMenuItemSelect(value);
-        parentMenuHide();
-    }, [parentMenuHide, parentMenuItemSelect, onItemSelect]);
-    var _c = React__namespace.Children.toArray(children), button = _c[0], list = _c[1];
-    var buttonElement = button;
-    var subMenuContextValue = React__namespace.useMemo(function () { return ({ isSubMenu: true }); }, []);
-    return (React__namespace.createElement(Menu, { onItemSelect: handleSubItemSelect },
-        React__namespace.createElement(react.MenuItem, { store: menuStore, ref: ref, hideOnClick: false, render: buttonElement }, buttonElement.props.children),
-        React__namespace.createElement(SubMenuContext.Provider, { value: subMenuContextValue }, list)));
-});
-/**
- * A way to semantically group some menu items.
- *
- * This group does not add any visual separator. You can do that yourself adding `<hr />` elements
- * before and/or after the group if you so wish.
- */
-var MenuGroup = React__namespace.forwardRef(function MenuGroup(_a, ref) {
-    var label = _a.label, children = _a.children, exceptionallySetClassName = _a.exceptionallySetClassName, props = tslib.__rest(_a, ["label", "children", "exceptionallySetClassName"]);
-    var menuStore = React__namespace.useContext(MenuContext).menuStore;
-    if (!menuStore) {
-        throw new Error('MenuGroup must be wrapped in <Menu/>');
-    }
-    return (React__namespace.createElement(react.MenuGroup, tslib.__assign({}, props, { ref: ref, store: menuStore, className: exceptionallySetClassName }),
-        label ? (React__namespace.createElement("div", { role: "presentation", className: "reactist_menugroup__label" }, label)) : null,
-        children));
-});
-
 /**
  * @deprecated
  */
@@ -1867,7 +1871,7 @@ Button.displayName = 'Button';
 Button.defaultProps = {
     size: 'default',
     loading: false,
-    disabled: false
+    disabled: false,
 };
 
 var Box = /** @class */ (function (_super) {
@@ -1901,7 +1905,7 @@ var Box = /** @class */ (function (_super) {
                 document.removeEventListener('click', _this._handleClickOutside, true);
             }
             _this.setState({
-                showBody: !_this.state.showBody
+                showBody: !_this.state.showBody,
             });
         };
         // https://facebook.github.io/react/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components
@@ -1936,7 +1940,7 @@ var Box = /** @class */ (function (_super) {
         };
         _this.state = {
             showBody: false,
-            top: props.top || false
+            top: props.top || false,
         };
         _this._timeout = undefined;
         return _this;
@@ -1965,7 +1969,7 @@ var Box = /** @class */ (function (_super) {
             body_wrapper: true,
             with_arrow: true,
             top: top,
-            bottom: !top
+            bottom: !top,
         });
         var body = children === null || children === void 0 ? void 0 : children[1];
         var contentMarkup = typeof body === 'function'
@@ -2014,7 +2018,7 @@ Body.displayName = 'Dropdown.Body';
 var Dropdown = {
     Box: Box,
     Trigger: Trigger,
-    Body: Body
+    Body: Body,
 };
 
 var COLORS = [
@@ -2047,7 +2051,7 @@ function ColorPicker(_a) {
             return (React__namespace.createElement("span", { className: classNames__default["default"]('color_trigger', { small: small }), style: {
                     backgroundColor: _isNamedColor(backgroundColor)
                         ? backgroundColor.color
-                        : backgroundColor
+                        : backgroundColor,
                 } },
                 React__namespace.createElement("span", { className: "color_trigger--inner_ring" })));
         })()),
@@ -2068,71 +2072,6 @@ function ColorItem(_a) {
 }
 ColorItem.displayName = 'ColorItem';
 
-//
-// Support for setting up how to translate modifiers globally.
-//
-var globalTranslateKey = function (key) { return key; };
-KeyboardShortcut.setTranslateKey = function (tr) {
-    globalTranslateKey = tr;
-};
-function translateKeyMac(key) {
-    switch (key.toLowerCase()) {
-        case 'cmd':
-        case 'mod':
-            return '⌘';
-        case 'control':
-        case 'ctrl':
-            return '⌃';
-        case 'alt':
-            return '⌥';
-        case 'shift':
-            return '⇧';
-        case 'space':
-            return '␣';
-        default:
-            return key;
-    }
-}
-//
-// Some helpers
-//
-function capitalize(str) {
-    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
-}
-function hasModifiers(str) {
-    return /\b(mod|cmd|ctrl|control|alt|shift)\b/i.test(str);
-}
-function isSpecialKey(str) {
-    return /^(mod|cmd|ctrl|control|alt|shift|space|super)$/i.test(str);
-}
-function parseKeys(shortcut, isMac, translateKey) {
-    var t = isMac ? translateKeyMac : translateKey;
-    var _hasModifiers = hasModifiers(shortcut);
-    function mapIndividualKey(str) {
-        if (isSpecialKey(str)) {
-            return capitalize(t(str));
-        }
-        if (_hasModifiers && str.length === 1) {
-            return str.toUpperCase();
-        }
-        return str;
-    }
-    if (!isMac) {
-        shortcut = shortcut.replace(/\b(mod|cmd)\b/i, 'ctrl');
-    }
-    return shortcut.split(/\s*\+\s*/).map(mapIndividualKey);
-}
-function KeyboardShortcut(_a) {
-    var _b, _c;
-    var children = _a.children, className = _a.className, _d = _a.translateKey, translateKey = _d === void 0 ? globalTranslateKey : _d, _e = _a.isMac, isMac = _e === void 0 ? (_c = (_b = navigator.platform) === null || _b === void 0 ? void 0 : _b.toUpperCase().includes('MAC')) !== null && _c !== void 0 ? _c : false : _e, props = tslib.__rest(_a, ["children", "className", "translateKey", "isMac"]);
-    var shortcuts = typeof children === 'string' ? [children] : children;
-    return (React__namespace.createElement("span", tslib.__assign({ className: classNames__default["default"]('reactist_keyboard_shortcut', className, {
-            'reactist_keyboard_shortcut--macos': isMac
-        }) }, props), shortcuts.map(function (shortcut, i) { return (React__namespace.createElement(React__namespace.Fragment, { key: i },
-        i === 0 ? null : ', ',
-        React__namespace.createElement("kbd", null, parseKeys(shortcut, isMac, translateKey).map(function (key, j) { return (React__namespace.createElement("kbd", { key: j }, key)); })))); })));
-}
-
 var SUPPORTED_KEYS = {
     ARROW_UP: 'ArrowUp',
     ARROW_RIGHT: 'ArrowRight',
@@ -2140,7 +2079,7 @@ var SUPPORTED_KEYS = {
     ARROW_LEFT: 'ArrowLeft',
     ENTER: 'Enter',
     BACKSPACE: 'Backspace',
-    ESCAPE: 'Escape'
+    ESCAPE: 'Escape',
 };
 var KeyCapturerResolver = {
     resolveByKey: function (eventKey) {
@@ -2203,7 +2142,7 @@ var KeyCapturerResolver = {
                 return null;
             }
         }
-    }
+    },
 };
 var keyEventHandlerMapping = {
     ArrowUp: 'onArrowUp',
@@ -2212,7 +2151,7 @@ var keyEventHandlerMapping = {
     ArrowRight: 'onArrowRight',
     Enter: 'onEnter',
     Backspace: 'onBackspace',
-    Escape: 'onEscape'
+    Escape: 'onEscape',
 };
 var keyPropagatePropMapping = {
     ArrowUp: 'propagateArrowUp',
@@ -2221,7 +2160,7 @@ var keyPropagatePropMapping = {
     ArrowRight: 'propagateArrowRight',
     Enter: 'propagateEnter',
     Backspace: 'propagateBackspace',
-    Escape: 'propagateEscape'
+    Escape: 'propagateEscape',
 };
 /**
  * Use this component to wrap anything you want to handle key events for (e.g. an input).
@@ -2234,44 +2173,120 @@ var keyPropagatePropMapping = {
 function KeyCapturer(props) {
     var _a;
     var children = props.children, _b = props.eventName, eventName = _b === void 0 ? 'onKeyDown' : _b;
-    var composingRef = React__namespace.useRef(false);
-    var composingEventHandlers = props.onEnter
-        ? {
-            onCompositionStart: function () {
-                composingRef.current = true;
-            },
-            onCompositionEnd: function () {
-                composingRef.current = false;
+    var _c = React__namespace.useState(false), isComposing = _c[0], setIsComposing = _c[1];
+    var onCompositionStart = React__namespace.useMemo(function () {
+        return props.onEnter
+            ? function () {
+                setIsComposing(true);
             }
-        }
-        : undefined;
-    function handleKeyEvent(event) {
-        // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
-        var key = event.key !== undefined
-            ? KeyCapturerResolver.resolveByKey(event.key)
-            : KeyCapturerResolver.resolveByKeyCode(event.keyCode);
-        if (!key)
-            return;
-        var propagateEvent = props[keyPropagatePropMapping[key]] || false;
-        var eventHandler = props[keyEventHandlerMapping[key]];
-        if (key === 'Enter' && eventHandler) {
-            if (composingRef.current ||
-                // Safari fires the onCompositionEnd event before the keydown event, so we
-                // have to rely on the 229 keycode, which is Enter when fired from an IME
-                // https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode
-                (event.keyCode || event.which) === 229) {
+            : undefined;
+    }, [props.onEnter]);
+    var onCompositionEnd = React__namespace.useMemo(function () {
+        return props.onEnter
+            ? function () {
+                setIsComposing(false);
+            }
+            : undefined;
+    }, [props.onEnter]);
+    var handleKeyEvent = React__namespace.useMemo(function () {
+        return function handleKeyEvent(event) {
+            // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
+            var key = event.key !== undefined
+                ? KeyCapturerResolver.resolveByKey(event.key)
+                : KeyCapturerResolver.resolveByKeyCode(event.keyCode);
+            if (!key)
+                return;
+            var propagateEvent = props[keyPropagatePropMapping[key]] || false;
+            var eventHandler = props[keyEventHandlerMapping[key]];
+            if (!eventHandler) {
                 return;
             }
-        }
-        if (eventHandler) {
+            if (key === 'Enter') {
+                if (isComposing ||
+                    // Safari fires the onCompositionEnd event before the keydown event, so we
+                    // have to rely on the 229 keycode, which is Enter when fired from an IME
+                    // https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode
+                    (event.keyCode || event.which) === 229) {
+                    return;
+                }
+            }
             eventHandler(event);
             if (!propagateEvent) {
                 event.preventDefault();
                 event.stopPropagation();
             }
+        };
+    }, [props, isComposing]);
+    return React__namespace.cloneElement(children, (_a = {},
+        _a[eventName] = handleKeyEvent,
+        _a.onCompositionStart = onCompositionStart,
+        _a.onCompositionEnd = onCompositionEnd,
+        _a));
+}
+
+//
+// Support for setting up how to translate modifiers globally.
+//
+var globalTranslateKey = function (key) { return key; };
+KeyboardShortcut.setTranslateKey = function (tr) {
+    globalTranslateKey = tr;
+};
+function translateKeyMac(key) {
+    switch (key.toLowerCase()) {
+        case 'cmd':
+        case 'mod':
+            return '⌘';
+        case 'control':
+        case 'ctrl':
+            return '⌃';
+        case 'alt':
+            return '⌥';
+        case 'shift':
+            return '⇧';
+        case 'space':
+            return '␣';
+        default:
+            return key;
+    }
+}
+//
+// Some helpers
+//
+function capitalize(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+}
+function hasModifiers(str) {
+    return /\b(mod|cmd|ctrl|control|alt|shift)\b/i.test(str);
+}
+function isSpecialKey(str) {
+    return /^(mod|cmd|ctrl|control|alt|shift|space|super)$/i.test(str);
+}
+function parseKeys(shortcut, isMac, translateKey) {
+    var t = isMac ? translateKeyMac : translateKey;
+    var _hasModifiers = hasModifiers(shortcut);
+    function mapIndividualKey(str) {
+        if (isSpecialKey(str)) {
+            return capitalize(t(str));
         }
+        if (_hasModifiers && str.length === 1) {
+            return str.toUpperCase();
+        }
+        return str;
+    }
+    if (!isMac) {
+        shortcut = shortcut.replace(/\b(mod|cmd)\b/i, 'ctrl');
     }
-    return React__namespace.cloneElement(children, tslib.__assign((_a = {}, _a[eventName] = handleKeyEvent, _a), composingEventHandlers));
+    return shortcut.split(/\s*\+\s*/).map(mapIndividualKey);
+}
+function KeyboardShortcut(_a) {
+    var _b, _c;
+    var children = _a.children, className = _a.className, _d = _a.translateKey, translateKey = _d === void 0 ? globalTranslateKey : _d, _e = _a.isMac, isMac = _e === void 0 ? (_c = (_b = navigator.platform) === null || _b === void 0 ? void 0 : _b.toUpperCase().includes('MAC')) !== null && _c !== void 0 ? _c : false : _e, props = tslib.__rest(_a, ["children", "className", "translateKey", "isMac"]);
+    var shortcuts = typeof children === 'string' ? [children] : children;
+    return (React__namespace.createElement("span", tslib.__assign({ className: classNames__default["default"]('reactist_keyboard_shortcut', className, {
+            'reactist_keyboard_shortcut--macos': isMac,
+        }) }, props), shortcuts.map(function (shortcut, i) { return (React__namespace.createElement(React__namespace.Fragment, { key: i },
+        i === 0 ? null : ', ',
+        React__namespace.createElement("kbd", null, parseKeys(shortcut, isMac, translateKey).map(function (key, j) { return (React__namespace.createElement("kbd", { key: j }, key)); })))); })));
 }
 
 var modules_a0e70af1 = {"progressBar":"_2661b3dc","inner":"_0ca877fd"};
@@ -2340,7 +2355,7 @@ var TimeUtils = {
         var date = dayjs__default["default"](timestamp * 1000);
         date.locale(locale);
         return date.format(longFormat);
-    }
+    },
 };
 
 var DELAY = 60000;
@@ -2352,7 +2367,7 @@ var Time = /** @class */ (function (_super) {
         _this.state = {
             hovered: false,
             mouseX: undefined,
-            mouseY: undefined
+            mouseY: undefined,
         };
         return _this;
     }
@@ -2384,7 +2399,7 @@ var Time = /** @class */ (function (_super) {
             this.setState(function () { return ({
                 hovered: hovered,
                 mouseX: clientX,
-                mouseY: clientY
+                mouseY: clientY,
             }); });
         }
     };
@@ -2433,8 +2448,8 @@ Time.defaultProps = {
         daysSuffix: 'd',
         hoursSuffix: 'h',
         minutesSuffix: 'm',
-        momentsAgo: 'moments ago'
-    }
+        momentsAgo: 'moments ago',
+    },
 };
 
 /**
@@ -2454,7 +2469,7 @@ function Select(_a) {
 Select.displayName = 'Select';
 Select.defaultProps = {
     options: [],
-    disabled: false
+    disabled: false,
 };
 
 exports.Avatar = Avatar;