@doist/reactist 19.1.0 → 20.0.0

package/README.md

@@ -74,6 +74,8 @@ This command will prompt you to provide all the information needed to create a n
 
 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:
@@ -148,6 +150,38 @@ npm run test -- --watch
 
 MacOS users might need to upgrade watchman with `brew install watchman` when experiencing troubles with the watch mode. See this issue for details: https://github.com/facebook/jest/issues/1767
 
+## Chromatic visual regression tests
+
+Reactist relies on [Chromatic](https://www.chromatic.com/) to run visual regression tests on our component during the CI step in GitHub.
+
+### Enable tests
+
+To enable such tests, just add `chromatic: { disableSnapshot: false }` as a story parameter in your stories. Example:
+
+```
+<Canvas>
+    <Story
+        name="Main demo"
+        parameters={{
+            docs: { source: { type: 'code' } },
+            chromatic: { disableSnapshot: false },
+        }}
+    >
+        <BannerExamples theme="light" />
+    </Story>
+</Canvas>
+```
+
+We recommend you enable these tests on those Storybook stories that have several different variants of the component under testing. Enabling them on one or two stories per component should be sufficient in most cases (there's no need to enable them on all stories).
+
+### Review tests
+
+When you open a GitHub PR, you'll notice the "UI Review" and "UI Tests" CI steps.
+
+-   Clicking on "Details" will bring you to the Chromatic UI (if you don't already have a Chromatic account, please sign-up using your GitHub account).
+-   Now you can review and accept your changes (or go back and change your code).
+-   When you're happy with your changes, make sure to mark them as "Approved".
+
 # Releasing
 
 A new version of reactist is published both on npm and GitHub Package Registry whenever a new release on GitHub is created.

package/dist/reactist.cjs.development.js

@@ -831,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,
@@ -846,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;
@@ -889,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,
@@ -901,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), {}, {
@@ -917,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.
  *
@@ -942,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,
@@ -992,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
  *
@@ -1183,7 +1237,7 @@ function useToastsAnimation() {
   };
 }
 
-const _excluded$c = ["toastId"];
+const _excluded$d = ["toastId"];
 /** @private */
 
 const InternalToast = /*#__PURE__*/React__default.forwardRef(function InternalToast({
@@ -1292,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,
@@ -1368,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,
@@ -1380,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
@@ -1397,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.
@@ -1414,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,
@@ -1430,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,
@@ -1449,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',
@@ -1488,7 +1542,7 @@ function CheckboxIcon(_ref) {
     indeterminate,
     disabled
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$g);
+      props = _objectWithoutProperties(_ref, _excluded$h);
 
   const pathKey = getPathKey({
     checked,
@@ -1509,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;
 
@@ -1521,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';
 
@@ -1736,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',
@@ -1751,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);
@@ -1800,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',
@@ -1816,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,
@@ -1854,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;
 
@@ -1870,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();
@@ -1930,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',
@@ -1947,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);
@@ -1991,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',
@@ -2008,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]);
@@ -2077,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) {
@@ -2089,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';
@@ -2111,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)
@@ -2130,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"],
@@ -2168,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) {
@@ -2417,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);
@@ -2468,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);
 
@@ -2578,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"],
@@ -2600,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(() => {
@@ -2814,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
  */
@@ -2830,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
@@ -2853,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) {
@@ -3006,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();
@@ -3133,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.
 //
 
@@ -3215,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({
@@ -3630,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 {
@@ -3641,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
@@ -3665,82 +3719,6 @@ Select.defaultProps = {
   disabled: false
 };
 
-const CloseIcon$1 = () => /*#__PURE__*/React.createElement("svg", {
-  width: "24",
-  height: "24",
-  viewBox: "0 0 24 24"
-}, /*#__PURE__*/React.createElement("path", {
-  fill: "gray",
-  fillRule: "evenodd",
-  d: "M11.293 12L5.146 5.854a.5.5 0 1 1 .708-.708L12 11.293l6.146-6.147a.5.5 0 0 1 .708.708L12.707 12l6.147 6.146a.5.5 0 0 1-.708.708L12 12.707l-6.146 6.147a.5.5 0 0 1-.708-.708L11.293 12z"
-}));
-
-const _excluded$w = ["id", "icon", "title", "subtitle", "children", "customCloseButton", "onClick", "onClose", "closeAltText", "className", "aria-live"];
-
-function DeprecatedNotification(_ref) {
-  let {
-    id,
-    icon,
-    title,
-    subtitle,
-    children,
-    customCloseButton,
-    onClick,
-    onClose,
-    closeAltText = 'Close',
-    className,
-    'aria-live': ariaLive = 'polite'
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded$w);
-
-  const titleId = title ? id + "-title" : null;
-  const titleIdAttribute = titleId ? {
-    id: titleId
-  } : null;
-  const subtitleId = subtitle ? id + "-subtitle" : null;
-  const subtitleIdAttribute = subtitleId ? {
-    id: subtitleId
-  } : null;
-  const contentId = children ? id + "-content" : null;
-  const contentIdAttribute = children ? {
-    id: id + "-content"
-  } : null;
-  const ariaLabelledBy = contentId ? {
-    'aria-labelledby': contentId
-  } : titleId ? {
-    'aria-labelledby': titleId
-  } : null;
-  const ariaDescribedBy = subtitleId && !children ? {
-    'aria-describedby': subtitleId
-  } : null;
-  const notificationContent = /*#__PURE__*/React.createElement("div", _objectSpread2({
-    className: "reactist-notification__content"
-  }, contentIdAttribute), children != null ? children : /*#__PURE__*/React.createElement(React.Fragment, null, title ? /*#__PURE__*/React.createElement("h3", _objectSpread2({
-    className: "reactist-notification__title"
-  }, titleIdAttribute), title) : null, subtitle ? /*#__PURE__*/React.createElement("p", _objectSpread2({
-    className: "reactist-notification__subtitle"
-  }, subtitleIdAttribute), subtitle) : null));
-  const notificationBody = /*#__PURE__*/React.createElement("div", {
-    className: "reactist-notification__icon-content-group"
-  }, icon != null ? icon : null, notificationContent);
-  return /*#__PURE__*/React.createElement("div", _objectSpread2(_objectSpread2(_objectSpread2({
-    id: id,
-    role: "alert",
-    className: classNames('reactist-notification', className, {
-      'reactist-notification--with-button': Boolean(onClick),
-      'reactist-notification--with-close-button': Boolean(onClose)
-    }),
-    "aria-live": ariaLive
-  }, ariaLabelledBy), ariaDescribedBy), rest), onClick ? /*#__PURE__*/React.createElement("button", {
-    className: "reactist-notification__button",
-    onClick: onClick
-  }, notificationBody) : notificationBody, onClose ? /*#__PURE__*/React.createElement("button", {
-    className: "reactist-notification__close-button",
-    onClick: onClose,
-    "aria-label": closeAltText
-  }, customCloseButton != null ? customCloseButton : /*#__PURE__*/React.createElement(CloseIcon$1, null)) : null);
-}
-
 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"],
@@ -3950,6 +3928,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;
@@ -3968,7 +3947,6 @@ exports.DeprecatedModalBody = DeprecatedModalBody;
 exports.DeprecatedModalCloseButton = DeprecatedModalCloseButton;
 exports.DeprecatedModalFooter = DeprecatedModalFooter;
 exports.DeprecatedModalHeader = DeprecatedModalHeader;
-exports.DeprecatedNotification = DeprecatedNotification;
 exports.DeprecatedSelect = Select;
 exports.Divider = Divider;
 exports.Heading = Heading;
@@ -4011,6 +3989,5 @@ exports.Time = Time;
 exports.Toast = Toast;
 exports.ToastsProvider = ToastsProvider;
 exports.Tooltip = Tooltip;
-exports.usePrevious = usePrevious;
 exports.useToasts = useToasts;
 //# sourceMappingURL=reactist.cjs.development.js.map