@databricks/design-system 2.0.9 → 2.0.10

package/dist/tokens-groups/system-tokens.css

@@ -0,0 +1,139 @@
+/* THIS FILE IS AUTOMATICALLY GENERATED FROM Figma tokens. DO NOT EDIT.
+ * Source: design-system/src/theme/tokens/*.json
+ * Regenerate via: yarn theme-regenerate */
+
+:where(:root), :where(.du-bois-light) {
+  --db-radius-0: 0px;
+  --db-radius-full: 999px;
+  --db-radius-lg: 12px;
+  --db-radius-md: 8px;
+  --db-radius-sm: 4px;
+  --db-radius-xl: 16px;
+  --db-radius-xxl: 24px;
+  --db-space-0: 0px;
+  --db-space-lg: 24px;
+  --db-space-md: 16px;
+  --db-space-mid: 12px;
+  --db-space-sm: 8px;
+  --db-space-xs: 4px;
+  --db-color-action-danger-default-background-default: rgba(200, 45, 76, 0);
+  --db-color-action-danger-default-background-hover: rgba(200, 45, 76, 0.08);
+  --db-color-action-danger-default-background-press: rgba(200, 45, 76, 0.16);
+  --db-color-action-danger-default-border-default: #c82d4c;
+  --db-color-action-danger-default-border-hover: #9e102c;
+  --db-color-action-danger-default-border-press: #630316;
+  --db-color-action-danger-default-text-default: #c82d4c;
+  --db-color-action-danger-default-text-hover: #9e102c;
+  --db-color-action-danger-default-text-press: #630316;
+  --db-color-action-danger-primary-background-default: #c82d4c;
+  --db-color-action-danger-primary-background-hover: #9e102c;
+  --db-color-action-danger-primary-background-press: #630316;
+  --db-color-action-danger-primary-text: #ffffff;
+  --db-color-action-default-background-default: rgba(34, 114, 180, 0);
+  --db-color-action-default-background-hover: rgba(34, 114, 180, 0.08);
+  --db-color-action-default-background-press: rgba(34, 114, 180, 0.16);
+  --db-color-action-default-border-default: #cbcbcb;
+  --db-color-action-default-border-focus: #2272b4;
+  --db-color-action-default-border-hover: #2272b4;
+  --db-color-action-default-border-press: #04355d;
+  --db-color-action-default-icon-default: #525252;
+  --db-color-action-default-icon-hover: #0e538b;
+  --db-color-action-default-icon-press: #04355d;
+  --db-color-action-default-text-default: #11171c;
+  --db-color-action-default-text-hover: #0e538b;
+  --db-color-action-default-text-press: #04355d;
+  --db-color-action-disabled-background: #ebebeb;
+  --db-color-action-disabled-border: #d8d8d8;
+  --db-color-action-disabled-text: #a2a2a2;
+  --db-color-action-icon-background-default: rgba(34, 114, 180, 0);
+  --db-color-action-icon-background-hover: rgba(34, 114, 180, 0.08);
+  --db-color-action-icon-background-press: rgba(34, 114, 180, 0.16);
+  --db-color-action-icon-icon-default: #525252;
+  --db-color-action-icon-icon-hover: #0e538b;
+  --db-color-action-icon-icon-press: #04355d;
+  --db-color-action-link-default: #2272b4;
+  --db-color-action-link-hover: #0e538b;
+  --db-color-action-link-press: #04355d;
+  --db-color-action-primary-background-default: #2272b4;
+  --db-color-action-primary-background-hover: #0e538b;
+  --db-color-action-primary-background-press: #04355d;
+  --db-color-action-primary-icon: #ffffff;
+  --db-color-action-primary-text-default: #ffffff;
+  --db-color-action-primary-text-hover: #ffffff;
+  --db-color-action-primary-text-press: #ffffff;
+  --db-color-action-tertiary-background-default: rgba(34, 114, 180, 0);
+  --db-color-action-tertiary-background-hover: rgba(34, 114, 180, 0.08);
+  --db-color-action-tertiary-background-press: rgba(34, 114, 180, 0.16);
+  --db-color-action-tertiary-icon-default: #2272b4;
+  --db-color-action-tertiary-icon-hover: #0e538b;
+  --db-color-action-tertiary-icon-press: #04355d;
+  --db-color-action-tertiary-text-default: #2272b4;
+  --db-color-action-tertiary-text-hover: #0e538b;
+  --db-color-action-tertiary-text-press: #04355d;
+  --db-color-background-danger: #fff5f7;
+  --db-color-background-primary: #ffffff;
+  --db-color-background-secondary: #f7f7f7;
+  --db-color-background-success: #f3fcf6;
+  --db-color-background-warning: #fff9eb;
+  --db-color-border: #ebebeb;
+  --db-color-border-accessible: #6f6f6f;
+  --db-color-border-danger: #fbd0d8;
+  --db-color-border-warning: #f8d4a5;
+  --db-color-code-background: rgba(82, 82, 82, 0.08);
+  --db-color-composer-background: #ffffff;
+  --db-color-overlay-overlay: rgba(0, 0, 0, 0.26);
+  --db-color-progress-fill: #cbcbcb;
+  --db-color-progress-fill-primary: #4299e0;
+  --db-color-progress-track: #ebebeb;
+  --db-color-skeleton: rgba(162, 162, 162, 0.16);
+  --db-color-table-background-selected-default: rgba(82, 82, 82, 0.08);
+  --db-color-table-background-selected-hover: rgba(82, 82, 82, 0.12);
+  --db-color-table-background-unselected-default: #ffffff;
+  --db-color-table-background-unselected-hover: rgba(82, 82, 82, 0.04);
+  --db-color-tag-background-brown: rgba(171, 86, 2, 0.08);
+  --db-color-tag-background-charcoal: #424242;
+  --db-color-tag-background-coral: rgba(240, 0, 64, 0.06);
+  --db-color-tag-background-default: rgba(22, 22, 22, 0.05);
+  --db-color-tag-background-indigo: rgba(1, 68, 255, 0.06);
+  --db-color-tag-background-lemon: rgba(255, 191, 1, 0.18);
+  --db-color-tag-background-lime: rgba(2, 179, 2, 0.08);
+  --db-color-tag-background-pink: rgba(240, 1, 150, 0.06);
+  --db-color-tag-background-purple: rgba(59, 0, 255, 0.05);
+  --db-color-tag-background-teal: rgba(2, 192, 150, 0.09);
+  --db-color-tag-background-turquoise: rgba(2, 192, 213, 0.09);
+  --db-color-tag-hover: rgba(34, 114, 180, 0.08);
+  --db-color-tag-icon-brown: #815e46;
+  --db-color-tag-icon-charcoal: #a2a2a2;
+  --db-color-tag-icon-coral: #ca244e;
+  --db-color-tag-icon-default: #525252;
+  --db-color-tag-icon-hover: #525252;
+  --db-color-tag-icon-indigo: #3451b2;
+  --db-color-tag-icon-lemon: #915830;
+  --db-color-tag-icon-lime: #227534;
+  --db-color-tag-icon-pink: #c41c87;
+  --db-color-tag-icon-press: #525252;
+  --db-color-tag-icon-purple: #5746af;
+  --db-color-tag-icon-teal: #00776b;
+  --db-color-tag-icon-turquoise: #00708d;
+  --db-color-tag-inverse: #161616;
+  --db-color-tag-press: rgba(34, 114, 180, 0.16);
+  --db-color-tag-text-brown: #3e332e;
+  --db-color-tag-text-charcoal: #ebebeb;
+  --db-color-tag-text-coral: #64172b;
+  --db-color-tag-text-default: #161616;
+  --db-color-tag-text-indigo: #101d46;
+  --db-color-tag-text-lemon: #4f3422;
+  --db-color-tag-text-lime: #203c25;
+  --db-color-tag-text-pink: #651249;
+  --db-color-tag-text-purple: #2f265f;
+  --db-color-tag-text-teal: #0d3d38;
+  --db-color-tag-text-turquoise: #0d3c48;
+  --db-color-text-placeholder: #6f6f6f;
+  --db-color-text-primary: #161616;
+  --db-color-text-secondary: #6f6f6f;
+  --db-color-text-validation-danger: #c82d4c;
+  --db-color-text-validation-success: #277c43;
+  --db-color-text-validation-warning: #be501e;
+  --db-color-tooltip-background-tooltip: #161616;
+  --db-color-tooltip-text-tooltip: #ffffff;
+}

package/dist/tokens-groups/system-tokens.dark.css

@@ -0,0 +1,126 @@
+/* THIS FILE IS AUTOMATICALLY GENERATED FROM Figma tokens. DO NOT EDIT.
+ * Source: design-system/src/theme/tokens/*.json
+ * Regenerate via: yarn theme-regenerate */
+
+:where(.du-bois-dark) {
+  --db-color-action-danger-default-background-default: rgba(247, 146, 166, 0);
+  --db-color-action-danger-default-background-hover: rgba(247, 146, 166, 0.08);
+  --db-color-action-danger-default-background-press: rgba(247, 146, 166, 0.16);
+  --db-color-action-danger-default-border-default: #e65b77;
+  --db-color-action-danger-default-border-hover: #f792a6;
+  --db-color-action-danger-default-border-press: #fbd0d8;
+  --db-color-action-danger-default-text-default: #e65b77;
+  --db-color-action-danger-default-text-hover: #f792a6;
+  --db-color-action-danger-default-text-press: #fbd0d8;
+  --db-color-action-danger-primary-background-default: #e65b77;
+  --db-color-action-danger-primary-background-hover: #f792a6;
+  --db-color-action-danger-primary-background-press: #fbd0d8;
+  --db-color-action-danger-primary-text: #11171c;
+  --db-color-action-default-background-default: rgba(138, 202, 255, 0);
+  --db-color-action-default-background-hover: rgba(138, 202, 255, 0.08);
+  --db-color-action-default-background-press: rgba(138, 202, 255, 0.16);
+  --db-color-action-default-border-default: #37444f;
+  --db-color-action-default-border-focus: #8acaff;
+  --db-color-action-default-border-hover: #8acaff;
+  --db-color-action-default-border-press: #bae1fc;
+  --db-color-action-default-icon-default: #92a4b3;
+  --db-color-action-default-icon-hover: #8acaff;
+  --db-color-action-default-icon-press: #bae1fc;
+  --db-color-action-default-text-default: #e8ecf0;
+  --db-color-action-default-text-hover: #8acaff;
+  --db-color-action-default-text-press: #bae1fc;
+  --db-color-action-disabled-background: #37444f;
+  --db-color-action-disabled-border: #445461;
+  --db-color-action-disabled-text: #5f7281;
+  --db-color-action-icon-background-default: rgba(255, 255, 255, 0);
+  --db-color-action-icon-background-hover: rgba(255, 255, 255, 0.08);
+  --db-color-action-icon-background-press: rgba(255, 255, 255, 0.16);
+  --db-color-action-icon-icon-default: #92a4b3;
+  --db-color-action-icon-icon-hover: #c0cdd8;
+  --db-color-action-icon-icon-press: #d1d9e1;
+  --db-color-action-link-default: #4299e0;
+  --db-color-action-link-hover: #8acaff;
+  --db-color-action-link-press: #bae1fc;
+  --db-color-action-primary-background-default: #4299e0;
+  --db-color-action-primary-background-hover: #8acaff;
+  --db-color-action-primary-background-press: #bae1fc;
+  --db-color-action-primary-icon: #11171c;
+  --db-color-action-primary-text-default: #11171c;
+  --db-color-action-primary-text-hover: #11171c;
+  --db-color-action-primary-text-press: #11171c;
+  --db-color-action-tertiary-background-default: rgba(143, 205, 255, 0);
+  --db-color-action-tertiary-background-hover: rgba(143, 205, 255, 0.08);
+  --db-color-action-tertiary-background-press: rgba(143, 205, 255, 0.16);
+  --db-color-action-tertiary-icon-default: #4299e0;
+  --db-color-action-tertiary-icon-hover: #8acaff;
+  --db-color-action-tertiary-icon-press: #bae1fc;
+  --db-color-action-tertiary-text-default: #4299e0;
+  --db-color-action-tertiary-text-hover: #8acaff;
+  --db-color-action-tertiary-text-press: #bae1fc;
+  --db-color-background-danger: rgba(200, 45, 76, 0.16);
+  --db-color-background-primary: #11171c;
+  --db-color-background-secondary: #1f272d;
+  --db-color-background-success: rgba(39, 124, 67, 0.16);
+  --db-color-background-warning: rgba(190, 80, 30, 0.16);
+  --db-color-border: #1f272d;
+  --db-color-border-accessible: #c0cdd8;
+  --db-color-border-danger: #e65b77;
+  --db-color-border-warning: #de7921;
+  --db-color-code-background: #37444f;
+  --db-color-composer-background: #1f272d;
+  --db-color-overlay-overlay: rgba(0, 0, 0, 0.45);
+  --db-color-progress-fill: #5f7281;
+  --db-color-progress-fill-primary: #2272b4;
+  --db-color-progress-track: #37444f;
+  --db-color-skeleton: rgba(144, 164, 181, 0.16);
+  --db-color-table-background-selected-default: rgba(189, 205, 219, 0.08);
+  --db-color-table-background-selected-hover: rgba(189, 205, 219, 0.12);
+  --db-color-table-background-unselected-default: #11171c;
+  --db-color-table-background-unselected-hover: rgba(189, 205, 219, 0.04);
+  --db-color-tag-background-brown: rgba(171, 86, 2, 0.1);
+  --db-color-tag-background-charcoal: #c0cdd8;
+  --db-color-tag-background-coral: rgba(240, 0, 64, 0.1);
+  --db-color-tag-background-default: rgba(232, 236, 240, 0.08);
+  --db-color-tag-background-indigo: rgba(1, 68, 255, 0.12);
+  --db-color-tag-background-lemon: rgba(255, 191, 1, 0.18);
+  --db-color-tag-background-lime: rgba(2, 179, 2, 0.08);
+  --db-color-tag-background-pink: rgba(240, 1, 150, 0.12);
+  --db-color-tag-background-purple: rgba(59, 0, 255, 0.12);
+  --db-color-tag-background-teal: rgba(2, 192, 150, 0.12);
+  --db-color-tag-background-turquoise: rgba(2, 192, 213, 0.12);
+  --db-color-tag-hover: rgba(138, 202, 255, 0.08);
+  --db-color-tag-icon-brown: #dab594;
+  --db-color-tag-icon-charcoal: #37444f;
+  --db-color-tag-icon-coral: #ff859d;
+  --db-color-tag-icon-default: #92a4b3;
+  --db-color-tag-icon-hover: #92a4b3;
+  --db-color-tag-icon-indigo: #99a2ff;
+  --db-color-tag-icon-lemon: #ffcd4d;
+  --db-color-tag-icon-lime: #70d083;
+  --db-color-tag-icon-pink: #f986c9;
+  --db-color-tag-icon-press: #92a4b3;
+  --db-color-tag-icon-purple: #b399ff;
+  --db-color-tag-icon-teal: #0ad8b6;
+  --db-color-tag-icon-turquoise: #1fd0f3;
+  --db-color-tag-inverse: #11171c;
+  --db-color-tag-press: rgba(138, 202, 255, 0.16);
+  --db-color-tag-text-brown: #f2e1ca;
+  --db-color-tag-text-charcoal: #11171c;
+  --db-color-tag-text-coral: #fed2e1;
+  --db-color-tag-text-default: #e8ecf0;
+  --db-color-tag-text-indigo: #dddffe;
+  --db-color-tag-text-lemon: #ffe7b3;
+  --db-color-tag-text-lime: #c2f0c2;
+  --db-color-tag-text-pink: #fdd1ea;
+  --db-color-tag-text-purple: #e2ddfe;
+  --db-color-tag-text-teal: #adf0dd;
+  --db-color-tag-text-turquoise: #b6ecf7;
+  --db-color-text-placeholder: #8396a5;
+  --db-color-text-primary: #e8ecf0;
+  --db-color-text-secondary: #92a4b3;
+  --db-color-text-validation-danger: #e65b77;
+  --db-color-text-validation-success: #3ba65e;
+  --db-color-text-validation-warning: #de7921;
+  --db-color-tooltip-background-tooltip: #e8ecf0;
+  --db-color-tooltip-text-tooltip: #11171c;
+}

package/dist-types/design-system/Breadcrumb/AntDBreadcrumbInternal.d.ts

@@ -0,0 +1,5 @@
+import type React from "react";
+import type { BreadcrumbItemProps, BreadcrumbProps, BreadcrumbSeparatorProps } from "./Breadcrumb";
+export declare const AntDBreadcrumbItem: React.FC<BreadcrumbItemProps>;
+export declare const AntDBreadcrumbSeparator: React.FC<BreadcrumbSeparatorProps>;
+export declare function AntDBreadcrumbInternal({ dangerouslySetAntdProps, includeTrailingCaret, separator, useLegacyBreadcrumb: _useLegacyBreadcrumb, ...props }: BreadcrumbProps): JSX.Element;

package/dist-types/design-system/Breadcrumb/Breadcrumb.d.ts

@@ -1,8 +1,7 @@
-import { Breadcrumb as AntDBreadcrumbRaw } from "antd";
 import type React from "react";
-import type { HTMLDataAttributes, WithChildrenProps } from "../types";
+import type { HTMLDataAttributes } from "../types";
 interface BreadcrumbDangerouslySetAntdProps {
-	/** Custom separator between crumbs. Defaults to a chevron. */
+	/** Custom separator between crumbs. @deprecated Use the first-class `separator` prop instead. */
 	separator?: React.ReactNode;
 }
 export interface BreadcrumbProps extends HTMLDataAttributes {
@@ -10,14 +9,33 @@ export interface BreadcrumbProps extends HTMLDataAttributes {
 	className?: string;
 	/** Include trailing caret */
 	includeTrailingCaret?: boolean;
+	/** Custom separator rendered between crumbs. Defaults to a chevron. */
+	separator?: React.ReactNode;
 	/** Escape hatch to allow passing props directly to the underlying Ant `Breadcrumb` component. Only known-used props are allowed. */
 	dangerouslySetAntdProps?: BreadcrumbDangerouslySetAntdProps;
+	/** Use the legacy AntD breadcrumb instead of the native variant. */
+	useLegacyBreadcrumb?: boolean;
 	/** The breadcrumb items */
 	children?: React.ReactNode;
 }
-declare const AntDBreadcrumbWithChildren: React.FC<BreadcrumbProps> & {
-	Item: WithChildrenProps<typeof AntDBreadcrumbRaw.Item>;
-	Separator: WithChildrenProps<typeof AntDBreadcrumbRaw.Separator>;
+/** Props for `Breadcrumb.Item`. The native variant reads these to render each crumb. */
+export interface BreadcrumbItemProps extends HTMLDataAttributes {
+	/** When set, the crumb renders an anchor to this href (AntD `Breadcrumb.Item` parity). */
+	href?: string;
+	onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
+	className?: string;
+	/** The crumb content */
+	children?: React.ReactNode;
+}
+/** Props for `Breadcrumb.Separator`. */
+export interface BreadcrumbSeparatorProps extends HTMLDataAttributes {
+	className?: string;
+	/** The separator content. */
+	children?: React.ReactNode;
+}
+type BreadcrumbInterface = React.FC<BreadcrumbProps> & {
+	Item: React.FC<BreadcrumbItemProps>;
+	Separator: React.FC<BreadcrumbSeparatorProps>;
 };
-export declare const Breadcrumb: typeof AntDBreadcrumbWithChildren;
+export declare const Breadcrumb: BreadcrumbInterface;
 export {};

package/dist-types/design-system/Breadcrumb/NativeBreadcrumb.d.ts

@@ -0,0 +1,5 @@
+import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
+import type { BreadcrumbItemProps, BreadcrumbProps, BreadcrumbSeparatorProps } from "./Breadcrumb";
+export declare const NativeBreadcrumbItem: ForwardRefExoticComponent<PropsWithoutRef<BreadcrumbItemProps> & RefAttributes<HTMLLIElement>>;
+export declare const NativeBreadcrumbSeparator: ForwardRefExoticComponent<PropsWithoutRef<BreadcrumbSeparatorProps> & RefAttributes<HTMLLIElement>>;
+export declare const NativeBreadcrumb: ForwardRefExoticComponent<PropsWithoutRef<BreadcrumbProps> & RefAttributes<HTMLElement>>;

package/dist-types/design-system/Button/getBtnClassName.d.ts

@@ -1,5 +1,5 @@
 /**
-* Emotion selector that matches a Du Bois button by BOTH its legacy AntD-prefixed class
+* Emotion selector that matches a dbui button by BOTH its legacy AntD-prefixed class
 * (`.<clsNamePrefix>-btn…`) and the NativeButton class (`.db-btn…`). Style overrides keyed off the
 * button class must match `.db-btn` too, so they survive the migration off the AntD-prefixed
 * `Button` onto `NativeButton`.

package/dist-types/design-system/Card/Card.d.ts

@@ -23,7 +23,7 @@ export interface CardProps extends DangerousGeneralProps, HTMLDataAttributes, HT
 	*/
 	loadingDescription?: string;
 	/**
-	* Custom loading content using Dubois Skeleton components
+	* Custom loading content using dbui Skeleton components
 	*
 	* @default undefined
 	*/

package/dist-types/design-system/DatePicker/DatePicker.d.ts

@@ -1,6 +1,6 @@
 import type { ForwardedRef, ForwardRefExoticComponent, HTMLAttributes, PropsWithoutRef, ReactNode, RefAttributes } from "react";
 import type { DayPickerRangeProps, DayPickerSingleProps } from "react-day-picker";
-import type { InputProps } from "../Input/common";
+import type { InputProps } from "../Input/input-props";
 import type { HTMLDataAttributes, ValidationState } from "../types";
 /**
 * The granularity level for the DatePicker.

package/dist-types/design-system/DatePicker/LegacyDatePicker.d.ts

@@ -23,7 +23,7 @@ export type YearPickerProps = AntDMonthPickerProps & React.RefAttributes<DatePic
 export declare const DuboisDatePicker: React.VFC<DatePickerProps>;
 /**
 * `LegacyDatePicker` was added as a temporary solution pending an
-* official Du Bois replacement. Use with caution.
+* official dbui replacement. Use with caution.
 * @deprecated
 */
 export declare const LegacyDatePicker: React.VFC<DatePickerProps> & {

package/dist-types/design-system/DesignSystemProvider/DesignSystemProvider.d.ts

@@ -24,11 +24,11 @@ export interface DesignSystemThemeProviderProps {
 }
 export interface DesignSystemProviderProps {
 	/**
-	* Set this to `true` to enable CSS animations for all Du Bois components inside this provider.
+	* Set this to `true` to enable CSS animations for all dbui components inside this provider.
 	* This is purely a visual enhancement, and is not necessary for the functionality of any component.
 	*/
 	enableAnimation?: boolean;
-	/** Use this to configure the base zIndex for Du Bois. We use this to stack our internal elements
+	/** Use this to configure the base zIndex for dbui. We use this to stack our internal elements
 	* correctly, and to ensure that our internal elements are always on top of any other elements. This
 	* should be a number >= 1000.
 	*/
@@ -84,6 +84,15 @@ export declare const getAnimationCss: ((enableAnimation: boolean) => CSSObject)
 type AntDConfigProviderPropsProps = Pick<AntDConfigProviderProps, "prefixCls" | "getPopupContainer" | "virtual">;
 /** Only to be accessed by SupportsDuBoisThemes, except for special exceptions like tests and storybook. Ask in #dubois first if you need to use it. */
 export declare const DesignSystemThemeProvider: React.FC<React.PropsWithChildren<DesignSystemThemeProviderProps>>;
+declare const FONT_SIZE_SCALE: {
+	readonly fontSizeSm: "sm";
+	readonly fontSizeBase: "base";
+	readonly fontSizeMd: "md";
+	readonly fontSizeLg: "lg";
+	readonly fontSizeXl: "xl";
+};
+export type FontSizeTokenKey = keyof typeof FONT_SIZE_SCALE;
+export declare function fontSizesToStyle(fontSizes: Partial<Record<FontSizeTokenKey, number>>): DesignTokenOverrides;
 /**
 * Returns the inline style that re-declares the consumer's design-token overrides as `--db-*` custom
 * properties, or `undefined` when none are set. It merges the `semanticColors` override (emitted as

package/dist-types/design-system/DesignSystemProvider/DesignTokenScopeWithEmotionTheme.d.ts

@@ -1,7 +1,9 @@
 import { type PropsWithChildren } from "react";
+import { type DesignTokenOverrides } from "./DesignSystemProvider";
 import type { Theme } from "../../theme";
 export interface DesignTokenScopeWithEmotionThemeProps {
 	theme: Theme;
+	overrideTokens?: DesignTokenOverrides;
 }
 /**
 * Migration-only bridge: relevant only while a subtree still mixes the two theming systems. It layers
@@ -20,4 +22,4 @@ export interface DesignTokenScopeWithEmotionThemeProps {
 * wrapper exists solely to keep emotion-theme and design-token overrides consistent while a subtree
 * still mixes the two theming systems.
 */
-export declare function DesignTokenScopeWithEmotionTheme({ theme, children }: PropsWithChildren<DesignTokenScopeWithEmotionThemeProps>): JSX.Element;
+export declare function DesignTokenScopeWithEmotionTheme({ theme, overrideTokens, children }: PropsWithChildren<DesignTokenScopeWithEmotionThemeProps>): JSX.Element;

package/dist-types/design-system/DropdownMenu/HintColumn.d.ts

@@ -1,5 +1,4 @@
-import type { Interpolation } from "@emotion/react";
+import { type SerializedStyles } from "@emotion/react";
 import type { ComponentPropsWithRef, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
-import type { Theme } from "../../theme";
-export declare const metaTextStyles: (theme: Theme) => Interpolation<Theme>;
+export declare const metaTextStyles: SerializedStyles;
 export declare const HintColumn: ForwardRefExoticComponent<PropsWithoutRef<ComponentPropsWithRef<"div">> & RefAttributes<HTMLDivElement>>;

package/dist-types/design-system/Form/Form.d.ts

@@ -50,7 +50,7 @@ export type RhfFormProps<T extends FieldValues> = {
 	processFinalPropertyValues?: (data: T) => T;
 } & AnalyticsEventPropsWithStartInteraction<DesignSystemEventProviderAnalyticsEventTypes.OnSubmit> & Omit<React.ComponentProps<"form">, "onSubmit">;
 /**
-* Form is a wrapper around the Form DuBois component to better integrate with React Hook Form and to track the active
+* Form is a wrapper around the Form dbui component to better integrate with React Hook Form and to track the active
 * element before the form is submitted. This is useful for analytics purposes to know what component was last focused
 * when the form was sent for submission, along with being able to pass in the initial and final values of the form.
 *

package/dist-types/design-system/FormV2/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./RHFAdapters";
 export { FormUI } from "./FormUI";
 export type { HorizontalFormSectionProps } from "./FormUI";
+export type { LabelProps } from "../Label/Label";

package/dist-types/design-system/Grid/NativeCol.d.ts

@@ -1,7 +1,7 @@
 import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
 import type { ColProps } from "./types";
 /**
-* Native flexbox implementation of the DuBois `Col` for the
+* Native flexbox implementation of the dbui `Col` for the
 * `databricks.fe.designsystem.useNativeGrid` migration. Reproduces antd's box model exactly — inline
 * `%` flex-basis, `parseFlex`, and gutter padding taken from the enclosing `Row` via
 * {@link NativeGridContext} — so consumer `padding`/`flex`/`margin` overrides compose

package/dist-types/design-system/Grid/NativeRow.d.ts

@@ -1,13 +1,13 @@
 import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
 import type { RowProps } from "./types";
 /**
-* Native flexbox implementation of the DuBois `Row` for the
+* Native flexbox implementation of the dbui `Row` for the
 * `databricks.fe.designsystem.useNativeGrid` migration. Reproduces antd's box model exactly — a flex
 * container whose horizontal gutter is a negative Row margin with matching padding on each child
 * `Col` (via {@link NativeGridContext}), and whose vertical gutter is a flex `row-gap` on the Row.
-* Preserves the DuBois
+* Preserves the dbui
 * `gutter` default of {@link ROW_GUTTER_SIZE} (8) — antd's own default is 0, but 75% of `<Row>`
-* usages rely on the DuBois 8 default, so it must be applied here (the flag-gated `Row` no longer
+* usages rely on the dbui 8 default, so it must be applied here (the flag-gated `Row` no longer
 * injects it as a prop default).
 */
 export declare const NativeRow: ForwardRefExoticComponent<PropsWithoutRef<RowProps> & RefAttributes<HTMLDivElement>>;

package/dist-types/design-system/Grid/rowConstants.d.ts

@@ -1,6 +1,6 @@
 /**
 * Default horizontal gutter (px) for `Row`. NOTE this diverges from AntD's own default of `0`:
-* DuBois has always defaulted `Row` to `8`, and ~75% of `<Row>` usages rely on it, so both the
+* dbui has always defaulted `Row` to `8`, and ~75% of `<Row>` usages rely on it, so both the
 * AntD-backed `Row` and the native `NativeRow` must apply it. Kept in its own module so both
 * variants (and the flag-gated `Row`) share one source without an import cycle.
 */

package/dist-types/design-system/Grid/types.d.ts

@@ -12,7 +12,7 @@ export interface ColSize {
 	pull?: ColSpanType;
 }
 /**
-* DuBois `Col` props. Owns antd's 24-column `ColProps` surface rather than extending it, so the
+* dbui `Col` props. Owns antd's 24-column `ColProps` surface rather than extending it, so the
 * native-flexbox grid migration (`databricks.fe.designsystem.useNativeGrid`) isn't coupled to antd's
 * types. The shape is kept identical to antd's `ColProps` so consumers and the AntD-backed `Col`
 * wrapper are unaffected.
@@ -35,7 +35,7 @@ export interface ColProps extends React.HTMLAttributes<HTMLDivElement>, HTMLData
 /** One gutter axis: a px number, or a per-breakpoint map (antd's `Gutter`). */
 export type Gutter = number | Partial<Record<ResponsiveSize, number>>;
 /**
-* DuBois `Row` props. Owns antd's `RowProps` surface rather than extending it, so the native-flexbox
+* dbui `Row` props. Owns antd's `RowProps` surface rather than extending it, so the native-flexbox
 * grid migration (`databricks.fe.designsystem.useNativeGrid`) isn't coupled to antd's types. The
 * shape is kept identical to antd's `RowProps` so consumers and the AntD-backed `Row` wrapper are
 * unaffected.

package/dist-types/design-system/Header/Header.d.ts

@@ -8,7 +8,7 @@ export interface HeaderProps extends HTMLDataAttributes, DangerousGeneralProps {
 	titleAddOns?: React.ReactNode | React.ReactNode[];
 	/** A single `<Breadcrumb />` component */
 	breadcrumbs?: React.ReactNode;
-	/** An array of Dubois `<Button />` components */
+	/** An array of dbui `<Button />` components */
 	buttons?: React.ReactNode | React.ReactNode[];
 	/** Whether to allow the title to wrap. Defaults to true. */
 	allowTitleWrap?: boolean;

package/dist-types/design-system/Icon/LegacyAntDIcon.d.ts

@@ -15,7 +15,7 @@ type IconPropsWithoutPointerEvents = Omit<AntdIconProps, "onPointerEnterCapture"
 * the React DOM types.
 *
 * These are deliberately NOT reëxported from the design system's public API: product code should
-* use Du Bois icons from `__generated/icons`.
+* use dbui icons from `__generated/icons`.
 */
 export declare const LegacyEllipsisOutlined: ComponentType<IconPropsWithoutPointerEvents>;
 export {};

package/dist-types/design-system/Icon/__generated/icons/ChatNewTabIcon.d.ts

@@ -0,0 +1,4 @@
+import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
+import type { IconProps } from "../../Icon";
+declare const ChatNewTabIcon: ForwardRefExoticComponent<PropsWithoutRef<IconProps> & RefAttributes<HTMLSpanElement>>;
+export default ChatNewTabIcon;

package/dist-types/design-system/Icon/__generated/icons/ChatSpinnerIcon.d.ts

@@ -0,0 +1,4 @@
+import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
+import type { IconProps } from "../../Icon";
+declare const ChatSpinnerIcon: ForwardRefExoticComponent<PropsWithoutRef<IconProps> & RefAttributes<HTMLSpanElement>>;
+export default ChatSpinnerIcon;

package/dist-types/design-system/Icon/__generated/icons/index.d.ts

@@ -79,6 +79,8 @@ export { default as CertifiedFillSmallIcon } from "./CertifiedFillSmallIcon";
 export { default as CertifiedIcon } from "./CertifiedIcon";
 export { default as ChainIcon } from "./ChainIcon";
 export { default as ChartLineIcon } from "./ChartLineIcon";
+export { default as ChatNewTabIcon } from "./ChatNewTabIcon";
+export { default as ChatSpinnerIcon } from "./ChatSpinnerIcon";
 export { default as CheckCircleBadgeIcon } from "./CheckCircleBadgeIcon";
 export { default as CheckCircleFillIcon } from "./CheckCircleFillIcon";
 export { default as CheckCircleIcon } from "./CheckCircleIcon";

package/dist-types/design-system/Input/AntDInput.d.ts

@@ -0,0 +1,26 @@
+import type { CSSObject, SerializedStyles } from "@emotion/react";
+import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
+import type { InputProps } from "./input-props";
+import type { InputRef } from "./input-refs";
+import type { Theme } from "../../theme";
+import type { ButtonSize } from "../Button";
+import type { ValidationState } from "../types";
+interface InputStylesOptions {
+	useFocusWithin?: boolean;
+}
+export declare const getInputStyles: (clsPrefix: string, theme: Theme, { validationState, type, hasValue, locked, size }: {
+	validationState?: ValidationState;
+	type?: string;
+	hasValue?: boolean;
+	locked?: boolean;
+	size?: ButtonSize;
+}, { useFocusWithin }: InputStylesOptions) => CSSObject;
+export declare const getInputEmotionStyles: (clsPrefix: string, theme: Theme, { validationState, type, hasValue, locked, size }: {
+	validationState?: ValidationState;
+	type?: string;
+	hasValue?: boolean;
+	locked?: boolean;
+	size?: ButtonSize;
+}) => SerializedStyles;
+export declare const AntDInput: ForwardRefExoticComponent<PropsWithoutRef<InputProps> & RefAttributes<InputRef>>;
+export {};

package/dist-types/design-system/Input/Input.d.ts

@@ -1,26 +1,8 @@
-import type { CSSObject, SerializedStyles } from "@emotion/react";
-import { Input as AntDInput } from "antd";
 import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
-import type { InputProps } from "./common";
-import type { Theme } from "../../theme";
-import type { ButtonSize } from "../Button";
-import type { ValidationState } from "../types";
-interface InputStylesOptions {
-	useFocusWithin?: boolean;
-}
-export declare const getInputStyles: (clsPrefix: string, theme: Theme, { validationState, type, hasValue, locked, size }: {
-	validationState?: ValidationState;
-	type?: string;
-	hasValue?: boolean;
-	locked?: boolean;
-	size?: ButtonSize;
-}, { useFocusWithin }: InputStylesOptions) => CSSObject;
-export declare const getInputEmotionStyles: (clsPrefix: string, theme: Theme, { validationState, type, hasValue, locked, size }: {
-	validationState?: ValidationState;
-	type?: string;
-	hasValue?: boolean;
-	locked?: boolean;
-	size?: ButtonSize;
-}) => SerializedStyles;
-export declare const Input: ForwardRefExoticComponent<PropsWithoutRef<InputProps> & RefAttributes<AntDInput>>;
-export {};
+import type { InputProps } from "./input-props";
+import type { InputRef } from "./input-refs";
+/**
+* The Du Bois text input. Renders the native (non-AntD) or AntD-backed implementation per `forceMode`,
+* which defaults to the `databricks.fe.designsystem.useNativeInput` SAFE flag.
+*/
+export declare const Input: ForwardRefExoticComponent<PropsWithoutRef<InputProps> & RefAttributes<InputRef>>;

package/dist-types/design-system/Input/NativeInput.d.ts

@@ -0,0 +1,4 @@
+import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
+import type { InputProps } from "./input-props";
+import type { InputRef } from "./input-refs";
+export declare const NativeInput: ForwardRefExoticComponent<PropsWithoutRef<InputProps> & RefAttributes<InputRef>>;

package/dist-types/design-system/Input/force-mode.d.ts

@@ -0,0 +1,13 @@
+/** Which input-family implementation to render. See {@link InputForceModeProps.forceMode}. */
+export type InputForceMode = "native" | "legacy-antd" | "flag";
+export interface InputForceModeProps {
+	/**
+	* Forces which implementation renders, overriding the migration SAFE flag for this instance:
+	* `'native'` adopts the native (non-AntD) component before the flag ramps up; `'legacy-antd'`
+	* opts out of the migration to unblock rollout; `'flag'` (default) follows the
+	* `databricks.fe.designsystem.useNativeInput` flag.
+	*/
+	forceMode?: InputForceMode;
+}
+/** Gets whether the native (non-AntD) implementation should render for the given `forceMode`. */
+export declare function shouldUseNativeInput(forceMode?: InputForceMode): boolean;

package/dist-types/design-system/Input/group/AntDGroup.d.ts

@@ -0,0 +1,2 @@
+import type { InputGroupProps } from "./Group";
+export declare const AntDGroup: ({ dangerouslySetAntdProps, dangerouslyAppendEmotionCSS, compact, buttonSide, ...props }: InputGroupProps) => JSX.Element;