@doist/reactist 19.0.1 → 19.1.1

package/README.md

@@ -62,6 +62,20 @@ The setup task will install dependencies and run various validations (linting, t
 
 We identified two major modes of development for Reactist. First, running an interactive storybook and see the changes you make to a component in an isolated environment. This is especially helpful when developing new components. And second, improving existing components in real-life applications.
 
+## Creating new components
+
+The development of new components is streamlined by the ability to generate new component templates using [plop](https://plopjs.com/):
+
+```sh
+npm run plop component
+```
+
+This command will prompt you to provide all the information needed to create a new component template. The most important piece of information needed is the component name, which you can provide even as a phrase (e.g. "dropdown select" will generate a `DropdownSelect` component template).
+
+The generated source files include the component implementation with sample props and styles, plus a small test file and storybook source files as well.
+
+You also need to export your new component by adding a reference to it in the [top-level index file](src/index.ts).
+
 ## Storybook
 
 For the first development mode run:

package/dist/reactist.cjs.development.js

@@ -594,7 +594,8 @@ function Spinner({
     width: size,
     height: size,
     viewBox: "0 0 24 24",
-    className: modules_c7f5018f.svg
+    className: modules_c7f5018f.svg,
+    "data-chromatic": "ignore"
   }, /*#__PURE__*/React.createElement("g", {
     fill: "none",
     fillRule: "nonzero"
@@ -830,7 +831,81 @@ function Alert({
   })) : null));
 }
 
-const _excluded$9 = ["size", "exceptionallySetClassName"];
+let uid = 0;
+
+function uniqueId() {
+  return uid++;
+}
+
+function generateElementId(prefix) {
+  const num = uniqueId();
+  return prefix + "-" + num;
+}
+function useId(providedId) {
+  const ref = React.useRef(providedId != null ? providedId : null);
+
+  if (!ref.current) {
+    ref.current = generateElementId('element');
+  }
+
+  return ref.current;
+}
+
+var modules_afa80466 = {"banner":"c1dffd60","banner-info":"_9d552538","banner-promotion":"d797752e","title":"_8cd610da","title-without-description":"_78ea5373","title-info":"_319c73fa","title-promotion":"fc84253f","description":"af4bd758","description-info":"b95a8c07","description-promotion":"_3c33f615"};
+
+const _excluded$9 = ["id", "tone", "icon", "title", "description", "action"];
+const Banner = /*#__PURE__*/React.forwardRef(function Banner(_ref, ref) {
+  let {
+    id,
+    tone,
+    icon,
+    title,
+    description,
+    action
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$9);
+
+  const titleId = useId();
+  const descriptionId = useId();
+  return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
+    ref: ref,
+    id: id,
+    role: "status",
+    "aria-labelledby": titleId,
+    "aria-describedby": descriptionId,
+    "aria-live": "polite",
+    tabIndex: 0,
+    borderRadius: "standard",
+    className: [modules_afa80466.banner, modules_afa80466["banner-" + tone]]
+  }), /*#__PURE__*/React.createElement(Columns, {
+    space: "medium",
+    alignY: "center"
+  }, /*#__PURE__*/React.createElement(Column, {
+    width: "content",
+    "aria-hidden": true,
+    style: {
+      /* Make sure the icon is centered vertically */
+      lineHeight: 0
+    }
+  }, icon), /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(Box, {
+    paddingY: "xsmall"
+  }, description ? /*#__PURE__*/React.createElement(Box, {
+    id: titleId,
+    className: [modules_afa80466.title, modules_afa80466["title-" + tone]]
+  }, title) : /*#__PURE__*/React.createElement(Box, {
+    id: titleId,
+    className: [modules_afa80466.title, // If the banner does not have a description, we need to slightly tweak
+    // the styling of the title applying an extra css class
+    modules_afa80466["title-without-description"], modules_afa80466["title-" + tone]]
+  }, title), description ? /*#__PURE__*/React.createElement(Box, {
+    id: descriptionId,
+    className: [modules_afa80466.description, modules_afa80466["description-" + tone]]
+  }, description) : null)), action ? /*#__PURE__*/React.createElement(Column, {
+    width: "content"
+  }, action) : null));
+});
+
+const _excluded$a = ["size", "exceptionallySetClassName"];
 const sizeMapping = {
   xsmall: 16,
   small: 24,
@@ -845,7 +920,7 @@ function Loading(_ref) {
     size = 'small',
     exceptionallySetClassName
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$9);
+      props = _objectWithoutProperties(_ref, _excluded$a);
 
   const numericSize = (_sizeMapping$size = sizeMapping[size]) != null ? _sizeMapping$size : sizeMapping.small;
   const ariaLabel = props['aria-label'] ? props['aria-label'] : !props['aria-labelledby'] ? 'Loading…' : undefined;
@@ -888,7 +963,7 @@ function Notice({
 
 var modules_a9637dd3 = {"text":"a83bd4e0","size-caption":"_266d6623","size-copy":"a8d37c6e","size-subtitle":"_39f4eb1f","weight-semibold":"_7be5c531","weight-bold":"e214ff2e","tone-secondary":"_6a3e5ade","tone-danger":"_8f5b5f2b","tone-positive":"_9ae47ae4","lineClampMultipleLines":"_969f18f7","lineClamp-1":"_2f303ac3","lineClamp-2":"d3e04245","lineClamp-3":"_33411704","lineClamp-4":"bfc32640","lineClamp-5":"f813c82f"};
 
-const _excluded$a = ["as", "size", "weight", "tone", "align", "children", "lineClamp", "exceptionallySetClassName"];
+const _excluded$b = ["as", "size", "weight", "tone", "align", "children", "lineClamp", "exceptionallySetClassName"];
 const Text = /*#__PURE__*/polymorphicComponent(function Text(_ref, ref) {
   let {
     as,
@@ -900,7 +975,7 @@ const Text = /*#__PURE__*/polymorphicComponent(function Text(_ref, ref) {
     lineClamp,
     exceptionallySetClassName
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$a);
+      props = _objectWithoutProperties(_ref, _excluded$b);
 
   const lineClampMultipleLines = typeof lineClamp === 'string' ? Number(lineClamp) > 1 : (lineClamp != null ? lineClamp : 1) > 1;
   return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
@@ -916,7 +991,7 @@ const Text = /*#__PURE__*/polymorphicComponent(function Text(_ref, ref) {
 
 var modules_d11e18f0 = {"stackedToastsView":"_616cc3f3","toastContainer":"_1b5f8e86","slot":"ce2e3476"};
 
-const _excluded$b = ["message", "description", "icon", "action", "onDismiss", "dismissLabel"];
+const _excluded$c = ["message", "description", "icon", "action", "onDismiss", "dismissLabel"];
 /**
  * A toast that shows a message, and an optional action associated with it.
  *
@@ -941,7 +1016,7 @@ const StaticToast = /*#__PURE__*/React__default.forwardRef(function Toast(_ref,
     onDismiss,
     dismissLabel = 'Close'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$b);
+      props = _objectWithoutProperties(_ref, _excluded$c);
 
   return /*#__PURE__*/React__default.createElement(Box, _objectSpread2({
     ref: ref,
@@ -991,26 +1066,6 @@ function ToastContentSlot({
   }, children);
 }
 
-let uid = 0;
-
-function uniqueId() {
-  return uid++;
-}
-
-function generateElementId(prefix) {
-  const num = uniqueId();
-  return prefix + "-" + num;
-}
-function useId(providedId) {
-  const ref = React.useRef(providedId != null ? providedId : null);
-
-  if (!ref.current) {
-    ref.current = generateElementId('element');
-  }
-
-  return ref.current;
-}
-
 /**
  * Adapted with minor changes from https://github.com/seek-oss/braid-design-system/blob/7a5ebccb/packages/braid-design-system/lib/components/useToast/useFlipList.ts
  *
@@ -1182,7 +1237,7 @@ function useToastsAnimation() {
   };
 }
 
-const _excluded$c = ["toastId"];
+const _excluded$d = ["toastId"];
 /** @private */
 
 const InternalToast = /*#__PURE__*/React__default.forwardRef(function InternalToast({
@@ -1291,7 +1346,7 @@ function ToastsProvider({
     let {
       toastId
     } = _ref,
-        props = _objectWithoutProperties(_ref, _excluded$c);
+        props = _objectWithoutProperties(_ref, _excluded$d);
 
     return /*#__PURE__*/React__default.createElement(InternalToast, _objectSpread2({
       key: toastId,
@@ -1367,7 +1422,7 @@ function Toast(props) {
 
 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"};
 
-const _excluded$d = ["level", "weight", "size", "tone", "children", "lineClamp", "align", "exceptionallySetClassName"];
+const _excluded$e = ["level", "weight", "size", "tone", "children", "lineClamp", "align", "exceptionallySetClassName"];
 const Heading = /*#__PURE__*/React.forwardRef(function Heading(_ref, ref) {
   let {
     level,
@@ -1379,7 +1434,7 @@ const Heading = /*#__PURE__*/React.forwardRef(function Heading(_ref, ref) {
     align,
     exceptionallySetClassName
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$d);
+      props = _objectWithoutProperties(_ref, _excluded$e);
 
   // 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
@@ -1396,7 +1451,7 @@ const Heading = /*#__PURE__*/React.forwardRef(function Heading(_ref, ref) {
   }), children);
 });
 
-const _excluded$e = ["as", "variant", "tone", "size", "exceptionallySetClassName", "openInNewTab"];
+const _excluded$f = ["as", "variant", "tone", "size", "exceptionallySetClassName", "openInNewTab"];
 /**
  * A semantic link that looks like a button, exactly matching the `Button` component in all visual
  * aspects.
@@ -1413,7 +1468,7 @@ const ButtonLink = /*#__PURE__*/polymorphicComponent(function ButtonLink(_ref, r
     exceptionallySetClassName,
     openInNewTab = false
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$e);
+      props = _objectWithoutProperties(_ref, _excluded$f);
 
   return /*#__PURE__*/React.createElement(BaseButton, _objectSpread2(_objectSpread2({}, props), {}, {
     as: as,
@@ -1429,14 +1484,14 @@ const ButtonLink = /*#__PURE__*/polymorphicComponent(function ButtonLink(_ref, r
 
 var modules_3d05deee = {"container":"fdc181b3"};
 
-const _excluded$f = ["as", "openInNewTab", "exceptionallySetClassName"];
+const _excluded$g = ["as", "openInNewTab", "exceptionallySetClassName"];
 const TextLink = /*#__PURE__*/polymorphicComponent(function TextLink(_ref, ref) {
   let {
     as = 'a',
     openInNewTab = false,
     exceptionallySetClassName
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$f);
+      props = _objectWithoutProperties(_ref, _excluded$g);
 
   return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
     as: as,
@@ -1448,7 +1503,7 @@ const TextLink = /*#__PURE__*/polymorphicComponent(function TextLink(_ref, ref)
   }));
 });
 
-const _excluded$g = ["checked", "indeterminate", "disabled"];
+const _excluded$h = ["checked", "indeterminate", "disabled"];
 const 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',
@@ -1487,7 +1542,7 @@ function CheckboxIcon(_ref) {
     indeterminate,
     disabled
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$g);
+      props = _objectWithoutProperties(_ref, _excluded$h);
 
   const pathKey = getPathKey({
     checked,
@@ -1508,7 +1563,7 @@ function CheckboxIcon(_ref) {
 
 var modules_664a6a80 = {"container":"_84dfdb83","disabled":"_131a2ca4","checked":"_95b1556d","keyFocused":"_49de7ebd","icon":"_6b4b1851","label":"_9047f3bd"};
 
-const _excluded$h = ["label", "icon", "disabled", "indeterminate", "defaultChecked", "onChange"];
+const _excluded$i = ["label", "icon", "disabled", "indeterminate", "defaultChecked", "onChange"];
 const CheckboxField = /*#__PURE__*/React.forwardRef(function CheckboxField(_ref, ref) {
   var _ref2, _props$checked, _props$checked2;
 
@@ -1520,7 +1575,7 @@ const CheckboxField = /*#__PURE__*/React.forwardRef(function CheckboxField(_ref,
     defaultChecked,
     onChange
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$h);
+      props = _objectWithoutProperties(_ref, _excluded$i);
 
   const isControlledComponent = typeof props.checked === 'boolean';
 
@@ -1735,7 +1790,7 @@ var modules_3f03ead6 = {"inputWrapper":"_66b448b3"};
 
 var modules_aaf25250 = {"inputWrapper":"fb09cd05","bordered":"f65f40dd","error":"_29118bf0","startIcon":"a40eb111"};
 
-const _excluded$i = ["variant", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "togglePasswordLabel", "hidden", "aria-describedby"];
+const _excluded$j = ["variant", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "togglePasswordLabel", "hidden", "aria-describedby"];
 const PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref, ref) {
   let {
     variant = 'default',
@@ -1750,7 +1805,7 @@ const PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref,
     hidden,
     'aria-describedby': ariaDescribedBy
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$i);
+      props = _objectWithoutProperties(_ref, _excluded$j);
 
   const id = useId(props.id);
   const internalRef = React.useRef(null);
@@ -1799,7 +1854,7 @@ const PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref,
 
 var modules_1fa9b208 = {"selectWrapper":"a804edbf","bordered":"_50a3655f","error":"a6d38abf"};
 
-const _excluded$j = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "children", "hidden", "aria-describedby"];
+const _excluded$k = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "children", "hidden", "aria-describedby"];
 const SelectField = /*#__PURE__*/React.forwardRef(function SelectField(_ref, ref) {
   let {
     variant = 'default',
@@ -1815,7 +1870,7 @@ const SelectField = /*#__PURE__*/React.forwardRef(function SelectField(_ref, ref
     hidden,
     'aria-describedby': ariaDescribedBy
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$j);
+      props = _objectWithoutProperties(_ref, _excluded$k);
 
   return /*#__PURE__*/React.createElement(BaseField, {
     variant: variant,
@@ -1853,7 +1908,7 @@ function SelectChevron(props) {
 
 var modules_8e05f7c9 = {"container":"ec63c3f1","disabled":"_7de9c06d","checked":"a37981fc","toggle":"_2a17ac45","label":"_68cc9707","handle":"_91409c7f","keyFocused":"a6490371"};
 
-const _excluded$k = ["label", "hint", "disabled", "hidden", "defaultChecked", "id", "aria-describedby", "aria-label", "aria-labelledby", "onChange"];
+const _excluded$l = ["label", "hint", "disabled", "hidden", "defaultChecked", "id", "aria-describedby", "aria-label", "aria-labelledby", "onChange"];
 const SwitchField = /*#__PURE__*/React.forwardRef(function SwitchField(_ref, ref) {
   var _ref2, _props$checked, _props$checked2;
 
@@ -1869,7 +1924,7 @@ const SwitchField = /*#__PURE__*/React.forwardRef(function SwitchField(_ref, ref
     'aria-labelledby': originalAriaLabelledby,
     onChange
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$k);
+      props = _objectWithoutProperties(_ref, _excluded$l);
 
   const id = useId(originalId);
   const hintId = useId();
@@ -1929,7 +1984,7 @@ const SwitchField = /*#__PURE__*/React.forwardRef(function SwitchField(_ref, ref
 
 var modules_2728c236 = {"textAreaContainer":"_21dbfa84","innerContainer":"_43588660","bordered":"f081b428","error":"a862f0e5","autoExpand":"_46360b15"};
 
-const _excluded$l = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "hidden", "aria-describedby", "rows", "autoExpand"];
+const _excluded$m = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "hidden", "aria-describedby", "rows", "autoExpand"];
 const TextArea = /*#__PURE__*/React.forwardRef(function TextArea(_ref, ref) {
   let {
     variant = 'default',
@@ -1946,7 +2001,7 @@ const TextArea = /*#__PURE__*/React.forwardRef(function TextArea(_ref, ref) {
     rows,
     autoExpand = false
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$l);
+      props = _objectWithoutProperties(_ref, _excluded$m);
 
   const containerRef = React.useRef(null);
   const internalRef = React.useRef(null);
@@ -1990,7 +2045,7 @@ const TextArea = /*#__PURE__*/React.forwardRef(function TextArea(_ref, ref) {
   }))));
 });
 
-const _excluded$m = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "type", "maxWidth", "hidden", "aria-describedby", "startIcon"];
+const _excluded$n = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "type", "maxWidth", "hidden", "aria-describedby", "startIcon"];
 const TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
   let {
     variant = 'default',
@@ -2007,7 +2062,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
     'aria-describedby': ariaDescribedBy,
     startIcon
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$m);
+      props = _objectWithoutProperties(_ref, _excluded$n);
 
   const internalRef = React.useRef(null);
   const combinedRef = useCallbackRef.useMergeRefs([ref, internalRef]);
@@ -2076,7 +2131,7 @@ function emailToIndex(email, 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"};
 
-const _excluded$n = ["user", "avatarUrl", "size", "className", "colorList", "exceptionallySetClassName"];
+const _excluded$o = ["user", "avatarUrl", "size", "className", "colorList", "exceptionallySetClassName"];
 const AVATAR_COLORS = ['#fcc652', '#e9952c', '#e16b2d', '#d84b40', '#e8435a', '#e5198a', '#ad3889', '#86389c', '#a8a8a8', '#98be2f', '#5d9d50', '#5f9f85', '#5bbcb6', '#32a3bf', '#2bafeb', '#2d88c3', '#3863cc', '#5e5e5e'];
 
 function Avatar(_ref) {
@@ -2088,7 +2143,7 @@ function Avatar(_ref) {
     colorList = AVATAR_COLORS,
     exceptionallySetClassName
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$n);
+      props = _objectWithoutProperties(_ref, _excluded$o);
 
   const userInitials = getInitials(user.name) || getInitials(user.email);
   const avatarSize = size ? size : 'l';
@@ -2110,14 +2165,14 @@ Avatar.displayName = 'Avatar';
 
 var modules_33c7c985 = {"badge":"c717b894","badge-info":"_0fddcc47","badge-positive":"_62550d9b","badge-promote":"_5fdf5bab","badge-attention":"_2d52906f"};
 
-const _excluded$o = ["tone", "label"];
+const _excluded$p = ["tone", "label"];
 
 function Badge(_ref) {
   let {
     tone,
     label
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$o);
+      props = _objectWithoutProperties(_ref, _excluded$p);
 
   return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
     as: "span" // It enables putting the badge inside a button (https://stackoverflow.com/a/12982334)
@@ -2129,7 +2184,7 @@ function Badge(_ref) {
 
 var modules_8f59d13b = {"overlay":"_8aa86dd3","fadein":"_20c07ee6","fitContent":"_713bc08f","container":"_45139719","full":"ec8619a2","large":"_86a1d5a4","medium":"_11d61de3","small":"aee19643","xlarge":"fe449c81","expand":"_61ffb38f","buttonContainer":"_49ffdac0","headerContent":"ee92ccb3"};
 
-const _excluded$p = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "exceptionallySetOverlayClassName", "autoFocus", "hideOnEscape", "hideOnInteractOutside", "children", "portalElement"],
+const _excluded$q = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "exceptionallySetOverlayClassName", "autoFocus", "hideOnEscape", "hideOnInteractOutside", "children", "portalElement"],
       _excluded2$1 = ["children", "button", "withDivider", "exceptionallySetClassName"],
       _excluded3 = ["exceptionallySetClassName", "children"],
       _excluded4 = ["exceptionallySetClassName", "withDivider"],
@@ -2167,7 +2222,7 @@ function Modal(_ref) {
     children,
     portalElement
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$p);
+      props = _objectWithoutProperties(_ref, _excluded$q);
 
   const setOpen = React.useCallback(visible => {
     if (!visible) {
@@ -2416,7 +2471,7 @@ function usePrevious(value) {
 
 var modules_40c67f5b = {"tab":"e96bf360","track":"_430e252d","tab-neutral":"f631ccbe","tab-themed":"_6ba96acc","track-neutral":"ef4cd8d3","track-themed":"_344b3b10"};
 
-const _excluded$q = ["as", "children", "id", "exceptionallySetClassName"],
+const _excluded$r = ["as", "children", "id", "exceptionallySetClassName"],
       _excluded2$2 = ["children", "space"],
       _excluded3$1 = ["children", "id", "as", "render"];
 const TabsContext = /*#__PURE__*/React.createContext(null);
@@ -2467,7 +2522,7 @@ const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref, ref) {
     id,
     exceptionallySetClassName
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$q);
+      props = _objectWithoutProperties(_ref, _excluded$r);
 
   const tabContextValue = React.useContext(TabsContext);
 
@@ -2577,7 +2632,7 @@ function TabAwareSlot({
   }) : null;
 }
 
-const _excluded$r = ["children", "onItemSelect"],
+const _excluded$s = ["children", "onItemSelect"],
       _excluded2$3 = ["exceptionallySetClassName"],
       _excluded3$2 = ["as"],
       _excluded4$1 = ["exceptionallySetClassName", "modal"],
@@ -2599,7 +2654,7 @@ function Menu(_ref) {
     children,
     onItemSelect
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$r);
+      props = _objectWithoutProperties(_ref, _excluded$s);
 
   const [anchorRect, handleAnchorRectChange] = React.useState(null);
   const getAnchorRect = React.useMemo(() => {
@@ -2813,7 +2868,7 @@ const MenuGroup = /*#__PURE__*/polymorphicComponent(function MenuGroup(_ref6, re
   }, label) : null, children);
 });
 
-const _excluded$s = ["type", "variant", "size", "loading", "disabled", "tooltip", "onClick", "children"];
+const _excluded$t = ["type", "variant", "size", "loading", "disabled", "tooltip", "onClick", "children"];
 /**
  * @deprecated
  */
@@ -2829,7 +2884,7 @@ const Button$1 = /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
     onClick,
     children
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$s);
+      props = _objectWithoutProperties(_ref, _excluded$t);
 
   const className = classNames('reactist_button', variant ? "reactist_button--" + variant : null, size !== 'default' ? "reactist_button--" + size : null, {
     'reactist_button--loading': loading
@@ -2852,7 +2907,7 @@ Button$1.defaultProps = {
   disabled: false
 };
 
-const _excluded$t = ["children", "onClick", "tooltip", "className"];
+const _excluded$u = ["children", "onClick", "tooltip", "className"];
 
 class Box$1 extends React.Component {
   constructor(props, context) {
@@ -3005,7 +3060,7 @@ const Trigger = /*#__PURE__*/React.forwardRef(function Trigger(_ref, ref) {
     tooltip,
     className
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$t);
+      props = _objectWithoutProperties(_ref, _excluded$u);
 
   function handleClick(event) {
     event.preventDefault();
@@ -3132,7 +3187,7 @@ function ColorItem({
 
 ColorItem.displayName = 'ColorItem';
 
-const _excluded$u = ["children", "className", "translateKey", "isMac"];
+const _excluded$v = ["children", "className", "translateKey", "isMac"];
 // Support for setting up how to translate modifiers globally.
 //
 
@@ -3214,7 +3269,7 @@ function KeyboardShortcut(_ref) {
     translateKey = globalTranslateKey,
     isMac = (_navigator$platform$t = (_navigator$platform = navigator.platform) == null ? void 0 : _navigator$platform.toUpperCase().includes('MAC')) != null ? _navigator$platform$t : false
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$u);
+      props = _objectWithoutProperties(_ref, _excluded$v);
 
   const shortcuts = typeof children === 'string' ? [children] : children;
   return /*#__PURE__*/React.createElement("span", _objectSpread2({
@@ -3629,7 +3684,7 @@ const Input = /*#__PURE__*/React.forwardRef((props, ref) => {
 });
 Input.displayName = 'Input';
 
-const _excluded$v = ["value", "options", "onChange", "disabled", "className", "defaultValue"];
+const _excluded$w = ["value", "options", "onChange", "disabled", "className", "defaultValue"];
 
 function Select(_ref) {
   let {
@@ -3640,7 +3695,7 @@ function Select(_ref) {
     className = '',
     defaultValue
   } = _ref,
-      otherProps = _objectWithoutProperties(_ref, _excluded$v);
+      otherProps = _objectWithoutProperties(_ref, _excluded$w);
 
   const selectClassName = classNames('reactist_select', {
     disabled
@@ -3674,7 +3729,7 @@ const CloseIcon$1 = () => /*#__PURE__*/React.createElement("svg", {
   d: "M11.293 12L5.146 5.854a.5.5 0 1 1 .708-.708L12 11.293l6.146-6.147a.5.5 0 0 1 .708.708L12.707 12l6.147 6.146a.5.5 0 0 1-.708.708L12 12.707l-6.146 6.147a.5.5 0 0 1-.708-.708L11.293 12z"
 }));
 
-const _excluded$w = ["id", "icon", "title", "subtitle", "children", "customCloseButton", "onClick", "onClose", "closeAltText", "className", "aria-live"];
+const _excluded$x = ["id", "icon", "title", "subtitle", "children", "customCloseButton", "onClick", "onClose", "closeAltText", "className", "aria-live"];
 
 function DeprecatedNotification(_ref) {
   let {
@@ -3690,7 +3745,7 @@ function DeprecatedNotification(_ref) {
     className,
     'aria-live': ariaLive = 'polite'
   } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded$w);
+      rest = _objectWithoutProperties(_ref, _excluded$x);
 
   const titleId = title ? id + "-title" : null;
   const titleIdAttribute = titleId ? {
@@ -3742,7 +3797,7 @@ function DeprecatedNotification(_ref) {
 
 var modules_8f59d13b$1 = {"reach-portal":"ad18b0a0","fadein":"f7a1b219","fitContent":"_8ed9bb5c","container":"f67e892e","full":"_4139421e","large":"_649eb5fe","medium":"_5323e676","small":"_56ca7ae6","xlarge":"a7be0fce","overlay":"_88a7a680","expand":"b29456b8","buttonContainer":"_09ef1f4f","headerContent":"_0e5b530a"};
 
-const _excluded$x = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "autoFocus", "children"],
+const _excluded$y = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "autoFocus", "children"],
       _excluded2$4 = ["children", "button", "withDivider", "exceptionallySetClassName"],
       _excluded3$3 = ["exceptionallySetClassName", "children"],
       _excluded4$2 = ["exceptionallySetClassName", "withDivider"],
@@ -3777,7 +3832,7 @@ function DeprecatedModal(_ref) {
     autoFocus = true,
     children
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$x);
+      props = _objectWithoutProperties(_ref, _excluded$y);
 
   const contextValue = React.useMemo(() => ({
     onDismiss,
@@ -3949,6 +4004,7 @@ function DeprecatedModalActions(_ref5) {
 exports.Alert = Alert;
 exports.Avatar = Avatar;
 exports.Badge = Badge;
+exports.Banner = Banner;
 exports.Box = Box;
 exports.Button = Button;
 exports.ButtonLink = ButtonLink;