@databricks/design-system 2.0.5 → 2.0.6

package/dist/{index-BRAVZg-S.js → index-DiRpSwH2.js}

@@ -1,4 +1,4 @@
-import { p as primitiveColors, f as DesignSystemEventProvider, g as useDesignSystemTheme, h as DesignTokenScope, i as useDesignSystemContext, I as InfoFillIcon, C as CheckCircleFillIcon, j as WarningFillIcon, k as DangerFillIcon, l as DesignSystemEventProviderAnalyticsEventTypes, m as useDesignSystemEventComponentCallbacks, n as DesignSystemEventProviderComponentTypes, o as DesignSystemEventProviderComponentSubTypeMap, q as useNotifyOnFirstView, r as useStableUuidV4, B as Button, T as Typography, s as ChevronDownIcon, t as ChevronRightIcon, v as DesignSystemAntDConfigProvider, w as CloseSmallIcon, x as addDebugOutlineIfEnabled, y as Modal, z as getAnimationCss, A as token, S as ShapeTokens, E as getDarkModePortalStyles, G as useModalContext, R as Root$1, H as Trigger, J as InfoSmallIcon, K as Content, L as Arrow, N as Tooltip, O as SparkleDoubleIcon, P as LoadingState, Q as visuallyHidden, U as genSkeletonAnimatedColor, V as getOffsets, X as DesignSystemEventSuppressInteractionProviderContext, Y as DesignSystemEventSuppressInteractionTrueContextValue, Z as tableStyles, _ as repeatingElementsStyles, $ as tableClassNames, a0 as hideIconButtonRowStyles, a1 as hideIconButtonActionCellClassName, a2 as safex, a3 as TitleSkeleton, a4 as useDialogComboboxContext, a5 as PlusIcon, a6 as importantify, a7 as getComboboxOptionItemWrapperStyles, a8 as getFooterStyles, a9 as useDialogComboboxOptionListContext, aa as generateUuidV4, ab as getContentOptions, ac as findHighlightedOption, ad as highlightOption, ae as Input, af as SearchIcon, ag as EmptyResults, ah as findClosestOptionSibling, ai as DialogComboboxOptionListCheckboxItem, aj as DialogComboboxOptionListSelectItem, ak as DialogComboboxOptionListContextProvider, al as LoadingSpinner, am as DialogComboboxOptionList, an as useUniqueId, ao as TypeaheadComboboxContextProvider, ap as useTypeaheadComboboxContext, aq as useDuboisThemeClass, ar as useDesignTokenOverrideStyles, as as getComboboxContentWrapperStyles, at as ClearSelectionButton, au as TypeaheadComboboxSelectedItem, av as CountBadge, aw as getValidationStateColor, ax as SectionHeader, ay as useComboboxState$1, az as useMultipleSelectionState$1, aA as Radio, aB as Checkbox, aC as DialogCombobox, aD as DialogComboboxTrigger, aE as DialogComboboxContent, aF as Select, aG as SelectTrigger, aH as SelectContent, aI as SelectOption, aJ as LegacySelect, aK as WarningIcon, aL as CheckCircleIcon, aM as DangerIcon, aN as Hint, aO as Title$1, aP as CloseIcon, aQ as RestoreAntDDefaultClsPrefix, aR as AccessibleContainer, aS as DU_BOIS_ENABLE_ANIMATION_CLASSNAME, aT as Tag, aU as CircleOffIcon, aV as CircleOutlineIcon, aW as CircleIcon, aX as getBtnClassName, aY as SortAscendingIcon, aZ as SortDescendingIcon, a_ as SortUnsortedIcon, a$ as MinusSquareIcon, b0 as PlusSquareIcon, b1 as TypeaheadComboboxV2ContextProvider, b2 as useTypeaheadComboboxV2Context, b3 as useRadixModalContext, b4 as useIsomorphicLayoutEffect, b5 as useScrollOptionIntoView, b6 as InfoTooltip, b7 as getInfoIconStyles, b8 as HintRow, b9 as getCheckboxStyles, ba as getMenuItemStyles, bb as TypeaheadComboboxSelectedItem$1, bc as CountBadge$1, bd as TypeaheadComboboxMenuItem } from './WizardStepContentWrapper-Bq1wm0V7.js';
+import { p as primitiveColors, f as DesignSystemEventProvider, g as useDesignSystemTheme, h as DesignTokenScope, i as useDesignSystemContext, I as InfoFillIcon, C as CheckCircleFillIcon, j as WarningFillIcon, k as DangerFillIcon, l as DesignSystemEventProviderAnalyticsEventTypes, m as useDesignSystemEventComponentCallbacks, n as DesignSystemEventProviderComponentTypes, o as DesignSystemEventProviderComponentSubTypeMap, q as useNotifyOnFirstView, r as useStableUuidV4, B as Button$1, T as Typography, s as ChevronDownIcon, t as ChevronRightIcon, v as DesignSystemAntDConfigProvider, w as CloseSmallIcon, x as addDebugOutlineIfEnabled, y as Modal, z as getAnimationCss, A as token, S as ShapeTokens, E as getDarkModePortalStyles, G as useModalContext, R as Root$3, H as Trigger, J as InfoSmallIcon, K as Content, L as Arrow, N as Tooltip, O as SparkleDoubleIcon, P as getIconClassName, Q as LoadingState, U as visuallyHidden, V as genSkeletonAnimatedColor, X as getOffsets, Y as DesignSystemEventSuppressInteractionProviderContext, Z as DesignSystemEventSuppressInteractionTrueContextValue, _ as tableStyles, $ as repeatingElementsStyles, a0 as tableClassNames, a1 as hideIconButtonRowStyles, a2 as hideIconButtonActionCellClassName, a3 as safex, a4 as TitleSkeleton, a5 as useDialogComboboxContext, a6 as PlusIcon, a7 as importantify, a8 as getComboboxOptionItemWrapperStyles, a9 as getFooterStyles, aa as useDialogComboboxOptionListContext, ab as generateUuidV4, ac as getContentOptions, ad as findHighlightedOption, ae as highlightOption, af as Input, ag as SearchIcon, ah as EmptyResults, ai as findClosestOptionSibling, aj as DialogComboboxOptionListCheckboxItem, ak as DialogComboboxOptionListSelectItem, al as DialogComboboxOptionListContextProvider, am as LoadingSpinner, an as DialogComboboxOptionList, ao as useUniqueId, ap as TypeaheadComboboxContextProvider, aq as useTypeaheadComboboxContext, ar as useDuboisThemeClass, as as useDesignTokenOverrideStyles, at as getComboboxContentWrapperStyles, au as ClearSelectionButton, av as TypeaheadComboboxSelectedItem, aw as CountBadge, ax as getValidationStateColor, ay as SectionHeader, az as useComboboxState$1, aA as useMultipleSelectionState$1, aB as Radio, aC as Checkbox, aD as DialogCombobox, aE as DialogComboboxTrigger, aF as DialogComboboxContent, aG as Select, aH as SelectTrigger, aI as SelectContent, aJ as SelectOption, aK as LegacySelect, aL as WarningIcon, aM as CheckCircleIcon, aN as DangerIcon, aO as Hint, aP as Title$1, aQ as CloseIcon, aR as RestoreAntDDefaultClsPrefix, aS as AccessibleContainer, aT as DU_BOIS_ENABLE_ANIMATION_CLASSNAME, aU as Tag, aV as CircleOffIcon, aW as CircleOutlineIcon, aX as CircleIcon, aY as getBtnClassName, aZ as SortAscendingIcon, a_ as SortDescendingIcon, a$ as SortUnsortedIcon, b0 as MinusSquareIcon, b1 as PlusSquareIcon, b2 as TypeaheadComboboxV2ContextProvider, b3 as useTypeaheadComboboxV2Context, b4 as useRadixModalContext, b5 as useIsomorphicLayoutEffect, b6 as useScrollOptionIntoView, b7 as InfoTooltip, b8 as getInfoIconStyles, b9 as HintRow, ba as getCheckboxStyles, bb as getMenuItemStyles, bc as TypeaheadComboboxSelectedItem$1, bd as CountBadge$1, be as TypeaheadComboboxMenuItem } from './WizardStepContentWrapper-6YTjeEaA.js';
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import { ThemeProvider, css, Global, createElement, ClassNames, keyframes } from '@emotion/react';
 import { Alert as Alert$1, AutoComplete as AutoComplete$1, Breadcrumb as Breadcrumb$1, DatePicker, Dropdown as Dropdown$1, Switch as Switch$1, Col as Col$1, Row as Row$1, Space as Space$1, notification, Popover, Skeleton, Menu as Menu$1, Steps as Steps$1 } from 'antd';
@@ -14,6 +14,8 @@ import { computePosition, flip as flip$1, size } from '@floating-ui/dom';
 import { createPortal } from 'react-dom';
 import * as RadixHoverCard from '@radix-ui/react-hover-card';
 import * as Toast from '@radix-ui/react-toast';
+import * as RadixSlider from '@radix-ui/react-slider';
+import * as RadixToolbar from '@radix-ui/react-toolbar';
 import { useComboBox } from '@react-aria/combobox';
 import { useListBox, useOption } from '@react-aria/listbox';
 import { useOverlay, useOverlayPosition, Overlay, DismissButton } from '@react-aria/overlays';
@@ -539,7 +541,7 @@ const Alert = ({ componentId, analyticsEvents = [
     };
     const memoizedActions = useMemo(()=>{
         if (!actions?.length) return null;
-        return actions.map((action, index)=>/*#__PURE__*/ jsx(Button, {
+        return actions.map((action, index)=>/*#__PURE__*/ jsx(Button$1, {
                 size: "small",
                 ...action
             }, index));
@@ -643,7 +645,7 @@ const Alert = ({ componentId, analyticsEvents = [
             gap: theme.spacing.xs
         }),
         children: [
-            showCollapseToggle && /*#__PURE__*/ jsx(Button, {
+            showCollapseToggle && /*#__PURE__*/ jsx(Button$1, {
                 "aria-expanded": isExpanded,
                 "aria-controls": descriptionRegionId,
                 "aria-label": isExpanded ? collapseToggleAriaLabel : expandToggleAriaLabel,
@@ -919,7 +921,7 @@ const InfoPopover = ({ children, popoverProps, iconTitle, iconProps, isKeyboardF
         }
     };
     const { onKeyDown, ...restPopoverProps } = popoverProps || {};
-    return /*#__PURE__*/ jsxs(Root$1, {
+    return /*#__PURE__*/ jsxs(Root$3, {
         componentId: "codegen_design-system_src_design-system_popover_infopopover.tsx_36",
         open: open,
         onOpenChange: setOpen,
@@ -1053,7 +1055,7 @@ const OverflowPopover = ({ items, renderLabel, tooltipText, ariaLabel = 'More it
         ...addDebugOutlineIfEnabled(),
         children: /*#__PURE__*/ jsx(Trigger, {
             asChild: true,
-            children: /*#__PURE__*/ jsx(Button, {
+            children: /*#__PURE__*/ jsx(Button$1, {
                 componentId: "something",
                 type: "link",
                 children: renderLabel ? renderLabel(label) : label
@@ -1067,7 +1069,7 @@ const OverflowPopover = ({ items, renderLabel, tooltipText, ariaLabel = 'More it
             children: trigger
         });
     }
-    return /*#__PURE__*/ jsxs(Root$1, {
+    return /*#__PURE__*/ jsxs(Root$3, {
         componentId: "codegen_design-system_src_design-system_overflow_overflowpopover.tsx_37",
         defaultOpen: defaultOpen,
         onOpenChange: (open)=>setShowTooltip(!open),
@@ -1163,7 +1165,7 @@ function getAvatarEmotionStyles({ backgroundColor, size = DEFAULT_SIZE, theme })
             height: avatarSize,
             width: avatarSize,
             fontSize,
-            [`.${theme.general.iconfontCssPrefix}`]: {
+            [`& :is(${getIconClassName()})`]: {
                 fontSize: iconSize
             }
         },
@@ -1433,10 +1435,13 @@ const Breadcrumb = /* #__PURE__ */ (()=>{
             },
             [separatorClass]: {
                 fontSize: theme.general.iconFontSize,
-                '& .anticon': {
-                    fontSize: 13
+                [`& :is(${getIconClassName()})`]: {
+                    fontSize: theme.typography.fontSizeBase
                 }
             },
+            [`& :is(${getIconClassName()})`]: {
+                fontSize: theme.typography.fontSizeBase
+            },
             '& > span': {
                 display: 'inline-flex',
                 alignItems: 'center'
@@ -1602,7 +1607,7 @@ const Table = /*#__PURE__*/ forwardRef(function Table({ children, size = 'defaul
                             }
                         ],
                         // 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: scrollable ? 0 : -1,
                         onScroll: onScroll,
                         children: [
@@ -1965,6 +1970,7 @@ const Card = ({ children, customLoadingContent, dangerouslyAppendEmotionCSS, loa
     ]);
     const content = /*#__PURE__*/ jsx("div", {
         ref: mergedRef,
+        // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex
         tabIndex: !href ? 0 : undefined,
         ...addDebugOutlineIfEnabled(),
         css: href ? [] : [
@@ -2284,7 +2290,7 @@ const YearPicker = /*#__PURE__*/ forwardRef(// eslint-disable-next-line react-co
    */ YearPicker
 });
 
-const Separator = (props)=>{
+const Separator$1 = (props)=>{
     const { theme } = useDesignSystemTheme();
     return /*#__PURE__*/ jsx("div", {
         ...props,
@@ -2306,7 +2312,7 @@ const DialogComboboxAddButton = ({ children, ...restProps })=>{
     if (!isInsideDialogCombobox) {
         throw new Error('`DialogComboboxAddButton` must be used within `DialogCombobox`');
     }
-    return /*#__PURE__*/ jsx(Button, {
+    return /*#__PURE__*/ jsx(Button$1, {
         // oxlint-disable-next-line @databricks/no-dynamic-property-value -- Contextual component ID validated through DialogCombobox component exempt:fc0846cb-b73b-401b-834e-75bb8b6d4c20
         componentId: `${componentId ? componentId : 'design_system.dialogcombobox'}.add_option`,
         ...restProps,
@@ -2692,7 +2698,7 @@ const DialogComboboxSeparator = (props)=>{
     if (!isInsideDialogCombobox) {
         throw new Error('`DialogComboboxSeparator` must be used within `DialogCombobox`');
     }
-    return /*#__PURE__*/ jsx(Separator, {
+    return /*#__PURE__*/ jsx(Separator$1, {
         ...props
     });
 };
@@ -3132,6 +3138,7 @@ children, dangerouslySetAntdProps, onClick, ...restProps }, ref) {
         children: /*#__PURE__*/ jsx("input", {
             ref: mergedRef,
             type: "checkbox",
+            // oxlint-disable-next-line jsx-a11y/role-has-required-aria-props
             role: "switch",
             id: uniqueId,
             ...checkedStateProps,
@@ -3992,7 +3999,7 @@ size, ...restProps }, ref)=>{
     if (!isInsideTypeaheadCombobox) {
         throw new Error('`TypeaheadComboboxSeparator` must be used within `TypeaheadComboboxMenu`');
     }
-    return /*#__PURE__*/ jsx(Separator, {
+    return /*#__PURE__*/ jsx(Separator$1, {
         ...props
     });
 };
@@ -4007,7 +4014,7 @@ size, ...restProps }, ref)=>{
     if (!isInsideTypeaheadCombobox) {
         throw new Error('`TypeaheadComboboxAddButton` must be used within `TypeaheadCombobox`');
     }
-    return /*#__PURE__*/ jsx(Button, {
+    return /*#__PURE__*/ jsx(Button$1, {
         ...restProps,
         // oxlint-disable-next-line @databricks/no-dynamic-property-value -- Validated in the Root for the context exempt:844c1e83-84b8-41ba-95af-bae4799834aa
         componentId: `${componentId}.add_option`,
@@ -4408,10 +4415,10 @@ function RHFControlledMultiSelectTypeaheadCombobox({ name, control, rules, allIt
 // pull the ~175KB chunk. Generics don't flow through React.lazy, so each public wrapper re-declares the
 // generic signature and casts its props onto the (default-generic) lazy component; the lazy impl has the
 // identical prop shape.
-const LazyRHFControlledTypeaheadComboboxV2 = /*#__PURE__*/ React__default.lazy(()=>import('./RHFControlledTypeaheadComboboxV2-DsH-nIEk.js').then((m)=>({
+const LazyRHFControlledTypeaheadComboboxV2 = /*#__PURE__*/ React__default.lazy(()=>import('./RHFControlledTypeaheadComboboxV2-Ct9x3rC1.js').then((m)=>({
             default: m.RHFControlledTypeaheadComboboxV2
         })));
-const LazyRHFControlledMultiSelectTypeaheadComboboxV2 = /*#__PURE__*/ React__default.lazy(()=>import('./RHFControlledTypeaheadComboboxV2-DsH-nIEk.js').then((m)=>({
+const LazyRHFControlledMultiSelectTypeaheadComboboxV2 = /*#__PURE__*/ React__default.lazy(()=>import('./RHFControlledTypeaheadComboboxV2-Ct9x3rC1.js').then((m)=>({
             default: m.RHFControlledMultiSelectTypeaheadComboboxV2
         })));
 function RHFControlledTypeaheadComboboxV2(props) {
@@ -4995,28 +5002,39 @@ const defaultProps = {
     return LegacySkeleton;
 })();
 
+const getMenuIconStyles = (theme, classNamePrefix)=>({
+        [`.${classNamePrefix}-menu-item :is(.anticon, .db-icon), .${classNamePrefix}-menu-submenu-title :is(.anticon, .db-icon)`]: {
+            fontSize: theme.typography.fontSizeBase
+        }
+    });
 /**
  * @deprecated Use `DropdownMenu` instead.
  */ const Menu = /* #__PURE__ */ (()=>{
-    const Menu = ({ dangerouslySetAntdProps, ...props })=>{
+    const Menu = ({ dangerouslySetAntdProps, css: cssProp, ...props })=>{
+        const { theme, classNamePrefix } = useDesignSystemTheme();
         return /*#__PURE__*/ jsx(DesignSystemAntDConfigProvider, {
             children: /*#__PURE__*/ jsx(Menu$1, {
                 ...addDebugOutlineIfEnabled(),
                 ...props,
-                ...dangerouslySetAntdProps
+                ...dangerouslySetAntdProps,
+                css: [
+                    getMenuIconStyles(theme, classNamePrefix),
+                    cssProp
+                ]
             })
         });
     };
     Menu.Item = Menu$1.Item;
     Menu.ItemGroup = Menu$1.ItemGroup;
     Menu.SubMenu = function SubMenu({ dangerouslySetAntdProps, ...props }) {
-        const { theme } = useDesignSystemTheme();
+        const { theme, classNamePrefix } = useDesignSystemTheme();
         return /*#__PURE__*/ jsx(ClassNames, {
             children: ({ css })=>{
                 return /*#__PURE__*/ jsx(Menu$1.SubMenu, {
                     ...addDebugOutlineIfEnabled(),
                     popupClassName: css({
-                        zIndex: theme.options.zIndexBase + 50
+                        zIndex: theme.options.zIndexBase + 50,
+                        ...getMenuIconStyles(theme, classNamePrefix)
                     }),
                     popupOffset: [
                         -6,
@@ -5140,7 +5158,7 @@ const getToastRootStyle = (theme, classNamePrefix)=>{
         }
     });
 };
-const Root = // eslint-disable-next-line react-component-name/react-component-name -- TODO(FEINF-4716)
+const Root$2 = // eslint-disable-next-line react-component-name/react-component-name -- TODO(FEINF-4716)
 /*#__PURE__*/ forwardRef(function({ children, severity = 'info', severityLabel, componentId, analyticsEvents = [
     DesignSystemEventProviderAnalyticsEventTypes.OnView
 ], className, style, ...props }, ref) {
@@ -5270,7 +5288,7 @@ const Close = /*#__PURE__*/ forwardRef(function(props, ref) {
             css: getCloseStyles(theme),
             ...restProps,
             asChild: true,
-            children: /*#__PURE__*/ jsx(Button, {
+            children: /*#__PURE__*/ jsx(Button$1, {
                 componentId: componentId ? componentId : 'codegen_design-system_src_design-system_notification_notification.tsx_224',
                 analyticsEvents: analyticsEvents,
                 icon: /*#__PURE__*/ jsx(CloseIcon, {}),
@@ -5299,7 +5317,7 @@ var Notification = /*#__PURE__*/Object.freeze({
   Close: Close,
   Description: Description,
   Provider: Provider,
-  Root: Root,
+  Root: Root$2,
   Title: Title,
   Viewport: Viewport
 });
@@ -5413,6 +5431,103 @@ const ResourceStatusIndicator = (props)=>{
     });
 };
 
+const ROOT_STYLES = /*#__PURE__*/ css({
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    '&[data-orientation="vertical"]': {
+        flexDirection: 'column',
+        width: 'var(--db-slider-size)',
+        height: 100
+    },
+    '&[data-orientation="horizontal"]': {
+        height: 'var(--db-slider-size)',
+        width: 200
+    }
+});
+const Root$1 = // 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 TRACK_STYLES = /*#__PURE__*/ css({
+    backgroundColor: 'var(--db-slider-track-surface)',
+    position: 'relative',
+    flexGrow: 1,
+    borderRadius: 'var(--db-slider-border-radius)',
+    '&[data-orientation="vertical"]': {
+        width: 'var(--db-slider-track-thickness)'
+    },
+    '&[data-orientation="horizontal"]': {
+        height: 'var(--db-slider-track-thickness)'
+    }
+});
+const Track = // eslint-disable-next-line react-component-name/react-component-name -- TODO(FEINF-4716)
+/*#__PURE__*/ forwardRef((props, ref)=>{
+    return /*#__PURE__*/ jsx(RadixSlider.Track, {
+        css: TRACK_STYLES,
+        ...props,
+        ref: ref
+    });
+});
+const RANGE_STYLES = /*#__PURE__*/ css({
+    backgroundColor: 'var(--db-slider-range-surface)',
+    position: 'absolute',
+    borderRadius: 'var(--db-slider-border-radius)',
+    height: '100%',
+    '&[data-disabled]': {
+        backgroundColor: 'var(--db-slider-range-surface-disabled)'
+    }
+});
+const Range = // eslint-disable-next-line react-component-name/react-component-name -- TODO(FEINF-4716)
+/*#__PURE__*/ forwardRef((props, ref)=>{
+    return /*#__PURE__*/ jsx(RadixSlider.Range, {
+        css: RANGE_STYLES,
+        ...props,
+        ref: ref
+    });
+});
+const THUMB_STYLES = /*#__PURE__*/ css({
+    display: 'block',
+    width: 'var(--db-slider-thumb-size)',
+    height: 'var(--db-slider-thumb-size)',
+    backgroundColor: 'var(--db-slider-thumb-surface)',
+    boxShadow: 'none',
+    borderRadius: 'var(--db-slider-border-radius)',
+    outline: 'none',
+    '&:hover': {
+        backgroundColor: 'var(--db-slider-thumb-surface-hover)'
+    },
+    '&:focus': {
+        backgroundColor: 'var(--db-slider-thumb-surface-press)'
+    },
+    '&[data-disabled]': {
+        backgroundColor: 'var(--db-slider-thumb-surface-disabled)',
+        boxShadow: 'none'
+    }
+});
+const Thumb = // eslint-disable-next-line react-component-name/react-component-name -- TODO(FEINF-4716)
+/*#__PURE__*/ forwardRef((props, ref)=>{
+    return /*#__PURE__*/ jsx(RadixSlider.Thumb, {
+        css: THUMB_STYLES,
+        "aria-label": "Slider thumb",
+        ...props,
+        ref: ref
+    });
+});
+
+var Slider = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Range: Range,
+  Root: Root$1,
+  Thumb: Thumb,
+  Track: Track
+});
+
 /**
  * SnackBarManager is a store for managing SnackBar state.
  * It maintains the list of active snacks and notifies subscribers when state changes.
@@ -5484,18 +5599,19 @@ const snackBarManager = new SnackBarManager();
 
 const getCloseButtonStyles = (clsPrefix)=>{
     const notLink = `:not(${getBtnClassName(clsPrefix, '-link', '')})`;
+    const iconSelector = `:is(${getIconClassName()})`;
     return /*#__PURE__*/ css({
         marginLeft: 'var(--db-snackbar-close-button-spacing)',
         flexShrink: 0,
         // Override design system colors to use dark mode colors in both light and dark modes for proper contrast
-        [`&&:enabled${notLink} > .anticon`]: {
+        [`&&:enabled${notLink} > ${iconSelector}`]: {
             color: 'var(--db-snackbar-close-icon) !important'
         },
-        [`&&:enabled${notLink}:hover > .anticon`]: {
+        [`&&:enabled${notLink}:hover > ${iconSelector}`]: {
             color: 'var(--db-snackbar-close-icon-hover) !important'
         },
-        [`&&:enabled${notLink}:active > .anticon`]: {
-            color: 'var(--db-snackbar-close-icon-press) !important'
+        [`&&:enabled${notLink}:active > ${iconSelector}`]: {
+            color: 'var(--db-snackbar-close-icon-active) !important'
         }
     });
 };
@@ -5642,7 +5758,7 @@ const SnackBarRoot = /*#__PURE__*/ forwardRef(function SnackBarRoot({ snack }, r
             }),
             snack.closeButton !== false && /*#__PURE__*/ jsx(Toast.Close, {
                 asChild: true,
-                children: /*#__PURE__*/ jsx(Button, {
+                children: /*#__PURE__*/ jsx(Button$1, {
                     css: getCloseButtonStyles(classNamePrefix),
                     componentId: "design-system.snackbar.close",
                     icon: /*#__PURE__*/ jsx(CloseIcon, {}),
@@ -5763,7 +5879,7 @@ const TableFilterInput = /*#__PURE__*/ forwardRef(function SearchInput({ onSubmi
                         flex: 1
                     })
                 }),
-                /*#__PURE__*/ jsx(Button, {
+                /*#__PURE__*/ jsx(Button$1, {
                     componentId: componentId ? `${componentId}.search_submit` : 'codegen_design-system_src_design-system_tableui_tablefilterinput.tsx_65',
                     htmlType: "submit",
                     "aria-label": "Search",
@@ -5911,7 +6027,7 @@ const TableHeaderResizeHandle = /*#__PURE__*/ forwardRef(function TableHeaderRes
             css: tableStyles.resizeHandle
         })
     });
-    return increaseWidthHandler && decreaseWidthHandler ? /*#__PURE__*/ jsxs(Root$1, {
+    return increaseWidthHandler && decreaseWidthHandler ? /*#__PURE__*/ jsxs(Root$3, {
         componentId: "codegen_design-system_src_design-system_tableui_tableheader.tsx_114",
         onOpenChange: setIsPopoverOpen,
         children: [
@@ -5949,7 +6065,7 @@ const TableHeaderResizeHandle = /*#__PURE__*/ forwardRef(function TableHeaderRes
                                     alignItems: 'center'
                                 },
                                 children: [
-                                    /*#__PURE__*/ jsx(Button, {
+                                    /*#__PURE__*/ jsx(Button$1, {
                                         onClick: ()=>{
                                             decreaseWidthHandler();
                                         },
@@ -5960,7 +6076,7 @@ const TableHeaderResizeHandle = /*#__PURE__*/ forwardRef(function TableHeaderRes
                                             backgroundColor: theme.colors.actionTertiaryBackgroundHover
                                         }
                                     }),
-                                    /*#__PURE__*/ jsx(Button, {
+                                    /*#__PURE__*/ jsx(Button$1, {
                                         onClick: ()=>{
                                             increaseWidthHandler();
                                         },
@@ -6238,6 +6354,90 @@ const TableRowSelectCell = /*#__PURE__*/ forwardRef(function TableRowSelectCell(
     });
 });
 
+const rootStyles = /*#__PURE__*/ css({
+    alignItems: 'center',
+    backgroundColor: 'var(--db-toolbar-surface)',
+    border: '1px solid var(--db-toolbar-border)',
+    borderRadius: 'var(--db-toolbar-border-radius)',
+    boxShadow: 'var(--db-toolbar-shadow)',
+    display: 'flex',
+    gap: 'var(--db-toolbar-gap)',
+    width: 'max-content',
+    padding: 'var(--db-toolbar-spacing)'
+});
+const Root = // eslint-disable-next-line react-component-name/react-component-name -- TODO(FEINF-4716)
+/*#__PURE__*/ forwardRef((props, ref)=>{
+    return /*#__PURE__*/ jsx(RadixToolbar.Root, {
+        ...addDebugOutlineIfEnabled(),
+        css: rootStyles,
+        ...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 separatorStyles = /*#__PURE__*/ css({
+    alignSelf: 'stretch',
+    backgroundColor: 'var(--db-toolbar-separator-surface)',
+    width: 1
+});
+const Separator = /*#__PURE__*/ forwardRef(// eslint-disable-next-line react-component-name/react-component-name -- TODO(FEINF-4716)
+(props, ref)=>{
+    return /*#__PURE__*/ jsx(RadixToolbar.Separator, {
+        css: separatorStyles,
+        ...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 toggleItemStyles = /*#__PURE__*/ css({
+    background: 'none',
+    color: 'var(--db-toolbar-toggle-item-text)',
+    border: 'none',
+    cursor: 'pointer',
+    '&:hover': {
+        color: 'var(--db-toolbar-toggle-item-text-hover)'
+    },
+    '&[data-state="on"]': {
+        color: 'var(--db-toolbar-toggle-item-text-press)'
+    }
+});
+const ToggleItem = /*#__PURE__*/ forwardRef(// eslint-disable-next-line react-component-name/react-component-name -- TODO(FEINF-4716)
+(props, ref)=>{
+    return /*#__PURE__*/ jsx(RadixToolbar.ToggleItem, {
+        css: toggleItemStyles,
+        ...props,
+        ref: ref
+    });
+});
+
+var Toolbar = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Button: Button,
+  Link: Link,
+  Root: Root,
+  Separator: Separator,
+  ToggleGroup: ToggleGroup,
+  ToggleItem: ToggleItem
+});
+
 function treeGridReducer(state, action) {
     switch(action.type){
         case 'TOGGLE_ROW_EXPANDED':
@@ -6484,7 +6684,8 @@ const TreeGrid = ({ data, columns, renderCell, renderRow, renderTable, renderHea
     const defaultRenderHeader = useCallback(({ columns, headerProps })=>/*#__PURE__*/ jsx("thead", {
             ...headerProps,
             children: /*#__PURE__*/ jsx("tr", {
-                children: columns.map((column)=>/*#__PURE__*/ jsx("th", {
+                children: columns.map((column)=>// oxlint-disable-next-line jsx-a11y/no-redundant-roles
+                    /*#__PURE__*/ jsx("th", {
                         role: "columnheader",
                         children: column.header
                     }, column.id))
@@ -7626,7 +7827,7 @@ const TypeaheadComboboxSeparator = (props)=>{
     }
     // role="presentation" keeps the decorative separator out of the listbox's owned children (which
     // must be only options) now that menu children render as direct children of the <ul role="listbox">.
-    return /*#__PURE__*/ jsx(Separator, {
+    return /*#__PURE__*/ jsx(Separator$1, {
         role: "presentation",
         ...props
     });
@@ -7638,7 +7839,7 @@ const TypeaheadComboboxAddButton = /*#__PURE__*/ forwardRef(function TypeaheadCo
     if (!isInsideTypeaheadCombobox) {
         throw new Error('`TypeaheadComboboxAddButton` must be used within `TypeaheadComboboxRoot`');
     }
-    return /*#__PURE__*/ jsx(Button, {
+    return /*#__PURE__*/ jsx(Button$1, {
         ...restProps,
         // oxlint-disable-next-line @databricks/no-dynamic-property-value -- Validated in the Root for the context exempt:ae0b57c6-871d-4375-a3ea-2574d7a3899e
         componentId: componentIdProp ?? `${componentId}.add_option`,
@@ -8304,5 +8505,5 @@ const DM_SANS_FONT_FAMILY = "'DM Sans', -apple-system, BlinkMacSystemFont, 'Sego
 // code and other tabular text keep a fixed-width face if the web font fails to load.
 const DM_MONO_FONT_FAMILY = "'DM Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";
 
-export { TableHeader as $, Alert as A, Breadcrumb as B, Card as C, DBAssistantAvatar as D, ROW_GUTTER_SIZE as E, FormUI as F, GenericSkeleton as G, Header as H, InfoPopover as I, ResourceStatusIndicator as J, Row as K, LegacyDatePicker as L, Menu as M, Notification as N, Overflow as O, PageWrapper as P, Space as Q, RHFControlledComponents as R, SnackBar as S, TypeaheadComboboxRoot as T, Steps as U, Switch as V, Table as W, TableCell as X, TableContext as Y, TableFilterInput as Z, TableFilterLayout as _, TypeaheadComboboxMultiSelectInput as a, TableRow as a0, TableRowAction as a1, TableRowActionHeader as a2, TableRowContext as a3, TableRowMenuContainer as a4, TableRowMultiAction as a5, TableRowSelectCell as a6, TableSkeleton as a7, TableSkeletonRows as a8, TreeGrid as a9, useLegacyNotification as aA, useSnackBar as aB, useThemedStyles as aC, withNotifications as aD, TruncationTooltip as aa, TypeaheadComboboxAddButton$1 as ab, TypeaheadComboboxInput$1 as ac, TypeaheadComboboxMenu$1 as ad, TypeaheadComboboxMultiSelectInput$1 as ae, TypeaheadComboboxRoot$1 as af, TypeaheadComboboxSectionHeader$1 as ag, TypeaheadComboboxSeparator$1 as ah, TypeaheadComboboxToggleButton$1 as ai, index as aj, consumerDarkColorList as ak, consumerLightColorList as al, flushFastdomForTesting as am, getGlobalResetStyles as an, getGlobalStyles as ao, getSwitchWithLabelStyles as ap, isSafeRelativeUrl as aq, isSafeUrl as ar, measure as as, sanitizeNextUrl as at, setupDesignSystemEventProviderForTesting as au, snackBarManager as av, update as aw, useDefaultTreeGridState as ax, useDesignSystemFlags as ay, useFastDom as az, TypeaheadComboboxMenu as b, TypeaheadComboboxInput as c, ApplyGlobalStyles as d, AssistantAvatar as e, AutoComplete as f, Avatar as g, AvatarGroup as h, Col as i, DM_MONO_FONT_FAMILY as j, DM_SANS_FONT_FAMILY as k, DesignTokenScopeWithEmotionTheme as l, DialogComboboxAddButton as m, DialogComboboxFooter as n, DialogComboboxHintRow as o, DialogComboboxOptionControlledList as p, DialogComboboxOptionListSearch as q, DialogComboboxSeparator as r, Dropdown as s, DuboisDatePicker as t, useComboboxState as u, HoverCard as v, LegacyPopover as w, LegacySkeleton as x, OverflowPopover as y, ParagraphSkeleton as z };
-//# sourceMappingURL=index-BRAVZg-S.js.map
+export { TableFilterLayout as $, Alert as A, Breadcrumb as B, Card as C, DBAssistantAvatar as D, ROW_GUTTER_SIZE as E, FormUI as F, GenericSkeleton as G, Header as H, InfoPopover as I, ResourceStatusIndicator as J, Row as K, LegacyDatePicker as L, Menu as M, Notification as N, Overflow as O, PageWrapper as P, SnackBar as Q, RHFControlledComponents as R, Slider as S, TypeaheadComboboxRoot as T, Space as U, Steps as V, Switch as W, Table as X, TableCell as Y, TableContext as Z, TableFilterInput as _, TypeaheadComboboxMultiSelectInput as a, TableHeader as a0, TableRow as a1, TableRowAction as a2, TableRowActionHeader as a3, TableRowContext as a4, TableRowMenuContainer as a5, TableRowMultiAction as a6, TableRowSelectCell as a7, TableSkeleton as a8, TableSkeletonRows as a9, useDesignSystemFlags as aA, useFastDom as aB, useLegacyNotification as aC, useSnackBar as aD, useThemedStyles as aE, withNotifications as aF, Toolbar as aa, TreeGrid as ab, TruncationTooltip as ac, TypeaheadComboboxAddButton$1 as ad, TypeaheadComboboxInput$1 as ae, TypeaheadComboboxMenu$1 as af, TypeaheadComboboxMultiSelectInput$1 as ag, TypeaheadComboboxRoot$1 as ah, TypeaheadComboboxSectionHeader$1 as ai, TypeaheadComboboxSeparator$1 as aj, TypeaheadComboboxToggleButton$1 as ak, index as al, consumerDarkColorList as am, consumerLightColorList as an, flushFastdomForTesting as ao, getGlobalResetStyles as ap, getGlobalStyles as aq, getSwitchWithLabelStyles as ar, isSafeRelativeUrl as as, isSafeUrl as at, measure as au, sanitizeNextUrl as av, setupDesignSystemEventProviderForTesting as aw, snackBarManager as ax, update as ay, useDefaultTreeGridState as az, TypeaheadComboboxMenu as b, TypeaheadComboboxInput as c, ApplyGlobalStyles as d, AssistantAvatar as e, AutoComplete as f, Avatar as g, AvatarGroup as h, Col as i, DM_MONO_FONT_FAMILY as j, DM_SANS_FONT_FAMILY as k, DesignTokenScopeWithEmotionTheme as l, DialogComboboxAddButton as m, DialogComboboxFooter as n, DialogComboboxHintRow as o, DialogComboboxOptionControlledList as p, DialogComboboxOptionListSearch as q, DialogComboboxSeparator as r, Dropdown as s, DuboisDatePicker as t, useComboboxState as u, HoverCard as v, LegacyPopover as w, LegacySkeleton as x, OverflowPopover as y, ParagraphSkeleton as z };
+//# sourceMappingURL=index-DiRpSwH2.js.map