@databricks/design-system 2.0.1 → 2.0.3

package/dist/patterns.js

@@ -1,11 +1,10 @@
-export { D as DocumentationSidebar, F as FIXED_VERTICAL_STEPPER_WIDTH, M as MAX_VERTICAL_WIZARD_CONTENT_WIDTH, W as Wizard, a as WizardControlled, b as WizardModal, c as WizardStepContentWrapper, u as useWizardCurrentStep } from './WizardStepContentWrapper-CFCTOSm8.js';
+export { D as DocumentationSidebar, F as FIXED_VERTICAL_STEPPER_WIDTH, M as MAX_VERTICAL_WIZARD_CONTENT_WIDTH, W as Wizard, a as WizardControlled, b as WizardModal, c as WizardStepContentWrapper, u as useWizardCurrentStep } from './WizardStepContentWrapper-DsAS2ZAT.js';
 import '@emotion/react/jsx-runtime';
 import 'lodash/isUndefined';
 import 'react';
 import '@emotion/react';
 import 'antd';
 import 'classnames';
-import '@ant-design/icons';
 import '@floating-ui/react';
 import 'lodash/uniqueId';
 import 'date-fns';
@@ -17,6 +16,15 @@ import '@floating-ui/dom';
 import 'react-dom';
 import '@radix-ui/react-hover-card';
 import '@radix-ui/react-toast';
+import '@react-aria/combobox';
+import '@react-aria/listbox';
+import '@react-aria/overlays';
+import '@react-aria/utils';
+import '@react-aria/focus';
+import '@react-aria/button';
+import '@react-stately/combobox';
+import '@react-aria/i18n';
+import '@react-stately/collections';
 import 'lodash/noop';
 import 'lodash/pick';
 import 'lodash/compact';
@@ -32,6 +40,8 @@ import 'lodash/isString';
 import 'lodash/mapValues';
 import '@radix-ui/react-accordion';
 import '@radix-ui/react-tooltip-patch';
+import 'lodash/kebabCase';
+import '@ant-design/icons';
 import 'lodash/random';
 import 'lodash/times';
 import '@radix-ui/react-context-menu';

package/dist/patterns.js.map

@@ -1 +1 @@
-{"version":3,"file":"patterns.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"patterns.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -4,7 +4,7 @@ import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "
 import type { ComponentTheme } from "../../theme";
 import { DesignSystemEventProviderAnalyticsEventTypes } from "../DesignSystemEventProvider";
 import type { WithLoadingState } from "../LoadingState/LoadingState";
-import type { AnalyticsEventPropsWithStartInteraction, DangerouslySetAntdProps, HTMLDataAttributes } from "../types";
+import type { AnalyticsEventPropsWithStartInteraction, HTMLDataAttributes } from "../types";
 export declare const SMALL_BUTTON_HEIGHT = 24;
 export declare const getMemoizedButtonEmotionStyles: (props: Parameters<typeof getButtonEmotionStyles>[0]) => SerializedStyles;
 export declare const getButtonEmotionStyles: ({ theme, classNamePrefix, loading, withIcon, onlyIcon, isAnchor, enableAnimation, size, type, useFocusPseudoClass, forceIconStyles, danger }: {
@@ -22,7 +22,7 @@ export declare const getButtonEmotionStyles: ({ theme, classNamePrefix, loading,
 	forceIconStyles?: boolean;
 }) => SerializedStyles;
 export type ButtonSize = "middle" | "small";
-export interface ButtonProps extends Omit<AntDButtonProps, "type" | "ghost" | "shape" | "size">, HTMLDataAttributes, DangerouslySetAntdProps<AntDButtonProps>, Omit<WithLoadingState, "loading">, AnalyticsEventPropsWithStartInteraction<DesignSystemEventProviderAnalyticsEventTypes.OnClick | DesignSystemEventProviderAnalyticsEventTypes.OnView> {
+export interface ButtonProps extends Omit<AntDButtonProps, "type" | "ghost" | "shape" | "size">, HTMLDataAttributes, Omit<WithLoadingState, "loading">, AnalyticsEventPropsWithStartInteraction<DesignSystemEventProviderAnalyticsEventTypes.OnClick | DesignSystemEventProviderAnalyticsEventTypes.OnView> {
 	type?: "primary" | "link" | "tertiary";
 	size?: ButtonSize;
 	endIcon?: React.ReactNode;

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

@@ -20,11 +20,11 @@ export interface ContextMenuContentProps extends RadixContextMenuContentProps {
 	minWidth?: number;
 	forceCloseOnEscape?: boolean;
 }
-export declare const Content: ({ children, minWidth, forceCloseOnEscape, onEscapeKeyDown, onKeyDown, ...childrenProps }: ContextMenuContentProps) => JSX.Element;
+export declare const Content: ({ children, minWidth, forceCloseOnEscape, onEscapeKeyDown, onKeyDown, className, style, ...childrenProps }: ContextMenuContentProps) => JSX.Element;
 export interface ContextMenuSubContentProps extends RadixContextMenuSubContentProps {
 	minWidth?: number;
 }
-export declare const SubContent: ({ children, minWidth, ...childrenProps }: ContextMenuSubContentProps) => JSX.Element;
+export declare const SubContent: ({ children, minWidth, className, style, ...childrenProps }: ContextMenuSubContentProps) => JSX.Element;
 export interface ContextMenuItemProps extends RadixContextMenuItemProps, AnalyticsEventProps<DesignSystemEventProviderAnalyticsEventTypes.OnClick | DesignSystemEventProviderAnalyticsEventTypes.OnView> {
 	disabledReason?: React.ReactNode;
 }

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

@@ -6,9 +6,21 @@ import React from "react";
 import type { DesignSystemFlags } from "../../flags";
 import type { Theme } from "../../theme";
 import type { ValidSemanticColors } from "../../theme/_generated/ValidSemanticColors";
+/**
+* Raw design-token overrides keyed by their `--db-*` custom-property name, e.g.
+* `{ '--db-radius-md': '10px', '--db-space-lg': '20px' }`. Applied on top of `semanticColors`
+* (which covers the `--db-color-*` family) and inherits down the DOM the same way, so a consumer
+* can retheme non-color tokens (radius, spacing, …) for the whole subtree — including portaled
+* surfaces, which re-apply this on their own outermost portal element.
+*
+* Keys are the full custom-property names because the family prefixes are not derivable from a
+* single rule (unlike `semanticColors`, whose camelCase keys map cleanly to `--db-color-<kebab>`).
+*/
+export type DesignTokenOverrides = Partial<Record<`--db-${string}`, string>>;
 export interface DesignSystemThemeProviderProps {
 	isDarkMode?: boolean;
 	semanticColors?: Record<ValidSemanticColors, string>;
+	designTokenOverrides?: DesignTokenOverrides;
 }
 export interface DesignSystemProviderProps {
 	/**
@@ -39,10 +51,20 @@ export interface DesignSystemProviderProps {
 		typography?: Partial<Theme["typography"]>;
 		spacing?: Partial<Theme["spacing"]>;
 	};
+	/**
+	* Internal. When true, suppresses the `display: contents` token-scope wrapper this provider
+	* otherwise renders around its children. Set by `ApplyDesignSystemContextOverrides`: it only
+	* overrides context props and cannot change the token scope (no `isDarkMode`/`semanticColors`),
+	* so the scope is already established by an ancestor provider (in-tree) or re-applied on the
+	* portal root (Modal/Drawer/DropdownMenu each carry the scope class themselves). A second wrapper
+	* there would only add a redundant DOM node that breaks consumers' direct-child selectors.
+	*/
+	disableTokenScopeWrapper?: boolean;
 }
 export interface DuboisThemeContextType {
 	isDarkMode: boolean;
 	semanticColors?: Record<ValidSemanticColors, string>;
+	designTokenOverrides?: DesignTokenOverrides;
 }
 export interface DuboisContextType {
 	enableAnimation: boolean;
@@ -53,10 +75,32 @@ export interface DuboisContextType {
 export declare const DesignSystemThemeContext: Context<DuboisThemeContextType>;
 export declare const DesignSystemContext: Context<DuboisContextType>;
 export declare const DU_BOIS_ENABLE_ANIMATION_CLASSNAME = "du-bois-enable-animation";
+/**
+* `data-testid` on the `display: contents` scope wrapper `DesignSystemProvider` renders around its
+* children. The wrapper carries the theme-scope class / consumer token overrides but no visual box,
+* so tests treat it as transparent: the shared `@databricks/testing-library` `render` returns
+* `container` pointing inside this wrapper, so `container.firstChild` / emptiness assertions see the
+* component's own output.
+*/
+export declare const DS_OVERRIDE_TOKENS_WRAPPER_TESTID = "ds-override-tokens-wrapper";
 export declare const getAnimationCss: ((enableAnimation: boolean) => CSSObject) & MemoizedFunction;
 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>>;
+/**
+* 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
+* `--db-color-<name>`) with any raw `designTokenOverrides` (already keyed by `--db-*` name) layered
+* on top. The values inherit down the DOM, so setting this on a theme-scope element re-themes every
+* native (plain-CSS) component below it.
+*
+* `DesignSystemProvider` applies this to the scope wrapper it renders around its children, which
+* covers the whole in-tree subtree by inheritance. Portaled surfaces (Modal, Drawer, Popover,
+* DropdownMenu, Notification, …) render outside that wrapper in the DOM, so each merges this style
+* (plus `useDuboisThemeClass`) onto its own outermost portal element — context crosses React portals
+* while DOM inheritance does not.
+*/
+export declare function useDesignTokenOverrideStyles(): React.CSSProperties | undefined;
 export declare const DesignSystemProvider: React.FC<React.PropsWithChildren<DesignSystemProviderProps>>;
 export declare const ApplyDesignSystemContextOverrides: React.FC<React.PropsWithChildren<DesignSystemProviderProps>>;
 export declare const ApplyDesignSystemFlags: React.FC<React.PropsWithChildren<{

package/dist-types/design-system/Drawer/DrawerContext.d.ts

@@ -0,0 +1,9 @@
+import type { Context } from "react";
+export declare const DRAWER_ZINDEX_OVERLAY_OFFSET: number;
+export declare const DRAWER_ZINDEX_CONTENT_OFFSET: number;
+export interface DrawerContextValue {
+	isParentDrawerOpen: boolean;
+}
+/** Whether the surrounding subtree is inside an open Drawer. */
+export declare const DrawerContext: Context<DrawerContextValue>;
+export declare const useIsInsideOpenDrawer: () => boolean;

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

@@ -61,7 +61,7 @@ declare function RHFControlledLegacySelect<TFieldValues extends FieldValues>({ n
 interface RHFControlledSelectProps<
 	TFieldValues extends FieldValues = FieldValues,
 	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
-> extends Omit<SelectProps, OmittedOriginalProps>, UseControllerProps<TFieldValues, TName> {
+> extends Omit<SelectProps, OmittedOriginalProps | "children">, UseControllerProps<TFieldValues, TName> {
 	control: Control<TFieldValues>;
 	options?: {
 		label: string;
@@ -80,11 +80,11 @@ interface RHFControlledSelectProps<
 * @deprecated This component is no longer necessary as `SimpleSelect` can be used uncontrolled by RHF.
 * Please consult the Forms Guide on go/dubois.
 */
-declare function RHFControlledSelect<TFieldValues extends FieldValues>({ name, control, rules, options, validationState, children, width, triggerProps, contentProps, optionProps, ...restProps }: React.PropsWithChildren<RHFControlledSelectProps<TFieldValues>> & HTMLAttributes<HTMLDivElement> & ConditionalOptionalLabel): JSX.Element;
+declare function RHFControlledSelect<TFieldValues extends FieldValues>({ name, control, rules, options, validationState, children, width, triggerProps, contentProps, optionProps, ...restProps }: RHFControlledSelectProps<TFieldValues> & Omit<HTMLAttributes<HTMLDivElement>, "children"> & ConditionalOptionalLabel): JSX.Element;
 interface RHFControlledDialogComboboxProps<
 	TFieldValues extends FieldValues = FieldValues,
 	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
-> extends Omit<DialogComboboxProps, OmittedOriginalProps>, UseControllerProps<TFieldValues, TName> {
+> extends Omit<DialogComboboxProps, OmittedOriginalProps | "children">, UseControllerProps<TFieldValues, TName> {
 	control: Control<TFieldValues>;
 	validationState?: ValidationState;
 	allowClear?: boolean;
@@ -101,11 +101,11 @@ interface RHFControlledDialogComboboxProps<
 	contentProps?: Pick<DialogComboboxContentProps, "maxHeight" | "minHeight" | "matchTriggerWidth" | "style" | "className">;
 	optionListProps?: Pick<DialogComboboxOptionListProps, "loading" | "withProgressiveLoading" | "style" | "className">;
 }
-declare function RHFControlledDialogCombobox<TFieldValues extends FieldValues>({ name, control, rules, children, allowClear, validationState, placeholder, width, triggerProps, contentProps, optionListProps, ...restProps }: React.PropsWithChildren<RHFControlledDialogComboboxProps<TFieldValues>> & HTMLAttributes<HTMLDivElement> & ConditionalOptionalLabel): JSX.Element;
+declare function RHFControlledDialogCombobox<TFieldValues extends FieldValues>({ name, control, rules, children, allowClear, validationState, placeholder, width, triggerProps, contentProps, optionListProps, ...restProps }: RHFControlledDialogComboboxProps<TFieldValues> & Omit<HTMLAttributes<HTMLDivElement>, "children"> & ConditionalOptionalLabel): JSX.Element;
 interface RHFControlledTypeaheadComboboxProps<
 	TFieldValues extends FieldValues = FieldValues,
 	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
-> extends Omit<TypeaheadComboboxRootProps<TFieldValues>, OmittedOriginalProps | "comboboxState" | "multiSelect" | "componentId">, UseControllerProps<TFieldValues, TName>, AnalyticsEventValueChangeNoPiiFlagProps<DesignSystemEventProviderAnalyticsEventTypes.OnValueChange> {
+> extends Omit<TypeaheadComboboxRootProps<TFieldValues>, OmittedOriginalProps | "comboboxState" | "multiSelect" | "componentId" | "children">, UseControllerProps<TFieldValues, TName>, AnalyticsEventValueChangeNoPiiFlagProps<DesignSystemEventProviderAnalyticsEventTypes.OnValueChange> {
 	control: Control<TFieldValues, any>;
 	name: TName;
 	children: ({ comboboxState, items }: {
@@ -125,11 +125,11 @@ interface RHFControlledTypeaheadComboboxProps<
 declare function RHFControlledTypeaheadCombobox<
 	TFieldValues extends FieldValues,
 	TName extends FieldPath<TFieldValues>
->({ name, control, rules, allItems, itemToString, matcher, allowNewValue, children, validationState, inputProps, menuProps, onInputChange, componentId, analyticsEvents, valueHasNoPii, preventUnsetOnBlur, ...props }: React.PropsWithChildren<RHFControlledTypeaheadComboboxProps<TFieldValues, TName>> & HTMLAttributes<HTMLDivElement>): JSX.Element;
+>({ name, control, rules, allItems, itemToString, matcher, allowNewValue, children, validationState, inputProps, menuProps, onInputChange, componentId, analyticsEvents, valueHasNoPii, preventUnsetOnBlur, ...props }: RHFControlledTypeaheadComboboxProps<TFieldValues, TName> & Omit<HTMLAttributes<HTMLDivElement>, "children">): JSX.Element;
 interface RHFControlledMultiSelectTypeaheadComboboxProps<
 	TFieldValues extends FieldValues = FieldValues,
 	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
-> extends Omit<TypeaheadComboboxRootProps<TFieldValues>, OmittedOriginalProps | "comboboxState" | "multiSelect" | "componentId">, UseControllerProps<TFieldValues, TName>, AnalyticsEventValueChangeNoPiiFlagProps<DesignSystemEventProviderAnalyticsEventTypes.OnValueChange> {
+> extends Omit<TypeaheadComboboxRootProps<TFieldValues>, OmittedOriginalProps | "comboboxState" | "multiSelect" | "componentId" | "children">, UseControllerProps<TFieldValues, TName>, AnalyticsEventValueChangeNoPiiFlagProps<DesignSystemEventProviderAnalyticsEventTypes.OnValueChange> {
 	control: Control<any, TFieldValues>;
 	name: any;
 	children: ({ comboboxState, items, selectedItems }: {
@@ -145,7 +145,7 @@ interface RHFControlledMultiSelectTypeaheadComboboxProps<
 	menuProps?: Partial<Omit<TypeaheadComboboxMenuProps<TFieldValues>, "comboboxState">>;
 	onInputChange?: (inputValue: string) => void;
 }
-declare function RHFControlledMultiSelectTypeaheadCombobox<TFieldValues extends FieldValues>({ name, control, rules, allItems, itemToString, matcher, children, validationState, inputProps, menuProps, onInputChange, componentId, analyticsEvents, valueHasNoPii, ...props }: React.PropsWithChildren<RHFControlledMultiSelectTypeaheadComboboxProps<TFieldValues>> & HTMLAttributes<HTMLDivElement>): JSX.Element;
+declare function RHFControlledMultiSelectTypeaheadCombobox<TFieldValues extends FieldValues>({ name, control, rules, allItems, itemToString, matcher, children, validationState, inputProps, menuProps, onInputChange, componentId, analyticsEvents, valueHasNoPii, ...props }: RHFControlledMultiSelectTypeaheadComboboxProps<TFieldValues> & Omit<HTMLAttributes<HTMLDivElement>, "children">): JSX.Element;
 interface RHFControlledCheckboxGroupProps<
 	TFieldValues extends FieldValues = FieldValues,
 	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>

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

@@ -1,4 +1,2 @@
-import type { ColProps as AntDColProps } from "antd";
-import type { DangerouslySetAntdProps, HTMLDataAttributes } from "../types";
-export interface ColProps extends AntDColProps, DangerouslySetAntdProps<AntDColProps>, HTMLDataAttributes {}
+import type { ColProps } from "./types";
 export declare const Col: React.FC<React.PropsWithChildren<ColProps>>;

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

@@ -0,0 +1,10 @@
+import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
+import type { ColProps } from "./types";
+/**
+* Native flexbox implementation of the DuBois `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
+* identically to the antd variant on an identical single-`<div>` DOM.
+*/
+export declare const NativeCol: ForwardRefExoticComponent<PropsWithoutRef<ColProps> & RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,11 @@
+import type { Context } from "react";
+/**
+* Resolved horizontal/vertical gutter (in px) shared from a native `Row` to its
+* native `Col` children — the same channel AntD's grid uses (`antd/es/grid/RowContext`).
+* The `Row` applies negative margins from these values and each `Col` applies the
+* matching padding, so the two stay in lockstep. `[0, 0]` means "no gutter".
+*/
+export interface NativeGridGutter {
+	gutter: [number, number];
+}
+export declare const NativeGridContext: Context<NativeGridGutter>;

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

@@ -0,0 +1,13 @@
+import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
+import type { RowProps } from "./types";
+/**
+* Native flexbox implementation of the DuBois `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
+* `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
+* injects it as a prop default).
+*/
+export declare const NativeRow: ForwardRefExoticComponent<PropsWithoutRef<RowProps> & RefAttributes<HTMLDivElement>>;

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

@@ -1,5 +1,4 @@
-import type { RowProps as AntDRowProps } from "antd";
-import type { DangerouslySetAntdProps, HTMLDataAttributes } from "../types";
-export interface RowProps extends AntDRowProps, DangerouslySetAntdProps<AntDRowProps>, HTMLDataAttributes {}
-export declare const ROW_GUTTER_SIZE = 8;
+import { ROW_GUTTER_SIZE } from "./rowConstants";
+import type { RowProps } from "./types";
+export { ROW_GUTTER_SIZE };
 export declare const Row: React.FC<React.PropsWithChildren<RowProps>>;

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

@@ -0,0 +1,22 @@
+import type { CSSObject } from "@emotion/react";
+import type { ColSize, ColSpanType, FlexType } from "./types";
+/**
+* Mirrors antd/es/grid/col.js `parseFlex`: a bare number becomes a grow/shrink/auto triple, a bare
+* length becomes a fixed basis, anything else is passed through unchanged. Note the length regex
+* requires a unit, so a unitless `0` (like `auto`/`none`) intentionally falls through as-is — kept
+* deliberately to stay 1:1 with antd for backwards compatibility.
+*/
+export declare function parseFlex(flex: FlexType): string;
+/**
+* Coerces an antd span/offset/order/push/pull value to a finite number, or `undefined`. antd types
+* these as `number | string`; in practice they are the integers 0–24. Non-numeric values are
+* dropped (antd would route those through its class-name path, which the compat classes still cover).
+*/
+export declare function toNum(value: ColSpanType | undefined): number | undefined;
+/**
+* Converts a 24-column grid span into flexbox properties, mirroring antd's grid box model.
+* @param span - number of columns to span (0–24); `0` hides the column (`display: none`).
+*/
+export declare function spanToBasis(span: number): CSSObject;
+export declare function normalizeSize(value: ColSpanType | ColSize | undefined): ColSize | undefined;
+export declare function sizeStyles(size: ColSize): CSSObject;

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

@@ -0,0 +1,2 @@
+export declare const RESPONSIVE_SIZES: readonly ["xs", "sm", "md", "lg", "xl", "xxl"];
+export type ResponsiveSize = (typeof RESPONSIVE_SIZES)[number];

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

@@ -1,2 +1,3 @@
 export * from "./Col";
 export * from "./Row";
+export * from "./types";

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

@@ -0,0 +1,7 @@
+/**
+* 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
+* 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.
+*/
+export declare const ROW_GUTTER_SIZE = 8;

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

@@ -0,0 +1,49 @@
+import type { ResponsiveSize } from "./gridConstants";
+import type { HTMLDataAttributes } from "../types";
+export type ColSpanType = number | string;
+export type FlexType = number | "none" | "auto" | string;
+/** Per-breakpoint responsive value for a `Col` (`{ flex, span, order, offset, push, pull }`). */
+export interface ColSize {
+	flex?: FlexType;
+	span?: ColSpanType;
+	order?: ColSpanType;
+	offset?: ColSpanType;
+	push?: ColSpanType;
+	pull?: ColSpanType;
+}
+/**
+* DuBois `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.
+*/
+export interface ColProps extends React.HTMLAttributes<HTMLDivElement>, HTMLDataAttributes {
+	span?: ColSpanType;
+	order?: ColSpanType;
+	offset?: ColSpanType;
+	push?: ColSpanType;
+	pull?: ColSpanType;
+	xs?: ColSpanType | ColSize;
+	sm?: ColSpanType | ColSize;
+	md?: ColSpanType | ColSize;
+	lg?: ColSpanType | ColSize;
+	xl?: ColSpanType | ColSize;
+	xxl?: ColSpanType | ColSize;
+	prefixCls?: string;
+	flex?: FlexType;
+}
+/** 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
+* 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.
+*/
+export interface RowProps extends React.HTMLAttributes<HTMLDivElement>, HTMLDataAttributes {
+	gutter?: Gutter | [Gutter, Gutter];
+	align?: "top" | "middle" | "bottom" | "stretch";
+	justify?: "start" | "end" | "center" | "space-around" | "space-between";
+	prefixCls?: string;
+	wrap?: boolean;
+}

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

@@ -1,4 +1,4 @@
-export { useDesignSystemTheme, WithDesignSystemThemeHoc } from "./useDesignSystemTheme";
+export { useDesignSystemTheme, useDuboisThemeClass, WithDesignSystemThemeHoc } from "./useDesignSystemTheme";
 export { useDesignSystemFlags } from "./useDesignSystemFlags";
 export { useThemedStyles } from "./useThemedStyles";
 export type { DesignSystemHocProps, DesignSystemThemeInterface } from "./useDesignSystemTheme";

package/dist-types/design-system/Hooks/useDesignSystemTheme.d.ts

@@ -14,14 +14,14 @@ export declare function getClassNamePrefix(theme: Theme): string;
 export declare function getPrefixedClassNameFromTheme(theme: Theme, className: string | null | undefined): string;
 /**
 * Returns the theme-scope class for the current context: `du-bois-dark` in dark
-* mode, `du-bois-light` otherwise.
+* mode, `du-bois-light` otherwise. The `.du-bois-*` rule declares the `--db-color-*`
+* tokens, so any element carrying this class becomes a resolution scope for the
+* native (plain-CSS, token-driven) components below it.
 *
-* Native (plain-CSS, token-driven) components put this on their OWN root element
-* so the CSS custom-property cascade has a `:where(.du-bois-*)` ancestor to
-* resolve dark/light values against. Self-scoping (rather than relying on a
-* provider-emitted wrapper) means no extra DOM node is inserted into consumer
-* trees, and forced-theme subtrees / portaled content resolve correctly because
-* the class rides React context, not DOM ancestry. See DUBOIS-448.
+* `DesignSystemProvider` puts this on the scope wrapper it renders around its
+* children, so in-tree native components inherit the tokens without self-scoping.
+* Use it to re-establish that scope on content that renders OUTSIDE that wrapper —
+* i.e. portaled surfaces (context crosses React portals, DOM inheritance does not).
 */
 export declare function useDuboisThemeClass(): string;
 export declare function useDesignSystemTheme(): DesignSystemThemeInterface;

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

@@ -0,0 +1,21 @@
+import { EllipsisOutlined as AntEllipsisOutlined } from "@ant-design/icons";
+import type { ComponentType } from "react";
+/** Props type for all the antd built-in icons are the same, so pick any one */
+type AntdIconProps = React.ComponentProps<typeof AntEllipsisOutlined>;
+/**
+* The icon components' props are picked from React's HTMLProps, which, in React 17, include
+* `onPointerEnterCapture` and `onPointerLeaveCapture`, but in React 18 do not. Hence, instead of
+* these props being optional, they are now `unknown` and thus must be declared on a component
+* instance, unless we specifically remove them from the props interface.
+*/
+type IconPropsWithoutPointerEvents = Omit<AntdIconProps, "onPointerEnterCapture" | "onPointerLeaveCapture">;
+/**
+* Antd built-in icons used by the design system's own legacy components, with an interface that has
+* been made compatible with the React 18 types by removing the props that are no longer present on
+* 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`.
+*/
+export declare const LegacyEllipsisOutlined: ComponentType<IconPropsWithoutPointerEvents>;
+export {};

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

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

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

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

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

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

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

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

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

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

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

@@ -176,6 +176,7 @@ export { default as FilterIcon } from "./FilterIcon";
 export { default as FlagPointerIcon } from "./FlagPointerIcon";
 export { default as FloatIcon } from "./FloatIcon";
 export { default as FlowIcon } from "./FlowIcon";
+export { default as FlowsIcon } from "./FlowsIcon";
 export { default as FolderBranchFillIcon } from "./FolderBranchFillIcon";
 export { default as FolderBranchIcon } from "./FolderBranchIcon";
 export { default as FolderCloudFilledIcon } from "./FolderCloudFilledIcon";
@@ -239,6 +240,10 @@ export { default as KeyboardIcon } from "./KeyboardIcon";
 export { default as LakebaseCatalogIcon } from "./LakebaseCatalogIcon";
 export { default as LakebaseIcon } from "./LakebaseIcon";
 export { default as LakeflowDesignerIcon } from "./LakeflowDesignerIcon";
+export { default as LakewatchAlertIcon } from "./LakewatchAlertIcon";
+export { default as LakewatchDatasourceIcon } from "./LakewatchDatasourceIcon";
+export { default as LakewatchDetectionRuleIcon } from "./LakewatchDetectionRuleIcon";
+export { default as LakewatchParserIcon } from "./LakewatchParserIcon";
 export { default as LayerGraphIcon } from "./LayerGraphIcon";
 export { default as LayerIcon } from "./LayerIcon";
 export { default as LeafIcon } from "./LeafIcon";

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

@@ -1,4 +1,3 @@
-export * from "./AntdIcon";
 export { Icon } from "./Icon";
 export type { IconProps } from "./Icon";
 export * from "./__generated/icons";

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

@@ -1,2 +1 @@
 export * from "./LegacyTooltip";
-export * from "./LegacyInfoTooltip";

package/dist-types/design-system/Skeleton/TitleSkeleton.d.ts

@@ -1,6 +1,8 @@
 import type { CSSProperties } from "react";
 import type { WithLoadingState } from "../LoadingState/LoadingState";
-interface TitleSkeletonProps extends WithLoadingState {
+import type { TypographyTitleProps } from "../Typography/Title";
+import type { HTMLDataAttributes } from "../types";
+export interface TitleSkeletonProps extends WithLoadingState, HTMLDataAttributes {
 	/** Label for screen readers */
 	label?: React.ReactNode;
 	/** Seed that deterministically arranges the uneven lines, so that they look like ragged text.
@@ -12,6 +14,10 @@ interface TitleSkeletonProps extends WithLoadingState {
 	style?: CSSProperties;
 	/** Class name property */
 	className?: string;
+	/** Match the line and visible fill heights of a Typography.Title level. Omit to preserve the legacy appearance. */
+	level?: TitleSkeletonLevel;
+	/** Render phrasing-safe markup for use inside an existing text element. */
+	inline?: boolean;
 }
-export declare const TitleSkeleton: ({ label, seed, frameRate, style, loading, loadingDescription, ...restProps }: TitleSkeletonProps) => JSX.Element;
-export {};
+export type TitleSkeletonLevel = NonNullable<TypographyTitleProps["level"]>;
+export declare const TitleSkeleton: ({ label, seed, frameRate, style, level, inline, loading, loadingDescription, ...restProps }: TitleSkeletonProps) => JSX.Element;

package/dist-types/design-system/TypeaheadCombobox/TypeaheadComboboxAddButton.d.ts

@@ -1,3 +1,7 @@
 import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
 import type { ButtonProps } from "../Button";
+/**
+* Deprecated in favor of `TypeaheadComboboxV2`.
+* @deprecated
+*/
 export declare const TypeaheadComboboxAddButton: ForwardRefExoticComponent<PropsWithoutRef<ButtonProps> & RefAttributes<HTMLButtonElement>>;

package/dist-types/design-system/TypeaheadCombobox/TypeaheadComboboxCheckboxItem.d.ts

@@ -1,11 +1,19 @@
 import type { UseComboboxReturnValue } from "downshift";
 import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
 import { type TypeaheadComboboxMenuItemProps } from "./TypeaheadComboboxMenuItem";
+/**
+* Deprecated in favor of `TypeaheadComboboxV2`.
+* @deprecated
+*/
 export interface TypeaheadComboboxCheckboxItemProps<T> extends TypeaheadComboboxMenuItemProps<T> {
 	comboboxState: UseComboboxReturnValue<T>;
 	selectedItems: T[];
 	selectedMatcher?: (a: T, b: T) => boolean;
 	_type?: string;
 }
+/**
+* Deprecated in favor of `TypeaheadComboboxV2`.
+* @deprecated
+*/
 export declare const TypeaheadComboboxCheckboxItem: ForwardRefExoticComponent<PropsWithoutRef<TypeaheadComboboxCheckboxItemProps<any>> & RefAttributes<HTMLLIElement>>;
 export default TypeaheadComboboxCheckboxItem;

package/dist-types/design-system/TypeaheadCombobox/TypeaheadComboboxControls.d.ts

@@ -1,6 +1,8 @@
 import type { UseComboboxGetToggleButtonPropsOptions } from "downshift";
 import { type DownshiftToggleButtonProps } from "./TypeaheadComboboxToggleButton";
 import type { ButtonSize } from "../Button";
+/** Height of the non-inline controls block, for callers that position it themselves. */
+export declare const TYPEAHEAD_COMBOBOX_CONTROLS_HEIGHT = 16;
 export interface TypeaheadComboboxControlsProps {
 	getDownshiftToggleButtonProps: (options?: UseComboboxGetToggleButtonPropsOptions) => DownshiftToggleButtonProps;
 	showClearSelectionButton?: boolean;

package/dist-types/design-system/TypeaheadCombobox/TypeaheadComboboxFooter.d.ts

@@ -1,9 +1,21 @@
 import type { FunctionComponent } from "react";
+/**
+* Deprecated in favor of `TypeaheadComboboxV2`.
+* @deprecated
+*/
 export interface TypeaheadComboboxFooterProps extends React.HTMLAttributes<HTMLDivElement> {
 	/**
 	* DO NOT USE, INTERNAL USE ONLY
 	*/
 	_type?: string;
 }
+/**
+* Deprecated in favor of `TypeaheadComboboxV2`.
+* @deprecated
+*/
 export declare const DuboisTypeaheadComboboxFooter: FunctionComponent<TypeaheadComboboxFooterProps>;
+/**
+* Deprecated in favor of `TypeaheadComboboxV2`.
+* @deprecated
+*/
 export declare const TypeaheadComboboxFooter: FunctionComponent<TypeaheadComboboxFooterProps>;

package/dist-types/design-system/TypeaheadCombobox/TypeaheadComboboxInput.d.ts

@@ -1,6 +1,10 @@
 import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
 import type { ComboboxStateAnalyticsReturnValue } from "./hooks";
 import type { InputProps } from "../Input";
+/**
+* Deprecated in favor of `TypeaheadComboboxV2`.
+* @deprecated
+*/
 export interface TypeaheadComboboxInputProps<T> extends Omit<InputProps, "componentId" | "analyticsEvents"> {
 	comboboxState: ComboboxStateAnalyticsReturnValue<T>;
 	allowClear?: boolean;
@@ -10,4 +14,8 @@ export interface TypeaheadComboboxInputProps<T> extends Omit<InputProps, "compon
 	/** When true, replaces the dropdown toggle button with a spinner to indicate async loading. */
 	loading?: boolean;
 }
+/**
+* Deprecated in favor of `TypeaheadComboboxV2`.
+* @deprecated
+*/
 export declare const TypeaheadComboboxInput: ForwardRefExoticComponent<PropsWithoutRef<Omit<TypeaheadComboboxInputProps<any>, "componentId" | "analyticsEvents">> & RefAttributes<HTMLDivElement | null>>;

package/dist-types/design-system/TypeaheadCombobox/TypeaheadComboboxMenu.d.ts

@@ -1,6 +1,10 @@
 import type { UseComboboxReturnValue } from "downshift";
 import type { ForwardRefExoticComponent, HTMLAttributes, PropsWithoutRef, ReactNode, RefAttributes } from "react";
 import React from "react";
+/**
+* Deprecated in favor of `TypeaheadComboboxV2`.
+* @deprecated
+*/
 export interface TypeaheadComboboxMenuProps<T> extends HTMLAttributes<HTMLUListElement> {
 	comboboxState: UseComboboxReturnValue<T>;
 	loading?: boolean;
@@ -15,4 +19,8 @@ export interface TypeaheadComboboxMenuProps<T> extends HTMLAttributes<HTMLUListE
 	children?: ReactNode;
 	matchTriggerWidth?: boolean;
 }
+/**
+* Deprecated in favor of `TypeaheadComboboxV2`.
+* @deprecated
+*/
 export declare const TypeaheadComboboxMenu: ForwardRefExoticComponent<PropsWithoutRef<TypeaheadComboboxMenuProps<any>> & RefAttributes<HTMLElement | null>>;