@carbon/react 1.114.0 → 1.115.0-rc.0

package/lib/components/BigNumber/BigNumberSkeleton.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * 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 { BigNumberProps } from './BigNumber';
+/**
+ * BigNumberSkeleton is used to display a skeleton version while
+ * content is loading (handled by the BigNumber prop `loading`).
+ *
+ * Note: This component is only used within BigNumber.
+ */
+export type BigNumberSkeletonProps = Pick<BigNumberProps, 'className' | 'size'> & React.HTMLAttributes<HTMLDivElement>;
+export declare const BigNumberSkeleton: React.ForwardRefExoticComponent<Pick<BigNumberProps, "className" | "size"> & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/lib/components/BigNumber/constants.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export declare enum BigNumberSize {
+    Default = "default",
+    Large = "lg",
+    XLarge = "xl"
+}
+export type BigNumberSizeValues = `${BigNumberSize}`;
+export declare enum Characters {
+    Dash = "\u2013",
+    Slash = "/"
+}
+export declare const DefaultLocale = "en-US";
+export declare const formatValue: (locale: Intl.LocalesArgument, value: number | null | undefined, fractionDigits: number, truncate: boolean) => string | null | undefined;
+export declare const getIconSize: (size: BigNumberSizeValues) => number;

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

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { BigNumber } from './BigNumber';
+export type { BigNumberProps } from './BigNumber';
+export { BigNumberSkeleton } from './BigNumberSkeleton';

package/lib/components/Card/Card.d.ts

@@ -17,7 +17,7 @@ import { CardActions } from './CardActions';
 import { CardAction } from './CardAction';
 export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>> & {
     Header: React.ForwardRefExoticComponent<import("./Card.types").CardBaseProps & React.RefAttributes<HTMLDivElement>>;
-    Body: React.ForwardRefExoticComponent<import("./Card.types").CardBaseProps & React.RefAttributes<HTMLDivElement>>;
+    Body: React.ForwardRefExoticComponent<import("./Card.types").CardBodyProps & React.RefAttributes<HTMLDivElement>>;
     Footer: React.ForwardRefExoticComponent<import("./Card.types").CardBaseProps & React.RefAttributes<HTMLDivElement>>;
     HeaderMedia: {
         ({ children, className, ...rest }: import("./CardHeaderMedia").CardHeaderMediaProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/Card/Card.js

@@ -23,6 +23,7 @@ react = require_runtime.__toESM(react);
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
 let react_jsx_runtime = require("react/jsx-runtime");
+let _carbon_icons_react = require("@carbon/icons-react");
 //#region src/components/Card/Card.tsx
 /**
 * Copyright IBM Corp. 2026
@@ -34,19 +35,23 @@ const componentName = "Card";
 /**
 * Card component - Root container for composable card
 */
-const CardComponent = (0, react.forwardRef)(({ clickable = false, onClick, onKeyDown, disabled = false, density = "productive", decorator, horizontal = false, className, children, ...rest }, ref) => {
+const CardComponent = (0, react.forwardRef)(({ as, clickable = false, onClick, onKeyDown, disabled = false, density = "productive", decorator, horizontal = false, renderFooterIcon: FooterIcon = _carbon_icons_react.ArrowRight, className, children, ...rest }, ref) => {
 	const blockClass = `${require_usePrefix.usePrefix()}--card`;
 	const hasAILabel = (0, react.useMemo)(() => (0, react.isValidElement)(decorator) && decorator.type === require_index.AILabel, [decorator]);
+	if (FooterIcon !== _carbon_icons_react.ArrowRight && !clickable) console.error("[Card] `renderFooterIcon` only has effect when `clickable` is true.");
+	if (clickable && !rest["aria-label"] && !rest["aria-labelledby"]) console.error("[Card] A clickable card must have an accessible name. Pass `aria-label` or `aria-labelledby` to the Card.");
 	const contextValue = (0, react.useMemo)(() => ({
 		clickable,
 		disabled,
 		decorator,
-		horizontal
+		horizontal,
+		onClick
 	}), [
 		clickable,
 		disabled,
 		decorator,
-		horizontal
+		horizontal,
+		onClick
 	]);
 	const handleKeyDown = (0, react.useCallback)((event) => {
 		if (clickable && !disabled && (event.key === "Enter" || event.key === " ")) {
@@ -70,17 +75,20 @@ const CardComponent = (0, react.forwardRef)(({ clickable = false, onClick, onKey
 		[`${blockClass}--has-ai-label`]: hasAILabel,
 		[`${blockClass}--horizontal`]: horizontal
 	});
+	const BaseComponent = as ?? "div";
+	const isAnchor = BaseComponent === "a";
 	const cardProps = {
 		...rest,
 		ref,
 		className: cardClasses,
-		...clickable && {
+		...disabled && { "aria-disabled": true },
+		...clickable && { ...isAnchor ? { onClick: handleClick } : {
 			role: "button",
 			tabIndex: disabled ? -1 : 0,
 			onClick: handleClick,
 			onKeyDown: handleKeyDown,
 			"aria-disabled": disabled
-		}
+		} }
 	};
 	const { mediaChildren, contentChildren, mediaIsFirst } = (0, react.useMemo)(() => {
 		if (!horizontal) return {
@@ -106,9 +114,13 @@ const CardComponent = (0, react.forwardRef)(({ clickable = false, onClick, onKey
 	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CardContext.CardContext.Provider, {
 		value: contextValue,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(BaseComponent, {
 			...cardProps,
-			children: renderedChildren
+			children: [renderedChildren, clickable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `${blockClass}__clickable-footer`,
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FooterIcon, { "aria-hidden": "true" })
+			})]
 		})
 	});
 });

package/lib/components/Card/Card.types.d.ts

@@ -4,7 +4,7 @@
  * 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 { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 /**
  * Base props shared across card components
  */
@@ -23,17 +23,29 @@ export interface CardBaseProps {
  */
 export interface CardProps extends CardBaseProps {
     /**
-     * Makes the entire card clickable
+     * The underlying element or component to render the card as.
+     * Defaults to `'div'`. Use `'a'` or a router Link component for
+     * navigation cards when combined with `clickable`.
+     * @example <Card as="a" clickable href="/dashboard">...</Card>
+     * @example <Card as={RouterLink} clickable to="/dashboard">...</Card>
+     */
+    as?: React.ElementType;
+    /**
+     * Makes the entire card clickable. When true, the card gains interactive
+     * styles (hover, focus, active) and renders a built-in footer affordance
+     * with an arrow icon. Use `onClick` for action cards or `as="a"` with
+     * `href` for navigation cards.
      */
     clickable?: boolean;
     /**
-     * Click handler for clickable cards
+     * Click handler for clickable cards. Only has effect when `clickable`
+     * is true.
      */
-    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    onClick?: (event: React.MouseEvent) => void;
     /**
-     * Keyboard event handler for clickable cards
+     * Keyboard event handler. Only has effect when `clickable` is true.
      */
-    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    onKeyDown?: (event: React.KeyboardEvent) => void;
     /**
      * Disables the card and all interactive elements
      */
@@ -52,6 +64,13 @@ export interface CardProps extends CardBaseProps {
      * header/body/footer stacked vertically on the right.
      */
     horizontal?: boolean;
+    /**
+     * Icon rendered in the built-in footer affordance of a clickable card.
+     * Only has effect when `clickable` is true. Defaults to ArrowRight.
+     * Pass any icon component from `@carbon/icons-react`.
+     * @example <Card clickable renderFooterIcon={Launch}>...</Card>
+     */
+    renderFooterIcon?: React.ElementType;
 }
 /**
  * Props for CardHeader component
@@ -60,7 +79,14 @@ export type CardHeaderProps = CardBaseProps;
 /**
  * Props for CardBody component
  */
-export type CardBodyProps = CardBaseProps;
+export interface CardBodyProps extends CardBaseProps {
+    /**
+     * When true, removes all padding so content fills the body edge-to-edge.
+     * Use when the body contains a component (e.g. a table, chart, or image)
+     * that manages its own internal spacing.
+     */
+    isFlush?: boolean;
+}
 /**
  * Props for CardFooter component
  */
@@ -85,4 +111,9 @@ export interface CardContextValue {
      * Whether the card is in horizontal layout mode
      */
     horizontal?: boolean;
+    /**
+     * Click handler forwarded from the Card root, available to child components
+     * (e.g. the built-in clickable footer affordance).
+     */
+    onClick?: (event: React.MouseEvent) => void;
 }

package/lib/components/Card/CardActions.js

@@ -76,7 +76,7 @@ const CardActions = ({ children, className, overflowMenuLabel = "More actions",
 			style: { position: "relative" },
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.OverflowMenu, {
 				size: "sm",
-				"aria-label": overflowMenuLabel,
+				label: overflowMenuLabel,
 				children: hiddenItems.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuItem.MenuItem, {
 					label: item.label || "Action",
 					onClick: () => {

package/lib/components/Card/CardBody.d.ts

@@ -5,7 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
+import { CardBodyProps } from './Card.types';
 /**
  * CardBody component - Body section of the card for free-form content
  */
-export declare const CardBody: React.ForwardRefExoticComponent<import("./Card.types").CardBaseProps & React.RefAttributes<HTMLDivElement>>;
+export declare const CardBody: React.ForwardRefExoticComponent<CardBodyProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/Card/CardBody.js

@@ -23,8 +23,9 @@ const componentName = "CardBody";
 /**
 * CardBody component - Body section of the card for free-form content
 */
-const CardBody = (0, react.forwardRef)(({ className, children, ...rest }, ref) => {
-	const bodyClasses = (0, classnames.default)(`${require_usePrefix.usePrefix()}--card__body`, className);
+const CardBody = (0, react.forwardRef)(({ className, children, isFlush = false, ...rest }, ref) => {
+	const prefix = require_usePrefix.usePrefix();
+	const bodyClasses = (0, classnames.default)(`${prefix}--card__body`, className, { [`${prefix}--card__body--flush`]: isFlush });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		...rest,
 		ref,

package/lib/components/Card/CardFooter.d.ts

@@ -6,6 +6,10 @@
  */
 import React from 'react';
 /**
- * CardFooter component - Footer section of the card
+ * CardFooter component - Footer section of the card.
+ *
+ * Not supported inside a `clickable` card. A clickable card renders its own
+ * built-in footer affordance automatically. Use the `renderFooterIcon` prop on
+ * `Card` to customize the icon.
  */
 export declare const CardFooter: React.ForwardRefExoticComponent<import("./Card.types").CardBaseProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/Card/CardFooter.js

@@ -7,6 +7,7 @@
 
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
+const require_CardContext = require("./CardContext.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let classnames = require("classnames");
@@ -21,10 +22,20 @@ let react_jsx_runtime = require("react/jsx-runtime");
 */
 const componentName = "CardFooter";
 /**
-* CardFooter component - Footer section of the card
+* CardFooter component - Footer section of the card.
+*
+* Not supported inside a `clickable` card. A clickable card renders its own
+* built-in footer affordance automatically. Use the `renderFooterIcon` prop on
+* `Card` to customize the icon.
 */
 const CardFooter = (0, react.forwardRef)(({ className, children, ...rest }, ref) => {
-	const footerClasses = (0, classnames.default)(`${require_usePrefix.usePrefix()}--card__footer`, className);
+	const prefix = require_usePrefix.usePrefix();
+	const { clickable } = require_CardContext.useCardContext();
+	if (clickable) {
+		console.error("[Card] `Card.Footer` cannot be used inside a `clickable` card. A clickable card renders its own footer affordance automatically. Use the `renderFooterIcon` prop on `Card` to customize the icon.");
+		return null;
+	}
+	const footerClasses = (0, classnames.default)(`${prefix}--card__footer`, className);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		...rest,
 		ref,

package/lib/components/Card/CardTitle.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
-export interface CardTitleProps {
+export interface CardTitleProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Provide the contents of the CardTitle.
      */

package/lib/components/DatePicker/DatePicker.d.ts

@@ -6,7 +6,7 @@
  */
 import React, { type ReactNode } from 'react';
 import flatpickr from 'flatpickr';
-import { DateLimit, DateOption } from 'flatpickr/dist/types/options';
+import type { DateLimit, DateOption } from 'flatpickr/dist/types/options';
 import { type SupportedLocale } from './DatePickerLocales';
 export type DatePickerTypes = 'simple' | 'single' | 'range';
 export interface DatePickerProps {

package/lib/components/DatePicker/plugins/rangePlugin.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { type Config } from 'flatpickr/dist/plugins/rangePlugin';
-import { Instance } from 'flatpickr/dist/types/instance';
+import type { Instance } from 'flatpickr/dist/types/instance';
 /**
  * @param config Plugin configuration.
  * @returns An extension of Flatpickr `rangePlugin` that does the following:

package/lib/components/FileUploader/FileUploaderDropContainer.js

@@ -57,13 +57,13 @@ function FileUploaderDropContainer({ accept = [], className, id, disabled, label
 			return acc.concat([curr]);
 		}, []);
 	}
-	const handleFiles = (event, files) => {
-		if (!files.length) return onAddFiles(event, { addedFiles: [] });
-		return onAddFiles(event, { addedFiles: validateFiles(multiple ? files : [files[0]]) });
+	const getAddedFiles = (files) => {
+		if (!files.length) return [];
+		return validateFiles(multiple ? files : [files[0]]);
 	};
 	const handleChange = (event) => {
 		const files = [...event.target.files ?? []];
-		return handleFiles(event, files);
+		return onAddFiles(event, { addedFiles: getAddedFiles(files) });
 	};
 	const handleDrop = (event) => {
 		const items = [...event.dataTransfer.items ?? []];
@@ -74,7 +74,13 @@ function FileUploaderDropContainer({ accept = [], className, id, disabled, label
 			if (file) acc.push(file);
 			return acc;
 		}, []) : [...event.dataTransfer.files];
-		return handleFiles(event, files);
+		const addedFiles = getAddedFiles(files);
+		if (inputRef.current) try {
+			const dataTransfer = new DataTransfer();
+			addedFiles.forEach((file) => dataTransfer.items.add(file));
+			inputRef.current.files = dataTransfer.files;
+		} catch {}
+		return onAddFiles(event, { addedFiles });
 	};
 	const handleClick = () => {
 		if (!disabled) inputRef.current?.click();

package/lib/components/FormLabel/FormLabel.d.ts

@@ -16,7 +16,7 @@ export interface FormLabelProps extends Omit<React.LabelHTMLAttributes<HTMLLabel
      */
     className?: string;
     /**
-     * Provide a unique id for the given <FormLabel>
+     * Provide a unique id for the given `FormLabel`
      */
     id?: string;
 }
@@ -32,7 +32,7 @@ declare namespace FormLabel {
          */
         className: PropTypes.Requireable<string>;
         /**
-         * Provide a unique id for the given <FormLabel>
+         * Provide a unique id for the given `FormLabel`
          */
         id: PropTypes.Requireable<string>;
     };

package/lib/components/FormLabel/FormLabel.js

@@ -42,7 +42,7 @@ FormLabel.propTypes = {
 	*/
 	className: prop_types.default.string,
 	/**
-	* Provide a unique id for the given <FormLabel>
+	* Provide a unique id for the given `FormLabel`
 	*/
 	id: prop_types.default.string
 };

package/lib/components/Tabs/Tabs.js

@@ -197,6 +197,7 @@ function TabList({ activation = "automatic", "aria-label": label, children, clas
 	const ref = (0, react.useRef)(null);
 	const previousButton = (0, react.useRef)(null);
 	const nextButton = (0, react.useRef)(null);
+	const resizeAnimationFrame = (0, react.useRef)(null);
 	const [isScrollable, setIsScrollable] = (0, react.useState)(false);
 	const [scrollLeft, setScrollLeft] = (0, react.useState)(0);
 	const hasSecondaryLabelTabs = contained && react.Children.toArray(children).some((child) => require_utils.isComponentElement(child, Tab) && typeof child.props.secondaryLabel !== "undefined");
@@ -302,9 +303,19 @@ function TabList({ activation = "automatic", "aria-label": label, children, clas
 		const element = containerRef.current;
 		if (!element) return;
 		updateOverflowState();
-		const resizeObserver = new ResizeObserver(updateOverflowState);
+		const resizeObserver = new ResizeObserver(() => {
+			if (resizeAnimationFrame.current !== null) cancelAnimationFrame(resizeAnimationFrame.current);
+			resizeAnimationFrame.current = requestAnimationFrame(() => {
+				resizeAnimationFrame.current = null;
+				updateOverflowState();
+			});
+		});
 		resizeObserver.observe(element);
 		return () => {
+			if (resizeAnimationFrame.current !== null) {
+				cancelAnimationFrame(resizeAnimationFrame.current);
+				resizeAnimationFrame.current = null;
+			}
 			resizeObserver.disconnect();
 		};
 	}, [updateOverflowState]);
@@ -865,7 +876,7 @@ const IconTab = react.default.forwardRef(({ badgeIndicator, children, className:
 			className: `${prefix}--icon-tooltip`,
 			enterDelayMs,
 			label,
-			leaveDelayMs,
+			leaveDelayMs: leaveDelayMs ?? 0,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tab, {
 				className: classNames,
 				ref,

package/lib/components/Tile/Tile.js

@@ -201,7 +201,7 @@ ClickableTile.propTypes = {
 	*/
 	renderIcon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object])
 };
-const SelectableTile = react.default.forwardRef(({ children, className, decorator, disabled, id, light, onClick = () => {}, onChange = () => {}, onKeyDown = () => {}, selected = false, tabIndex = 0, title = "title", slug, hasRoundedCorners, ...rest }, ref) => {
+const SelectableTile = react.default.forwardRef(({ children, className, decorator, disabled, id, light, onClick = () => {}, onChange = () => {}, onKeyDown = () => {}, selected = false, tabIndex = 0, title, slug, hasRoundedCorners, ...rest }, ref) => {
 	const prefix = require_usePrefix.usePrefix();
 	const clickHandler = onClick;
 	const keyDownHandler = onKeyDown;

package/lib/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -7,6 +7,7 @@
 import './feature-flags';
 import './internal/warnAboutDeprecatedReactVersion';
 export * from './components/Accordion';
+export type { BigNumberProps as preview__BigNumberProps } from './components/BigNumber';
 export * from './components/AccordionItem';
 export * from './components/AspectRatio';
 export * from './components/Breadcrumb';

package/lib/index.js

@@ -248,7 +248,7 @@ const require_AISkeletonText = require("./components/AISkeleton/AISkeletonText.j
 const require_index$21 = require("./components/Theme/index.js");
 //#region src/index.ts
 /**
-* Copyright IBM Corp. 2016, 2025
+* Copyright IBM Corp. 2016, 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.

package/lib/internal/DisplayBox.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { type ReactNode } from 'react';
+interface DisplayBoxProps {
+    children?: ReactNode;
+    className?: string;
+    msg?: ReactNode;
+}
+export declare const DisplayBox: ({ children, className, msg }: DisplayBoxProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/internal/getSupportedLocale.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Returns the provided locale if it is supported by the runtime's
+ * `Intl.NumberFormat`, otherwise falls back to the provided fallback
+ * (or `'en-US'` when no fallback is given).
+ */
+export declare function getSupportedLocale(locale: string | undefined, fallback?: string): string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.114.0",
+  "version": "1.115.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -54,13 +54,13 @@
     "sass": "^1.33.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.27.3",
-    "@carbon/feature-flags": "^1.7.0",
-    "@carbon/icons-react": "^11.86.0",
-    "@carbon/layout": "^11.57.0",
-    "@carbon/motion": "^11.50.0",
-    "@carbon/styles": "^1.113.0",
-    "@carbon/utilities": "^0.24.0",
+    "@babel/runtime": "^8.0.0",
+    "@carbon/feature-flags": "^1.8.0-rc.0",
+    "@carbon/icons-react": "^11.87.0-rc.0",
+    "@carbon/layout": "^11.58.0-rc.0",
+    "@carbon/motion": "^11.51.0-rc.0",
+    "@carbon/styles": "^1.114.0-rc.0",
+    "@carbon/utilities": "^0.25.0-rc.0",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -75,17 +75,17 @@
     "tabbable": "^6.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.27.3",
-    "@babel/plugin-proposal-export-default-from": "^7.27.1",
-    "@babel/plugin-transform-class-properties": "^7.27.1",
-    "@babel/plugin-transform-export-namespace-from": "^7.27.1",
-    "@babel/plugin-transform-react-constant-elements": "^7.27.1",
-    "@babel/preset-env": "^7.27.2",
-    "@babel/preset-react": "^7.27.1",
-    "@babel/preset-typescript": "^7.27.1",
+    "@babel/core": "^8.0.0",
+    "@babel/plugin-proposal-export-default-from": "^8.0.0",
+    "@babel/plugin-transform-class-properties": "^8.0.0",
+    "@babel/plugin-transform-export-namespace-from": "^8.0.0",
+    "@babel/plugin-transform-react-constant-elements": "^8.0.0",
+    "@babel/preset-env": "^8.0.0",
+    "@babel/preset-react": "^8.0.0",
+    "@babel/preset-typescript": "^8.0.0",
     "@carbon/test-utils": "^10.41.0",
-    "@carbon/themes": "^11.79.0",
-    "@figma/code-connect": "^1.5.2",
+    "@carbon/themes": "^11.80.0-rc.0",
+    "@figma/code-connect": "^2.0.0",
     "@rolldown/plugin-babel": "^0.2.0",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/addon-a11y": "^10.3.5",
@@ -97,7 +97,7 @@
     "@types/use-sync-external-store": "^1",
     "@vitejs/plugin-react": "^6.0.0",
     "babel-plugin-dev-expression": "^0.2.3",
-    "babel-preset-carbon": "^0.8.0",
+    "babel-preset-carbon": "^0.9.0-rc.0",
     "browserify-zlib": "^0.2.0",
     "browserslist-config-carbon": "^11.2.0",
     "enquirer": "^2.3.6",
@@ -132,5 +132,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "188d23202ec1092322dee92cf0df9d9958224ae4"
+  "gitHead": "e848b98936051ac0026fb83551c91bfe603c589c"
 }

package/scss/_border-radius.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/border-radius';

package/scss/components/OptionsTile/_index.scss

@@ -0,0 +1,5 @@
+// Copyright IBM Corp. 2025, 2026
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+
+@forward '@carbon/styles/scss/components/OptionsTile';

package/scss/components/OptionsTile/_options-tile.scss

@@ -0,0 +1,5 @@
+// Copyright IBM Corp. 2025, 2026
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+
+@forward '@carbon/styles/scss/components/OptionsTile/options-tile';

package/scss/components/big-number/_big-number.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2026
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/big-number/big-number';

package/scss/components/big-number/_index.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2026
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/big-number';

package/scss/components/coachmark/_coachmark.scss

@@ -0,0 +1,5 @@
+// Copyright IBM Corp. 2025
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+
+@forward '@carbon/styles/scss/components/coachmark/coachmark';

package/scss/components/coachmark/_index.scss

@@ -0,0 +1,5 @@
+// Copyright IBM Corp. 2025
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+
+@forward '@carbon/styles/scss/components/coachmark';

package/scss/components/edit-in-place/_edit-in-place.scss

@@ -0,0 +1,5 @@
+// Copyright IBM Corp. 2025
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+
+@forward '@carbon/styles/scss/components/EditInPlace/edit-in-place';

package/scss/components/edit-in-place/_index.scss

@@ -0,0 +1,5 @@
+// Copyright IBM Corp. 2025
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+
+@forward '@carbon/styles/scss/components/EditInPlace';