@databricks/design-system 1.12.9 → 1.12.11

package/dist/{Typography-91d3d591.js → DropdownMenu-eb8788e5.js}

@@ -1,9 +1,9 @@
-import React__default, { createContext, useContext, useMemo, useEffect, forwardRef } from 'react';
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-import { useTheme, ThemeProvider, css } from '@emotion/react';
-import { notification, ConfigProvider, Button as Button$1, Input as Input$1, Typography as Typography$1 } from 'antd';
+import React__default, { createContext, useContext, useMemo, useEffect, useLayoutEffect, forwardRef, useRef, useImperativeHandle, Children } from 'react';
+import { jsx, Fragment, jsxs } from '@emotion/react/jsx-runtime';
+import { useTheme, ThemeProvider, css, keyframes } from '@emotion/react';
+import { notification, ConfigProvider, Button as Button$1, Tooltip as Tooltip$1, Input as Input$1, Typography as Typography$1 } from 'antd';
+import * as DropdownMenu$1 from '@radix-ui/react-dropdown-menu';
 import chroma from 'chroma-js';
-import AntDIcon from '@ant-design/icons';
 import _isNil from 'lodash/isNil';
 import _endsWith from 'lodash/endsWith';
 import _isBoolean from 'lodash/isBoolean';
@@ -11,6 +11,131 @@ import _isNumber from 'lodash/isNumber';
 import _isString from 'lodash/isString';
 import _mapValues from 'lodash/mapValues';
 import unitless from '@emotion/unitless';
+import AntDIcon from '@ant-design/icons';
+import _uniqueId from 'lodash/uniqueId';
+
+/**
+ * Used to hide text visually, but still be readable by screen-readers
+ * and other assistive devices.
+ *
+ * https://www.tpgi.com/the-anatomy-of-visually-hidden/
+ */
+const visuallyHidden = {
+  '&:not(:focus):not(:active)': {
+    clip: 'rect(0 0 0 0)',
+    clipPath: 'inset(50%)',
+    height: '1px',
+    overflow: 'hidden',
+    position: 'absolute',
+    whiteSpace: 'nowrap',
+    width: '1px'
+  }
+};
+
+const ColorVars = {
+  primary: 'textPrimary',
+  secondary: 'textSecondary',
+  info: 'textValidationInfo',
+  error: 'textValidationDanger',
+  success: 'textValidationSuccess',
+  warning: 'textValidationWarning'
+};
+
+/**
+ * Recursively appends `!important` to all CSS properties in an Emotion `CSSObject`.
+ * Used to ensure that we always override Ant styles, without worrying about selector precedence.
+ */
+function importantify(obj) {
+  return _mapValues(obj, (value, key) => {
+    if (_isString(value) || _isNumber(value) || _isBoolean(value)) {
+      // Make sure we don't double-append important
+      if (_isString(value) && _endsWith(value, '!important')) {
+        return value;
+      }
+      if (_isNumber(value)) {
+        if (unitless[key]) {
+          return `${value}!important`;
+        }
+        return `${value}px!important`;
+      }
+      return `${value}!important`;
+    }
+    if (_isNil(value)) {
+      return value;
+    }
+    return importantify(value);
+  });
+}
+
+/**
+ * Returns a text color, in case of invalid/missing key and missing fallback color it will return textPrimary
+ * @param theme
+ * @param key - key of TypographyColor
+ * @param fallbackColor - color to return as fallback -- used to remove tertiary check inline
+ */
+function getTypographyColor(theme, key, fallbackColor) {
+  if (theme && key && Object(theme.colors).hasOwnProperty(ColorVars[key])) {
+    return theme.colors[ColorVars[key]];
+  }
+  return fallbackColor !== null && fallbackColor !== void 0 ? fallbackColor : theme.colors.textPrimary;
+}
+
+/**
+ * Returns validation color based on state, has default validation colors if params are not provided
+ * @param theme
+ * @param validationState
+ * @param errorColor
+ * @param warningColor
+ * @param successColor
+ */
+function getValidationStateColor(theme, validationState) {
+  let {
+    errorColor,
+    warningColor,
+    successColor
+  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  switch (validationState) {
+    case 'error':
+      return errorColor || theme.colors.actionDangerPrimaryBackgroundDefault;
+    case 'warning':
+      return warningColor || theme.colors.textValidationWarning;
+    case 'success':
+      return successColor || theme.colors.textValidationSuccess;
+    default:
+      return undefined;
+  }
+}
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "g8zzui",
+  styles: "cursor:progress"
+} : {
+  name: "4y1qki-AccessibleContainer",
+  styles: "cursor:progress;label:AccessibleContainer;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+function AccessibleContainer(_ref) {
+  let {
+    children,
+    label
+  } = _ref;
+  if (!label) {
+    return jsx(Fragment, {
+      children: children
+    });
+  }
+  return jsxs("div", {
+    css: _ref2,
+    children: [jsx("span", {
+      css: visuallyHidden,
+      children: label
+    }), jsx("div", {
+      "aria-hidden": true,
+      children: children
+    })]
+  });
+}
 
 // Border variables
 const borders = {
@@ -51,6 +176,24 @@ const responsive = {
 };
 var responsive$1 = responsive;
 
+/**
+ * Provides access to http://go/safex flags from the frontend. Note that this is a temporary
+ * workaround until direct `safex` imports are available.
+ * @param flag The name of the flag to check
+ * @param defaultValue The default value to return if the flag is not set
+ * @returns
+ */
+const safex = (flag, defaultValue) => {
+  // Catching errors here, because we don't have type-safety to ensure
+  // that `__debug__safex`'s API hasn't changed.
+  try {
+    const globalSafex = window.__debug__safex;
+    return globalSafex ? globalSafex(flag, defaultValue) : defaultValue;
+  } catch (e) {
+    return defaultValue;
+  }
+};
+
 // Exported from go/designsystem/colorsheet
 const colorPalettePrimary = {
   primary: '#2272B4',
@@ -96,10 +239,20 @@ const colorPalettePrimary = {
   yellow700: '#93320B',
   yellow800: '#5F1B02'
 };
+const newGreys = {
+  grey100: '#F8F8F8',
+  grey200: '#E8E8E8',
+  grey300: '#D0D0D0',
+  grey400: '#AFAFAF',
+  grey500: '#969696',
+  grey600: '#727272',
+  grey700: '#403F3F',
+  grey800: '#181818'
+};
 const colorPaletteSecondary = {
   brown: '#A6630C',
   coral: '#C83243',
-  charcoal: '#5D7283',
+  charcoal: colorPalettePrimary.grey600,
   indigo: '#434A93',
   lemon: '#FACB66',
   lime: '#308613',
@@ -168,7 +321,7 @@ const lightColorList = {
   tagDefault: chroma(colorPalettePrimary.grey600).alpha(0.08).hex(),
   tagBrown: colorPaletteSecondary.brown,
   tagCoral: colorPaletteSecondary.coral,
-  tagCharcoal: colorPalettePrimary.grey600,
+  tagCharcoal: colorPaletteSecondary.charcoal,
   tagIndigo: colorPaletteSecondary.indigo,
   tagLemon: colorPaletteSecondary.lemon,
   tagLime: colorPaletteSecondary.lime,
@@ -245,7 +398,7 @@ const darkColorList = {
   tagDefault: chroma(colorPalettePrimary.white).alpha(0.16).hex(),
   tagBrown: chroma(colorPaletteSecondary.brown).alpha(0.84).hex(),
   tagCoral: chroma(colorPaletteSecondary.coral).alpha(0.84).hex(),
-  tagCharcoal: chroma(colorPalettePrimary.grey600).alpha(0.84).hex(),
+  tagCharcoal: chroma(colorPaletteSecondary.charcoal).alpha(0.84).hex(),
   tagIndigo: chroma(colorPaletteSecondary.indigo).alpha(0.84).hex(),
   tagLemon: chroma(colorPaletteSecondary.lemon).alpha(0.84).hex(),
   tagLime: chroma(colorPaletteSecondary.lime).alpha(0.84).hex(),
@@ -267,6 +420,38 @@ const darkColorList = {
   backgroundDanger: 'rgba(200,45,76,0.08)',
   backgroundWarning: 'rgba(222,121,33,0.08)'
 };
+const secondaryColorsUsingNewGreys = {
+  charcoal: newGreys.grey600
+};
+const lightColorsUsingNewGreys = {
+  actionDefaultBorderDefault: newGreys.grey300,
+  actionDefaultTextDefault: newGreys.grey800,
+  actionDisabledBackground: newGreys.grey200,
+  actionDisabledText: newGreys.grey400,
+  backgroundSecondary: newGreys.grey100,
+  border: newGreys.grey300,
+  borderDecorative: newGreys.grey200,
+  textPrimary: newGreys.grey800,
+  textSecondary: newGreys.grey600,
+  textPlaceholder: newGreys.grey400,
+  textValidationInfo: newGreys.grey600,
+  overlayOverlay: chroma(newGreys.grey100).alpha(0.72).hex(),
+  tagDefault: chroma(newGreys.grey600).alpha(0.08).hex(),
+  tagCharcoal: newGreys.grey600,
+  typographyCodeBg: chroma(newGreys.grey600).alpha(0.08).hex(),
+  tableRowHover: chroma(newGreys.grey600).alpha(0.04).hex(),
+  tooltipBackgroundTooltip: newGreys.grey800
+};
+const darkColorsUsingNewGreys = {
+  actionPrimaryTextDefault: newGreys.grey800,
+  actionPrimaryTextHover: newGreys.grey800,
+  actionPrimaryTextPress: newGreys.grey800,
+  backgroundPrimary: newGreys.grey800,
+  backgroundSecondary: newGreys.grey700,
+  textPlaceholder: chroma(newGreys.grey400).alpha(0.84).hex(),
+  overlayOverlay: chroma(newGreys.grey800).alpha(0.72).hex(),
+  tagCharcoal: chroma(newGreys.grey600).alpha(0.84).hex()
+};
 
 const darkColors = {
   ...darkColorList,
@@ -279,7 +464,18 @@ const lightColors = {
   ...colorPaletteSecondary
 };
 function getSemanticColors(isDarkMode) {
-  return isDarkMode ? darkColors : lightColors;
+  const enableNewGreys = safex('databricks.fe.designsystem.enableNewGreys', false);
+  const colorList = isDarkMode ? darkColors : lightColors;
+  if (enableNewGreys) {
+    return {
+      ...colorList,
+      ...newGreys,
+      ...secondaryColorsUsingNewGreys,
+      ...(isDarkMode ? darkColorsUsingNewGreys : lightColorsUsingNewGreys)
+    };
+  } else {
+    return colorList;
+  }
 }
 
 // TODO (FEINF-1674): Remove when removing USE_NEW_RADIO_STYLES
@@ -526,7 +722,9 @@ const DesignSystemProvider = _ref2 => {
     enableAnimation = false,
     zIndexBase = 1000,
     getPopupContainer,
-    flags = {}
+    flags = {},
+    // Disable virtualization of legacy AntD components when running tests so that all items are rendered
+    disableLegacyAntVirtualization = process.env.NODE_ENV === 'test' ? true : undefined
   } = _ref2;
   const {
     isDarkMode: contextDarkModeVal
@@ -569,7 +767,8 @@ const DesignSystemProvider = _ref2 => {
       children: jsx(AntDConfigProviderPropsContext.Provider, {
         value: {
           prefixCls: classNamePrefix,
-          getPopupContainer
+          getPopupContainer,
+          virtual: !disableLegacyAntVirtualization
         },
         children: jsx(DesignSystemContext.Provider, {
           value: value,
@@ -716,6 +915,7 @@ const Icon = props => {
   } : undefined, [Component]);
   return jsx(DesignSystemAntDConfigProvider, {
     children: jsx(AntDIcon, {
+      "aria-hidden": "true",
       css: getIconEmotionStyles(theme),
       component: MemoizedComponent,
       style: {
@@ -730,17 +930,17 @@ const Icon = props => {
 
 function SvgCheckIcon(props) {
   return jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
-    viewBox: "0 0 16 16",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
     ...props,
     children: jsx("path", {
+      fill: "currentColor",
       fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M15.06 3.56l-9.53 9.531L1 8.561 2.06 7.5l3.47 3.47L14 2.5l1.06 1.06z",
-      fill: "currentColor"
+      d: "m15.06 3.56-9.53 9.531L1 8.561 2.06 7.5l3.47 3.47L14 2.5l1.06 1.06Z",
+      clipRule: "evenodd"
     })
   });
 }
@@ -753,17 +953,17 @@ function CheckIcon(props) {
 
 function SvgChevronLeftIcon(props) {
   return jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
-    viewBox: "0 0 16 16",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
     ...props,
     children: jsx("path", {
+      fill: "currentColor",
       fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M7.083 8L10 10.947 8.958 12 5 8l3.958-4L10 5.053 7.083 8z",
-      fill: "currentColor"
+      d: "M7.083 8 10 10.947 8.958 12 5 8l3.958-4L10 5.053 7.083 8Z",
+      clipRule: "evenodd"
     })
   });
 }
@@ -776,17 +976,17 @@ function ChevronLeftIcon(props) {
 
 function SvgChevronRightIcon(props) {
   return jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
-    viewBox: "0 0 16 16",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
     ...props,
     children: jsx("path", {
+      fill: "currentColor",
       fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M8.917 8L6 5.053 7.042 4 11 8l-3.958 4L6 10.947 8.917 8z",
-      fill: "currentColor"
+      d: "M8.917 8 6 5.053 7.042 4 11 8l-3.958 4L6 10.947 8.917 8Z",
+      clipRule: "evenodd"
     })
   });
 }
@@ -799,17 +999,17 @@ function ChevronRightIcon(props) {
 
 function SvgCloseIcon(props) {
   return jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
-    viewBox: "0 0 16 16",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
     ...props,
     children: jsx("path", {
+      fill: "currentColor",
       fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M6.97 8.03L2 3.06 3.06 2l4.97 4.97L13 2l1.06 1.06-4.969 4.97 4.97 4.97L13 14.06 8.03 9.092l-4.97 4.97L2 13l4.97-4.97z",
-      fill: "currentColor"
+      d: "M6.97 8.03 2 3.06 3.06 2l4.97 4.97L13 2l1.06 1.06-4.969 4.97 4.97 4.97L13 14.06 8.03 9.092l-4.97 4.97L2 13l4.97-4.97Z",
+      clipRule: "evenodd"
     })
   });
 }
@@ -822,27 +1022,26 @@ function CloseIcon(props) {
 
 function SvgCursorIcon(props) {
   return jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
-    viewBox: "0 0 16 16",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
     ...props,
     children: [jsx("g", {
-      clipPath: "url(#CursorIcon_svg__clip0_14914_35410)",
+      clipPath: "url(#CursorIcon_svg__a)",
       children: jsx("path", {
+        fill: "currentColor",
         fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M1.22 1.22a.75.75 0 01.802-.169l13.5 5.25a.75.75 0 01-.043 1.413L9.597 9.597l-1.883 5.882a.75.75 0 01-1.413.043l-5.25-13.5a.75.75 0 01.169-.802zm1.847 1.847l3.864 9.937 1.355-4.233a.75.75 0 01.485-.485l4.233-1.355-9.937-3.864z",
-        fill: "currentColor"
+        d: "M1.22 1.22a.75.75 0 0 1 .802-.169l13.5 5.25a.75.75 0 0 1-.043 1.413L9.597 9.597l-1.883 5.882a.75.75 0 0 1-1.413.043l-5.25-13.5a.75.75 0 0 1 .169-.802Zm1.847 1.847 3.864 9.937 1.355-4.233a.75.75 0 0 1 .485-.485l4.233-1.355-9.937-3.864Z",
+        clipRule: "evenodd"
       })
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "CursorIcon_svg__clip0_14914_35410",
+        id: "CursorIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
-          transform: "matrix(-1 0 0 1 16 0)",
-          d: "M0 0h16v16H0z"
+          d: "M16 0H0v16h16z"
         })
       })
     })]
@@ -857,25 +1056,25 @@ function CursorIcon(props) {
 
 function SvgFaceFrownIcon(props) {
   return jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
-    viewBox: "0 0 16 16",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
     ...props,
     children: [jsxs("g", {
-      clipPath: "url(#FaceFrownIcon_svg__clip0_16320_32311)",
       fill: "currentColor",
+      clipPath: "url(#FaceFrownIcon_svg__a)",
       children: [jsx("path", {
-        d: "M6 5.25a.75.75 0 000 1.5h.007a.75.75 0 000-1.5H6zM9.25 6a.75.75 0 01.75-.75h.007a.75.75 0 010 1.5H10A.75.75 0 019.25 6zM10.07 11.12a.75.75 0 001.197-.903l-.001-.001v-.001l-.003-.003-.005-.006-.015-.02a2.95 2.95 0 00-.217-.246 4.717 4.717 0 00-.627-.546C9.86 9 9.04 8.584 8 8.584s-1.858.416-2.4.81a4.716 4.716 0 00-.795.733 2.87 2.87 0 00-.048.06l-.015.019-.005.006-.002.003-.031.044.03-.042a.75.75 0 101.22.875 3.219 3.219 0 01.529-.485c.375-.273.89-.523 1.517-.523.627 0 1.142.25 1.517.523a3.219 3.219 0 01.529.485l.021.025.002.003z"
+        d: "M6 5.25a.75.75 0 0 0 0 1.5h.007a.75.75 0 0 0 0-1.5H6ZM9.25 6a.75.75 0 0 1 .75-.75h.007a.75.75 0 0 1 0 1.5H10A.75.75 0 0 1 9.25 6ZM10.07 11.12a.75.75 0 0 0 1.197-.903l-.001-.001v-.001l-.003-.003-.005-.006-.015-.02a2.95 2.95 0 0 0-.217-.246 4.717 4.717 0 0 0-.627-.546C9.86 9 9.04 8.584 8 8.584s-1.858.416-2.4.81a4.716 4.716 0 0 0-.795.733 2.87 2.87 0 0 0-.048.06l-.015.019-.005.006-.002.003-.031.044.03-.042a.75.75 0 1 0 1.22.875 3.219 3.219 0 0 1 .529-.485c.375-.273.89-.523 1.517-.523.627 0 1.142.25 1.517.523a3.219 3.219 0 0 1 .529.485l.021.025.002.003Z"
       }), jsx("path", {
         fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M8 .583a7.417 7.417 0 100 14.834A7.417 7.417 0 008 .583zM2.083 8a5.917 5.917 0 1111.834 0A5.917 5.917 0 012.083 8z"
+        d: "M8 .583a7.417 7.417 0 1 0 0 14.834A7.417 7.417 0 0 0 8 .583ZM2.083 8a5.917 5.917 0 1 1 11.834 0A5.917 5.917 0 0 1 2.083 8Z",
+        clipRule: "evenodd"
       })]
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "FaceFrownIcon_svg__clip0_16320_32311",
+        id: "FaceFrownIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
           d: "M0 0h16v16H0z"
@@ -893,25 +1092,25 @@ function FaceFrownIcon(props) {
 
 function SvgFaceNeutralIcon(props) {
   return jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
-    viewBox: "0 0 16 16",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
     ...props,
     children: [jsxs("g", {
-      clipPath: "url(#FaceNeutralIcon_svg__clip0_16320_32309)",
+      fill: "currentColor",
       fillRule: "evenodd",
+      clipPath: "url(#FaceNeutralIcon_svg__a)",
       clipRule: "evenodd",
-      fill: "currentColor",
       children: [jsx("path", {
-        d: "M8 2.083a5.917 5.917 0 100 11.834A5.917 5.917 0 008 2.084zM.583 8a7.417 7.417 0 1114.834 0A7.417 7.417 0 01.583 8z"
+        d: "M8 2.083a5.917 5.917 0 1 0 0 11.834A5.917 5.917 0 0 0 8 2.084ZM.583 8a7.417 7.417 0 1 1 14.834 0A7.417 7.417 0 0 1 .583 8Z"
       }), jsx("path", {
-        d: "M4.583 10a.75.75 0 01.75-.75h5.334a.75.75 0 110 1.5H5.333a.75.75 0 01-.75-.75zM5.25 6A.75.75 0 016 5.25h.007a.75.75 0 010 1.5H6A.75.75 0 015.25 6zM9.25 6a.75.75 0 01.75-.75h.007a.75.75 0 110 1.5H10A.75.75 0 019.25 6z"
+        d: "M4.583 10a.75.75 0 0 1 .75-.75h5.334a.75.75 0 1 1 0 1.5H5.333a.75.75 0 0 1-.75-.75ZM5.25 6A.75.75 0 0 1 6 5.25h.007a.75.75 0 0 1 0 1.5H6A.75.75 0 0 1 5.25 6ZM9.25 6a.75.75 0 0 1 .75-.75h.007a.75.75 0 1 1 0 1.5H10A.75.75 0 0 1 9.25 6Z"
       })]
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "FaceNeutralIcon_svg__clip0_16320_32309",
+        id: "FaceNeutralIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
           d: "M0 0h16v16H0z"
@@ -929,29 +1128,29 @@ function FaceNeutralIcon(props) {
 
 function SvgFaceSmileIcon(props) {
   return jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
-    viewBox: "0 0 16 16",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
     ...props,
     children: [jsxs("g", {
-      clipPath: "url(#FaceSmileIcon_svg__clip0_16320_32307)",
       fill: "currentColor",
+      clipPath: "url(#FaceSmileIcon_svg__a)",
       children: [jsx("path", {
         fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M8 2.083a5.917 5.917 0 100 11.834A5.917 5.917 0 008 2.084zM.583 8a7.417 7.417 0 1114.834 0A7.417 7.417 0 01.583 8z"
+        d: "M8 2.083a5.917 5.917 0 1 0 0 11.834A5.917 5.917 0 0 0 8 2.084ZM.583 8a7.417 7.417 0 1 1 14.834 0A7.417 7.417 0 0 1 .583 8Z",
+        clipRule: "evenodd"
       }), jsx("path", {
-        d: "M4.883 8.733a.75.75 0 011.048.147l.002.003.021.026a3.216 3.216 0 00.529.485c.375.273.89.523 1.517.523.627 0 1.142-.25 1.517-.523a3.215 3.215 0 00.55-.511.75.75 0 011.2.9l.029-.042-.03.043-.001.002-.002.002-.005.007-.015.019a3.878 3.878 0 01-.217.247c-.144.15-.354.348-.627.546-.54.393-1.359.81-2.399.81s-1.858-.417-2.4-.81a4.716 4.716 0 01-.795-.734 2.643 2.643 0 01-.048-.059l-.015-.02-.005-.006-.002-.002v-.002h-.002a.75.75 0 01.15-1.05z"
+        d: "M4.883 8.733a.75.75 0 0 1 1.048.147l.002.003.021.026a3.216 3.216 0 0 0 .529.485c.375.273.89.523 1.517.523.627 0 1.142-.25 1.517-.523a3.215 3.215 0 0 0 .55-.511.75.75 0 0 1 1.2.9l.029-.042-.03.043-.001.002-.002.002-.005.007-.015.019a3.878 3.878 0 0 1-.217.247c-.144.15-.354.348-.627.546-.54.393-1.359.81-2.399.81s-1.858-.417-2.4-.81a4.716 4.716 0 0 1-.795-.734 2.643 2.643 0 0 1-.048-.059l-.015-.02-.005-.006-.002-.002v-.002h-.002a.75.75 0 0 1 .15-1.05Z"
       }), jsx("path", {
         fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M5.25 6A.75.75 0 016 5.25h.007a.75.75 0 010 1.5H6A.75.75 0 015.25 6zM9.25 6a.75.75 0 01.75-.75h.007a.75.75 0 110 1.5H10A.75.75 0 019.25 6z"
+        d: "M5.25 6A.75.75 0 0 1 6 5.25h.007a.75.75 0 0 1 0 1.5H6A.75.75 0 0 1 5.25 6ZM9.25 6a.75.75 0 0 1 .75-.75h.007a.75.75 0 1 1 0 1.5H10A.75.75 0 0 1 9.25 6Z",
+        clipRule: "evenodd"
       })]
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "FaceSmileIcon_svg__clip0_16320_32307",
+        id: "FaceSmileIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
           d: "M0 0h16v16H0z"
@@ -967,20 +1166,69 @@ function FaceSmileIcon(props) {
   });
 }
 
-function SvgNewWindowIcon(props) {
+function SvgInfoIcon(props) {
   return jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
+    fill: "none",
     viewBox: "0 0 16 16",
+    ...props,
+    children: [jsx("path", {
+      fill: "currentColor",
+      d: "M7.25 11V7h1.5v4h-1.5ZM8 4.5A.75.75 0 1 1 8 6a.75.75 0 0 1 0-1.5Z"
+    }), jsx("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Z",
+      clipRule: "evenodd"
+    })]
+  });
+}
+function InfoIcon(props) {
+  return jsx(Icon, {
+    ...props,
+    component: SvgInfoIcon
+  });
+}
+
+function SvgLoadingIcon(props) {
+  return jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
     fill: "none",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: jsx("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M23.212 12a.788.788 0 0 1-.789-.788 9.57 9.57 0 0 0-.757-3.751 9.662 9.662 0 0 0-5.129-5.129 9.587 9.587 0 0 0-3.749-.755.788.788 0 0 1 0-1.577c1.513 0 2.983.296 4.365.882a11.128 11.128 0 0 1 3.562 2.403 11.157 11.157 0 0 1 3.283 7.927.785.785 0 0 1-.786.788Z",
+      clipRule: "evenodd"
+    })
+  });
+}
+function LoadingIcon(props) {
+  return jsx(Icon, {
+    ...props,
+    component: SvgLoadingIcon
+  });
+}
+
+function SvgNewWindowIcon(props) {
+  return jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 16 16",
     ...props,
     children: [jsx("path", {
-      d: "M10 1h5v5h-1.5V3.56L8.53 8.53 7.47 7.47l4.97-4.97H10V1z",
-      fill: "currentColor"
+      fill: "currentColor",
+      d: "M10 1h5v5h-1.5V3.56L8.53 8.53 7.47 7.47l4.97-4.97H10V1Z"
     }), jsx("path", {
-      d: "M1 2.75A.75.75 0 011.75 2H8v1.5H2.5v10h10V8H14v6.25a.75.75 0 01-.75.75H1.75a.75.75 0 01-.75-.75V2.75z",
-      fill: "currentColor"
+      fill: "currentColor",
+      d: "M1 2.75A.75.75 0 0 1 1.75 2H8v1.5H2.5v10h10V8H14v6.25a.75.75 0 0 1-.75.75H1.75a.75.75 0 0 1-.75-.75V2.75Z"
     })]
   });
 }
@@ -991,85 +1239,132 @@ function NewWindowIcon(props) {
   });
 }
 
-const ColorVars = {
-  primary: 'textPrimary',
-  secondary: 'textSecondary',
-  info: 'textValidationInfo',
-  error: 'textValidationDanger',
-  success: 'textValidationSuccess',
-  warning: 'textValidationWarning'
-};
-
-/**
- * Recursively appends `!important` to all CSS properties in an Emotion `CSSObject`.
- * Used to ensure that we always override Ant styles, without worrying about selector precedence.
- */
-function importantify(obj) {
-  return _mapValues(obj, (value, key) => {
-    if (_isString(value) || _isNumber(value) || _isBoolean(value)) {
-      // Make sure we don't double-append important
-      if (_isString(value) && _endsWith(value, '!important')) {
-        return value;
-      }
-      if (_isNumber(value)) {
-        if (unitless[key]) {
-          return `${value}!important`;
-        }
-        return `${value}px!important`;
-      }
-      return `${value}!important`;
-    }
-    if (_isNil(value)) {
-      return value;
-    }
-    return importantify(value);
-  });
+let sequentialCounter = 0;
+function useStableUid() {
+  return useMemo(() => sequentialCounter++, []);
 }
 
+/** Props for UI components that support a "loading" state. */
+
 /**
- * Returns a text color, in case of invalid/missing key and missing fallback color it will return textPrimary
- * @param theme
- * @param key - key of TypographyColor
- * @param fallbackColor - color to return as fallback -- used to remove tertiary check inline
+ * A handler for integrating UI components with external latency instrumentation.
+ * If provided via `LoadingStateContext`, hooks will be called whenever child
+ * components in a "loading" state are mounted and unmounted.
  */
-function getTypographyColor(theme, key, fallbackColor) {
-  if (theme && key && Object(theme.colors).hasOwnProperty(ColorVars[key])) {
-    return theme.colors[ColorVars[key]];
-  }
-  return fallbackColor !== null && fallbackColor !== void 0 ? fallbackColor : theme.colors.textPrimary;
-}
 
+const LoadingStateContext = /*#__PURE__*/createContext(null);
 /**
- * Returns validation color based on state, has default validation colors if params are not provided
- * @param theme
- * @param validationState
- * @param errorColor
- * @param warningColor
- * @param successColor
+ * Indicates that the containing component is in a "loading" state, i.e. that the UI
+ * displayed to the user is semantically equivalent to them seeing a spinner or a
+ * loading indicator. This means that the UI is not in its final settled state yet.
+ *
+ * All components that are in a "loading" state should render a `<LoadingState>`
+ * component, preferrably with an appropriate description.
+ *
+ * By itself, `<LoadingState>` doesn't do anything, but if used within `LoadingStateContext`,
+ * it will call the provided `startLoading()`/`endLoading()` hooks when the component
+ * is mounted/unmounted, which can be used to integrate existing latency instrumentation.
  */
-function getValidationStateColor(theme, validationState) {
+const LoadingState = _ref => {
   let {
-    errorColor,
-    warningColor,
-    successColor
-  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  switch (validationState) {
-    case 'error':
-      return errorColor || theme.colors.actionDangerPrimaryBackgroundDefault;
-    case 'warning':
-      return warningColor || theme.colors.textValidationWarning;
-    case 'success':
-      return successColor || theme.colors.textValidationSuccess;
-    default:
-      return undefined;
+    description = 'Generic UI loading state'
+  } = _ref;
+  const uid = useStableUid();
+  const loadingStateContext = useContext(LoadingStateContext);
+  useLayoutEffect(() => {
+    // mount
+    if (loadingStateContext) {
+      loadingStateContext.startLoading(uid, description);
+    }
+    return () => {
+      // unmount
+      if (loadingStateContext) {
+        loadingStateContext.endLoading(uid);
+      }
+    };
+  }, [uid, description, loadingStateContext]);
+  return null;
+};
+
+const rotate = keyframes({
+  '0%': {
+    transform: 'rotate(0deg) translate3d(0, 0, 0)'
+  },
+  '100%': {
+    transform: 'rotate(360deg) translate3d(0, 0, 0)'
   }
-}
+});
+const cssSpinner = function (theme) {
+  let frameRate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 60;
+  let delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  let animationDuration = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+  let inheritColor = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  const styles = {
+    animation: `${rotate} ${animationDuration}s steps(${frameRate}, end) infinite`,
+    ...(inheritColor ? {
+      color: 'inherit'
+    } : {
+      color: theme.colors.textSecondary
+    }),
+    animationDelay: `${delay}s`,
+    '@media only percy': {
+      animation: 'none'
+    }
+  };
+  return /*#__PURE__*/css(importantify(styles), process.env.NODE_ENV === "production" ? "" : ";label:cssSpinner;");
+};
+const Spinner = _ref => {
+  let {
+    frameRate,
+    size = 'default',
+    delay,
+    className: propClass,
+    label,
+    animationDuration,
+    inheritColor,
+    loading = true,
+    loadingDescription = 'Spinner',
+    ...props
+  } = _ref;
+  const {
+    classNamePrefix,
+    theme
+  } = useDesignSystemTheme();
+
+  // We use Antd classes to keep styling unchanged
+  // TODO(FEINF-1407): We want to move away from Antd classes and use Emotion for styling in the future
+  const sizeSuffix = size === 'small' ? '-sm' : size === 'large' ? '-lg' : '';
+  const sizeClass = sizeSuffix ? `${classNamePrefix}-spin${sizeSuffix}` : '';
+  const wrapperClass = `${propClass || ''} ${classNamePrefix}-spin ${sizeClass} ${classNamePrefix}-spin-spinning ${DU_BOIS_ENABLE_ANIMATION_CLASSNAME}`.trim();
+  const className = `${classNamePrefix}-spin-dot ${DU_BOIS_ENABLE_ANIMATION_CLASSNAME}`.trim();
+  return (
+    // className has to follow {...props}, otherwise is `css` prop is passed down it will overwrite our className
+    jsxs("div", {
+      ...props,
+      className: wrapperClass,
+      children: [loading && jsx(LoadingState, {
+        description: loadingDescription
+      }), jsx(AccessibleContainer, {
+        label: label,
+        children: jsx(LoadingIcon, {
+          "aria-hidden": "false",
+          css: cssSpinner(theme, frameRate, delay, animationDuration, inheritColor),
+          className: className
+        })
+      })]
+    })
+  );
+};
 
 function getDefaultStyles(theme) {
-  return {
+  let loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  const defaultStyles = {
     backgroundColor: theme.colors.actionDefaultBackgroundDefault,
     borderColor: theme.colors.actionDefaultBorderDefault,
-    color: theme.colors.actionDefaultTextDefault,
+    color: theme.colors.actionDefaultTextDefault
+  };
+  return {
+    ...defaultStyles,
     lineHeight: theme.typography.lineHeightBase,
     textDecoration: 'none',
     '&:hover': {
@@ -1078,17 +1373,20 @@ function getDefaultStyles(theme) {
       color: theme.colors.actionDefaultTextHover
     },
     '&:active': {
-      backgroundColor: theme.colors.actionDefaultBackgroundPress,
+      backgroundColor: loading ? theme.colors.actionDefaultBackgroundDefault : theme.colors.actionDefaultBackgroundPress,
       borderColor: theme.colors.actionDefaultBorderPress,
       color: theme.colors.actionDefaultTextPress
     }
   };
 }
 function getPrimaryStyles(theme) {
-  return {
+  const defaultStyles = {
     backgroundColor: theme.colors.actionPrimaryBackgroundDefault,
     borderColor: 'transparent',
-    color: theme.colors.actionPrimaryTextDefault,
+    color: theme.colors.actionPrimaryTextDefault
+  };
+  return {
+    ...defaultStyles,
     textShadow: 'none',
     '&:hover': {
       backgroundColor: theme.colors.actionPrimaryBackgroundHover,
@@ -1103,10 +1401,13 @@ function getPrimaryStyles(theme) {
   };
 }
 function getLinkStyles$1(theme) {
-  return {
+  const defaultStyles = {
     backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
     borderColor: theme.colors.actionTertiaryBackgroundDefault,
-    color: theme.colors.actionTertiaryTextDefault,
+    color: theme.colors.actionTertiaryTextDefault
+  };
+  return {
+    ...defaultStyles,
     '&:hover': {
       backgroundColor: theme.colors.actionTertiaryBackgroundHover,
       borderColor: 'transparent',
@@ -1124,10 +1425,13 @@ function getLinkStyles$1(theme) {
   };
 }
 function getPrimaryDangerStyles(theme) {
-  return {
+  const defaultStyles = {
     backgroundColor: theme.colors.actionDangerPrimaryBackgroundDefault,
     borderColor: 'transparent',
-    color: theme.colors.white,
+    color: theme.colors.white
+  };
+  return {
+    ...defaultStyles,
     '&:hover': {
       backgroundColor: theme.colors.actionDangerPrimaryBackgroundHover,
       borderColor: 'transparent',
@@ -1144,10 +1448,13 @@ function getPrimaryDangerStyles(theme) {
   };
 }
 function getSecondaryDangerStyles(theme) {
-  return {
+  const defaultStyles = {
     backgroundColor: theme.colors.actionDangerDefaultBackgroundDefault,
     borderColor: theme.colors.actionDangerDefaultBorderDefault,
-    color: theme.colors.actionDangerDefaultTextDefault,
+    color: theme.colors.actionDangerDefaultTextDefault
+  };
+  return {
+    ...defaultStyles,
     '&:hover': {
       backgroundColor: theme.colors.actionDangerDefaultBackgroundHover,
       borderColor: theme.colors.actionDangerDefaultBorderHover,
@@ -1164,10 +1471,13 @@ function getSecondaryDangerStyles(theme) {
   };
 }
 function getDisabledStyles(theme) {
-  return {
+  const defaultStyles = {
     backgroundColor: theme.colors.actionDisabledBackground,
     borderColor: 'transparent',
-    color: theme.colors.actionDisabledText,
+    color: theme.colors.actionDisabledText
+  };
+  return {
+    ...defaultStyles,
     '&:hover': {
       backgroundColor: theme.colors.actionDisabledBackground,
       borderColor: 'transparent',
@@ -1181,10 +1491,13 @@ function getDisabledStyles(theme) {
   };
 }
 function getDisabledTertiaryStyles(theme) {
-  return {
+  const defaultStyles = {
     backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
     borderColor: 'transparent',
-    color: theme.colors.actionDisabledText,
+    color: theme.colors.actionDisabledText
+  };
+  return {
+    ...defaultStyles,
     '&:hover': {
       backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
       borderColor: 'transparent',
@@ -1266,7 +1579,7 @@ const getButtonEmotionStyles = _ref => {
     })
   };
   const inactiveIconCss = {
-    color: theme.colors.grey600
+    color: theme.colors.textSecondary
   };
   const endIconCssSelector = `span > ${clsEndIcon} > ${clsIcon}`;
   const styles = {
@@ -1306,7 +1619,7 @@ const getButtonEmotionStyles = _ref => {
       outlineOffset: '1px',
       outlineColor: theme.isDarkMode ? theme.colors.actionDefaultBorderFocus : theme.colors.primary
     },
-    ...getDefaultStyles(theme),
+    ...getDefaultStyles(theme, loading),
     [`&${classPrimary}`]: {
       ...getPrimaryStyles(theme)
     },
@@ -1340,11 +1653,15 @@ const getButtonEmotionStyles = _ref => {
         }
       })
     },
+    [clsLoadingIcon]: {
+      display: 'none'
+    },
     // Loading styles
     ...(loading && {
       '::before': {
         opacity: 0
       },
+      cursor: 'default',
       [`${clsLoadingIcon}`]: {
         ...(onlyIcon ? {
           // In case of only icon, the icon is already centered but vertically not aligned, this fixes that
@@ -1373,7 +1690,7 @@ const getButtonEmotionStyles = _ref => {
         visibility: 'hidden',
         // Add horizontal space for icon
         ...(withIcon && {
-          paddingLeft: theme.spacing.sm * 2 + 14
+          paddingLeft: theme.general.iconFontSize + theme.spacing.xs
         })
       }
     }),
@@ -1407,7 +1724,12 @@ const getButtonEmotionStyles = _ref => {
         },
         '&:active > .anticon': {
           color: tertiaryColors['&:active'].color
-        }
+        },
+        ...(loading && {
+          '&&, &:hover, &:active': {
+            backgroundColor: 'transparent'
+          }
+        })
       },
       [`&:enabled:not(${classLink}) > .anticon`]: {
         color: theme.colors.textSecondary
@@ -1419,6 +1741,11 @@ const getButtonEmotionStyles = _ref => {
           color: theme.colors.actionDisabledText
         }
       }),
+      ...(loading && {
+        '&&, &:hover, &:active': {
+          backgroundColor: 'transparent'
+        }
+      }),
       '&[disabled]:hover': {
         backgroundColor: 'transparent'
       }
@@ -1441,6 +1768,16 @@ const getButtonEmotionStyles = _ref => {
       padding: '0 6px',
       lineHeight: theme.typography.lineHeightSm,
       color: theme.colors.textSecondary,
+      ...(loading && {
+        '&&, &:hover, &:active': {
+          backgroundColor: 'transparent',
+          borderColor: theme.colors.actionDefaultBorderDefault
+        },
+        '&[disabled], &[disabled]:hover, &[disabled]:active': {
+          backgroundColor: 'transparent',
+          borderColor: 'transparent'
+        }
+      }),
       '& > span': {
         verticalAlign: -1,
         height: theme.general.heightSm / 2,
@@ -1477,9 +1814,13 @@ const Button = /* #__PURE__ */(() => {
       children,
       size,
       type,
+      loading,
+      loadingDescription = 'Button',
       endIcon,
+      onClick,
       dangerouslySetForceIconStyles,
       dangerouslyUseFocusPseudoClass,
+      dangerouslyAppendWrapperCss,
       ...props
     } = _ref2;
     const {
@@ -1490,15 +1831,58 @@ const Button = /* #__PURE__ */(() => {
       USE_FLEX_BUTTON: isFlex
     } = useDesignSystemFlags();
     const clsEndIcon = getEndIconClsName(theme);
+    const loadingCls = `${classNamePrefix}-btn-loading-icon`;
+    const buttonRef = useRef(null);
+    useImperativeHandle(ref, () => buttonRef.current);
+
+    // Needed to keep backwards compatibility and support existing unit tests
+    useEffect(() => {
+      if (buttonRef.current) {
+        if (loading) {
+          buttonRef.current.setAttribute('loading', 'true');
+          buttonRef.current.classList.add(`${classNamePrefix}-btn-loading`);
+        } else {
+          buttonRef.current.setAttribute('loading', 'false');
+          buttonRef.current.classList.remove(`${classNamePrefix}-btn-loading`);
+        }
+      }
+    }, [loading, classNamePrefix]);
+    const iconOnly = Boolean((props.icon || endIcon) && !children);
+    const handleClick = event => {
+      if (loading) {
+        return;
+      }
+      onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    };
+    const loadingSpinner = jsx(Spinner, {
+      className: loadingCls,
+      animationDuration: 8,
+      inheritColor: true,
+      label: "loading",
+      "aria-label": "loading",
+      loadingDescription: loadingDescription,
+      css: /*#__PURE__*/css({
+        color: 'inherit !important',
+        pointerEvents: 'none',
+        ...(!iconOnly && !dangerouslySetForceIconStyles && {
+          '.anticon': {
+            verticalAlign: '-0.2em'
+          }
+        }),
+        '[aria-hidden="true"]': {
+          display: 'inline'
+        }
+      }, process.env.NODE_ENV === "production" ? "" : ";label:loadingSpinner;")
+    });
     return jsx(DesignSystemAntDConfigProvider, {
       children: jsx(Button$1, {
         ...props,
         css: getButtonEmotionStyles({
           theme,
           classNamePrefix,
-          loading: Boolean(props.loading),
+          loading: Boolean(loading),
           withIcon: Boolean(props.icon),
-          onlyIcon: Boolean((props.icon || endIcon) && !children),
+          onlyIcon: iconOnly,
           isAnchor: Boolean(props.href && !type),
           danger: Boolean(props.danger),
           enableAnimation: theme.options.enableAnimation,
@@ -1510,15 +1894,18 @@ const Button = /* #__PURE__ */(() => {
         }),
         href: props.disabled ? undefined : props.href,
         ...dangerouslySetAntdProps,
-        ref: ref,
+        onClick: handleClick,
+        icon: loading ? loadingSpinner : props.icon,
+        ref: buttonRef,
         type: type === 'tertiary' ? 'link' : type,
         children: children && jsxs("span", {
           style: {
-            visibility: props !== null && props !== void 0 && props.loading ? 'hidden' : 'visible',
+            visibility: loading ? 'hidden' : 'visible',
             ...(isFlex && {
               display: 'inline-flex',
               alignItems: 'center'
-            })
+            }),
+            ...dangerouslyAppendWrapperCss
           },
           children: [children, endIcon && jsx("span", {
             className: clsEndIcon,
@@ -1543,6 +1930,87 @@ const Button = /* #__PURE__ */(() => {
   return Button;
 })();
 
+function useUniqueId(prefix) {
+  return useMemo(() => _uniqueId(prefix), [prefix]);
+}
+
+const Tooltip = _ref => {
+  let {
+    children,
+    title,
+    placement = 'top',
+    dataTestId,
+    dangerouslySetAntdProps,
+    silenceScreenReader = false,
+    useAsLabel = false,
+    ...props
+  } = _ref;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const id = useUniqueId('dubois-tooltip-component-');
+  if (!title) {
+    return jsx(React__default.Fragment, {
+      children: children
+    });
+  }
+  const titleProps = silenceScreenReader ? {} : {
+    'aria-live': 'polite',
+    'aria-relevant': 'additions'
+  };
+  if (dataTestId) {
+    // TODO FEINF-1337 - this should turn into data-testid
+    titleProps['data-test-id'] = dataTestId;
+  }
+  const liveTitle = title && /*#__PURE__*/React__default.isValidElement(title) ? /*#__PURE__*/React__default.cloneElement(title, titleProps) : jsx("span", {
+    ...titleProps,
+    children: title
+  });
+  const ariaProps = {
+    [useAsLabel ? 'aria-labelledby' : 'aria-describedby']: id,
+    'aria-hidden': false
+  };
+  const childWithProps = /*#__PURE__*/React__default.isValidElement(children) ? /*#__PURE__*/React__default.cloneElement(children, {
+    ...ariaProps,
+    ...children.props
+  }) : _isNil(children) ? children : jsx("span", {
+    ...ariaProps,
+    children: children
+  });
+  const {
+    overlayInnerStyle,
+    overlayStyle,
+    ...delegatedDangerouslySetAntdProps
+  } = dangerouslySetAntdProps || {};
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(Tooltip$1, {
+      id: id,
+      title: liveTitle,
+      placement: placement
+      // Always trigger on hover and focus
+      ,
+      trigger: ['hover', 'focus'],
+      overlayInnerStyle: {
+        backgroundColor: '#2F3941',
+        lineHeight: '22px',
+        padding: '4px 8px',
+        boxShadow: theme.general.shadowLow,
+        ...overlayInnerStyle
+      },
+      overlayStyle: {
+        zIndex: theme.options.zIndexBase + 70,
+        ...overlayStyle
+      },
+      css: /*#__PURE__*/css({
+        ...getAnimationCss(theme.options.enableAnimation)
+      }, process.env.NODE_ENV === "production" ? "" : ";label:Tooltip;"),
+      ...delegatedDangerouslySetAntdProps,
+      ...props,
+      children: childWithProps
+    })
+  });
+};
+
 const getInputEmotionStyles = (clsPrefix, theme, _ref, useTransparent) => {
   let {
     validationState
@@ -1575,6 +2043,9 @@ const getInputEmotionStyles = (clsPrefix, theme, _ref, useTransparent) => {
       '&:disabled': {
         backgroundColor: theme.colors.actionDisabledBackground,
         color: theme.colors.actionDisabledText
+      },
+      '&::placeholder': {
+        color: theme.colors.textPlaceholder
       }
     },
     [`&${inputClass}, ${inputClass}`]: {
@@ -1744,7 +2215,7 @@ const DuboisInput = /*#__PURE__*/forwardRef(function Input(_ref4, ref) {
     })
   });
 });
-const Group = _ref5 => {
+const Group$1 = _ref5 => {
   let {
     dangerouslySetAntdProps,
     dangerouslyAppendEmotionCSS,
@@ -1769,7 +2240,7 @@ const Group = _ref5 => {
 const InputNamespace = /* #__PURE__ */Object.assign(DuboisInput, {
   TextArea,
   Password,
-  Group
+  Group: Group$1
 });
 const Input = InputNamespace;
 
@@ -1778,9 +2249,49 @@ const Input = InputNamespace;
 // since these will be exposed in the library's exports.
 const __INTERNAL_DO_NOT_USE__TextArea = TextArea;
 const __INTERNAL_DO_NOT_USE__Password = Password;
-const __INTERNAL_DO_NOT_USE_DEDUPE__Group = Group;
+const __INTERNAL_DO_NOT_USE_DEDUPE__Group = Group$1;
+
+const {
+  Text: AntDText$1
+} = Typography$1;
+function getTextEmotionStyles$1(theme, props) {
+  return /*#__PURE__*/css({
+    '&&': {
+      display: 'block',
+      fontSize: theme.typography.fontSizeSm,
+      lineHeight: theme.typography.lineHeightSm,
+      color: theme.colors.textSecondary,
+      ...(props.withoutMargins && {
+        '&&': {
+          marginTop: 0,
+          marginBottom: 0
+        }
+      })
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getTextEmotionStyles;");
+}
+function Hint(userProps) {
+  const {
+    dangerouslySetAntdProps,
+    bold,
+    withoutMargins,
+    color,
+    ...props
+  } = userProps;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(AntDText$1, {
+      ...props,
+      css: getTextEmotionStyles$1(theme, userProps),
+      ...dangerouslySetAntdProps
+    })
+  });
+}
 
 const getLinkStyles = (theme, clsPrefix) => {
+  const centerIcons = safex('databricks.fe.designsystem.centerIconsInText', false);
   const classTypography = `.${clsPrefix}-typography`;
   const styles = {
     [`&${classTypography}, &${classTypography}:focus`]: {
@@ -1798,7 +2309,10 @@ const getLinkStyles = (theme, clsPrefix) => {
       textDecoration: 'underline'
     },
     '.anticon': {
-      fontSize: 12
+      fontSize: 12,
+      ...(centerIcons ? {
+        verticalAlign: 'baseline'
+      } : {})
     }
   };
   return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getLinkStyles;");
@@ -1876,12 +2390,18 @@ const {
   Paragraph: AntDParagraph
 } = Typography$1;
 function getParagraphEmotionStyles(theme, props) {
+  const centerIcons = safex('databricks.fe.designsystem.centerIconsInText', false);
   return /*#__PURE__*/css({
     '&&': {
       fontSize: theme.typography.fontSizeBase,
       lineHeight: theme.typography.lineHeightBase,
       color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
-    }
+    },
+    ...(centerIcons && {
+      '& .anticon': {
+        verticalAlign: 'text-bottom'
+      }
+    })
   }, props.disabled && {
     '&&': {
       color: theme.colors.actionDisabledText
@@ -1917,6 +2437,7 @@ const {
   Text: AntDText
 } = Typography$1;
 function getTextEmotionStyles(theme, props) {
+  const centerIcons = safex('databricks.fe.designsystem.centerIconsInText', false);
   return /*#__PURE__*/css({
     '&&': {
       fontSize: theme.typography.fontSizeBase,
@@ -1955,28 +2476,48 @@ function getTextEmotionStyles(theme, props) {
         case 'xxl':
           return {
             fontSize: theme.typography.fontSizeXxl,
-            lineHeight: theme.typography.lineHeightXxl
+            lineHeight: theme.typography.lineHeightXxl,
+            ...(centerIcons && {
+              '& .anticon': {
+                lineHeight: theme.typography.lineHeightXxl,
+                verticalAlign: 'middle'
+              }
+            })
           };
         case 'xl':
           return {
             fontSize: theme.typography.fontSizeXl,
-            lineHeight: theme.typography.lineHeightXl
+            lineHeight: theme.typography.lineHeightXl,
+            ...(centerIcons && {
+              '& .anticon': {
+                lineHeight: theme.typography.lineHeightXl,
+                verticalAlign: 'middle'
+              }
+            })
           };
         case 'lg':
           return {
             fontSize: theme.typography.fontSizeLg,
-            lineHeight: theme.typography.lineHeightLg
+            lineHeight: theme.typography.lineHeightLg,
+            ...(centerIcons && {
+              '& .anticon': {
+                lineHeight: theme.typography.lineHeightLg,
+                verticalAlign: 'middle'
+              }
+            })
           };
         case 'sm':
           return {
             fontSize: theme.typography.fontSizeSm,
-            lineHeight: theme.typography.lineHeightSm
+            lineHeight: theme.typography.lineHeightSm,
+            ...(centerIcons && {
+              '& .anticon': {
+                verticalAlign: '-0.219em'
+              }
+            })
           };
         default:
-          return {
-            fontSize: theme.typography.fontSizeMd,
-            lineHeight: theme.typography.lineHeightMd
-          };
+          return {};
       }
     })()
   }, props.withoutMargins && {
@@ -2013,6 +2554,7 @@ const {
   Title: AntDTitle
 } = Typography$1;
 function getLevelStyles(theme, props) {
+  const centerIcons = safex('databricks.fe.designsystem.centerIconsInText', false);
   switch (props.level) {
     case 1:
       return /*#__PURE__*/css({
@@ -2020,7 +2562,12 @@ function getLevelStyles(theme, props) {
           fontSize: theme.typography.fontSizeXxl,
           lineHeight: theme.typography.lineHeightXxl,
           fontWeight: theme.typography.typographyBoldFontWeight
-        }
+        },
+        ...(centerIcons && {
+          '& > .anticon': {
+            lineHeight: theme.typography.lineHeightXxl
+          }
+        })
       }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
     case 2:
       return /*#__PURE__*/css({
@@ -2028,7 +2575,12 @@ function getLevelStyles(theme, props) {
           fontSize: theme.typography.fontSizeXl,
           lineHeight: theme.typography.lineHeightXl,
           fontWeight: theme.typography.typographyBoldFontWeight
-        }
+        },
+        ...(centerIcons && {
+          '& > .anticon': {
+            lineHeight: theme.typography.lineHeightXl
+          }
+        })
       }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
     case 3:
       return /*#__PURE__*/css({
@@ -2036,7 +2588,12 @@ function getLevelStyles(theme, props) {
           fontSize: theme.typography.fontSizeLg,
           lineHeight: theme.typography.lineHeightLg,
           fontWeight: theme.typography.typographyBoldFontWeight
-        }
+        },
+        ...(centerIcons && {
+          '& > .anticon': {
+            lineHeight: theme.typography.lineHeightLg
+          }
+        })
       }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
     case 4:
     default:
@@ -2045,15 +2602,26 @@ function getLevelStyles(theme, props) {
           fontSize: theme.typography.fontSizeMd,
           lineHeight: theme.typography.lineHeightMd,
           fontWeight: theme.typography.typographyBoldFontWeight
-        }
+        },
+        ...(centerIcons && {
+          '& > .anticon': {
+            lineHeight: theme.typography.lineHeightMd
+          }
+        })
       }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
   }
 }
 function getTitleEmotionStyles(theme, props) {
+  const centerIcons = safex('databricks.fe.designsystem.centerIconsInText', false);
   return /*#__PURE__*/css(getLevelStyles(theme, props), {
     '&&': {
       color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
-    }
+    },
+    ...(centerIcons && {
+      '& > .anticon': {
+        verticalAlign: 'middle'
+      }
+    })
   }, props.withoutMargins && {
     '&&': {
       marginTop: '0 !important',
@@ -2099,8 +2667,465 @@ const Typography = /* #__PURE__ */(() => {
   Typography.Title = Title;
   Typography.Paragraph = Paragraph;
   Typography.Link = Link;
+  Typography.Hint = Hint;
   return Typography;
 })();
 
-export { ApplyDesignSystemContextOverrides as A, Button as B, CloseIcon as C, DesignSystemAntDConfigProvider as D, __INTERNAL_DO_NOT_USE__Password as E, FaceFrownIcon as F, __INTERNAL_DO_NOT_USE_DEDUPE__Group as G, Icon as I, NewWindowIcon as N, RestoreAntDDefaultClsPrefix as R, Typography as T, WithDesignSystemThemeHoc as W, __INTERNAL_DO_NOT_USE__TextArea as _, ChevronRightIcon as a, useDesignSystemFlags as b, DU_BOIS_ENABLE_ANIMATION_CLASSNAME as c, useDesignSystemContext as d, CheckIcon as e, Input as f, getAnimationCss as g, getValidationStateColor as h, importantify as i, Title as j, ChevronLeftIcon as k, getDefaultStyles as l, getPrimaryStyles as m, getDisabledStyles as n, lightColorList as o, getButtonEmotionStyles as p, DesignSystemThemeContext as q, DesignSystemContext as r, DesignSystemThemeProvider as s, DesignSystemProvider as t, useDesignSystemTheme as u, ApplyDesignSystemFlags as v, useAntDConfigProviderContext as w, CursorIcon as x, FaceNeutralIcon as y, FaceSmileIcon as z };
-//# sourceMappingURL=Typography-91d3d591.js.map
+const Root = DropdownMenu$1.Root; // Behavioral component only
+
+const Content = /*#__PURE__*/forwardRef(function Content(_ref, ref) {
+  let {
+    children,
+    minWidth = 220,
+    ...props
+  } = _ref;
+  const {
+    getPopupContainer
+  } = useDesignSystemContext();
+  return jsx(DropdownMenu$1.Portal, {
+    container: getPopupContainer && getPopupContainer(),
+    children: jsx(DropdownMenu$1.Content, {
+      ref: ref,
+      loop: true,
+      css: [contentStyles, {
+        minWidth
+      }, process.env.NODE_ENV === "production" ? "" : ";label:Content;"],
+      sideOffset: 4,
+      align: "start",
+      ...props,
+      children: children
+    })
+  });
+});
+const SubContent = /*#__PURE__*/forwardRef(function Content(_ref2, ref) {
+  let {
+    children,
+    minWidth = 220,
+    ...props
+  } = _ref2;
+  const {
+    getPopupContainer
+  } = useDesignSystemContext();
+  return jsx(DropdownMenu$1.Portal, {
+    container: getPopupContainer && getPopupContainer(),
+    children: jsx(DropdownMenu$1.SubContent, {
+      ref: ref,
+      loop: true,
+      css: [contentStyles, {
+        minWidth
+      }, process.env.NODE_ENV === "production" ? "" : ";label:SubContent;"],
+      sideOffset: -2,
+      alignOffset: -5,
+      ...props,
+      children: children
+    })
+  });
+});
+const Trigger = /*#__PURE__*/forwardRef(function Trigger(_ref3, ref) {
+  let {
+    children,
+    ...props
+  } = _ref3;
+  return jsx(DropdownMenu$1.Trigger, {
+    ref: ref,
+    ...props,
+    children: children
+  });
+});
+const Item = /*#__PURE__*/forwardRef(function Item(_ref4, ref) {
+  let {
+    children,
+    disabledReason,
+    danger,
+    onClick,
+    ...props
+  } = _ref4;
+  const itemRef = useRef(null);
+  useImperativeHandle(ref, () => itemRef.current);
+  return jsx(DropdownMenu$1.Item, {
+    css: theme => [dropdownItemStyles, danger && dangerItemStyles(theme)],
+    ref: itemRef,
+    onClick: e => {
+      if (props.disabled) {
+        e.preventDefault();
+      } else {
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+      }
+    },
+    ...props,
+    children: getNewChildren(children, props, disabledReason, itemRef)
+  });
+});
+const Label = /*#__PURE__*/forwardRef(function Label(_ref5, ref) {
+  let {
+    children,
+    ...props
+  } = _ref5;
+  return jsx(DropdownMenu$1.Label, {
+    ref: ref,
+    css: [dropdownItemStyles, theme => ({
+      color: theme.colors.textSecondary,
+      '&:hover': {
+        cursor: 'default'
+      }
+    }), process.env.NODE_ENV === "production" ? "" : ";label:Label;"],
+    ...props,
+    children: children
+  });
+});
+const Separator = /*#__PURE__*/forwardRef(function Separator(_ref6, ref) {
+  let {
+    children,
+    ...props
+  } = _ref6;
+  return jsx(DropdownMenu$1.Separator, {
+    ref: ref,
+    css: dropdownSeparatorStyles,
+    ...props,
+    children: children
+  });
+});
+const SubTrigger = /*#__PURE__*/forwardRef(function TriggerItem(_ref7, ref) {
+  let {
+    children,
+    disabledReason,
+    ...props
+  } = _ref7;
+  const subTriggerRef = useRef(null);
+  useImperativeHandle(ref, () => subTriggerRef.current);
+  return jsxs(DropdownMenu$1.SubTrigger, {
+    ref: subTriggerRef,
+    css: [dropdownItemStyles, theme => ({
+      '&[data-state="open"]': {
+        backgroundColor: theme.colors.actionTertiaryBackgroundHover
+      }
+    }), process.env.NODE_ENV === "production" ? "" : ";label:SubTrigger;"],
+    ...props,
+    children: [getNewChildren(children, props, disabledReason, subTriggerRef), jsx(HintColumn, {
+      css: theme => ({
+        margin: CONSTANTS.subMenuIconMargin(theme),
+        display: 'flex',
+        alignSelf: 'stretch',
+        alignItems: 'center'
+      }),
+      children: jsx(ChevronRightIcon, {
+        css: theme => ({
+          fontSize: CONSTANTS.subMenuIconSize(theme)
+        })
+      })
+    })]
+  });
+});
+
+/**
+ * Deprecated. Use `SubTrigger` instead.
+ * @deprecated
+ */
+const TriggerItem = SubTrigger;
+const CheckboxItem = /*#__PURE__*/forwardRef(function CheckboxItem(_ref8, ref) {
+  let {
+    children,
+    disabledReason,
+    ...props
+  } = _ref8;
+  const checkboxItemRef = useRef(null);
+  useImperativeHandle(ref, () => checkboxItemRef.current);
+  return jsx(DropdownMenu$1.CheckboxItem, {
+    ref: checkboxItemRef,
+    css: theme => [dropdownItemStyles, checkboxItemStyles(theme)],
+    ...props,
+    children: getNewChildren(children, props, disabledReason, checkboxItemRef)
+  });
+});
+const ItemIndicator = /*#__PURE__*/forwardRef(function ItemIndicator(_ref9, ref) {
+  let {
+    children,
+    ...props
+  } = _ref9;
+  return jsx(DropdownMenu$1.ItemIndicator, {
+    ref: ref,
+    css: theme => ({
+      marginLeft: -(CONSTANTS.checkboxIconWidth(theme) + CONSTANTS.checkboxPaddingRight(theme)),
+      position: 'absolute',
+      fontSize: theme.general.iconFontSize
+    }),
+    ...props,
+    children: children !== null && children !== void 0 ? children : jsx(CheckIcon, {
+      css: theme => ({
+        color: theme.colors.textSecondary
+      })
+    })
+  });
+});
+const Arrow = /*#__PURE__*/forwardRef(function Arrow(_ref10, ref) {
+  let {
+    children,
+    ...props
+  } = _ref10;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(DropdownMenu$1.Arrow, {
+    css: /*#__PURE__*/css({
+      fill: theme.colors.backgroundPrimary,
+      stroke: theme.colors.borderDecorative,
+      strokeDashoffset: -CONSTANTS.arrowBottomLength(),
+      strokeDasharray: CONSTANTS.arrowBottomLength() + 2 * CONSTANTS.arrowSide(),
+      strokeWidth: CONSTANTS.arrowStrokeWidth(),
+      // TODO: This is a temporary fix for the alignment of the Arrow;
+      // Radix has changed the implementation for v1.0.0 (uses floating-ui)
+      // which has new behaviors for alignment that we don't want. Generally
+      // we need to fix the arrow to always be aligned to the left of the menu (with
+      // offset equal to border radius)
+      position: 'relative',
+      top: -1
+    }, process.env.NODE_ENV === "production" ? "" : ";label:Arrow;"),
+    ref: ref,
+    width: 12,
+    height: 6,
+    ...props,
+    children: children
+  });
+});
+const RadioItem = /*#__PURE__*/forwardRef(function RadioItem(_ref11, ref) {
+  let {
+    children,
+    disabledReason,
+    ...props
+  } = _ref11;
+  const radioItemRef = useRef(null);
+  useImperativeHandle(ref, () => radioItemRef.current);
+  return jsx(DropdownMenu$1.RadioItem, {
+    ref: radioItemRef,
+    css: theme => [dropdownItemStyles, checkboxItemStyles(theme)],
+    ...props,
+    children: getNewChildren(children, props, disabledReason, radioItemRef)
+  });
+});
+
+// UNWRAPPED RADIX-UI-COMPONENTS
+const Group = DropdownMenu$1.Group;
+const RadioGroup = DropdownMenu$1.RadioGroup;
+const Sub = DropdownMenu$1.Sub;
+
+// EXTRA COMPONENTS
+const HintColumn = /*#__PURE__*/forwardRef(function HintColumn(_ref12, ref) {
+  let {
+    children,
+    ...props
+  } = _ref12;
+  return jsx("div", {
+    ref: ref,
+    css: [metaTextStyles, "margin-left:auto;" + (process.env.NODE_ENV === "production" ? "" : ";label:HintColumn;")],
+    ...props,
+    children: children
+  });
+});
+const HintRow = /*#__PURE__*/forwardRef(function HintRow(_ref13, ref) {
+  let {
+    children,
+    ...props
+  } = _ref13;
+  return jsx("div", {
+    ref: ref,
+    css: [metaTextStyles, "min-width:100%;" + (process.env.NODE_ENV === "production" ? "" : ";label:HintRow;")],
+    ...props,
+    children: children
+  });
+});
+const IconWrapper = /*#__PURE__*/forwardRef(function IconWrapper(_ref14, ref) {
+  let {
+    children,
+    ...props
+  } = _ref14;
+  return jsx("div", {
+    ref: ref,
+    css: theme => ({
+      fontSize: 16,
+      color: theme.colors.textSecondary,
+      paddingRight: theme.spacing.sm
+    }),
+    ...props,
+    children: children
+  });
+});
+const getNewChildren = (children, props, disabledReason, ref) => {
+  const childCount = Children.count(children);
+  const tooltip = jsx(Tooltip, {
+    title: disabledReason,
+    placement: "right",
+    dangerouslySetAntdProps: {
+      getPopupContainer: () => ref.current || document.body
+    },
+    children: jsx("span", {
+      css: theme => infoIconStyles(theme),
+      children: jsx(InfoIcon, {
+        "aria-hidden": "false"
+      })
+    })
+  });
+  if (childCount === 1) {
+    return getChild(children, Boolean(props['disabled']), disabledReason, tooltip, 0, childCount);
+  }
+  return Children.map(children, (child, idx) => {
+    return getChild(child, Boolean(props['disabled']), disabledReason, tooltip, idx, childCount);
+  });
+};
+const getChild = (child, isDisabled, disabledReason, tooltip, index, siblingCount) => {
+  const HintColumnType = jsx(HintColumn, {}).type;
+  const isHintColumnType = Boolean(child && typeof child !== 'string' && typeof child !== 'number' && typeof child !== 'boolean' && 'type' in child && (child === null || child === void 0 ? void 0 : child.type) === HintColumnType);
+  if (isDisabled && disabledReason && child && isHintColumnType) {
+    return jsxs(Fragment, {
+      children: [tooltip, child]
+    });
+  } else if (index === siblingCount - 1 && isDisabled && disabledReason) {
+    return jsxs(Fragment, {
+      children: [child, tooltip]
+    });
+  }
+  return child;
+};
+
+// CONSTANTS
+const CONSTANTS = {
+  itemPaddingVertical(theme) {
+    // The number from the mocks is the midpoint between constants
+    return 0.5 * theme.spacing.xs + 0.5 * theme.spacing.sm;
+  },
+  itemPaddingHorizontal(theme) {
+    return theme.spacing.sm;
+  },
+  checkboxIconWidth(theme) {
+    return theme.general.iconFontSize;
+  },
+  checkboxPaddingLeft(theme) {
+    return theme.spacing.sm + theme.spacing.xs;
+  },
+  checkboxPaddingRight(theme) {
+    return theme.spacing.sm;
+  },
+  subMenuIconMargin(theme) {
+    // Negative margin so the icons can be larger without increasing the overall item height
+    const iconMarginVertical = this.itemPaddingVertical(theme) / 2;
+    const iconMarginRight = -this.itemPaddingVertical(theme) + theme.spacing.sm * 1.5;
+    return `${-iconMarginVertical}px ${-iconMarginRight}px ${-iconMarginVertical}px auto`;
+  },
+  subMenuIconSize(theme) {
+    return theme.spacing.lg;
+  },
+  arrowBottomLength() {
+    // The built in arrow is a polygon: 0,0 30,0 15,10
+    return 30;
+  },
+  arrowHeight() {
+    return 10;
+  },
+  arrowSide() {
+    return 2 * (this.arrowHeight() ** 2 * 2) ** 0.5;
+  },
+  arrowStrokeWidth() {
+    // This is eyeballed b/c relative to the svg viewbox coordinate system
+    return 2;
+  }
+};
+const dropdownContentStyles = theme => ({
+  backgroundColor: theme.colors.backgroundPrimary,
+  color: theme.colors.textPrimary,
+  lineHeight: theme.typography.lineHeightBase,
+  border: `1px solid ${theme.colors.borderDecorative}`,
+  borderRadius: theme.borders.borderRadiusMd,
+  padding: `${theme.spacing.xs}px 0`,
+  boxShadow: theme.general.shadowLow,
+  userSelect: 'none',
+  // Ant Design uses 1000s for their zIndex space; this ensures Radix works with that, but
+  // we'll likely need to be sure that all Radix components are using the same zIndex going forward.
+  //
+  // Additionally, there is an issue where macOS overlay scrollbars in Chrome and Safari (sometimes!)
+  // overlap other elements with higher zIndex, because the scrollbars themselves have zIndex 9999,
+  // so we have to use a higher value than that: https://github.com/databricks/universe/pull/232825
+  zIndex: 10000,
+  a: importantify({
+    color: theme.colors.textPrimary,
+    '&:hover, &:focus': {
+      color: theme.colors.textPrimary,
+      textDecoration: 'none'
+    }
+  })
+});
+const contentStyles = theme => ({
+  ...dropdownContentStyles(theme)
+});
+const dropdownItemStyles = theme => ({
+  padding: `${CONSTANTS.itemPaddingVertical(theme)}px ${CONSTANTS.itemPaddingHorizontal(theme)}px`,
+  display: 'flex',
+  flexWrap: 'wrap',
+  alignItems: 'center',
+  outline: 'unset',
+  '&:hover': {
+    cursor: 'pointer'
+  },
+  '&:focus': {
+    backgroundColor: theme.colors.actionTertiaryBackgroundHover
+  },
+  '&[data-disabled]': {
+    pointerEvents: 'none',
+    color: theme.colors.actionDisabledText
+  }
+});
+const dangerItemStyles = theme => ({
+  color: theme.colors.textValidationDanger,
+  '&:hover, &:focus': {
+    backgroundColor: theme.colors.actionDangerDefaultBackgroundHover
+  }
+});
+const infoIconStyles = theme => ({
+  display: 'inline-flex',
+  paddingLeft: theme.spacing.xs,
+  color: theme.colors.textSecondary,
+  pointerEvents: 'all'
+});
+const checkboxItemStyles = theme => ({
+  position: 'relative',
+  paddingLeft: CONSTANTS.checkboxIconWidth(theme) + CONSTANTS.checkboxPaddingLeft(theme) + CONSTANTS.checkboxPaddingRight(theme)
+});
+const metaTextStyles = theme => ({
+  color: theme.colors.textSecondary,
+  fontSize: theme.typography.fontSizeSm,
+  '[data-disabled] &': {
+    color: theme.colors.actionDisabledText
+  }
+});
+const dropdownSeparatorStyles = theme => ({
+  height: 1,
+  margin: `${theme.spacing.xs}px ${theme.spacing.sm}px`,
+  backgroundColor: theme.colors.borderDecorative
+});
+
+var DropdownMenu = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Arrow: Arrow,
+  CheckboxItem: CheckboxItem,
+  Content: Content,
+  Group: Group,
+  HintColumn: HintColumn,
+  HintRow: HintRow,
+  IconWrapper: IconWrapper,
+  Item: Item,
+  ItemIndicator: ItemIndicator,
+  Label: Label,
+  RadioGroup: RadioGroup,
+  RadioItem: RadioItem,
+  Root: Root,
+  Separator: Separator,
+  Sub: Sub,
+  SubContent: SubContent,
+  SubTrigger: SubTrigger,
+  Trigger: Trigger,
+  TriggerItem: TriggerItem,
+  dropdownContentStyles: dropdownContentStyles,
+  dropdownItemStyles: dropdownItemStyles,
+  dropdownSeparatorStyles: dropdownSeparatorStyles
+});
+
+export { dropdownItemStyles as $, ApplyDesignSystemContextOverrides as A, Button as B, CloseIcon as C, DesignSystemAntDConfigProvider as D, DesignSystemThemeContext as E, DesignSystemContext as F, DesignSystemThemeProvider as G, DesignSystemProvider as H, Icon as I, ApplyDesignSystemFlags as J, useAntDConfigProviderContext as K, LoadingState as L, DropdownMenu as M, CursorIcon as N, FaceFrownIcon as O, FaceNeutralIcon as P, FaceSmileIcon as Q, RestoreAntDDefaultClsPrefix as R, Spinner as S, Tooltip as T, NewWindowIcon as U, __INTERNAL_DO_NOT_USE__Password as V, WithDesignSystemThemeHoc as W, __INTERNAL_DO_NOT_USE_DEDUPE__Group as X, LoadingStateContext as Y, getTypographyColor as Z, __INTERNAL_DO_NOT_USE__TextArea as _, ChevronRightIcon as a, dropdownSeparatorStyles as a0, useDesignSystemFlags as b, useDesignSystemContext as c, InfoIcon as d, Input as e, CheckIcon as f, getAnimationCss as g, getValidationStateColor as h, importantify as i, Typography as j, LoadingIcon as k, dropdownContentStyles as l, Title as m, AccessibleContainer as n, ChevronLeftIcon as o, DU_BOIS_ENABLE_ANIMATION_CLASSNAME as p, Root as q, Trigger as r, safex as s, getDefaultStyles as t, useDesignSystemTheme as u, visuallyHidden as v, getPrimaryStyles as w, getDisabledStyles as x, lightColorList as y, getButtonEmotionStyles as z };
+//# sourceMappingURL=DropdownMenu-eb8788e5.js.map