@carbon/react 1.71.1 → 1.72.0

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -81,6 +81,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     clearSelectionDescription = 'Total items selected: ',
     clearSelectionText = 'To clear selection, press Delete or Backspace',
     compareItems = sorting.defaultCompareItems,
+    decorator,
     direction = 'bottom',
     disabled = false,
     downshiftProps,
@@ -210,6 +211,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
     [`${prefix}--list-box__wrapper--fluid--focus`]: isFluid && isFocused,
     [`${prefix}--list-box__wrapper--slug`]: slug,
+    [`${prefix}--list-box__wrapper--decorator`]: decorator,
     [`${prefix}--autoalign`]: autoAlign
   });
   const helperId = !helperText ? undefined : `filterablemultiselect-helper-text-${filterableMultiSelectInstanceId}`;
@@ -424,10 +426,10 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     }
   }
 
-  // Slug is always size `mini`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+  // AILabel always size `mini`
+  let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
       size: 'mini'
     });
   }
@@ -608,7 +610,9 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
   }), /*#__PURE__*/React__default["default"].createElement(ListBoxTrigger["default"], _rollupPluginBabelHelpers["extends"]({}, buttonProps, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  }))), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, menuProps, isOpen ? sortedItems.map((item, index$1) => {
+  }))), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--list-box__inner-wrapper--decorator`
+  }, normalizedDecorator) : '', /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, menuProps, isOpen ? sortedItems.map((item, index$1) => {
     const isChecked = controlledSelectedItems.filter(selected => isEqual__default["default"](selected, item)).length > 0;
     const itemProps = getItemProps({
       item,
@@ -670,6 +674,10 @@ FilterableMultiSelect.propTypes = {
    * Specify the text that should be read for screen readers to clear selection.
    */
   clearSelectionText: PropTypes__default["default"].string,
+  /**
+   * **Experimental**: Provide a decorator component to be rendered inside the `FilterableMultiSelect` component
+   */
+  decorator: PropTypes__default["default"].node,
   /**
    * Specify the direction of the multiselect dropdown. Can be either top or bottom.
    */
@@ -769,10 +777,7 @@ FilterableMultiSelect.propTypes = {
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
   size: ListBoxPropTypes.ListBoxSize,
-  /**
-   * **Experimental**: Provide a `Slug` component to be rendered inside the `FilterableMultiSelect` component
-   */
-  slug: PropTypes__default["default"].node,
+  slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
   ...MultiSelectPropTypes.sortingPropTypes,
   /**
    * Provide text to be used in a `<label>` element that is tied to the

package/lib/components/MultiSelect/MultiSelect.d.ts

@@ -33,6 +33,10 @@ export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<Item
      * Specify the text that should be read for screen readers to clear selection.
      */
     clearSelectionText?: string;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `MultiSelect` component
+     */
+    decorator?: ReactNode;
     /**
      * Specify the direction of the multiselect dropdown. Can be either top or bottom.
      */
@@ -143,6 +147,7 @@ export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<Item
      */
     size?: ListBoxSize;
     /**
+     * @deprecated please use decorator instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `MultiSelect` component
      */
     slug?: ReactNode;

package/lib/components/MultiSelect/MultiSelect.js

@@ -74,6 +74,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
   let {
     autoAlign = false,
     className: containerClassName,
+    decorator,
     id,
     items,
     itemToElement,
@@ -273,7 +274,8 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
     [`${prefix}--list-box__wrapper--inline--invalid`]: inline && invalid,
     [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
     [`${prefix}--list-box__wrapper--fluid--focus`]: !isOpen && isFluid && isFocused,
-    [`${prefix}--list-box__wrapper--slug`]: slug
+    [`${prefix}--list-box__wrapper--slug`]: slug,
+    [`${prefix}--list-box__wrapper--decorator`]: decorator
   });
   const titleClasses = cx__default["default"](`${prefix}--label`, {
     [`${prefix}--label--disabled`]: disabled,
@@ -411,10 +413,10 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
     }
   } : {};
 
-  // Slug is always size `mini`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+  // AILabel always size `mini`
+  let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
       size: 'mini'
     });
   }
@@ -474,7 +476,9 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
   }, label), /*#__PURE__*/React__default["default"].createElement(index$1["default"].MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  })), normalizedSlug), /*#__PURE__*/React__default["default"].createElement(index$1["default"].Menu, menuProps, isOpen && sortItems(filteredItems, sortOptions).map((item, index) => {
+  })), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--list-box__inner-wrapper--decorator`
+  }, normalizedDecorator) : ''), /*#__PURE__*/React__default["default"].createElement(index$1["default"].Menu, menuProps, isOpen && sortItems(filteredItems, sortOptions).map((item, index) => {
     const isChecked = selectedItems.filter(selected => isEqual__default["default"](selected, item)).length > 0;
     const isIndeterminate = selectedItems.length !== 0 && item['isSelectAll'] && !isChecked;
     const itemProps = getItemProps({
@@ -539,6 +543,10 @@ MultiSelect.propTypes = {
    * declaring function with `useCallback` to prevent unnecessary re-renders.
    */
   compareItems: PropTypes__default["default"].func,
+  /**
+   * **Experimental**: Provide a decorator component to be rendered inside the `MultiSelect` component
+   */
+  decorator: PropTypes__default["default"].node,
   /**
    * Specify the direction of the multiselect dropdown. Can be either top or bottom.
    */
@@ -646,10 +654,7 @@ MultiSelect.propTypes = {
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
   size: ListBoxPropTypes.ListBoxSize,
-  /**
-   * **Experimental**: Provide a `Slug` component to be rendered inside the `MultiSelect` component
-   */
-  slug: PropTypes__default["default"].node,
+  slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
   /**
    * Provide a method that sorts all options in the control. Overriding this
    * prop means that you also have to handle the sort logic for selected versus

package/lib/components/OverflowMenu/OverflowMenu.d.ts

@@ -4,8 +4,8 @@
  * 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 PropTypes from 'prop-types';
 import React, { ComponentType } from 'react';
+import PropTypes from 'prop-types';
 /**
  * @param {Element} menuBody The menu body with the menu arrow.
  * @param {string} direction The floating menu direction.

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -10,28 +10,28 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var invariant = require('invariant');
-var PropTypes = require('prop-types');
+var FloatingMenu = require('../../internal/FloatingMenu.js');
 var React = require('react');
-var cx = require('classnames');
 var ClickListener = require('../../internal/ClickListener.js');
-var FloatingMenu = require('../../internal/FloatingMenu.js');
+var index = require('../IconButton/index.js');
 var iconsReact = require('@carbon/icons-react');
-var mergeRefs = require('../../tools/mergeRefs.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var PropTypes = require('prop-types');
+var cx = require('classnames');
 var deprecate = require('../../prop-types/deprecate.js');
-var index = require('../IconButton/index.js');
-var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
+var invariant = require('invariant');
+var mergeRefs = require('../../tools/mergeRefs.js');
 var noopFn = require('../../internal/noopFn.js');
+var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var invariant__default = /*#__PURE__*/_interopDefaultLegacy(invariant);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var invariant__default = /*#__PURE__*/_interopDefaultLegacy(invariant);
 
 const getInstanceId = setupGetInstanceId["default"]();
 const on = function (element) {
@@ -92,16 +92,6 @@ const getMenuOffset = (menuBody, direction, trigger, flip) => {
           top: 0
         };
       }
-    case 'left':
-    case 'right':
-      {
-        // TODO: Ensure `trigger` is there for `<OverflowMenu open>`
-        const triggerHeight = !trigger ? 0 : trigger.offsetHeight;
-        return {
-          left: 0,
-          top: (!flip ? 1 : -1) * (menuHeight / 2 - triggerHeight / 2)
-        };
-      }
   }
 };
 class OverflowMenu extends React__default["default"].Component {

package/lib/components/Pagination/Pagination.js

@@ -235,7 +235,7 @@ const Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pa
   }, pageText(page)) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Select["default"], {
     id: `${prefix}-pagination-select-${inputId}-right`,
     className: `${prefix}--select__page-number`,
-    labelText: `Page number, of ${totalPages} pages`,
+    labelText: `Page of ${totalPages} pages`,
     inline: true,
     hideLabel: true,
     onChange: handlePageInputChange,

package/lib/components/Popover/index.d.ts

@@ -6,6 +6,7 @@
  */
 import React, { type ForwardedRef, type WeakValidationMap, type ElementType } from 'react';
 import { type PolymorphicProps } from '../../types/common';
+import { type Boundary } from '@floating-ui/react';
 /**
  * Deprecated popover alignment values.
  * @deprecated Use NewPopoverAlignment instead.
@@ -22,6 +23,10 @@ interface PopoverBaseProps {
      * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
      */
     autoAlign?: boolean;
+    /**
+     * Specify a bounding element to be used for autoAlign calculations. The viewport is used by default. This prop is currently experimental and is subject to future changes.
+     */
+    autoAlignBoundary?: Boundary;
     /**
      * Specify whether a caret should be rendered
      */

package/lib/components/Popover/index.js

@@ -63,6 +63,7 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
     align: initialAlign = isTabTip ? 'bottom-start' : 'bottom',
     as: BaseComponent = 'span',
     autoAlign = false,
+    autoAlignBoundary,
     caret = isTabTip ? false : true,
     className: customClassName,
     children,
@@ -140,7 +141,8 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
     middleware: [react.offset(!isTabTip ? popoverDimensions?.current?.offset : 0), autoAlign && react.flip({
       fallbackPlacements: align.includes('bottom') ? ['bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end', 'top', 'top-start', 'top-end'] : ['top', 'top-start', 'top-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end'],
       fallbackStrategy: 'initialPlacement',
-      fallbackAxisSideDirection: 'start'
+      fallbackAxisSideDirection: 'start',
+      boundary: autoAlignBoundary
     }), react.arrow({
       element: caretRef
     }), autoAlign && floatingUi_dom.hide()],
@@ -311,6 +313,15 @@ Popover.propTypes = {
    * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
    */
   autoAlign: PropTypes__default["default"].bool,
+  /**
+   * Specify a bounding element to be used for autoAlign calculations. The viewport is used by default. This prop is currently experimental and is subject to future changes.
+   */
+  autoAlignBoundary: PropTypes__default["default"].oneOfType([PropTypes__default["default"].oneOf(['clippingAncestors']), PropTypes__default["default"].elementType, PropTypes__default["default"].arrayOf(PropTypes__default["default"].elementType), PropTypes__default["default"].exact({
+    x: PropTypes__default["default"].number.isRequired,
+    y: PropTypes__default["default"].number.isRequired,
+    width: PropTypes__default["default"].number.isRequired,
+    height: PropTypes__default["default"].number.isRequired
+  })]),
   /**
    * Specify whether a caret should be rendered
    */

package/lib/components/Select/Select.d.ts

@@ -6,7 +6,7 @@
  */
 import React, { ChangeEventHandler, ComponentPropsWithRef, ReactNode } from 'react';
 type ExcludedAttributes = 'size';
-interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, ExcludedAttributes> {
+export interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, ExcludedAttributes> {
     /**
      * Provide the contents of your Select
      */
@@ -15,6 +15,10 @@ interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, ExcludedAttr
      * Specify an optional className to be applied to the node containing the label and the select box
      */
     className?: string;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `Select` component
+     */
+    decorator?: ReactNode;
     /**
      * Optionally provide the default value of the `<select>`
      */
@@ -77,6 +81,7 @@ interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, ExcludedAttr
      */
     size?: 'sm' | 'md' | 'lg';
     /**
+     * @deprecated please use decorator instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `Dropdown` component
      */
     slug?: ReactNode;

package/lib/components/Select/Select.js

@@ -32,6 +32,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 const Select = /*#__PURE__*/React__default["default"].forwardRef(function Select(_ref, ref) {
   let {
     className,
+    decorator,
     id,
     inline = false,
     labelText = 'Select',
@@ -70,7 +71,8 @@ const Select = /*#__PURE__*/React__default["default"].forwardRef(function Select
     [`${prefix}--select--warning`]: warn,
     [`${prefix}--select--fluid--invalid`]: isFluid && invalid,
     [`${prefix}--select--fluid--focus`]: isFluid && isFocused,
-    [`${prefix}--select--slug`]: slug
+    [`${prefix}--select--slug`]: slug,
+    [`${prefix}--select--decorator`]: decorator
   });
   const labelClasses = cx__default["default"](`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel,
@@ -133,10 +135,10 @@ const Select = /*#__PURE__*/React__default["default"].forwardRef(function Select
     }
   };
 
-  // Slug is always size `mini`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+  // AILabel always size `mini`
+  let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
       size: 'mini'
     });
   }
@@ -177,7 +179,9 @@ const Select = /*#__PURE__*/React__default["default"].forwardRef(function Select
     "data-invalid": invalid || null,
     onFocus: handleFocus,
     onBlur: handleFocus
-  }, input, normalizedSlug, isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
+  }, input, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--select__inner-wrapper--decorator`
+  }, normalizedDecorator) : '', isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
     className: `${prefix}--select__divider`
   }), isFluid && error ? error : null), !inline && !isFluid && error ? error : helper));
 });
@@ -191,6 +195,10 @@ Select.propTypes = {
    * Specify an optional className to be applied to the node containing the label and the select box
    */
   className: PropTypes__default["default"].string,
+  /**
+   * **Experimental**: Provide a decorator component to be rendered inside the `Select` component
+   */
+  decorator: PropTypes__default["default"].node,
   /**
    * Optionally provide the default value of the `<select>`
    */
@@ -251,10 +259,7 @@ Select.propTypes = {
    * Specify the size of the Select Input.
    */
   size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
-  /**
-   * **Experimental**: Provide a `Slug` component to be rendered inside the `Select` component
-   */
-  slug: PropTypes__default["default"].node,
+  slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
   /**
    * Specify whether the control is currently in warning state
    */

package/lib/components/Tile/Tile.d.ts

@@ -131,7 +131,7 @@ export interface SelectableTileProps extends HTMLAttributes<HTMLDivElement> {
      * The value of the `<input>`.
      * @deprecated
      */
-    value: string | number;
+    value?: string | number;
 }
 export declare const SelectableTile: React.ForwardRefExoticComponent<SelectableTileProps & React.RefAttributes<HTMLDivElement>>;
 export interface ExpandableTileProps extends HTMLAttributes<HTMLDivElement> {

package/lib/components/UIShell/Switcher.js

@@ -48,7 +48,7 @@ const Switcher = /*#__PURE__*/React.forwardRef(function Switcher(props, forwardR
       direction
     } = _ref;
     const enabledIndices = React__default["default"].Children.toArray(children).reduce((acc, curr, i) => {
-      if (Object.keys(curr.props).length !== 0) {
+      if (/*#__PURE__*/React__default["default"].isValidElement(curr) && Object.keys(curr.props).length !== 0 && getDisplayName["default"](curr.type) === 'SwitcherItem') {
         acc.push(i);
       }
       return acc;
@@ -60,7 +60,11 @@ const Switcher = /*#__PURE__*/React.forwardRef(function Switcher(props, forwardR
           if (direction === -1) {
             return enabledIndices[enabledIndices.length - 1];
           }
-          return 0;
+          return enabledIndices[0];
+        case 0:
+          if (direction === 1) {
+            return enabledIndices[1];
+          }
         default:
           return enabledIndices[nextIndex];
       }
@@ -72,7 +76,7 @@ const Switcher = /*#__PURE__*/React.forwardRef(function Switcher(props, forwardR
   };
   const childrenWithProps = React__default["default"].Children.toArray(children).map((child, index) => {
     // only setup click handlers if onChange event is passed
-    if (/*#__PURE__*/React__default["default"].isValidElement(child) && child.type && getDisplayName["default"](child.type) === 'Switcher') {
+    if (/*#__PURE__*/React__default["default"].isValidElement(child) && child.type && getDisplayName["default"](child.type) === 'SwitcherItem') {
       return /*#__PURE__*/React__default["default"].cloneElement(child, {
         handleSwitcherItemFocus,
         index,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.71.1",
+  "version": "1.72.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -52,7 +52,7 @@
     "@carbon/feature-flags": "^0.24.0",
     "@carbon/icons-react": "^11.53.0",
     "@carbon/layout": "^11.28.0",
-    "@carbon/styles": "^1.70.0",
+    "@carbon/styles": "^1.71.0",
     "@floating-ui/react": "^0.26.0",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -81,23 +81,23 @@
     "@babel/preset-typescript": "^7.24.7",
     "@carbon/test-utils": "^10.34.0",
     "@carbon/themes": "^11.43.0",
-    "@figma/code-connect": "^1.2.1",
+    "@figma/code-connect": "^1.2.2",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^28.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-typescript": "^11.0.0",
-    "@storybook/addon-a11y": "^8.2.8",
-    "@storybook/addon-actions": "^8.2.8",
-    "@storybook/addon-docs": "^8.2.8",
-    "@storybook/addon-essentials": "^8.2.8",
+    "@storybook/addon-a11y": "^8.4.5",
+    "@storybook/addon-actions": "^8.4.5",
+    "@storybook/addon-docs": "^8.4.5",
+    "@storybook/addon-essentials": "^8.4.5",
     "@storybook/addon-links": "^8.1.10",
-    "@storybook/addon-storysource": "^8.2.8",
+    "@storybook/addon-storysource": "^8.4.5",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/blocks": "^8.2.8",
-    "@storybook/manager-api": "^8.2.8",
-    "@storybook/react": "^8.2.8",
-    "@storybook/react-webpack5": "^8.2.8",
-    "@storybook/theming": "^8.2.8",
+    "@storybook/blocks": "^8.4.5",
+    "@storybook/manager-api": "^8.4.5",
+    "@storybook/react": "^8.4.5",
+    "@storybook/react-webpack5": "^8.4.5",
+    "@storybook/theming": "^8.4.5",
     "@types/react-is": "~18.3.0",
     "autoprefixer": "^10.4.0",
     "babel-loader": "^9.0.0",
@@ -126,7 +126,7 @@
     "rollup-plugin-strip-banner": "^3.0.0",
     "sass": "^1.77.7",
     "sass-loader": "^16.0.0",
-    "storybook": "^8.2.8",
+    "storybook": "^8.4.5",
     "storybook-addon-accessibility-checker": "^3.1.61-rc.3",
     "stream-browserify": "^3.0.0",
     "style-loader": "^4.0.0",
@@ -145,5 +145,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "c0223bda5d6b6f30b20631cf5b8ea0ec45fd39b3"
+  "gitHead": "4e89908b4bbb6b1c34543cb56f551f242a27d609"
 }