@databricks/design-system 2.0.9 → 2.0.10

package/dist/{index-CUzS-Vjx.js → index-CKurXbfF.js}

@@ -1,10 +1,11 @@
-import { p as primitiveColors, f as DesignSystemEventProvider, g as useDesignSystemTheme, h as DesignTokenScope, i as useDesignSystemContext, I as InfoFillIcon, C as CheckCircleFillIcon, j as WarningFillIcon, k as DangerFillIcon, l as DesignSystemEventProviderAnalyticsEventTypes, m as useDesignSystemEventComponentCallbacks, n as DesignSystemEventProviderComponentTypes, o as DesignSystemEventProviderComponentSubTypeMap, q as useNotifyOnFirstView, r as useStableUuidV4, B as Button$1, T as Typography, s as ChevronDownIcon, t as ChevronRightIcon, v as DesignSystemAntDConfigProvider, w as CloseSmallIcon, x as addDebugOutlineIfEnabled, y as Modal, z as getAnimationCss, A as token, S as ShapeTokens, E as getDarkModePortalStyles, G as useModalContext, R as Root$3, H as Trigger, J as InfoSmallIcon, K as Content, L as Arrow, N as Tooltip, O as SparkleDoubleIcon, P as getIconClassName, Q as LoadingState, U as visuallyHidden, V as genSkeletonAnimatedColor, X as getOffsets, Y as DesignSystemEventSuppressInteractionProviderContext, Z as DesignSystemEventSuppressInteractionTrueContextValue, _ as tableStyles, $ as repeatingElementsStyles, a0 as tableClassNames, a1 as hideIconButtonRowStyles, a2 as hideIconButtonActionCellClassName, a3 as safex, a4 as TitleSkeleton, a5 as useDialogComboboxContext, a6 as PlusIcon, a7 as importantify, a8 as getComboboxOptionItemWrapperStyles, a9 as getFooterStyles, aa as useDialogComboboxOptionListContext, ab as generateUuidV4, ac as getContentOptions, ad as findHighlightedOption, ae as highlightOption, af as Input, ag as SearchIcon, ah as EmptyResults, ai as findClosestOptionSibling, aj as DialogComboboxOptionListCheckboxItem, ak as DialogComboboxOptionListSelectItem, al as DialogComboboxOptionListContextProvider, am as LoadingSpinner, an as DialogComboboxOptionList, ao as useUniqueId, ap as TypeaheadComboboxContextProvider, aq as useTypeaheadComboboxContext, ar as useDuboisThemeClass, as as useDesignTokenOverrideStyles, at as getComboboxContentWrapperStyles, au as ClearSelectionButton, av as TypeaheadComboboxSelectedItem, aw as CountBadge, ax as getValidationStateColor, ay as SectionHeader, az as useComboboxState$1, aA as useMultipleSelectionState$1, aB as Radio, aC as Checkbox, aD as DialogCombobox, aE as DialogComboboxTrigger, aF as DialogComboboxContent, aG as Select, aH as SelectTrigger, aI as SelectContent, aJ as SelectOption, aK as LegacySelect, aL as WarningIcon, aM as CheckCircleIcon, aN as DangerIcon, aO as Hint, aP as Title$1, aQ as CloseIcon, aR as RestoreAntDDefaultClsPrefix, aS as AccessibleContainer, aT as DU_BOIS_ENABLE_ANIMATION_CLASSNAME, aU as Tag, aV as CircleOffIcon, aW as CircleOutlineIcon, aX as CircleIcon, aY as getBtnClassName, aZ as SortAscendingIcon, a_ as SortDescendingIcon, a$ as SortUnsortedIcon, b0 as MinusSquareIcon, b1 as PlusSquareIcon, b2 as TypeaheadComboboxV2ContextProvider, b3 as useTypeaheadComboboxV2Context, b4 as useRadixModalContext, b5 as useIsomorphicLayoutEffect, b6 as useScrollOptionIntoView, b7 as InfoTooltip, b8 as getInfoIconStyles, b9 as HintRow, ba as getCheckboxStyles, bb as getMenuItemStyles, bc as TypeaheadComboboxSelectedItem$1, bd as CountBadge$1, be as TypeaheadComboboxMenuItem } from './WizardStepContentWrapper-DfErft8z.js';
+import { p as primitiveColors, f as DesignSystemEventProvider, g as useDesignSystemTheme, h as DesignTokenScope, i as useDesignSystemContext, I as InfoFillIcon, C as CheckCircleFillIcon, j as WarningFillIcon, k as DangerFillIcon, l as DesignSystemEventProviderAnalyticsEventTypes, m as useDesignSystemEventComponentCallbacks, n as DesignSystemEventProviderComponentTypes, o as DesignSystemEventProviderComponentSubTypeMap, q as useNotifyOnFirstView, r as useStableUuidV4, B as Button$1, T as Typography, s as ChevronDownIcon, t as ChevronRightIcon, v as DesignSystemAntDConfigProvider, w as CloseSmallIcon, x as addDebugOutlineIfEnabled, y as Modal, z as getAnimationCss, A as token, S as ShapeTokens, E as getDarkModePortalStyles, G as useModalContext, R as Root$3, H as Trigger, J as InfoSmallIcon, K as Content, L as Arrow, N as Tooltip, O as SparkleDoubleIcon, P as getIconClassName, Q as AntDBreadcrumbItem, U as AntDBreadcrumbSeparator, V as serverSideSafe, X as AntDBreadcrumbInternal, Y as LoadingState, Z as visuallyHidden, _ as genSkeletonAnimatedColor, $ as getOffsets, a0 as DesignSystemEventSuppressInteractionProviderContext, a1 as DesignSystemEventSuppressInteractionTrueContextValue, a2 as tableStyles, a3 as repeatingElementsStyles, a4 as tableClassNames, a5 as hideIconButtonRowStyles, a6 as hideIconButtonActionCellClassName, a7 as safex, a8 as TitleSkeleton, a9 as useDialogComboboxContext, aa as getFooterStyles, ab as useDialogComboboxOptionListContext, ac as generateUuidV4, ad as getContentOptions, ae as findHighlightedOption, af as highlightOption, ag as Input, ah as SearchIcon, ai as EmptyResults, aj as findClosestOptionSibling, ak as DialogComboboxOptionListCheckboxItem, al as DialogComboboxOptionListSelectItem, am as DialogComboboxOptionListContextProvider, an as LoadingSpinner, ao as DialogComboboxOptionList, ap as importantify, aq as useUniqueId, ar as TypeaheadComboboxContextProvider, as as useTypeaheadComboboxContext, at as useDuboisThemeClass, au as useDesignTokenOverrideStyles, av as getComboboxContentWrapperStyles, aw as ClearSelectionButton, ax as TypeaheadComboboxSelectedItem, ay as CountBadge, az as getValidationStateColor, aA as SectionHeader, aB as PlusIcon, aC as getComboboxOptionItemWrapperStyles, aD as useComboboxState$1, aE as useMultipleSelectionState$1, aF as Radio, aG as Checkbox, aH as DialogCombobox, aI as DialogComboboxTrigger, aJ as DialogComboboxContent, aK as Select, aL as SelectTrigger, aM as SelectContent, aN as SelectOption, aO as LegacySelect, aP as WarningIcon, aQ as CheckCircleIcon, aR as DangerIcon, aS as Hint, aT as Title$1, aU as CloseIcon, aV as RestoreAntDDefaultClsPrefix, aW as AccessibleContainer, aX as DU_BOIS_ENABLE_ANIMATION_CLASSNAME, aY as Tag, aZ as CircleOffIcon, a_ as CircleOutlineIcon, a$ as CircleIcon, b0 as getBtnClassName, b1 as SortAscendingIcon, b2 as SortDescendingIcon, b3 as SortUnsortedIcon, b4 as MinusSquareIcon, b5 as PlusSquareIcon, b6 as TypeaheadComboboxV2ContextProvider, b7 as useTypeaheadComboboxV2Context, b8 as useRadixModalContext, b9 as useIsomorphicLayoutEffect, ba as useScrollOptionIntoView, bb as InfoTooltip, bc as getInfoIconStyles, bd as HintRow, be as getCheckboxStyles, bf as getMenuItemStyles, bg as TypeaheadComboboxSelectedItem$1, bh as CountBadge$1, bi as TypeaheadComboboxMenuItem } from './WizardStepContentWrapper-D_OEwjUE.js';
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import { ThemeProvider, css, Global, createElement, ClassNames, keyframes } from '@emotion/react';
-import { Alert as Alert$1, AutoComplete as AutoComplete$1, Breadcrumb as Breadcrumb$1, DatePicker, Dropdown as Dropdown$1, Switch as Switch$1, Col as Col$1, Row as Row$1, Space as Space$1, notification, Popover, Skeleton, Menu as Menu$1, Steps as Steps$1 } from 'antd';
+import { Alert as Alert$1, AutoComplete as AutoComplete$1, DatePicker, Dropdown as Dropdown$1, Switch as Switch$1, Col as Col$1, Row as Row$1, Space as Space$1, notification, Popover, Skeleton, Menu as Menu$1, Steps as Steps$1 } from 'antd';
 import classnames from 'classnames';
-import React__default, { useState, useRef, useEffect, useCallback, useMemo, forwardRef, useImperativeHandle, createContext, useContext, Children, Fragment as Fragment$1, useLayoutEffect, useSyncExternalStore, useReducer, isValidElement } from 'react';
+import React__default, { useState, useRef, useEffect, useCallback, useMemo, forwardRef, isValidElement, Children, useImperativeHandle, createContext, useContext, Fragment as Fragment$1, useLayoutEffect, useSyncExternalStore, useReducer } from 'react';
 import 'lodash/isEqual';
+import { useBreadcrumbs } from '@react-aria/breadcrumbs';
 import { useMergeRefs, useFloating, autoUpdate, offset, flip, shift } from '@floating-ui/react';
 import isUndefined from 'lodash/isUndefined';
 import 'lodash/uniqueId';
@@ -91,6 +92,7 @@ const consumerDarkColorList = {
     borderAccessible: primitiveColors.grey300,
     borderDanger: primitiveColors.red500,
     borderWarning: primitiveColors.yellow500,
+    certified: primitiveColors.blue500,
     codeBackground: primitiveColors.grey650,
     composerBackground: primitiveColors.grey700,
     iconTrending: primitiveColors.orange,
@@ -178,6 +180,7 @@ const consumerLightColorList = {
     borderAccessible: primitiveColors.neutral500,
     borderDanger: primitiveColors.red300,
     borderWarning: primitiveColors.yellow300,
+    certified: primitiveColors.blue600,
     codeBackground: 'rgba(82, 82, 82, 0.0800)',
     composerBackground: primitiveColors.white,
     iconTrending: primitiveColors.orange,
@@ -333,6 +336,8 @@ function createCancellableTask(fn, queue) {
 const DANGEROUS_PROTOCOL_RE = /^\s*(javascript|data|vbscript|blob)\s*:/i;
 // Browsers strip these characters during URL parsing per WHATWG URL Standard
 const ASCII_TAB_OR_NEWLINE_RE = /[\t\n\r]/g;
+// WHATWG URL treats a backslash as a path separator for http/https URLs
+const BACKSLASH_RE = /\\/g;
 /**
  * Returns true if the URL does not use an executable protocol that could
  * trigger DOM XSS (javascript:, data:, vbscript:, blob:). Allows http/https
@@ -347,11 +352,8 @@ const ASCII_TAB_OR_NEWLINE_RE = /[\t\n\r]/g;
 }
 /**
  * Returns true if the URL is a safe relative path. Rejects anything containing
- * protocol handlers (javascript:, data:, etc.), protocol-relative URLs (//),
- * or paths that don't start with '/'.
- *
- * This mirrors the validation in webapp LoginUtils.redirectWithHash() and the
- * backend CreateSessionHandler.validateNextUrl().
+ * protocol handlers (javascript:, data:, etc.), protocol-relative URLs (// or
+ * its backslash equivalents), or paths that don't start with '/'.
  */ function isSafeRelativeUrl(url) {
     if (!isSafeUrl(url)) {
         return false;
@@ -359,12 +361,18 @@ const ASCII_TAB_OR_NEWLINE_RE = /[\t\n\r]/g;
     // Normalize before structural checks so browsers' WHATWG URL parsing
     // (which strips tab/newline/CR) can't bypass the '//' or '/' checks.
     const normalized = url.replace(ASCII_TAB_OR_NEWLINE_RE, '');
+    // For special schemes (http/https) WHATWG URL treats '\' exactly like '/' when
+    // deciding where the authority starts, so '/\evil.com' resolves to host
+    // evil.com and escapes the origin: https://url.spec.whatwg.org/#relative-slash-state
+    // Fold them together for the authority check below. Folding only for that
+    // check keeps a backslash deeper in the path or in a query value acceptable.
+    const separatorNormalized = normalized.replace(BACKSLASH_RE, '/');
     // Reject protocol-relative URLs (e.g. //evil.com) which browsers treat as
     // absolute URLs. Only the leading '//' is dangerous — occurrences deeper in
     // the URL (e.g. inside query params like redirect_uri=http://localhost:8080)
     // are safe because the browser has already parsed the path portion.
     // See SEC-15929 for the original vulnerability report.
-    if (normalized.startsWith('//')) {
+    if (separatorNormalized.startsWith('//')) {
         return false;
     }
     if (!normalized.startsWith('/')) {
@@ -421,7 +429,7 @@ function getColorDelta(colors, ambientColors) {
  * @deprecated Migration-only bridge; do not use in new code. Prefer a plain `DesignTokenScope` — this
  * wrapper exists solely to keep emotion-theme and design-token overrides consistent while a subtree
  * still mixes the two theming systems.
- */ function DesignTokenScopeWithEmotionTheme({ theme, children }) {
+ */ function DesignTokenScopeWithEmotionTheme({ theme, overrideTokens, children }) {
     const { theme: ambientTheme } = useDesignSystemTheme();
     const semanticColors = useMemo(()=>getColorDelta(theme.colors, ambientTheme.colors), [
         theme.colors,
@@ -431,6 +439,7 @@ function getColorDelta(colors, ambientColors) {
         theme: theme,
         children: /*#__PURE__*/ jsx(DesignTokenScope, {
             semanticColors: semanticColors,
+            overrideTokens: overrideTokens,
             isDarkMode: theme.isDarkMode,
             children: children
         })
@@ -1411,61 +1420,109 @@ function AvatarGroup({ size = DEFAULT_SIZE, users }) {
     });
 }
 
-/*
- * Assert that the subcomponents have the children prop (because React 18 types don't assume this by default)
- */ const AntDBreadcrumbWithChildren = Breadcrumb$1;
-const Breadcrumb = /* #__PURE__ */ (()=>{
-    const Breadcrumb = ({ dangerouslySetAntdProps, includeTrailingCaret = true, ...props })=>{
-        const { theme, classNamePrefix } = useDesignSystemTheme();
-        const separatorClass = `.${classNamePrefix}-breadcrumb-separator`;
-        const styles = css({
-            // Theme every crumb link with the link semantic color for AA contrast in both themes.
-            // `antd` forces its last anchor to black; the `span:last-child a` selector has the
-            // specificity to override that for the trailing crumb.
-            'a, span:last-child a': {
-                color: theme.colors.actionLinkDefault,
-                ':hover, :focus': {
-                    color: theme.colors.actionLinkHover
-                }
-            },
-            a: {
-                '&:focus-visible': {
-                    outlineColor: `${theme.colors.actionDefaultBorderFocus} !important`,
-                    outlineStyle: 'auto !important'
-                }
-            },
-            [separatorClass]: {
-                fontSize: theme.general.iconFontSize,
-                [`& ${getIconClassName()}`]: {
-                    fontSize: theme.typography.fontSizeBase
+const isBreadcrumbItem = (child)=>/*#__PURE__*/ isValidElement(child) && Boolean(child.type.__ANT_BREADCRUMB_ITEM);
+const isBreadcrumbSeparator = (child)=>/*#__PURE__*/ isValidElement(child) && Boolean(child.type.__ANT_BREADCRUMB_SEPARATOR);
+const flattenChildren = (children)=>{
+    const flattened = [];
+    Children.forEach(children, (child)=>{
+        if (/*#__PURE__*/ isValidElement(child) && child.type === React__default.Fragment) {
+            flattened.push(...flattenChildren(child.props.children));
+        } else if (child !== null && child !== undefined && typeof child !== 'boolean') {
+            flattened.push(child);
+        }
+    });
+    return flattened;
+};
+const NativeBreadcrumbItem = /*#__PURE__*/ forwardRef(function NativeBreadcrumbItem(itemProps, ref) {
+    const { href, onClick, className, children, ...props } = itemProps;
+    const hasHref = Object.prototype.hasOwnProperty.call(itemProps, 'href');
+    const contentProps = {
+        ...props,
+        className,
+        onClick
+    };
+    return /*#__PURE__*/ jsx("li", {
+        ref: ref,
+        className: "db-breadcrumb-item",
+        "data-native-breadcrumb-item": "",
+        children: hasHref ? // An href item owns its anchor; items without href keep consumer-provided content non-interactive.
+        /*#__PURE__*/ jsx("a", {
+            href: href,
+            ...contentProps,
+            children: children
+        }) : /*#__PURE__*/ jsx("span", {
+            ...contentProps,
+            children: children
+        })
+    });
+});
+const NativeBreadcrumbSeparator = /*#__PURE__*/ forwardRef(function NativeBreadcrumbSeparator({ children, className, ...props }, ref) {
+    return /*#__PURE__*/ jsx("li", {
+        ...props,
+        ref: ref,
+        "aria-hidden": true,
+        className: classnames('db-breadcrumb-separator', className),
+        "data-native-breadcrumb-separator": "",
+        children: children
+    });
+});
+const NativeBreadcrumb = /*#__PURE__*/ forwardRef(function NativeBreadcrumb({ includeTrailingCaret = true, separator, dangerouslySetAntdProps, useLegacyBreadcrumb: _useLegacyBreadcrumb, className, children, ...props }, ref) {
+    // First-class `separator` wins; fall back to the (deprecated) AntD escape hatch so the one
+    // consumer still passing `dangerouslySetAntdProps={{ separator }}` keeps parity until it migrates.
+    const hasDeprecatedSeparator = dangerouslySetAntdProps !== undefined && Object.prototype.hasOwnProperty.call(dangerouslySetAntdProps, 'separator');
+    const separatorNode = separator !== undefined ? separator : hasDeprecatedSeparator ? dangerouslySetAntdProps.separator : /*#__PURE__*/ jsx(ChevronRightIcon, {});
+    const entries = flattenChildren(children).filter((child)=>!isBreadcrumbItem(child) || Boolean(child.props.children));
+    const { navProps } = useBreadcrumbs({});
+    return /*#__PURE__*/ jsx("nav", {
+        ...addDebugOutlineIfEnabled(),
+        ...props,
+        ...navProps,
+        ref: ref,
+        className: classnames('db-breadcrumb', className),
+        "data-native-breadcrumb-root": "",
+        children: /*#__PURE__*/ jsx("ol", {
+            className: "db-breadcrumb-list",
+            "data-native-breadcrumb-list": "",
+            children: entries.map((entry, index)=>{
+                if (isBreadcrumbSeparator(entry)) {
+                    return /*#__PURE__*/ jsx(NativeBreadcrumbSeparator, {
+                        ...entry.props
+                    }, entry.key ?? index);
                 }
-            },
-            [`& ${getIconClassName()}`]: {
-                fontSize: theme.typography.fontSizeBase
-            },
-            '& > span': {
-                display: 'inline-flex',
-                alignItems: 'center'
-            }
-        });
-        return /*#__PURE__*/ jsx(DesignSystemAntDConfigProvider, {
-            children: /*#__PURE__*/ jsxs(AntDBreadcrumbWithChildren, {
-                ...addDebugOutlineIfEnabled(),
-                separator: /*#__PURE__*/ jsx(ChevronRightIcon, {}),
-                ...props,
-                ...dangerouslySetAntdProps,
-                css: css(getAnimationCss(theme.options.enableAnimation), styles),
-                children: [
-                    props.children,
-                    includeTrailingCaret && props.children && /*#__PURE__*/ jsx(Breadcrumb.Item, {
-                        children: " "
-                    })
-                ]
+                const itemProps = isBreadcrumbItem(entry) ? entry.props : {
+                    children: entry
+                };
+                const isLast = index === entries.length - 1;
+                const showSeparator = Boolean(separatorNode) && (!isLast || includeTrailingCaret);
+                return /*#__PURE__*/ jsxs(React__default.Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsx(NativeBreadcrumbItem, {
+                            ...itemProps
+                        }),
+                        showSeparator && /*#__PURE__*/ jsx(NativeBreadcrumbSeparator, {
+                            children: separatorNode
+                        })
+                    ]
+                }, /*#__PURE__*/ isValidElement(entry) ? entry.key ?? index : index);
             })
+        })
+    });
+});
+
+const Breadcrumb = /* #__PURE__ */ (()=>{
+    const Breadcrumb = (props)=>{
+        const useNativeBreadcrumb = serverSideSafe('databricks.fe.designsystem.useNativeBreadcrumb', false);
+        if (useNativeBreadcrumb && !props.useLegacyBreadcrumb) {
+            return /*#__PURE__*/ jsx(NativeBreadcrumb, {
+                ...props
+            });
+        }
+        return /*#__PURE__*/ jsx(AntDBreadcrumbInternal, {
+            ...props
         });
     };
-    Breadcrumb.Item = AntDBreadcrumbWithChildren.Item;
-    Breadcrumb.Separator = AntDBreadcrumbWithChildren.Separator;
+    Breadcrumb.Item = AntDBreadcrumbItem;
+    Breadcrumb.Separator = AntDBreadcrumbSeparator;
     return Breadcrumb;
 })();
 
@@ -1850,50 +1907,46 @@ const LOADING_STATE_DEFAULT_WIDTH = 300;
 function getStyles(args) {
     const { theme, width, hasTopBar, hasBottomBar, isInteractive } = args;
     const hoverOrFocusStyle = isInteractive ? {
-        border: `1px solid ${theme.colors.actionDefaultBorderHover}`,
-        boxShadow: theme.shadows.md
+        border: `1px solid var(--db-card-border-hover)`,
+        boxShadow: 'var(--db-card-shadow-hover)'
     } : {};
     return /*#__PURE__*/ css({
-        color: theme.colors.textPrimary,
-        backgroundColor: theme.colors.backgroundPrimary,
+        color: 'var(--db-card-text)',
+        backgroundColor: 'var(--db-card-surface)',
         position: 'relative',
         display: 'flex',
         justifyContent: 'flex-start',
         flexDirection: 'column',
-        paddingRight: hasTopBar || hasBottomBar ? 0 : theme.spacing.md,
-        paddingLeft: hasTopBar || hasBottomBar ? 0 : theme.spacing.md,
-        paddingTop: hasTopBar ? 0 : theme.spacing.md,
-        paddingBottom: hasBottomBar ? 0 : theme.spacing.md,
+        paddingRight: hasTopBar || hasBottomBar ? 0 : 'var(--db-card-padding)',
+        paddingLeft: hasTopBar || hasBottomBar ? 0 : 'var(--db-card-padding)',
+        paddingTop: hasTopBar ? 0 : 'var(--db-card-padding)',
+        paddingBottom: hasBottomBar ? 0 : 'var(--db-card-padding)',
         width: width ?? 'fit-content',
-        borderRadius: token(ShapeTokens.INFO_CONTAINER_BORDER_RADIUS, theme.borders.borderRadiusMd),
-        borderColor: theme.colors.border,
+        borderRadius: 'var(--db-card-border-radius)',
+        borderColor: 'var(--db-card-border)',
         borderWidth: '1px',
         borderStyle: 'solid',
         '&:hover': hoverOrFocusStyle,
         '&:focus': hoverOrFocusStyle,
         cursor: !isInteractive ? 'default' : 'pointer',
-        boxShadow: theme.shadows.sm,
+        boxShadow: 'var(--db-card-shadow)',
         transition: `box-shadow 0.2s ease-in-out`,
         textDecoration: 'none !important',
         ...getAnimationCss(theme.options.enableAnimation)
     });
 }
-function getBottomBarStyles(theme) {
-    return /*#__PURE__*/ css({
-        marginTop: theme.spacing.sm,
-        borderBottomRightRadius: token(ShapeTokens.INFO_CONTAINER_BORDER_RADIUS, theme.borders.borderRadiusSm),
-        borderBottomLeftRadius: token(ShapeTokens.INFO_CONTAINER_BORDER_RADIUS, theme.borders.borderRadiusSm),
-        overflow: 'hidden'
-    });
-}
-function getTopBarStyles(theme) {
-    return /*#__PURE__*/ css({
-        marginBottom: theme.spacing.sm,
-        borderTopRightRadius: token(ShapeTokens.INFO_CONTAINER_BORDER_RADIUS, theme.borders.borderRadiusSm),
-        borderTopLeftRadius: token(ShapeTokens.INFO_CONTAINER_BORDER_RADIUS, theme.borders.borderRadiusSm),
-        overflow: 'hidden'
-    });
-}
+const bottomBarStyles = /*#__PURE__*/ css({
+    marginTop: 'var(--db-card-bar-spacing-vertical)',
+    borderBottomRightRadius: 'var(--db-card-bar-border-radius)',
+    borderBottomLeftRadius: 'var(--db-card-bar-border-radius)',
+    overflow: 'hidden'
+});
+const topBarStyles = /*#__PURE__*/ css({
+    marginBottom: 'var(--db-card-bar-spacing-vertical)',
+    borderTopRightRadius: 'var(--db-card-bar-border-radius)',
+    borderTopLeftRadius: 'var(--db-card-bar-border-radius)',
+    overflow: 'hidden'
+});
 const Card = ({ children, customLoadingContent, dangerouslyAppendEmotionCSS, loading, loadingDescription, width, bottomBarContent, topBarContent, disableHover, onClick, href, navigateFn, anchorProps, componentId, analyticsEvents, shouldStartInteraction, ...dataAndAttributes })=>{
     const emitOnView = safex('databricks.fe.observability.defaultComponentView.card', false);
     const { theme } = useDesignSystemTheme();
@@ -1912,14 +1965,14 @@ const Card = ({ children, customLoadingContent, dangerouslyAppendEmotionCSS, loa
     }));
     const ref = React__default.useRef(null);
     const bottomBar = bottomBarContent ? /*#__PURE__*/ jsx("div", {
-        css: /*#__PURE__*/ css(getBottomBarStyles(theme)),
+        css: bottomBarStyles,
         children: bottomBarContent
     }) : null;
     const topBar = topBarContent ? /*#__PURE__*/ jsx("div", {
-        css: /*#__PURE__*/ css(getTopBarStyles(theme)),
+        css: topBarStyles,
         children: topBarContent
     }) : null;
-    const contentPadding = hasTopBar || hasBottomBar ? theme.spacing.lg : 0;
+    const contentPadding = hasTopBar || hasBottomBar ? 'var(--db-card-content-padding)' : '0px';
     const memoizedAnalyticsEvents = useMemo(()=>analyticsEvents ?? (emitOnView ? [
             DesignSystemEventProviderAnalyticsEventTypes.OnClick,
             DesignSystemEventProviderAnalyticsEventTypes.OnView
@@ -1999,7 +2052,7 @@ const Card = ({ children, customLoadingContent, dangerouslyAppendEmotionCSS, loa
                 topBar,
                 /*#__PURE__*/ jsx("div", {
                     css: /*#__PURE__*/ css({
-                        padding: `0px ${contentPadding}px`,
+                        padding: `0px ${contentPadding}`,
                         flexGrow: 1
                     }),
                     children: children
@@ -2262,7 +2315,7 @@ const YearPicker = /*#__PURE__*/ forwardRef(// eslint-disable-next-line react-co
 });
 /**
  * `LegacyDatePicker` was added as a temporary solution pending an
- * official Du Bois replacement. Use with caution.
+ * official dbui replacement. Use with caution.
  * @deprecated
  */ const LegacyDatePicker = /* #__PURE__ */ Object.assign(DuboisDatePicker, {
     /**
@@ -2307,37 +2360,6 @@ const Separator$1 = (props)=>{
     });
 };
 
-const DialogComboboxAddButton = ({ children, ...restProps })=>{
-    const { theme } = useDesignSystemTheme();
-    const { isInsideDialogCombobox, componentId } = useDialogComboboxContext();
-    if (!isInsideDialogCombobox) {
-        throw new Error('`DialogComboboxAddButton` must be used within `DialogCombobox`');
-    }
-    return /*#__PURE__*/ jsx(Button$1, {
-        // oxlint-disable-next-line @databricks/no-dynamic-property-value -- Contextual component ID validated through DialogCombobox component exempt:fc0846cb-b73b-401b-834e-75bb8b6d4c20
-        componentId: `${componentId ? componentId : 'design_system.dialogcombobox'}.add_option`,
-        ...restProps,
-        type: "tertiary",
-        className: "combobox-footer-add-button",
-        css: /*#__PURE__*/ css({
-            ...getComboboxOptionItemWrapperStyles(theme),
-            .../*#__PURE__*/ css(importantify({
-                width: '100%',
-                padding: 0,
-                display: 'flex',
-                alignItems: 'center',
-                borderRadius: 0,
-                '&:focus': {
-                    background: theme.colors.actionTertiaryBackgroundHover,
-                    outline: 'none'
-                }
-            }))
-        }),
-        icon: /*#__PURE__*/ jsx(PlusIcon, {}),
-        children: children
-    });
-};
-
 const DialogComboboxFooter = ({ children, ...restProps })=>{
     const { theme } = useDesignSystemTheme();
     const { isInsideDialogCombobox } = useDialogComboboxContext();
@@ -2352,20 +2374,24 @@ const DialogComboboxFooter = ({ children, ...restProps })=>{
 };
 
 const DialogComboboxHintRow = ({ children })=>{
-    const { theme } = useDesignSystemTheme();
     return /*#__PURE__*/ jsx("div", {
         css: {
             minWidth: '100%',
-            color: theme.colors.textSecondary,
-            fontSize: theme.typography.fontSizeSm,
+            color: 'var(--db-dialog-combobox-hint-text)',
+            fontSize: 'var(--db-dialog-combobox-hint-font-size)',
             '[data-disabled] &': {
-                color: theme.colors.actionDisabledText
+                color: 'var(--db-dialog-combobox-hint-text-disabled)'
             }
         },
         children: children
     });
 };
 
+const SEARCH_ROW_STYLES = /*#__PURE__*/ css({
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 'var(--db-dialog-combobox-search-gap)'
+});
 const extractTextContent = (node)=>{
     if (typeof node === 'string' || typeof node === 'number') {
         return node.toString();
@@ -2490,21 +2516,17 @@ const DialogComboboxOptionListSearch = /*#__PURE__*/ forwardRef(// eslint-disabl
         children: [
             /*#__PURE__*/ jsx("div", {
                 ref: inputWrapperRef,
-                css: {
-                    padding: `${theme.spacing.sm}px ${theme.spacing.lg / 2}px ${theme.spacing.sm}px`,
+                css: /*#__PURE__*/ css({
+                    padding: 'var(--db-dialog-combobox-search-padding-vertical) var(--db-dialog-combobox-search-padding-horizontal) var(--db-dialog-combobox-search-padding-vertical)',
                     width: '100%',
                     boxSizing: 'border-box',
                     position: 'sticky',
                     top: 0,
-                    background: theme.colors.backgroundPrimary,
+                    background: 'var(--db-dialog-combobox-search-surface)',
                     zIndex: theme.options.zIndexBase + 1
-                },
+                }),
                 children: /*#__PURE__*/ jsxs("div", {
-                    css: {
-                        display: 'flex',
-                        flexDirection: 'row',
-                        gap: theme.spacing.sm
-                    },
+                    css: SEARCH_ROW_STYLES,
                     children: [
                         /*#__PURE__*/ jsx(Input, {
                             // oxlint-disable-next-line @databricks/no-dynamic-property-value -- Contextual component ID validated through DialogCombobox component exempt:a992c761-9f18-43b0-af9d-dc9ee629260a
@@ -2529,9 +2551,9 @@ const DialogComboboxOptionListSearch = /*#__PURE__*/ forwardRef(// eslint-disabl
             }),
             virtualized ? children : hasFilteredResults && childrenIsNotEmpty ? /*#__PURE__*/ jsx("div", {
                 "aria-live": "polite",
-                css: {
+                css: /*#__PURE__*/ css({
                     width: '100%'
-                },
+                }),
                 children: filteredChildren
             }) : /*#__PURE__*/ jsx(EmptyResults, {
                 id: noResultId
@@ -2738,7 +2760,12 @@ const getLabelWrapperStyles = (classNamePrefix, theme)=>{
         display: 'flex',
         gap: theme.spacing.xs,
         alignItems: 'center',
-        [`&& + .${classNamePrefix}-input, && + .${classNamePrefix}-input-affix-wrapper, && + .${classNamePrefix}-select, && + .${classNamePrefix}-selectv2, && + .${classNamePrefix}-dialogcombobox, && + .${classNamePrefix}-checkbox-group, && + .${classNamePrefix}-radio-group, && + .${classNamePrefix}-typeahead-combobox, && + .${classNamePrefix}-datepicker, && + .${classNamePrefix}-rangepicker`]: {
+        // `.db-input` is the native (non-AntD) Input family's plain/affix field class — it carries no
+        // classNamePrefix, so it's listed alongside the prefixed AntD selectors rather than derived. Only
+        // the plain field is matched: AntD's group and addonBefore variants wrap the field in a
+        // `-input-group*` element that sits between the label and the input, so neither AntD nor the native
+        // group/addon field is a direct sibling of the label, and neither gets the top margin.
+        [`&& + .${classNamePrefix}-input, && + .${classNamePrefix}-input-affix-wrapper, && + .${classNamePrefix}-select, && + .${classNamePrefix}-selectv2, && + .${classNamePrefix}-dialogcombobox, && + .${classNamePrefix}-checkbox-group, && + .${classNamePrefix}-radio-group, && + .${classNamePrefix}-typeahead-combobox, && + .${classNamePrefix}-datepicker, && + .${classNamePrefix}-rangepicker, && + .db-input`]: {
             marginTop: theme.spacing.sm
         }
     };
@@ -4416,10 +4443,10 @@ function RHFControlledMultiSelectTypeaheadCombobox({ name, control, rules, allIt
 // pull the ~175KB chunk. Generics don't flow through React.lazy, so each public wrapper re-declares the
 // generic signature and casts its props onto the (default-generic) lazy component; the lazy impl has the
 // identical prop shape.
-const LazyRHFControlledTypeaheadComboboxV2 = /*#__PURE__*/ React__default.lazy(()=>import('./RHFControlledTypeaheadComboboxV2-Boee19c1.js').then((m)=>({
+const LazyRHFControlledTypeaheadComboboxV2 = /*#__PURE__*/ React__default.lazy(()=>import('./RHFControlledTypeaheadComboboxV2-B8Al2z1N.js').then((m)=>({
             default: m.RHFControlledTypeaheadComboboxV2
         })));
-const LazyRHFControlledMultiSelectTypeaheadComboboxV2 = /*#__PURE__*/ React__default.lazy(()=>import('./RHFControlledTypeaheadComboboxV2-Boee19c1.js').then((m)=>({
+const LazyRHFControlledMultiSelectTypeaheadComboboxV2 = /*#__PURE__*/ React__default.lazy(()=>import('./RHFControlledTypeaheadComboboxV2-B8Al2z1N.js').then((m)=>({
             default: m.RHFControlledMultiSelectTypeaheadComboboxV2
         })));
 function RHFControlledTypeaheadComboboxV2(props) {
@@ -4609,7 +4636,7 @@ const Col = (props)=>/*#__PURE__*/ jsx(DesignSystemAntDConfigProvider, {
 
 /**
  * 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.
  */ const ROW_GUTTER_SIZE = 8;
@@ -4636,6 +4663,7 @@ const getHeaderStyles = (clsPrefix, theme)=>{
     const breadcrumbClass = `.${clsPrefix}-breadcrumb`;
     const styles = {
         [breadcrumbClass]: {
+            // No v2 line-height token. TODO(FEINF-6557): adopt one when it lands.
             lineHeight: theme.typography.lineHeightBase
         }
     };
@@ -4653,17 +4681,18 @@ const Header = ({ breadcrumbs, title, titleAddOns, dangerouslyAppendEmotionCSS,
             alignItems: 'flex-start',
             justifyContent: 'space-between',
             flexWrap: allowTitleWrap ? 'wrap' : 'nowrap',
-            rowGap: theme.spacing.sm,
+            rowGap: 'var(--db-header-title-row-gap)',
             // Buttons have 32px height while Title level 2 elements used by this component have a height of 28px
             // These paddings enforce height to be the same without buttons too
             ...buttonsArray.length === 0 && {
-                paddingTop: breadcrumbs ? 0 : theme.spacing.xs / 2,
-                paddingBottom: theme.spacing.xs / 2
+                paddingTop: breadcrumbs ? 0 : 'var(--db-header-title-padding-vertical)',
+                paddingBottom: 'var(--db-header-title-padding-vertical)'
             }
         }),
         breadcrumbWrapper: /*#__PURE__*/ css({
+            // No v2 line-height token. TODO(FEINF-6557): adopt one when it lands.
             lineHeight: theme.typography.lineHeightBase,
-            marginBottom: theme.spacing.xs
+            marginBottom: 'var(--db-header-breadcrumb-margin-bottom)'
         }),
         title: /*#__PURE__*/ css({
             marginTop: 0,
@@ -4677,18 +4706,18 @@ const Header = ({ breadcrumbs, title, titleAddOns, dangerouslyAppendEmotionCSS,
         }),
         // TODO: Look into a more emotion-idomatic way of doing this.
         titleIfOtherElementsPresent: /*#__PURE__*/ css({
-            marginTop: 2
+            marginTop: 'var(--db-header-title-margin-top)'
         }),
         buttonContainer: /*#__PURE__*/ css({
-            marginLeft: 8
+            marginInlineStart: 'var(--db-header-buttons-margin-start)'
         }),
         titleAddOnsWrapper: /*#__PURE__*/ css({
             display: 'inline-flex',
             verticalAlign: 'middle',
             alignItems: 'center',
             flexWrap: 'wrap',
-            marginLeft: theme.spacing.sm,
-            gap: theme.spacing.xs
+            marginInlineStart: 'var(--db-header-title-add-ons-margin-start)',
+            gap: 'var(--db-header-title-add-ons-gap)'
         })
     };
     return /*#__PURE__*/ jsxs("div", {
@@ -4808,38 +4837,38 @@ const CONSTANTS = {
     const { theme } = useDesignSystemTheme();
     return {
         content: {
-            backgroundColor: backgroundColor ?? theme.colors.backgroundPrimary,
-            color: theme.colors.textPrimary,
+            backgroundColor: backgroundColor ?? 'var(--db-hover-card-surface)',
+            color: 'var(--db-hover-card-text)',
+            // No v2 line-height token. TODO(FEINF-6557): adopt one when it lands.
             lineHeight: theme.typography.lineHeightBase,
-            border: `1px solid ${theme.colors.border}`,
-            borderRadius: token(ShapeTokens.POPUP_BORDER_RADIUS, theme.borders.borderRadiusSm),
-            padding: `${theme.spacing.sm}px`,
-            boxShadow: theme.shadows.lg,
+            border: '1px solid var(--db-hover-card-border)',
+            borderRadius: 'var(--db-hover-card-border-radius)',
+            padding: 'var(--db-hover-card-padding)',
+            boxShadow: 'var(--db-hover-card-elevation)',
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore [FEINF-3177] TODO: fix to work with React 18 types
             userSelect: 'none',
             zIndex: theme.options.zIndexBase + 30,
             minWidth,
             maxWidth,
-            ...getDarkModePortalStyles(theme),
             a: importantify({
-                color: theme.colors.actionTertiaryTextDefault,
+                color: 'var(--db-hover-card-link-text)',
                 cursor: 'default',
                 '&:hover, &:focus': {
-                    color: theme.colors.actionTertiaryTextHover
+                    color: 'var(--db-hover-card-link-text-hover)'
                 }
             }),
             '&:focus-visible': {
                 outlineStyle: 'solid',
                 outlineWidth: '2px',
                 outlineOffset: '1px',
-                outlineColor: theme.colors.actionDefaultBorderFocus
+                outlineColor: 'var(--db-hover-card-focus-ring)'
             }
         },
         arrow: {
-            fill: backgroundColor ?? theme.colors.backgroundPrimary,
+            fill: backgroundColor ?? 'var(--db-hover-card-surface)',
             height: CONSTANTS.arrowHeight,
-            stroke: theme.colors.borderDecorative,
+            stroke: 'var(--db-hover-card-border)',
             strokeDashoffset: -30,
             strokeDasharray: CONSTANTS.arrowBottomLength() + 2 * CONSTANTS.arrowSide(),
             strokeWidth: CONSTANTS.arrowStrokeWidth(),
@@ -5390,13 +5419,12 @@ const Overflow = ({ children, noMargin = false, visibleItemsCount = 1, defaultOp
 };
 
 const PageWrapper = ({ children, ...props })=>{
-    const { theme } = useDesignSystemTheme();
     return /*#__PURE__*/ jsx("div", {
         ...addDebugOutlineIfEnabled(),
         css: /*#__PURE__*/ css({
-            paddingLeft: 16,
-            paddingRight: 16,
-            backgroundColor: theme.isDarkMode ? theme.colors.backgroundPrimary : 'transparent'
+            paddingLeft: 'var(--db-page-wrapper-spacing-horizontal)',
+            paddingRight: 'var(--db-page-wrapper-spacing-horizontal)',
+            backgroundColor: 'var(--db-page-wrapper-surface)'
         }),
         ...props,
         children: children
@@ -5406,27 +5434,27 @@ const PageWrapper = ({ children, ...props })=>{
 const STATUS_TO_ICON = {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore [FEINF-3177] TODO: fix to work with React 18 types
-    online: ({ theme, style, ...props })=>/*#__PURE__*/ jsx(CircleIcon, {
+    online: ({ style, ...props })=>/*#__PURE__*/ jsx(CircleIcon, {
             color: "success",
             css: {
                 ...style
             },
             ...props
         }),
-    disconnected: ({ theme, style, ...props })=>// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    disconnected: ({ style, ...props })=>// eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore [FEINF-3177] TODO: fix to work with React 18 types
         /*#__PURE__*/ jsx(CircleOutlineIcon, {
             css: {
-                color: theme.colors.grey500,
+                color: 'var(--db-resource-status-indicator-text)',
                 ...style
             },
             ...props
         }),
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore [FEINF-3177] TODO: fix to work with React 18 types
-    offline: ({ theme, style, ...props })=>/*#__PURE__*/ jsx(CircleOffIcon, {
+    offline: ({ style, ...props })=>// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore [FEINF-3177] TODO: fix to work with React 18 types
+        /*#__PURE__*/ jsx(CircleOffIcon, {
             css: {
-                color: theme.colors.grey500,
+                color: 'var(--db-resource-status-indicator-text)',
                 ...style
             },
             ...props
@@ -5434,10 +5462,8 @@ const STATUS_TO_ICON = {
 };
 const ResourceStatusIndicator = (props)=>{
     const { status, style, ...restProps } = props;
-    const { theme } = useDesignSystemTheme();
     const StatusIcon = STATUS_TO_ICON[status];
     return /*#__PURE__*/ jsx(StatusIcon, {
-        theme: theme,
         style: style,
         ...restProps
     });
@@ -5613,17 +5639,17 @@ const getCloseButtonStyles = (clsPrefix)=>{
     const notLink = `:not(${getBtnClassName(clsPrefix, '-link', '')})`;
     const iconSelector = `${getIconClassName()}`;
     return /*#__PURE__*/ css({
-        marginLeft: 'var(--db-snackbar-close-button-spacing)',
+        marginLeft: 'var(--db-snack-bar-close-button-spacing)',
         flexShrink: 0,
         // Override design system colors to use dark mode colors in both light and dark modes for proper contrast
         [`&&:enabled${notLink} > ${iconSelector}`]: {
-            color: 'var(--db-snackbar-close-icon) !important'
+            color: 'var(--db-snack-bar-close-icon) !important'
         },
         [`&&:enabled${notLink}:hover > ${iconSelector}`]: {
-            color: 'var(--db-snackbar-close-icon-hover) !important'
+            color: 'var(--db-snack-bar-close-icon-hover) !important'
         },
         [`&&:enabled${notLink}:active > ${iconSelector}`]: {
-            color: 'var(--db-snackbar-close-icon-active) !important'
+            color: 'var(--db-snack-bar-close-icon-active) !important'
         }
     });
 };
@@ -5649,11 +5675,11 @@ const getSnackBarRootStyle = (backgroundColor, textColor)=>{
             position: 'relative',
             display: 'flex',
             alignItems: 'center',
-            padding: 'var(--db-snackbar-spacing-vertical) var(--db-snackbar-spacing-horizontal)',
-            backgroundColor: backgroundColor || 'var(--db-snackbar-surface)',
-            color: textColor || 'var(--db-snackbar-text)',
-            boxShadow: 'var(--db-snackbar-shadow)',
-            borderRadius: 'var(--db-snackbar-border-radius)',
+            padding: 'var(--db-snack-bar-spacing-vertical) var(--db-snack-bar-spacing-horizontal)',
+            backgroundColor: backgroundColor || 'var(--db-snack-bar-surface)',
+            color: textColor || 'var(--db-snack-bar-text)',
+            boxShadow: 'var(--db-snack-bar-shadow)',
+            borderRadius: 'var(--db-snack-bar-border-radius)',
             pointerEvents: 'auto',
             maxWidth: 400
         },
@@ -6788,7 +6814,7 @@ const TypeaheadComboboxRoot = /*#__PURE__*/ forwardRef(function TypeaheadCombobo
     const buttonRef = useRef(null);
     const triggerRef = useRef(null);
     const footerRef = useRef(null);
-    const { state, itemsByKey, getKeyForItem, itemToString, removeByKey, clearSelection, onInputBlur } = comboboxState;
+    const { state, itemsByKey, getKeyForItem, itemToString, removeByKey, clearSelection, onInputBlur, onEnterKeypress } = comboboxState;
     const { inputProps: ariaInputProps, listBoxProps, buttonProps } = useComboBox({
         inputRef,
         listBoxRef,
@@ -6842,6 +6868,7 @@ const TypeaheadComboboxRoot = /*#__PURE__*/ forwardRef(function TypeaheadCombobo
             componentId: comboboxState.componentId,
             multiSelect: comboboxState.multiSelect,
             showAllOptionsOnOpen: comboboxState.showAllOptionsOnOpen,
+            allowNewValue: comboboxState.allowNewValue,
             isInsideTypeaheadCombobox: true,
             comboBoxState: state,
             inputProps,
@@ -6858,11 +6885,13 @@ const TypeaheadComboboxRoot = /*#__PURE__*/ forwardRef(function TypeaheadCombobo
             getKeyForItem,
             itemToString,
             removeByKey,
-            clearSelection
+            clearSelection,
+            onEnterKeypress
         }), [
         comboboxState.componentId,
         comboboxState.multiSelect,
         comboboxState.showAllOptionsOnOpen,
+        comboboxState.allowNewValue,
         state,
         inputProps,
         listBoxProps,
@@ -6872,7 +6901,8 @@ const TypeaheadComboboxRoot = /*#__PURE__*/ forwardRef(function TypeaheadCombobo
         getKeyForItem,
         itemToString,
         removeByKey,
-        clearSelection
+        clearSelection,
+        onEnterKeypress
     ]);
     return /*#__PURE__*/ jsx(TypeaheadComboboxV2ContextProvider, {
         value: contextValue,
@@ -7159,9 +7189,9 @@ const TypeaheadComboboxMenuContents = ({ loading, emptyText, width, minWidth = 2
             ],
             style: {
                 ...popoverProps.style,
-                // react-aria hard-codes zIndex: 100000 on the overlay, which sits *above* Du Bois
+                // react-aria hard-codes zIndex: 100000 on the overlay, which sits *above* dbui
                 // tooltips (zIndexBase + 70) — burying both the multi-select tooltip and in-menu
-                // InfoTooltips. Bring the menu into the Du Bois band (matching Popover, zIndexBase + 30):
+                // InfoTooltips. Bring the menu into the dbui band (matching Popover, zIndexBase + 30):
                 // still above modals (zIndexBase) and page content, but below tooltips as designed.
                 zIndex: theme.options.zIndexBase + 30,
                 ...matchTriggerWidth && triggerWidth ? {
@@ -7376,7 +7406,7 @@ const TypeaheadComboboxInput = /*#__PURE__*/ forwardRef(function TypeaheadCombob
     if (!ctx.isInsideTypeaheadCombobox) {
         throw new Error('`TypeaheadComboboxInput` must be used within `TypeaheadComboboxRoot`');
     }
-    const { inputProps, inputRef, comboBoxState: state, setTriggerWidth, triggerRef, componentId, clearSelection, footerFocusable, footerRef, showAllOptionsOnOpen } = ctx;
+    const { inputProps, inputRef, comboBoxState: state, setTriggerWidth, triggerRef, componentId, clearSelection, footerFocusable, footerRef, showAllOptionsOnOpen, allowNewValue, onEnterKeypress } = ctx;
     const { theme } = useDesignSystemTheme();
     // Measure trigger so `matchTriggerWidth` on Menu can size to it. Must be a passive effect, not
     // useLayoutEffect: triggerRef points at the Root <div> (an ancestor), whose ref is attached
@@ -7415,16 +7445,39 @@ const TypeaheadComboboxInput = /*#__PURE__*/ forwardRef(function TypeaheadCombob
     // must re-verify this — the "Tab moves focus to the footer, menu stays open" regression test in
     // tests/TypeaheadComboboxV2FooterFocus.test.tsx guards it.
     const handleKeyDownCapture = (e)=>{
-        if (!footerFocusable || e.key !== 'Tab' || e.shiftKey || !state?.isOpen) {
+        // allowNewValue: commit the typed custom value to the form on Enter. Capture phase runs before
+        // react-aria's own Enter handler, so focusedKey still reflects the pre-Enter highlight and
+        // onEnterKeypress can skip when an option is highlighted (react-aria selects it) and only commit a
+        // genuine custom value. When it does commit, suppress react-aria's bubble-phase Enter (same
+        // mechanism as the footer Tab handler below) — otherwise it reverts the text and fires a null
+        // selection that clobbers the commit. No-op unless allowNewValue (guarded in the hook).
+        if (e.key === 'Enter' && onEnterKeypress()) {
+            e.preventDefault();
+            e.stopPropagation();
             return;
         }
-        const moved = focusFirstFocusable(footerRef.current);
-        if (moved) {
+        // Below here: forward-Tab with the menu open. Shift+Tab and a closed menu fall through to
+        // react-aria unchanged.
+        if (e.key !== 'Tab' || e.shiftKey || !state?.isOpen) {
+            return;
+        }
+        if (footerFocusable && focusFirstFocusable(footerRef.current)) {
             e.preventDefault();
             e.stopPropagation();
             // Clear virtual focus so the (now-unfocused) input doesn't keep a stale aria-activedescendant
             // pointing at an option while real focus sits on the footer button.
             state.selectionManager.setFocusedKey(null);
+            return;
+        }
+        // allowNewValue: tabbing away after arrowing to an option must NOT commit that option — the typed
+        // free text is the value. react-aria's bubble-phase Tab handler calls commit(), which selects the
+        // highlighted option and re-syncs the input to it, leaving the field showing an option the form
+        // never committed (the committed custom value stays, so the display diverges). Suppress that
+        // commit (stopPropagation, same mechanism as the footer/Enter handlers) and drop the highlight,
+        // but do not preventDefault — the native tab still moves focus, and onInputBlur commits the text.
+        if (allowNewValue && state.selectionManager.focusedKey != null) {
+            e.stopPropagation();
+            state.selectionManager.setFocusedKey(null);
         }
     };
     return /*#__PURE__*/ jsx("div", {
@@ -7567,7 +7620,7 @@ setSelectedItems: _setSelectedItems, getSelectedItemLabel, allowClear = true, sh
     if (!ctx.isInsideTypeaheadCombobox) {
         throw new Error('`TypeaheadComboboxMultiSelectInput` must be used within `TypeaheadComboboxRoot`');
     }
-    const { inputProps, inputRef, comboBoxState: state, setTriggerWidth, triggerRef, clearSelection, removeByKey, getKeyForItem, footerFocusable, footerRef } = ctx;
+    const { inputProps, inputRef, comboBoxState: state, setTriggerWidth, triggerRef, clearSelection, removeByKey, getKeyForItem, footerFocusable, footerRef, onEnterKeypress } = ctx;
     const { theme } = useDesignSystemTheme();
     const containerRef = useRef(null);
     const scrollContainerRef = useRef(null);
@@ -7629,6 +7682,14 @@ setSelectedItems: _setSelectedItems, getSelectedItemLabel, allowClear = true, sh
     // Capture phase + stopPropagation suppresses that commit; preventDefault stops the native tab; and
     // clearing the focused key drops the stale aria-activedescendant while focus sits on the footer.
     const handleKeyDownCapture = (e)=>{
+        // allowNewValue: commit the typed custom value as a new tag on Enter (mirrors the single-select
+        // input). onEnterKeypress appends it + clears the input in the hook; suppress react-aria's bubble
+        // Enter so it doesn't revert the text. No-op unless allowNewValue (guarded in the hook).
+        if (e.key === 'Enter' && onEnterKeypress()) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
         if (!footerFocusable || e.key !== 'Tab' || e.shiftKey || !state?.isOpen) {
             return;
         }
@@ -7969,7 +8030,7 @@ const TypeaheadComboboxAddButton = /*#__PURE__*/ forwardRef(function TypeaheadCo
  * text, and the selection/input/open change handlers (including analytics + multi-select
  * input-reset). Kept separate from `useComboboxState` so the wiring into react-aria is isolated
  * from the selection helpers the hook derives afterward.
- */ function useComboboxStateProps({ items, multiSelect, matcher, isItemDisabled, allowNewValue, initialInputValue, initialSelectedItem, formValue, formOnChange, onStateChange, onIsOpenChange, externalSelectedItems, externalSetSelectedItems, stateRef, onValueChange }) {
+ */ function useComboboxStateProps({ items, multiSelect, matcher, isItemDisabled, allowNewValue, allowsEmptyCollection, initialInputValue, initialSelectedItem, formValue, formOnChange, onStateChange, onIsOpenChange, externalSelectedItems, externalSetSelectedItems, stateRef, onValueChange }) {
     const { itemToString, getKey, wrappedItems, itemsByKey, itemsByTextValue } = items;
     // react-aria blocks selection of keys listed here (keyboard + pointer); the per-item `isDisabled`
     // prop only styles the row.
@@ -8005,18 +8066,34 @@ const TypeaheadComboboxAddButton = /*#__PURE__*/ forwardRef(function TypeaheadCo
     const isControlledSingleSelect = !multiSelect && formOnChange !== undefined;
     const controlledValue = useMemo(()=>{
         if (externalSelectedItems !== null) return externalSelectedItems.map(getKey);
+        // allowNewValue: a typed custom value has no collection key, so controlling react-aria's
+        // selectedKey from formValue would resolve to a nonexistent item and blank the input. Leave the
+        // selection uncontrolled — the input text (seeded by defaultInputValue, kept via allowsCustomValue)
+        // is the source of truth, and the value reaches the form through the Enter/blur commit bridge.
+        if (allowNewValue && !multiSelect) return undefined;
         if (formValue !== undefined) return getKey(formValue);
         return isControlledSingleSelect ? null : undefined;
     }, [
         externalSelectedItems,
         formValue,
         getKey,
-        isControlledSingleSelect
+        isControlledSingleSelect,
+        allowNewValue,
+        multiSelect
     ]);
     const handleSelectionChange = useCallback((newValue)=>{
         if (externalSetSelectedItems !== null) {
             const keys = newValue ?? [];
-            const selected = keys.map((k)=>itemsByKey.get(k)).filter((x)=>x !== undefined);
+            // A typed custom value (allowNewValue) lives in the selection but has no collection entry, so
+            // itemsByKey can't resolve it. react-aria reports the full key set on every change (custom keys
+            // included), so without this fallback, picking a real option from the list rebuilds the
+            // selection from the collection alone and drops every custom tag. Resolve unknown keys against
+            // the items already selected instead.
+            const currentByKey = allowNewValue ? new Map((externalSelectedItems ?? []).map((it)=>[
+                    getKey(it),
+                    it
+                ])) : null;
+            const selected = keys.map((k)=>itemsByKey.get(k) ?? currentByKey?.get(k)).filter((x)=>x !== undefined);
             externalSetSelectedItems(selected);
             // Multi-select stays open after a pick; clear the search text so the menu resets to all items.
             stateRef.current?.setInputValue('');
@@ -8039,7 +8116,10 @@ const TypeaheadComboboxAddButton = /*#__PURE__*/ forwardRef(function TypeaheadCo
         });
     }, [
         externalSetSelectedItems,
+        externalSelectedItems,
         itemsByKey,
+        getKey,
+        allowNewValue,
         onValueChange,
         itemToString,
         formOnChange,
@@ -8065,7 +8145,14 @@ const TypeaheadComboboxAddButton = /*#__PURE__*/ forwardRef(function TypeaheadCo
         defaultItems: wrappedItems,
         defaultFilter,
         disabledKeys,
-        allowsCustomValue: allowNewValue,
+        // Single-select only. react-aria has no multi-select concept of a "custom value": on blur with
+        // leftover text (and multi's `selectedKey` is always null), its `commitValue` takes the
+        // commitCustomValue path, which for `selectionMode: 'multiple'` fires `onSelectionChange([])` and
+        // wipes every tag. Multi-select instead adds a typed value as a tag through `onEnterKeypress`, so it
+        // does not need react-aria's custom-value handling — leaving it off makes blur clear the leftover
+        // text and keep the tags.
+        allowsCustomValue: allowNewValue && !multiSelect,
+        allowsEmptyCollection,
         defaultInputValue,
         defaultSelectedKey: initialSelectedItem !== undefined ? getKey(initialSelectedItem) : undefined,
         selectionMode: multiSelect ? 'multiple' : 'single',
@@ -8145,7 +8232,7 @@ const TypeaheadComboboxAddButton = /*#__PURE__*/ forwardRef(function TypeaheadCo
 }
 
 /**
- * Backs the Du Bois TypeaheadCombobox (react-aria variant) by wrapping react-aria's
+ * Backs the dbui TypeaheadCombobox (react-aria variant) by wrapping react-aria's
  * `useComboBoxState`. Handles single- and multi-select modes, item↔key mapping, filtering
  * (default substring match or a custom `matcher`), selection helpers (`removeItem`,
  * `clearSelection`, `isSelected`), form `onChange`/`onBlur` bridging, and analytics wiring.
@@ -8155,7 +8242,7 @@ const TypeaheadComboboxAddButton = /*#__PURE__*/ forwardRef(function TypeaheadCo
     // Narrow the discriminated union once for stable typed refs in deps/callbacks.
     const externalSelectedItems = multiSelect && props.multiSelect ? props.selectedItems : null;
     const externalSetSelectedItems = multiSelect && props.multiSelect ? props.setSelectedItems : null;
-    const { allItems, itemToString: itemToStringProp, getKey: getKeyProp, matcher, isItemDisabled, componentId, analyticsEvents, valueHasNoPii, initialInputValue, initialSelectedItem, formValue, formOnChange, formOnBlur, onStateChange, onIsOpenChange, allowNewValue = false, showAllOptionsOnOpen = false } = props;
+    const { allItems, itemToString: itemToStringProp, getKey: getKeyProp, matcher, isItemDisabled, componentId, analyticsEvents, valueHasNoPii, initialInputValue, initialSelectedItem, formValue, formOnChange, formOnBlur, onStateChange, onIsOpenChange, allowNewValue = false, showAllOptionsOnOpen = false, allowsEmptyCollection = false } = props;
     // `preventUnsetOnBlur` is accepted for source compatibility with the original API but is a
     // no-op: in react-aria, blur never clears the selection (only re-syncs input text), and
     // closing on blur is required for non-modal popover dismissal.
@@ -8192,6 +8279,7 @@ const TypeaheadComboboxAddButton = /*#__PURE__*/ forwardRef(function TypeaheadCo
         matcher,
         isItemDisabled,
         allowNewValue,
+        allowsEmptyCollection,
         initialInputValue,
         initialSelectedItem,
         formValue,
@@ -8263,6 +8351,51 @@ const TypeaheadComboboxAddButton = /*#__PURE__*/ forwardRef(function TypeaheadCo
         formOnChange,
         formOnBlur
     ]);
+    // Append the typed custom value as a new multi-select tag (deduped by key), then clear the input so
+    // the next value can be typed. Returns false when there is no controlled multi-select setter.
+    const commitMultiSelectValue = useCallback((custom)=>{
+        if (externalSetSelectedItems === null) return false;
+        const current = externalSelectedItems ?? [];
+        const customKey = getKey(custom);
+        // Dedupe by key: re-entering an existing tag is a no-op.
+        if (!current.some((it)=>getKey(it) === customKey)) {
+            const next = [
+                ...current,
+                custom
+            ];
+            externalSetSelectedItems(next);
+            eventContext.onValueChange?.(mapItemsToString$1(next, itemToString));
+        }
+        stateRef.current?.setInputValue('');
+        return true;
+    }, [
+        externalSelectedItems,
+        externalSetSelectedItems,
+        getKey,
+        itemToString,
+        eventContext
+    ]);
+    // Commit the typed custom value on Enter, matching the downshift variant (which committed on both
+    // Enter and blur). react-aria keeps the text via `allowsCustomValue` but never routes a custom value
+    // through `onSelectionChange`, so it never reaches the form/selection on its own. `Input` calls this
+    // in the capture phase, so a highlighted option's key is still visible here — bail in that case so we
+    // don't double-commit alongside react-aria's own Enter selection.
+    const onEnterKeypress = useCallback(()=>{
+        if (!allowNewValue) return false;
+        if (stateRef.current?.selectionManager.focusedKey != null) return false;
+        const raw = stateRef.current?.inputValue ?? '';
+        if (!raw) return false;
+        // allowNewValue implies T is a string, so the raw inputValue is a valid T.
+        const custom = raw;
+        if (multiSelect) return commitMultiSelectValue(custom);
+        formOnChange?.(custom);
+        return true;
+    }, [
+        allowNewValue,
+        multiSelect,
+        commitMultiSelectValue,
+        formOnChange
+    ]);
     // Unwrap state.collection (post-filter) back to T[] for consumers.
     const filteredItems = useMemo(()=>{
         const out = [];
@@ -8343,13 +8476,15 @@ const TypeaheadComboboxAddButton = /*#__PURE__*/ forwardRef(function TypeaheadCo
         clearSelection,
         isSelected,
         onInputBlur,
+        onEnterKeypress,
         componentId,
         analyticsEvents: memoizedAnalyticsEvents,
         valueHasNoPii,
         onView: eventContext.onView,
         firstOnViewValue,
         multiSelect,
-        showAllOptionsOnOpen
+        showAllOptionsOnOpen,
+        allowNewValue
     };
 }
 
@@ -8517,5 +8652,5 @@ const DM_SANS_FONT_FAMILY = "'DM Sans', -apple-system, BlinkMacSystemFont, 'Sego
 // code and other tabular text keep a fixed-width face if the web font fails to load.
 const DM_MONO_FONT_FAMILY = "'DM Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";
 
-export { TableFilterLayout as $, Alert as A, Breadcrumb as B, Card as C, DBAssistantAvatar as D, ROW_GUTTER_SIZE as E, FormUI as F, GenericSkeleton as G, Header as H, InfoPopover as I, ResourceStatusIndicator as J, Row as K, LegacyDatePicker as L, Menu as M, Notification as N, Overflow as O, PageWrapper as P, SnackBar as Q, RHFControlledComponents as R, Slider as S, TypeaheadComboboxRoot as T, Space as U, Steps as V, Switch as W, Table as X, TableCell as Y, TableContext as Z, TableFilterInput as _, TypeaheadComboboxMultiSelectInput as a, TableHeader as a0, TableRow as a1, TableRowAction as a2, TableRowActionHeader as a3, TableRowContext as a4, TableRowMenuContainer as a5, TableRowMultiAction as a6, TableRowSelectCell as a7, TableSkeleton as a8, TableSkeletonRows as a9, useDesignSystemFlags as aA, useFastDom as aB, useLegacyNotification as aC, useSnackBar as aD, useThemedStyles as aE, withNotifications as aF, Toolbar as aa, TreeGrid as ab, TruncationTooltip as ac, TypeaheadComboboxAddButton$1 as ad, TypeaheadComboboxInput$1 as ae, TypeaheadComboboxMenu$1 as af, TypeaheadComboboxMultiSelectInput$1 as ag, TypeaheadComboboxRoot$1 as ah, TypeaheadComboboxSectionHeader$1 as ai, TypeaheadComboboxSeparator$1 as aj, TypeaheadComboboxToggleButton$1 as ak, index as al, consumerDarkColorList as am, consumerLightColorList as an, flushFastdomForTesting as ao, getGlobalResetStyles as ap, getGlobalStyles as aq, getSwitchWithLabelStyles as ar, isSafeRelativeUrl as as, isSafeUrl as at, measure as au, sanitizeNextUrl as av, setupDesignSystemEventProviderForTesting as aw, snackBarManager as ax, update as ay, useDefaultTreeGridState as az, TypeaheadComboboxMenu as b, TypeaheadComboboxInput as c, ApplyGlobalStyles as d, AssistantAvatar as e, AutoComplete as f, Avatar as g, AvatarGroup as h, Col as i, DM_MONO_FONT_FAMILY as j, DM_SANS_FONT_FAMILY as k, DesignTokenScopeWithEmotionTheme as l, DialogComboboxAddButton as m, DialogComboboxFooter as n, DialogComboboxHintRow as o, DialogComboboxOptionControlledList as p, DialogComboboxOptionListSearch as q, DialogComboboxSeparator as r, Dropdown as s, DuboisDatePicker as t, useComboboxState as u, HoverCard as v, LegacyPopover as w, LegacySkeleton as x, OverflowPopover as y, ParagraphSkeleton as z };
-//# sourceMappingURL=index-CUzS-Vjx.js.map
+export { TableHeader as $, Alert as A, Breadcrumb as B, Card as C, DBAssistantAvatar as D, ResourceStatusIndicator as E, FormUI as F, GenericSkeleton as G, Header as H, InfoPopover as I, Row as J, SnackBar as K, LegacyDatePicker as L, Menu as M, Notification as N, Overflow as O, PageWrapper as P, Space as Q, RHFControlledComponents as R, Slider as S, TypeaheadComboboxRoot as T, Steps as U, Switch as V, Table as W, TableCell as X, TableContext as Y, TableFilterInput as Z, TableFilterLayout as _, TypeaheadComboboxMultiSelectInput as a, TableRow as a0, TableRowAction as a1, TableRowActionHeader as a2, TableRowContext as a3, TableRowMenuContainer as a4, TableRowMultiAction as a5, TableRowSelectCell as a6, TableSkeleton as a7, TableSkeletonRows as a8, Toolbar as a9, useFastDom as aA, useLegacyNotification as aB, useSnackBar as aC, useThemedStyles as aD, withNotifications as aE, TreeGrid as aa, TruncationTooltip as ab, TypeaheadComboboxAddButton$1 as ac, TypeaheadComboboxInput$1 as ad, TypeaheadComboboxMenu$1 as ae, TypeaheadComboboxMultiSelectInput$1 as af, TypeaheadComboboxRoot$1 as ag, TypeaheadComboboxSectionHeader$1 as ah, TypeaheadComboboxSeparator$1 as ai, TypeaheadComboboxToggleButton$1 as aj, index as ak, consumerDarkColorList as al, consumerLightColorList as am, flushFastdomForTesting as an, getGlobalResetStyles as ao, getGlobalStyles as ap, getSwitchWithLabelStyles as aq, isSafeRelativeUrl as ar, isSafeUrl as as, measure as at, sanitizeNextUrl as au, setupDesignSystemEventProviderForTesting as av, snackBarManager as aw, update as ax, useDefaultTreeGridState as ay, useDesignSystemFlags as az, TypeaheadComboboxMenu as b, TypeaheadComboboxInput as c, ApplyGlobalStyles as d, AssistantAvatar as e, AutoComplete as f, Avatar as g, AvatarGroup as h, Col as i, DM_MONO_FONT_FAMILY as j, DM_SANS_FONT_FAMILY as k, DesignTokenScopeWithEmotionTheme as l, DialogComboboxFooter as m, DialogComboboxHintRow as n, DialogComboboxOptionControlledList as o, DialogComboboxOptionListSearch as p, DialogComboboxSeparator as q, Dropdown as r, DuboisDatePicker as s, HoverCard as t, useComboboxState as u, LegacyPopover as v, LegacySkeleton as w, OverflowPopover as x, ParagraphSkeleton as y, ROW_GUTTER_SIZE as z };
+//# sourceMappingURL=index-CKurXbfF.js.map