@databricks/design-system 2.0.4 → 2.0.6

package/dist/{WizardStepContentWrapper-8bs2FwRi.js → WizardStepContentWrapper-6YTjeEaA.js}

@@ -3,7 +3,7 @@ import isUndefined from 'lodash/isUndefined';
 import * as React from 'react';
 import React__default, { useRef, useEffect, useMemo, useCallback, useContext, createContext, useState, forwardRef, useLayoutEffect, useImperativeHandle, Children } from 'react';
 import { useTheme, ThemeProvider, css, keyframes, ClassNames, Global, createElement } from '@emotion/react';
-import { ConfigProvider, notification, Collapse, Button as Button$2, Typography as Typography$1, Checkbox as Checkbox$1, Input as Input$2, Select as Select$1, Radio as Radio$1, Layout as Layout$1, Form as Form$1, Pagination as Pagination$1, Table, Tooltip as Tooltip$1, Dropdown, Tree as Tree$1 } from 'antd';
+import { ConfigProvider, notification, Collapse, Button as Button$1, Typography as Typography$1, Checkbox as Checkbox$1, Input as Input$2, Select as Select$1, Radio as Radio$1, Layout as Layout$1, Form as Form$1, Pagination as Pagination$1, Table, Tooltip as Tooltip$1, Dropdown, Tree as Tree$1 } from 'antd';
 import classnames from 'classnames';
 import { useMergeRefs } from '@floating-ui/react';
 import uniqueId$1 from 'lodash/uniqueId';
@@ -16,6 +16,8 @@ import '@floating-ui/dom';
 import { createPortal } from 'react-dom';
 import '@radix-ui/react-hover-card';
 import '@radix-ui/react-toast';
+import '@radix-ui/react-slider';
+import '@radix-ui/react-toolbar';
 import '@react-aria/combobox';
 import { useOption } from '@react-aria/listbox';
 import '@react-aria/overlays';
@@ -42,23 +44,21 @@ import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as RadixTooltip from '@radix-ui/react-tooltip-patch';
 import { TooltipProvider } from '@radix-ui/react-tooltip-patch';
 import kebabCase from 'lodash/kebabCase';
-import AntDIcon, { EllipsisOutlined } from '@ant-design/icons';
+import AntdIconBase, { EllipsisOutlined } from '@ant-design/icons';
 import random from 'lodash/random';
 import times from 'lodash/times';
 import { ContextMenuArrow, ContextMenuSub, ContextMenuGroup, ContextMenuTrigger, ContextMenuItemIndicator, ContextMenuCheckboxItem, ContextMenuPortal, ContextMenuContent, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuSeparator, ContextMenuRadioItem, ContextMenuRadioGroup, ContextMenuItem, ContextMenuLabel, ContextMenu as ContextMenu$2 } from '@radix-ui/react-context-menu';
-import { DayPicker, useDayRender, Button as Button$3 } from 'react-day-picker';
+import { DayPicker, useDayRender, Button as Button$2 } from 'react-day-picker';
 import { tabbable } from 'tabbable';
 import { useCombobox, useMultipleSelection } from 'downshift';
 import * as RadixNavigationMenu from '@radix-ui/react-navigation-menu';
 import { RadioGroupItem, RadioGroup as RadioGroup$2 } from '@radix-ui/react-radio-group';
 import * as Progress$1 from '@radix-ui/react-progress';
 import { ResizableBox } from 'react-resizable';
-import * as RadixSlider from '@radix-ui/react-slider';
 import * as ScrollArea from '@radix-ui/react-scroll-area';
 import * as RadixTabs from '@radix-ui/react-tabs';
 import debounce from 'lodash/debounce';
 import * as Toggle from '@radix-ui/react-toggle';
-import * as RadixToolbar from '@radix-ui/react-toolbar';
 
 /**
  * Used to hide text visually, but still be readable by screen-readers
@@ -1767,12 +1767,33 @@ const getAnimationCss = memoize((enableAnimation)=>{
 const DesignSystemProviderPropsContext = /*#__PURE__*/ React__default.createContext(null);
 const AntDConfigProviderPropsContext = /*#__PURE__*/ React__default.createContext(null);
 /** Only to be accessed by SupportsDuBoisThemes, except for special exceptions like tests and storybook. Ask in #dubois first if you need to use it. */ const DesignSystemThemeProvider = ({ isDarkMode = false, semanticColors, designTokenOverrides, children })=>{
-    return /*#__PURE__*/ jsx(DesignSystemThemeContext.Provider, {
-        value: {
+    // Inherit `designTokenOverrides` from any ambient scope so a nested theme provider — which usually
+    // only switches isDarkMode / semanticColors — doesn't drop a structural override an ancestor set
+    // (e.g. a radius or spacing token). These tokens are mode-independent, so inheriting them is always
+    // correct. `semanticColors` and `isDarkMode` intentionally stay a clean per-mode replace: a mode
+    // switch must NOT inherit the ancestor's palette (color layering is DesignTokenScope's job).
+    const ambient = useContext(DesignSystemThemeContext);
+    const mergedDesignTokenOverrides = useMemo(()=>{
+        const merged = {
+            ...ambient.designTokenOverrides,
+            ...designTokenOverrides
+        };
+        return Object.keys(merged).length > 0 ? merged : undefined;
+    }, [
+        ambient.designTokenOverrides,
+        designTokenOverrides
+    ]);
+    const value = useMemo(()=>({
             isDarkMode,
             semanticColors,
-            designTokenOverrides
-        },
+            designTokenOverrides: mergedDesignTokenOverrides
+        }), [
+        isDarkMode,
+        semanticColors,
+        mergedDesignTokenOverrides
+    ]);
+    return /*#__PURE__*/ jsx(DesignSystemThemeContext.Provider, {
+        value: value,
         children: children
     });
 };
@@ -1822,7 +1843,7 @@ function semanticColorsToStyle(semanticColors) {
  * surfaces escape the DOM subtree. Consumers use the exported `DesignTokenScope` below (which also
  * feeds `DesignSystemThemeContext` so portals inherit too) — this impl is deliberately not exported.
  */ const DesignTokenScopeImpl = ({ children, overrideTokens, semanticColors, isDarkMode })=>{
-    const theme = useTheme();
+    const { theme } = useDesignSystemTheme();
     const scopeTheme = isDarkMode === undefined ? theme : getTheme(isDarkMode);
     const style = useMemo(()=>({
             display: 'contents',
@@ -1839,6 +1860,20 @@ function semanticColorsToStyle(semanticColors) {
         children: children
     });
 };
+// Entries of `overrides` that differ from `ambient` (added or changed) — what a scope contributes on
+// top of the tokens it already inherits. Empty when the scope changes nothing over ambient.
+function getChangedEntries(overrides, ambient) {
+    const changed = {};
+    if (overrides === undefined) return changed;
+    // Object.keys widens to string[]; the cast restores the key union so the record indexing type-checks.
+    for (const key of Object.keys(overrides)){
+        const value = overrides[key];
+        if (value !== undefined && value !== ambient?.[key]) {
+            changed[key] = value;
+        }
+    }
+    return changed;
+}
 /**
  * Applies design-token overrides to a component or page subtree, reaching BOTH in-tree components and
  * portaled surfaces (Modal, Drawer, DropdownMenu, Popover, Notification, …). This is the primitive to
@@ -1881,6 +1916,32 @@ function semanticColorsToStyle(semanticColors) {
         ambient.designTokenOverrides,
         overrideTokens
     ]);
+    // What THIS scope changes vs the ambient one. The cumulative maps above feed the context, so portaled
+    // surfaces re-stamp the full palette on their detached roots; the scoped delta below is all the in-tree
+    // DOM node needs to stamp, because descendants already inherit the ambient tokens by CSS.
+    const scopedSemanticColors = useMemo(()=>{
+        const changed = getChangedEntries(semanticColors, ambient.semanticColors);
+        return Object.keys(changed).length > 0 ? changed : undefined;
+    }, [
+        semanticColors,
+        ambient.semanticColors
+    ]);
+    const scopedOverrideTokens = useMemo(()=>{
+        const changed = getChangedEntries(overrideTokens, ambient.designTokenOverrides);
+        return Object.keys(changed).length > 0 ? changed : undefined;
+    }, [
+        overrideTokens,
+        ambient.designTokenOverrides
+    ]);
+    // A scope that changes nothing over ambient is a no-op: descendants already inherit the ambient scope
+    // in-tree and read the same cumulative context, so render them directly. The mode check compares the
+    // ambient CONTEXT mode (what descendants inherit and portals re-stamp from), not the emotion theme — a
+    // forced-mode ancestor can make the two diverge, and skipping must not leave that divergence unreset.
+    if (scopedSemanticColors === undefined && scopedOverrideTokens === undefined && resolvedIsDarkMode === ambient.isDarkMode) {
+        return /*#__PURE__*/ jsx(Fragment, {
+            children: children
+        });
+    }
     return(// DesignTokenScope IS the sanctioned wrapper that feeds token overrides into DesignSystemThemeContext
     // for portaled surfaces, so it is one of the "special exceptions" the forbid rule allows.
     // eslint-disable-next-line react/forbid-elements
@@ -1892,8 +1953,8 @@ function semanticColorsToStyle(semanticColors) {
         designTokenOverrides: mergedOverrideTokens,
         children: /*#__PURE__*/ jsx(DesignTokenScopeImpl, {
             isDarkMode: resolvedIsDarkMode,
-            semanticColors: mergedSemanticColors,
-            overrideTokens: mergedOverrideTokens,
+            semanticColors: scopedSemanticColors,
+            overrideTokens: scopedOverrideTokens,
             children: children
         })
     }));
@@ -2131,15 +2192,15 @@ const getIconVariantStyles = (theme, color)=>{
             } : {};
     }
 };
-// Module-level cache. The full css prop for AntDIcon depends only on (theme, color) —
+// Module-level cache. The full css prop for AntdIconBase depends only on (theme, color) —
 // at most ~5 distinct color values per theme — so we share one css object across every
 // Icon instance. Same pattern as getShadowScrollStylesMemoized in css-utils.tsx.
 const getMemoizedIconCss$1 = memoize((theme, color)=>({
         fontSize: theme.general.iconFontSize,
         ...getIconVariantStyles(theme, color)
     }), (theme, color)=>`${themeMemoKey(theme)}|${color ?? 'undef'}`);
-const Icon = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
-    const { component: Component, dangerouslySetAntdProps, color, style, ...otherProps } = props;
+const AntdIcon = /*#__PURE__*/ forwardRef(function AntdIcon(props, forwardedRef) {
+    const { component: Component, color, style, ...otherProps } = props;
     const { theme } = useDesignSystemTheme();
     const linearGradientId = useUniqueId('ai-linear-gradient');
     const { gradientStart: aiGradientStart, gradientMid: aiGradientMid, gradientEnd: aiGradientEnd } = theme.colors.branded.ai;
@@ -2196,7 +2257,7 @@ const Icon = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
         aiGradientEnd
     ]);
     return /*#__PURE__*/ jsx(DesignSystemAntDConfigProvider, {
-        children: /*#__PURE__*/ jsx(AntDIcon, {
+        children: /*#__PURE__*/ jsx(AntdIconBase, {
             ...addDebugOutlineIfEnabled(),
             ref: forwardedRef,
             "aria-hidden": "true",
@@ -2205,12 +2266,134 @@ const Icon = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
             style: {
                 ...style
             },
-            ...otherProps,
-            ...dangerouslySetAntdProps
+            ...otherProps
         })
     });
 });
 
+const getColorClassName = (color)=>{
+    return color ? `db-icon-${color}` : undefined;
+};
+const NativeIcon = /*#__PURE__*/ forwardRef(function NativeIcon({ component: Component, className, color, style, spin, rotate, viewBox, tabIndex, onClick, children, ...spanProps }, ref) {
+    const effectiveTabIndex = tabIndex ?? (onClick ? -1 : undefined);
+    const linearGradientId = useUniqueId('ai-linear-gradient');
+    const svgStyle = useMemo(()=>rotate || color === 'ai' ? {
+            ...rotate ? {
+                rotate: `${rotate}deg`
+            } : {},
+            ...color === 'ai' ? {
+                '--db-icon-gradient': `url(#${linearGradientId})`
+            } : {}
+        } : undefined, [
+        rotate,
+        color,
+        linearGradientId
+    ]);
+    const svgProps = useMemo(()=>({
+            width: '1em',
+            height: '1em',
+            fill: Component ? 'none' : 'currentColor',
+            'aria-hidden': 'true',
+            focusable: 'false',
+            className: classnames({
+                'db-icon-spin': spin
+            }),
+            style: svgStyle,
+            ...viewBox !== undefined ? {
+                viewBox
+            } : {}
+        }), [
+        Component,
+        spin,
+        svgStyle,
+        viewBox
+    ]);
+    // component takes precedence over children, matching antd's Icon.
+    let glyph = null;
+    if (Component) {
+        glyph = /*#__PURE__*/ jsx(Component, {
+            ...svgProps,
+            children: children
+        });
+    } else if (children) {
+        glyph = /*#__PURE__*/ jsx("svg", {
+            ...svgProps,
+            children: children
+        });
+    }
+    return /*#__PURE__*/ jsxs("span", {
+        ...addDebugOutlineIfEnabled(),
+        // TODO: only set role="img" when the icon is not aria-hidden and has an aria-label or
+        // aria-labelledby. role="img" is for content images, not decorative icons, most of which
+        // are aria-hidden and better represented as text in the DOM.
+        role: "img",
+        "aria-hidden": "true",
+        ...spanProps,
+        ref: ref,
+        tabIndex: effectiveTabIndex,
+        onClick: onClick,
+        className: classnames('db-icon', getColorClassName(color), className),
+        style: style,
+        children: [
+            glyph,
+            color === 'ai' && /*#__PURE__*/ jsx("svg", {
+                className: "db-icon-gradient-definitions",
+                width: "0",
+                height: "0",
+                viewBox: "0 0 0 0",
+                "aria-hidden": "true",
+                focusable: "false",
+                children: /*#__PURE__*/ jsx("defs", {
+                    children: /*#__PURE__*/ jsxs("linearGradient", {
+                        id: linearGradientId,
+                        x1: "0%",
+                        y1: "0%",
+                        x2: "100%",
+                        y2: "100%",
+                        children: [
+                            /*#__PURE__*/ jsx("stop", {
+                                offset: "20.5%",
+                                className: "db-icon-ai-gradient-start"
+                            }),
+                            /*#__PURE__*/ jsx("stop", {
+                                offset: "46.91%",
+                                className: "db-icon-ai-gradient-mid"
+                            }),
+                            /*#__PURE__*/ jsx("stop", {
+                                offset: "79.5%",
+                                className: "db-icon-ai-gradient-end"
+                            })
+                        ]
+                    })
+                })
+            })
+        ]
+    });
+});
+
+// Selector matching the design-system icon wrappers, `.anticon` and `.db-icon`. Authored icon styles
+// should use this instead of hardcoding either class.
+function getIconClassName() {
+    return '.anticon, .db-icon';
+}
+
+// Public Icon selects between the native (plain-DOM, token-driven) implementation and the legacy
+// AntD-backed implementation on the `databricks.fe.designsystem.useNativeIcon` server-side flag,
+// default off. serverSideSafe resolves synchronously at render, so the choice is stable from first paint.
+const Icon = /*#__PURE__*/ forwardRef(function Icon({ forceNativeIcon, ...props }, ref) {
+    const useNativeIcon = forceNativeIcon ?? serverSideSafe('databricks.fe.designsystem.useNativeIcon', false);
+    if (useNativeIcon) {
+        return /*#__PURE__*/ jsx(NativeIcon, {
+            ...props,
+            ref: ref
+        });
+    }
+    return /*#__PURE__*/ jsx(AntdIcon, {
+        ...props,
+        ref: ref
+    });
+});
+
 function SvgAzHorizontalIcon(props) {
     return /*#__PURE__*/ jsx("svg", {
         xmlns: "http://www.w3.org/2000/svg",
@@ -5546,6 +5729,62 @@ const ColorFillIcon = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
 });
 ColorFillIcon.displayName = "ColorFillIcon";
 
+function SvgColorMappingEditIcon(props) {
+    return /*#__PURE__*/ jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "1em",
+        height: "1em",
+        fill: "none",
+        viewBox: "0 0 17 17",
+        ...props,
+        children: /*#__PURE__*/ jsx("path", {
+            fill: "currentColor",
+            fillRule: "evenodd",
+            d: "M6.5 8.836a.75.75 0 0 1 .75.75v4.75a.75.75 0 0 1-.75.75H1.75a.75.75 0 0 1-.75-.75v-4.75a.75.75 0 0 1 .75-.75zm-4 4.75h3.25v-3.25H2.5zM14.25 8.836a.75.75 0 0 1 .75.75v4.75a.75.75 0 0 1-.75.75H9.5a.75.75 0 0 1-.75-.75v-4.75a.75.75 0 0 1 .75-.75zm-4 4.75h3.25v-3.25h-3.25zM6.5 1.086a.75.75 0 0 1 .75.75v4.75a.75.75 0 0 1-.75.75H1.75a.75.75 0 0 1-.75-.75v-4.75a.75.75 0 0 1 .75-.75zm-4 4.75h3.25v-3.25H2.5zM12.513.512a1.75 1.75 0 0 1 2.474 0l.586.586a1.75 1.75 0 0 1 0 2.475L12.03 7.116a.75.75 0 0 1-.53.22h-2a.75.75 0 0 1-.75-.75v-2c0-.2.08-.39.22-.53zm1.414 1.061a.25.25 0 0 0-.354 0L10.25 4.896v.94h.94l3.323-3.324a.25.25 0 0 0 0-.353z",
+            clipRule: "evenodd"
+        })
+    });
+}
+const ColorMappingEditIcon = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    return /*#__PURE__*/ jsx(Icon, {
+        ref: forwardedRef,
+        ...props,
+        component: SvgColorMappingEditIcon
+    });
+});
+ColorMappingEditIcon.displayName = "ColorMappingEditIcon";
+
+function SvgColorMappingIcon(props) {
+    return /*#__PURE__*/ jsxs("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "1em",
+        height: "1em",
+        fill: "none",
+        viewBox: "0 0 16 16",
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                fill: "currentColor",
+                fillRule: "evenodd",
+                d: "M14.5 8.755a.75.75 0 0 1 .75.75v4.75a.75.75 0 0 1-.75.75H9.75a.75.75 0 0 1-.75-.75v-4.75a.75.75 0 0 1 .75-.75zm-4 4.75h3.25v-3.25H10.5zM6.5 8.75a.75.75 0 0 1 .75.75v4.75a.75.75 0 0 1-.75.75H1.75a.75.75 0 0 1-.75-.75V9.5a.75.75 0 0 1 .75-.75zm-4 4.75h3.25v-3.25H2.5zM6.5 1a.75.75 0 0 1 .75.75V6.5a.75.75 0 0 1-.75.75H1.75A.75.75 0 0 1 1 6.5V1.75A.75.75 0 0 1 1.75 1zm-4 4.75h3.25V2.5H2.5z",
+                clipRule: "evenodd"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                fill: "currentColor",
+                d: "M12.745 3.255H15v1.5h-2.255V7h-1.5V4.755H9v-1.5h2.245V1h1.5z"
+            })
+        ]
+    });
+}
+const ColorMappingIcon = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    return /*#__PURE__*/ jsx(Icon, {
+        ref: forwardedRef,
+        ...props,
+        component: SvgColorMappingIcon
+    });
+});
+ColorMappingIcon.displayName = "ColorMappingIcon";
+
 function SvgColumnIcon(props) {
     return /*#__PURE__*/ jsx("svg", {
         xmlns: "http://www.w3.org/2000/svg",
@@ -9046,6 +9285,37 @@ const LakewatchDetectionRuleIcon = /*#__PURE__*/ forwardRef((props, forwardedRef
 });
 LakewatchDetectionRuleIcon.displayName = "LakewatchDetectionRuleIcon";
 
+function SvgLakewatchIcon(props) {
+    return /*#__PURE__*/ jsxs("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "1em",
+        height: "1em",
+        fill: "none",
+        viewBox: "0 0 16 16",
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                fill: "currentColor",
+                d: "M10.726 5.704c.326.712.51 1.504.51 2.338l-.009.289a5.6 5.6 0 0 1-.5 2.045l-1.182-.8a4.2 4.2 0 0 0-.001-3.072z"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                fill: "currentColor",
+                fillRule: "evenodd",
+                d: "M14.393.337c.679-.46 1.607.015 1.607.822v13.765l-.01.147c-.105.715-.96 1.105-1.597.675l-5.108-3.454a5.6 5.6 0 0 1-3.668 1.368l-.289-.008a5.619 5.619 0 0 1 .29-11.228c1.4 0 2.678.514 3.661 1.362zm-6.82 6.29a1.7 1.7 0 0 0-.002 2.817l7.029 4.752V1.886zM5.616 3.825a4.217 4.217 0 1 0 0 8.435c.915 0 1.76-.295 2.451-.79l-1.28-.867C5.024 9.412 4.97 6.86 6.623 5.585l.166-.12 1.273-.859a4.2 4.2 0 0 0-2.446-.781",
+                clipRule: "evenodd"
+            })
+        ]
+    });
+}
+const LakewatchIcon = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    return /*#__PURE__*/ jsx(Icon, {
+        ref: forwardedRef,
+        ...props,
+        component: SvgLakewatchIcon
+    });
+});
+LakewatchIcon.displayName = "LakewatchIcon";
+
 function SvgLakewatchParserIcon(props) {
     return /*#__PURE__*/ jsxs("svg", {
         xmlns: "http://www.w3.org/2000/svg",
@@ -10019,6 +10289,68 @@ const MenuIcon = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
 });
 MenuIcon.displayName = "MenuIcon";
 
+function SvgMicrophoneIcon(props) {
+    return /*#__PURE__*/ jsxs("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "1em",
+        height: "1em",
+        fill: "none",
+        viewBox: "0 0 16 16",
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                fill: "currentColor",
+                d: "M3.5 8a4.5 4.5 0 1 0 9 0H14c0 3.06-2.29 5.582-5.25 5.951V16h-1.5v-2.049A6 6 0 0 1 2 8z"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                fill: "currentColor",
+                fillRule: "evenodd",
+                d: "M8 0a3 3 0 0 1 3 3v5a3 3 0 0 1-6 0V3a3 3 0 0 1 3-3m0 1.5A1.5 1.5 0 0 0 6.5 3v5a1.5 1.5 0 1 0 3 0V3A1.5 1.5 0 0 0 8 1.5",
+                clipRule: "evenodd"
+            })
+        ]
+    });
+}
+const MicrophoneIcon = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    return /*#__PURE__*/ jsx(Icon, {
+        ref: forwardedRef,
+        ...props,
+        component: SvgMicrophoneIcon
+    });
+});
+MicrophoneIcon.displayName = "MicrophoneIcon";
+
+function SvgMicrophoneOffIcon(props) {
+    return /*#__PURE__*/ jsxs("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "1em",
+        height: "1em",
+        fill: "none",
+        viewBox: "0 0 16 16",
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                fill: "currentColor",
+                fillRule: "evenodd",
+                d: "m15.03 13.97-1.06 1.06-2.293-2.293a5.97 5.97 0 0 1-2.927 1.214V16h-1.5v-2.049A6 6 0 0 1 2 8h1.5a4.5 4.5 0 0 0 7.105 3.666l-1.084-1.084A2.97 2.97 0 0 1 8 11a3 3 0 0 1-3-3V6.06L.97 2.03 2.03.97zM6.5 8a1.5 1.5 0 0 0 1.888 1.448L6.5 7.561z",
+                clipRule: "evenodd"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                fill: "currentColor",
+                d: "M14 8c0 .864-.184 1.685-.513 2.427L12.32 9.259c.117-.4.181-.822.181-1.259zM8 0a3 3 0 0 1 3 3v4.94l-1.5-1.5V3a1.5 1.5 0 1 0-3 0v.44L5.144 2.082A3 3 0 0 1 8 0"
+            })
+        ]
+    });
+}
+const MicrophoneOffIcon = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    return /*#__PURE__*/ jsx(Icon, {
+        ref: forwardedRef,
+        ...props,
+        component: SvgMicrophoneOffIcon
+    });
+});
+MicrophoneOffIcon.displayName = "MicrophoneOffIcon";
+
 function SvgMinusCircleFillIcon(props) {
     return /*#__PURE__*/ jsx("svg", {
         xmlns: "http://www.w3.org/2000/svg",
@@ -10609,6 +10941,35 @@ const OntologyIcon = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
 });
 OntologyIcon.displayName = "OntologyIcon";
 
+function SvgOperatorIcon(props) {
+    return /*#__PURE__*/ jsxs("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "1em",
+        height: "1em",
+        fill: "none",
+        viewBox: "0 0 16 16",
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                fill: "currentColor",
+                d: "M12.75 11.25H15v1.5h-2.25V15h-1.5v-2.25H9v-1.5h2.25V9h1.5z"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                fill: "currentColor",
+                d: "M15.25 2a.75.75 0 0 1 .75.75V8.5h-1.5v-5h-13v9h6V14H.75a.75.75 0 0 1-.75-.75V2.75A.75.75 0 0 1 .75 2z"
+            })
+        ]
+    });
+}
+const OperatorIcon = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    return /*#__PURE__*/ jsx(Icon, {
+        ref: forwardedRef,
+        ...props,
+        component: SvgOperatorIcon
+    });
+});
+OperatorIcon.displayName = "OperatorIcon";
+
 function SvgOverflowHorizontalIcon(props) {
     return /*#__PURE__*/ jsx("svg", {
         xmlns: "http://www.w3.org/2000/svg",
@@ -15641,6 +16002,29 @@ const VisibleOffIcon = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
 });
 VisibleOffIcon.displayName = "VisibleOffIcon";
 
+function SvgVoiceModeIcon(props) {
+    return /*#__PURE__*/ jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "1em",
+        height: "1em",
+        fill: "none",
+        viewBox: "0 0 16 16",
+        ...props,
+        children: /*#__PURE__*/ jsx("path", {
+            fill: "currentColor",
+            d: "M8.5 15H7V1h1.5zM5.5 12H4V4h1.5zM14.5 12H13V4h1.5zM2.5 10H1V6h1.5zM11.5 10H10V6h1.5z"
+        })
+    });
+}
+const VoiceModeIcon = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    return /*#__PURE__*/ jsx(Icon, {
+        ref: forwardedRef,
+        ...props,
+        component: SvgVoiceModeIcon
+    });
+});
+VoiceModeIcon.displayName = "VoiceModeIcon";
+
 function SvgWarningFillIcon(props) {
     return /*#__PURE__*/ jsx("svg", {
         xmlns: "http://www.w3.org/2000/svg",
@@ -17145,7 +17529,7 @@ var ShapeTokens = /*#__PURE__*/ function(ShapeTokens) {
     ShapeTokens["ACTION_BORDER_RADIUS"] = "--action-border-radius";
     ShapeTokens["INPUT_BORDER_RADIUS"] = "--input-border-radius";
     ShapeTokens["LIST_ITEM_BORDER_RADIUS"] = "--list-item-border-radius";
-    ShapeTokens["POPOVER_BORDER_RADIUS"] = "--popover-border-radius";
+    ShapeTokens["POPUP_BORDER_RADIUS"] = "--popup-border-radius";
     ShapeTokens["INFO_CONTAINER_BORDER_RADIUS"] = "--info-container-border-radius";
     return ShapeTokens;
 }({});
@@ -17153,10 +17537,11 @@ var ShapeTokens = /*#__PURE__*/ function(ShapeTokens) {
 const token = (token, fallback)=>`var(${token}, ${typeof fallback === 'number' ? `${fallback}px` : fallback})`;
 
 const SMALL_BUTTON_HEIGHT$2 = 24;
+const ICON_SELECTOR$1 = `:is(${getIconClassName()})`;
 // Hoisted to module level so the default reference is stable across renders and instances.
 // Without this, the default `analyticsEvents = [...]` literal would be a fresh array on every
 // render, propagating ref-instability into useDesignSystemEventComponentCallbacks.
-const DEFAULT_ANALYTICS_EVENTS$6 = [
+const DEFAULT_ANALYTICS_EVENTS$7 = [
     DesignSystemEventProviderAnalyticsEventTypes.OnClick,
     DesignSystemEventProviderAnalyticsEventTypes.OnView
 ];
@@ -17166,7 +17551,7 @@ const getMemoizedLoadingSpinnerCss = memoize((iconOnly, forceIconStyles)=>({
         color: 'inherit !important',
         pointerEvents: 'none',
         ...!iconOnly && !forceIconStyles && {
-            '.anticon': {
+            [getIconClassName()]: {
                 verticalAlign: '-0.2em'
             }
         },
@@ -17196,7 +17581,6 @@ function getEndIconClsName(theme) {
     return `${theme.general.iconfontCssPrefix}-btn-end-icon`;
 }
 const getButtonEmotionStyles = ({ theme, classNamePrefix, loading, withIcon, onlyIcon, isAnchor, enableAnimation, size, type, useFocusPseudoClass, forceIconStyles, danger })=>{
-    const clsIcon = `.${theme.general.iconfontCssPrefix}`;
     const clsEndIcon = `.${getEndIconClsName(theme)}`;
     const clsLoadingIcon = `.${classNamePrefix}-btn-loading-icon`;
     const clsIconOnly = `.${classNamePrefix}-btn-icon-only`;
@@ -17230,7 +17614,7 @@ const getButtonEmotionStyles = ({ theme, classNamePrefix, loading, withIcon, onl
     const inactiveIconCss = {
         color: theme.colors.textSecondary
     };
-    const endIconCssSelector = `span > ${clsEndIcon} > ${clsIcon}`;
+    const endIconCssSelector = `span > ${clsEndIcon} > ${ICON_SELECTOR$1}`;
     const styles = {
         lineHeight: theme.typography.lineHeightBase,
         boxShadow: 'none',
@@ -17314,7 +17698,7 @@ const getButtonEmotionStyles = ({ theme, classNamePrefix, loading, withIcon, onl
                 }
             }
         },
-        [`&[disabled] > ${clsIcon}`]: {
+        [`&[disabled] > ${ICON_SELECTOR$1}`]: {
             color: 'inherit !important'
         },
         [clsLoadingIcon]: {
@@ -17340,7 +17724,7 @@ const getButtonEmotionStyles = ({ theme, classNamePrefix, loading, withIcon, onl
                     animationDuration: '1s !important'
                 }
             },
-            [`& > ${clsLoadingIcon} .anticon`]: {
+            [`& > ${clsLoadingIcon} ${ICON_SELECTOR$1}`]: {
                 paddingRight: 0
             },
             [`> :not(${clsLoadingIcon})`]: {
@@ -17354,17 +17738,17 @@ const getButtonEmotionStyles = ({ theme, classNamePrefix, loading, withIcon, onl
             }
         },
         // Icon styles
-        [`> ${clsIcon} + span, > span + ${clsIcon}`]: {
+        [`> ${ICON_SELECTOR$1} + span, > span + ${ICON_SELECTOR$1}`]: {
             marginRight: 0,
             marginLeft: theme.spacing.xs
         },
-        [`> ${clsIcon}`]: iconCss,
+        [`> ${ICON_SELECTOR$1}`]: iconCss,
         [`> ${endIconCssSelector}`]: {
             ...iconCss,
             marginLeft: size === 'small' ? theme.spacing.xs : theme.spacing.sm
         },
         ...!type && !danger && {
-            [`&:enabled:not(:hover):not(:active) > ${clsIcon}`]: inactiveIconCss
+            [`&:enabled:not(:hover):not(:active) > ${ICON_SELECTOR$1}`]: inactiveIconCss
         },
         ...!type && !danger && {
             [`&:enabled:not(:hover):not(:active) > ${endIconCssSelector}, &[href]:not(:disabled):not(:hover):not(:active) > ${endIconCssSelector}`]: inactiveIconCss
@@ -17389,13 +17773,13 @@ const getButtonEmotionStyles = ({ theme, classNamePrefix, loading, withIcon, onl
                         color: theme.colors.actionDangerDefaultTextPress
                     }
                 },
-                '&:hover > .anticon': {
+                [`&:hover > ${ICON_SELECTOR$1}`]: {
                     color: tertiaryColors['&:hover'].color,
                     ...danger && {
                         color: theme.colors.actionDangerDefaultTextHover
                     }
                 },
-                '&:active > .anticon': {
+                [`&:active > ${ICON_SELECTOR$1}`]: {
                     color: tertiaryColors['&:active'].color,
                     ...danger && {
                         color: theme.colors.actionDangerDefaultTextPress
@@ -17407,7 +17791,7 @@ const getButtonEmotionStyles = ({ theme, classNamePrefix, loading, withIcon, onl
                     }
                 }
             },
-            [`&:enabled:not(${classLink}) > .anticon`]: {
+            [`&:enabled:not(${classLink}) > ${ICON_SELECTOR$1}`]: {
                 color: theme.colors.textSecondary,
                 ...danger && {
                     color: theme.colors.actionDangerDefaultTextDefault
@@ -17462,7 +17846,7 @@ const getButtonEmotionStyles = ({ theme, classNamePrefix, loading, withIcon, onl
                 height: theme.general.heightSm / 2,
                 width: theme.general.heightSm / 2
             },
-            [`& > ${clsLoadingIcon} .anticon`]: {
+            [`& > ${clsLoadingIcon} ${ICON_SELECTOR$1}`]: {
                 // left: `calc(50% - 6px)!important`,
                 height: theme.general.heightSm / 2,
                 width: theme.general.heightSm / 2,
@@ -17484,12 +17868,12 @@ const getButtonEmotionStyles = ({ theme, classNamePrefix, loading, withIcon, onl
     const importantTypeStyles = importantify(typeStyles);
     return /*#__PURE__*/ css(importantStyles, importantTypeStyles);
 };
-const Button$1 = /* #__PURE__ */ (()=>{
+const AntDButtonInternal = /* #__PURE__ */ (()=>{
     const Button = /*#__PURE__*/ forwardRef(function Button(// Keep size out of props passed to AntD to make deprecation and eventual removal have 0 impact
     { children, size, type, loading: loadingProp, loadingDescription, endIcon, onClick, dangerouslySetForceIconStyles, dangerouslyUseFocusPseudoClass, dangerouslyAppendWrapperCss, componentId, analyticsEvents, shouldStartInteraction, ...props }, ref) {
         const formContext = useFormContext();
         const { theme, classNamePrefix } = useDesignSystemTheme();
-        const memoizedAnalyticsEvents = analyticsEvents ?? DEFAULT_ANALYTICS_EVENTS$6;
+        const memoizedAnalyticsEvents = analyticsEvents ?? DEFAULT_ANALYTICS_EVENTS$7;
         const eventContext = useDesignSystemEventComponentCallbacks({
             componentType: DesignSystemEventProviderComponentTypes.Button,
             componentId,
@@ -17550,7 +17934,7 @@ const Button$1 = /* #__PURE__ */ (()=>{
             css: getMemoizedLoadingSpinnerCss(iconOnly, Boolean(dangerouslySetForceIconStyles))
         }) : null;
         return /*#__PURE__*/ jsx(DesignSystemAntDConfigProvider, {
-            children: /*#__PURE__*/ jsx(Button$2, {
+            children: /*#__PURE__*/ jsx(Button$1, {
                 ...addDebugOutlineIfEnabled(),
                 ...props,
                 css: getMemoizedButtonEmotionStyles({
@@ -17608,6 +17992,214 @@ const Button$1 = /* #__PURE__ */ (()=>{
     return Button;
 })();
 
+// Stable module-level default so useDesignSystemEventComponentCallbacks isn't fed a fresh array each render.
+const DEFAULT_ANALYTICS_EVENTS$6 = [
+    DesignSystemEventProviderAnalyticsEventTypes.OnClick,
+    DesignSystemEventProviderAnalyticsEventTypes.OnView
+];
+// href renders a real <a>, so the forwarded ref can be either element — the public Button gate keeps
+// the HTMLButtonElement type and widening to the union here is assignable to it.
+const NativeButton = /*#__PURE__*/ forwardRef(function NativeButton({ type, size, danger, block, icon, endIcon, href, htmlType = 'button', loading: loadingProp, loadingDescription, disabled, children, className, style, onClick, componentId, analyticsEvents, shouldStartInteraction, dangerouslyAppendWrapperCss, dangerouslyUseFocusPseudoClass, dangerouslySetForceIconStyles, // Pull aria-disabled out of the passthrough so the value we compute below wins over {...props}
+// rather than being clobbered by it — while still honoring what the caller passed (see below).
+'aria-disabled': ariaDisabledProp, ...props }, ref) {
+    const formContext = useFormContext();
+    const memoizedAnalyticsEvents = analyticsEvents ?? DEFAULT_ANALYTICS_EVENTS$6;
+    const eventContext = useDesignSystemEventComponentCallbacks({
+        componentType: DesignSystemEventProviderComponentTypes.Button,
+        componentId,
+        analyticsEvents: memoizedAnalyticsEvents,
+        shouldStartInteraction,
+        // A submit button is not the interaction subject — the form submission is.
+        isInteractionSubject: !(htmlType === 'submit' && formContext.componentId)
+    });
+    const { elementRef: buttonRef } = useNotifyOnFirstView({
+        onView: eventContext.onView
+    });
+    // Forward the ref to whichever element actually renders (button or anchor) — no HTMLButtonElement cast.
+    const mergedRef = useMergeRefs([
+        ref,
+        buttonRef
+    ]);
+    const loading = Boolean(loadingProp ?? (htmlType === 'submit' && formContext.isSubmitting));
+    const iconOnly = Boolean((icon || endIcon) && !children);
+    // A content-less button (no icon, no end icon, no children) draws no visible box; consumers use
+    // such empty (usually disabled) buttons as layout spacers (e.g. an invoice table's expand column).
+    // Mark it so the styles stay borderless/transparent; `.db-btn-empty` only zeroes bg/border, so a
+    // loading spinner still renders.
+    const isEmpty = !icon && !endIcon && !children;
+    const forceIconStyles = Boolean(dangerouslySetForceIconStyles);
+    // Render a real <a> whenever href is set and enabled (including while loading — the loading click
+    // is neutralized in handleClick); a disabled link falls back to a <button>.
+    const renderAnchor = Boolean(href) && !disabled;
+    const handleClick = useCallback((event)=>{
+        if (loading) {
+            // Skip the React click handlers while loading. For a link, also block the browser's default
+            // navigation so a loading link is inert (parity with the legacy button, where AntD
+            // preventDefaults loading clicks). A loading `htmlType="submit"` button intentionally still
+            // submits its form (forms rely on this), so only the anchor's default is neutralized —
+            // `preventDefault` for the submit case would suppress that submission.
+            if (renderAnchor) {
+                event.preventDefault();
+            }
+            return;
+        }
+        eventContext.onClick(event);
+        if (htmlType === 'submit' && formContext.formRef?.current) {
+            event.preventDefault();
+            formContext.formRef.current.requestSubmit();
+        }
+        onClick?.(event);
+    }, [
+        loading,
+        renderAnchor,
+        htmlType,
+        formContext.formRef,
+        eventContext,
+        onClick
+    ]);
+    // Inherits the `--db-color-*` scope (theme-class + consumer override) from the DesignSystemProvider
+    // wrapper; no self-scoped theme class, so a consumer override set on that wrapper reaches here.
+    const rootClassName = classnames('db-btn', {
+        'db-btn-primary': type === 'primary',
+        'db-btn-link': type === 'link',
+        'db-btn-tertiary': type === 'tertiary',
+        // Positive marker for the default (secondary) variant, i.e. no `type` at all. The icon-greying
+        // rules key on this rather than negating the variant classes: a Radix `*.Trigger asChild` can
+        // inject a bogus `type="button"` onto the Button, which is not a real variant. Gating icon
+        // greying on `!type` means a truthy `type` (even "button") leaves the glyph at the text color
+        // (an injected `type` is truthy → not default).
+        'db-btn-default': !type,
+        'db-btn-danger': Boolean(danger),
+        'db-btn-small': size === 'small',
+        'db-btn-icon-only': iconOnly,
+        'db-btn-empty': isEmpty,
+        'db-btn-force-icon': forceIconStyles,
+        'db-btn-block': Boolean(block),
+        'db-btn-loading': loading,
+        // While loading with a leading icon, reserve the icon's width so the button doesn't shrink.
+        'db-btn-loading-with-icon': loading && Boolean(icon),
+        'db-btn-use-focus-pseudo-class': Boolean(dangerouslyUseFocusPseudoClass)
+    }, className);
+    // Expose loading (and disabled) as disabled to assistive tech without the disabled-grey visuals a
+    // real `disabled` attribute would force — the button keeps its variant color + spinner while loading.
+    // Also honor a caller-provided aria-disabled (the "soft-disable" pattern: the button stays
+    // focusable + clickable, the caller guards its own onClick so a tooltip still fires, and the
+    // caller's `&[aria-disabled="true"]` styling applies). An explicit `false` is preserved, since
+    // callers/tests assert `aria-disabled="false"` on the enabled state.
+    const ariaDisabled = disabled || loading || ariaDisabledProp === true ? true : ariaDisabledProp;
+    // Render the leading icon directly (not wrapped) so it stays the button's direct `.anticon` child,
+    // so DOM-structure selectors (e.g. the Table icon-only row-action reveal,
+    // `button:has(> span.anticon[role="img"]:only-child)`) keep matching. Same for the loading spinner.
+    // The CSS icon rules target `.db-btn > .anticon` so they only style real icon glyphs — a non-glyph
+    // element passed as `icon` (e.g. a Spinner) keeps its own sizing — and out-specify AntD's global
+    // `.anticon` base rule.
+    const leading = loading ? /*#__PURE__*/ jsx(Spinner, {
+        className: "db-btn-spinner",
+        animationDuration: 1,
+        inheritColor: true,
+        label: "loading",
+        "aria-label": "loading",
+        // oxlint-disable-next-line @databricks/no-dynamic-property-value -- DUBOIS INTERNAL EXEMPTION exempt:b7289367-ddfb-4cf6-b8d1-22b27cdff2d2
+        loadingDescription: loadingDescription ?? componentId
+    }) : icon ? icon : null;
+    let content = null;
+    if (children !== undefined && children !== null && children !== false) {
+        // Hide the content inline while loading (not just via the CSS class) so it leaves the
+        // accessibility tree in every environment — jsdom doesn't apply stylesheet CSS, so the button's
+        // accessible name stays "loading" rather than "loading <label>".
+        content = /*#__PURE__*/ jsxs("span", {
+            className: "db-btn-content",
+            style: {
+                visibility: loading ? 'hidden' : undefined,
+                ...dangerouslyAppendWrapperCss
+            },
+            children: [
+                children,
+                endIcon && /*#__PURE__*/ jsx("span", {
+                    className: "db-btn-end-icon",
+                    children: endIcon
+                })
+            ]
+        });
+    }
+    // endIcon renders only alongside children, matching the legacy button.
+    // Render a real anchor when it acts as an enabled, non-loading link; otherwise a native button.
+    if (renderAnchor) {
+        return /*#__PURE__*/ jsxs("a", {
+            ...addDebugOutlineIfEnabled(),
+            ...props,
+            ref: mergedRef,
+            href: href,
+            "aria-disabled": ariaDisabled,
+            className: rootClassName,
+            style: style,
+            onClick: handleClick,
+            ...eventContext.dataComponentProps,
+            children: [
+                leading,
+                content
+            ]
+        });
+    }
+    return /*#__PURE__*/ jsxs("button", {
+        ...addDebugOutlineIfEnabled(),
+        ...props,
+        ref: mergedRef,
+        type: htmlType,
+        disabled: disabled,
+        "aria-disabled": ariaDisabled,
+        className: rootClassName,
+        style: style,
+        onClick: handleClick,
+        ...eventContext.dataComponentProps,
+        children: [
+            leading,
+            content
+        ]
+    });
+});
+
+// Public Button selects between the native (plain-DOM, token-driven) implementation and the legacy
+// implementation on the `databricks.fe.designsystem.useNativeButton` server-side flag, default off.
+// serverSideSafe resolves synchronously at render, so the choice is stable from first paint.
+const Button = /* #__PURE__ */ (()=>{
+    const Button = /*#__PURE__*/ forwardRef(function Button({ useNativeButtonOverride, ...props }, ref) {
+        const useNativeButton = useNativeButtonOverride ?? serverSideSafe('databricks.fe.designsystem.useNativeButton', false);
+        if (useNativeButton) {
+            return /*#__PURE__*/ jsx(NativeButton, {
+                ...props,
+                ref: ref
+            });
+        }
+        return /*#__PURE__*/ jsx(AntDButtonInternal, {
+            ...props,
+            ref: ref
+        });
+    });
+    // The default path is the legacy Ant-backed button, so keep the marker Ant wrappers (e.g. Tooltip)
+    // read to identify it — preserving pre-split behavior while the flag is off.
+    // See: https://github.com/ant-design/ant-design/blob/6dd39c1f89b4d6632e6ed022ff1bc275ca1e0f1f/components/button/button.tsx#L291
+    Button.__ANT_BUTTON = true;
+    return Button;
+})();
+
+/**
+ * Emotion selector that matches a Du Bois button by BOTH its legacy AntD-prefixed class
+ * (`.<clsNamePrefix>-btn…`) and the NativeButton class (`.db-btn…`). Style overrides keyed off the
+ * button class must match `.db-btn` too, so they survive the migration off the AntD-prefixed
+ * `Button` onto `NativeButton`.
+ *
+ * @param clsNamePrefix theme class prefix, e.g. `classNamePrefix` from `useDesignSystemTheme()`.
+ * @param suffix raw selector fragment appended after `-btn` on each class — e.g. `'-primary'`,
+ *   `'-icon-only'`, `':first-child'`, `'[disabled]'`, `' > span'`, or `''` for none. Include the
+ *   leading `-` yourself.
+ * @param prefix combinator/anchor prepended before each class — pass it explicitly so the call reads
+ *   at a glance: `'&'` for a self-target selector (`&.…-btn`, when the `css` sits on the Button
+ *   element itself), `''` for a bare descendant (`.…-btn`), `'& > '` for a direct child, `'& '` for
+ *   any descendant, or a fuller container prefix (e.g. `` `.${prefix}-dropdown-button > ` ``) when the
+ *   button is nested deeper.
+ */ const getBtnClassName = (clsNamePrefix, suffix, prefix)=>`${prefix}.${clsNamePrefix}-btn${suffix}, ${prefix}.db-btn${suffix}`;
+
 const DRAWER_ZINDEX_OVERLAY_OFFSET = 1;
 const DRAWER_ZINDEX_CONTENT_OFFSET = DRAWER_ZINDEX_OVERLAY_OFFSET + 1;
 /** Whether the surrounding subtree is inside an open Drawer. */ const DrawerContext = /*#__PURE__*/ createContext({
@@ -17710,18 +18302,18 @@ const getLinkStyles = (theme, clsPrefix)=>{
         [`&${classTypography}, &${classTypography}:focus`]: {
             color: theme.colors.actionTertiaryTextDefault
         },
-        [`&${classTypography}:hover, &${classTypography}:hover .anticon`]: {
+        [`&${classTypography}:hover, &${classTypography}:hover :is(${getIconClassName()})`]: {
             color: theme.colors.actionTertiaryTextHover,
             textDecoration: 'underline'
         },
-        [`&${classTypography}:active, &${classTypography}:active .anticon`]: {
+        [`&${classTypography}:active, &${classTypography}:active :is(${getIconClassName()})`]: {
             color: theme.colors.actionTertiaryTextPress,
             textDecoration: 'underline'
         },
         [`&${classTypography}:focus-visible`]: {
             textDecoration: 'underline'
         },
-        '.anticon': {
+        [getIconClassName()]: {
             fontSize: 12,
             verticalAlign: 'baseline'
         },
@@ -17730,19 +18322,19 @@ const getLinkStyles = (theme, clsPrefix)=>{
         [`.${clsPrefix}-tooltip-inner a&${classTypography}`]: {
             [`&, :focus`]: {
                 color: theme.colors.blue500,
-                '.anticon': {
+                [getIconClassName()]: {
                     color: theme.colors.blue500
                 }
             },
             ':active': {
                 color: theme.colors.blue500,
-                '.anticon': {
+                [getIconClassName()]: {
                     color: theme.colors.blue500
                 }
             },
             ':hover': {
                 color: theme.colors.blue400,
-                '.anticon': {
+                [getIconClassName()]: {
                     color: theme.colors.blue400
                 }
             }
@@ -17778,7 +18370,7 @@ const getEllipsisIconStyles = (useNewIcons)=>{
     };
     return /*#__PURE__*/ css(styles);
 };
-const Link$1 = /*#__PURE__*/ forwardRef(function Link({ dangerouslySetAntdProps, componentId, analyticsEvents, onClick, ...props }, ref) {
+const Link = /*#__PURE__*/ forwardRef(function Link({ dangerouslySetAntdProps, componentId, analyticsEvents, onClick, ...props }, ref) {
     const { children, openInNewTab, dangerouslyHideNewTabIcon, ellipsis, ...restProps } = props;
     const { theme, classNamePrefix } = useDesignSystemTheme();
     const memoizedAnalyticsEvents = useMemo(()=>analyticsEvents ?? [
@@ -17860,10 +18452,10 @@ function getParagraphEmotionStyles(theme, clsPrefix, props) {
             lineHeight: theme.typography.lineHeightBase,
             color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
         },
-        '& .anticon': {
+        [`& :is(${getIconClassName()})`]: {
             verticalAlign: 'text-bottom'
         },
-        [`& .${clsPrefix}-btn-link`]: {
+        [`${getBtnClassName(clsPrefix, '-link', '& ')}, ${getBtnClassName(clsPrefix, '-tertiary', '& ')}`]: {
             verticalAlign: 'baseline !important'
         }
     }, props.disabled && {
@@ -17941,7 +18533,7 @@ function getTextEmotionStyles(theme, props) {
                     return {
                         fontSize: theme.typography.fontSizeXxl,
                         lineHeight: theme.typography.lineHeightXxl,
-                        '& .anticon': {
+                        [`& :is(${getIconClassName()})`]: {
                             lineHeight: theme.typography.lineHeightXxl,
                             verticalAlign: 'middle'
                         }
@@ -17950,7 +18542,7 @@ function getTextEmotionStyles(theme, props) {
                     return {
                         fontSize: theme.typography.fontSizeXl,
                         lineHeight: theme.typography.lineHeightXl,
-                        '& .anticon': {
+                        [`& :is(${getIconClassName()})`]: {
                             lineHeight: theme.typography.lineHeightXl,
                             verticalAlign: 'middle'
                         }
@@ -17959,7 +18551,7 @@ function getTextEmotionStyles(theme, props) {
                     return {
                         fontSize: theme.typography.fontSizeLg,
                         lineHeight: theme.typography.lineHeightLg,
-                        '& .anticon': {
+                        [`& :is(${getIconClassName()})`]: {
                             lineHeight: theme.typography.lineHeightLg,
                             verticalAlign: 'middle'
                         }
@@ -17968,7 +18560,7 @@ function getTextEmotionStyles(theme, props) {
                     return {
                         fontSize: theme.typography.fontSizeSm,
                         lineHeight: theme.typography.lineHeightSm,
-                        '& .anticon': {
+                        [`& :is(${getIconClassName()})`]: {
                             verticalAlign: '-0.219em'
                         }
                     };
@@ -18084,7 +18676,7 @@ function getLevelStyles(theme, props) {
             lineHeight: theme.typography[tokens.lineHeight],
             fontWeight: theme.typography.typographyBoldFontWeight
         },
-        '& > .anticon': {
+        [`& > :is(${getIconClassName()})`]: {
             lineHeight: theme.typography[tokens.lineHeight]
         }
     });
@@ -18094,7 +18686,7 @@ function getTitleEmotionStyles(theme, props) {
         '&&': {
             color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
         },
-        '& > .anticon': {
+        [`& > :is(${getIconClassName()})`]: {
             verticalAlign: 'middle'
         }
     }, props.withoutMargins && {
@@ -18170,7 +18762,7 @@ const Typography = /* #__PURE__ */ (()=>{
     Typography.Text = Text$1;
     Typography.Title = Title$1;
     Typography.Paragraph = Paragraph$2;
-    Typography.Link = Link$1;
+    Typography.Link = Link;
     Typography.Hint = Hint$2;
     Typography.Truncate = Truncate;
     Typography.TextMiddleElide = TextMiddleElide;
@@ -18210,7 +18802,9 @@ const wrapperStyles = /*#__PURE__*/ css({
     width: '100%',
     height: '100%'
 });
-const overlayStyles = (theme, zIndex, maskStyle)=>/*#__PURE__*/ css({
+const overlayStyles = (theme, zIndex, maskStyle)=>// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore [FEINF-3177] TODO: fix to work with React 18 types
+    /*#__PURE__*/ css({
         position: 'fixed',
         inset: 0,
         backgroundColor: theme.colors.overlayOverlay,
@@ -18223,6 +18817,8 @@ const overlayStyles = (theme, zIndex, maskStyle)=>/*#__PURE__*/ css({
     });
 const modalContentStyles = (theme, maxedOutHeight)=>{
     const MODAL_PADDING = theme.spacing.lg;
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore [FEINF-3177] TODO: fix to work with React 18 types
     return /*#__PURE__*/ css({
         backgroundColor: theme.colors.backgroundPrimary,
         maxHeight: '90vh',
@@ -18323,7 +18919,7 @@ const modalFooterStyles = (theme, prefixCls, hasCustomFooter)=>{
         paddingLeft: MODAL_PADDING,
         paddingRight: MODAL_PADDING,
         marginTop: 'auto',
-        [`.${prefixCls}-dropdown-button > .${prefixCls}-btn:nth-of-type(2)`]: {
+        [getBtnClassName(prefixCls, ':nth-of-type(2)', `.${prefixCls}-dropdown-button > `)]: {
             marginLeft: -1
         }
     });
@@ -18351,7 +18947,7 @@ function DefaultFooter({ componentId, onOk, onCancel, confirmLoading, okText, ca
     const handleOk = (e)=>onOk?.(e);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            cancelText && /*#__PURE__*/ jsx(Button$1, {
+            cancelText && /*#__PURE__*/ jsx(Button, {
                 componentId: componentId ? `${componentId}.footer.cancel` : 'modal.close',
                 onClick: handleCancel,
                 autoFocus: autoFocusButton === 'cancel',
@@ -18360,7 +18956,7 @@ function DefaultFooter({ componentId, onOk, onCancel, confirmLoading, okText, ca
                 ...cancelButtonProps,
                 children: cancelText
             }),
-            okText && /*#__PURE__*/ jsx(Button$1, {
+            okText && /*#__PURE__*/ jsx(Button, {
                 componentId: componentId ? `${componentId}.footer.ok` : 'modal.ok',
                 loading: confirmLoading,
                 onClick: handleOk,
@@ -18678,7 +19274,7 @@ function ModalInternal({ componentId, analyticsEvents = [
                 }),
                 dangerouslySetAntdProps?.closable === undefined || dangerouslySetAntdProps?.closable ? /*#__PURE__*/ jsx(DialogPrimitive.Close, {
                     asChild: true,
-                    children: /*#__PURE__*/ jsx(Button$1, {
+                    children: /*#__PURE__*/ jsx(Button, {
                         icon: dangerouslySetAntdProps?.closeIcon ?? /*#__PURE__*/ jsx(CloseIcon, {
                             ref: elementRef
                         }),
@@ -18778,14 +19374,14 @@ function DangerModal(props) {
         shouldStartInteraction: props.shouldStartInteraction,
         title: titleComp,
         footer: [
-            /*#__PURE__*/ jsx(Button$1, {
+            /*#__PURE__*/ jsx(Button, {
                 componentId: props.componentId ? `${props.componentId}.danger.footer.cancel` : 'modal.danger.cancel',
                 onClick: onCancel,
                 shouldStartInteraction: props.shouldStartInteraction,
                 ...cancelButtonProps,
                 children: cancelText || 'Cancel'
             }, "cancel"),
-            /*#__PURE__*/ jsx(Button$1, {
+            /*#__PURE__*/ jsx(Button, {
                 componentId: props.componentId ? `${props.componentId}.danger.footer.ok` : 'modal.danger.ok',
                 type: "primary",
                 danger: true,
@@ -18812,7 +19408,7 @@ const Anchor = Popover$1.Anchor; // Behavioral component only
 const DEFAULT_ANALYTICS_EVENTS$5 = [
     DesignSystemEventProviderAnalyticsEventTypes.OnView
 ];
-const Root$b = ({ children, onOpenChange, componentId, analyticsEvents = DEFAULT_ANALYTICS_EVENTS$5, ...props })=>{
+const Root$9 = ({ children, onOpenChange, componentId, analyticsEvents = DEFAULT_ANALYTICS_EVENTS$5, ...props })=>{
     const firstView = useRef(true);
     const eventContext = useDesignSystemEventComponentCallbacks({
         componentType: DesignSystemEventProviderComponentTypes.Popover,
@@ -18899,9 +19495,8 @@ const Close = /*#__PURE__*/ forwardRef(function Close({ children, ...props }, re
     });
 });
 const Arrow$2 = /*#__PURE__*/ forwardRef(function Arrow({ children, ...props }, ref) {
-    const { theme } = useDesignSystemTheme();
     return /*#__PURE__*/ jsx(Popover$1.Arrow, {
-        css: getMemoizedArrowCss(theme),
+        css: arrowStyles,
         ref: ref,
         width: 12,
         height: 6,
@@ -18926,40 +19521,44 @@ const CONSTANTS$1 = {
         return 2;
     }
 };
-const popoverContentStylesResolver = memoize((theme)=>({
-        backgroundColor: theme.colors.backgroundPrimary,
-        color: theme.colors.textPrimary,
+const popoverContentStylesResolver = memoize(// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore [FEINF-3177] TODO: fix to work with React 18 types
+(theme)=>({
+        backgroundColor: 'var(--db-popover-surface)',
+        color: 'var(--db-popover-text)',
         lineHeight: theme.typography.lineHeightBase,
-        border: `1px solid ${theme.colors.border}`,
-        borderRadius: token(ShapeTokens.POPOVER_BORDER_RADIUS, theme.borders.borderRadiusSm),
-        padding: `${theme.spacing.sm}px`,
-        boxShadow: theme.shadows.lg,
+        border: `1px solid var(--db-popover-border)`,
+        borderRadius: 'var(--db-popover-border-radius)',
+        padding: 'var(--db-popover-spacing)',
+        boxShadow: 'var(--db-popover-shadow)',
         zIndex: theme.options.zIndexBase + 30,
         ...getDarkModePortalStyles(theme),
         a: importantify({
-            color: theme.colors.actionTertiaryTextDefault,
+            color: 'var(--db-popover-link-text)',
             '&:hover, &:focus': {
-                color: theme.colors.actionTertiaryTextHover
+                color: 'var(--db-popover-link-text-hover)'
             }
         }),
         '&:focus-visible': {
             outlineStyle: 'solid',
-            outlineWidth: '2px',
+            outlineWidth: 'var(--db-popover-focus-ring-width)',
             outlineOffset: '1px',
-            outlineColor: theme.colors.actionDefaultBorderFocus
+            outlineColor: 'var(--db-popover-focus-ring)'
         }
     }));
 const contentStyles$1 = (theme)=>popoverContentStylesResolver(theme);
-// Module-level cache for the Arrow css. Output depends only on theme.
-const getMemoizedArrowCss = memoize((theme)=>({
-        fill: theme.colors.backgroundPrimary,
-        stroke: theme.colors.borderDecorative,
-        strokeDashoffset: -CONSTANTS$1.arrowBottomLength(),
-        strokeDasharray: CONSTANTS$1.arrowBottomLength() + 2 * CONSTANTS$1.arrowSide(),
-        strokeWidth: CONSTANTS$1.arrowStrokeWidth(),
-        position: 'relative',
-        top: -1
-    }));
+// Fill and stroke read from the popover CSS variables; the rest is fixed geometry, so this no
+// longer depends on the theme. borderDecorative was an alias for border, so the arrow stroke
+// and the content border share --db-popover-border.
+const arrowStyles = {
+    fill: 'var(--db-popover-surface)',
+    stroke: 'var(--db-popover-border)',
+    strokeDashoffset: -CONSTANTS$1.arrowBottomLength(),
+    strokeDasharray: CONSTANTS$1.arrowBottomLength() + 2 * CONSTANTS$1.arrowSide(),
+    strokeWidth: CONSTANTS$1.arrowStrokeWidth(),
+    position: 'relative',
+    top: -1
+};
 
 var Popover = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -18967,7 +19566,7 @@ var Popover = /*#__PURE__*/Object.freeze({
   Arrow: Arrow$2,
   Close: Close,
   Content: Content$7,
-  Root: Root$b,
+  Root: Root$9,
   Trigger: Trigger$5
 });
 
@@ -19030,20 +19629,16 @@ const getTooltipStyles = (theme, clsPrefix)=>{
     // component is used outside of universe alongside a Radix version that still has the underlying bug.
     const dataStateAttr = 'tooltip-data-state';
     const classTypography = `.${clsPrefix}-typography`;
-    const { isDarkMode } = theme;
-    const linkColor = isDarkMode ? theme.colors.blue600 : theme.colors.blue500;
-    const linkActiveColor = isDarkMode ? theme.colors.blue800 : theme.colors.blue300;
-    const linkHoverColor = isDarkMode ? theme.colors.blue700 : theme.colors.blue400;
     return {
         content: {
-            backgroundColor: theme.colors.tooltipBackgroundTooltip,
-            color: theme.colors.tooltipTextTooltip,
-            borderRadius: token(ShapeTokens.POPOVER_BORDER_RADIUS, theme.borders.borderRadiusSm),
-            fontSize: theme.typography.fontSizeMd,
-            padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,
+            backgroundColor: 'var(--db-tooltip-surface)',
+            color: 'var(--db-tooltip-text)',
+            borderRadius: 'var(--db-tooltip-border-radius)',
+            fontSize: 'var(--db-tooltip-font-size)',
+            padding: 'var(--db-tooltip-spacing-vertical) var(--db-tooltip-spacing-horizontal)',
             lineHeight: theme.typography.lineHeightLg,
-            fontWeight: theme.typography.typographyRegularFontWeight,
-            boxShadow: theme.shadows.lg,
+            fontWeight: 'var(--db-tooltip-font-weight)',
+            boxShadow: 'var(--db-tooltip-shadow)',
             wordWrap: 'break-word',
             whiteSpace: 'normal',
             zIndex: theme.options.zIndexBase + 70,
@@ -19062,27 +19657,27 @@ const getTooltipStyles = (theme, clsPrefix)=>{
             },
             [`& a${classTypography}`]: {
                 '&, :focus': {
-                    color: linkColor,
-                    '.anticon': {
-                        color: linkColor
+                    color: 'var(--db-tooltip-link-text)',
+                    [getIconClassName()]: {
+                        color: 'var(--db-tooltip-link-text)'
                     }
                 },
                 ':active': {
-                    color: linkActiveColor,
-                    '.anticon': {
-                        color: linkActiveColor
+                    color: 'var(--db-tooltip-link-text-active)',
+                    [getIconClassName()]: {
+                        color: 'var(--db-tooltip-link-text-active)'
                     }
                 },
                 ':hover': {
-                    color: linkHoverColor,
-                    '.anticon': {
-                        color: linkHoverColor
+                    color: 'var(--db-tooltip-link-text-hover)',
+                    [getIconClassName()]: {
+                        color: 'var(--db-tooltip-link-text-hover)'
                     }
                 }
             }
         },
         arrow: {
-            fill: theme.colors.tooltipBackgroundTooltip,
+            fill: 'var(--db-tooltip-surface)',
             zIndex: theme.options.zIndexBase + 70,
             visibility: 'visible'
         }
@@ -19233,56 +19828,6 @@ const InfoTooltip = ({ content, iconTitle = 'More information', ...props })=>{
     });
 };
 
-const OverflowPopover = ({ items, renderLabel, tooltipText, ariaLabel = 'More items', ...props })=>{
-    const { theme } = useDesignSystemTheme();
-    const [showTooltip, setShowTooltip] = useState(true);
-    const label = `+${items.length}`;
-    let trigger = /*#__PURE__*/ jsx("span", {
-        css: {
-            lineHeight: 0
-        },
-        ...addDebugOutlineIfEnabled(),
-        children: /*#__PURE__*/ jsx(Trigger$5, {
-            asChild: true,
-            children: /*#__PURE__*/ jsx(Button$1, {
-                componentId: "something",
-                type: "link",
-                children: renderLabel ? renderLabel(label) : label
-            })
-        })
-    });
-    if (showTooltip) {
-        trigger = /*#__PURE__*/ jsx(Tooltip, {
-            componentId: "design-system.overflow-popover.tooltip",
-            content: tooltipText || 'See more items',
-            children: trigger
-        });
-    }
-    return /*#__PURE__*/ jsxs(Root$b, {
-        componentId: "codegen_design-system_src_design-system_overflow_overflowpopover.tsx_37",
-        onOpenChange: (open)=>setShowTooltip(!open),
-        children: [
-            trigger,
-            /*#__PURE__*/ jsx(Content$7, {
-                align: "start",
-                "aria-label": ariaLabel,
-                ...props,
-                ...addDebugOutlineIfEnabled(),
-                children: /*#__PURE__*/ jsx("div", {
-                    css: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        gap: theme.spacing.xs
-                    },
-                    children: items.map((item, index)=>/*#__PURE__*/ jsx("div", {
-                            children: item
-                        }, `overflow-${index}`))
-                })
-            })
-        ]
-    });
-};
-
 const { Text, Paragraph: Paragraph$1 } = Typography;
 const BANNER_MIN_HEIGHT = 68;
 // Max height will allow 2 lines of description (3 lines total)
@@ -19401,7 +19946,7 @@ const Banner = (props)=>{
     });
     const actionButton = onAccept && ctaText ? /*#__PURE__*/ jsx("div", {
         css: styles.actionButtonContainer,
-        children: /*#__PURE__*/ jsx(Button$1, {
+        children: /*#__PURE__*/ jsx(Button, {
             componentId: `${componentId}.accept`,
             onClick: onAccept,
             css: styles.actionButton,
@@ -19413,7 +19958,7 @@ const Banner = (props)=>{
     }) : null;
     const close = closable !== false ? /*#__PURE__*/ jsx("div", {
         css: styles.closeIconContainer,
-        children: /*#__PURE__*/ jsx(Button$1, {
+        children: /*#__PURE__*/ jsx(Button, {
             componentId: `${componentId}.close`,
             css: styles.closeButton,
             onClick: ()=>{
@@ -19586,6 +20131,7 @@ const TitleSkeleton = ({ label, seed = '', frameRate = 60, style, level, inline
     });
 };
 
+const ICON_SELECTOR = `:is(${getIconClassName()})`;
 // Class names that can be used to reference children within
 // Should not be used outside of design system
 // TODO: PE-239 Maybe we could add "dangerous" into the names or make them completely random.
@@ -19610,7 +20156,7 @@ const repeatingElementsStyles = {
         paddingRight: 'var(--table-spacing-sm)',
         wordBreak: 'break-word',
         overflow: 'hidden',
-        '& .anticon': {
+        [`& ${ICON_SELECTOR}`]: {
             verticalAlign: 'text-bottom'
         }
     }),
@@ -19705,31 +20251,31 @@ const hideIconButtonRowStyles = /*#__PURE__*/ css({
         transition: 'opacity 0.1s ease !important'
     },
     // Hide by default
-    [`.${hideIconButtonActionCellClassName} button:has(> span.anticon[role="img"]:only-child),
+    [`.${hideIconButtonActionCellClassName} button:has(> span${ICON_SELECTOR}[role="img"]:only-child),
     .${hideIconButtonActionCellClassName} button:has(> i.fa:only-child),
-    .${hideIconButtonActionCellClassName} a:has(> span.anticon[role="img"]:only-child),
+    .${hideIconButtonActionCellClassName} a:has(> span${ICON_SELECTOR}[role="img"]:only-child),
     .${hideIconButtonActionCellClassName} a:has(> i.fa:only-child)`]: {
         opacity: 0,
         transition: 'opacity 0.1s ease !important'
     },
-    [`.${hideIconButtonActionCellClassName} button:focus-visible:has(> span.anticon[role="img"]:only-child),
+    [`.${hideIconButtonActionCellClassName} button:focus-visible:has(> span${ICON_SELECTOR}[role="img"]:only-child),
     .${hideIconButtonActionCellClassName} button:focus-visible:has(> i.fa:only-child),
-    .${hideIconButtonActionCellClassName} a:focus-visible:has(> span.anticon[role="img"]:only-child),
+    .${hideIconButtonActionCellClassName} a:focus-visible:has(> span${ICON_SELECTOR}[role="img"]:only-child),
     .${hideIconButtonActionCellClassName} a:focus-visible:has(> i.fa:only-child)`]: {
         outlineStyle: 'solid !important'
     },
     // Keep visible when actively clicked or when dropdown is open
-    [`&:hover .${hideIconButtonActionCellClassName} button:has(> span.anticon[role="img"]:only-child),
-    .${hideIconButtonActionCellClassName} button:focus-visible:has(> span.anticon[role="img"]:only-child),
+    [`&:hover .${hideIconButtonActionCellClassName} button:has(> span${ICON_SELECTOR}[role="img"]:only-child),
+    .${hideIconButtonActionCellClassName} button:focus-visible:has(> span${ICON_SELECTOR}[role="img"]:only-child),
     &:hover .${hideIconButtonActionCellClassName} button:has(> i.fa:only-child),
     .${hideIconButtonActionCellClassName} button:focus-visible:has(> i.fa:only-child),
-    &:hover .${hideIconButtonActionCellClassName} a:has(> span.anticon[role="img"]:only-child),
-    .${hideIconButtonActionCellClassName} a:focus-visible:has(> span.anticon[role="img"]:only-child),
+    &:hover .${hideIconButtonActionCellClassName} a:has(> span${ICON_SELECTOR}[role="img"]:only-child),
+    .${hideIconButtonActionCellClassName} a:focus-visible:has(> span${ICON_SELECTOR}[role="img"]:only-child),
     &:hover .${hideIconButtonActionCellClassName} a:has(> i.fa:only-child),
     .${hideIconButtonActionCellClassName} a:focus-visible:has(> i.fa:only-child)
-    .${hideIconButtonActionCellClassName} div[aria-expanded="true"] > button:has(span.anticon[role="img"]:only-child),
+    .${hideIconButtonActionCellClassName} div[aria-expanded="true"] > button:has(span${ICON_SELECTOR}[role="img"]:only-child),
     .${hideIconButtonActionCellClassName} div[aria-expanded="true"] > button:has(i.fa:only-child),
-    .${hideIconButtonActionCellClassName} button[aria-expanded="true"]:has(span.anticon[role="img"]:only-child),
+    .${hideIconButtonActionCellClassName} button[aria-expanded="true"]:has(span${ICON_SELECTOR}[role="img"]:only-child),
     .${hideIconButtonActionCellClassName} button[aria-expanded="true"]:has(i.fa:only-child),`]: {
         opacity: 1
     }
@@ -20051,6 +20597,8 @@ const getWrapperStyle = ({ clsPrefix, theme, wrapperStyle = {} })=>{
         },
         ...wrapperStyle
     };
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore [FEINF-3177] TODO: fix to work with React 18 types
     return /*#__PURE__*/ css(styles);
 };
 const AntDCheckboxInternal = /*#__PURE__*/ forwardRef(function Checkbox({ isChecked, onChange, children, isDisabled = false, style, wrapperStyle, dangerouslySetAntdProps, className, componentId, analyticsEvents, ...restProps }, ref) {
@@ -20552,8 +21100,7 @@ zIndex)=>{
     });
 };
 const getChild = (child, isDisabled, disabledReason, tooltip, index, siblingCount)=>{
-    const HintColumnType = (/*#__PURE__*/ jsx(HintColumn, {})).type;
-    const isHintColumnType = Boolean(child && typeof child !== 'string' && typeof child !== 'number' && typeof child !== 'boolean' && 'type' in child && child?.type === HintColumnType);
+    const isHintColumnType = Boolean(child && typeof child !== 'string' && typeof child !== 'number' && typeof child !== 'boolean' && 'type' in child && child?.type === HintColumn);
     if (isDisabled && disabledReason && child && isHintColumnType) {
         return /*#__PURE__*/ jsxs(Fragment, {
             children: [
@@ -20577,7 +21124,7 @@ const DropdownContext = /*#__PURE__*/ createContext({
     setIsOpen: (isOpen)=>{}
 });
 const useDropdownContext = ()=>React__default.useContext(DropdownContext);
-const Root$a = ({ children, itemHtmlType, ...props })=>{
+const Root$8 = ({ children, itemHtmlType, ...props })=>{
     const [isOpen, setIsOpen] = React__default.useState(Boolean(props.defaultOpen || props.open));
     const useExternalState = useRef(props.open !== undefined || props.onOpenChange !== undefined).current;
     useEffect(()=>{
@@ -20842,7 +21389,7 @@ const Label$1 = /*#__PURE__*/ forwardRef(function Label({ children, ...props },
         children: children
     });
 });
-const Separator$2 = /*#__PURE__*/ forwardRef(function Separator({ children, ...props }, ref) {
+const Separator$1 = /*#__PURE__*/ forwardRef(function Separator({ children, ...props }, ref) {
     return /*#__PURE__*/ jsx(DropdownMenu$1.Separator, {
         ref: ref,
         css: dropdownSeparatorStyles,
@@ -21134,11 +21681,15 @@ const dropdownContentStyles = (theme)=>({
         color: theme.colors.textPrimary,
         lineHeight: theme.typography.lineHeightBase,
         border: `1px solid ${theme.colors.border}`,
-        borderRadius: token(ShapeTokens.POPOVER_BORDER_RADIUS, theme.borders.borderRadiusSm),
+        borderRadius: token(ShapeTokens.POPUP_BORDER_RADIUS, theme.borders.borderRadiusSm),
         padding: `${theme.spacing.xs}px 0`,
         boxShadow: theme.shadows.lg,
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore [FEINF-3177] TODO: fix to work with React 18 types
         userSelect: 'none',
         // Allow for scrolling within the dropdown when viewport is too small
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore [FEINF-3177] TODO: fix to work with React 18 types
         overflowY: 'auto',
         maxHeight: 'var(--radix-dropdown-menu-content-available-height)',
         ...getDarkModePortalStyles(theme),
@@ -21214,8 +21765,8 @@ var DropdownMenu = /*#__PURE__*/Object.freeze({
   Label: Label$1,
   RadioGroup: RadioGroup$1,
   RadioItem: RadioItem$1,
-  Root: Root$a,
-  Separator: Separator$2,
+  Root: Root$8,
+  Separator: Separator$1,
   Sub: Sub$1,
   SubContent: SubContent$1,
   SubTrigger: SubTrigger$1,
@@ -21274,7 +21825,7 @@ const ContextMenuProps = /*#__PURE__*/ createContext({
     setIsOpen: (isOpen)=>{}
 });
 const useContextMenuProps = ()=>React__default.useContext(ContextMenuProps);
-const Root$9 = ({ children, onOpenChange, ...props })=>{
+const Root$7 = ({ children, onOpenChange, ...props })=>{
     const [isOpen, setIsOpen] = React__default.useState(false);
     const handleChange = (isOpen)=>{
         setIsOpen(isOpen);
@@ -21557,7 +22108,7 @@ const Hint$1 = ({ children })=>{
         children: children
     });
 };
-const Separator$1 = ()=>{
+const Separator = ()=>{
     const { theme } = useDesignSystemTheme();
     return /*#__PURE__*/ jsx(ContextMenuSeparator, {
         css: dropdownSeparatorStyles(theme)
@@ -21568,7 +22119,7 @@ const itemIndicatorStyles = (theme)=>/*#__PURE__*/ css({
         paddingRight: theme.spacing.xs
     });
 const ContextMenu = {
-    Root: Root$9,
+    Root: Root$7,
     Trigger: Trigger$3,
     Label: Label,
     Item: Item$2,
@@ -21577,7 +22128,7 @@ const ContextMenu = {
     CheckboxItem: CheckboxItem,
     RadioItem: RadioItem,
     Arrow: Arrow,
-    Separator: Separator$1,
+    Separator: Separator,
     Sub: Sub,
     SubTrigger: SubTrigger,
     SubContent: SubContent,
@@ -21598,8 +22149,8 @@ var ContextMenu$1 = /*#__PURE__*/Object.freeze({
   Label: Label,
   RadioGroup: RadioGroup,
   RadioItem: RadioItem,
-  Root: Root$9,
-  Separator: Separator$1,
+  Root: Root$7,
+  Separator: Separator,
   Sub: Sub,
   SubContent: SubContent,
   SubTrigger: SubTrigger,
@@ -21766,7 +22317,14 @@ const getInputStyles = (clsPrefix, theme, { validationState, type, hasValue, loc
             }
         },
         [clearIcon]: {
-            fontSize: theme.typography.fontSizeSm
+            fontSize: theme.typography.fontSizeSm,
+            color: theme.colors.textSecondary,
+            '&:hover': {
+                color: theme.colors.actionTertiaryTextHover
+            },
+            '&:active': {
+                color: theme.colors.actionTertiaryTextPress
+            }
         },
         [prefixIcon]: {
             marginRight: theme.spacing.sm,
@@ -22213,7 +22771,7 @@ function MonthCell({ index, label, displayYear, selected, disabled, rangeFrom, r
     const isRangeStart = rangeFromValue !== undefined && cellValue === rangeFromValue;
     const isRangeEnd = rangeToValue !== undefined && cellValue === rangeToValue;
     const isRangeMiddle = inRange && !isRangeStart && !isRangeEnd;
-    const defaultButton = /*#__PURE__*/ jsx(Button$1, {
+    const defaultButton = /*#__PURE__*/ jsx(Button, {
         componentId: "datepicker-month-grid-cell",
         "aria-label": `${label} ${displayYear}`,
         "data-selected": selected || undefined,
@@ -22396,7 +22954,7 @@ function MonthCell({ index, label, displayYear, selected, disabled, rangeFrom, r
                     marginBottom: theme.spacing.xs
                 },
                 children: [
-                    /*#__PURE__*/ jsx(Button$1, {
+                    /*#__PURE__*/ jsx(Button, {
                         componentId: "datepicker-month-grid-prev",
                         "aria-label": "Previous year",
                         icon: /*#__PURE__*/ jsx(ChevronLeftIcon, {}),
@@ -22409,7 +22967,7 @@ function MonthCell({ index, label, displayYear, selected, disabled, rangeFrom, r
                         "aria-live": "polite",
                         children: displayYear
                     }),
-                    /*#__PURE__*/ jsx(Button$1, {
+                    /*#__PURE__*/ jsx(Button, {
                         componentId: "datepicker-month-grid-next",
                         "aria-label": "Next year",
                         icon: /*#__PURE__*/ jsx(ChevronRightIcon, {}),
@@ -22559,7 +23117,7 @@ function YearCell({ year, index, selected, disabled, isCurrentYear, rangeFrom, r
     const isRangeStart = rangeFromYear !== undefined && year === rangeFromYear;
     const isRangeEnd = rangeToYear !== undefined && year === rangeToYear;
     const isRangeMiddle = inRange && !isRangeStart && !isRangeEnd;
-    const defaultButton = /*#__PURE__*/ jsx(Button$1, {
+    const defaultButton = /*#__PURE__*/ jsx(Button, {
         componentId: "datepicker-year-grid-cell",
         "aria-label": String(year),
         "data-selected": selected || undefined,
@@ -22744,7 +23302,7 @@ function YearCell({ year, index, selected, disabled, isCurrentYear, rangeFrom, r
                     marginBottom: theme.spacing.xs
                 },
                 children: [
-                    /*#__PURE__*/ jsx(Button$1, {
+                    /*#__PURE__*/ jsx(Button, {
                         componentId: "datepicker-year-grid-prev",
                         "aria-label": "Previous decade",
                         icon: /*#__PURE__*/ jsx(ChevronLeftIcon, {}),
@@ -22761,7 +23319,7 @@ function YearCell({ year, index, selected, disabled, isCurrentYear, rangeFrom, r
                             decadeStart + YEARS_PER_PAGE - 1
                         ]
                     }),
-                    /*#__PURE__*/ jsx(Button$1, {
+                    /*#__PURE__*/ jsx(Button, {
                         componentId: "datepicker-year-grid-next",
                         "aria-label": "Next decade",
                         icon: /*#__PURE__*/ jsx(ChevronRightIcon, {}),
@@ -23024,7 +23582,7 @@ function createDayComponent(renderCellContent) {
             month: 'long',
             day: 'numeric'
         });
-        const defaultButton = /*#__PURE__*/ jsx(Button$3, {
+        const defaultButton = /*#__PURE__*/ jsx(Button$2, {
             name: "day",
             ref: buttonRef,
             ...dayRender.buttonProps,
@@ -23711,7 +24269,7 @@ const DatePicker = /*#__PURE__*/ forwardRef(// eslint-disable-next-line react-co
             pointerEvents: restProps?.disabled ? 'none' : 'auto'
         },
         ...wrapperProps,
-        children: /*#__PURE__*/ jsxs(Root$b, {
+        children: /*#__PURE__*/ jsxs(Root$9, {
             componentId: "codegen_design-system_src_development_datepicker_datepicker.tsx_330",
             open: isVisible,
             onOpenChange: setIsVisible,
@@ -23911,7 +24469,7 @@ const DatePicker = /*#__PURE__*/ forwardRef(// eslint-disable-next-line react-co
                                 maxWidth: 225,
                                 flexWrap: 'wrap'
                             },
-                            children: quickActions?.map((action, i)=>/*#__PURE__*/ jsx(Button$1, {
+                            children: quickActions?.map((action, i)=>/*#__PURE__*/ jsx(Button, {
                                     size: "small",
                                     componentId: "codegen_design-system_src_design-system_datepicker_datepicker.tsx_281",
                                     onClick: ()=>action.onClick ? action.onClick(action.value) : !Array.isArray(action.value) && handleDatePickerUpdate(action.value),
@@ -23956,7 +24514,7 @@ const DatePicker = /*#__PURE__*/ forwardRef(// eslint-disable-next-line react-co
                                 display: 'flex',
                                 justifyContent: 'flex-end'
                             },
-                            children: /*#__PURE__*/ jsx(Button$1, {
+                            children: /*#__PURE__*/ jsx(Button, {
                                 "aria-label": "Open end date picker",
                                 type: "primary",
                                 componentId: "datepicker-dubois-ok-button",
@@ -24441,7 +24999,7 @@ const DialogCombobox = ({ children, label, id, value = [], open, emptyText, scro
             setDisableMouseOver,
             onView: eventContext.onView
         },
-        children: /*#__PURE__*/ jsx(Root$8, {
+        children: /*#__PURE__*/ jsx(Root$6, {
             open: open !== undefined ? open : isOpen,
             ...props,
             children: /*#__PURE__*/ jsx(ComponentFinderContext.Provider, {
@@ -24453,7 +25011,7 @@ const DialogCombobox = ({ children, label, id, value = [], open, emptyText, scro
         })
     });
 };
-const Root$8 = (props)=>{
+const Root$6 = (props)=>{
     const { children, stayOpenOnSelection, multiSelect, ...restProps } = props;
     const { value, setIsOpen, onView } = useDialogComboboxContext();
     const firstView = useRef(true);
@@ -24733,6 +25291,8 @@ const dialogComboboxLookAheadKeyDown = (e, setLookAhead, lookAhead)=>{
 };
 
 const getComboboxContentWrapperStyles = (theme, { maxHeight = '100vh', maxWidth = '100vw', minHeight = 0, minWidth = 0, width })=>{
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore [FEINF-3177] TODO: fix to work with React 18 types
     return /*#__PURE__*/ css({
         maxHeight,
         maxWidth,
@@ -25264,7 +25824,7 @@ const DialogComboboxOptionListCheckboxItem = DuboisDialogComboboxOptionListCheck
 
 const getInputGroupStyling = (clsPrefix, theme, buttonSide)=>{
     const inputClass = `.${clsPrefix}-input`;
-    const buttonClass = `.${clsPrefix}-btn`;
+    const groupButtons = (suffix = '')=>getBtnClassName(clsPrefix, suffix, '& > ');
     const buttonOnRight = buttonSide === 'right';
     return /*#__PURE__*/ css({
         display: 'inline-flex !important',
@@ -25293,7 +25853,7 @@ const getInputGroupStyling = (clsPrefix, theme, buttonSide)=>{
                 marginRight: 0
             }
         },
-        [`& > ${buttonClass}`]: {
+        [groupButtons()]: {
             boxShadow: 'none !important',
             // Square off the inner edge (the edge adjacent to the input).
             ...buttonOnRight ? {
@@ -25311,13 +25871,20 @@ const getInputGroupStyling = (clsPrefix, theme, buttonSide)=>{
                 }
             }
         },
-        [`& > ${buttonClass} > span`]: {
+        [groupButtons(' > span')]: {
             verticalAlign: 'middle'
         },
-        [`& > ${buttonClass}:disabled, & > ${buttonClass}:disabled:hover`]: {
+        [`${groupButtons(':disabled')}, ${groupButtons(':disabled:hover')}`]: {
             borderLeft: `1px solid ${theme.colors.actionDisabledBorder} !important`,
             backgroundColor: `${theme.colors.actionDisabledBackground} !important`,
             color: `${theme.colors.actionDisabledText} !important`
+        },
+        // Filled variants (primary/danger) keep their stronger disabled fill and white text inside the
+        // group rather than the greyed-out default disabled treatment above; placed after that rule so it
+        // wins at equal specificity by source order.
+        [`& > .db-btn-primary:disabled, & > .db-btn-primary:disabled:hover, & > .db-btn-danger:disabled, & > .db-btn-danger:disabled:hover`]: {
+            backgroundColor: `${theme.colors.actionDisabledBorder} !important`,
+            color: `${theme.colors.actionPrimaryTextDefault} !important`
         }
     });
 };
@@ -25924,6 +26491,7 @@ const DialogComboboxTrigger = /*#__PURE__*/ forwardRef(// eslint-disable-next-li
             'aria-label': ariaLabel
         },
         ref: forwardedRef,
+        // oxlint-disable-next-line jsx-a11y/role-has-required-aria-props
         role: "combobox",
         "aria-haspopup": "listbox",
         "aria-invalid": validationState === 'error',
@@ -25962,6 +26530,7 @@ const DialogComboboxTrigger = /*#__PURE__*/ forwardRef(// eslint-disable-next-li
             'aria-label': ariaLabel
         },
         ref: forwardedRef,
+        // oxlint-disable-next-line jsx-a11y/role-has-required-aria-props
         role: "combobox",
         "aria-haspopup": "listbox",
         "aria-invalid": validationState === 'error',
@@ -26047,7 +26616,7 @@ const DialogComboboxTrigger = /*#__PURE__*/ forwardRef(// eslint-disable-next-li
                 componentId: "dialogcombobox-trigger-tooltip",
                 children: triggerContent
             }) : triggerContent,
-            removable && /*#__PURE__*/ jsx(Button$1, {
+            removable && /*#__PURE__*/ jsx(Button, {
                 componentId: "codegen_design-system_src_design-system_dialogcombobox_dialogcomboboxtrigger.tsx_355",
                 "aria-label": `Remove ${label}`,
                 onClick: handleRemove,
@@ -26069,16 +26638,24 @@ const DialogComboboxTrigger = /*#__PURE__*/ forwardRef(// eslint-disable-next-li
     });
 };
 
-const getSpacerStyles = memoize((theme, size, shrinks)=>/*#__PURE__*/ css({
-        height: theme.spacing[size],
+// Height comes from the --db-spacer-size-* component tokens (Spacer/tokens.css), so the styles no
+// longer depend on the JS theme. Mapped explicitly rather than interpolated so each token name is greppable.
+const SPACER_SIZE_TOKENS = {
+    xs: 'var(--db-spacer-size-xs)',
+    sm: 'var(--db-spacer-size-sm)',
+    mid: 'var(--db-spacer-size-mid)',
+    md: 'var(--db-spacer-size-md)',
+    lg: 'var(--db-spacer-size-lg)'
+};
+const getSpacerStyles = memoize((size, shrinks)=>/*#__PURE__*/ css({
+        height: SPACER_SIZE_TOKENS[size],
         ...shrinks === false ? {
             flexShrink: 0
         } : undefined
-    }), (theme, size, shrinks)=>`${themeMemoKey(theme)}|${size}|${shrinks ?? ''}`);
+    }), (size, shrinks)=>`${size}|${shrinks ?? ''}`);
 const Spacer = ({ size = 'md', shrinks, ...props })=>{
-    const { theme } = useDesignSystemTheme();
     return /*#__PURE__*/ jsx("div", {
-        css: getSpacerStyles(theme, size, shrinks),
+        css: getSpacerStyles(size, shrinks),
         ...props
     });
 };
@@ -26120,12 +26697,12 @@ const OVERLAY_SHOW_BOTTOM = /*#__PURE__*/ keyframes({
 const DEFAULT_ANALYTICS_EVENTS$3 = [
     DesignSystemEventProviderAnalyticsEventTypes.OnView
 ];
-const Content$4 = ({ children, footer, title, width, height, position: positionOverride, useCustomScrollBehavior, expandContentToFullHeight, disableOpenAutoFocus, onInteractOutside, seeThrough, hideClose, closeOnClickOutside, onCloseClick, componentId = 'design_system.drawer.content', analyticsEvents = DEFAULT_ANALYTICS_EVENTS$3, size = 'default', ...props })=>{
+const Content$4 = ({ children, footer, title, width, height, position: positionOverride, useCustomScrollBehavior, expandContentToFullHeight, disableOpenAutoFocus, onInteractOutside, seeThrough, hideClose, closeOnClickOutside, onCloseClick, componentId = 'design_system.drawer.content', analyticsEvents = DEFAULT_ANALYTICS_EVENTS$3, size = 'default', className, ...props })=>{
     const { getPopupContainer } = useDesignSystemContext();
     const { theme } = useDesignSystemTheme();
     const themeClass = useDuboisThemeClass();
     const themeOverrideStyle = useDesignTokenOverrideStyles();
-    const horizontalContentPadding = size === 'small' ? theme.spacing.md : theme.spacing.lg;
+    const horizontalContentPadding = size === 'small' ? 'var(--db-drawer-padding-horizontal-small)' : 'var(--db-drawer-padding-horizontal)';
     const [shouldContentBeFocusable, setShouldContentBeFocusable] = useState(false);
     const contentContainerRef = useRef(null);
     const eventContext = useDesignSystemEventComponentCallbacks({
@@ -26184,9 +26761,9 @@ const Content$4 = ({ children, footer, title, width, height, position: positionO
     const isSidePosition = position === 'left' || position === 'right';
     const overlayShow = position === 'right' ? OVERLAY_SHOW_RIGHT : position === 'left' ? OVERLAY_SHOW_LEFT : OVERLAY_SHOW_BOTTOM;
     const dialogPrimitiveContentStyle = /*#__PURE__*/ css({
-        color: theme.colors.textPrimary,
-        backgroundColor: theme.colors.backgroundPrimary,
-        boxShadow: theme.shadows.xl,
+        color: 'var(--db-drawer-text)',
+        backgroundColor: 'var(--db-drawer-surface)',
+        boxShadow: 'var(--db-drawer-shadow)',
         position: 'fixed',
         boxSizing: 'border-box',
         zIndex: theme.options.zIndexBase + DRAWER_ZINDEX_CONTENT_OFFSET,
@@ -26213,7 +26790,7 @@ const Content$4 = ({ children, footer, title, width, height, position: positionO
             minHeight: MIN_HEIGHT,
             maxHeight: MAX_HEIGHT
         } : {},
-        paddingTop: size === 'small' ? theme.spacing.sm : theme.spacing.md,
+        paddingTop: size === 'small' ? 'var(--db-drawer-content-padding-top-small)' : 'var(--db-drawer-content-padding-top)',
         paddingLeft: 0,
         paddingBottom: 0,
         paddingRight: 0,
@@ -26232,14 +26809,19 @@ const Content$4 = ({ children, footer, title, width, height, position: positionO
         children: [
             /*#__PURE__*/ jsx(DialogPrimitive.Overlay, {
                 "data-testid": "drawer-overlay",
+                // themeClass scopes the scrim under .du-bois-dark so var(--db-drawer-overlay) resolves the dark value.
+                className: themeClass,
                 css: /*#__PURE__*/ css({
-                    backgroundColor: theme.colors.overlayOverlay,
+                    backgroundColor: 'var(--db-drawer-overlay)',
                     position: 'fixed',
                     inset: 0,
                     // needed so that it covers the PersonaNavSidebar
                     zIndex: theme.options.zIndexBase + DRAWER_ZINDEX_OVERLAY_OFFSET,
                     opacity: seeThrough || isParentDrawerOpen ? 0 : 1
                 }),
+                // A React portal renders this scrim outside the DesignTokenScope wrapper, so it stops
+                // inheriting the consumer's scoped --db-* overrides; re-stamp them inline on the scrim.
+                style: themeOverrideStyle,
                 onClick: closeOnClickOutside ? onCloseClick : undefined
             }),
             /*#__PURE__*/ jsx(DialogPrimitive.DialogContent, {
@@ -26252,14 +26834,13 @@ const Content$4 = ({ children, footer, title, width, height, position: positionO
                     opacity: seeThrough ? 0 : 1,
                     ...theme.isDarkMode && {
                         ...position === 'bottom' ? {
-                            borderTop: `1px solid ${theme.colors.borderDecorative}`
+                            borderTop: '1px solid var(--db-drawer-border)'
                         } : {
-                            borderLeft: `1px solid ${theme.colors.borderDecorative}`
+                            borderLeft: '1px solid var(--db-drawer-border)'
                         }
                     },
                     ...themeOverrideStyle
                 },
-                className: themeClass,
                 onKeyDownCapture: handleKeyDownCapture,
                 onWheel: (e)=>{
                     e.stopPropagation();
@@ -26277,6 +26858,7 @@ const Content$4 = ({ children, footer, title, width, height, position: positionO
                 onInteractOutside: onInteractOutside,
                 ...props,
                 ...eventContext.dataComponentProps,
+                className: classnames(className, themeClass),
                 children: /*#__PURE__*/ jsx(ApplyDesignSystemContextOverrides, {
                     getPopupContainer: ()=>contentContainerRef.current ?? document.body,
                     children: /*#__PURE__*/ jsxs(DrawerContext.Provider, {
@@ -26294,7 +26876,7 @@ const Content$4 = ({ children, footer, title, width, height, position: positionO
                                     alignItems: 'center',
                                     paddingRight: horizontalContentPadding,
                                     paddingLeft: horizontalContentPadding,
-                                    marginBottom: theme.spacing.sm
+                                    marginBottom: 'var(--db-drawer-title-margin-bottom)'
                                 }),
                                 children: [
                                     /*#__PURE__*/ jsx(DialogPrimitive.Title, {
@@ -26319,10 +26901,10 @@ const Content$4 = ({ children, footer, title, width, height, position: positionO
                                         asChild: true,
                                         css: /*#__PURE__*/ css({
                                             flexShrink: 1,
-                                            marginLeft: theme.spacing.xs
+                                            marginLeft: 'var(--db-drawer-close-button-margin)'
                                         }),
                                         onClick: onCloseClick,
-                                        children: /*#__PURE__*/ jsx(Button$1, {
+                                        children: /*#__PURE__*/ jsx(Button, {
                                             componentId: `${componentId}.close`,
                                             "aria-label": "Close",
                                             icon: /*#__PURE__*/ jsx(CloseIcon, {}),
@@ -26334,7 +26916,7 @@ const Content$4 = ({ children, footer, title, width, height, position: positionO
                             /*#__PURE__*/ jsxs("div", {
                                 ref: mergedContentRef,
                                 // Needed to make drawer content focusable when scrollable for keyboard-only users to be able to focus & scroll
-                                // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                                // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex
                                 tabIndex: shouldContentBeFocusable ? 0 : -1,
                                 css: /*#__PURE__*/ css({
                                     // in order to have specific content in the drawer scroll with fixed title
@@ -26355,10 +26937,10 @@ const Content$4 = ({ children, footer, title, width, height, position: positionO
                             }),
                             footer && /*#__PURE__*/ jsx("div", {
                                 style: {
-                                    paddingTop: theme.spacing.md,
+                                    paddingTop: 'var(--db-drawer-footer-padding-top)',
                                     paddingRight: horizontalContentPadding,
                                     paddingLeft: horizontalContentPadding,
-                                    paddingBottom: size === 'small' ? theme.spacing.md : theme.spacing.lg,
+                                    paddingBottom: size === 'small' ? 'var(--db-drawer-footer-padding-bottom-small)' : 'var(--db-drawer-footer-padding-bottom)',
                                     flexGrow: 0,
                                     flexShrink: 1
                                 },
@@ -26371,7 +26953,7 @@ const Content$4 = ({ children, footer, title, width, height, position: positionO
         ]
     });
 };
-function Root$7(props) {
+function Root$5(props) {
     return /*#__PURE__*/ jsx(DialogPrimitive.Root, {
         ...props
     });
@@ -26386,7 +26968,7 @@ function Trigger$2(props) {
 var Drawer = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Content: Content$4,
-  Root: Root$7,
+  Root: Root$5,
   Trigger: Trigger$2
 });
 
@@ -26586,7 +27168,7 @@ function getSelectEmotionStyles({ clsPrefix, theme, validationState }) {
             marginTop: 0,
             color: theme.colors.textSecondary,
             fontSize: theme.general.iconFontSize,
-            '.anticon': {
+            [getIconClassName()]: {
                 // For some reason ant sets this to 'auto'. Need to set it back to 'none' to allow the element below to receive
                 // the click event.
                 pointerEvents: 'none',
@@ -26704,7 +27286,7 @@ function getSelectEmotionStyles({ clsPrefix, theme, validationState }) {
             lineHeight: theme.typography.lineHeightBase,
             paddingInlineEnd: 0,
             marginInlineEnd: 0,
-            '& > .anticon': {
+            [`& > :is(${getIconClassName()})`]: {
                 height: theme.general.iconFontSize - 4,
                 fontSize: theme.general.iconFontSize - 4
             },
@@ -26739,6 +27321,8 @@ function getDropdownStyles(clsPrefix, theme) {
     const classItemActive = `.${clsPrefix}-item-option-active`;
     const classItemSelected = `.${clsPrefix}-item-option-selected`;
     const classItemState = `.${clsPrefix}-item-option-state`;
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore [FEINF-3177] TODO: fix to work with React 18 types
     const styles = {
         borderColor: theme.colors.border,
         borderWidth: 1,
@@ -27138,7 +27722,9 @@ const getRadioInputStyles = ({ clsPrefix, theme })=>({
             }
         }
     });
-const getCommonRadioGroupStyles = ({ theme, clsPrefix, classNamePrefix })=>/*#__PURE__*/ css({
+const getCommonRadioGroupStyles = ({ theme, clsPrefix, classNamePrefix })=>// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore [FEINF-3177] TODO: fix to work with React 18 types
+    /*#__PURE__*/ css({
         '& > label': {
             [`&.${classNamePrefix}-radio-wrapper-disabled > span`]: {
                 color: theme.colors.actionDisabledText
@@ -27211,6 +27797,8 @@ const getRadioStyles = ({ theme, clsPrefix })=>{
     const styles = {
         fontWeight
     };
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore [FEINF-3177] TODO: fix to work with React 18 types
     return /*#__PURE__*/ css({
         ...getRadioInputStyles({
             theme,
@@ -31290,7 +31878,7 @@ const getFormItemEmotionStyles = ({ theme, clsPrefix })=>{
         [clsFormItemLabel]: {
             fontWeight: theme.typography.typographyBoldFontWeight,
             lineHeight: theme.typography.lineHeightBase,
-            '.anticon': {
+            [getIconClassName()]: {
                 fontSize: theme.general.iconFontSize
             }
         },
@@ -31644,7 +32232,7 @@ const CursorPagination = function CursorPagination({ onNextPage, onPreviousPage,
         }),
         ...pageSizeEventContext.dataComponentProps,
         children: [
-            /*#__PURE__*/ jsx(Button$1, {
+            /*#__PURE__*/ jsx(Button, {
                 componentId: `${componentId}.previous_page`,
                 icon: /*#__PURE__*/ jsx(ChevronLeftIcon, {}),
                 disabled: !hasPreviousPage,
@@ -31652,7 +32240,7 @@ const CursorPagination = function CursorPagination({ onNextPage, onPreviousPage,
                 type: "tertiary",
                 children: previousPageText
             }),
-            /*#__PURE__*/ jsx(Button$1, {
+            /*#__PURE__*/ jsx(Button, {
                 componentId: `${componentId}.next_page`,
                 endIcon: /*#__PURE__*/ jsx(ChevronRightIcon, {}),
                 disabled: !hasNextPage,
@@ -32246,93 +32834,91 @@ const Listbox = ({ options, onSelect, includeFilterInput, filterInputEmptyMessag
     });
 };
 
-const getCommonTabsListStyles = (theme)=>{
-    return {
-        display: 'flex',
-        borderBottom: `1px solid ${theme.colors.actionDefaultBorderDefault}`,
-        marginBottom: theme.spacing.md,
-        height: theme.general.heightSm,
-        boxSizing: 'border-box'
-    };
+// Shared by Tabs and NavigationMenu, so these reference existing system/v1 tokens directly (no
+// component tier).
+const COMMON_TABS_LIST_STYLES = {
+    display: 'flex',
+    // No v2 token holds the shared tab/list divider color yet; bridges on the v1 --db-color-* token. TODO(FEINF-6505): adopt a v2 token when one lands.
+    borderBottom: '1px solid var(--db-color-action-default-border-default)',
+    marginBottom: 'var(--db-space-4)',
+    height: 'var(--db-size-8)',
+    boxSizing: 'border-box'
 };
-const getCommonTabsTriggerStyles = (theme)=>{
-    return {
-        display: 'flex',
-        fontWeight: theme.typography.typographyBoldFontWeight,
-        fontSize: theme.typography.fontSizeMd,
-        backgroundColor: 'transparent',
-        marginRight: theme.spacing.md
-    };
+const COMMON_TABS_TRIGGER_STYLES = {
+    display: 'flex',
+    'font-weight': 'var(--db-font-weight-semibold)',
+    fontSize: 'var(--db-font-size-base)',
+    backgroundColor: 'transparent',
+    marginRight: 'var(--db-space-4)'
 };
 
-const Root$6 = // eslint-disable-next-line react-component-name/react-component-name -- TODO(FEINF-4716)
+const Root$4 = // eslint-disable-next-line react-component-name/react-component-name -- TODO(FEINF-4716)
 /*#__PURE__*/ React__default.forwardRef((props, forwardedRef)=>{
     return /*#__PURE__*/ jsx(RadixNavigationMenu.Root, {
         ...props,
         ref: forwardedRef
     });
 });
-// Module-level caches. The styles depend only on (theme + active) — at most 2 entries
-// for the list and 4 for items. Same pattern as getShadowScrollStylesMemoized in css-utils.tsx.
-const getMemoizedListCss = memoize((theme)=>({
-        ...getCommonTabsListStyles(theme),
-        marginTop: 0,
-        padding: 0,
-        overflow: 'auto hidden',
-        listStyle: 'none'
-    }));
-const getMemoizedItemCss = memoize((theme, active)=>({
-        ...getCommonTabsTriggerStyles(theme),
-        height: theme.general.heightSm,
-        minWidth: theme.spacing.lg,
+const LIST_CSS = {
+    ...COMMON_TABS_LIST_STYLES,
+    marginTop: 0,
+    padding: 0,
+    overflow: 'auto hidden',
+    listStyle: 'none'
+};
+// Module-level caches keyed by `active`, so each holds only a handful of entries. Same pattern
+// as getShadowScrollStylesMemoized in css-utils.tsx.
+const getMemoizedItemCss = memoize((active)=>({
+        ...COMMON_TABS_TRIGGER_STYLES,
+        height: 'var(--db-navigation-menu-item-height)',
+        minWidth: 'var(--db-navigation-menu-item-min-width)',
         justifyContent: 'center',
         ...active && {
             // Use box-shadow instead of border to prevent it from affecting the size of the element, which results in visual
             // jumping when switching tabs.
-            boxShadow: `inset 0 -4px 0 ${theme.colors.actionPrimaryBackgroundDefault}`
+            // No v2 token holds the box shadow yet. TODO(FEINF-6505): adopt a v2 token when one lands.
+            boxShadow: 'inset 0 calc(-1 * var(--db-navigation-menu-indicator-thickness)) 0 var(--db-navigation-menu-indicator)'
         }
-    }), (theme, active)=>`${themeMemoKey(theme)}|${active}`);
-const getMemoizedLinkCss = memoize((theme, active)=>({
-        padding: `${theme.spacing.xs}px 0 ${theme.spacing.sm}px 0`,
+    }));
+const getMemoizedLinkCss = memoize((active)=>({
+        padding: 'var(--db-navigation-menu-link-padding-top) 0 var(--db-navigation-menu-link-padding-bottom) 0',
         '&:focus-visible': {
-            outline: `2px auto ${theme.colors.actionDefaultBorderFocus}`,
-            outlineOffset: '-1px'
+            outline: 'var(--db-navigation-menu-focus-ring-width) auto var(--db-navigation-menu-focus-ring)',
+            outlineOffset: 'var(--db-navigation-menu-focus-ring-offset)'
         },
         '&&': {
-            color: active ? theme.colors.textPrimary : theme.colors.textSecondary,
+            color: active ? 'var(--db-navigation-menu-text-selected)' : 'var(--db-navigation-menu-text)',
             textDecoration: 'none',
             '&:hover': {
-                color: active ? theme.colors.textPrimary : theme.colors.actionDefaultTextHover,
+                color: active ? 'var(--db-navigation-menu-text-selected)' : 'var(--db-navigation-menu-text-hover)',
                 textDecoration: 'none'
             },
             '&:focus': {
                 textDecoration: 'none'
             },
             '&:active': {
-                color: active ? theme.colors.textPrimary : theme.colors.actionDefaultTextPress
+                color: active ? 'var(--db-navigation-menu-text-selected)' : 'var(--db-navigation-menu-text-active)'
             }
         }
-    }), (theme, active)=>`${themeMemoKey(theme)}|${active}`);
+    }));
 const List$1 = // eslint-disable-next-line react-component-name/react-component-name -- TODO(FEINF-4716)
 /*#__PURE__*/ React__default.forwardRef((props, forwardedRef)=>{
-    const { theme } = useDesignSystemTheme();
     return /*#__PURE__*/ jsx(RadixNavigationMenu.List, {
-        css: getMemoizedListCss(theme),
+        css: LIST_CSS,
         ...props,
         ref: forwardedRef
     });
 });
 const Item$1 = // eslint-disable-next-line react-component-name/react-component-name -- TODO(FEINF-4716)
 /*#__PURE__*/ React__default.forwardRef(({ children, active, ...props }, forwardedRef)=>{
-    const { theme } = useDesignSystemTheme();
     return /*#__PURE__*/ jsx(RadixNavigationMenu.Item, {
-        css: getMemoizedItemCss(theme, Boolean(active)),
+        css: getMemoizedItemCss(Boolean(active)),
         ...props,
         ref: forwardedRef,
         children: /*#__PURE__*/ jsx(RadixNavigationMenu.Link, {
             asChild: true,
             active: active,
-            css: getMemoizedLinkCss(theme, Boolean(active)),
+            css: getMemoizedLinkCss(Boolean(active)),
             children: children
         })
     });
@@ -32342,7 +32928,7 @@ var NavigationMenu = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Item: Item$1,
   List: List$1,
-  Root: Root$6
+  Root: Root$4
 });
 
 const DEFAULT_ANALYTICS_EVENTS_WITH_VIEW$2 = [
@@ -32456,7 +33042,7 @@ function getTagEmotionStyles(theme, color = 'default', clickable = false, closab
                 color: iconPress
             },
             '&:focus-visible': focusVisibleStyles,
-            '.anticon': {
+            [getIconClassName()]: {
                 verticalAlign: 0
             }
         },
@@ -32465,7 +33051,7 @@ function getTagEmotionStyles(theme, color = 'default', clickable = false, closab
             fontSize: theme.typography.fontSizeBase,
             fontWeight: theme.typography.typographyRegularFontWeight,
             lineHeight: theme.typography.lineHeightSm,
-            '& .anticon': {
+            [`& :is(${getIconClassName()})`]: {
                 verticalAlign: 'text-top'
             },
             whiteSpace: 'nowrap'
@@ -32538,7 +33124,8 @@ const Tag = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
         eventContext,
         onClick
     ]);
-    const handleKeyDown = useCallback(// oxlint-disable-next-line @databricks/react-18-types-migration -- TODO(FEINF-6292)
+    const handleKeyDown = useCallback(// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore [FEINF-3177] TODO: fix to work with React 18 types
     (e)=>{
         if (onKeyDown) {
             onKeyDown(e);
@@ -32623,64 +33210,6 @@ const Tag = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
     });
 });
 
-const getTagStyles = (theme)=>{
-    const styles = {
-        marginRight: 0,
-        color: theme.colors.actionTertiaryTextDefault,
-        cursor: 'pointer',
-        '&:focus': {
-            color: theme.colors.actionTertiaryTextDefault
-        },
-        '&:hover': {
-            color: theme.colors.actionTertiaryTextHover
-        },
-        '&:active': {
-            color: theme.colors.actionTertiaryTextPress
-        }
-    };
-    return /*#__PURE__*/ css(styles);
-};
-// Module-level caches. Both styles depend only on (theme + noMargin); cache once per
-// combination across every Overflow instance. Same pattern as
-// getShadowScrollStylesMemoized in css-utils.tsx.
-const getMemoizedTagStyles = memoize((theme)=>getTagStyles(theme));
-const getMemoizedContainerCss = memoize((theme, noMargin)=>({
-        display: 'inline-flex',
-        alignItems: 'center',
-        gap: noMargin ? 0 : theme.spacing.sm,
-        maxWidth: '100%'
-    }), (theme, noMargin)=>`${themeMemoKey(theme)}|${noMargin}`);
-const Overflow = ({ children, noMargin = false, visibleItemsCount = 1, ...props })=>{
-    const { theme } = useDesignSystemTheme();
-    const childrenList = children && Children.toArray(children);
-    if (!childrenList || childrenList.length === 0) {
-        return /*#__PURE__*/ jsx(Fragment, {
-            children: children
-        });
-    }
-    const visibleItems = childrenList.slice(0, visibleItemsCount);
-    const additionalItems = childrenList.slice(visibleItemsCount);
-    const renderOverflowLabel = (label)=>/*#__PURE__*/ jsx(Tag, {
-            componentId: "codegen_design-system_src_design-system_overflow_overflow.tsx_28",
-            css: getMemoizedTagStyles(theme),
-            children: label
-        });
-    return additionalItems.length === 0 ? /*#__PURE__*/ jsx(Fragment, {
-        children: visibleItems
-    }) : /*#__PURE__*/ jsxs("div", {
-        ...props,
-        css: getMemoizedContainerCss(theme, noMargin),
-        children: [
-            visibleItems,
-            additionalItems.length > 0 && /*#__PURE__*/ jsx(OverflowPopover, {
-                items: additionalItems,
-                renderLabel: renderOverflowLabel,
-                ...props
-            })
-        ]
-    });
-};
-
 const RadioGroupContext = /*#__PURE__*/ React__default.createContext('medium');
 const DEFAULT_ANALYTICS_EVENTS$1 = [
     DesignSystemEventProviderAnalyticsEventTypes.OnValueChange
@@ -32694,11 +33223,11 @@ const getMemoizedRootCss = memoize((theme)=>({
 // Item icon css depends on (theme, size). At most 6 cache entries.
 const getMemoizedItemIconCss = memoize((theme, size)=>({
         marginRight: size === 'large' ? theme.spacing.sm : theme.spacing.xs,
-        [`& > .anticon`]: {
+        [`& > :is(${getIconClassName()})`]: {
             verticalAlign: `-3px`
         }
     }), (theme, size)=>`${themeMemoKey(theme)}|${size}`);
-const Root$5 = /*#__PURE__*/ React__default.forwardRef(// eslint-disable-next-line react-component-name/react-component-name -- TODO(FEINF-4716)
+const Root$3 = /*#__PURE__*/ React__default.forwardRef(// eslint-disable-next-line react-component-name/react-component-name -- TODO(FEINF-4716)
 ({ size, componentId, analyticsEvents = DEFAULT_ANALYTICS_EVENTS$1, valueHasNoPii, onValueChange, ...props }, forwardedRef)=>{
     const { theme } = useDesignSystemTheme();
     const contextValue = React__default.useMemo(()=>size ?? 'medium', [
@@ -32863,7 +33392,7 @@ const getMemoizedRadioGroupItemStyles = memoize((theme, size, iconClass)=>getRad
 var PillControl = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Item: Item,
-  Root: Root$5
+  Root: Root$3
 });
 
 const DEFAULT_ANALYTICS_EVENTS = [
@@ -33087,14 +33616,14 @@ const ProgressContextProvider = ({ children, value })=>{
     });
 };
 
-const getProgressRootStyles = (theme, minWidth, maxWidth)=>{
+const getProgressRootStyles = (minWidth, maxWidth)=>{
     const styles = {
         position: 'relative',
         overflow: 'hidden',
-        backgroundColor: theme.colors.progressTrack,
-        height: theme.spacing.sm,
+        backgroundColor: 'var(--db-progress-track)',
+        height: 'var(--db-progress-size)',
         width: '100%',
-        borderRadius: theme.borders.borderRadiusFull,
+        borderRadius: 'var(--db-progress-border-radius)',
         ...minWidth && {
             minWidth
         },
@@ -33105,10 +33634,9 @@ const getProgressRootStyles = (theme, minWidth, maxWidth)=>{
     };
     return /*#__PURE__*/ css(importantify(styles));
 };
-const getMemoizedProgressRootStyles = memoize(getProgressRootStyles, (theme, minWidth, maxWidth)=>`${themeMemoKey(theme)}|${minWidth ?? ''}|${maxWidth ?? ''}`);
-const Root$4 = (props)=>{
+const getMemoizedProgressRootStyles = memoize(getProgressRootStyles, (minWidth, maxWidth)=>`${minWidth ?? ''}|${maxWidth ?? ''}`);
+const Root$2 = (props)=>{
     const { children, value, minWidth, maxWidth, ...restProps } = props;
-    const { theme } = useDesignSystemTheme();
     const contextValue = useMemo(()=>({
             progress: value
         }), [
@@ -33119,27 +33647,22 @@ const Root$4 = (props)=>{
         children: /*#__PURE__*/ jsx(Progress$1.Root, {
             value: value,
             ...restProps,
-            css: getMemoizedProgressRootStyles(theme, minWidth, maxWidth),
+            css: getMemoizedProgressRootStyles(minWidth, maxWidth),
             children: children
         })
     });
 };
-const getProgressIndicatorStyles = (theme)=>{
-    const styles = {
-        backgroundColor: theme.colors.progressFill,
-        height: '100%',
-        width: '100%',
-        transition: 'transform 300ms linear',
-        borderRadius: theme.borders.borderRadiusFull
-    };
-    return /*#__PURE__*/ css(importantify(styles));
-};
-const getMemoizedProgressIndicatorStyles = memoize(getProgressIndicatorStyles);
+const progressIndicatorStyles = /*#__PURE__*/ css(importantify({
+    backgroundColor: 'var(--db-progress-fill)',
+    height: '100%',
+    width: '100%',
+    transition: 'transform var(--db-progress-transition-duration) linear',
+    borderRadius: 'var(--db-progress-border-radius)'
+}));
 const Indicator = (props)=>{
     const { progress } = React__default.useContext(ProgressContext);
-    const { theme } = useDesignSystemTheme();
     return /*#__PURE__*/ jsx(Progress$1.Indicator, {
-        css: getMemoizedProgressIndicatorStyles(theme),
+        css: progressIndicatorStyles,
         style: {
             transform: `translateX(-${100 - (progress ?? 100)}%)`
         },
@@ -33150,7 +33673,7 @@ const Indicator = (props)=>{
 var Progress = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Indicator: Indicator,
-  Root: Root$4
+  Root: Root$2
 });
 
 const getRadioTileStyles = (theme, classNamePrefix, maxWidth)=>{
@@ -33234,13 +33757,16 @@ const getMemoizedIconStyles = memoize((theme, disabled)=>({
 const RadioTile = (props)=>{
     const { description, icon, maxWidth, checked, defaultChecked, onChange, ...rest } = props;
     const { theme, classNamePrefix } = useDesignSystemTheme();
-    const { value: groupValue, onChange: groupOnChange } = useRadioGroupContext();
+    // Mirror NativeRadio: a disabled <Radio.Group> disables its tiles. RadioTile's own <button> is
+    // the interactive element, so OR the group's `disabled` (from context) with the tile's own prop.
+    const { value: groupValue, onChange: groupOnChange, disabled: groupDisabled } = useRadioGroupContext();
+    const isDisabledByGroupOrProp = groupDisabled || props.disabled;
     return /*#__PURE__*/ jsxs("button", {
         role: "radio",
         type: "button",
         "aria-checked": groupValue === props.value,
         onClick: ()=>{
-            if (props.disabled) {
+            if (isDisabledByGroupOrProp) {
                 return;
             }
             onChange?.(props.value);
@@ -33253,12 +33779,12 @@ const RadioTile = (props)=>{
         tabIndex: 0,
         className: `${classNamePrefix}-radio-tile`,
         css: getMemoizedRadioTileStyles(theme, classNamePrefix, maxWidth),
-        disabled: props.disabled,
+        disabled: isDisabledByGroupOrProp,
         children: [
             /*#__PURE__*/ jsxs("div", {
                 children: [
                     icon ? /*#__PURE__*/ jsx("span", {
-                        css: getMemoizedIconStyles(theme, Boolean(props.disabled)),
+                        css: getMemoizedIconStyles(theme, Boolean(isDisabledByGroupOrProp)),
                         children: icon
                     }) : null,
                     /*#__PURE__*/ jsx(Radio, {
@@ -33325,7 +33851,6 @@ function getSegmentedControlButtonEmotionStyles(clsPrefix, theme, size, spaced =
     const classWrapper = `.${clsPrefix}-radio-button-wrapper`;
     const classWrapperDisabled = `.${clsPrefix}-radio-button-wrapper-disabled`;
     const classButton = `.${clsPrefix}-radio-button`;
-    const classIcon = `.${theme.general.iconfontCssPrefix}`;
     // Note: Ant radio button uses a 1px-wide `before` pseudo-element to recreate the left border of the button.
     // This is because the actual left border is disabled to avoid a double-border effect with the adjacent button's
     // right border.
@@ -33489,7 +34014,7 @@ function getSegmentedControlButtonEmotionStyles(clsPrefix, theme, size, spaced =
         },
         [`&${classWrapperChecked}`]: {
             color: theme.colors.actionDefaultTextDefault,
-            [`${classIcon}`]: {
+            [`& :is(${getIconClassName()})`]: {
                 color: theme.colors.textSecondary
             },
             backgroundColor: theme.colors.backgroundPrimary,
@@ -33915,7 +34440,7 @@ const getMemoizedNavButtonActiveCss = memoize((theme)=>importantify({
         borderRadius: theme.borders.borderRadiusSm,
         background: theme.colors.actionDefaultBackgroundPress,
         button: {
-            '&:enabled:not(:hover):not(:active) > .anticon': {
+            [`&:enabled:not(:hover):not(:active) > :is(${getIconClassName()})`]: {
                 color: theme.colors.actionTertiaryTextPress
             }
         }
@@ -33972,7 +34497,7 @@ const NavButton = /*#__PURE__*/ React__default.forwardRef(// eslint-disable-next
             active ? getMemoizedNavButtonActiveCss(theme) : undefined,
             dangerouslyAppendEmotionCSS
         ],
-        children: /*#__PURE__*/ jsx(Button$1, {
+        children: /*#__PURE__*/ jsx(Button, {
             ref: ref,
             icon: icon,
             onClick: onClick,
@@ -34333,7 +34858,7 @@ function PanelHeader({ children, dangerouslyAppendEmotionCSS, componentId, close
                 })
             }),
             contentContext.closable ? /*#__PURE__*/ jsx("div", {
-                children: /*#__PURE__*/ jsx(Button$1, {
+                children: /*#__PURE__*/ jsx(Button, {
                     componentId: componentId ? `${componentId}.close` : 'codegen_design-system_src_design-system_sidebar_sidebar.tsx_427',
                     size: "small",
                     icon: closeIcon ?? /*#__PURE__*/ jsx(CloseIcon, {}),
@@ -34381,7 +34906,7 @@ function PanelBody({ children, dangerouslyAppendEmotionCSS }) {
     return /*#__PURE__*/ jsx("div", {
         ref: bodyRef,
         // Needed to make panel body content focusable when scrollable for keyboard-only users to be able to focus & scroll
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex
         tabIndex: shouldBeFocusable ? 0 : -1,
         css: [
             getMemoizedPanelBodyCss(theme),
@@ -34426,303 +34951,6 @@ const Sidebar = /* #__PURE__ */ (()=>{
     return Sidebar;
 })();
 
-const ROOT_STYLES = /*#__PURE__*/ css({
-    position: 'relative',
-    display: 'flex',
-    alignItems: 'center',
-    '&[data-orientation="vertical"]': {
-        flexDirection: 'column',
-        width: 20,
-        height: 100
-    },
-    '&[data-orientation="horizontal"]': {
-        height: 20,
-        width: 200
-    }
-});
-const Root$3 = // eslint-disable-next-line react-component-name/react-component-name -- TODO(FEINF-4716)
-/*#__PURE__*/ forwardRef((props, ref)=>{
-    return /*#__PURE__*/ jsx(RadixSlider.Root, {
-        ...addDebugOutlineIfEnabled(),
-        css: ROOT_STYLES,
-        ...props,
-        ref: ref
-    });
-});
-const getTrackStyles = memoize((theme)=>/*#__PURE__*/ css({
-        backgroundColor: theme.colors.grey100,
-        position: 'relative',
-        flexGrow: 1,
-        borderRadius: theme.borders.borderRadiusFull,
-        '&[data-orientation="vertical"]': {
-            width: 3
-        },
-        '&[data-orientation="horizontal"]': {
-            height: 3
-        }
-    }));
-const Track = // eslint-disable-next-line react-component-name/react-component-name -- TODO(FEINF-4716)
-/*#__PURE__*/ forwardRef((props, ref)=>{
-    const { theme } = useDesignSystemTheme();
-    return /*#__PURE__*/ jsx(RadixSlider.Track, {
-        css: getTrackStyles(theme),
-        ...props,
-        ref: ref
-    });
-});
-const getRangeStyles = memoize((theme)=>/*#__PURE__*/ css({
-        backgroundColor: theme.colors.primary,
-        position: 'absolute',
-        borderRadius: theme.borders.borderRadiusFull,
-        height: '100%',
-        '&[data-disabled]': {
-            backgroundColor: theme.colors.grey100
-        }
-    }));
-const Range = // eslint-disable-next-line react-component-name/react-component-name -- TODO(FEINF-4716)
-/*#__PURE__*/ forwardRef((props, ref)=>{
-    const { theme } = useDesignSystemTheme();
-    return /*#__PURE__*/ jsx(RadixSlider.Range, {
-        css: getRangeStyles(theme),
-        ...props,
-        ref: ref
-    });
-});
-const getThumbStyles = memoize((theme)=>/*#__PURE__*/ css({
-        display: 'block',
-        width: 20,
-        height: 20,
-        backgroundColor: theme.colors.actionPrimaryBackgroundDefault,
-        boxShadow: 'none',
-        borderRadius: theme.borders.borderRadiusFull,
-        outline: 'none',
-        '&:hover': {
-            backgroundColor: theme.colors.actionPrimaryBackgroundHover
-        },
-        '&:focus': {
-            backgroundColor: theme.colors.actionPrimaryBackgroundPress
-        },
-        '&[data-disabled]': {
-            backgroundColor: theme.colors.grey200,
-            boxShadow: 'none'
-        }
-    }));
-const Thumb = // eslint-disable-next-line react-component-name/react-component-name -- TODO(FEINF-4716)
-/*#__PURE__*/ forwardRef((props, ref)=>{
-    const { theme } = useDesignSystemTheme();
-    return /*#__PURE__*/ jsx(RadixSlider.Thumb, {
-        css: getThumbStyles(theme),
-        "aria-label": "Slider thumb",
-        ...props,
-        ref: ref
-    });
-});
-
-var Slider = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  Range: Range,
-  Root: Root$3,
-  Thumb: Thumb,
-  Track: Track
-});
-
-var shim = {exports: {}};
-
-var useSyncExternalStoreShim_production = {};
-
-/**
- * @license React
- * use-sync-external-store-shim.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredUseSyncExternalStoreShim_production;
-
-function requireUseSyncExternalStoreShim_production () {
-	if (hasRequiredUseSyncExternalStoreShim_production) return useSyncExternalStoreShim_production;
-	hasRequiredUseSyncExternalStoreShim_production = 1;
-	var React = React__default;
-	function is(x, y) {
-	  return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
-	}
-	var objectIs = "function" === typeof Object.is ? Object.is : is,
-	  useState = React.useState,
-	  useEffect = React.useEffect,
-	  useLayoutEffect = React.useLayoutEffect,
-	  useDebugValue = React.useDebugValue;
-	function useSyncExternalStore$2(subscribe, getSnapshot) {
-	  var value = getSnapshot(),
-	    _useState = useState({ inst: { value: value, getSnapshot: getSnapshot } }),
-	    inst = _useState[0].inst,
-	    forceUpdate = _useState[1];
-	  useLayoutEffect(
-	    function () {
-	      inst.value = value;
-	      inst.getSnapshot = getSnapshot;
-	      checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
-	    },
-	    [subscribe, value, getSnapshot]
-	  );
-	  useEffect(
-	    function () {
-	      checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
-	      return subscribe(function () {
-	        checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
-	      });
-	    },
-	    [subscribe]
-	  );
-	  useDebugValue(value);
-	  return value;
-	}
-	function checkIfSnapshotChanged(inst) {
-	  var latestGetSnapshot = inst.getSnapshot;
-	  inst = inst.value;
-	  try {
-	    var nextValue = latestGetSnapshot();
-	    return !objectIs(inst, nextValue);
-	  } catch (error) {
-	    return true;
-	  }
-	}
-	function useSyncExternalStore$1(subscribe, getSnapshot) {
-	  return getSnapshot();
-	}
-	var shim =
-	  "undefined" === typeof window ||
-	  "undefined" === typeof window.document ||
-	  "undefined" === typeof window.document.createElement
-	    ? useSyncExternalStore$1
-	    : useSyncExternalStore$2;
-	useSyncExternalStoreShim_production.useSyncExternalStore =
-	  void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim;
-	return useSyncExternalStoreShim_production;
-}
-
-var useSyncExternalStoreShim_development = {};
-
-/**
- * @license React
- * use-sync-external-store-shim.development.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredUseSyncExternalStoreShim_development;
-
-function requireUseSyncExternalStoreShim_development () {
-	if (hasRequiredUseSyncExternalStoreShim_development) return useSyncExternalStoreShim_development;
-	hasRequiredUseSyncExternalStoreShim_development = 1;
-	"production" !== process.env.NODE_ENV &&
-	  (function () {
-	    function is(x, y) {
-	      return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
-	    }
-	    function useSyncExternalStore$2(subscribe, getSnapshot) {
-	      didWarnOld18Alpha ||
-	        void 0 === React.startTransition ||
-	        ((didWarnOld18Alpha = true),
-	        console.error(
-	          "You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
-	        ));
-	      var value = getSnapshot();
-	      if (!didWarnUncachedGetSnapshot) {
-	        var cachedValue = getSnapshot();
-	        objectIs(value, cachedValue) ||
-	          (console.error(
-	            "The result of getSnapshot should be cached to avoid an infinite loop"
-	          ),
-	          (didWarnUncachedGetSnapshot = true));
-	      }
-	      cachedValue = useState({
-	        inst: { value: value, getSnapshot: getSnapshot }
-	      });
-	      var inst = cachedValue[0].inst,
-	        forceUpdate = cachedValue[1];
-	      useLayoutEffect(
-	        function () {
-	          inst.value = value;
-	          inst.getSnapshot = getSnapshot;
-	          checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
-	        },
-	        [subscribe, value, getSnapshot]
-	      );
-	      useEffect(
-	        function () {
-	          checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
-	          return subscribe(function () {
-	            checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
-	          });
-	        },
-	        [subscribe]
-	      );
-	      useDebugValue(value);
-	      return value;
-	    }
-	    function checkIfSnapshotChanged(inst) {
-	      var latestGetSnapshot = inst.getSnapshot;
-	      inst = inst.value;
-	      try {
-	        var nextValue = latestGetSnapshot();
-	        return !objectIs(inst, nextValue);
-	      } catch (error) {
-	        return true;
-	      }
-	    }
-	    function useSyncExternalStore$1(subscribe, getSnapshot) {
-	      return getSnapshot();
-	    }
-	    "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
-	      "function" ===
-	        typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart &&
-	      __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-	    var React = React__default,
-	      objectIs = "function" === typeof Object.is ? Object.is : is,
-	      useState = React.useState,
-	      useEffect = React.useEffect,
-	      useLayoutEffect = React.useLayoutEffect,
-	      useDebugValue = React.useDebugValue,
-	      didWarnOld18Alpha = false,
-	      didWarnUncachedGetSnapshot = false,
-	      shim =
-	        "undefined" === typeof window ||
-	        "undefined" === typeof window.document ||
-	        "undefined" === typeof window.document.createElement
-	          ? useSyncExternalStore$1
-	          : useSyncExternalStore$2;
-	    useSyncExternalStoreShim_development.useSyncExternalStore =
-	      void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim;
-	    "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
-	      "function" ===
-	        typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
-	      __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
-	  })();
-	return useSyncExternalStoreShim_development;
-}
-
-var hasRequiredShim;
-
-function requireShim () {
-	if (hasRequiredShim) return shim.exports;
-	hasRequiredShim = 1;
-
-	if (process.env.NODE_ENV === 'production') {
-	  shim.exports = requireUseSyncExternalStoreShim_production();
-	} else {
-	  shim.exports = requireUseSyncExternalStoreShim_development();
-	}
-	return shim.exports;
-}
-
-var shimExports = requireShim();
-
 // eslint-disable-next-line @databricks/no-restricted-imports-regexp -- we can directly import antd icons here in order to wrap them for use elsewhere in the design system
 function React18CompatibleIconComponent(IconComponent) {
     return IconComponent;
@@ -34736,7 +34964,7 @@ function React18CompatibleIconComponent(IconComponent) {
  * use Du Bois icons from `__generated/icons`.
  */ const LegacyEllipsisOutlined = React18CompatibleIconComponent(EllipsisOutlined);
 
-const ButtonGroup = Button$2.Group;
+const ButtonGroup = Button$1.Group;
 const DropdownButton = (props)=>{
     const { theme } = useDesignSystemTheme();
     const { getPopupContainer: getContextPopupContainer, getPrefixCls } = useDesignSystemContext();
@@ -34763,7 +34991,7 @@ const DropdownButton = (props)=>{
     } else {
         dropdownProps.placement = 'bottomRight';
     }
-    const leftButton = /*#__PURE__*/ jsxs(Button$1, {
+    const leftButton = /*#__PURE__*/ jsxs(Button, {
         componentId: componentId ? `${componentId}.primary_button` : 'codegen_design-system_src_design-system_splitbutton_dropdown_dropdownbutton.tsx_148',
         type: type,
         form: form,
@@ -34786,7 +35014,7 @@ const DropdownButton = (props)=>{
             children
         ]
     });
-    const rightButton = /*#__PURE__*/ jsx(Button$1, {
+    const rightButton = /*#__PURE__*/ jsx(Button, {
         componentId: componentId ? `${componentId}.dropdown_button` : 'codegen_design-system_src_design-system_splitbutton_dropdown_dropdownbutton.tsx_166',
         type: type,
         danger: danger,
@@ -34810,16 +35038,20 @@ const DropdownButton = (props)=>{
         leftButton,
         rightButton
     ]);
-    return /*#__PURE__*/ jsxs(ButtonGroup, {
+    return(// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore [FEINF-3177] TODO: fix to work with React 18 types
+    /*#__PURE__*/ jsxs(ButtonGroup, {
         ...restProps,
         className: classnames(prefixCls, className),
         children: [
             leftButtonToRender,
-            overlay !== undefined ? /*#__PURE__*/ jsx(Dropdown, {
+            overlay !== undefined ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore [FEINF-3177] TODO: fix to work with React 18 types
+            /*#__PURE__*/ jsx(Dropdown, {
                 ...dropdownProps,
                 overlay: overlay,
                 children: rightButtonToRender
-            }) : /*#__PURE__*/ jsxs(Root$a, {
+            }) : /*#__PURE__*/ jsxs(Root$8, {
                 ...dropdownMenuRootProps,
                 itemHtmlType: htmlType === 'submit' ? 'submit' : undefined,
                 children: [
@@ -34834,7 +35066,7 @@ const DropdownButton = (props)=>{
                 ]
             })
         ]
-    });
+    }));
 };
 
 const BUTTON_HORIZONTAL_PADDING = 12;
@@ -34844,37 +35076,41 @@ const SPLIT_BUTTON_CONTAINER_CSS = {
     verticalAlign: 'middle'
 };
 function getSplitButtonEmotionStyles(classNamePrefix, theme, size) {
-    const classDefault = `.${classNamePrefix}-btn`;
-    const classPrimary = `.${classNamePrefix}-btn-primary`;
+    const btn = (suffix = '')=>getBtnClassName(classNamePrefix, suffix, '');
+    const primary = (suffix = '')=>getBtnClassName(classNamePrefix, `-primary${suffix}`, '');
     const classDropdownTrigger = `.${classNamePrefix}-dropdown-trigger`;
     const classSmall = `.${classNamePrefix}-btn-group-sm`;
+    const iconClass = getIconClassName();
+    const iconSelector = `:is(${iconClass})`;
+    const iconStateSelectors = `${iconClass}, &:hover ${iconSelector}, &:active ${iconSelector}, &:focus-visible ${iconSelector}`;
     const styles = {
-        [classDefault]: {
+        [btn()]: {
             ...getDefaultStyles(theme),
             boxShadow: 'none',
             height: size === 'small' ? theme.general.iconSize : theme.general.heightSm,
-            padding: `4px ${BUTTON_HORIZONTAL_PADDING}px`,
+            // Small segments use compact padding so the native segment doesn't render wider than AntD.
+            padding: size === 'small' ? `0px ${theme.spacing.sm}px` : `4px ${BUTTON_HORIZONTAL_PADDING}px`,
             '&:focus-visible': {
                 outlineStyle: 'solid',
                 outlineWidth: '2px',
                 outlineOffset: '-2px',
                 outlineColor: theme.colors.actionDefaultBorderFocus
             },
-            '.anticon, &:focus-visible .anticon': {
+            [`${iconClass}, &:focus-visible ${iconSelector}`]: {
                 color: theme.colors.textSecondary
             },
-            '&:hover .anticon': {
+            [`&:hover ${iconSelector}`]: {
                 color: theme.colors.actionDefaultIconHover
             },
-            '&:active .anticon': {
+            [`&:active ${iconSelector}`]: {
                 color: theme.colors.actionDefaultIconPress
             }
         },
-        [`${classDefault}:first-child`]: {
+        [btn(':first-child')]: {
             borderTopRightRadius: '0px !important',
             borderBottomRightRadius: '0px !important'
         },
-        [classPrimary]: {
+        [primary()]: {
             ...getPrimaryStyles(theme),
             boxShadow: 'none',
             [`&:first-child`]: {
@@ -34890,7 +35126,7 @@ function getSplitButtonEmotionStyles(classNamePrefix, theme, size) {
                 outlineOffset: '-3px',
                 outlineColor: theme.colors.white
             },
-            '.anticon, &:hover .anticon, &:active .anticon, &:focus-visible .anticon': {
+            [iconStateSelectors]: {
                 color: theme.colors.actionPrimaryIcon
             }
         },
@@ -34906,7 +35142,7 @@ function getSplitButtonEmotionStyles(classNamePrefix, theme, size) {
             }
         },
         '&&': {
-            [`[disabled], ${classPrimary}[disabled]`]: {
+            [`[disabled], ${primary('[disabled]')}`]: {
                 ...getDisabledSplitButtonStyles(theme),
                 boxShadow: 'none',
                 [`&:first-child`]: {
@@ -34916,23 +35152,31 @@ function getSplitButtonEmotionStyles(classNamePrefix, theme, size) {
                 [classDropdownTrigger]: {
                     borderLeft: `1px solid ${theme.colors.actionPrimaryIcon}`
                 },
-                '.anticon, &:hover .anticon, &:active .anticon, &:focus-visible .anticon': {
+                [iconStateSelectors]: {
                     color: theme.colors.actionDisabledText
                 }
             },
-            [`${classPrimary}[disabled]`]: {
+            [primary('[disabled]')]: {
                 ...getDisabledPrimarySplitButtonStyles(theme),
-                '.anticon, &:hover .anticon, &:active .anticon, &:focus-visible .anticon': {
+                [iconStateSelectors]: {
                     color: theme.colors.actionPrimaryTextDefault
                 }
             }
         },
-        [`${classDefault}:not(:first-child)`]: {
+        [btn(':not(:first-child)')]: {
             width: theme.general.heightSm,
             padding: '3px !important',
             borderTopLeftRadius: '0px !important',
             borderBottomLeftRadius: '0px !important'
         },
+        // Collapse adjacent `.db-btn` segments' borders into a single 1px divider.
+        '.db-btn:not(:first-child)': {
+            marginInlineStart: -1
+        },
+        // Raise the hovered/focused/active `.db-btn` segment so its border paints over the neighbor.
+        '.db-btn:hover, .db-btn:focus-visible, .db-btn:active': {
+            zIndex: 2
+        },
         ...getAnimationCss(theme.options.enableAnimation)
     };
     const importantStyles = importantify(styles);
@@ -34977,7 +35221,7 @@ const SplitButton = (props)=>{
         children: /*#__PURE__*/ jsx("div", {
             ref: ref,
             css: SPLIT_BUTTON_CONTAINER_CSS,
-            children: loading ? /*#__PURE__*/ jsx(Button$1, {
+            children: loading ? /*#__PURE__*/ jsx(Button, {
                 componentId: "codegen_design-system_src_design-system_splitbutton_splitbutton.tsx_163",
                 type: type === 'default' ? undefined : type,
                 style: loadingButtonStyle,
@@ -35411,7 +35655,7 @@ const TabsListContext = /*#__PURE__*/ React__default.createContext({
         current: null
     }
 });
-const Root$2 = /*#__PURE__*/ React__default.forwardRef(// eslint-disable-next-line react-component-name/react-component-name -- TODO(FEINF-4716)
+const Root$1 = /*#__PURE__*/ React__default.forwardRef(// eslint-disable-next-line react-component-name/react-component-name -- TODO(FEINF-4716)
 ({ value, defaultValue, onValueChange, componentId, analyticsEvents, valueHasNoPii, ...props }, forwardedRef)=>{
     const emitOnView = safex('databricks.fe.observability.defaultComponentView.tabs', false);
     const isControlled = value !== undefined;
@@ -35527,7 +35771,7 @@ const List = /*#__PURE__*/ React__default.forwardRef(// eslint-disable-next-line
                         styles['addButtonContainer'],
                         addButtonProps.dangerouslyAppendEmotionCSS
                     ],
-                    children: /*#__PURE__*/ jsx(Button$1, {
+                    children: /*#__PURE__*/ jsx(Button, {
                         icon: /*#__PURE__*/ jsx(PlusIcon, {}),
                         size: "small",
                         "aria-label": "Add tab",
@@ -35713,8 +35957,6 @@ const Trigger$1 = /*#__PURE__*/ React__default.forwardRef(// eslint-disable-next
     });
 });
 const Content$1 = /*#__PURE__*/ React__default.forwardRef(({ mountMode = 'active', children, ...props }, forwardedRef)=>{
-    const { theme } = useDesignSystemTheme();
-    const css = getMemoizedContentStyles(theme);
     const { activeValue } = React__default.useContext(TabsRootContext);
     const shouldSetActivated = props.value === activeValue;
     const [hasBeenActivated, setHasBeenActivated] = React__default.useState(shouldSetActivated);
@@ -35722,7 +35964,7 @@ const Content$1 = /*#__PURE__*/ React__default.forwardRef(({ mountMode = 'active
         setHasBeenActivated(true);
     }
     return /*#__PURE__*/ jsx(RadixTabs.Content, {
-        css: css,
+        css: CONTENT_STYLES,
         ...props,
         ref: forwardedRef,
         forceMount: mountMode === 'force' || mountMode === 'preserve' || undefined,
@@ -35742,13 +35984,12 @@ const ADD_BUTTON_CONTAINER_CSS = {
     flex: 1
 };
 const ADD_BUTTON_CSS = {
-    margin: '2px 0 6px 0'
+    margin: 'var(--db-tabs-add-button-margin-top) 0 var(--db-tabs-add-button-margin-bottom) 0'
 };
 const getListStyles = (theme, shadowScrollStylesBackgroundColor, scrollbarHeight)=>{
-    const containerStyles = getCommonTabsListStyles(theme);
     return {
         container: {
-            ...containerStyles,
+            ...COMMON_TABS_LIST_STYLES,
             contain: 'layout paint'
         },
         root: SCROLL_ROOT_CSS,
@@ -35767,11 +36008,11 @@ const getListStyles = (theme, shadowScrollStylesBackgroundColor, scrollbarHeight
         },
         thumb: {
             flex: 1,
-            background: theme.isDarkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(17, 23, 28, 0.2)',
+            background: 'var(--db-tabs-scrollbar-thumb)',
             '&:hover': {
-                background: theme.isDarkMode ? 'rgba(255, 255, 255, 0.3)' : 'rgba(17, 23, 28, 0.3)'
+                background: 'var(--db-tabs-scrollbar-thumb-hover)'
             },
-            borderRadius: theme.borders.borderRadiusSm,
+            borderRadius: 'var(--db-tabs-scrollbar-radius)',
             position: 'relative'
         },
         addButtonContainer: ADD_BUTTON_CONTAINER_CSS,
@@ -35780,69 +36021,69 @@ const getListStyles = (theme, shadowScrollStylesBackgroundColor, scrollbarHeight
 };
 const getMemoizedListStyles = memoize(getListStyles, (theme, bg, scrollbarHeight)=>`${themeMemoKey(theme)}|${bg ?? ''}|${scrollbarHeight ?? ''}`);
 const getTriggerStyles = (theme, isClosable)=>{
-    const commonTriggerStyles = getCommonTabsTriggerStyles(theme);
+    const iconSelector = `:is(${getIconClassName()})`;
     return {
         trigger: {
-            ...commonTriggerStyles,
+            ...COMMON_TABS_TRIGGER_STYLES,
             alignItems: 'center',
             justifyContent: isClosable ? 'space-between' : 'center',
-            minWidth: isClosable ? theme.spacing.lg + theme.spacing.md : theme.spacing.lg,
-            color: theme.colors.textSecondary,
-            lineHeight: theme.typography.lineHeightBase,
+            minWidth: isClosable ? 'var(--db-tabs-trigger-min-width-closable)' : 'var(--db-tabs-trigger-min-width)',
+            color: 'var(--db-tabs-text)',
+            lineHeight: 'var(--db-tabs-line-height)',
             whiteSpace: 'nowrap',
             border: 'none',
-            padding: `${theme.spacing.xs}px 0 ${theme.spacing.sm}px 0`,
+            padding: 'var(--db-tabs-trigger-padding-top) 0 var(--db-tabs-trigger-padding-bottom) 0',
             // The close icon is hidden on inactive tabs until the tab is hovered
             // Checking for the last icon to handle cases where the tab name includes an icon
-            [`& > .anticon:last-of-type`]: {
+            [`& > ${iconSelector}:last-of-type`]: {
                 visibility: 'hidden'
             },
             '&:hover': {
                 cursor: 'pointer',
-                color: theme.colors.actionDefaultTextHover,
-                [`& > .anticon:last-of-type`]: {
+                color: 'var(--db-tabs-text-hover)',
+                [`& > ${iconSelector}:last-of-type`]: {
                     visibility: 'visible'
                 }
             },
             '&:active': {
-                color: theme.colors.actionDefaultTextPress
+                color: 'var(--db-tabs-text-press)'
             },
             outlineStyle: 'none',
-            outlineColor: theme.colors.actionDefaultBorderFocus,
+            outlineColor: 'var(--db-tabs-focus-ring)',
             '&:focus-visible': {
                 outlineStyle: 'auto'
             },
             '&[data-state="active"]': {
-                color: theme.colors.textPrimary,
+                color: 'var(--db-tabs-text-active)',
                 // Use box-shadow instead of border to prevent it from affecting the size of the element, which results in visual
                 // jumping when switching tabs.
-                boxShadow: `inset 0 -4px 0 ${theme.colors.actionPrimaryBackgroundDefault}`,
+                boxShadow: 'inset 0 -4px 0 var(--db-tabs-indicator)',
                 // The close icon is always visible on active tabs
-                [`& > .anticon:last-of-type`]: {
+                [`& > ${iconSelector}:last-of-type`]: {
                     visibility: 'visible'
                 }
             },
             '&[data-disabled]': {
-                color: theme.colors.actionDisabledText,
+                color: 'var(--db-tabs-text-disabled)',
                 '&:hover': {
                     cursor: 'not-allowed'
                 }
             }
         },
         closeSmallIcon: {
-            marginLeft: theme.spacing.xs,
-            color: theme.colors.textSecondary,
+            marginLeft: 'var(--db-tabs-close-icon-gap)',
+            color: 'var(--db-tabs-text)',
             '&:hover': {
-                color: theme.colors.actionDefaultTextHover
+                color: 'var(--db-tabs-text-hover)'
             },
             '&:active': {
-                color: theme.colors.actionDefaultTextPress
+                color: 'var(--db-tabs-text-press)'
             }
         },
         // `trailingActions` only: the container is the visual tab (takes the consumer's className); the
         // inner trigger is a transparent passthrough.
         triggerContainer: {
-            ...commonTriggerStyles,
+            ...COMMON_TABS_TRIGGER_STYLES,
             display: 'inline-flex',
             alignItems: 'center',
             // Fill the list height so the active-tab underline (`inset 0 -4px` box-shadow below) lands on
@@ -35850,42 +36091,42 @@ const getTriggerStyles = (theme, isClosable)=>{
             // 20px line box (= heightSm); this branch's tallest child is a small Button, so match the
             // height explicitly instead — padding would overflow the list. Centered content keeps the
             // trailing actions and close icon in place; only the underline drops to the baseline.
-            height: theme.general.heightSm,
+            height: 'var(--db-tabs-height)',
             position: 'relative',
             // Scope the inner trigger's z-index:-1 hit-area overlay (see `triggerInner`) to this tab.
             isolation: 'isolate',
-            color: theme.colors.textSecondary,
+            color: 'var(--db-tabs-text)',
             // Focus lands on the inner button; draw the ring on the whole tab instead. Inset `outline`
             // (not box-shadow) so the strip's overflow can't clip it and it won't clobber an active underline.
             '&:has([role="tab"]:focus-visible)': {
-                outline: `2px solid ${theme.colors.actionDefaultBorderFocus}`,
+                outline: 'var(--db-tabs-focus-ring-width) solid var(--db-tabs-focus-ring)',
                 outlineOffset: '-2px'
             },
             '&:hover': {
                 cursor: 'pointer',
-                color: theme.colors.actionDefaultTextHover
+                color: 'var(--db-tabs-text-hover)'
             },
             '&:active': {
-                color: theme.colors.actionDefaultTextPress
+                color: 'var(--db-tabs-text-press)'
             },
             '&[data-state="active"]': {
-                color: theme.colors.textPrimary,
+                color: 'var(--db-tabs-text-active)',
                 // Use box-shadow instead of border to prevent it from affecting the size of the element, which results in visual
                 // jumping when switching tabs.
-                boxShadow: `inset 0 -4px 0 ${theme.colors.actionPrimaryBackgroundDefault}`
+                boxShadow: 'inset 0 -4px 0 var(--db-tabs-indicator)'
             },
             '&[data-disabled]': {
-                color: theme.colors.actionDisabledText,
+                color: 'var(--db-tabs-text-disabled)',
                 '&:hover': {
                     cursor: 'not-allowed'
                 }
             },
             // Mirror the single-trigger branch: hide the close icon on inactive tabs but keep its box
             // reserved (`visibility`, not width) so it doesn't shift the tab, and reveal on hover/active.
-            [`& > .anticon:last-of-type`]: {
+            [`& > ${iconSelector}:last-of-type`]: {
                 visibility: 'hidden'
             },
-            [`&:hover > .anticon:last-of-type, &[data-state="active"] > .anticon:last-of-type`]: {
+            [`&:hover > ${iconSelector}:last-of-type, &[data-state="active"] > ${iconSelector}:last-of-type`]: {
                 visibility: 'visible'
             }
         },
@@ -35919,18 +36160,18 @@ const getTriggerStyles = (theme, isClosable)=>{
     };
 };
 const getMemoizedTriggerStyles = memoize(getTriggerStyles, (theme, isClosable)=>`${themeMemoKey(theme)}|${isClosable}`);
-const getMemoizedContentStyles = memoize((theme)=>({
-        color: theme.colors.textPrimary,
-        '&[data-state="inactive"]': {
-            display: 'none'
-        }
-    }));
+const CONTENT_STYLES = {
+    color: 'var(--db-tabs-content-text)',
+    '&[data-state="inactive"]': {
+        display: 'none'
+    }
+};
 
 var Tabs = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Content: Content$1,
   List: List,
-  Root: Root$2,
+  Root: Root$1,
   Trigger: Trigger$1
 });
 
@@ -36121,93 +36362,6 @@ const ToggleButton = /*#__PURE__*/ forwardRef(// eslint-disable-next-line react-
     });
 });
 
-const getRootStyles = memoize((theme)=>/*#__PURE__*/ css({
-        alignItems: 'center',
-        backgroundColor: theme.colors.backgroundSecondary,
-        border: `1px solid ${theme.colors.border}`,
-        borderRadius: theme.borders.borderRadiusSm,
-        boxShadow: theme.shadows.lg,
-        display: 'flex',
-        gap: theme.spacing.md,
-        width: 'max-content',
-        padding: theme.spacing.sm
-    }));
-const Root$1 = // eslint-disable-next-line react-component-name/react-component-name -- TODO(FEINF-4716)
-/*#__PURE__*/ forwardRef((props, ref)=>{
-    const { theme } = useDesignSystemTheme();
-    return /*#__PURE__*/ jsx(RadixToolbar.Root, {
-        ...addDebugOutlineIfEnabled(),
-        css: getRootStyles(theme),
-        ...props,
-        ref: ref
-    });
-});
-const Button = /*#__PURE__*/ forwardRef(// eslint-disable-next-line react-component-name/react-component-name -- TODO(FEINF-4716)
-(props, ref)=>{
-    return /*#__PURE__*/ jsx(RadixToolbar.Button, {
-        ...props,
-        ref: ref
-    });
-});
-const getSeparatorStyles = memoize((theme)=>/*#__PURE__*/ css({
-        alignSelf: 'stretch',
-        backgroundColor: theme.colors.borderDecorative,
-        width: 1
-    }));
-const Separator = /*#__PURE__*/ forwardRef(// eslint-disable-next-line react-component-name/react-component-name -- TODO(FEINF-4716)
-(props, ref)=>{
-    const { theme } = useDesignSystemTheme();
-    return /*#__PURE__*/ jsx(RadixToolbar.Separator, {
-        css: getSeparatorStyles(theme),
-        ...props,
-        ref: ref
-    });
-});
-const Link = // eslint-disable-next-line react-component-name/react-component-name -- TODO(FEINF-4716)
-/*#__PURE__*/ forwardRef((props, ref)=>{
-    return /*#__PURE__*/ jsx(RadixToolbar.Link, {
-        ...props,
-        ref: ref
-    });
-});
-const ToggleGroup = /*#__PURE__*/ forwardRef((props, ref)=>{
-    return /*#__PURE__*/ jsx(RadixToolbar.ToggleGroup, {
-        ...props,
-        ref: ref
-    });
-});
-const getToggleItemStyles = memoize((theme)=>/*#__PURE__*/ css({
-        background: 'none',
-        color: theme.colors.textPrimary,
-        border: 'none',
-        cursor: 'pointer',
-        '&:hover': {
-            color: theme.colors.actionDefaultTextHover
-        },
-        '&[data-state="on"]': {
-            color: theme.colors.actionDefaultTextPress
-        }
-    }));
-const ToggleItem = /*#__PURE__*/ forwardRef(// eslint-disable-next-line react-component-name/react-component-name -- TODO(FEINF-4716)
-(props, ref)=>{
-    const { theme } = useDesignSystemTheme();
-    return /*#__PURE__*/ jsx(RadixToolbar.ToggleItem, {
-        css: getToggleItemStyles(theme),
-        ...props,
-        ref: ref
-    });
-});
-
-var Toolbar = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  Button: Button,
-  Link: Link,
-  Root: Root$1,
-  Separator: Separator,
-  ToggleGroup: ToggleGroup,
-  ToggleItem: ToggleItem
-});
-
 const SWITCHER_ICON_CSS = {
     fontSize: '16px !important'
 };
@@ -36910,7 +37064,7 @@ function getWizardFooterButtons({ goToNextStepOrDone, isLastStep, currentStepInd
             // oxlint-disable-next-line @databricks/no-dynamic-property-value -- Validated through JSX componentId exempt:acae06b0-d74d-44ee-86db-15b3014e2bcf
             componentId: componentId ? `${componentId}.cancel` : undefined
         }, "cancel")),
-        currentStepIndex > 0 && !previousStepButtonHidden && /*#__PURE__*/ jsx(Button$1, {
+        currentStepIndex > 0 && !previousStepButtonHidden && /*#__PURE__*/ jsx(Button, {
             onClick: goToPreviousStep,
             type: "tertiary",
             disabled: previousButtonDisabled,
@@ -36939,7 +37093,7 @@ function getWizardFooterButtons({ goToNextStepOrDone, isLastStep, currentStepInd
     ]);
 }
 function CancelButton({ onCancel, cancelButtonContent, componentId, disabled }) {
-    return /*#__PURE__*/ jsx(Button$1, {
+    return /*#__PURE__*/ jsx(Button, {
         onClick: onCancel,
         type: "tertiary",
         componentId: componentId ?? 'dubois-wizard-footer-cancel',
@@ -36951,12 +37105,12 @@ function ButtonWithTooltip({ tooltipContent, disabled, children, ...props }) {
     return tooltipContent ? /*#__PURE__*/ jsx(Tooltip, {
         componentId: "dubois-wizard-footer-tooltip",
         content: tooltipContent,
-        children: /*#__PURE__*/ jsx(Button$1, {
+        children: /*#__PURE__*/ jsx(Button, {
             ...props,
             disabled: disabled,
             children: children
         })
-    }) : /*#__PURE__*/ jsx(Button$1, {
+    }) : /*#__PURE__*/ jsx(Button, {
         ...props,
         disabled: disabled,
         children: children
@@ -37129,7 +37283,7 @@ function Content({ title, modalTitleWhenCompact, width, children, closeLabel, di
                                     color: "secondary",
                                     children: title
                                 }),
-                                /*#__PURE__*/ jsx(Button$1, {
+                                /*#__PURE__*/ jsx(Button, {
                                     "aria-label": closeLabel,
                                     icon: /*#__PURE__*/ jsx(CloseIcon, {}),
                                     componentId: "documentation-side-bar-close",
@@ -37242,13 +37396,13 @@ function VerticalWizardContent({ width, height, steps: wizardSteps, currentStepI
                     ]
                 }),
                 isCompactStepper && (()=>{
-                    const compactStepperContent = /*#__PURE__*/ jsxs(Root$b, {
+                    const compactStepperContent = /*#__PURE__*/ jsxs(Root$9, {
                         componentId: "codegen_design-system_src_~patterns_wizard_verticalwizardcontent.tsx_93",
                         children: [
                             /*#__PURE__*/ jsx(Trigger$5, {
                                 asChild: true,
                                 children: /*#__PURE__*/ jsx("div", {
-                                    children: /*#__PURE__*/ jsx(Button$1, {
+                                    children: /*#__PURE__*/ jsx(Button, {
                                         icon: /*#__PURE__*/ jsx(ListIcon, {}),
                                         componentId: "dubois-wizard-vertical-compact-show-stepper-popover",
                                         children: verticalCompactButtonContent?.(currentStepIndex, stepperSteps.length)
@@ -37432,13 +37586,32 @@ function WizardControlled({ initialStep = 0, layout = 'vertical', width = '100%'
     });
 }
 
-function WizardModal({ onStepChanged, onCancel, initialStep, steps, onModalClose, localizeStepNumber, cancelButtonContent, nextButtonContent, previousButtonContent, doneButtonContent, enableClickingToSteps, ...modalProps }) {
+const WizardStepNavigationContext = /*#__PURE__*/ createContext(undefined);
+function useWizardStepNavigation() {
+    return useContext(WizardStepNavigationContext);
+}
+function WizardStepNavigationProvider({ goToStep, currentStepIndex, children }) {
+    const value = useMemo(()=>({
+            goToStep,
+            currentStepIndex
+        }), [
+        goToStep,
+        currentStepIndex
+    ]);
+    return /*#__PURE__*/ jsx(WizardStepNavigationContext.Provider, {
+        value: value,
+        children: children
+    });
+}
+
+function WizardModal({ onStepChanged, onValidateStepChange, onCancel, initialStep, steps, onModalClose, localizeStepNumber, cancelButtonContent, nextButtonContent, previousButtonContent, doneButtonContent, enableClickingToSteps, ...modalProps }) {
     const [currentStepIndex, setCurrentStepIndex] = useState(initialStep ?? 0);
     const { onStepsChange, isLastStep, ...footerActions } = useWizardCurrentStep({
         currentStepIndex,
         setCurrentStepIndex,
         totalSteps: steps.length,
-        onStepChanged
+        onStepChanged,
+        onValidateStepChange
     });
     if (steps.length === 0 || !isUndefined(initialStep) && (initialStep < 0 || initialStep >= steps.length)) {
         return null;
@@ -37459,12 +37632,16 @@ function WizardModal({ onStepChanged, onCancel, initialStep, steps, onModalClose
         onCancel: onModalClose,
         size: "wide",
         footer: footerButtons,
-        children: /*#__PURE__*/ jsx(HorizontalWizardStepsContent, {
-            steps: steps,
+        children: /*#__PURE__*/ jsx(WizardStepNavigationProvider, {
+            goToStep: footerActions.goToStep,
             currentStepIndex: currentStepIndex,
-            localizeStepNumber: localizeStepNumber,
-            enableClickingToSteps: Boolean(enableClickingToSteps),
-            goToStep: footerActions.goToStep
+            children: /*#__PURE__*/ jsx(HorizontalWizardStepsContent, {
+                steps: steps,
+                currentStepIndex: currentStepIndex,
+                localizeStepNumber: localizeStepNumber,
+                enableClickingToSteps: Boolean(enableClickingToSteps),
+                goToStep: footerActions.goToStep
+            })
         })
     });
 }
@@ -37542,5 +37719,5 @@ function WizardStepContentWrapper({ header, title, description, alertContent, de
     });
 }
 
-export { hideIconButtonRowStyles as $, useModalContext as A, Button$1 as B, CheckCircleFillIcon as C, DocumentationSidebar as D, Trigger$5 as E, FIXED_VERTICAL_STEPPER_WIDTH as F, InfoSmallIcon as G, Content$7 as H, InfoFillIcon as I, Arrow$2 as J, Tooltip as K, SparkleDoubleIcon as L, MAX_VERTICAL_WIZARD_CONTENT_WIDTH as M, LoadingState as N, OverflowPopover as O, visuallyHidden as P, genSkeletonAnimatedColor as Q, Root$b as R, ShapeTokens as S, Typography as T, getOffsets as U, DesignSystemEventSuppressInteractionProviderContext as V, Wizard as W, DesignSystemEventSuppressInteractionTrueContextValue as X, tableStyles as Y, repeatingElementsStyles as Z, tableClassNames as _, WizardControlled as a, TypeaheadComboboxV2ContextProvider as a$, hideIconButtonActionCellClassName as a0, safex as a1, TitleSkeleton as a2, useDialogComboboxContext as a3, PlusIcon as a4, importantify as a5, getComboboxOptionItemWrapperStyles as a6, getFooterStyles as a7, useDialogComboboxOptionListContext as a8, generateUuidV4 as a9, Checkbox as aA, DialogCombobox as aB, DialogComboboxTrigger as aC, DialogComboboxContent as aD, Select as aE, SelectTrigger as aF, SelectContent as aG, SelectOption as aH, LegacySelect as aI, WarningIcon as aJ, CheckCircleIcon as aK, DangerIcon as aL, Hint as aM, Title$1 as aN, CloseIcon as aO, RestoreAntDDefaultClsPrefix as aP, AccessibleContainer as aQ, DU_BOIS_ENABLE_ANIMATION_CLASSNAME as aR, CircleOffIcon as aS, CircleOutlineIcon as aT, CircleIcon as aU, shimExports as aV, SortAscendingIcon as aW, SortDescendingIcon as aX, SortUnsortedIcon as aY, MinusSquareIcon as aZ, PlusSquareIcon as a_, getContentOptions as aa, findHighlightedOption as ab, highlightOption as ac, Input as ad, SearchIcon as ae, EmptyResults as af, findClosestOptionSibling as ag, DialogComboboxOptionListCheckboxItem as ah, DialogComboboxOptionListSelectItem as ai, DialogComboboxOptionListContextProvider as aj, LoadingSpinner as ak, DialogComboboxOptionList as al, useUniqueId as am, TypeaheadComboboxContextProvider as an, useTypeaheadComboboxContext as ao, useDuboisThemeClass as ap, useDesignTokenOverrideStyles as aq, getComboboxContentWrapperStyles as ar, ClearSelectionButton as as, TypeaheadComboboxSelectedItem$1 as at, CountBadge$1 as au, getValidationStateColor as av, SectionHeader as aw, useComboboxState as ax, useMultipleSelectionState as ay, Radio as az, WizardModal as b, BlockQuoteIcon as b$, useTypeaheadComboboxV2Context as b0, useRadixModalContext as b1, useIsomorphicLayoutEffect as b2, useScrollOptionIntoView as b3, InfoTooltip as b4, getInfoIconStyles as b5, HintRow as b6, getCheckboxStyles as b7, getMenuItemStyles as b8, TypeaheadComboboxSelectedItem as b9, ArrowUpIcon as bA, ArrowsCollapseIcon as bB, ArrowsConnectIcon as bC, ArrowsExpandIcon as bD, ArrowsUpDownIcon as bE, AssistantIcon as bF, AtIcon as bG, Auth0Graphic as bH, Auth0GraphicLarge as bI, AzHorizontalIcon as bJ, AzVerticalIcon as bK, BANNER_MAX_HEIGHT as bL, BANNER_MIN_HEIGHT as bM, BackupIcon as bN, BadgeCodeIcon as bO, BadgeCodeOffIcon as bP, Banner as bQ, BarChartIcon as bR, BarGroupedIcon as bS, BarStackedIcon as bT, BarStackedPercentageIcon as bU, BarsAscendingHorizontalIcon as bV, BarsAscendingVerticalIcon as bW, BarsDescendingHorizontalIcon as bX, BarsDescendingVerticalIcon as bY, BeakerIcon as bZ, BinaryIcon as b_, CountBadge as ba, TypeaheadComboboxMenuItem as bb, AccessDeniedGraphic as bc, Accordion as bd, AccordionPanel as be, AlignCenterIcon as bf, AlignJustifyIcon as bg, AlignLeftIcon as bh, AlignRightIcon as bi, AlignVerticalBottomIcon as bj, AlignVerticalCenterIcon as bk, AlignVerticalTopIcon as bl, AppIcon as bm, ApplyDesignSystemContextOverrides as bn, ApplyDesignSystemFlags as bo, ArrowDownDotIcon as bp, ArrowDownFillIcon as bq, ArrowDownIcon as br, ArrowInIcon as bs, ArrowInTableIcon as bt, ArrowLeftIcon as bu, ArrowOutTableIcon as bv, ArrowOverIcon as bw, ArrowRightIcon as bx, ArrowUpDotIcon as by, ArrowUpFillIcon as bz, WizardStepContentWrapper as c, CloudDownloadIcon as c$, BoldIcon as c0, BookIcon as c1, BookmarkFillIcon as c2, BookmarkIcon as c3, BooksIcon as c4, BracketsCheckIcon as c5, BracketsCurlyIcon as c6, BracketsErrorIcon as c7, BracketsSquareIcon as c8, BracketsXIcon as c9, CertifiedIcon as cA, ChainIcon as cB, ChartLineIcon as cC, CheckCircleBadgeIcon as cD, CheckCircleSmallIcon as cE, CheckIcon as cF, CheckLineIcon as cG, CheckSmallIcon as cH, CheckboxIcon as cI, ChecklistIcon as cJ, ChevronDoubleDownIcon as cK, ChevronDoubleLeftIcon as cL, ChevronDoubleLeftOffIcon as cM, ChevronDoubleRightIcon as cN, ChevronDoubleRightOffIcon as cO, ChevronDoubleUpIcon as cP, ChevronLeftIcon as cQ, ChevronUpIcon as cR, ChipIcon as cS, CircleOffLargeIcon as cT, CircleOutlineLargeIcon as cU, ClipboardIcon as cV, ClockIcon as cW, ClockKeyIcon as cX, ClockOffIcon as cY, CloudCheckIcon as cZ, CloudDatabaseIcon as c_, BranchCheckIcon as ca, BranchIcon as cb, BranchResetIcon as cc, BriefcaseFillIcon as cd, BriefcaseIcon as ce, BrushIcon as cf, BugIcon as cg, CalendarClockIcon as ch, CalendarEventIcon as ci, CalendarIcon as cj, CalendarRangeIcon as ck, CalendarSyncIcon as cl, CameraIcon as cm, CapitalizeIcon as cn, CaretDownSquareIcon as co, CaretUpSquareIcon as cp, CatalogCloudIcon as cq, CatalogGearIcon as cr, CatalogHomeIcon as cs, CatalogIcon as ct, CatalogOffIcon as cu, CatalogSharedIcon as cv, CatalogUserHomeIcon as cw, CellsSquareIcon as cx, CertifiedFillIcon as cy, CertifiedFillSmallIcon as cz, DesignSystemEventProvider as d, ErdIcon as d$, CloudIcon as d0, CloudKeyIcon as d1, CloudModelIcon as d2, CloudOffIcon as d3, CloudUploadIcon as d4, CodeIcon as d5, ColorFillIcon as d6, ColorVars as d7, ColumnIcon as d8, ColumnSplitIcon as d9, DataIcon as dA, DataMaskiingGraphic as dB, DatabaseClockIcon as dC, DatabaseIcon as dD, DatabaseImportIcon as dE, DatePicker as dF, DecimalIcon as dG, DeprecatedIcon as dH, DeprecatedSmallIcon as dI, DesignSystemContext as dJ, DesignSystemEventProviderComponentSubTypes as dK, DesignSystemProvider as dL, DesignSystemThemeContext as dM, DesignSystemThemeProvider as dN, DialogComboboxCountBadge as dO, DialogComboboxCustomButtonTriggerWrapper as dP, DialogComboboxSectionHeader as dQ, DollarIcon as dR, DomainCirclesThree as dS, DomainsIcon as dT, DotsCircleIcon as dU, DownloadIcon as dV, DragIcon as dW, Drawer as dX, DropdownMenu as dY, Empty as dZ, EmptyDashboardGraphic as d_, ColumnTagIcon as da, ColumnsIcon as db, CommandIcon as dc, CommandPaletteIcon as dd, CompassIcon as de, ComponentFinderContext as df, ConnectIcon as dg, Content$2 as dh, ContextMenu$1 as di, CopyIcon as dj, CreditCardIcon as dk, CursorClickIcon as dl, CursorIcon as dm, CursorPagination as dn, CursorTypeIcon as dp, CustomAppIcon as dq, DS_OVERRIDE_TOKENS_WRAPPER_TESTID as dr, DagHorizontalIcon as ds, DagIcon as dt, DagVerticalIcon as du, DangerModal as dv, DangerSmallIcon as dw, DashIcon as dx, DashboardCodeIcon as dy, DashboardIcon as dz, DesignTokenScope as e, H3Icon as e$, ExpandLessIcon as e0, ExpandMoreIcon as e1, FaceFrownIcon as e2, FaceNeutralIcon as e3, FaceSmileIcon as e4, FileCodeIcon as e5, FileCubeIcon as e6, FileDocumentIcon as e7, FileIcon as e8, FileImageIcon as e9, FolderOutlinePipelineIcon as eA, FolderSolidPipelineIcon as eB, FontIcon as eC, ForkHorizontalIcon as eD, ForkIcon as eE, Form as eF, FormContextResetBoundary as eG, FullscreenExitIcon as eH, FullscreenIcon as eI, FunctionIcon as eJ, FunctionInputIcon as eK, GavelIcon as eL, GearFillIcon as eM, GearIcon as eN, GenieCodeIcon as eO, GenieDeepResearchIcon as eP, GiftIcon as eQ, GitCommitIcon as eR, GitMergeIcon as eS, GitRebaseIcon as eT, GlobeIcon as eU, Graphic as eV, GridDashIcon as eW, GridIcon as eX, GroupIcon as eY, H1Icon as eZ, H2Icon as e_, FileLockIcon as ea, FileModelIcon as eb, FileNewIcon as ec, FilePipelineIcon as ed, FilterFillIcon as ee, FilterIcon as ef, FlagPointerIcon as eg, FloatIcon as eh, FlowIcon as ei, FlowsIcon as ej, FolderBranchFillIcon as ek, FolderBranchIcon as el, FolderCloudFilledIcon as em, FolderCloudIcon as en, FolderCubeIcon as eo, FolderCubeOutlineIcon as ep, FolderFillIcon as eq, FolderHomeIcon as er, FolderIcon as es, FolderNewIcon as et, FolderNodeIcon as eu, FolderOpenBranchIcon as ev, FolderOpenCloudIcon as ew, FolderOpenCubeIcon as ex, FolderOpenIcon as ey, FolderOpenPipelineIcon as ez, useDesignSystemContext as f, MarkdownIcon as f$, H4Icon as f0, H5Icon as f1, H6Icon as f2, HashIcon as f3, HistoryIcon as f4, HomeIcon as f5, Icon as f6, ImageIcon as f7, IndentDecreaseIcon as f8, IndentIncreaseIcon as f9, LegacyTooltip as fA, LetterFormatIcon as fB, LettersIcon as fC, LettersNumbersIcon as fD, LibrariesIcon as fE, LifesaverIcon as fF, LightbulbIcon as fG, LightningCircleFillIcon as fH, LightningIcon as fI, LinearLineIcon as fJ, LinkIcon as fK, LinkOffIcon as fL, ListBorderIcon as fM, ListClearIcon as fN, ListIcon as fO, ListNumberIcon as fP, Listbox as fQ, LoadingIcon as fR, LoadingStateContext as fS, LockFillIcon as fT, LockIcon as fU, LockShareIcon as fV, LockUnlockedIcon as fW, LoopIcon as fX, LowercaseIcon as fY, MailIcon as fZ, MapIcon as f_, InfinityIcon as fa, InfoBookIcon as fb, InfoIcon as fc, IngestionIcon as fd, ItalicIcon as fe, JoinOperatorIcon as ff, KeyIcon as fg, KeyboardIcon as fh, LakebaseCatalogIcon as fi, LakebaseIcon as fj, LakeflowDesignerIcon as fk, LakewatchAlertIcon as fl, LakewatchDatasourceIcon as fm, LakewatchDetectionRuleIcon as fn, LakewatchParserIcon as fo, LayerGraphIcon as fp, LayerIcon as fq, Layout as fr, LeafIcon as fs, LegacyForm as ft, LegacyFormDubois as fu, LegacyOptGroup as fv, LegacyOption as fw, LegacySelectOptGroup as fx, LegacySelectOption as fy, LegacyTable as fz, useDesignSystemTheme as g, PlayCircleIcon as g$, McpIcon as g0, MeasureIcon as g1, MegaphoneIcon as g2, MenuIcon as g3, MinusCircleFillIcon as g4, MinusCircleIcon as g5, MinusCircleSmallIcon as g6, MissingBranchGraphic as g7, MissingGraphic as g8, ModelsIcon as g9, PageIcon as gA, PageLastIcon as gB, PageTopIcon as gC, Pagination as gD, Panel as gE, PanelBody as gF, PanelDockedIcon as gG, PanelFloatingIcon as gH, PanelHeader as gI, PanelHeaderButtons as gJ, PanelHeaderTitle as gK, PaperclipIcon as gL, PassFailChecklistIcon as gM, PauseIcon as gN, PencilFillIcon as gO, PencilIcon as gP, PencilSparkleIcon as gQ, PieChartIcon as gR, PillControl as gS, PinCancelIcon as gT, PinFillIcon as gU, PinIcon as gV, PipelineCodeIcon as gW, PipelineCubeIcon as gX, PipelineIcon as gY, PivotOperatorIcon as gZ, PlayCircleFillIcon as g_, MonotoneLineIcon as ga, MonthPickerGrid as gb, MoonIcon as gc, Nav as gd, NavButton as ge, NavigationMenu as gf, NeonProjectIcon as gg, NewChatIcon as gh, NewTabIcon as gi, NewWindowIcon as gj, NoCaseIcon as gk, NoIcon as gl, NotebookIcon as gm, NotebookPipelineIcon as gn, NotificationIcon as go, NotificationOffIcon as gp, NumberFormatIcon as gq, NumbersIcon as gr, OfficeIcon as gs, OntologyIcon as gt, OutageGraphic as gu, Overflow as gv, OverflowHorizontalIcon as gw, OverflowIcon as gx, PageBottomIcon as gy, PageFirstIcon as gz, WarningFillIcon as h, SidebarSyncIcon as h$, PlayDoubleIcon as h0, PlayIcon as h1, PlayMultipleIcon as h2, PlugIcon as h3, PlusCircleFillIcon as h4, PlusCircleIcon as h5, PlusCircleSmallIcon as h6, PlusMinusSquareIcon as h7, Popover as h8, PositionBottomIcon as h9, RunIcon as hA, RunningIcon as hB, SMALL_BUTTON_HEIGHT$2 as hC, SaveClockIcon as hD, SaveIcon as hE, SchemaIcon as hF, SchoolIcon as hG, SearchDataIcon as hH, SegmentedControlButton as hI, SegmentedControlGroup as hJ, SelectContext as hK, SelectContextProvider as hL, SelectOptionGroup as hM, SendIcon as hN, ShareIcon as hO, ShareNodesIcon as hP, ShieldCheckIcon as hQ, ShieldIcon as hR, ShieldOffIcon as hS, ShortcutIcon as hT, Sidebar as hU, SidebarAutoIcon as hV, SidebarClosedIcon as hW, SidebarCollapseIcon as hX, SidebarExpandIcon as hY, SidebarIcon as hZ, SidebarOpenIcon as h_, PositionLeftIcon as ha, PositionRightIcon as hb, PositionTopIcon as hc, PreviewCard as hd, Progress as he, PullRequestIcon as hf, PuzzleIcon as hg, QueryEditorIcon as hh, QueryIcon as hi, QuestionMarkFillIcon as hj, QuestionMarkIcon as hk, RadioIcon as hl, RadioTile as hm, RangePicker as hn, ReaderModeIcon as ho, RedoIcon as hp, RefreshIcon as hq, RefreshPlayIcon as hr, RefreshXIcon as hs, ReplyIcon as ht, ResizeIcon as hu, RhfForm as hv, RichTextIcon as hw, RobotIcon as hx, RocketIcon as hy, RowsIcon as hz, DangerFillIcon as i, TagColumnIcon as i$, SimpleSelect as i0, SimpleSelectOption as i1, SimpleSelectOptionGroup as i2, SlashSquareIcon as i3, Slider as i4, SlidersIcon as i5, SnippetIcon as i6, SortCustomHorizontalIcon as i7, SortCustomVerticalIcon as i8, SortHorizontalAscendingIcon as i9, Stepper as iA, StopCircleFillIcon as iB, StopCircleIcon as iC, StopIcon as iD, StoredProcedureIcon as iE, StorefrontIcon as iF, StreamIcon as iG, StrikeThroughIcon as iH, SunIcon as iI, SyncIcon as iJ, SyncSmallIcon as iK, SyncToFileIcon as iL, TableAsteriskIcon as iM, TableClockIcon as iN, TableCombineIcon as iO, TableGlassesIcon as iP, TableGlobeIcon as iQ, TableIcon as iR, TableLightningIcon as iS, TableMeasureIcon as iT, TableModelIcon as iU, TableReportIcon as iV, TableStreamIcon as iW, TableVectorIcon as iX, TableViewIcon as iY, Tabs as iZ, Tag as i_, SortHorizontalDescendingIcon as ia, SortLetterHorizontalAscendingIcon as ib, SortLetterHorizontalDescendingIcon as ic, SortLetterUnsortedIcon as id, SortLetterVerticalAscendingIcon as ie, SortLetterVerticalDescendingIcon as ig, Spacer as ih, SparkleDoubleFillIcon as ii, SparkleFillIcon as ij, SparkleIcon as ik, SparkleRectangleIcon as il, SpeechBubbleIcon as im, SpeechBubblePlusIcon as io, SpeechBubbleQuestionMarkFillIcon as ip, SpeechBubbleQuestionMarkIcon as iq, SpeechBubbleStarIcon as ir, SpeedometerIcon as is, Spinner as it, SplitButton as iu, SqlIcon as iv, StarFillIcon as iw, StarIcon as ix, StepAfterLineIcon as iy, StepBeforeLineIcon as iz, DesignSystemEventProviderAnalyticsEventTypes as j, ZoomOutIcon as j$, TagIcon as j0, TagTableIcon as j1, TargetIcon as j2, TerminalIcon as j3, TextBoxIcon as j4, TextColorIcon as j5, TextIcon as j6, TextJustifyIcon as j7, TextUnderlineIcon as j8, ThreeDotsIcon as j9, UserCircleIcon as jA, UserGroupFillIcon as jB, UserGroupIcon as jC, UserIcon as jD, UserKeyIconIcon as jE, UserShieldIcon as jF, UserSparkleIcon as jG, UserTeamIcon as jH, VisibleFillIcon as jI, VisibleIcon as jJ, VisibleOffIcon as jK, WithDesignSystemThemeHoc as jL, WorkflowCodeIcon as jM, WorkflowCubeIcon as jN, WorkflowsIcon as jO, WorkspacesIcon as jP, WrenchIcon as jQ, WrenchSparkleIcon as jR, XCircleFillIcon as jS, XCircleIcon as jT, YearPickerGrid as jU, ZaHorizontalIcon as jV, ZaVerticalIcon as jW, ZeroOpsIcon as jX, ZeroOpsOutlineIcon as jY, ZoomInIcon as jZ, ZoomMarqueeSelection as j_, ThumbsDownFilledIcon as ja, ThumbsDownIcon as jb, ThumbsUpFilledIcon as jc, ThumbsUpIcon as jd, ToggleButton as je, TokenIcon as jf, Toolbar as jg, TrashIcon as jh, Tree as ji, TreeIcon as jj, TrendingFillIcon as jk, TrendingIcon as jl, TriangleIcon as jm, TypeaheadComboboxCheckboxItem as jn, TypeaheadComboboxFooter as jo, TypeaheadComboboxMenuItem$1 as jp, TypeaheadComboboxMultiSelectStateChangeTypes as jq, TypeaheadComboboxStateChangeTypes as jr, UnderlineIcon as js, UndoIcon as jt, UploadIcon as ju, UppercaseIcon as jv, UsageOverageGraphic as jw, UsageSpikeGraphic as jx, UsbIcon as jy, UserBadgeIcon as jz, useDesignSystemEventComponentCallbacks as k, ZoomToFitIcon as k0, __INTERNAL_DO_NOT_USE__FormItem as k1, __INTERNAL_DO_NOT_USE__Group as k2, __INTERNAL_DO_NOT_USE__HorizontalGroup as k3, __INTERNAL_DO_NOT_USE__VerticalGroup as k4, __INTERNAL_DO_NOT_USE__wrapLegacyFormRules as k5, augmentWithDataComponentProps as k6, dialogComboboxLookAheadKeyDown as k7, getBottomOnlyShadowScrollStyles as k8, getButtonEmotionStyles as k9, useDesignSystemEventSuppressInteractionContext as kA, useFormContext as kB, useRadioGroupContext as kC, getComboboxOptionLabelStyles as ka, getDatePickerQuickActionBasic as kb, getDialogComboboxOptionLabelWidth as kc, getHorizontalTabShadowStyles as kd, getInputStyles as ke, getKeyboardNavigationFunctions as kf, getMemoizedButtonEmotionStyles as kg, getPaginationEmotionStyles as kh, getPanelContainmentStyle as ki, getRadioStyles as kj, getRangeQuickActionsBasic as kk, getShadowScrollStyles as kl, getTypographyColor as km, getVirtualListScrollbarStyles as kn, getVirtualListScrollbarThumbColor as ko, getVirtualizedComboboxMenuItemStyles as kp, getWrapperStyle as kq, highlightFirstNonDisabledOption as kr, isOptionDisabled as ks, resetTabIndexToFocusedElement as kt, setImplicitContextGetter as ku, skipHideIconButtonActionClassName as kv, themeMemoKey as kw, useAntDConfigProviderContext as kx, useCallbackOnEnter as ky, useComponentFinderContext as kz, DesignSystemEventProviderComponentTypes as l, DesignSystemEventProviderComponentSubTypeMap as m, useNotifyOnFirstView as n, useStableUuidV4 as o, primitiveColors as p, ChevronDownIcon as q, ChevronRightIcon as r, DesignSystemAntDConfigProvider as s, CloseSmallIcon as t, useWizardCurrentStep as u, addDebugOutlineIfEnabled as v, Modal as w, getAnimationCss as x, token as y, getDarkModePortalStyles as z };
-//# sourceMappingURL=WizardStepContentWrapper-8bs2FwRi.js.map
+export { repeatingElementsStyles as $, token as A, Button as B, CheckCircleFillIcon as C, DocumentationSidebar as D, getDarkModePortalStyles as E, FIXED_VERTICAL_STEPPER_WIDTH as F, useModalContext as G, Trigger$5 as H, InfoFillIcon as I, InfoSmallIcon as J, Content$7 as K, Arrow$2 as L, MAX_VERTICAL_WIZARD_CONTENT_WIDTH as M, Tooltip as N, SparkleDoubleIcon as O, getIconClassName as P, LoadingState as Q, Root$9 as R, ShapeTokens as S, Typography as T, visuallyHidden as U, genSkeletonAnimatedColor as V, Wizard as W, getOffsets as X, DesignSystemEventSuppressInteractionProviderContext as Y, DesignSystemEventSuppressInteractionTrueContextValue as Z, tableStyles as _, WizardControlled as a, SortUnsortedIcon as a$, tableClassNames as a0, hideIconButtonRowStyles as a1, hideIconButtonActionCellClassName as a2, safex as a3, TitleSkeleton as a4, useDialogComboboxContext as a5, PlusIcon as a6, importantify as a7, getComboboxOptionItemWrapperStyles as a8, getFooterStyles as a9, useMultipleSelectionState as aA, Radio as aB, Checkbox as aC, DialogCombobox as aD, DialogComboboxTrigger as aE, DialogComboboxContent as aF, Select as aG, SelectTrigger as aH, SelectContent as aI, SelectOption as aJ, LegacySelect as aK, WarningIcon as aL, CheckCircleIcon as aM, DangerIcon as aN, Hint as aO, Title$1 as aP, CloseIcon as aQ, RestoreAntDDefaultClsPrefix as aR, AccessibleContainer as aS, DU_BOIS_ENABLE_ANIMATION_CLASSNAME as aT, Tag as aU, CircleOffIcon as aV, CircleOutlineIcon as aW, CircleIcon as aX, getBtnClassName as aY, SortAscendingIcon as aZ, SortDescendingIcon as a_, useDialogComboboxOptionListContext as aa, generateUuidV4 as ab, getContentOptions as ac, findHighlightedOption as ad, highlightOption as ae, Input as af, SearchIcon as ag, EmptyResults as ah, findClosestOptionSibling as ai, DialogComboboxOptionListCheckboxItem as aj, DialogComboboxOptionListSelectItem as ak, DialogComboboxOptionListContextProvider as al, LoadingSpinner as am, DialogComboboxOptionList as an, useUniqueId as ao, TypeaheadComboboxContextProvider as ap, useTypeaheadComboboxContext as aq, useDuboisThemeClass as ar, useDesignTokenOverrideStyles as as, getComboboxContentWrapperStyles as at, ClearSelectionButton as au, TypeaheadComboboxSelectedItem$1 as av, CountBadge$1 as aw, getValidationStateColor as ax, SectionHeader as ay, useComboboxState as az, WizardModal as b, BarsDescendingVerticalIcon as b$, MinusSquareIcon as b0, PlusSquareIcon as b1, TypeaheadComboboxV2ContextProvider as b2, useTypeaheadComboboxV2Context as b3, useRadixModalContext as b4, useIsomorphicLayoutEffect as b5, useScrollOptionIntoView as b6, InfoTooltip as b7, getInfoIconStyles as b8, HintRow as b9, ArrowRightIcon as bA, ArrowUpDotIcon as bB, ArrowUpFillIcon as bC, ArrowUpIcon as bD, ArrowsCollapseIcon as bE, ArrowsConnectIcon as bF, ArrowsExpandIcon as bG, ArrowsUpDownIcon as bH, AssistantIcon as bI, AtIcon as bJ, Auth0Graphic as bK, Auth0GraphicLarge as bL, AzHorizontalIcon as bM, AzVerticalIcon as bN, BANNER_MAX_HEIGHT as bO, BANNER_MIN_HEIGHT as bP, BackupIcon as bQ, BadgeCodeIcon as bR, BadgeCodeOffIcon as bS, Banner as bT, BarChartIcon as bU, BarGroupedIcon as bV, BarStackedIcon as bW, BarStackedPercentageIcon as bX, BarsAscendingHorizontalIcon as bY, BarsAscendingVerticalIcon as bZ, BarsDescendingHorizontalIcon as b_, getCheckboxStyles as ba, getMenuItemStyles as bb, TypeaheadComboboxSelectedItem as bc, CountBadge as bd, TypeaheadComboboxMenuItem as be, AccessDeniedGraphic as bf, Accordion as bg, AccordionPanel as bh, AlignCenterIcon as bi, AlignJustifyIcon as bj, AlignLeftIcon as bk, AlignRightIcon as bl, AlignVerticalBottomIcon as bm, AlignVerticalCenterIcon as bn, AlignVerticalTopIcon as bo, AppIcon as bp, ApplyDesignSystemContextOverrides as bq, ApplyDesignSystemFlags as br, ArrowDownDotIcon as bs, ArrowDownFillIcon as bt, ArrowDownIcon as bu, ArrowInIcon as bv, ArrowInTableIcon as bw, ArrowLeftIcon as bx, ArrowOutTableIcon as by, ArrowOverIcon as bz, WizardStepContentWrapper as c, ClockOffIcon as c$, BeakerIcon as c0, BinaryIcon as c1, BlockQuoteIcon as c2, BoldIcon as c3, BookIcon as c4, BookmarkFillIcon as c5, BookmarkIcon as c6, BooksIcon as c7, BracketsCheckIcon as c8, BracketsCurlyIcon as c9, CellsSquareIcon as cA, CertifiedFillIcon as cB, CertifiedFillSmallIcon as cC, CertifiedIcon as cD, ChainIcon as cE, ChartLineIcon as cF, CheckCircleBadgeIcon as cG, CheckCircleSmallIcon as cH, CheckIcon as cI, CheckLineIcon as cJ, CheckSmallIcon as cK, CheckboxIcon as cL, ChecklistIcon as cM, ChevronDoubleDownIcon as cN, ChevronDoubleLeftIcon as cO, ChevronDoubleLeftOffIcon as cP, ChevronDoubleRightIcon as cQ, ChevronDoubleRightOffIcon as cR, ChevronDoubleUpIcon as cS, ChevronLeftIcon as cT, ChevronUpIcon as cU, ChipIcon as cV, CircleOffLargeIcon as cW, CircleOutlineLargeIcon as cX, ClipboardIcon as cY, ClockIcon as cZ, ClockKeyIcon as c_, BracketsErrorIcon as ca, BracketsSquareIcon as cb, BracketsXIcon as cc, BranchCheckIcon as cd, BranchIcon as ce, BranchResetIcon as cf, BriefcaseFillIcon as cg, BriefcaseIcon as ch, BrushIcon as ci, BugIcon as cj, CalendarClockIcon as ck, CalendarEventIcon as cl, CalendarIcon as cm, CalendarRangeIcon as cn, CalendarSyncIcon as co, CameraIcon as cp, CapitalizeIcon as cq, CaretDownSquareIcon as cr, CaretUpSquareIcon as cs, CatalogCloudIcon as ct, CatalogGearIcon as cu, CatalogHomeIcon as cv, CatalogIcon as cw, CatalogOffIcon as cx, CatalogSharedIcon as cy, CatalogUserHomeIcon as cz, WizardStepNavigationProvider as d, DragIcon as d$, CloudCheckIcon as d0, CloudDatabaseIcon as d1, CloudDownloadIcon as d2, CloudIcon as d3, CloudKeyIcon as d4, CloudModelIcon as d5, CloudOffIcon as d6, CloudUploadIcon as d7, CodeIcon as d8, ColorFillIcon as d9, DangerModal as dA, DangerSmallIcon as dB, DashIcon as dC, DashboardCodeIcon as dD, DashboardIcon as dE, DataIcon as dF, DataMaskiingGraphic as dG, DatabaseClockIcon as dH, DatabaseIcon as dI, DatabaseImportIcon as dJ, DatePicker as dK, DecimalIcon as dL, DeprecatedIcon as dM, DeprecatedSmallIcon as dN, DesignSystemContext as dO, DesignSystemEventProviderComponentSubTypes as dP, DesignSystemProvider as dQ, DesignSystemThemeContext as dR, DesignSystemThemeProvider as dS, DialogComboboxCountBadge as dT, DialogComboboxCustomButtonTriggerWrapper as dU, DialogComboboxSectionHeader as dV, DollarIcon as dW, DomainCirclesThree as dX, DomainsIcon as dY, DotsCircleIcon as dZ, DownloadIcon as d_, ColorMappingEditIcon as da, ColorMappingIcon as db, ColorVars as dc, ColumnIcon as dd, ColumnSplitIcon as de, ColumnTagIcon as df, ColumnsIcon as dg, CommandIcon as dh, CommandPaletteIcon as di, CompassIcon as dj, ComponentFinderContext as dk, ConnectIcon as dl, Content$2 as dm, ContextMenu$1 as dn, CopyIcon as dp, CreditCardIcon as dq, CursorClickIcon as dr, CursorIcon as ds, CursorPagination as dt, CursorTypeIcon as du, CustomAppIcon as dv, DS_OVERRIDE_TOKENS_WRAPPER_TESTID as dw, DagHorizontalIcon as dx, DagIcon as dy, DagVerticalIcon as dz, useWizardStepNavigation as e, GridDashIcon as e$, Drawer as e0, DropdownMenu as e1, Empty as e2, EmptyDashboardGraphic as e3, ErdIcon as e4, ExpandLessIcon as e5, ExpandMoreIcon as e6, FaceFrownIcon as e7, FaceNeutralIcon as e8, FaceSmileIcon as e9, FolderOpenBranchIcon as eA, FolderOpenCloudIcon as eB, FolderOpenCubeIcon as eC, FolderOpenIcon as eD, FolderOpenPipelineIcon as eE, FolderOutlinePipelineIcon as eF, FolderSolidPipelineIcon as eG, FontIcon as eH, ForkHorizontalIcon as eI, ForkIcon as eJ, Form as eK, FormContextResetBoundary as eL, FullscreenExitIcon as eM, FullscreenIcon as eN, FunctionIcon as eO, FunctionInputIcon as eP, GavelIcon as eQ, GearFillIcon as eR, GearIcon as eS, GenieCodeIcon as eT, GenieDeepResearchIcon as eU, GiftIcon as eV, GitCommitIcon as eW, GitMergeIcon as eX, GitRebaseIcon as eY, GlobeIcon as eZ, Graphic as e_, FileCodeIcon as ea, FileCubeIcon as eb, FileDocumentIcon as ec, FileIcon as ed, FileImageIcon as ee, FileLockIcon as ef, FileModelIcon as eg, FileNewIcon as eh, FilePipelineIcon as ei, FilterFillIcon as ej, FilterIcon as ek, FlagPointerIcon as el, FloatIcon as em, FlowIcon as en, FlowsIcon as eo, FolderBranchFillIcon as ep, FolderBranchIcon as eq, FolderCloudFilledIcon as er, FolderCloudIcon as es, FolderCubeIcon as et, FolderCubeOutlineIcon as eu, FolderFillIcon as ev, FolderHomeIcon as ew, FolderIcon as ex, FolderNewIcon as ey, FolderNodeIcon as ez, DesignSystemEventProvider as f, LockShareIcon as f$, GridIcon as f0, GroupIcon as f1, H1Icon as f2, H2Icon as f3, H3Icon as f4, H4Icon as f5, H5Icon as f6, H6Icon as f7, HashIcon as f8, HistoryIcon as f9, LegacyFormDubois as fA, LegacyOptGroup as fB, LegacyOption as fC, LegacySelectOptGroup as fD, LegacySelectOption as fE, LegacyTable as fF, LegacyTooltip as fG, LetterFormatIcon as fH, LettersIcon as fI, LettersNumbersIcon as fJ, LibrariesIcon as fK, LifesaverIcon as fL, LightbulbIcon as fM, LightningCircleFillIcon as fN, LightningIcon as fO, LinearLineIcon as fP, LinkIcon as fQ, LinkOffIcon as fR, ListBorderIcon as fS, ListClearIcon as fT, ListIcon as fU, ListNumberIcon as fV, Listbox as fW, LoadingIcon as fX, LoadingStateContext as fY, LockFillIcon as fZ, LockIcon as f_, HomeIcon as fa, Icon as fb, ImageIcon as fc, IndentDecreaseIcon as fd, IndentIncreaseIcon as fe, InfinityIcon as ff, InfoBookIcon as fg, InfoIcon as fh, IngestionIcon as fi, ItalicIcon as fj, JoinOperatorIcon as fk, KeyIcon as fl, KeyboardIcon as fm, LakebaseCatalogIcon as fn, LakebaseIcon as fo, LakeflowDesignerIcon as fp, LakewatchAlertIcon as fq, LakewatchDatasourceIcon as fr, LakewatchDetectionRuleIcon as fs, LakewatchIcon as ft, LakewatchParserIcon as fu, LayerGraphIcon as fv, LayerIcon as fw, Layout as fx, LeafIcon as fy, LegacyForm as fz, useDesignSystemTheme as g, PinCancelIcon as g$, LockUnlockedIcon as g0, LoopIcon as g1, LowercaseIcon as g2, MailIcon as g3, MapIcon as g4, MarkdownIcon as g5, McpIcon as g6, MeasureIcon as g7, MegaphoneIcon as g8, MenuIcon as g9, OfficeIcon as gA, OntologyIcon as gB, OperatorIcon as gC, OutageGraphic as gD, OverflowHorizontalIcon as gE, OverflowIcon as gF, PageBottomIcon as gG, PageFirstIcon as gH, PageIcon as gI, PageLastIcon as gJ, PageTopIcon as gK, Pagination as gL, Panel as gM, PanelBody as gN, PanelDockedIcon as gO, PanelFloatingIcon as gP, PanelHeader as gQ, PanelHeaderButtons as gR, PanelHeaderTitle as gS, PaperclipIcon as gT, PassFailChecklistIcon as gU, PauseIcon as gV, PencilFillIcon as gW, PencilIcon as gX, PencilSparkleIcon as gY, PieChartIcon as gZ, PillControl as g_, MicrophoneIcon as ga, MicrophoneOffIcon as gb, MinusCircleFillIcon as gc, MinusCircleIcon as gd, MinusCircleSmallIcon as ge, MissingBranchGraphic as gf, MissingGraphic as gg, ModelsIcon as gh, MonotoneLineIcon as gi, MonthPickerGrid as gj, MoonIcon as gk, Nav as gl, NavButton as gm, NavigationMenu as gn, NeonProjectIcon as go, NewChatIcon as gp, NewTabIcon as gq, NewWindowIcon as gr, NoCaseIcon as gs, NoIcon as gt, NotebookIcon as gu, NotebookPipelineIcon as gv, NotificationIcon as gw, NotificationOffIcon as gx, NumberFormatIcon as gy, NumbersIcon as gz, DesignTokenScope as h, ShortcutIcon as h$, PinFillIcon as h0, PinIcon as h1, PipelineCodeIcon as h2, PipelineCubeIcon as h3, PipelineIcon as h4, PivotOperatorIcon as h5, PlayCircleFillIcon as h6, PlayCircleIcon as h7, PlayDoubleIcon as h8, PlayIcon as h9, RefreshXIcon as hA, ReplyIcon as hB, ResizeIcon as hC, RhfForm as hD, RichTextIcon as hE, RobotIcon as hF, RocketIcon as hG, RowsIcon as hH, RunIcon as hI, RunningIcon as hJ, SMALL_BUTTON_HEIGHT$2 as hK, SaveClockIcon as hL, SaveIcon as hM, SchemaIcon as hN, SchoolIcon as hO, SearchDataIcon as hP, SegmentedControlButton as hQ, SegmentedControlGroup as hR, SelectContext as hS, SelectContextProvider as hT, SelectOptionGroup as hU, SendIcon as hV, ShareIcon as hW, ShareNodesIcon as hX, ShieldCheckIcon as hY, ShieldIcon as hZ, ShieldOffIcon as h_, PlayMultipleIcon as ha, PlugIcon as hb, PlusCircleFillIcon as hc, PlusCircleIcon as hd, PlusCircleSmallIcon as he, PlusMinusSquareIcon as hf, Popover as hg, PositionBottomIcon as hh, PositionLeftIcon as hi, PositionRightIcon as hj, PositionTopIcon as hk, PreviewCard as hl, Progress as hm, PullRequestIcon as hn, PuzzleIcon as ho, QueryEditorIcon as hp, QueryIcon as hq, QuestionMarkFillIcon as hr, QuestionMarkIcon as hs, RadioIcon as ht, RadioTile as hu, RangePicker as hv, ReaderModeIcon as hw, RedoIcon as hx, RefreshIcon as hy, RefreshPlayIcon as hz, useDesignSystemContext as i, TableModelIcon as i$, Sidebar as i0, SidebarAutoIcon as i1, SidebarClosedIcon as i2, SidebarCollapseIcon as i3, SidebarExpandIcon as i4, SidebarIcon as i5, SidebarOpenIcon as i6, SidebarSyncIcon as i7, SimpleSelect as i8, SimpleSelectOption as i9, Spinner as iA, SplitButton as iB, SqlIcon as iC, StarFillIcon as iD, StarIcon as iE, StepAfterLineIcon as iF, StepBeforeLineIcon as iG, Stepper as iH, StopCircleFillIcon as iI, StopCircleIcon as iJ, StopIcon as iK, StoredProcedureIcon as iL, StorefrontIcon as iM, StreamIcon as iN, StrikeThroughIcon as iO, SunIcon as iP, SyncIcon as iQ, SyncSmallIcon as iR, SyncToFileIcon as iS, TableAsteriskIcon as iT, TableClockIcon as iU, TableCombineIcon as iV, TableGlassesIcon as iW, TableGlobeIcon as iX, TableIcon as iY, TableLightningIcon as iZ, TableMeasureIcon as i_, SimpleSelectOptionGroup as ia, SlashSquareIcon as ib, SlidersIcon as ic, SnippetIcon as id, SortCustomHorizontalIcon as ie, SortCustomVerticalIcon as ig, SortHorizontalAscendingIcon as ih, SortHorizontalDescendingIcon as ii, SortLetterHorizontalAscendingIcon as ij, SortLetterHorizontalDescendingIcon as ik, SortLetterUnsortedIcon as il, SortLetterVerticalAscendingIcon as im, SortLetterVerticalDescendingIcon as io, Spacer as ip, SparkleDoubleFillIcon as iq, SparkleFillIcon as ir, SparkleIcon as is, SparkleRectangleIcon as it, SpeechBubbleIcon as iu, SpeechBubblePlusIcon as iv, SpeechBubbleQuestionMarkFillIcon as iw, SpeechBubbleQuestionMarkIcon as ix, SpeechBubbleStarIcon as iy, SpeedometerIcon as iz, WarningFillIcon as j, ZaHorizontalIcon as j$, TableReportIcon as j0, TableStreamIcon as j1, TableVectorIcon as j2, TableViewIcon as j3, Tabs as j4, TagColumnIcon as j5, TagIcon as j6, TagTableIcon as j7, TargetIcon as j8, TerminalIcon as j9, UppercaseIcon as jA, UsageOverageGraphic as jB, UsageSpikeGraphic as jC, UsbIcon as jD, UserBadgeIcon as jE, UserCircleIcon as jF, UserGroupFillIcon as jG, UserGroupIcon as jH, UserIcon as jI, UserKeyIconIcon as jJ, UserShieldIcon as jK, UserSparkleIcon as jL, UserTeamIcon as jM, VisibleFillIcon as jN, VisibleIcon as jO, VisibleOffIcon as jP, VoiceModeIcon as jQ, WithDesignSystemThemeHoc as jR, WorkflowCodeIcon as jS, WorkflowCubeIcon as jT, WorkflowsIcon as jU, WorkspacesIcon as jV, WrenchIcon as jW, WrenchSparkleIcon as jX, XCircleFillIcon as jY, XCircleIcon as jZ, YearPickerGrid as j_, TextBoxIcon as ja, TextColorIcon as jb, TextIcon as jc, TextJustifyIcon as jd, TextUnderlineIcon as je, ThreeDotsIcon as jf, ThumbsDownFilledIcon as jg, ThumbsDownIcon as jh, ThumbsUpFilledIcon as ji, ThumbsUpIcon as jj, ToggleButton as jk, TokenIcon as jl, TrashIcon as jm, Tree as jn, TreeIcon as jo, TrendingFillIcon as jp, TrendingIcon as jq, TriangleIcon as jr, TypeaheadComboboxCheckboxItem as js, TypeaheadComboboxFooter as jt, TypeaheadComboboxMenuItem$1 as ju, TypeaheadComboboxMultiSelectStateChangeTypes as jv, TypeaheadComboboxStateChangeTypes as jw, UnderlineIcon as jx, UndoIcon as jy, UploadIcon as jz, DangerFillIcon as k, ZaVerticalIcon as k0, ZeroOpsIcon as k1, ZeroOpsOutlineIcon as k2, ZoomInIcon as k3, ZoomMarqueeSelection as k4, ZoomOutIcon as k5, ZoomToFitIcon as k6, __INTERNAL_DO_NOT_USE__FormItem as k7, __INTERNAL_DO_NOT_USE__Group as k8, __INTERNAL_DO_NOT_USE__HorizontalGroup as k9, setImplicitContextGetter as kA, skipHideIconButtonActionClassName as kB, themeMemoKey as kC, useAntDConfigProviderContext as kD, useCallbackOnEnter as kE, useComponentFinderContext as kF, useDesignSystemEventSuppressInteractionContext as kG, useFormContext as kH, useRadioGroupContext as kI, __INTERNAL_DO_NOT_USE__VerticalGroup as ka, __INTERNAL_DO_NOT_USE__wrapLegacyFormRules as kb, augmentWithDataComponentProps as kc, dialogComboboxLookAheadKeyDown as kd, getBottomOnlyShadowScrollStyles as ke, getButtonEmotionStyles as kf, getComboboxOptionLabelStyles as kg, getDatePickerQuickActionBasic as kh, getDialogComboboxOptionLabelWidth as ki, getHorizontalTabShadowStyles as kj, getInputStyles as kk, getKeyboardNavigationFunctions as kl, getMemoizedButtonEmotionStyles as km, getPaginationEmotionStyles as kn, getPanelContainmentStyle as ko, getRadioStyles as kp, getRangeQuickActionsBasic as kq, getShadowScrollStyles as kr, getTypographyColor as ks, getVirtualListScrollbarStyles as kt, getVirtualListScrollbarThumbColor as ku, getVirtualizedComboboxMenuItemStyles as kv, getWrapperStyle as kw, highlightFirstNonDisabledOption as kx, isOptionDisabled as ky, resetTabIndexToFocusedElement as kz, DesignSystemEventProviderAnalyticsEventTypes as l, useDesignSystemEventComponentCallbacks as m, DesignSystemEventProviderComponentTypes as n, DesignSystemEventProviderComponentSubTypeMap as o, primitiveColors as p, useNotifyOnFirstView as q, useStableUuidV4 as r, ChevronDownIcon as s, ChevronRightIcon as t, useWizardCurrentStep as u, DesignSystemAntDConfigProvider as v, CloseSmallIcon as w, addDebugOutlineIfEnabled as x, Modal as y, getAnimationCss as z };
+//# sourceMappingURL=WizardStepContentWrapper-6YTjeEaA.js.map