@carbon/react 1.52.0 → 1.53.0-rc.0

package/lib/components/Tag/OperationalTag.d.ts

@@ -0,0 +1,101 @@
+/**
+ * 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 PropTypes, { ReactNodeLike } from 'prop-types';
+import React, { MouseEventHandler } from 'react';
+import { PolymorphicProps } from '../../types/common';
+import { SIZES } from './Tag';
+declare const TYPES: {
+    red: string;
+    magenta: string;
+    purple: string;
+    blue: string;
+    cyan: string;
+    teal: string;
+    green: string;
+    gray: string;
+    'cool-gray': string;
+    'warm-gray': string;
+};
+export interface OperationalTagBaseProps {
+    /**
+     * Provide content to be rendered inside of a `OperationalTag`
+     */
+    children?: React.ReactNode;
+    /**
+     * Provide a custom className that is applied to the containing <span>
+     */
+    className?: string;
+    /**
+     * Specify if the `OperationalTag` is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify the id for the OperationalTag.
+     */
+    id?: string;
+    /**
+     * Optional prop to render a custom icon.
+     * Can be a React component class
+     */
+    renderIcon?: React.ElementType;
+    onClick?: MouseEventHandler;
+    /**
+     * Specify the size of the Tag. Currently supports either `sm`,
+     * `md` (default) or `lg` sizes.
+     */
+    size?: keyof typeof SIZES;
+    /**
+     * **Experimental:** Provide a `Slug` component to be rendered inside the `OperationalTag` component
+     */
+    slug?: ReactNodeLike;
+    /**
+     * Specify the type of the `Tag`
+     */
+    type?: keyof typeof TYPES;
+}
+export type OperationalTagProps<T extends React.ElementType> = PolymorphicProps<T, OperationalTagBaseProps>;
+declare const OperationalTag: {
+    <T extends React.ElementType<any>>({ children, className, disabled, id, renderIcon, slug, size, type, ...other }: OperationalTagProps<T>): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Provide content to be rendered inside of a `OperationalTag`
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide a custom className that is applied to the containing <span>
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify if the `OperationalTag` is disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Specify the id for the tag.
+         */
+        id: PropTypes.Requireable<string>;
+        /**
+         * Optional prop to render a custom icon.
+         * Can be a React component class
+         */
+        renderIcon: PropTypes.Requireable<object>;
+        /**
+         * Specify the size of the Tag. Currently supports either `sm`,
+         * `md` (default) or `lg` sizes.
+         */
+        size: PropTypes.Requireable<string>;
+        /**
+         * **Experimental:** Provide a `Slug` component to be rendered inside the `OperationalTag` component
+         */
+        slug: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify the type of the `Tag`
+         */
+        type: PropTypes.Requireable<string>;
+    };
+};
+export declare const types: string[];
+export default OperationalTag;

package/lib/components/Tag/SelectableTag.d.ts

@@ -0,0 +1,87 @@
+/**
+ * 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 PropTypes, { ReactNodeLike } from 'prop-types';
+import React from 'react';
+import { PolymorphicProps } from '../../types/common';
+import { SIZES } from './Tag';
+export interface SelectableTagBaseProps {
+    /**
+     * Provide content to be rendered inside of a `SelectableTag`
+     */
+    children?: React.ReactNode;
+    /**
+     * Provide a custom className that is applied to the containing <span>
+     */
+    className?: string;
+    /**
+     * Specify if the `SelectableTag` is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify the id for the selectabletag.
+     */
+    id?: string;
+    /**
+     * Optional prop to render a custom icon.
+     * Can be a React component class
+     */
+    renderIcon?: React.ElementType;
+    /**
+     * Specify the state of the selectable tag.
+     */
+    selected?: boolean;
+    /**
+     * Specify the size of the Tag. Currently supports either `sm`,
+     * `md` (default) or `lg` sizes.
+     */
+    size?: keyof typeof SIZES;
+    /**
+     * **Experimental:** Provide a `Slug` component to be rendered inside the `SelectableTag` component
+     */
+    slug?: ReactNodeLike;
+}
+export type SelectableTagProps<T extends React.ElementType> = PolymorphicProps<T, SelectableTagBaseProps>;
+declare const SelectableTag: {
+    <T extends React.ElementType<any>>({ children, className, disabled, id, renderIcon, selected, slug, size, ...other }: SelectableTagProps<T>): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Provide content to be rendered inside of a `SelectableTag`
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide a custom className that is applied to the containing <span>
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify if the `SelectableTag` is disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Specify the id for the tag.
+         */
+        id: PropTypes.Requireable<string>;
+        /**
+         * Optional prop to render a custom icon.
+         * Can be a React component class
+         */
+        renderIcon: PropTypes.Requireable<object>;
+        /**
+         * Specify the state of the selectable tag.
+         */
+        selected: PropTypes.Requireable<boolean>;
+        /**
+         * Specify the size of the Tag. Currently supports either `sm`,
+         * `md` (default) or `lg` sizes.
+         */
+        size: PropTypes.Requireable<string>;
+        /**
+         * **Experimental:** Provide a `Slug` component to be rendered inside the `SelectableTag` component
+         */
+        slug: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+};
+export default SelectableTag;

package/lib/components/Tag/Tag.d.ts

@@ -7,7 +7,7 @@
 import PropTypes, { ReactNodeLike } from 'prop-types';
 import React from 'react';
 import { PolymorphicProps } from '../../types/common';
-declare const TYPES: {
+export declare const TYPES: {
     red: string;
     magenta: string;
     purple: string;
@@ -21,6 +21,11 @@ declare const TYPES: {
     'high-contrast': string;
     outline: string;
 };
+export declare const SIZES: {
+    sm: string;
+    md: string;
+    lg: string;
+};
 export interface TagBaseProps {
     /**
      * Provide content to be rendered inside of a `Tag`
@@ -35,7 +40,7 @@ export interface TagBaseProps {
      */
     disabled?: boolean;
     /**
-     * Determine if `Tag` is a filter/chip
+     * @deprecated This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.
      */
     filter?: boolean;
     /**
@@ -43,7 +48,7 @@ export interface TagBaseProps {
      */
     id?: string;
     /**
-     * Click handler for filter tag close button.
+     * @deprecated This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.
      */
     onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
@@ -52,16 +57,16 @@ export interface TagBaseProps {
      */
     renderIcon?: React.ElementType;
     /**
-     * Specify the size of the Tag. Currently supports either `sm` or
-     * 'md' (default) sizes.
+     * Specify the size of the Tag. Currently supports either `sm`,
+     * `md` (default) or `lg` sizes.
      */
-    size?: 'sm' | 'md';
+    size?: keyof typeof SIZES;
     /**
      * **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` component
      */
     slug?: ReactNodeLike;
     /**
-     * Text to show on clear filters
+     * @deprecated This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.
      */
     title?: string;
     /**
@@ -93,7 +98,7 @@ declare const Tag: {
         /**
          * Determine if `Tag` is a filter/chip
          */
-        filter: PropTypes.Requireable<boolean>;
+        filter: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
         /**
          * Specify the id for the tag.
          */
@@ -101,15 +106,15 @@ declare const Tag: {
         /**
          * Click handler for filter tag close button.
          */
-        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        onClose: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
         /**
          * Optional prop to render a custom icon.
          * Can be a React component class
          */
         renderIcon: PropTypes.Requireable<object>;
         /**
-         * Specify the size of the Tag. Currently supports either `sm` or
-         * 'md' (default) sizes.
+         * Specify the size of the Tag. Currently supports either `sm`,
+         * `md` (default) or `lg` sizes.
          */
         size: PropTypes.Requireable<string>;
         /**
@@ -119,7 +124,7 @@ declare const Tag: {
         /**
          * Text to show on clear filters
          */
-        title: PropTypes.Requireable<string>;
+        title: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
         /**
          * Specify the type of the `Tag`
          */

package/lib/components/Tag/Tag.js

@@ -17,6 +17,7 @@ var iconsReact = require('@carbon/icons-react');
 var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../Text/index.js');
+var deprecate = require('../../prop-types/deprecate.js');
 var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -41,6 +42,11 @@ const TYPES = {
   'high-contrast': 'High-Contrast',
   outline: 'Outline'
 };
+const SIZES = {
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg'
+};
 const Tag = _ref => {
   let {
     children,
@@ -48,10 +54,13 @@ const Tag = _ref => {
     id,
     type,
     filter,
+    // remove filter in next major release - V12
     renderIcon: CustomIconElement,
     title = 'Clear filter',
+    // remove title in next major release - V12
     disabled,
     onClose,
+    // remove onClose in next major release - V12
     size,
     as: BaseComponent,
     slug,
@@ -59,6 +68,8 @@ const Tag = _ref => {
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const tagId = id || `tag-${getInstanceId()}`;
+  const conditions = [`${prefix}--tag--selectable`, `${prefix}--tag--filter`, `${prefix}--tag--operational`];
+  const isInteractiveTag = conditions.some(el => className?.includes(el));
   const tagClasses = cx__default["default"](`${prefix}--tag`, className, {
     [`${prefix}--tag--disabled`]: disabled,
     [`${prefix}--tag--filter`]: filter,
@@ -66,7 +77,7 @@ const Tag = _ref => {
     // TODO: V12 - Remove this class
     [`${prefix}--layout--size-${size}`]: size,
     [`${prefix}--tag--${type}`]: type,
-    [`${prefix}--tag--interactive`]: other.onClick && !filter
+    [`${prefix}--tag--interactive`]: other.onClick && !isInteractiveTag
   });
   const typeText = type !== undefined && type in Object.keys(TYPES) ? TYPES[type] : '';
   const handleClose = event => {
@@ -78,7 +89,7 @@ const Tag = _ref => {
 
   // Slug is always size `md` and `inline`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'Slug' && !isInteractiveTag) {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'sm',
       kind: 'inline'
@@ -89,7 +100,7 @@ const Tag = _ref => {
     return /*#__PURE__*/React__default["default"].createElement(ComponentTag, _rollupPluginBabelHelpers["extends"]({
       className: tagClasses,
       id: tagId
-    }, other), CustomIconElement ? /*#__PURE__*/React__default["default"].createElement("div", {
+    }, other), CustomIconElement && size !== 'sm' ? /*#__PURE__*/React__default["default"].createElement("div", {
       className: `${prefix}--tag__custom-icon`
     }, /*#__PURE__*/React__default["default"].createElement(CustomIconElement, null)) : '', /*#__PURE__*/React__default["default"].createElement(Text.Text, {
       className: `${prefix}--tag__label`,
@@ -103,16 +114,14 @@ const Tag = _ref => {
       title: title
     }, _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null))));
   }
-  const ComponentTag = BaseComponent ?? (other.onClick ? 'button' : 'div');
+  const ComponentTag = BaseComponent ?? (other.onClick || className?.includes(`${prefix}--tag--operational`) ? 'button' : 'div');
   return /*#__PURE__*/React__default["default"].createElement(ComponentTag, _rollupPluginBabelHelpers["extends"]({
-    disabled: ComponentTag === 'button' ? disabled : null,
+    disabled: disabled,
     className: tagClasses,
     id: tagId
-  }, other), CustomIconElement ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, other), CustomIconElement && size !== 'sm' ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--tag__custom-icon`
-  }, /*#__PURE__*/React__default["default"].createElement(CustomIconElement, null)) : '', /*#__PURE__*/React__default["default"].createElement(Text.Text, {
-    title: typeof children === 'string' ? children : undefined
-  }, children !== null && children !== undefined ? children : typeText), normalizedSlug);
+  }, /*#__PURE__*/React__default["default"].createElement(CustomIconElement, null)) : '', /*#__PURE__*/React__default["default"].createElement(Text.Text, null, children !== null && children !== undefined ? children : typeText), normalizedSlug);
 };
 Tag.propTypes = {
   /**
@@ -135,7 +144,7 @@ Tag.propTypes = {
   /**
    * Determine if `Tag` is a filter/chip
    */
-  filter: PropTypes__default["default"].bool,
+  filter: deprecate["default"](PropTypes__default["default"].bool, 'This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
   /**
    * Specify the id for the tag.
    */
@@ -143,17 +152,17 @@ Tag.propTypes = {
   /**
    * Click handler for filter tag close button.
    */
-  onClose: PropTypes__default["default"].func,
+  onClose: deprecate["default"](PropTypes__default["default"].func, 'This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
   /**
    * Optional prop to render a custom icon.
    * Can be a React component class
    */
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
   /**
-   * Specify the size of the Tag. Currently supports either `sm` or
-   * 'md' (default) sizes.
+   * Specify the size of the Tag. Currently supports either `sm`,
+   * `md` (default) or `lg` sizes.
    */
-  size: PropTypes__default["default"].oneOf(['sm', 'md']),
+  size: PropTypes__default["default"].oneOf(Object.keys(SIZES)),
   /**
    * **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` component
    */
@@ -161,13 +170,13 @@ Tag.propTypes = {
   /**
    * Text to show on clear filters
    */
-  title: PropTypes__default["default"].string,
+  title: deprecate["default"](PropTypes__default["default"].string, 'This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
   /**
    * Specify the type of the `Tag`
    */
   type: PropTypes__default["default"].oneOf(Object.keys(TYPES))
 };
-const types = Object.keys(TYPES);
 
+exports.SIZES = SIZES;
+exports.TYPES = TYPES;
 exports["default"] = Tag;
-exports.types = types;

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

@@ -6,6 +6,5 @@
  */
 import Tag from './Tag';
 export * from './Tag.Skeleton';
-export * from './Tag';
 export default Tag;
 export { Tag };

package/lib/components/Toggle/Toggle.js

@@ -75,6 +75,7 @@ function Toggle(_ref) {
   const switchClasses = cx__default["default"](`${prefix}--toggle__switch`, {
     [`${prefix}--toggle__switch--checked`]: checked
   });
+  const labelId = `${id}_label`;
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
@@ -98,10 +99,11 @@ function Toggle(_ref) {
       role: "switch",
       type: "button",
       "aria-checked": checked,
-      "aria-labelledby": id,
+      "aria-labelledby": ariaLabelledby ?? labelId,
       disabled: disabled,
       onClick: handleClick
     })), /*#__PURE__*/React__default["default"].createElement(LabelComponent, {
+      id: labelId,
       htmlFor: ariaLabelledby ? undefined : id,
       className: `${prefix}--toggle__label`
     }, labelText && /*#__PURE__*/React__default["default"].createElement(Text.Text, {

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

@@ -5,8 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import { type ElementType, type ReactNode } from 'react';
+import React, { type ElementType, type ReactNode } from 'react';
 import { type PopoverAlignment } from '../Popover';
+import { PolymorphicProps } from '../../types/common';
 type ToggletipLabelProps<E extends ElementType> = {
     as?: E | undefined;
     children?: ReactNode;
@@ -78,16 +79,17 @@ export declare namespace Toggletip {
         defaultOpen: PropTypes.Requireable<boolean>;
     };
 }
-interface ToggletipButtonProps {
+interface ToggletipButtonBaseProps {
     children?: ReactNode;
     className?: string | undefined;
     label?: string | undefined;
 }
+export type ToggleTipButtonProps<T extends React.ElementType> = PolymorphicProps<T, ToggletipButtonBaseProps>;
 /**
  * `ToggletipButton` controls the visibility of the Toggletip through mouse
  * clicks and keyboard interactions.
  */
-export declare function ToggletipButton({ children, className: customClassName, label, }: ToggletipButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToggletipButton<T extends React.ElementType>({ children, className: customClassName, label, as: BaseComponent, ...rest }: ToggleTipButtonProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare namespace ToggletipButton {
     var propTypes: {
         /**

package/lib/components/Toggletip/index.js

@@ -102,6 +102,9 @@ function Toggletip(_ref2) {
     },
     contentProps: {
       id
+    },
+    onClick: {
+      onClick: actions.toggle
     }
   };
   const onKeyDown = event => {
@@ -189,16 +192,24 @@ function ToggletipButton(_ref3) {
   let {
     children,
     className: customClassName,
-    label = 'Show information'
+    label = 'Show information',
+    as: BaseComponent,
+    ...rest
   } = _ref3;
   const toggletip = useToggletip();
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](`${prefix}--toggletip-button`, customClassName);
+  const ComponentToggle = BaseComponent ?? 'button';
+  if (ComponentToggle !== 'button') {
+    return /*#__PURE__*/React__default["default"].createElement(ComponentToggle, _rollupPluginBabelHelpers["extends"]({}, toggletip?.onClick, {
+      className: className
+    }, rest), children);
+  }
   return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, toggletip?.buttonProps, {
     "aria-label": label,
     type: "button",
     className: className
-  }), children);
+  }, rest), children);
 }
 ToggletipButton.propTypes = {
   /**

package/lib/components/Tooltip/DefinitionTooltip.js

@@ -59,6 +59,9 @@ const DefinitionTooltip = _ref => {
     onMouseEnter: () => {
       openOnHover ? setOpen(true) : null;
     },
+    onFocus: () => {
+      setOpen(true);
+    },
     open: isOpen
   }, /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: cx__default["default"](`${prefix}--definition-term`, triggerClassName),

package/lib/feature-flags.js

@@ -33,5 +33,6 @@ FeatureFlags__namespace.merge({
   'enable-css-custom-properties': true,
   'enable-css-grid': true,
   'enable-v11-release': true,
-  'enable-experimental-tile-contrast': false
+  'enable-experimental-tile-contrast': false,
+  'enable-v12-tile-radio-icons': false
 });

package/lib/index.js

@@ -347,7 +347,6 @@ exports.Tabs = Tabs.Tabs;
 exports.TabContent = TabContent["default"];
 exports.TabsSkeleton = Tabs_Skeleton["default"];
 exports.Tag = Tag["default"];
-exports.types = Tag.types;
 exports.TagSkeleton = Tag_Skeleton["default"];
 exports.TextArea = TextArea["default"];
 exports.TextAreaSkeleton = TextArea_Skeleton["default"];

package/lib/internal/Selection.js

@@ -49,7 +49,16 @@ function useSelection(_ref2) {
   const savedOnChange = React.useRef(onChange);
   const [uncontrolledItems, setUncontrolledItems] = React.useState(initialSelectedItems);
   const isControlled = !!controlledItems;
-  const selectedItems = isControlled ? controlledItems : uncontrolledItems;
+  const [selectedItems, setSelectedItems] = React.useState(isControlled ? controlledItems : uncontrolledItems);
+  React.useEffect(() => {
+    callOnChangeHandler({
+      isControlled,
+      isMounted: isMounted.current,
+      onChangeHandlerControlled: savedOnChange.current,
+      onChangeHandlerUncontrolled: setUncontrolledItems,
+      selectedItems: selectedItems
+    });
+  }, [isControlled, isMounted, selectedItems]);
   const onItemChange = React.useCallback(item => {
     if (disabled) {
       return;
@@ -60,27 +69,12 @@ function useSelection(_ref2) {
         selectedIndex = index;
       }
     });
-    let newSelectedItems;
     if (selectedIndex === undefined) {
-      newSelectedItems = selectedItems.concat(item);
-      callOnChangeHandler({
-        isControlled,
-        isMounted: isMounted.current,
-        onChangeHandlerControlled: savedOnChange.current,
-        onChangeHandlerUncontrolled: setUncontrolledItems,
-        selectedItems: newSelectedItems
-      });
+      setSelectedItems(selectedItems => selectedItems.concat(item));
       return;
     }
-    newSelectedItems = removeAtIndex(selectedItems, selectedIndex);
-    callOnChangeHandler({
-      isControlled,
-      isMounted: isMounted.current,
-      onChangeHandlerControlled: savedOnChange.current,
-      onChangeHandlerUncontrolled: setUncontrolledItems,
-      selectedItems: newSelectedItems
-    });
-  }, [disabled, isControlled, selectedItems]);
+    setSelectedItems(selectedItems => removeAtIndex(selectedItems, selectedIndex));
+  }, [disabled, selectedItems]);
   const clearSelection = React.useCallback(() => {
     if (disabled) {
       return;
@@ -90,7 +84,7 @@ function useSelection(_ref2) {
       isMounted: isMounted.current,
       onChangeHandlerControlled: savedOnChange.current,
       onChangeHandlerUncontrolled: setUncontrolledItems,
-      selectedItems: []
+      selectedItems: setSelectedItems([])
     });
   }, [disabled, isControlled]);
   React.useEffect(() => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.52.0",
+  "version": "1.53.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -48,14 +48,14 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.3",
-    "@carbon/feature-flags": "^0.17.0",
-    "@carbon/icons-react": "^11.37.0",
-    "@carbon/layout": "^11.20.0",
-    "@carbon/styles": "^1.52.0",
+    "@carbon/feature-flags": "^0.18.0-rc.0",
+    "@carbon/icons-react": "^11.38.0-rc.0",
+    "@carbon/layout": "^11.21.0-rc.0",
+    "@carbon/styles": "^1.53.0-rc.0",
     "@ibm/telemetry-js": "^1.2.1",
     "classnames": "2.5.1",
     "copy-to-clipboard": "^3.3.1",
-    "downshift": "8.3.1",
+    "downshift": "8.3.2",
     "flatpickr": "4.6.13",
     "invariant": "^2.2.3",
     "lodash.debounce": "^4.0.8",
@@ -79,7 +79,7 @@
     "@babel/preset-react": "^7.22.3",
     "@babel/preset-typescript": "^7.21.5",
     "@carbon/test-utils": "^10.30.0",
-    "@carbon/themes": "^11.32.0",
+    "@carbon/themes": "^11.33.0-rc.0",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -139,5 +139,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "4f119eac6b9dbcf910a64cd89fddacbc9c61ef8c"
+  "gitHead": "fd9030978919c8d2ce0c102db94aeabf88563c34"
 }