@carbon/ibm-products 2.36.0 → 2.38.0-alpha.5

package/lib/components/EditUpdateCards/EditUpdateCards.d.ts

@@ -1,7 +1,109 @@
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { ReactNode } from 'react';
+import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
+type ActionIcon = {
+    id: string;
+    icon: CarbonIconType;
+    onKeyDown?(): void;
+    onClick?(): void;
+    iconDescription: string;
+    href?: string;
+};
+interface EditUpdateCardsProps {
+    /**
+     * Icons that are displayed on card. Refer to design documentation for implementation guidelines
+     */
+    actionIcons?: Array<ActionIcon>;
+    /**
+     * Determines if the action icons are on the top or bottom of the card
+     */
+    actionsPlacement?: 'top' | 'bottom';
+    /**
+     * Optional label for the top of the card.
+     */
+    className?: string;
+    /**
+     * Optional header description
+     */
+    description?: string;
+    /**
+     * Edit mode children
+     */
+    editChildren?: ReactNode;
+    /**
+     * Edit mode
+     */
+    editMode?: boolean;
+    /**
+     * Optional label for the top of the card
+     */
+    label?: string;
+    /**
+     * Function that's called from the primary button or action icon
+     */
+    onPrimaryButtonClick?(): void;
+    /**
+     * Function that's called from the secondary button or action icon
+     */
+    onSecondaryButtonClick?(): void;
+    /**
+     * Preview mode children
+     */
+    previewChildren?: ReactNode;
+    /**
+     * Optional prop to allow overriding the icon rendering. Can be a React component class
+     */
+    primaryButtonIcon?: CarbonIconType;
+    /**
+     * Establishes the kind of button displayed for the primary button
+     */
+    primaryButtonKind?: 'primary' | 'ghost';
+    /**
+     * Determines if the primary button is on the top or bottom of the card
+     */
+    primaryButtonPlacement?: 'top' | 'bottom';
+    /**
+     * The text that's displayed in the primary button
+     */
+    primaryButtonText?: string;
+    /**
+     * Optionally specify an href for your Button to become an <a> element
+     */
+    secondaryButtonHref?: string;
+    /**
+     * Optional prop to allow overriding the icon rendering. Can be a React component class
+     */
+    secondaryButtonIcon?: CarbonIconType;
+    /**
+     * Establishes the kind of button displayed for the secondary button
+     */
+    secondaryButtonKind?: 'secondary' | 'ghost';
+    /**
+     * Determines if the secondary button is on the top or bottom of the card
+     */
+    secondaryButtonPlacement?: 'top' | 'bottom';
+    /**
+     * The text that's displayed in the secondary button
+     */
+    secondaryButtonText?: string;
+    /**
+     * Title that's displayed at the top of the card
+     */
+    title?: string;
+    /**
+     * Determines title size
+     */
+    titleSize?: 'default' | 'large';
+}
 /**
  Editable cards allow a user to view, modify, and save the content contained within the card.
  These cards are generally used in instances where a user needs to make changes to a resource instances
  (ex. configuration details), account plan, etc. Editable cards allow a user to edit something within context.
  */
-export let EditUpdateCards: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let EditUpdateCards: React.ForwardRefExoticComponent<EditUpdateCardsProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/EditUpdateCards/EditUpdateCards.js

@@ -118,6 +118,7 @@ exports.EditUpdateCards.propTypes = {
   /**
    * Icons that are displayed on card. Refer to design documentation for implementation guidelines
    */
+  /**@ts-ignore */
   actionIcons: index["default"].arrayOf(index["default"].shape({
     id: index["default"].string,
     icon: index["default"].oneOfType([index["default"].func, index["default"].object]),
@@ -165,6 +166,7 @@ exports.EditUpdateCards.propTypes = {
   /**
    * Optional prop to allow overriding the icon rendering. Can be a React component class
    */
+  /**@ts-ignore */
   primaryButtonIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
   /**
    * Establishes the kind of button displayed for the primary button
@@ -185,6 +187,7 @@ exports.EditUpdateCards.propTypes = {
   /**
    * Optional prop to allow overriding the icon rendering. Can be a React component class
    */
+  /**@ts-ignore */
   secondaryButtonIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
   /**
    * Establishes the kind of button displayed for the secondary button

package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.d.ts

@@ -1,5 +1,64 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference path="../../../../src/custom-typings/index.d.ts" />
+import React, { ReactNode } from 'react';
+import { ButtonProps } from '@carbon/react';
+import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
+interface NotificationsEmptyStateProps {
+    /**
+     * Empty state action button
+     */
+    action?: {
+        kind?: 'primary' | 'secondary' | 'tertiary';
+        renderIcon?: CarbonIconType;
+        onClick?: ButtonProps['onClick'];
+        text?: string;
+    };
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * The alt text for empty state svg images. If not provided , title will be used.
+     */
+    illustrationDescription?: string;
+    /**
+     * Designates the position of the illustration relative to the content
+     */
+    illustrationPosition?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Empty state illustration theme variations.
+     * To ensure you use the correct themed illustrations, you can conditionally specify light or dark
+     * based on your app's current theme value. Example:
+     * `illustrationTheme={appTheme === ('carbon--g100' || 'carbon--g90') ? 'dark' : 'light'}`
+     */
+    illustrationTheme?: 'light' | 'dark';
+    /**
+     * Empty state link object
+     */
+    link?: {
+        text?: string | ReactNode;
+        href?: string;
+    };
+    /**
+     * Empty state size
+     */
+    size?: 'lg' | 'sm';
+    /**
+     * Empty state subtitle
+     */
+    subtitle: ReactNode;
+    /**
+     * Empty state title
+     */
+    title: ReactNode;
+}
 /**
  * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.
  */
-export let NotificationsEmptyState: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let NotificationsEmptyState: React.ForwardRefExoticComponent<NotificationsEmptyStateProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js

@@ -26,11 +26,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--empty-state");
 var componentName = 'NotificationsEmptyState';
-
 /**
  * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.
  */
@@ -59,7 +57,7 @@ exports.NotificationsEmptyState = /*#__PURE__*/React__default["default"].forward
     link: link,
     size: size,
     subtitle: subtitle,
-    title: title
+    title: title || ''
   }));
 });
 

package/lib/components/ExpressiveCard/ExpressiveCard.d.ts

@@ -1,2 +1,97 @@
-export let ExpressiveCard: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+import React, { PropsWithChildren, ReactNode } from 'react';
+type ActionIcon = {
+    id?: string;
+    icon?: () => void | object;
+    onKeydown?: () => void;
+    onClick?: () => void;
+    iconDescription?: string;
+    href?: string;
+};
+interface ExpressiveCardProps extends PropsWithChildren {
+    /**
+     * Icons that are displayed on card. Refer to design documentation for implementation guidelines. Note- href will supersede onClick
+     */
+    actionIcons?: ActionIcon[];
+    /**
+     * Content that shows in the body of the card
+     */
+    /**
+     * Optional user provided class
+     */
+    className?: string;
+    /**
+     * Optional header description
+     */
+    description?: string | object | ReactNode;
+    /**
+     * Optional label for the top of the card
+     */
+    label?: string | object | ReactNode;
+    /**
+     * Optional media content like an image to be placed in the card
+     */
+    media?: ReactNode;
+    /**
+     * Establishes the position of the media in the card
+     */
+    mediaPosition?: 'top' | 'left';
+    /**
+     * Provides the callback for a clickable card
+     */
+    onClick?: () => void;
+    /**
+     * Function that's called from the primary button or action icon
+     */
+    onPrimaryButtonClick?: () => void;
+    /**
+     * Function that's called from the secondary button
+     */
+    onSecondaryButtonClick?: () => void;
+    /**
+     * Provides the icon that's displayed at the top of the card
+     */
+    pictogram?: () => void | object;
+    /**
+     * Optionally specify an href for your Button to become an <a> element
+     */
+    primaryButtonHref?: string;
+    /**
+     * Optional prop to allow overriding the icon rendering. Can be a React component class
+     */
+    primaryButtonIcon?: () => void | object;
+    /**
+     * Establishes the kind of button displayed for the primary button
+     */
+    primaryButtonKind?: 'primary' | 'ghost';
+    /**
+     * The text that's displayed in the primary button
+     */
+    primaryButtonText?: string;
+    /**
+     * Optionally specify an href for your Button to become an <a> element
+     */
+    secondaryButtonHref?: string;
+    /**
+     * Optional prop to allow overriding the icon rendering. Can be a React component class
+     */
+    secondaryButtonIcon?: () => void | object;
+    /**
+     * Establishes the kind of button displayed for the secondary button
+     */
+    secondaryButtonKind?: 'secondary' | 'ghost';
+    /**
+     * The text that's displayed in the secondary button
+     */
+    secondaryButtonText?: string;
+    /**
+     * **Experimental:** For all cases a `Slug` component can be provided.
+     * Clickable tiles only accept a boolean value of true and display a hollow slug.
+     */
+    slug?: ReactNode | boolean;
+    /**
+     * Title that's displayed at the top of the card
+     */
+    title?: string | object | ReactNode;
+}
+export declare let ExpressiveCard: React.ForwardRefExoticComponent<ExpressiveCardProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/ExpressiveCard/ExpressiveCard.js

@@ -35,6 +35,7 @@ exports.ExpressiveCard.propTypes = {
   /**
    * Icons that are displayed on card. Refer to design documentation for implementation guidelines. Note- href will supersede onClick
    */
+  /**@ts-ignore */
   actionIcons: index["default"].arrayOf(index["default"].shape({
     id: index["default"].string,
     icon: index["default"].oneOfType([index["default"].func, index["default"].object]),
@@ -82,6 +83,7 @@ exports.ExpressiveCard.propTypes = {
   /**
    * Provides the icon that's displayed at the top of the card
    */
+  /**@ts-ignore */
   pictogram: index["default"].oneOfType([index["default"].func, index["default"].object]),
   /**
    * Optionally specify an href for your Button to become an <a> element
@@ -90,6 +92,7 @@ exports.ExpressiveCard.propTypes = {
   /**
    * Optional prop to allow overriding the icon rendering. Can be a React component class
    */
+  /**@ts-ignore */
   primaryButtonIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
   /**
    * Establishes the kind of button displayed for the primary button
@@ -106,6 +109,7 @@ exports.ExpressiveCard.propTypes = {
   /**
    * Optional prop to allow overriding the icon rendering. Can be a React component class
    */
+  /**@ts-ignore */
   secondaryButtonIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
   /**
    * Establishes the kind of button displayed for the secondary button

package/lib/components/InlineTip/InlineTipButton.d.ts

@@ -1,5 +1,24 @@
+/**
+ * Copyright IBM Corp. 2023, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { ReactNode } from 'react';
+interface InlineTipButtonProps {
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Provide the contents of the InlineTip.
+     */
+    children: ReactNode;
+}
 /**
  * This is a standard Carbon button, styled specifically for use inside InlineTip.
  */
-export let InlineTipButton: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let InlineTipButton: React.ForwardRefExoticComponent<InlineTipButtonProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/lib/components/InterstitialScreen/InterstitialScreen.d.ts

@@ -1,8 +1,106 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { PropsWithChildren, ReactNode } from 'react';
+type Media = {
+    breakpoints?: {
+        xlg?: number;
+        lg?: number;
+    };
+} & ({
+    render?: () => ReactNode;
+    filePaths?: never;
+} | {
+    render?: never;
+    filePaths?: string[];
+});
+interface InterstitialScreenProps extends PropsWithChildren {
+    /**
+     * Provide the contents of the InterstitialScreen.
+     */
+    children: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Tooltip text and aria label for the Close button icon.
+     */
+    closeIconDescription?: string;
+    /**
+     * The domain this app belongs to, e.g. "IBM Cloud Pak".
+     */
+    domainName?: string;
+    /**
+     * Provide an optional class to be applied to the <header> element >.
+     */
+    headerClassName?: string;
+    /**
+     * Provide an optional class to be applied to the <header> element >.
+     */
+    headerTitle?: string;
+    /**
+     * Optional parameter to hide the progress indicator when multiple steps are used.
+     */
+    hideProgressIndicator?: boolean;
+    /**
+     * The aria label applied to the Interstitial Screen component
+     */
+    interstitialAriaLabel?: string;
+    /**
+     * Specifies whether the component is shown as a full-screen
+     * experience, else it is shown as a modal by default.
+     */
+    isFullScreen?: boolean;
+    /**
+     * Specifies whether the component is currently open.
+     */
+    isOpen?: boolean;
+    /**
+     * The object describing an image in one of two shapes.
+     *
+     * If a single media element is required, use `{render}`.
+     *
+     * If a stepped animation is required, use `{filePaths}`.
+     *
+     * Breakpoints are used to set the media content column size as well as the remainder for the main content areas column size.
+     * Medium and small breakpoints will be set to 0 internally to focus on the main content area.
+     * @see {@link MEDIA_PROP_TYPE}.
+     */
+    media?: Media;
+    /**
+     * The label for the Next button.
+     */
+    nextButtonLabel?: string;
+    /**
+     * Function to call when the close button is clicked.
+     */
+    onClose?: () => void;
+    /**
+     * The label for the Previous button.
+     */
+    previousButtonLabel?: string;
+    /**
+     * The name of this app, e.g. "QRadar".
+     */
+    productName?: string;
+    /**
+     * The label for the skip button.
+     */
+    skipButtonLabel?: string;
+    /**
+     * The label for the start button.
+     */
+    startButtonLabel?: string;
+}
 /**
  * InterstitialScreen can be a full page or an overlay, and are
  * shown on the first time a user accesses a new experience
  * (e.g. upon first login or first time opening a page where a
  * newly purchased capability is presented).
  */
-export let InterstitialScreen: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let InterstitialScreen: React.ForwardRefExoticComponent<InterstitialScreenProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/InterstitialScreen/InterstitialScreen.js

@@ -60,7 +60,6 @@ var defaults = {
   skipButtonLabel: '',
   startButtonLabel: 'Get started'
 };
-
 /**
  * InterstitialScreen can be a full page or an overlay, and are
  * shown on the first time a user accesses a new experience
@@ -115,7 +114,7 @@ exports.InterstitialScreen = /*#__PURE__*/React__default["default"].forwardRef(f
   var childArray = React.Children.toArray(children);
   var isMultiStep = childArray.length > 1;
   var mediaIsDefined = (media === null || media === void 0 ? void 0 : media.render) || (media === null || media === void 0 ? void 0 : media.filePaths);
-  var bodyScrollRef = React.useRef();
+  var bodyScrollRef = React.useRef(null);
   var mediaBreakpoints = {
     xlg: (media === null || media === void 0 || (_media$breakpoints = media.breakpoints) === null || _media$breakpoints === void 0 ? void 0 : _media$breakpoints.xlg) || 0,
     lg: (media === null || media === void 0 || (_media$breakpoints2 = media.breakpoints) === null || _media$breakpoints2 === void 0 ? void 0 : _media$breakpoints2.lg) || 0,
@@ -136,7 +135,8 @@ exports.InterstitialScreen = /*#__PURE__*/React__default["default"].forwardRef(f
     onClose();
   }, [onClose]);
   var scrollBodyToTop = function scrollBodyToTop() {
-    bodyScrollRef.current.scroll({
+    var _bodyScrollRef$curren;
+    (_bodyScrollRef$curren = bodyScrollRef.current) === null || _bodyScrollRef$curren === void 0 || _bodyScrollRef$curren.scroll({
       top: 0,
       behavior: 'smooth'
     });
@@ -206,10 +206,12 @@ exports.InterstitialScreen = /*#__PURE__*/React__default["default"].forwardRef(f
       vertical: false,
       currentIndex: progStep
     }, childArray.map(function (child, idx) {
-      return /*#__PURE__*/React__default["default"].createElement(react.ProgressStep, {
-        key: idx,
-        label: child.props.stepTitle
-      });
+      if ( /*#__PURE__*/React.isValidElement(child)) {
+        return /*#__PURE__*/React__default["default"].createElement(react.ProgressStep, {
+          key: idx,
+          label: child.props.stepTitle
+        });
+      }
     })))), /*#__PURE__*/React__default["default"].createElement(react.ModalBody, {
       className: bodyBlockClass
     }, childElements), /*#__PURE__*/React__default["default"].createElement(react.ModalFooter, null, renderFooter()));
@@ -235,10 +237,12 @@ exports.InterstitialScreen = /*#__PURE__*/React__default["default"].forwardRef(f
       vertical: false,
       currentIndex: progStep
     }, childArray.map(function (child, idx) {
-      return /*#__PURE__*/React__default["default"].createElement(react.ProgressStep, {
-        key: idx,
-        label: child.props.stepTitle
-      });
+      if ( /*#__PURE__*/React.isValidElement(child)) {
+        return /*#__PURE__*/React__default["default"].createElement(react.ProgressStep, {
+          key: idx,
+          label: child.props.stepTitle
+        });
+      }
     })))), childElements, renderFooter()));
   };
   var renderBody = function renderBody() {
@@ -261,7 +265,10 @@ exports.InterstitialScreen = /*#__PURE__*/React__default["default"].forwardRef(f
       className: "".concat(blockClass, "__carousel")
     }, /*#__PURE__*/React__default["default"].createElement(Carousel.Carousel, {
       disableArrowScroll: true,
-      ref: scrollRef
+      ref: scrollRef,
+      onScroll: function onScroll(scrollPercent) {
+        scrollPercent === 0 && setProgStep(0);
+      }
     }, children)) : childArray[0])), mediaIsDefined && /*#__PURE__*/React__default["default"].createElement(react.Column, {
       xlg: mediaBreakpoints.xlg,
       lg: mediaBreakpoints.lg,
@@ -280,7 +287,10 @@ exports.InterstitialScreen = /*#__PURE__*/React__default["default"].forwardRef(f
       className: "".concat(blockClass, "__carousel")
     }, /*#__PURE__*/React__default["default"].createElement(Carousel.Carousel, {
       disableArrowScroll: true,
-      ref: scrollRef
+      ref: scrollRef,
+      onScroll: function onScroll(scrollPercent) {
+        scrollPercent === 0 && setProgStep(0);
+      }
     }, children)) : /*#__PURE__*/React__default["default"].createElement("div", null, childArray[0])));
   };
   var renderFooter = function renderFooter() {
@@ -388,6 +398,7 @@ exports.InterstitialScreen.propTypes = {
    * Medium and small breakpoints will be set to 0 internally to focus on the main content area.
    * @see {@link MEDIA_PROP_TYPE}.
    */
+  /**@ts-ignore */
   media: index["default"].oneOfType([index["default"].shape({
     render: index["default"].func,
     breakpoints: index["default"].shape({

package/lib/components/Nav/NavItem.js

@@ -16,7 +16,7 @@ var cx = require('classnames');
 var settings = require('../../settings.js');
 var uuidv4 = require('../../global/js/utils/uuidv4.js');
 var NavItemLink = require('./NavItemLink.js');
-var bucket8 = require('../../node_modules/@carbon/icons-react/es/generated/bucket-8.js');
+var bucket9 = require('../../node_modules/@carbon/icons-react/es/generated/bucket-9.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -91,7 +91,7 @@ var NavItem = function NavItem(_ref) {
     element: element,
     href: href,
     tabIndex: navItemTabIndex
-  }, rest, externalLinkProps), children, externalLink && /*#__PURE__*/React__default["default"].createElement(bucket8.Launch, {
+  }, rest, externalLinkProps), children, externalLink && /*#__PURE__*/React__default["default"].createElement(bucket9.Launch, {
     className: "".concat(blockClass, "__link--external__icon")
   })));
 };

package/lib/components/NotificationsPanel/NotificationsPanel.js

@@ -17,6 +17,7 @@ var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 var utils = require('./utils.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
+var usePrefersReducedMotion = require('../../global/js/hooks/usePrefersReducedMotion.js');
 var react = require('@carbon/react');
 var icons = require('@carbon/react/icons');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
@@ -162,9 +163,7 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
   var previousState = usePreviousValue.usePreviousValue({
     open: open
   });
-  var reducedMotion = window && window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
-    matches: true
-  };
+  var reducedMotion = usePrefersReducedMotion["default"]();
   React.useEffect(function () {
     // Set the notifications passed to the state within this component
     setAllNotifications(data);
@@ -183,10 +182,10 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
     !open && setRender(false);
   };
   React.useEffect(function () {
-    if (!open && previousState !== null && previousState !== void 0 && previousState.open && reducedMotion.matches) {
+    if (!open && previousState !== null && previousState !== void 0 && previousState.open && reducedMotion) {
       setRender(false);
     }
-  }, [open, reducedMotion.matches, previousState === null || previousState === void 0 ? void 0 : previousState.open]);
+  }, [open, previousState === null || previousState === void 0 ? void 0 : previousState.open, reducedMotion]);
   var sortChronologically = function sortChronologically(arr) {
     if (!arr || arr && !arr.length) {
       return;
@@ -326,7 +325,7 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
     id: blockClass,
     className: cx__default["default"](blockClass, className, "".concat(blockClass, "__container")),
     style: {
-      animation: !reducedMotion.matches ? "".concat(open ? 'fade-in 250ms' : 'fade-out forwards 250ms') : null
+      animation: !reducedMotion ? "".concat(open ? 'fade-in 250ms' : 'fade-out forwards 250ms') : null
     },
     onAnimationEnd: onAnimationEnd,
     ref: ref || notificationPanelRef