@carbon/react 1.67.1 → 1.68.0-rc.0

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

@@ -0,0 +1,56 @@
+/**
+ * Copyright IBM Corp. 2015, 2023
+ *
+ * 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, { ReactNode } from 'react';
+interface FeatureFlagsProps {
+    children?: ReactNode;
+    flags?: Record<string, boolean>;
+    enableV12TileDefaultIcons?: boolean;
+    enableV12TileRadioIcons?: boolean;
+    enableV12Overflowmenu?: boolean;
+    enableTreeviewControllable?: boolean;
+    enableExperimentalFocusWrapWithoutSentinels?: boolean;
+}
+/**
+ * Our FeatureFlagContext is used alongside the FeatureFlags component to enable
+ * or disable feature flags in a given React tree
+ */
+declare const FeatureFlagContext: React.Context<any>;
+/**
+ * Supports an object of feature flag values with the `flags` prop, merging them
+ * along with the current `FeatureFlagContext` to provide consumers to check if
+ * a feature flag is enabled or disabled in a given React tree
+ */
+declare function FeatureFlags({ children, flags, enableV12TileDefaultIcons, enableV12TileRadioIcons, enableV12Overflowmenu, enableTreeviewControllable, enableExperimentalFocusWrapWithoutSentinels, }: FeatureFlagsProps): JSX.Element;
+declare namespace FeatureFlags {
+    var propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide the feature flags to enabled or disabled in the current Rea,ct tree
+         */
+        flags: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        enableV12TileDefaultIcons: PropTypes.Requireable<boolean>;
+        enableV12TileRadioIcons: PropTypes.Requireable<boolean>;
+        enableV12Overflowmenu: PropTypes.Requireable<boolean>;
+        enableTreeviewControllable: PropTypes.Requireable<boolean>;
+        enableExperimentalFocusWrapWithoutSentinels: PropTypes.Requireable<boolean>;
+    };
+}
+/**
+ * Access whether a given flag is enabled or disabled in a given
+ * FeatureFlagContext
+ *
+ * @returns {boolean}
+ */
+declare function useFeatureFlag(flag: any): any;
+/**
+ * Access all feature flag information for the given FeatureFlagContext
+ *
+ * @returns {FeatureFlagScope}
+ */
+declare function useFeatureFlags(): any;
+export { FeatureFlags, FeatureFlagContext, useFeatureFlags, useFeatureFlag };

package/lib/components/FluidMultiSelect/FluidFilterableMultiSelect.d.ts

@@ -0,0 +1,144 @@
+/**
+ * Copyright IBM Corp. 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, { FunctionComponent } from 'react';
+import { UseComboboxProps, UseMultipleSelectionProps } from 'downshift';
+import { FilterableMultiSelectProps } from '../MultiSelect/FilterableMultiSelect';
+interface OnChangeData<ItemType> {
+    selectedItems: ItemType[] | null;
+}
+export interface FluidFilterableMultiSelectProps<ItemType> extends FilterableMultiSelectProps<ItemType> {
+    /**
+     * Specify an optional className to be applied to the outer FluidForm wrapper
+     */
+    className?: string;
+    /**
+     * Specify the text that should be read for screen readers that describes total items selected
+     */
+    clearSelectionDescription?: string;
+    /**
+     * Specify the text that should be read for screen readers to clear selection.
+     */
+    clearSelectionText?: string;
+    /**
+     * Specify the direction of the multiselect dropdown. Can be either top or bottom.
+     */
+    direction?: 'top' | 'bottom';
+    /**
+     * Specify whether the `<input>` should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Additional props passed to Downshift.
+     *
+     * **Use with caution:** anything you define here overrides the components'
+     * internal handling of that prop. Downshift APIs and internals are subject to
+     * change, and in some cases they can not be shimmed by Carbon to shield you
+     * from potentially breaking changes.
+     */
+    downshiftProps?: Partial<UseMultipleSelectionProps<ItemType>>;
+    /**
+     * Specify a custom `id` for the `<input>`
+     */
+    id: string;
+    /**
+     * Allow users to pass in arbitrary items from their collection that are
+     * pre-selected
+     */
+    initialSelectedItems?: ItemType[];
+    /**
+     * Specify if the currently selected value is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in an invalid state
+     */
+    invalidText?: React.ReactNode;
+    /**
+     * Specify if the `FluidMultiSelect` should render its menu items in condensed mode
+     */
+    isCondensed?: boolean;
+    /**
+     * Function to render items as custom components instead of strings.
+     * Defaults to null and is overridden by a getter
+     */
+    itemToElement?: FunctionComponent<ItemType>;
+    /**
+     * Helper function passed to downshift that allows the library to render a
+     * given item to a string label. By default, it extracts the `label` field
+     * from a given item to serve as the item label in the list. Consider
+     * declaring function with `useCallback` to prevent unnecessary re-renders.
+     */
+    itemToString?(item: ItemType): string;
+    /**
+     * We try to stay as generic as possible here to allow individuals to pass
+     * in a collection of whatever kind of data structure they prefer
+     */
+    items: ItemType[];
+    /**
+     * Generic `label` that will be used as the textual representation of what
+     * this field is for
+     */
+    label: NonNullable<React.ReactNode>;
+    /**
+     * Specify the locale of the control. Used for the default `compareItems`
+     * used for sorting the list of items in the control.
+     */
+    locale?: string;
+    /**
+     * `onChange` is a utility for this controlled component to communicate to a
+     * consuming component what kind of internal state changes are occurring.
+     */
+    onChange?(data: OnChangeData<ItemType>): void;
+    /**
+     * **Filterable variant only** - `onInputValueChange` is a utility for this controlled component to communicate to
+     * the currently typed input.
+     */
+    onInputValueChange?: UseComboboxProps<ItemType>['onInputValueChange'];
+    /**
+     * `onMenuChange` is a utility for this controlled component to communicate to a
+     * consuming component that the menu was open(`true`)/closed(`false`).
+     */
+    onMenuChange?(open: boolean): void;
+    /**
+     * Whether or not the Multiselect is readonly
+     */
+    readOnly?: boolean;
+    /**
+     * For full control of the selected items
+     */
+    selectedItems?: ItemType[];
+    /**
+     * Specify feedback (mode) of the selection.
+     * `top`: selected item jumps to top
+     * `fixed`: selected item stays at it's position
+     * `top-after-reopen`: selected item jump to top after reopen dropdown
+     */
+    selectionFeedback?: 'top' | 'fixed' | 'top-after-reopen';
+    /**
+     * Provide the title text that will be read by a screen reader when
+     * visiting this control
+     */
+    titleText?: React.ReactNode;
+    /**
+     * Callback function for translating ListBoxMenuIcon SVG title
+     */
+    translateWithId?: (id: string) => string;
+    /**
+     * Specify title to show title on hover
+     */
+    useTitleInItem?: boolean;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: React.ReactNode;
+}
+declare const FluidMultiSelect: React.ForwardRefExoticComponent<Omit<FluidFilterableMultiSelectProps<unknown>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default FluidMultiSelect;

package/lib/components/FluidMultiSelect/FluidMultiSelect.Skeleton.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 from 'react';
+export interface FluidMultiSelectSkeletonProps {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+}
+declare const FluidMultiSelectSkeleton: React.FC<FluidMultiSelectSkeletonProps>;
+export default FluidMultiSelectSkeleton;

package/lib/components/FluidMultiSelect/FluidMultiSelect.Skeleton.js

@@ -44,6 +44,5 @@ FluidMultiSelectSkeleton.propTypes = {
    */
   className: PropTypes__default["default"].string
 };
-var FluidMultiSelectSkeleton$1 = FluidMultiSelectSkeleton;
 
-exports["default"] = FluidMultiSelectSkeleton$1;
+exports["default"] = FluidMultiSelectSkeleton;

package/lib/components/FluidMultiSelect/FluidMultiSelect.d.ts

@@ -0,0 +1,149 @@
+/**
+ * Copyright IBM Corp. 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 from 'react';
+import { UseSelectProps } from 'downshift';
+import { MultiSelectProps } from '../MultiSelect/MultiSelect';
+interface OnChangeData<ItemType> {
+    selectedItems: ItemType[] | null;
+}
+export interface FluidMultiSelectProps<ItemType> extends MultiSelectProps<ItemType> {
+    /**
+     * Specify an optional className to be applied to the outer FluidForm wrapper
+     */
+    className?: string;
+    /**
+     * Specify the text that should be read for screen readers that describes total items selected
+     */
+    clearSelectionDescription?: string;
+    /**
+     * Specify the text that should be read for screen readers to clear selection.
+     */
+    clearSelectionText?: string;
+    /**
+     * Specify the direction of the multiselect dropdown. Can be either top or bottom.
+     */
+    direction?: 'top' | 'bottom';
+    /**
+     * Specify whether the `<input>` should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Additional props passed to Downshift.
+     *
+     * **Use with caution:** anything you define here overrides the components'
+     * internal handling of that prop. Downshift APIs and internals are subject to
+     * change, and in some cases they can not be shimmed by Carbon to shield you
+     * from potentially breaking changes.
+     */
+    downshiftProps?: Partial<UseSelectProps<ItemType>>;
+    /**
+     * Specify a custom `id` for the `<input>`
+     */
+    id: string;
+    /**
+     * Allow users to pass in arbitrary items from their collection that are
+     * pre-selected
+     */
+    initialSelectedItems?: ItemType[];
+    /**
+     * Specify if the currently selected value is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in an invalid state
+     */
+    invalidText?: React.ReactNode;
+    /**
+     * Specify if the `FluidMultiSelect` should render its menu items in condensed mode
+     */
+    isCondensed?: boolean;
+    /**
+     * Specify if the `FluidMultiSelect` should render the `filterable` variant of `FluidMultiSelect`
+     * @deprecated This prop is deprecated in favor of new component called FluidFilterableMultiSelect and will be removed in the next major release
+     */
+    isFilterable?: boolean;
+    /**
+     * Function to render items as custom components instead of strings.
+     * Defaults to null and is overridden by a getter
+     */
+    itemToElement?: React.JSXElementConstructor<ItemType>;
+    /**
+     * Helper function passed to downshift that allows the library to render a
+     * given item to a string label. By default, it extracts the `label` field
+     * from a given item to serve as the item label in the list. Consider
+     * declaring function with `useCallback` to prevent unnecessary re-renders.
+     */
+    itemToString?(item: ItemType): string;
+    /**
+     * We try to stay as generic as possible here to allow individuals to pass
+     * in a collection of whatever kind of data structure they prefer
+     */
+    items: ItemType[];
+    /**
+     * Generic `label` that will be used as the textual representation of what
+     * this field is for
+     */
+    label: NonNullable<React.ReactNode>;
+    /**
+     * Specify the locale of the control. Used for the default `compareItems`
+     * used for sorting the list of items in the control.
+     */
+    locale?: string;
+    /**
+     * `onChange` is a utility for this controlled component to communicate to a
+     * consuming component what kind of internal state changes are occurring.
+     */
+    onChange?(data: OnChangeData<ItemType>): void;
+    /**
+     * **Filterable variant only** - `onInputValueChange` is a utility for this controlled component to communicate to
+     * the currently typed input.
+     */
+    onInputValueChange?: (inputValue: string) => void;
+    /**
+     * `onMenuChange` is a utility for this controlled component to communicate to a
+     * consuming component that the menu was open(`true`)/closed(`false`).
+     */
+    onMenuChange?(open: boolean): void;
+    /**
+     * Whether or not the Multiselect is readonly
+     */
+    readOnly?: boolean;
+    /**
+     * For full control of the selected items
+     */
+    selectedItems?: ItemType[];
+    /**
+     * Specify feedback (mode) of the selection.
+     * `top`: selected item jumps to top
+     * `fixed`: selected item stays at it's position
+     * `top-after-reopen`: selected item jump to top after reopen dropdown
+     */
+    selectionFeedback?: 'top' | 'fixed' | 'top-after-reopen';
+    /**
+     * Provide the title text that will be read by a screen reader when
+     * visiting this control
+     */
+    titleText?: React.ReactNode;
+    /**
+     * Callback function for translating ListBoxMenuIcon SVG title
+     */
+    translateWithId?: (id: string) => string;
+    /**
+     * Specify title to show title on hover
+     */
+    useTitleInItem?: boolean;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: React.ReactNode;
+}
+declare const FluidMultiSelect: React.ForwardRefExoticComponent<FluidMultiSelectProps<unknown> & React.RefAttributes<HTMLButtonElement>>;
+export default FluidMultiSelect;

package/lib/components/FluidMultiSelect/FluidMultiSelect.js

@@ -40,7 +40,10 @@ const FluidMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(funct
     value: {
       isFluid: true
     }
-  }, isFilterable ? /*#__PURE__*/React__default["default"].createElement(FilterableMultiSelect["default"], _rollupPluginBabelHelpers["extends"]({
+  }, isFilterable ?
+  /*#__PURE__*/
+  // @ts-ignore
+  React__default["default"].createElement(FilterableMultiSelect["default"], _rollupPluginBabelHelpers["extends"]({
     ref: ref,
     className: classNames
   }, other)) : /*#__PURE__*/React__default["default"].createElement(MultiSelect["default"], _rollupPluginBabelHelpers["extends"]({
@@ -209,6 +212,5 @@ FluidMultiSelect.propTypes = {
    */
   warnText: PropTypes__default["default"].node
 };
-var FluidMultiSelect$1 = FluidMultiSelect;
 
-exports["default"] = FluidMultiSelect$1;
+exports["default"] = FluidMultiSelect;

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

@@ -0,0 +1,13 @@
+/**
+ * Copyright IBM Corp. 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 FluidMultiSelect from './FluidMultiSelect';
+import type { FluidMultiSelectProps } from './FluidMultiSelect';
+import type { FluidMultiSelectSkeletonProps } from './FluidMultiSelect.Skeleton';
+export type { FluidMultiSelectProps, FluidMultiSelectSkeletonProps };
+export default FluidMultiSelect;
+export { FluidMultiSelect };
+export { default as FluidMultiSelectSkeleton } from './FluidMultiSelect.Skeleton';

package/lib/components/FluidNumberInput/index.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 { FluidNumberInputProps } from './FluidNumberInput';
-import { FluidNumberInputSkeletonProps } from './FluidNumberInput.Skeleton';
+import type { FluidNumberInputProps } from './FluidNumberInput';
+import type { FluidNumberInputSkeletonProps } from './FluidNumberInput.Skeleton';
 export { type FluidNumberInputProps, type FluidNumberInputSkeletonProps };
 export { default, default as FluidNumberInput } from './FluidNumberInput';
 export { default as FluidNumberInputSkeleton } from './FluidNumberInput.Skeleton';

package/lib/components/FluidSearch/index.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 { FluidSearchProps } from './FluidSearch';
-import { FluidSearchSkeletonProps } from './FluidSearch.Skeleton';
+import type { FluidSearchProps } from './FluidSearch';
+import type { FluidSearchSkeletonProps } from './FluidSearch.Skeleton';
 export { default, default as FluidSearch } from './FluidSearch';
 export { type FluidSearchProps, type FluidSearchSkeletonProps };
 export { default as FluidSearchSkeleton } from './FluidSearch.Skeleton';

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

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import FluidSelect from './FluidSelect';
-import FluidSelectSkeletonProps from './FluidSelect.Skeleton';
-import FluidSelectProps from './FluidSelect.Skeleton';
+import type FluidSelectSkeletonProps from './FluidSelect.Skeleton';
+import type FluidSelectProps from './FluidSelect.Skeleton';
 export type { FluidSelectSkeletonProps, FluidSelectProps };
 export default FluidSelect;
 export { FluidSelect };

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

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import FluidTimePicker from './FluidTimePicker';
-import { FluidTimePickerProps } from './FluidTimePicker';
-import { FluidTimePickerSkeletonProps } from './FluidTimePicker.Skeleton';
+import { type FluidTimePickerProps } from './FluidTimePicker';
+import { type FluidTimePickerSkeletonProps } from './FluidTimePicker.Skeleton';
 export { default as FluidTimePickerSkeleton } from './FluidTimePicker.Skeleton';
 export type { FluidTimePickerProps, FluidTimePickerSkeletonProps };
 export default FluidTimePicker;

package/lib/components/Modal/Modal.js

@@ -275,7 +275,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     id: modalLabelId,
     className: `${prefix}--modal-header__label`
   }, modalLabel), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
-    as: "h3",
+    as: "h2",
     id: modalHeadingId,
     className: `${prefix}--modal-header__heading`
   }, modalHeading), normalizedSlug, !passiveModal && modalButton), /*#__PURE__*/React__default["default"].createElement(index$1.Layer, _rollupPluginBabelHelpers["extends"]({

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { type UseComboboxProps, type UseMultipleSelectionProps } from 'downshift';
-import { ReactNode, FunctionComponent, ReactElement } from 'react';
+import React, { ReactNode, FunctionComponent, ReactElement } from 'react';
 import { type MultiSelectSortingProps } from './MultiSelectPropTypes';
 import { TranslateWithId } from '../../types/common';
 /**
@@ -16,7 +16,7 @@ import { TranslateWithId } from '../../types/common';
  * ends up just being defined as "string".)
  */
 type TranslationKey = 'close.menu' | 'open.menu' | 'clear.all' | 'clear.selection';
-export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSortingProps<ItemType>, TranslateWithId<TranslationKey> {
+export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSortingProps<ItemType>, React.RefAttributes<HTMLDivElement>, TranslateWithId<TranslationKey> {
     /**
      * Specify a label to be read by screen readers on the container node
      * @deprecated

package/lib/components/Tooltip/DefinitionTooltip.js

@@ -70,8 +70,10 @@ const DefinitionTooltip = _ref => {
     onBlur: () => {
       setOpen(false);
     },
-    onClick: () => {
-      setOpen(!isOpen);
+    onMouseDown: event => {
+      // We use onMouseDown rather than onClick to make sure this triggers
+      // before onFocus.
+      if (event.button === 0) setOpen(!isOpen);
     },
     onKeyDown: onKeyDown,
     type: "button"

package/lib/index.js

@@ -163,6 +163,8 @@ var SideNavMenuItem = require('./components/UIShell/SideNavMenuItem.js');
 var SideNavSwitcher = require('./components/UIShell/SideNavSwitcher.js');
 var UnorderedList = require('./components/UnorderedList/UnorderedList.js');
 var index = require('./components/FeatureFlags/index.js');
+var FluidMultiSelect = require('./components/FluidMultiSelect/FluidMultiSelect.js');
+var FluidMultiSelect_Skeleton = require('./components/FluidMultiSelect/FluidMultiSelect.Skeleton.js');
 var FluidSelect = require('./components/FluidSelect/FluidSelect.js');
 var FluidSelect_Skeleton = require('./components/FluidSelect/FluidSelect.Skeleton.js');
 var FluidSearch = require('./components/FluidSearch/FluidSearch.js');
@@ -209,8 +211,6 @@ var FluidDatePicker = require('./components/FluidDatePicker/FluidDatePicker.js')
 var FluidDatePickerInput = require('./components/FluidDatePickerInput/FluidDatePickerInput.js');
 var FluidDropdown = require('./components/FluidDropdown/FluidDropdown.js');
 var FluidDropdown_Skeleton = require('./components/FluidDropdown/FluidDropdown.Skeleton.js');
-var FluidMultiSelect = require('./components/FluidMultiSelect/FluidMultiSelect.js');
-var FluidMultiSelect_Skeleton = require('./components/FluidMultiSelect/FluidMultiSelect.Skeleton.js');
 var LayoutDirection = require('./components/LayoutDirection/LayoutDirection.js');
 var useLayoutDirection = require('./components/LayoutDirection/useLayoutDirection.js');
 var Text = require('./components/Text/Text.js');
@@ -431,6 +431,8 @@ exports.UnorderedList = UnorderedList["default"];
 exports.unstable_FeatureFlags = index.FeatureFlags;
 exports.unstable_useFeatureFlag = index.useFeatureFlag;
 exports.unstable_useFeatureFlags = index.useFeatureFlags;
+exports.unstable__FluidMultiSelect = FluidMultiSelect["default"];
+exports.unstable__FluidMultiSelectSkeleton = FluidMultiSelect_Skeleton["default"];
 exports.unstable__FluidSelect = FluidSelect["default"];
 exports.unstable__FluidSelectSkeleton = FluidSelect_Skeleton["default"];
 exports.unstable__FluidSearch = FluidSearch["default"];
@@ -492,8 +494,6 @@ exports.unstable__FluidDatePicker = FluidDatePicker["default"];
 exports.unstable__FluidDatePickerInput = FluidDatePickerInput["default"];
 exports.unstable__FluidDropdown = FluidDropdown["default"];
 exports.unstable__FluidDropdownSkeleton = FluidDropdown_Skeleton["default"];
-exports.unstable__FluidMultiSelect = FluidMultiSelect["default"];
-exports.unstable__FluidMultiSelectSkeleton = FluidMultiSelect_Skeleton["default"];
 exports.unstable_LayoutDirection = LayoutDirection.LayoutDirection;
 exports.unstable_useLayoutDirection = useLayoutDirection.useLayoutDirection;
 exports.unstable_Text = Text.Text;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.67.1",
+  "version": "1.68.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -48,10 +48,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.7",
-    "@carbon/feature-flags": "^0.23.1",
-    "@carbon/icons-react": "^11.50.1",
-    "@carbon/layout": "^11.27.1",
-    "@carbon/styles": "^1.66.1",
+    "@carbon/feature-flags": "^0.23.0",
+    "@carbon/icons-react": "^11.51.0-rc.0",
+    "@carbon/layout": "^11.27.0",
+    "@carbon/styles": "^1.67.0-rc.0",
     "@floating-ui/react": "^0.26.0",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -79,9 +79,9 @@
     "@babel/preset-env": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@carbon/test-utils": "^10.33.1",
-    "@carbon/themes": "^11.41.1",
-    "@figma/code-connect": "^1.0.6",
+    "@carbon/test-utils": "^10.33.0",
+    "@carbon/themes": "^11.42.0-rc.0",
+    "@figma/code-connect": "^1.1.4",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^26.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -144,5 +144,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "2df4c295d300f96fae292a00b88f07a99e9a80c7"
+  "gitHead": "99debcc48ebc5f9a5ee5848fef06af4ee6448c30"
 }