@kaizen/components 0.0.0-canary-workflow-export-20240910075656 → 0.0.0-canary-remove-type-module-20241002054901

package/dist/cjs/Brand/Brand.cjs

@@ -2,6 +2,7 @@
 
 var tslib = require('tslib');
 var React = require('react');
+var classnames = require('classnames');
 var hostedAssets = require('../utils/hostedAssets.cjs');
 var BrandCollectiveIntelligence = require('./BrandCollectiveIntelligence/BrandCollectiveIntelligence.cjs');
 var Brand_module = require('./Brand.module.scss.cjs');
@@ -11,6 +12,7 @@ function _interopDefault(e) {
   };
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var isSVG = function (variant, restProps) {
   return variant === "collective-intelligence";
 };
@@ -42,11 +44,10 @@ var Brand = function (_a) {
   }
   var alt = restProps.alt,
     classNameOverride = restProps.classNameOverride,
-    otherProps = tslib.__rest(restProps, ["alt", "classNameOverride"]);
+    style = restProps.style,
+    otherProps = tslib.__rest(restProps, ["alt", "classNameOverride", "style"]);
   var brandTheme = reversed ? "-reversed" : "-default";
-  return React__default.default.createElement("picture", tslib.__assign({
-    className: classNameOverride
-  }, otherProps), React__default.default.createElement("source", {
+  return React__default.default.createElement("picture", tslib.__assign({}, otherProps), React__default.default.createElement("source", {
     srcSet: hostedAssets.assetUrl("brand/".concat(variant, "-reversed.svg")),
     media: "(forced-colors: active) and (prefers-color-scheme: dark)"
   }), React__default.default.createElement("source", {
@@ -55,7 +56,8 @@ var Brand = function (_a) {
   }), React__default.default.createElement("img", {
     src: hostedAssets.assetUrl("brand/".concat(variant).concat(brandTheme, ".svg")),
     alt: alt,
-    className: Brand_module.img
+    className: classnames__default.default(Brand_module.img, classNameOverride),
+    style: style
   }));
 };
 Brand.displayName = "Brand";

package/dist/cjs/Notification/InlineNotification/InlineNotification.cjs

@@ -17,7 +17,7 @@ var classnames__default = /*#__PURE__*/_interopDefault(classnames);
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093392/Inline+Notification Guidance} |
  * {@link https://cultureamp.design/storybook/?path=/docs/components-notifications-inline-notification--docs Storybook}
  */
-var InlineNotification = function (_a) {
+var InlineNotification = React.forwardRef(function (_a, ref) {
   var isSubtle = _a.isSubtle,
     _b = _a.hideCloseIcon,
     hideCloseIcon = _b === void 0 ? false : _b,
@@ -28,8 +28,9 @@ var InlineNotification = function (_a) {
   return React__default.default.createElement(GenericNotification.GenericNotification, tslib.__assign({
     style: "inline",
     persistent: persistent || hideCloseIcon,
-    classNameOverride: classnames__default.default(classNameOverride, [isSubtle && GenericNotification_module.subtle])
+    classNameOverride: classnames__default.default(classNameOverride, [isSubtle && GenericNotification_module.subtle]),
+    ref: ref
   }, otherProps));
-};
+});
 InlineNotification.displayName = "InlineNotification";
 exports.InlineNotification = InlineNotification;

package/dist/cjs/Notification/ToastNotification/context/ToastNotificationContext.cjs

@@ -45,13 +45,12 @@ var ToastNotificationProvider = function (_a) {
     setNotifications(copy);
   };
   var removeToastNotification = function (notificationID) {
-    var notificationIndex = notifications.findIndex(function (_a) {
-      var id = _a.id;
-      return id === notificationID;
+    setNotifications(function (prev) {
+      return prev.filter(function (_a) {
+        var id = _a.id;
+        return id !== notificationID;
+      });
     });
-    var copy = notifications.slice();
-    copy.splice(notificationIndex, 1); // Mutation
-    setNotifications(copy);
   };
   var clearToastNotifications = function () {
     setNotifications([]);

package/dist/cjs/Notification/subcomponents/GenericNotification/GenericNotification.cjs

@@ -3,6 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
+var isRefObject = require('../../../utils/isRefObject.cjs');
 var CancelButton = require('../CancelButton/CancelButton.cjs');
 var NotificationHeading = require('../NotificationHeading/NotificationHeading.cjs');
 var NotificationIcon = require('../NotificationIcon/NotificationIcon.cjs');
@@ -14,7 +15,7 @@ function _interopDefault(e) {
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
-var GenericNotification = function (_a) {
+var GenericNotification = React.forwardRef(function (_a, ref) {
   var type = _a.type,
     variant = _a.variant,
     style = _a.style,
@@ -34,7 +35,8 @@ var GenericNotification = function (_a) {
   var _d = React.useState(false),
     isRemoved = _d[0],
     setIsRemoved = _d[1];
-  var containerRef = React.useRef(null);
+  var fallbackRef = React.useRef(null);
+  var containerRef = isRefObject.isRefObject(ref) ? ref : fallbackRef;
   React.useEffect(function () {
     requestAnimationFrame(function () {
       if (containerRef.current) {
@@ -83,6 +85,6 @@ var GenericNotification = function (_a) {
       return setIsHidden(true);
     }
   }));
-};
+});
 GenericNotification.displayName = "GenericNotification";
 exports.GenericNotification = GenericNotification;

package/dist/cjs/Tile/MultiActionTile/MultiActionTile.cjs

@@ -3,8 +3,8 @@
 var tslib = require('tslib');
 var React = require('react');
 var GenericTile = require('../subcomponents/GenericTile/GenericTile.cjs');
-var Action = require('../subcomponents/GenericTile/Action.cjs');
 var MultiActionTile_module = require('./MultiActionTile.module.scss.cjs');
+var Button = require('../../__actions__/Button/v1/Button/Button.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e
@@ -16,12 +16,9 @@ var renderActions = function (primaryAction, secondaryAction) {
     className: MultiActionTile_module.actions
   }, secondaryAction && React__default.default.createElement("div", {
     className: MultiActionTile_module.secondaryAction
-  }, React__default.default.createElement(Action, {
-    action: secondaryAction,
+  }, React__default.default.createElement(Button.Button, tslib.__assign({
     secondary: true
-  })), React__default.default.createElement(Action, {
-    action: primaryAction
-  }));
+  }, secondaryAction))), React__default.default.createElement(Button.Button, tslib.__assign({}, primaryAction)));
 };
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#MultiActionTile.1 Guidance} |

package/dist/cjs/Tile/subcomponents/GenericTile/GenericTile.cjs

@@ -8,9 +8,9 @@ require('../../../Icon/subcomponents/SVG/SVG.cjs');
 var ArrowBackwardIcon = require('../../../Icon/ArrowBackwardIcon.cjs');
 var InformationIcon = require('../../../Icon/InformationIcon.cjs');
 var Text = require('../../../Text/Text.cjs');
-var Action = require('./Action.cjs');
 var GenericTile_module = require('./GenericTile.module.scss.cjs');
 var IconButton = require('../../../__actions__/Button/v1/IconButton/IconButton.cjs');
+var Button = require('../../../__actions__/Button/v1/Button/Button.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e
@@ -47,18 +47,6 @@ var GenericTile = function (_a) {
       color: "dark-reduced-opacity"
     }, metadata)));
   };
-  var renderActions = function (primaryAction, secondaryAction, disabled) {
-    return React__default.default.createElement("div", {
-      className: GenericTile_module.actions
-    }, secondaryAction && React__default.default.createElement(Action, {
-      action: secondaryAction,
-      secondary: true,
-      disabled: disabled
-    }), primaryAction && React__default.default.createElement(Action, {
-      action: primaryAction,
-      disabled: disabled
-    }));
-  };
   var renderFront = function () {
     return React__default.default.createElement("div", {
       className: classnames__default.default(GenericTile_module.face, GenericTile_module.faceFront, mood ? GenericTile_module[mood] : GenericTile_module[variant])
@@ -86,7 +74,14 @@ var GenericTile = function (_a) {
         variant: "body"
       }, informationProp.text), (informationProp.primaryAction || informationProp.secondaryAction) && React__default.default.createElement("div", {
         className: GenericTile_module.footer
-      }, renderActions(informationProp.primaryAction, informationProp.secondaryAction, !isFlipped)));
+      }, React__default.default.createElement("div", {
+        className: GenericTile_module.actions
+      }, informationProp.secondaryAction && React__default.default.createElement(Button.Button, tslib.__assign({
+        secondary: true,
+        disabled: !isFlipped
+      }, informationProp.secondaryAction)), informationProp.primaryAction && React__default.default.createElement(Button.Button, tslib.__assign({
+        disabled: !isFlipped
+      }, informationProp.primaryAction)))));
     }
     return informationProp;
   };

package/dist/cjs/__future__/Select/subcomponents/Option/Option.cjs

@@ -2,10 +2,8 @@
 
 var tslib = require('tslib');
 var React = require('react');
-var focus = require('@react-aria/focus');
-var listbox = require('@react-aria/listbox');
-var utils = require('@react-aria/utils');
 var classnames = require('classnames');
+var reactAria = require('react-aria');
 require('../../../../Icon/subcomponents/SVG/SVG.cjs');
 var CheckIcon = require('../../../../Icon/CheckIcon.cjs');
 var SelectContext = require('../../context/SelectContext.cjs');
@@ -23,16 +21,30 @@ var Option = function (_a) {
     props = tslib.__rest(_a, ["item", "classNameOverride"]);
   var state = SelectContext.useSelectContext().state;
   var ref = React__default.default.useRef(null);
-  var _b = listbox.useOption({
+  var _b = reactAria.useOption({
       key: item.key
     }, state, ref),
     optionProps = _b.optionProps,
     isSelected = _b.isSelected,
     isDisabled = _b.isDisabled;
-  var _c = focus.useFocusRing(),
+  var onPointerUp = optionProps.onPointerUp,
+    restOptionProps = tslib.__rest(optionProps, ["onPointerUp"]);
+  var _c = reactAria.useFocusRing(),
     isFocusVisible = _c.isFocusVisible,
     focusProps = _c.focusProps;
-  return React__default.default.createElement("li", tslib.__assign({}, utils.mergeProps(optionProps, focusProps, props), {
+  return React__default.default.createElement("li", tslib.__assign({}, reactAria.mergeProps(restOptionProps, focusProps, props, {
+    onPointerUp: function (e) {
+      if (e.pointerType === "touch") {
+        // On touch devices, the listbox closes too quickly so below elements will trigger their pointer events.
+        // Slow it down a bit to prevent the appearance of propagation.
+        setTimeout(function () {
+          return state.setSelectedKey(item.key);
+        }, 250);
+      } else {
+        onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(e);
+      }
+    }
+  }), {
     ref: ref,
     className: classnames__default.default(Option_module.option, isSelected && Option_module.isSelected, isFocusVisible && Option_module.isFocusVisible, isDisabled && Option_module.disabled, classNameOverride),
     "aria-label": item.textValue

package/dist/cjs/utils/useMediaQueries.cjs

@@ -78,7 +78,7 @@ var useMediaQueries = function (propQueries) {
     kaizenMatches = _a[0],
     setKaizenMatches = _a[1];
   // ---------------------------------------
-  // Create an event listener based on the medium breakpoint and update state whenever it changes
+  // Create an event listener based on the small and large breakpoints and update state whenever one of those changes
   // ---------------------------------------
   React.useEffect(function () {
     if (isLegacyEdge || isUnsupportedSafari) {
@@ -96,9 +96,11 @@ var useMediaQueries = function (propQueries) {
         isMediumOrLarger: !isSmallAfterUpdate
       });
     };
-    mediumMatchMedia.addEventListener("change", updateMatches, true);
+    smallMatchMedia.addEventListener("change", updateMatches, true);
+    largeMatchMedia.addEventListener("change", updateMatches, true);
     return function () {
-      mediumMatchMedia.removeEventListener("change", updateMatches);
+      smallMatchMedia.removeEventListener("change", updateMatches);
+      largeMatchMedia.removeEventListener("change", updateMatches);
     };
   }, []);
   // ---------------------------------------

package/dist/esm/Brand/Brand.mjs

@@ -1,5 +1,6 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
+import classnames from 'classnames';
 import { assetUrl } from '../utils/hostedAssets.mjs';
 import { BrandCollectiveIntelligence } from './BrandCollectiveIntelligence/BrandCollectiveIntelligence.mjs';
 import styles from './Brand.module.scss.mjs';
@@ -35,11 +36,10 @@ const Brand = /*#__PURE__*/function () {
     }
     var alt = restProps.alt,
       classNameOverride = restProps.classNameOverride,
-      otherProps = __rest(restProps, ["alt", "classNameOverride"]);
+      style = restProps.style,
+      otherProps = __rest(restProps, ["alt", "classNameOverride", "style"]);
     var brandTheme = reversed ? "-reversed" : "-default";
-    return /*#__PURE__*/React.createElement("picture", __assign({
-      className: classNameOverride
-    }, otherProps), /*#__PURE__*/React.createElement("source", {
+    return /*#__PURE__*/React.createElement("picture", __assign({}, otherProps), /*#__PURE__*/React.createElement("source", {
       srcSet: assetUrl("brand/".concat(variant, "-reversed.svg")),
       media: "(forced-colors: active) and (prefers-color-scheme: dark)"
     }), /*#__PURE__*/React.createElement("source", {
@@ -48,7 +48,8 @@ const Brand = /*#__PURE__*/function () {
     }), /*#__PURE__*/React.createElement("img", {
       src: assetUrl("brand/".concat(variant).concat(brandTheme, ".svg")),
       alt: alt,
-      className: styles.img
+      className: classnames(styles.img, classNameOverride),
+      style: style
     }));
   };
   Brand.displayName = "Brand";

package/dist/esm/Notification/InlineNotification/InlineNotification.mjs

@@ -1,5 +1,5 @@
 import { __rest, __assign } from 'tslib';
-import React from 'react';
+import React, { forwardRef } from 'react';
 import classnames from 'classnames';
 import { GenericNotification } from '../subcomponents/GenericNotification/GenericNotification.mjs';
 import styles from '../subcomponents/GenericNotification/GenericNotification.module.scss.mjs';
@@ -9,7 +9,7 @@ import styles from '../subcomponents/GenericNotification/GenericNotification.mod
  * {@link https://cultureamp.design/storybook/?path=/docs/components-notifications-inline-notification--docs Storybook}
  */
 const InlineNotification = /*#__PURE__*/function () {
-  const InlineNotification = function (_a) {
+  const InlineNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
     var isSubtle = _a.isSubtle,
       _b = _a.hideCloseIcon,
       hideCloseIcon = _b === void 0 ? false : _b,
@@ -20,9 +20,10 @@ const InlineNotification = /*#__PURE__*/function () {
     return /*#__PURE__*/React.createElement(GenericNotification, __assign({
       style: "inline",
       persistent: persistent || hideCloseIcon,
-      classNameOverride: classnames(classNameOverride, [isSubtle && styles.subtle])
+      classNameOverride: classnames(classNameOverride, [isSubtle && styles.subtle]),
+      ref: ref
     }, otherProps));
-  };
+  });
   InlineNotification.displayName = "InlineNotification";
   return InlineNotification;
 }();

package/dist/esm/Notification/ToastNotification/context/ToastNotificationContext.mjs

@@ -38,13 +38,12 @@ const ToastNotificationProvider = /*#__PURE__*/function () {
       setNotifications(copy);
     };
     var removeToastNotification = function (notificationID) {
-      var notificationIndex = notifications.findIndex(function (_a) {
-        var id = _a.id;
-        return id === notificationID;
+      setNotifications(function (prev) {
+        return prev.filter(function (_a) {
+          var id = _a.id;
+          return id !== notificationID;
+        });
       });
-      var copy = notifications.slice();
-      copy.splice(notificationIndex, 1); // Mutation
-      setNotifications(copy);
     };
     var clearToastNotifications = function () {
       setNotifications([]);

package/dist/esm/Notification/subcomponents/GenericNotification/GenericNotification.mjs

@@ -1,12 +1,13 @@
 import { __rest, __assign } from 'tslib';
-import React, { useState, useRef, useEffect } from 'react';
+import React, { forwardRef, useState, useRef, useEffect } from 'react';
 import classnames from 'classnames';
+import { isRefObject } from '../../../utils/isRefObject.mjs';
 import { CancelButton } from '../CancelButton/CancelButton.mjs';
 import { NotificationHeading } from '../NotificationHeading/NotificationHeading.mjs';
 import { NotificationIconType, NotificationIconVariant } from '../NotificationIcon/NotificationIcon.mjs';
 import styles from './GenericNotification.module.scss.mjs';
 const GenericNotification = /*#__PURE__*/function () {
-  const GenericNotification = function (_a) {
+  const GenericNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
     var type = _a.type,
       variant = _a.variant,
       style = _a.style,
@@ -26,7 +27,8 @@ const GenericNotification = /*#__PURE__*/function () {
     var _d = useState(false),
       isRemoved = _d[0],
       setIsRemoved = _d[1];
-    var containerRef = useRef(null);
+    var fallbackRef = useRef(null);
+    var containerRef = isRefObject(ref) ? ref : fallbackRef;
     useEffect(function () {
       requestAnimationFrame(function () {
         if (containerRef.current) {
@@ -75,7 +77,7 @@ const GenericNotification = /*#__PURE__*/function () {
         return setIsHidden(true);
       }
     }));
-  };
+  });
   GenericNotification.displayName = "GenericNotification";
   return GenericNotification;
 }();

package/dist/esm/Tile/MultiActionTile/MultiActionTile.mjs

@@ -1,19 +1,16 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import { GenericTile } from '../subcomponents/GenericTile/GenericTile.mjs';
-import Action from '../subcomponents/GenericTile/Action.mjs';
 import styles from './MultiActionTile.module.scss.mjs';
+import { Button } from '../../__actions__/Button/v1/Button/Button.mjs';
 var renderActions = function (primaryAction, secondaryAction) {
   return /*#__PURE__*/React.createElement("div", {
     className: styles.actions
   }, secondaryAction && ( /*#__PURE__*/React.createElement("div", {
     className: styles.secondaryAction
-  }, /*#__PURE__*/React.createElement(Action, {
-    action: secondaryAction,
+  }, /*#__PURE__*/React.createElement(Button, __assign({
     secondary: true
-  }))), /*#__PURE__*/React.createElement(Action, {
-    action: primaryAction
-  }));
+  }, secondaryAction)))), /*#__PURE__*/React.createElement(Button, __assign({}, primaryAction)));
 };
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#MultiActionTile.1 Guidance} |

package/dist/esm/Tile/subcomponents/GenericTile/GenericTile.mjs

@@ -6,9 +6,9 @@ import '../../../Icon/subcomponents/SVG/SVG.mjs';
 import { ArrowBackwardIcon } from '../../../Icon/ArrowBackwardIcon.mjs';
 import { InformationIcon } from '../../../Icon/InformationIcon.mjs';
 import { Text } from '../../../Text/Text.mjs';
-import Action from './Action.mjs';
 import styles from './GenericTile.module.scss.mjs';
 import { IconButton } from '../../../__actions__/Button/v1/IconButton/IconButton.mjs';
+import { Button } from '../../../__actions__/Button/v1/Button/Button.mjs';
 const GenericTile = /*#__PURE__*/function () {
   const GenericTile = function (_a) {
     var children = _a.children,
@@ -39,18 +39,6 @@ const GenericTile = /*#__PURE__*/function () {
         color: "dark-reduced-opacity"
       }, metadata))));
     };
-    var renderActions = function (primaryAction, secondaryAction, disabled) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.actions
-      }, secondaryAction && ( /*#__PURE__*/React.createElement(Action, {
-        action: secondaryAction,
-        secondary: true,
-        disabled: disabled
-      })), primaryAction && /*#__PURE__*/React.createElement(Action, {
-        action: primaryAction,
-        disabled: disabled
-      }));
-    };
     var renderFront = function () {
       return /*#__PURE__*/React.createElement("div", {
         className: classnames(styles.face, styles.faceFront, mood ? styles[mood] : styles[variant])
@@ -78,7 +66,14 @@ const GenericTile = /*#__PURE__*/function () {
           variant: "body"
         }, informationProp.text), (informationProp.primaryAction || informationProp.secondaryAction) && ( /*#__PURE__*/React.createElement("div", {
           className: styles.footer
-        }, renderActions(informationProp.primaryAction, informationProp.secondaryAction, !isFlipped))));
+        }, /*#__PURE__*/React.createElement("div", {
+          className: styles.actions
+        }, informationProp.secondaryAction && ( /*#__PURE__*/React.createElement(Button, __assign({
+          secondary: true,
+          disabled: !isFlipped
+        }, informationProp.secondaryAction))), informationProp.primaryAction && ( /*#__PURE__*/React.createElement(Button, __assign({
+          disabled: !isFlipped
+        }, informationProp.primaryAction)))))));
       }
       return informationProp;
     };

package/dist/esm/__future__/Select/subcomponents/Option/Option.mjs

@@ -1,9 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
-import { useFocusRing } from '@react-aria/focus';
-import { useOption } from '@react-aria/listbox';
-import { mergeProps } from '@react-aria/utils';
 import classnames from 'classnames';
+import { useOption, useFocusRing, mergeProps } from 'react-aria';
 import '../../../../Icon/subcomponents/SVG/SVG.mjs';
 import { CheckIcon } from '../../../../Icon/CheckIcon.mjs';
 import { useSelectContext } from '../../context/SelectContext.mjs';
@@ -21,10 +19,24 @@ const Option = /*#__PURE__*/function () {
       optionProps = _b.optionProps,
       isSelected = _b.isSelected,
       isDisabled = _b.isDisabled;
+    var onPointerUp = optionProps.onPointerUp,
+      restOptionProps = __rest(optionProps, ["onPointerUp"]);
     var _c = useFocusRing(),
       isFocusVisible = _c.isFocusVisible,
       focusProps = _c.focusProps;
-    return /*#__PURE__*/React.createElement("li", __assign({}, mergeProps(optionProps, focusProps, props), {
+    return /*#__PURE__*/React.createElement("li", __assign({}, mergeProps(restOptionProps, focusProps, props, {
+      onPointerUp: function (e) {
+        if (e.pointerType === "touch") {
+          // On touch devices, the listbox closes too quickly so below elements will trigger their pointer events.
+          // Slow it down a bit to prevent the appearance of propagation.
+          setTimeout(function () {
+            return state.setSelectedKey(item.key);
+          }, 250);
+        } else {
+          onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(e);
+        }
+      }
+    }), {
       ref: ref,
       className: classnames(styles.option, isSelected && styles.isSelected, isFocusVisible && styles.isFocusVisible, isDisabled && styles.disabled, classNameOverride),
       "aria-label": item.textValue

package/dist/esm/utils/useMediaQueries.mjs

@@ -70,7 +70,7 @@ var useMediaQueries = function (propQueries) {
     kaizenMatches = _a[0],
     setKaizenMatches = _a[1];
   // ---------------------------------------
-  // Create an event listener based on the medium breakpoint and update state whenever it changes
+  // Create an event listener based on the small and large breakpoints and update state whenever one of those changes
   // ---------------------------------------
   useEffect(function () {
     if (isLegacyEdge || isUnsupportedSafari) {
@@ -88,9 +88,11 @@ var useMediaQueries = function (propQueries) {
         isMediumOrLarger: !isSmallAfterUpdate
       });
     };
-    mediumMatchMedia.addEventListener("change", updateMatches, true);
+    smallMatchMedia.addEventListener("change", updateMatches, true);
+    largeMatchMedia.addEventListener("change", updateMatches, true);
     return function () {
-      mediumMatchMedia.removeEventListener("change", updateMatches);
+      smallMatchMedia.removeEventListener("change", updateMatches);
+      largeMatchMedia.removeEventListener("change", updateMatches);
     };
   }, []);
   // ---------------------------------------