@doist/reactist 11.0.0 → 11.1.0

package/dist/reactist.cjs.development.js

@@ -348,7 +348,7 @@ var Inline = /*#__PURE__*/polymorphicComponent(function Inline(_ref, ref) {
       exceptionallySetClassName = _ref.exceptionallySetClassName,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
-  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
     as: as,
     display: "flex",
     flexWrap: "wrap",
@@ -360,7 +360,7 @@ var Inline = /*#__PURE__*/polymorphicComponent(function Inline(_ref, ref) {
     justifyContent: mapResponsiveProp(align, function (align) {
       return align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : 'center';
     })
-  }), children));
+  }), children);
 });
 
 var modules_3af3b7ac = {"space-xsmall":"_7b475ead","space-small":"_5641699f","space-medium":"_1a1c63e4","space-large":"_560f80a0","space-xlarge":"_84ffebbc","space-xxlarge":"b60a65cb","tablet-space-xsmall":"d808f5c3","tablet-space-small":"a51c76b3","tablet-space-medium":"_7185a7aa","tablet-space-large":"af82e610","tablet-space-xlarge":"_88b4ff46","tablet-space-xxlarge":"_9de15321","desktop-space-xsmall":"_6fb32d20","desktop-space-small":"_07ee315a","desktop-space-medium":"a270d7ec","desktop-space-large":"ea6ebb29","desktop-space-xlarge":"_35b36178","desktop-space-xxlarge":"_56c7dc23"};
@@ -462,254 +462,7 @@ var HiddenVisually = /*#__PURE__*/polymorphicComponent(function HiddenVisually(p
   }));
 });
 
-var _excluded$6 = ["tone"];
-var alertIconForTone = {
-  info: AlertInfoIcon,
-  positive: AlertPositiveIcon,
-  caution: AlertCautionIcon,
-  critical: AlertCriticalIcon
-};
-
-function AlertIcon(_ref) {
-  var tone = _ref.tone,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
-
-  var Icon = alertIconForTone[tone];
-  return Icon ? /*#__PURE__*/React.createElement(Icon, Object.assign({}, props)) : null;
-}
-
-function AlertInfoIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
-    width: "24",
-    height: "24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zm0-1a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm1.18-11.84a.84.84 0 1 1-1.68 0 .84.84 0 0 1 1.68 0zM12.5 10a.5.5 0 0 1 .5.5V15h1a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1h1v-4h-1a.5.5 0 0 1 0-1h1.5z",
-    fill: "currentColor"
-  }));
-}
-
-function AlertPositiveIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
-    width: "24",
-    height: "24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zm0-1a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm-4.354-8.104a.5.5 0 0 1 .708 0l2.146 2.147 5.146-5.147a.5.5 0 0 1 .708.708l-5.5 5.5a.5.5 0 0 1-.708 0l-2.5-2.5a.5.5 0 0 1 0-.708z",
-    fill: "currentColor"
-  }));
-}
-
-function AlertCautionIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
-    width: "24",
-    height: "24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "m3.254 16.992 7.018-12.03a2 2 0 0 1 3.455 0l7.018 12.03A2 2 0 0 1 19.018 20H4.982a2 2 0 0 1-1.728-3.008zm8.242-11.887a1 1 0 0 0-.36.36l-7.018 12.03A1 1 0 0 0 4.982 19h14.036a1 1 0 0 0 .864-1.504l-7.018-12.03a1 1 0 0 0-1.368-.36zM13 16.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-.014-7.014a.987.987 0 1 0-1.971.055l.236 4.25c.053.945 1.445.945 1.498 0l.236-4.25.001-.027v-.028z",
-    fill: "currentColor"
-  }));
-}
-
-function AlertCriticalIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
-    width: "24",
-    height: "24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M12 3.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17zM2.5 12a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0zM13 15.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-.014-7.014A.987.987 0 0 0 12 7.5h-.027l-.028.002a.987.987 0 0 0-.93 1.04l.236 4.25c.053.944 1.445.944 1.498 0l.236-4.25.001-.028v-.027z",
-    fill: "currentColor"
-  }));
-}
-
-function CloseIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "24",
-    height: "24"
-  }, props), /*#__PURE__*/React.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_6205a58e = {"container":"ad19f859","tone-info":"_7fd19074","tone-positive":"b6504efb","tone-caution":"_1668c1a3","tone-critical":"_59663dff"};
-
-function Alert(_ref) {
-  var id = _ref.id,
-      children = _ref.children,
-      tone = _ref.tone,
-      closeLabel = _ref.closeLabel,
-      onClose = _ref.onClose;
-  return /*#__PURE__*/React.createElement(Box, {
-    id: id,
-    role: "alert",
-    "aria-live": "polite",
-    padding: "small",
-    className: [modules_6205a58e.container, getClassNames(modules_6205a58e, 'tone', tone)]
-  }, /*#__PURE__*/React.createElement(Columns, {
-    space: "small",
-    alignY: "top"
-  }, /*#__PURE__*/React.createElement(Column, {
-    width: "content"
-  }, /*#__PURE__*/React.createElement(AlertIcon, {
-    tone: tone
-  })), /*#__PURE__*/React.createElement(Column, null, children), onClose != null ? /*#__PURE__*/React.createElement(Column, {
-    width: "content"
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: onClose,
-    "aria-label": closeLabel
-  }, /*#__PURE__*/React.createElement(CloseIcon, null))) : null));
-}
-
-var modules_c7f5018f = {"svg":"_51539197","spinner":"_54fbe2b3","tint":"a0c466ed","fill":"_745b73d3"};
-
-function Spinner(_ref) {
-  var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 24 : _ref$size;
-  return /*#__PURE__*/React.createElement("svg", {
-    "aria-hidden": true,
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    className: modules_c7f5018f.svg
-  }, /*#__PURE__*/React.createElement("g", {
-    fill: "none",
-    fillRule: "nonzero"
-  }, /*#__PURE__*/React.createElement("path", {
-    className: modules_c7f5018f.tint,
-    d: "M17.945 3.958A9.955 9.955 0 0 0 12 2c-2.19 0-4.217.705-5.865 1.9L5.131 2.16A11.945 11.945 0 0 1 12 0c2.59 0 4.99.82 6.95 2.217l-1.005 1.741z"
-  }), /*#__PURE__*/React.createElement("path", {
-    className: modules_c7f5018f.fill,
-    d: "M5.13 2.16L6.136 3.9A9.987 9.987 0 0 0 2 12c0 5.523 4.477 10 10 10s10-4.477 10-10a9.986 9.986 0 0 0-4.055-8.042l1.006-1.741A11.985 11.985 0 0 1 24 12c0 6.627-5.373 12-12 12S0 18.627 0 12c0-4.073 2.029-7.671 5.13-9.84z"
-  })));
-}
-
-var _excluded$7 = ["size", "exceptionallySetClassName"];
-var sizeMapping = {
-  small: 24,
-  medium: 36,
-  large: 48
-};
-
-function Loading(_ref) {
-  var _sizeMapping$size;
-
-  var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'small' : _ref$size,
-      exceptionallySetClassName = _ref.exceptionallySetClassName,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
-
-  var numericSize = (_sizeMapping$size = sizeMapping[size]) !== null && _sizeMapping$size !== void 0 ? _sizeMapping$size : sizeMapping.small;
-  var ariaLabel = props['aria-label'] ? props['aria-label'] : !props['aria-labelledby'] ? 'Loading…' : undefined;
-  return /*#__PURE__*/React__default.createElement(Box, Object.assign({}, props, {
-    "aria-label": ariaLabel,
-    className: exceptionallySetClassName,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    role: "progressbar"
-  }), /*#__PURE__*/React__default.createElement(Spinner, {
-    size: numericSize,
-    "aria-hidden": true
-  }));
-}
-
-var modules_1b547e7e = {"container":"_464500ae","tone-info":"_1abfe147","tone-positive":"_36ce9859","tone-caution":"f92214b7","tone-critical":"be6cf28e"};
-
-function Notice(_ref) {
-  var id = _ref.id,
-      children = _ref.children,
-      tone = _ref.tone;
-  return /*#__PURE__*/React.createElement(Box, {
-    id: id,
-    role: "alert",
-    "aria-live": "polite",
-    className: [modules_1b547e7e.container, getClassNames(modules_1b547e7e, 'tone', tone)]
-  }, /*#__PURE__*/React.createElement(Columns, {
-    space: "small",
-    alignY: "top"
-  }, /*#__PURE__*/React.createElement(Column, {
-    width: "content"
-  }, /*#__PURE__*/React.createElement(AlertIcon, {
-    tone: tone
-  })), /*#__PURE__*/React.createElement(Column, null, children)));
-}
-
-var modules_949d2ff4 = {"heading":"_2f45487c","weight-light":"a20cbde9","tone-secondary":"_75f44518","tone-danger":"_3952cc59","size-largest":"b71d22ef","size-larger":"f15346e2","size-smaller":"_3cae1428","lineClampMultipleLines":"_347f6fcd","lineClamp-1":"_895c0b16","lineClamp-2":"_2e4808bd","lineClamp-3":"_1bdb7bdc","lineClamp-4":"_159943ea","lineClamp-5":"e44e008d"};
-
-var _excluded$8 = ["level", "weight", "size", "tone", "children", "lineClamp", "align", "exceptionallySetClassName"];
-var Heading = /*#__PURE__*/React.forwardRef(function Heading(_ref, ref) {
-  var level = _ref.level,
-      _ref$weight = _ref.weight,
-      weight = _ref$weight === void 0 ? 'regular' : _ref$weight,
-      size = _ref.size,
-      _ref$tone = _ref.tone,
-      tone = _ref$tone === void 0 ? 'normal' : _ref$tone,
-      children = _ref.children,
-      lineClamp = _ref.lineClamp,
-      align = _ref.align,
-      exceptionallySetClassName = _ref.exceptionallySetClassName,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
-
-  // In TypeScript v4.1, this would be properly recognized without needing the type assertion
-  // https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#template-literal-types
-  var headingElementName = "h" + level;
-  var lineClampMultipleLines = typeof lineClamp === 'string' ? parseInt(lineClamp, 10) > 1 : (lineClamp || 0) > 1;
-  return /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
-    className: [exceptionallySetClassName, modules_949d2ff4.heading, weight !== 'regular' ? getClassNames(modules_949d2ff4, 'weight', weight) : null, tone !== 'normal' ? getClassNames(modules_949d2ff4, 'tone', tone) : null, getClassNames(modules_949d2ff4, 'size', size), lineClampMultipleLines ? modules_949d2ff4.lineClampMultipleLines : null, lineClamp ? getClassNames(modules_949d2ff4, 'lineClamp', lineClamp.toString()) : null],
-    textAlign: align,
-    // Prevents emojis from being cut-off
-    // See https://github.com/Doist/reactist/pull/528
-    paddingRight: lineClamp ? 'xsmall' : undefined,
-    as: headingElementName,
-    ref: ref
-  }), children);
-});
-
-var modules_a9637dd3 = {"text":"c12d1277","size-caption":"c88e1204","size-copy":"_426d67ec","size-subtitle":"f978d6c7","weight-semibold":"_0c31eccd","weight-bold":"aba17bdd","tone-secondary":"_2767b43d","tone-danger":"e8ae531e","lineClampMultipleLines":"dc839422","lineClamp-1":"e2d23135","lineClamp-2":"_7c778b7e","lineClamp-3":"_5ff41166","lineClamp-4":"b7a4998e","lineClamp-5":"_6a7f8803"};
-
-var _excluded$9 = ["as", "size", "weight", "tone", "align", "children", "lineClamp", "exceptionallySetClassName"];
-var Text = /*#__PURE__*/polymorphicComponent(function Text(_ref, ref) {
-  var as = _ref.as,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'body' : _ref$size,
-      _ref$weight = _ref.weight,
-      weight = _ref$weight === void 0 ? 'regular' : _ref$weight,
-      _ref$tone = _ref.tone,
-      tone = _ref$tone === void 0 ? 'normal' : _ref$tone,
-      align = _ref.align,
-      children = _ref.children,
-      lineClamp = _ref.lineClamp,
-      exceptionallySetClassName = _ref.exceptionallySetClassName,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
-
-  var lineClampMultipleLines = typeof lineClamp === 'string' ? Number(lineClamp) > 1 : (lineClamp !== null && lineClamp !== void 0 ? lineClamp : 1) > 1;
-  return /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
-    as: as,
-    className: [exceptionallySetClassName, modules_a9637dd3.text, size !== 'body' ? getClassNames(modules_a9637dd3, 'size', size) : null, weight !== 'regular' ? getClassNames(modules_a9637dd3, 'weight', weight) : null, tone !== 'normal' ? getClassNames(modules_a9637dd3, 'tone', tone) : null, lineClampMultipleLines ? modules_a9637dd3.lineClampMultipleLines : null, lineClamp ? getClassNames(modules_a9637dd3, 'lineClamp', lineClamp.toString()) : null],
-    textAlign: align,
-    // Prevents emojis from being cut-off
-    // See https://github.com/Doist/reactist/pull/528
-    paddingRight: lineClamp ? 'xsmall' : undefined,
-    ref: ref
-  }), children);
-});
-
-var _excluded$a = ["children", "content", "position", "gapSize", "className"];
+var _excluded$6 = ["children", "content", "position", "gapSize", "className"];
 
 var SHOW_DELAY = 500;
 var HIDE_DELAY = 100;
@@ -737,7 +490,7 @@ function Tooltip(_ref) {
       _ref$gapSize = _ref.gapSize,
       gapSize = _ref$gapSize === void 0 ? 3 : _ref$gapSize,
       className = _ref.className,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
 
   var tooltip = useDelayedTooltipState({
     placement: position,
@@ -822,9 +575,32 @@ function useDelay() {
   }, [clearTimeouts]);
 }
 
+var modules_c7f5018f = {"svg":"_51539197","spinner":"_54fbe2b3","tint":"a0c466ed","fill":"_745b73d3"};
+
+function Spinner(_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size;
+  return /*#__PURE__*/React.createElement("svg", {
+    "aria-hidden": true,
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    className: modules_c7f5018f.svg
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "nonzero"
+  }, /*#__PURE__*/React.createElement("path", {
+    className: modules_c7f5018f.tint,
+    d: "M17.945 3.958A9.955 9.955 0 0 0 12 2c-2.19 0-4.217.705-5.865 1.9L5.131 2.16A11.945 11.945 0 0 1 12 0c2.59 0 4.99.82 6.95 2.217l-1.005 1.741z"
+  }), /*#__PURE__*/React.createElement("path", {
+    className: modules_c7f5018f.fill,
+    d: "M5.13 2.16L6.136 3.9A9.987 9.987 0 0 0 2 12c0 5.523 4.477 10 10 10s10-4.477 10-10a9.986 9.986 0 0 0-4.055-8.042l1.006-1.741A11.985 11.985 0 0 1 24 12c0 6.627-5.373 12-12 12S0 18.627 0 12c0-4.073 2.029-7.671 5.13-9.84z"
+  })));
+}
+
 var modules_b9569bce = {"label":"_1f20c88a","baseButton":"_623015f3","size-small":"_062de645","size-normal":"_55e2a6a9","size-large":"cab32a7c","disabled":"e71c191a","iconButton":"_368efc16","startIcon":"d35389c1","endIcon":"_900d41d8","variant-primary":"_7c95e162","variant-secondary":"_9cb889aa","variant-tertiary":"_611b5b28","variant-quaternary":"_80c2bb84","tone-destructive":"ee13c455"};
 
-var _excluded$b = ["as", "variant", "tone", "size", "disabled", "loading", "tooltip", "onClick", "exceptionallySetClassName", "children", "startIcon", "endIcon", "icon"];
+var _excluded$7 = ["as", "variant", "tone", "size", "disabled", "loading", "tooltip", "onClick", "exceptionallySetClassName", "children", "startIcon", "endIcon", "icon"];
 
 function preventDefault(event) {
   event.preventDefault();
@@ -859,7 +635,7 @@ var BaseButton = /*#__PURE__*/polymorphicComponent(function BaseButton(_ref, ref
       startIcon = _ref.startIcon,
       endIcon = _ref.endIcon,
       icon = _ref.icon,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
 
   var isDisabled = loading || disabled;
   var buttonElement = /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
@@ -886,7 +662,7 @@ var BaseButton = /*#__PURE__*/polymorphicComponent(function BaseButton(_ref, ref
   }, buttonElement) : buttonElement;
 });
 
-var _excluded$c = ["variant", "tone", "size", "type", "disabled", "exceptionallySetClassName"];
+var _excluded$8 = ["variant", "tone", "size", "type", "disabled", "exceptionallySetClassName"];
 /**
  * A semantic button that also looks like a button, and provides all the necessary visual variants.
  * It follows the [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).
@@ -907,7 +683,7 @@ var Button = /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       exceptionallySetClassName = _ref.exceptionallySetClassName,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
 
   return /*#__PURE__*/React.createElement(BaseButton, Object.assign({}, props, {
     as: "button",
@@ -921,6 +697,241 @@ var Button = /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
   }));
 });
 
+var _excluded$9 = ["tone"];
+var alertIconForTone = {
+  info: AlertInfoIcon,
+  positive: AlertPositiveIcon,
+  caution: AlertCautionIcon,
+  critical: AlertCriticalIcon
+};
+
+function AlertIcon(_ref) {
+  var tone = _ref.tone,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+
+  var Icon = alertIconForTone[tone];
+  return Icon ? /*#__PURE__*/React.createElement(Icon, Object.assign({}, props)) : null;
+}
+
+function AlertInfoIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    width: "24",
+    height: "24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zm0-1a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm1.18-11.84a.84.84 0 1 1-1.68 0 .84.84 0 0 1 1.68 0zM12.5 10a.5.5 0 0 1 .5.5V15h1a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1h1v-4h-1a.5.5 0 0 1 0-1h1.5z",
+    fill: "currentColor"
+  }));
+}
+
+function AlertPositiveIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    width: "24",
+    height: "24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zm0-1a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm-4.354-8.104a.5.5 0 0 1 .708 0l2.146 2.147 5.146-5.147a.5.5 0 0 1 .708.708l-5.5 5.5a.5.5 0 0 1-.708 0l-2.5-2.5a.5.5 0 0 1 0-.708z",
+    fill: "currentColor"
+  }));
+}
+
+function AlertCautionIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    width: "24",
+    height: "24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "m3.254 16.992 7.018-12.03a2 2 0 0 1 3.455 0l7.018 12.03A2 2 0 0 1 19.018 20H4.982a2 2 0 0 1-1.728-3.008zm8.242-11.887a1 1 0 0 0-.36.36l-7.018 12.03A1 1 0 0 0 4.982 19h14.036a1 1 0 0 0 .864-1.504l-7.018-12.03a1 1 0 0 0-1.368-.36zM13 16.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-.014-7.014a.987.987 0 1 0-1.971.055l.236 4.25c.053.945 1.445.945 1.498 0l.236-4.25.001-.027v-.028z",
+    fill: "currentColor"
+  }));
+}
+
+function AlertCriticalIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    width: "24",
+    height: "24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 3.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17zM2.5 12a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0zM13 15.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-.014-7.014A.987.987 0 0 0 12 7.5h-.027l-.028.002a.987.987 0 0 0-.93 1.04l.236 4.25c.053.944 1.445.944 1.498 0l.236-4.25.001-.028v-.027z",
+    fill: "currentColor"
+  }));
+}
+
+function CloseIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24"
+  }, props), /*#__PURE__*/React.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_6205a58e = {"container":"eb665121","tone-info":"d0373ff9","tone-positive":"bb18dcab","tone-caution":"_0af02331","tone-critical":"f76146f9"};
+
+function Alert(_ref) {
+  var id = _ref.id,
+      children = _ref.children,
+      tone = _ref.tone,
+      closeLabel = _ref.closeLabel,
+      onClose = _ref.onClose;
+  return /*#__PURE__*/React.createElement(Box, {
+    id: id,
+    role: "alert",
+    "aria-live": "polite",
+    borderRadius: "standard",
+    className: [modules_6205a58e.container, getClassNames(modules_6205a58e, 'tone', tone)]
+  }, /*#__PURE__*/React.createElement(Columns, {
+    space: "small",
+    alignY: "top"
+  }, /*#__PURE__*/React.createElement(Column, {
+    width: "content"
+  }, /*#__PURE__*/React.createElement(AlertIcon, {
+    tone: tone
+  })), /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(Box, {
+    paddingY: "xsmall",
+    paddingRight: onClose != null && closeLabel != null ? undefined : 'small'
+  }, children)), onClose != null && closeLabel != null ? /*#__PURE__*/React.createElement(Column, {
+    width: "content"
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "quaternary",
+    size: "small",
+    onClick: onClose,
+    "aria-label": closeLabel,
+    icon: /*#__PURE__*/React.createElement(CloseIcon, null),
+    style: {
+      // @ts-expect-error not sure how to make TypeScript understand custom CSS properties
+      '--reactist-btn-hover-fill': 'transparent'
+    }
+  })) : null));
+}
+
+var _excluded$a = ["size", "exceptionallySetClassName"];
+var sizeMapping = {
+  small: 24,
+  medium: 36,
+  large: 48
+};
+
+function Loading(_ref) {
+  var _sizeMapping$size;
+
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'small' : _ref$size,
+      exceptionallySetClassName = _ref.exceptionallySetClassName,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+
+  var numericSize = (_sizeMapping$size = sizeMapping[size]) !== null && _sizeMapping$size !== void 0 ? _sizeMapping$size : sizeMapping.small;
+  var ariaLabel = props['aria-label'] ? props['aria-label'] : !props['aria-labelledby'] ? 'Loading…' : undefined;
+  return /*#__PURE__*/React__default.createElement(Box, Object.assign({}, props, {
+    "aria-label": ariaLabel,
+    className: exceptionallySetClassName,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    role: "progressbar"
+  }), /*#__PURE__*/React__default.createElement(Spinner, {
+    size: numericSize,
+    "aria-hidden": true
+  }));
+}
+
+var modules_1b547e7e = {"container":"_464500ae","tone-info":"_1abfe147","tone-positive":"_36ce9859","tone-caution":"f92214b7","tone-critical":"be6cf28e"};
+
+function Notice(_ref) {
+  var id = _ref.id,
+      children = _ref.children,
+      tone = _ref.tone;
+  return /*#__PURE__*/React.createElement(Box, {
+    id: id,
+    role: "alert",
+    "aria-live": "polite",
+    className: [modules_1b547e7e.container, getClassNames(modules_1b547e7e, 'tone', tone)]
+  }, /*#__PURE__*/React.createElement(Columns, {
+    space: "small",
+    alignY: "top"
+  }, /*#__PURE__*/React.createElement(Column, {
+    width: "content"
+  }, /*#__PURE__*/React.createElement(AlertIcon, {
+    tone: tone
+  })), /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(Box, {
+    paddingY: "xsmall"
+  }, children))));
+}
+
+var modules_949d2ff4 = {"heading":"_71a1610c","weight-light":"_63750f40","tone-secondary":"_9ce984cf","tone-danger":"_1acad35e","size-largest":"_3da27a00","size-larger":"df220733","size-smaller":"eb373739","lineClampMultipleLines":"f53cfd2b","lineClamp-1":"e4819fc9","lineClamp-2":"a0ed6177","lineClamp-3":"_180d433e","lineClamp-4":"_40826ad9","lineClamp-5":"_5999b247"};
+
+var _excluded$b = ["level", "weight", "size", "tone", "children", "lineClamp", "align", "exceptionallySetClassName"];
+var Heading = /*#__PURE__*/React.forwardRef(function Heading(_ref, ref) {
+  var level = _ref.level,
+      _ref$weight = _ref.weight,
+      weight = _ref$weight === void 0 ? 'regular' : _ref$weight,
+      size = _ref.size,
+      _ref$tone = _ref.tone,
+      tone = _ref$tone === void 0 ? 'normal' : _ref$tone,
+      children = _ref.children,
+      lineClamp = _ref.lineClamp,
+      align = _ref.align,
+      exceptionallySetClassName = _ref.exceptionallySetClassName,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+
+  // In TypeScript v4.1, this would be properly recognized without needing the type assertion
+  // https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#template-literal-types
+  var headingElementName = "h" + level;
+  var lineClampMultipleLines = typeof lineClamp === 'string' ? parseInt(lineClamp, 10) > 1 : (lineClamp || 0) > 1;
+  return /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
+    className: [exceptionallySetClassName, modules_949d2ff4.heading, weight !== 'regular' ? getClassNames(modules_949d2ff4, 'weight', weight) : null, tone !== 'normal' ? getClassNames(modules_949d2ff4, 'tone', tone) : null, getClassNames(modules_949d2ff4, 'size', size), lineClampMultipleLines ? modules_949d2ff4.lineClampMultipleLines : null, lineClamp ? getClassNames(modules_949d2ff4, 'lineClamp', lineClamp.toString()) : null],
+    textAlign: align,
+    // Prevents emojis from being cut-off
+    // See https://github.com/Doist/reactist/pull/528
+    paddingRight: lineClamp ? 'xsmall' : undefined,
+    as: headingElementName,
+    ref: ref
+  }), children);
+});
+
+var modules_a9637dd3 = {"text":"c5028ea8","size-caption":"_05d3a546","size-copy":"_100565e3","size-subtitle":"b8f72625","weight-semibold":"_398ecda1","weight-bold":"_8054cd6b","tone-secondary":"_6abd56b1","tone-danger":"_274b4a47","lineClampMultipleLines":"_724b0054","lineClamp-1":"_51ac6ee4","lineClamp-2":"b0742803","lineClamp-3":"dd664c95","lineClamp-4":"b02775b5","lineClamp-5":"da91b300"};
+
+var _excluded$c = ["as", "size", "weight", "tone", "align", "children", "lineClamp", "exceptionallySetClassName"];
+var Text = /*#__PURE__*/polymorphicComponent(function Text(_ref, ref) {
+  var as = _ref.as,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'body' : _ref$size,
+      _ref$weight = _ref.weight,
+      weight = _ref$weight === void 0 ? 'regular' : _ref$weight,
+      _ref$tone = _ref.tone,
+      tone = _ref$tone === void 0 ? 'normal' : _ref$tone,
+      align = _ref.align,
+      children = _ref.children,
+      lineClamp = _ref.lineClamp,
+      exceptionallySetClassName = _ref.exceptionallySetClassName,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+
+  var lineClampMultipleLines = typeof lineClamp === 'string' ? Number(lineClamp) > 1 : (lineClamp !== null && lineClamp !== void 0 ? lineClamp : 1) > 1;
+  return /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
+    as: as,
+    className: [exceptionallySetClassName, modules_a9637dd3.text, size !== 'body' ? getClassNames(modules_a9637dd3, 'size', size) : null, weight !== 'regular' ? getClassNames(modules_a9637dd3, 'weight', weight) : null, tone !== 'normal' ? getClassNames(modules_a9637dd3, 'tone', tone) : null, lineClampMultipleLines ? modules_a9637dd3.lineClampMultipleLines : null, lineClamp ? getClassNames(modules_a9637dd3, 'lineClamp', lineClamp.toString()) : null],
+    textAlign: align,
+    // Prevents emojis from being cut-off
+    // See https://github.com/Doist/reactist/pull/528
+    paddingRight: lineClamp ? 'xsmall' : undefined,
+    ref: ref
+  }), children);
+});
+
 var _excluded$d = ["as", "variant", "tone", "size", "exceptionallySetClassName", "openInNewTab"];
 /**
  * A semantic link that looks like a button, exactly matching the `Button` component in all visual
@@ -956,7 +967,7 @@ var ButtonLink = /*#__PURE__*/polymorphicComponent(function ButtonLink(_ref, ref
   }));
 });
 
-var modules_3d05deee = {"container":"_12eda218"};
+var modules_3d05deee = {"container":"b55607a1"};
 
 var _excluded$e = ["as", "openInNewTab", "exceptionallySetClassName"];
 var TextLink = /*#__PURE__*/polymorphicComponent(function TextLink(_ref, ref) {
@@ -1516,7 +1527,7 @@ function usePrevious(value) {
   return ref.current;
 }
 
-var modules_40c67f5b = {"tab":"_7cdcd0b6","tab-normal":"af6705d0","tab-primary":"ad705020","tab-secondary":"_69a2043b","tab-tertiary":"_5b695667","tab-plain":"_88d3dc5e"};
+var modules_40c67f5b = {"tab":"d7928f1c","tab-normal":"_5d8e72b3","tab-primary":"_8a23756d","tab-secondary":"_88fd4c95","tab-tertiary":"_40c4cce9","tab-plain":"_13722523"};
 
 var _excluded$m = ["color", "variant"],
     _excluded2$1 = ["children", "space"],
@@ -1737,7 +1748,7 @@ function ModalCloseButton(props) {
 
   var _React$useState = React.useState(false),
       includeInTabOrder = _React$useState[0],
-      setincludeInTabOrder = _React$useState[1];
+      setIncludeInTabOrder = _React$useState[1];
 
   var _React$useState2 = React.useState(false),
       isMounted = _React$useState2[0],
@@ -1745,7 +1756,7 @@ function ModalCloseButton(props) {
 
   React.useEffect(function skipAutoFocus() {
     if (isMounted) {
-      setincludeInTabOrder(true);
+      setIncludeInTabOrder(true);
     } else {
       setIsMounted(true);
     }
@@ -1844,10 +1855,7 @@ function ModalFooter(_ref4) {
     className: exceptionallySetClassName,
     padding: "large"
   })));
-} //
-// ModalActions
-//
-
+}
 /**
  * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).
  * @see ModalFooter
@@ -1860,9 +1868,7 @@ function ModalActions(_ref5) {
   return /*#__PURE__*/React.createElement(ModalFooter, Object.assign({}, props), /*#__PURE__*/React.createElement(Inline, {
     align: "right",
     space: "large"
-  }, React.Children.map(children, function (child) {
-    return /*#__PURE__*/React.createElement("div", null, child);
-  })));
+  }, children));
 }
 
 function getInitials(name) {
@@ -1889,8 +1895,10 @@ function emailToIndex(email, maxIndex) {
   return hash % maxIndex;
 }
 
+var modules_08f3eeac = {"avatar":"_38a1be89","size-xxs":"d32e92ae","size-xs":"_0667d719","size-s":"cf529fcf","size-m":"_6e268eab","size-l":"d64c62cf","size-xl":"_44fb77de","size-xxl":"_01f85e0e","size-xxxl":"_41a5fe19","tablet-size-xxs":"_6ab1577d","tablet-size-xs":"b52a4963","tablet-size-s":"_714a8419","tablet-size-m":"_81cd4d51","tablet-size-l":"bf0a4edb","tablet-size-xl":"e4f0dabd","tablet-size-xxl":"_67ea065d","tablet-size-xxxl":"_2af7f76f","desktop-size-xxs":"_759081dc","desktop-size-xs":"_8290d1c1","desktop-size-s":"_48ea172d","desktop-size-m":"_758f6641","desktop-size-l":"f9ada088","desktop-size-xl":"d3bb7470","desktop-size-xxl":"_9a312ee3","desktop-size-xxxl":"a1d30c23"};
+
+var _excluded$o = ["user", "avatarUrl", "size", "className", "colorList", "exceptionallySetClassName"];
 var AVATAR_COLORS = ['#fcc652', '#e9952c', '#e16b2d', '#d84b40', '#e8435a', '#e5198a', '#ad3889', '#86389c', '#a8a8a8', '#98be2f', '#5d9d50', '#5f9f85', '#5bbcb6', '#32a3bf', '#2bafeb', '#2d88c3', '#3863cc', '#5e5e5e'];
-var AVATAR_SIZES = ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'];
 
 function Avatar(_ref) {
   var user = _ref.user,
@@ -1899,20 +1907,23 @@ function Avatar(_ref) {
       size = _ref$size === void 0 ? 'l' : _ref$size,
       className = _ref.className,
       _ref$colorList = _ref.colorList,
-      colorList = _ref$colorList === void 0 ? AVATAR_COLORS : _ref$colorList;
+      colorList = _ref$colorList === void 0 ? AVATAR_COLORS : _ref$colorList,
+      exceptionallySetClassName = _ref.exceptionallySetClassName,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+
   var userInitials = getInitials(user.name) || getInitials(user.email);
-  var avatarSize = size && AVATAR_SIZES.includes(size) ? size : 'l';
-  var avatarClass = classNames("reactist_avatar reactist_avatar_size--" + avatarSize, className);
+  var avatarSize = size ? size : 'l';
   var style = avatarUrl ? {
     backgroundImage: "url(" + avatarUrl + ")",
     textIndent: '-9999px'
   } : {
     backgroundColor: colorList[emailToIndex(user.email, colorList.length)]
   };
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: avatarClass,
+  var sizeClassName = getClassNames(modules_08f3eeac, 'size', avatarSize);
+  return /*#__PURE__*/React__default.createElement(Box, Object.assign({
+    className: [className, modules_08f3eeac.avatar, sizeClassName, exceptionallySetClassName],
     style: style
-  }, userInitials);
+  }, props), userInitials);
 }
 
 Avatar.displayName = 'Avatar';
@@ -1939,7 +1950,7 @@ function Checkbox(_ref) {
 
 Checkbox.displayName = 'Checkbox';
 
-var _excluded$o = ["type", "variant", "size", "loading", "disabled", "tooltip", "onClick", "children"];
+var _excluded$p = ["type", "variant", "size", "loading", "disabled", "tooltip", "onClick", "children"];
 /**
  * @deprecated
  */
@@ -1957,7 +1968,7 @@ var Button$1 = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref)
       tooltip = _ref.tooltip,
       onClick = _ref.onClick,
       children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
 
   var className = classNames('reactist_button', variant ? "reactist_button--" + variant : null, size !== 'default' ? "reactist_button--" + size : null, {
     'reactist_button--loading': loading
@@ -1980,7 +1991,7 @@ Button$1.defaultProps = {
   disabled: false
 };
 
-var _excluded$p = ["children", "onClick", "tooltip", "className"];
+var _excluded$q = ["children", "onClick", "tooltip", "className"];
 
 var Box$1 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Box, _React$Component);
@@ -2132,7 +2143,7 @@ var Trigger = /*#__PURE__*/React__default.forwardRef(function Trigger(_ref, ref)
       onClick = _ref.onClick,
       tooltip = _ref.tooltip,
       className = _ref.className,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
 
   function handleClick(event) {
     event.preventDefault();
@@ -2269,7 +2280,7 @@ var Input = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
 });
 Input.displayName = 'Input';
 
-var _excluded$q = ["children", "className", "translateKey", "isMac"];
+var _excluded$r = ["children", "className", "translateKey", "isMac"];
 // Support for setting up how to translate modifiers globally.
 //
 
@@ -2353,7 +2364,7 @@ function KeyboardShortcut(_ref) {
       translateKey = _ref$translateKey === void 0 ? globalTranslateKey : _ref$translateKey,
       _ref$isMac = _ref.isMac,
       isMac = _ref$isMac === void 0 ? (_navigator$platform$t = (_navigator$platform = navigator.platform) === null || _navigator$platform === void 0 ? void 0 : _navigator$platform.toUpperCase().includes('MAC')) !== null && _navigator$platform$t !== void 0 ? _navigator$platform$t : false : _ref$isMac,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
 
   var shortcuts = typeof children === 'string' ? [children] : children;
   return /*#__PURE__*/React.createElement("span", Object.assign({
@@ -2896,7 +2907,7 @@ function ProgressBar(_ref) {
 
 ProgressBar.displayName = 'ProgressBar';
 
-var _excluded$r = ["value", "options", "onChange", "disabled", "className", "defaultValue"];
+var _excluded$s = ["value", "options", "onChange", "disabled", "className", "defaultValue"];
 
 function Select(_ref) {
   var value = _ref.value,
@@ -2908,7 +2919,7 @@ function Select(_ref) {
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
       defaultValue = _ref.defaultValue,
-      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$s);
 
   var selectClassName = classNames('reactist_select', {
     disabled: disabled
@@ -3164,7 +3175,7 @@ var CloseIcon$1 = function CloseIcon() {
   }));
 };
 
-var _excluded$s = ["id", "icon", "title", "subtitle", "children", "customCloseButton", "onClick", "onClose", "closeAltText", "className", "aria-live"];
+var _excluded$t = ["id", "icon", "title", "subtitle", "children", "customCloseButton", "onClick", "onClose", "closeAltText", "className", "aria-live"];
 
 function Notification(_ref) {
   var id = _ref.id,
@@ -3180,7 +3191,7 @@ function Notification(_ref) {
       className = _ref.className,
       _ref$ariaLive = _ref['aria-live'],
       ariaLive = _ref$ariaLive === void 0 ? 'polite' : _ref$ariaLive,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$t);
 
   var titleId = title ? id + "-title" : null;
   var titleIdAttribute = titleId ? {
@@ -3230,7 +3241,7 @@ function Notification(_ref) {
   }, customCloseButton !== null && customCloseButton !== void 0 ? customCloseButton : /*#__PURE__*/React__default.createElement(CloseIcon$1, null)) : null);
 }
 
-var _excluded$t = ["children", "onItemSelect"],
+var _excluded$u = ["children", "onItemSelect"],
     _excluded2$3 = ["exceptionallySetClassName"],
     _excluded3$2 = ["handleItemSelect"],
     _excluded4$2 = ["exceptionallySetClassName"],
@@ -3255,10 +3266,11 @@ var MenuContext = /*#__PURE__*/React.createContext( // Reakit gives us no means
 function Menu(_ref) {
   var children = _ref.children,
       onItemSelect = _ref.onItemSelect,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
 
   var state = Reakit.useMenuState(_objectSpread2({
-    loop: true
+    loop: true,
+    unstable_offset: [8, 8]
   }, props));
   var handleItemSelect = React.useCallback(function handleItemSelect(value) {
     if (onItemSelect) onItemSelect(value);