@databricks/design-system 2.0.6 → 2.0.8

package/dist/dubois-colors.less

@@ -56,7 +56,7 @@
 @dubois-neutral650: #424242;
 @dubois-neutral700: #262626;
 @dubois-neutral800: #161616;
-@dubois-neutralWarm050: #F9F7F4;
+@dubois-neutralWarm050: #FCFBF9;
 @dubois-orange: #FF3621;
 @dubois-pink: #B45091;
 @dubois-purple: #8A63BF;
@@ -155,6 +155,7 @@
 @dubois-light-borderDanger: #FBD0D8;
 @dubois-light-borderWarning: #F8D4A5;
 @dubois-light-codeBackground: rgba(82, 82, 82, 0.0800);
+@dubois-light-composerBackground: #FFFFFF;
 @dubois-light-iconTrending: #FF3621;
 @dubois-light-overlayOverlay: rgba(0, 0, 0, 0.2600);
 @dubois-light-progressFill: #CBCBCB;
@@ -263,6 +264,7 @@
 @dubois-dark-borderDanger: #E65B77;
 @dubois-dark-borderWarning: #DE7921;
 @dubois-dark-codeBackground: #37444F;
+@dubois-dark-composerBackground: #1F272D;
 @dubois-dark-iconTrending: #FF3621;
 @dubois-dark-overlayOverlay: rgba(0, 0, 0, 0.4500);
 @dubois-dark-progressFill: #5F7281;

package/dist/icon-metadata.json

@@ -745,6 +745,11 @@
     "classification": "Action",
     "description": "Adjust, sliders, controls, tuning, settings"
   },
+  "SlidesIcon": {
+    "classification": "Object",
+    "description": "Slides, presentation, slide deck, deck",
+    "productArea": "AI/BI"
+  },
   "ArrowsUpDownIcon": {
     "classification": "Component",
     "description": "Sort, reorder, swap, toggle sort"

package/dist/{index-DiRpSwH2.js → index-CUzS-Vjx.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$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 { p as primitiveColors, f as DesignSystemEventProvider, g as useDesignSystemTheme, h as DesignTokenScope, i as useDesignSystemContext, I as InfoFillIcon, C as CheckCircleFillIcon, j as WarningFillIcon, k as DangerFillIcon, l as DesignSystemEventProviderAnalyticsEventTypes, m as useDesignSystemEventComponentCallbacks, n as DesignSystemEventProviderComponentTypes, o as DesignSystemEventProviderComponentSubTypeMap, q as useNotifyOnFirstView, r as useStableUuidV4, B as Button$1, T as Typography, s as ChevronDownIcon, t as ChevronRightIcon, v as DesignSystemAntDConfigProvider, w as CloseSmallIcon, x as addDebugOutlineIfEnabled, y as Modal, z as getAnimationCss, A as token, S as ShapeTokens, E as getDarkModePortalStyles, G as useModalContext, R as Root$3, H as Trigger, J as InfoSmallIcon, K as Content, L as Arrow, N as Tooltip, O as SparkleDoubleIcon, P as getIconClassName, Q as LoadingState, U as visuallyHidden, V as genSkeletonAnimatedColor, X as getOffsets, Y as DesignSystemEventSuppressInteractionProviderContext, Z as DesignSystemEventSuppressInteractionTrueContextValue, _ as tableStyles, $ as repeatingElementsStyles, a0 as tableClassNames, a1 as hideIconButtonRowStyles, a2 as hideIconButtonActionCellClassName, a3 as safex, a4 as TitleSkeleton, a5 as useDialogComboboxContext, a6 as PlusIcon, a7 as importantify, a8 as getComboboxOptionItemWrapperStyles, a9 as getFooterStyles, aa as useDialogComboboxOptionListContext, ab as generateUuidV4, ac as getContentOptions, ad as findHighlightedOption, ae as highlightOption, af as Input, ag as SearchIcon, ah as EmptyResults, ai as findClosestOptionSibling, aj as DialogComboboxOptionListCheckboxItem, ak as DialogComboboxOptionListSelectItem, al as DialogComboboxOptionListContextProvider, am as LoadingSpinner, an as DialogComboboxOptionList, ao as useUniqueId, ap as TypeaheadComboboxContextProvider, aq as useTypeaheadComboboxContext, ar as useDuboisThemeClass, as as useDesignTokenOverrideStyles, at as getComboboxContentWrapperStyles, au as ClearSelectionButton, av as TypeaheadComboboxSelectedItem, aw as CountBadge, ax as getValidationStateColor, ay as SectionHeader, az as useComboboxState$1, aA as useMultipleSelectionState$1, aB as Radio, aC as Checkbox, aD as DialogCombobox, aE as DialogComboboxTrigger, aF as DialogComboboxContent, aG as Select, aH as SelectTrigger, aI as SelectContent, aJ as SelectOption, aK as LegacySelect, aL as WarningIcon, aM as CheckCircleIcon, aN as DangerIcon, aO as Hint, aP as Title$1, aQ as CloseIcon, aR as RestoreAntDDefaultClsPrefix, aS as AccessibleContainer, aT as DU_BOIS_ENABLE_ANIMATION_CLASSNAME, aU as Tag, aV as CircleOffIcon, aW as CircleOutlineIcon, aX as CircleIcon, aY as getBtnClassName, aZ as SortAscendingIcon, a_ as SortDescendingIcon, a$ as SortUnsortedIcon, b0 as MinusSquareIcon, b1 as PlusSquareIcon, b2 as TypeaheadComboboxV2ContextProvider, b3 as useTypeaheadComboboxV2Context, b4 as useRadixModalContext, b5 as useIsomorphicLayoutEffect, b6 as useScrollOptionIntoView, b7 as InfoTooltip, b8 as getInfoIconStyles, b9 as HintRow, ba as getCheckboxStyles, bb as getMenuItemStyles, bc as TypeaheadComboboxSelectedItem$1, bd as CountBadge$1, be as TypeaheadComboboxMenuItem } from './WizardStepContentWrapper-DfErft8z.js';
 import { 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';
@@ -92,6 +92,7 @@ const consumerDarkColorList = {
     borderDanger: primitiveColors.red500,
     borderWarning: primitiveColors.yellow500,
     codeBackground: primitiveColors.grey650,
+    composerBackground: primitiveColors.grey700,
     iconTrending: primitiveColors.orange,
     overlayOverlay: 'rgba(0, 0, 0, 0.4500)',
     progressFill: primitiveColors.grey500,
@@ -178,6 +179,7 @@ const consumerLightColorList = {
     borderDanger: primitiveColors.red300,
     borderWarning: primitiveColors.yellow300,
     codeBackground: 'rgba(82, 82, 82, 0.0800)',
+    composerBackground: primitiveColors.white,
     iconTrending: primitiveColors.orange,
     overlayOverlay: primitiveColors.blackAlpha26,
     progressFill: primitiveColors.neutral300,
@@ -1152,12 +1154,27 @@ const SIZE = new Map([
     ]
 ]);
 const DEFAULT_SIZE = 'sm';
+// TODO(FEINF-6539): adopt a range-specific identity-color system when one lands.
+const AVATAR_SURFACE_VAR = {
+    indigo: '#434a93',
+    teal: '#04867d',
+    pink: '#b45091',
+    purple: '#8a63bf',
+    brown: '#a6630c'
+};
+const AVATAR_SURFACE_ORDER = [
+    'indigo',
+    'teal',
+    'pink',
+    'brown',
+    'purple'
+];
 function getAvatarEmotionStyles({ backgroundColor, size = DEFAULT_SIZE, theme }) {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- TODO(FEINF-3982)
     const { avatarSize, fontSize, iconSize } = SIZE.get(size);
     return {
         abbr: {
-            color: theme.colors.tagText,
+            color: 'var(--db-avatar-text)',
             textDecoration: 'none',
             textTransform: 'uppercase'
         },
@@ -1165,14 +1182,14 @@ function getAvatarEmotionStyles({ backgroundColor, size = DEFAULT_SIZE, theme })
             height: avatarSize,
             width: avatarSize,
             fontSize,
-            [`& :is(${getIconClassName()})`]: {
+            [`& ${getIconClassName()}`]: {
                 fontSize: iconSize
             }
         },
         icon: {
             alignItems: 'center',
-            color: backgroundColor ? theme.colors.tagText : theme.colors.textSecondary,
-            backgroundColor: backgroundColor ? theme.colors[backgroundColor] : theme.DU_BOIS_INTERNAL_ONLY.colors.tagBackgroundDefault,
+            color: backgroundColor ? 'var(--db-avatar-text)' : 'var(--db-avatar-icon)',
+            backgroundColor: backgroundColor ? AVATAR_SURFACE_VAR[backgroundColor] : 'var(--db-avatar-surface)',
             display: 'flex',
             justifyContent: 'center'
         },
@@ -1181,7 +1198,7 @@ function getAvatarEmotionStyles({ backgroundColor, size = DEFAULT_SIZE, theme })
             objectPosition: 'center'
         },
         system: {
-            borderRadius: theme.borders.borderRadiusSm,
+            borderRadius: 'var(--db-avatar-border-radius)',
             overflow: 'hidden'
         },
         user: {
@@ -1205,24 +1222,12 @@ function getAvatarEmotionStyles({ backgroundColor, size = DEFAULT_SIZE, theme })
     const idx = Math.abs(hash % maxRange);
     return idx;
 }
-function getAvatarBackgroundColor(label, theme) {
-    const randomNumber = getRandomNumberFromString({
+function getAvatarBackgroundColor(label) {
+    const idx = getRandomNumberFromString({
         value: label,
-        maxRange: 5
-    });
-    switch(randomNumber){
-        case 0:
-            return theme.colors.indigo;
-        case 1:
-            return theme.colors.teal;
-        case 2:
-            return theme.colors.pink;
-        case 3:
-            return theme.colors.brown;
-        case 4:
-        default:
-            return theme.colors.purple;
-    }
+        maxRange: AVATAR_SURFACE_ORDER.length
+    });
+    return AVATAR_SURFACE_VAR[AVATAR_SURFACE_ORDER[idx]];
 }
 function Avatar(props) {
     const { theme } = useDesignSystemTheme();
@@ -1263,7 +1268,7 @@ function Avatar(props) {
                     styles.system,
                     styles.icon,
                     {
-                        backgroundColor: getAvatarBackgroundColor(props.label, theme)
+                        backgroundColor: getAvatarBackgroundColor(props.label)
                     }
                 ],
                 children: /*#__PURE__*/ jsx("abbr", {
@@ -1303,7 +1308,7 @@ function Avatar(props) {
                         styles.user,
                         styles.icon,
                         {
-                            backgroundColor: getAvatarBackgroundColor(props.label, theme)
+                            backgroundColor: getAvatarBackgroundColor(props.label)
                         }
                     ],
                     children: /*#__PURE__*/ jsx("abbr", {
@@ -1347,27 +1352,23 @@ function AssistantAvatar({ backgroundColor, size, label }) {
     });
 }
 const MAX_AVATAR_GROUP_USERS = 3;
-function getAvatarGroupEmotionStyles(theme) {
-    return {
-        container: {
-            display: 'flex',
-            alignItems: 'center',
-            gap: theme.spacing.xs
-        },
-        avatarsContainer: {
-            display: 'flex'
-        },
-        avatar: {
-            display: 'flex',
-            borderRadius: '100%',
-            border: `1px solid ${theme.colors.backgroundPrimary}`,
-            position: 'relative'
-        }
-    };
-}
+const AVATAR_GROUP_STYLES = {
+    container: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 'var(--db-avatar-group-gap)'
+    },
+    avatarsContainer: {
+        display: 'flex'
+    },
+    avatar: {
+        display: 'flex',
+        borderRadius: '100%',
+        border: 'var(--db-avatar-group-border-width) solid var(--db-avatar-group-border-color)',
+        position: 'relative'
+    }
+};
 function AvatarGroup({ size = DEFAULT_SIZE, users }) {
-    const { theme } = useDesignSystemTheme();
-    const styles = getAvatarGroupEmotionStyles(theme);
     const displayedUsers = useMemo(()=>users.slice(0, MAX_AVATAR_GROUP_USERS), [
         users
     ]);
@@ -1377,16 +1378,16 @@ function AvatarGroup({ size = DEFAULT_SIZE, users }) {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- TODO(FEINF-3982)
     const { avatarSize, groupShift: avatarShift, fontSize } = SIZE.get(size);
     return /*#__PURE__*/ jsxs("div", {
-        css: styles.container,
+        css: AVATAR_GROUP_STYLES.container,
         children: [
             /*#__PURE__*/ jsx("div", {
                 css: {
-                    ...styles.avatarsContainer,
+                    ...AVATAR_GROUP_STYLES.avatarsContainer,
                     width: (avatarSize + 2 - avatarShift) * displayedUsers.length + avatarShift
                 },
                 children: displayedUsers.map((user, idx)=>/*#__PURE__*/ jsx("div", {
                         css: {
-                            ...styles.avatar,
+                            ...AVATAR_GROUP_STYLES.avatar,
                             left: -avatarShift * idx
                         },
                         children: /*#__PURE__*/ jsx(Avatar, {
@@ -1435,11 +1436,11 @@ const Breadcrumb = /* #__PURE__ */ (()=>{
             },
             [separatorClass]: {
                 fontSize: theme.general.iconFontSize,
-                [`& :is(${getIconClassName()})`]: {
+                [`& ${getIconClassName()}`]: {
                     fontSize: theme.typography.fontSizeBase
                 }
             },
-            [`& :is(${getIconClassName()})`]: {
+            [`& ${getIconClassName()}`]: {
                 fontSize: theme.typography.fontSizeBase
             },
             '& > span': {
@@ -3138,6 +3139,7 @@ children, dangerouslySetAntdProps, onClick, ...restProps }, ref) {
         children: /*#__PURE__*/ jsx("input", {
             ref: mergedRef,
             type: "checkbox",
+            className: "db-switch-input",
             // oxlint-disable-next-line jsx-a11y/role-has-required-aria-props
             role: "switch",
             id: uniqueId,
@@ -3438,17 +3440,16 @@ const getToggleButtonStyles$1 = (theme, disabled)=>{
     });
 });
 
-/** Height of the non-inline controls block, for callers that position it themselves. */ const TYPEAHEAD_COMBOBOX_CONTROLS_HEIGHT = 16;
 const TypeaheadComboboxControls$1 = ({ getDownshiftToggleButtonProps, showClearSelectionButton, showComboboxToggleButton = true, handleClear, disabled, loading = false, inline = false, className })=>{
     return /*#__PURE__*/ jsxs("div", {
         className: className,
         css: {
-            // Centers the 12px clear icon against the 16px toggle button.
+            // Centers the 12px clear icon against the 16px toggle button, and (when the caller sizes
+            // this block to the tag row) centers the whole controls block on the row's centerline.
             display: 'flex',
             alignItems: 'center',
             cursor: disabled ? 'not-allowed' : undefined,
             ...inline ? {} : {
-                height: TYPEAHEAD_COMBOBOX_CONTROLS_HEIGHT,
                 zIndex: 1
             }
         },
@@ -3653,8 +3654,6 @@ const TAG_ROW_HEIGHT = 24;
 const DEFAULT_VERTICAL_PADDING = 5;
 const MIDDLE_VERTICAL_PADDING = 3;
 const getVerticalPadding = (size)=>size === 'middle' ? MIDDLE_VERTICAL_PADDING : DEFAULT_VERTICAL_PADDING;
-// Centers the shorter controls block on the tag row it floats beside.
-const CONTROLS_ROW_OFFSET = (TAG_ROW_HEIGHT - TYPEAHEAD_COMBOBOX_CONTROLS_HEIGHT) / 2;
 // Overflow lives on this inner wrapper so the floated, sticky controls
 // (rendered as the first child) stay pinned to the top-right of the visible
 // scroll viewport while the tag list scrolls.
@@ -3901,13 +3900,15 @@ size, ...restProps }, ref)=>{
                     showClearSelectionButton: allowClear && (Boolean(inputValue) || selectedItems && selectedItems.length > 0) && !restProps.disabled,
                     handleClear: handleClear,
                     disabled: restProps.disabled,
-                    // `top` equals the flow position, so scrolling the tag list leaves the controls in
-                    // place on the first row.
+                    // The floated controls block is as tall as the tag row and flex-centers its icons (see
+                    // TypeaheadComboboxControls), so the clear/chevron sit on the row's centerline regardless
+                    // of their exact pixel heights. `top` is the row's top, so scrolling the tag list leaves
+                    // the controls pinned on the first row.
                     css: /*#__PURE__*/ css({
                         position: 'sticky',
-                        top: getVerticalPadding(size) + CONTROLS_ROW_OFFSET,
-                        marginTop: CONTROLS_ROW_OFFSET,
-                        float: 'right'
+                        top: getVerticalPadding(size),
+                        float: 'right',
+                        height: TAG_ROW_HEIGHT
                     })
                 }),
                 /*#__PURE__*/ jsxs("div", {
@@ -4415,10 +4416,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-Ct9x3rC1.js').then((m)=>({
+const LazyRHFControlledTypeaheadComboboxV2 = /*#__PURE__*/ React__default.lazy(()=>import('./RHFControlledTypeaheadComboboxV2-Boee19c1.js').then((m)=>({
             default: m.RHFControlledTypeaheadComboboxV2
         })));
-const LazyRHFControlledMultiSelectTypeaheadComboboxV2 = /*#__PURE__*/ React__default.lazy(()=>import('./RHFControlledTypeaheadComboboxV2-Ct9x3rC1.js').then((m)=>({
+const LazyRHFControlledMultiSelectTypeaheadComboboxV2 = /*#__PURE__*/ React__default.lazy(()=>import('./RHFControlledTypeaheadComboboxV2-Boee19c1.js').then((m)=>({
             default: m.RHFControlledMultiSelectTypeaheadComboboxV2
         })));
 function RHFControlledTypeaheadComboboxV2(props) {
@@ -5096,14 +5097,19 @@ const getToastRootStyle = (theme, classNamePrefix)=>{
     return /*#__PURE__*/ css({
         '&&': {
             position: 'relative',
+            // Re-enable pointer events the Viewport turns off. `!important` beats the inline
+            // `pointer-events: none` a Radix modal writes on this root when it opens, keeping the toast
+            // clickable over a modal.
+            pointerEvents: 'auto !important',
             display: 'grid',
-            background: theme.colors.backgroundPrimary,
-            padding: 12,
-            columnGap: 4,
-            boxShadow: theme.shadows.lg,
-            borderRadius: token(ShapeTokens.POPUP_BORDER_RADIUS, theme.borders.borderRadiusSm),
-            lineHeight: '20px',
-            borderColor: `1px solid ${theme.colors.border}`,
+            background: 'var(--db-notification-surface)',
+            padding: 'var(--db-notification-padding)',
+            columnGap: 'var(--db-notification-column-gap)',
+            boxShadow: 'var(--db-notification-shadow)',
+            borderRadius: 'var(--db-notification-border-radius)',
+            // No v2 line-height token. TODO(FEINF-6557): adopt one when it lands.
+            lineHeight: theme.typography.lineHeightBase,
+            borderColor: `1px solid var(--db-notification-border)`,
             gridTemplateRows: '[header] auto [content] auto',
             gridTemplateColumns: '[icon] auto [content] 1fr [close] auto',
             ...getDarkModePortalStyles(theme)
@@ -5120,16 +5126,16 @@ const getToastRootStyle = (theme, classNamePrefix)=>{
             justifyContent: 'center'
         },
         [`.${classNamePrefix}-notification-info-icon`]: {
-            color: theme.colors.textSecondary
+            color: 'var(--db-notification-icon)'
         },
         [`.${classNamePrefix}-notification-success-icon`]: {
-            color: theme.colors.textValidationSuccess
+            color: 'var(--db-notification-icon-success)'
         },
         [`.${classNamePrefix}-notification-warning-icon`]: {
-            color: theme.colors.textValidationWarning
+            color: 'var(--db-notification-icon-warning)'
         },
         [`.${classNamePrefix}-notification-error-icon`]: {
-            color: theme.colors.textValidationDanger
+            color: 'var(--db-notification-icon-error)'
         },
         '&&[data-state="open"]': {
             animation: `${slideInAnimation} 300ms cubic-bezier(0.16, 1, 0.3, 1)`
@@ -5190,7 +5196,7 @@ const Root$2 = // eslint-disable-next-line react-component-name/react-component-
         ...props,
         ...addDebugOutlineIfEnabled(),
         ...preventSwipeToClose(),
-        className: classnames(className, themeClass),
+        className: classnames(className, themeClass, DU_BOIS_ENABLE_ANIMATION_CLASSNAME),
         style: {
             ...style,
             ...themeOverrideStyle
@@ -5210,6 +5216,16 @@ const Root$2 = // eslint-disable-next-line react-component-name/react-component-
     });
 });
 // TODO: Support light and dark mode
+// Click-through: this fixed viewport band must not intercept clicks meant for content beneath it
+// (e.g. an open modal); toasts re-enable pointer events on their Root (standard Radix Toast pattern).
+// This MUST be a css class rather than part of the inline `getViewportStyle` below: the Root
+// re-enables pointer events via its own css class, and jsdom's getComputedStyle resolves only inline
+// styles, so an inline `none` here makes @testing-library/user-event treat every toast as
+// click-blocking in jsdom (it can't see the Root's class-based override) even though the click works
+// in a real browser. Keeping both declarations on classes stays symmetric across jsdom and browsers.
+const viewportClickThroughStyle = /*#__PURE__*/ css({
+    pointerEvents: 'none'
+});
 const getViewportStyle$1 = (theme)=>{
     return {
         position: 'fixed',
@@ -5217,19 +5233,19 @@ const getViewportStyle$1 = (theme)=>{
         right: 0,
         display: 'flex',
         flexDirection: 'column',
-        padding: 12,
-        gap: 12,
-        width: 440,
+        padding: 'var(--db-notification-viewport-padding)',
+        gap: 'var(--db-notification-viewport-gap)',
+        width: 'var(--db-notification-viewport-width)',
         listStyle: 'none',
         zIndex: theme.options.zIndexBase + 100,
         outline: 'none',
-        maxWidth: `calc(100% - ${theme.spacing.lg}px)`
+        maxWidth: 'calc(100% - var(--db-notification-viewport-margin))'
     };
 };
 const getTitleStyles = (theme)=>{
     return /*#__PURE__*/ css({
         fontWeight: theme.typography.typographyBoldFontWeight,
-        color: theme.colors.textPrimary,
+        color: 'var(--db-notification-text)',
         gridRow: 'header / header',
         gridColumn: 'content / content',
         userSelect: 'text'
@@ -5245,47 +5261,42 @@ const Title = // eslint-disable-next-line react-component-name/react-component-n
         children: children
     });
 });
-const getDescriptionStyles = (theme)=>{
-    return /*#__PURE__*/ css({
-        marginTop: 4,
-        color: theme.colors.textPrimary,
-        gridRow: 'content / content',
-        gridColumn: 'content / content',
-        userSelect: 'text',
-        wordBreak: 'break-word'
-    });
-};
+const DESCRIPTION_STYLES = /*#__PURE__*/ css({
+    marginTop: 'var(--db-notification-description-gap)',
+    color: 'var(--db-notification-text)',
+    gridRow: 'content / content',
+    gridColumn: 'content / content',
+    userSelect: 'text',
+    wordBreak: 'break-word'
+});
 const Description = /*#__PURE__*/ forwardRef(function({ children, ...props }, ref) {
-    const { theme } = useDesignSystemTheme();
     return /*#__PURE__*/ jsx(Toast.Description, {
         ref: ref,
-        css: getDescriptionStyles(theme),
+        css: DESCRIPTION_STYLES,
         ...props,
         children: children
     });
 });
-const getCloseStyles = (theme)=>{
-    return /*#__PURE__*/ css({
-        color: theme.colors.textSecondary,
-        position: 'absolute',
-        // Offset close button position to align with the title, title uses 20px line height, button has 32px
-        right: 6,
-        top: 6
-    });
+const CLOSE_STYLES = /*#__PURE__*/ css({
+    color: 'var(--db-notification-icon)',
+    position: 'absolute',
+    // Offset close button position to align with the title, title uses 20px line height, button has 32px
+    right: 'var(--db-notification-close-offset)',
+    top: 'var(--db-notification-close-offset)'
+});
+const CLOSE_WRAPPER_STYLE = {
+    gridColumn: 'close / close',
+    gridRow: 'header / content',
+    width: 'var(--db-notification-close-size)'
 };
 const Close = /*#__PURE__*/ forwardRef(function(props, ref) {
-    const { theme } = useDesignSystemTheme();
     const { closeLabel, componentId, analyticsEvents, ...restProps } = props;
     return(// Wrapper to keep close column width for content sizing, close button positioned absolute for alignment without affecting the grid's first row height (title)
     /*#__PURE__*/ jsx("div", {
-        style: {
-            gridColumn: 'close / close',
-            gridRow: 'header / content',
-            width: 20
-        },
+        style: CLOSE_WRAPPER_STYLE,
         children: /*#__PURE__*/ jsx(Toast.Close, {
             ref: ref,
-            css: getCloseStyles(theme),
+            css: CLOSE_STYLES,
             ...restProps,
             asChild: true,
             children: /*#__PURE__*/ jsx(Button$1, {
@@ -5307,6 +5318,7 @@ const Viewport = (props)=>{
     const { theme } = useDesignSystemTheme();
     return /*#__PURE__*/ jsx(Toast.Viewport, {
         className: DU_BOIS_ENABLE_ANIMATION_CLASSNAME,
+        css: viewportClickThroughStyle,
         style: getViewportStyle$1(theme),
         ...props
     });
@@ -5599,7 +5611,7 @@ const snackBarManager = new SnackBarManager();
 
 const getCloseButtonStyles = (clsPrefix)=>{
     const notLink = `:not(${getBtnClassName(clsPrefix, '-link', '')})`;
-    const iconSelector = `:is(${getIconClassName()})`;
+    const iconSelector = `${getIconClassName()}`;
     return /*#__PURE__*/ css({
         marginLeft: 'var(--db-snackbar-close-button-spacing)',
         flexShrink: 0,
@@ -5738,7 +5750,7 @@ const SnackBarRoot = /*#__PURE__*/ forwardRef(function SnackBarRoot({ snack }, r
     return /*#__PURE__*/ jsxs(Toast.Root, {
         ref: ref,
         css: getSnackBarRootStyle(snack.backgroundColor, snack.textColor),
-        className: themeClass,
+        className: `${themeClass} ${DU_BOIS_ENABLE_ANIMATION_CLASSNAME}`,
         style: {
             ...snack.closeButton === false ? {
                 cursor: 'pointer'
@@ -8506,4 +8518,4 @@ const DM_SANS_FONT_FAMILY = "'DM Sans', -apple-system, BlinkMacSystemFont, 'Sego
 const DM_MONO_FONT_FAMILY = "'DM Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";
 
 export { TableFilterLayout as $, Alert as A, Breadcrumb as B, Card as C, DBAssistantAvatar as D, ROW_GUTTER_SIZE as E, FormUI as F, GenericSkeleton as G, Header as H, InfoPopover as I, ResourceStatusIndicator as J, Row as K, LegacyDatePicker as L, Menu as M, Notification as N, Overflow as O, PageWrapper as P, SnackBar as Q, RHFControlledComponents as R, Slider as S, TypeaheadComboboxRoot as T, Space as U, Steps as V, Switch as W, Table as X, TableCell as Y, TableContext as Z, TableFilterInput as _, TypeaheadComboboxMultiSelectInput as a, TableHeader as a0, TableRow as a1, TableRowAction as a2, TableRowActionHeader as a3, TableRowContext as a4, TableRowMenuContainer as a5, TableRowMultiAction as a6, TableRowSelectCell as a7, TableSkeleton as a8, TableSkeletonRows as a9, useDesignSystemFlags as aA, useFastDom as aB, useLegacyNotification as aC, useSnackBar as aD, useThemedStyles as aE, withNotifications as aF, Toolbar as aa, TreeGrid as ab, TruncationTooltip as ac, TypeaheadComboboxAddButton$1 as ad, TypeaheadComboboxInput$1 as ae, TypeaheadComboboxMenu$1 as af, TypeaheadComboboxMultiSelectInput$1 as ag, TypeaheadComboboxRoot$1 as ah, TypeaheadComboboxSectionHeader$1 as ai, TypeaheadComboboxSeparator$1 as aj, TypeaheadComboboxToggleButton$1 as ak, index as al, consumerDarkColorList as am, consumerLightColorList as an, flushFastdomForTesting as ao, getGlobalResetStyles as ap, getGlobalStyles as aq, getSwitchWithLabelStyles as ar, isSafeRelativeUrl as as, isSafeUrl as at, measure as au, sanitizeNextUrl as av, setupDesignSystemEventProviderForTesting as aw, snackBarManager as ax, update as ay, useDefaultTreeGridState as az, TypeaheadComboboxMenu as b, TypeaheadComboboxInput as c, ApplyGlobalStyles as d, AssistantAvatar as e, AutoComplete as f, Avatar as g, AvatarGroup as h, Col as i, DM_MONO_FONT_FAMILY as j, DM_SANS_FONT_FAMILY as k, DesignTokenScopeWithEmotionTheme as l, DialogComboboxAddButton as m, DialogComboboxFooter as n, DialogComboboxHintRow as o, DialogComboboxOptionControlledList as p, DialogComboboxOptionListSearch as q, DialogComboboxSeparator as r, Dropdown as s, DuboisDatePicker as t, useComboboxState as u, HoverCard as v, LegacyPopover as w, LegacySkeleton as x, OverflowPopover as y, ParagraphSkeleton as z };
-//# sourceMappingURL=index-DiRpSwH2.js.map
+//# sourceMappingURL=index-CUzS-Vjx.js.map