@databricks/design-system 1.12.11 → 1.12.13

package/dist/{DropdownMenu-eb8788e5.js → DropdownMenu-dbeef1b7.js}

@@ -1,18 +1,17 @@
-import React__default, { createContext, useContext, useMemo, useEffect, useLayoutEffect, forwardRef, useRef, useImperativeHandle, Children } from 'react';
+import React__default, { createContext, useContext, useMemo, useEffect, useState, forwardRef, useRef, useLayoutEffect, 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 { notification, ConfigProvider, Button as Button$1, Typography as Typography$1, Tooltip as Tooltip$1, Input as Input$2 } from 'antd';
 import * as DropdownMenu$1 from '@radix-ui/react-dropdown-menu';
-import chroma from 'chroma-js';
 import _isNil from 'lodash/isNil';
 import _endsWith from 'lodash/endsWith';
 import _isBoolean from 'lodash/isBoolean';
 import _isNumber from 'lodash/isNumber';
 import _isString from 'lodash/isString';
 import _mapValues from 'lodash/mapValues';
+import _memoize from 'lodash/memoize';
 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
@@ -32,13 +31,207 @@ const visuallyHidden = {
   }
 };
 
+const DEFAULT_SPACING_UNIT = 8;
+const MODAL_PADDING = 40;
+const spacing = {
+  xs: DEFAULT_SPACING_UNIT / 2,
+  sm: DEFAULT_SPACING_UNIT,
+  md: DEFAULT_SPACING_UNIT * 2,
+  lg: DEFAULT_SPACING_UNIT * 3
+};
+
+// Less variables that are used by AntD
+({
+  defaultPaddingLg: spacing.lg,
+  defaultPaddingMd: spacing.md,
+  defaultPaddingSm: spacing.sm,
+  defaultPaddingXs: spacing.sm,
+  defaultPaddingXss: spacing.xs,
+  paddingLg: spacing.md,
+  // TODO: Check if there is a better alternative with team
+  paddingMd: spacing.sm,
+  paddingSm: spacing.sm,
+  paddingXs: spacing.xs,
+  paddingXss: 0,
+  marginSm: 12,
+  marginLg: spacing.lg,
+  // Button
+  btnPaddingHorizontalBase: DEFAULT_SPACING_UNIT * 2,
+  btnPaddingHorizontalLg: DEFAULT_SPACING_UNIT * 2,
+  btnPaddingHorizontalSm: DEFAULT_SPACING_UNIT * 2,
+  // Input
+  inputPaddingHorizontal: DEFAULT_SPACING_UNIT * 1.5,
+  inputPaddingHorizontalBase: DEFAULT_SPACING_UNIT * 1.5,
+  inputPaddingHorizontalSm: DEFAULT_SPACING_UNIT * 1.5,
+  inputPaddingHorizontalLg: DEFAULT_SPACING_UNIT * 1.5,
+  inputPaddingVertical: spacing.xs + 1,
+  inputPaddingVerticalBase: spacing.xs + 1,
+  inputPaddingVerticalSm: spacing.xs + 1,
+  inputPaddingVerticalLg: spacing.xs + 1,
+  // Modal
+  modalPadding: MODAL_PADDING,
+  modalLessPadding: MODAL_PADDING - 20,
+  modalHeaderPadding: `${MODAL_PADDING}px ${MODAL_PADDING}px ${MODAL_PADDING - 20}px`,
+  modalHeaderCloseSize: MODAL_PADDING * 2 + 22,
+  modalHeaderBorderWidth: 0,
+  modalBodyPadding: `0 ${MODAL_PADDING}px`,
+  modalFooterPaddingVertical: 0,
+  modalFooterPaddingHorizontal: 0,
+  modalFooterBorderWidth: 0,
+  // Switch
+  switchPadding: 0,
+  switchHeight: 16,
+  switchMinWidth: 28,
+  switchPinSize: 14
+});
+var spacing$1 = spacing;
+
+// eslint-disable-next-line import/no-anonymous-default-export
+var antdVars = {
+  // IMPORTANT: Do not read this directly from components. Use `React.useContext`.
+  'ant-prefix': 'du-bois'
+};
+
+const heightBase = 40;
+const borderWidth = 1;
+const antdGeneralVariables = {
+  classnamePrefix: antdVars['ant-prefix'],
+  iconfontCssPrefix: 'anticon',
+  borderRadiusBase: 4,
+  borderWidth: borderWidth,
+  heightSm: 32,
+  heightBase: heightBase,
+  iconSize: 24,
+  iconFontSize: 16,
+  buttonHeight: heightBase,
+  // Height available within button (for label and icon). Same for middle and small buttons.
+  buttonInnerHeight: heightBase - spacing$1.sm * 2 - borderWidth * 2
+};
+const shadowLightRgb = '31, 39, 45';
+const shadowDarkRgb = '0, 0, 0';
+const getShadowVariables = isDarkMode => {
+  if (isDarkMode) {
+    return {
+      shadowLow: `0px 4px 16px rgba(${shadowDarkRgb}, 0.12)`,
+      shadowHigh: `0px 8px 24px rgba(${shadowDarkRgb}, 0.2);`
+    };
+  } else {
+    return {
+      shadowLow: `0px 4px 16px rgba(${shadowLightRgb}, 0.12)`,
+      shadowHigh: `0px 8px 24px rgba(${shadowLightRgb}, 0.2)`
+    };
+  }
+};
+
+// THIS FILE IS AUTOMATICALLY GENERATED. DO NOT EDIT.
+
+let ValidSemanticColors = /*#__PURE__*/function (ValidSemanticColors) {
+  ValidSemanticColors["ActionDangerDefaultBackgroundDefault"] = "actionDangerDefaultBackgroundDefault";
+  ValidSemanticColors["ActionDangerDefaultBackgroundHover"] = "actionDangerDefaultBackgroundHover";
+  ValidSemanticColors["ActionDangerDefaultBackgroundPress"] = "actionDangerDefaultBackgroundPress";
+  ValidSemanticColors["ActionDangerDefaultBorderDefault"] = "actionDangerDefaultBorderDefault";
+  ValidSemanticColors["ActionDangerDefaultBorderHover"] = "actionDangerDefaultBorderHover";
+  ValidSemanticColors["ActionDangerDefaultBorderPress"] = "actionDangerDefaultBorderPress";
+  ValidSemanticColors["ActionDangerDefaultTextDefault"] = "actionDangerDefaultTextDefault";
+  ValidSemanticColors["ActionDangerDefaultTextHover"] = "actionDangerDefaultTextHover";
+  ValidSemanticColors["ActionDangerDefaultTextPress"] = "actionDangerDefaultTextPress";
+  ValidSemanticColors["ActionDangerPrimaryBackgroundDefault"] = "actionDangerPrimaryBackgroundDefault";
+  ValidSemanticColors["ActionDangerPrimaryBackgroundHover"] = "actionDangerPrimaryBackgroundHover";
+  ValidSemanticColors["ActionDangerPrimaryBackgroundPress"] = "actionDangerPrimaryBackgroundPress";
+  ValidSemanticColors["ActionDangerPrimaryText"] = "actionDangerPrimaryText";
+  ValidSemanticColors["ActionDefaultBackgroundDefault"] = "actionDefaultBackgroundDefault";
+  ValidSemanticColors["ActionDefaultBackgroundHover"] = "actionDefaultBackgroundHover";
+  ValidSemanticColors["ActionDefaultBackgroundPress"] = "actionDefaultBackgroundPress";
+  ValidSemanticColors["ActionDefaultBorderDefault"] = "actionDefaultBorderDefault";
+  ValidSemanticColors["ActionDefaultBorderFocus"] = "actionDefaultBorderFocus";
+  ValidSemanticColors["ActionDefaultBorderHover"] = "actionDefaultBorderHover";
+  ValidSemanticColors["ActionDefaultBorderPress"] = "actionDefaultBorderPress";
+  ValidSemanticColors["ActionDefaultIconDefault"] = "actionDefaultIconDefault";
+  ValidSemanticColors["ActionDefaultIconHover"] = "actionDefaultIconHover";
+  ValidSemanticColors["ActionDefaultIconPress"] = "actionDefaultIconPress";
+  ValidSemanticColors["ActionDefaultTextDefault"] = "actionDefaultTextDefault";
+  ValidSemanticColors["ActionDefaultTextHover"] = "actionDefaultTextHover";
+  ValidSemanticColors["ActionDefaultTextPress"] = "actionDefaultTextPress";
+  ValidSemanticColors["ActionDisabledBackground"] = "actionDisabledBackground";
+  ValidSemanticColors["ActionDisabledBorder"] = "actionDisabledBorder";
+  ValidSemanticColors["ActionDisabledText"] = "actionDisabledText";
+  ValidSemanticColors["ActionIconBackgroundDefault"] = "actionIconBackgroundDefault";
+  ValidSemanticColors["ActionIconBackgroundHover"] = "actionIconBackgroundHover";
+  ValidSemanticColors["ActionIconBackgroundPress"] = "actionIconBackgroundPress";
+  ValidSemanticColors["ActionIconIconDefault"] = "actionIconIconDefault";
+  ValidSemanticColors["ActionIconIconHover"] = "actionIconIconHover";
+  ValidSemanticColors["ActionIconIconPress"] = "actionIconIconPress";
+  ValidSemanticColors["ActionLinkDefault"] = "actionLinkDefault";
+  ValidSemanticColors["ActionLinkHover"] = "actionLinkHover";
+  ValidSemanticColors["ActionLinkPress"] = "actionLinkPress";
+  ValidSemanticColors["ActionPrimaryBackgroundDefault"] = "actionPrimaryBackgroundDefault";
+  ValidSemanticColors["ActionPrimaryBackgroundHover"] = "actionPrimaryBackgroundHover";
+  ValidSemanticColors["ActionPrimaryBackgroundPress"] = "actionPrimaryBackgroundPress";
+  ValidSemanticColors["ActionPrimaryIcon"] = "actionPrimaryIcon";
+  ValidSemanticColors["ActionPrimaryTextDefault"] = "actionPrimaryTextDefault";
+  ValidSemanticColors["ActionPrimaryTextHover"] = "actionPrimaryTextHover";
+  ValidSemanticColors["ActionPrimaryTextPress"] = "actionPrimaryTextPress";
+  ValidSemanticColors["ActionTertiaryBackgroundDefault"] = "actionTertiaryBackgroundDefault";
+  ValidSemanticColors["ActionTertiaryBackgroundHover"] = "actionTertiaryBackgroundHover";
+  ValidSemanticColors["ActionTertiaryBackgroundPress"] = "actionTertiaryBackgroundPress";
+  ValidSemanticColors["ActionTertiaryIconDefault"] = "actionTertiaryIconDefault";
+  ValidSemanticColors["ActionTertiaryIconHover"] = "actionTertiaryIconHover";
+  ValidSemanticColors["ActionTertiaryIconPress"] = "actionTertiaryIconPress";
+  ValidSemanticColors["ActionTertiaryTextDefault"] = "actionTertiaryTextDefault";
+  ValidSemanticColors["ActionTertiaryTextHover"] = "actionTertiaryTextHover";
+  ValidSemanticColors["ActionTertiaryTextPress"] = "actionTertiaryTextPress";
+  ValidSemanticColors["BackgroundDanger"] = "backgroundDanger";
+  ValidSemanticColors["BackgroundInfo"] = "backgroundInfo";
+  ValidSemanticColors["BackgroundPrimary"] = "backgroundPrimary";
+  ValidSemanticColors["BackgroundSecondary"] = "backgroundSecondary";
+  ValidSemanticColors["BackgroundSuccess"] = "backgroundSuccess";
+  ValidSemanticColors["BackgroundWarning"] = "backgroundWarning";
+  ValidSemanticColors["Border"] = "border";
+  ValidSemanticColors["BorderAccessible"] = "borderAccessible";
+  ValidSemanticColors["BorderDanger"] = "borderDanger";
+  ValidSemanticColors["BorderWarning"] = "borderWarning";
+  ValidSemanticColors["CodeBackground"] = "codeBackground";
+  ValidSemanticColors["OverlayOverlay"] = "overlayOverlay";
+  ValidSemanticColors["Skeleton"] = "skeleton";
+  ValidSemanticColors["TableBackgroundSelectedDefault"] = "tableBackgroundSelectedDefault";
+  ValidSemanticColors["TableBackgroundSelectedHover"] = "tableBackgroundSelectedHover";
+  ValidSemanticColors["TableBackgroundUnselectedDefault"] = "tableBackgroundUnselectedDefault";
+  ValidSemanticColors["TableBackgroundUnselectedHover"] = "tableBackgroundUnselectedHover";
+  ValidSemanticColors["TagBrown"] = "tagBrown";
+  ValidSemanticColors["TagCharcoal"] = "tagCharcoal";
+  ValidSemanticColors["TagCoral"] = "tagCoral";
+  ValidSemanticColors["TagDefault"] = "tagDefault";
+  ValidSemanticColors["TagHover"] = "tagHover";
+  ValidSemanticColors["TagIconDefault"] = "tagIconDefault";
+  ValidSemanticColors["TagIconHover"] = "tagIconHover";
+  ValidSemanticColors["TagIconPress"] = "tagIconPress";
+  ValidSemanticColors["TagIndigo"] = "tagIndigo";
+  ValidSemanticColors["TagInverse"] = "tagInverse";
+  ValidSemanticColors["TagLemon"] = "tagLemon";
+  ValidSemanticColors["TagLime"] = "tagLime";
+  ValidSemanticColors["TagPink"] = "tagPink";
+  ValidSemanticColors["TagPress"] = "tagPress";
+  ValidSemanticColors["TagPurple"] = "tagPurple";
+  ValidSemanticColors["TagTeal"] = "tagTeal";
+  ValidSemanticColors["TagText"] = "tagText";
+  ValidSemanticColors["TagTurquoise"] = "tagTurquoise";
+  ValidSemanticColors["TextPlaceholder"] = "textPlaceholder";
+  ValidSemanticColors["TextPrimary"] = "textPrimary";
+  ValidSemanticColors["TextSecondary"] = "textSecondary";
+  ValidSemanticColors["TextValidationDanger"] = "textValidationDanger";
+  ValidSemanticColors["TextValidationSuccess"] = "textValidationSuccess";
+  ValidSemanticColors["TextValidationWarning"] = "textValidationWarning";
+  ValidSemanticColors["TooltipBackgroundTooltip"] = "tooltipBackgroundTooltip";
+  return ValidSemanticColors;
+}({});
+
 const ColorVars = {
-  primary: 'textPrimary',
-  secondary: 'textSecondary',
-  info: 'textValidationInfo',
-  error: 'textValidationDanger',
-  success: 'textValidationSuccess',
-  warning: 'textValidationWarning'
+  primary: ValidSemanticColors.TextPrimary,
+  secondary: ValidSemanticColors.TextSecondary,
+  info: ValidSemanticColors.TextSecondary,
+  error: ValidSemanticColors.TextValidationDanger,
+  success: ValidSemanticColors.TextValidationSuccess,
+  warning: ValidSemanticColors.TextValidationWarning
 };
 
 /**
@@ -105,6 +298,106 @@ function getValidationStateColor(theme, validationState) {
       return undefined;
   }
 }
+function getDarkModePortalStyles(theme) {
+  if (!theme || !theme.isDarkMode) {
+    return {};
+  }
+  return {
+    border: `1px solid ${theme.colors.borderDecorative}`,
+    boxShadow: 'none'
+  };
+}
+const shadowCoverTop = bgColor => `linear-gradient(${bgColor} 30%, rgba(0, 0, 0, 0)) center top`;
+const shadowCoverBot = bgColor => `linear-gradient(rgba(0, 0, 0, 0), ${bgColor} 70%) center bottom`;
+const shadowCoverLeft = bgColor => `linear-gradient(to left, rgba(0, 0, 0, 0), ${bgColor} 30%) left center`;
+const shadowCoverRight = bgColor => `linear-gradient(to left, ${bgColor} 70%, rgba(0, 0, 0, 0)) right center`;
+const shadowTop = shadowRgb => `radial-gradient(
+  farthest-side at 50% 0,
+  rgba(${shadowRgb}, 0.2),
+  rgba(${shadowRgb}, 0)
+) center top`;
+const shadowBot = shadowRgb => `radial-gradient(
+  farthest-side at 50% 100%,
+  rgba(${shadowRgb}, 0.2),
+  rgba(${shadowRgb}, 0)
+) center bottom`;
+const shadowLeft = shadowRgb => `radial-gradient(
+  farthest-side at 0 50%,
+  rgba(${shadowRgb}, 0.2),
+  rgba(${shadowRgb}, 0)
+) left center`;
+const shadowRight = shadowRgb => `radial-gradient(
+  farthest-side at 100% 50%,
+  rgba(${shadowRgb}, 0.2),
+  rgba(${shadowRgb}, 0)
+) right center`;
+const shadowCoverBackgroundSizeVertical = '100% 40px';
+const shadowCoverBackgroundSizeHorizontal = '40px 100%';
+const shadowBackgroundSizeVertical = '100% 14px';
+const shadowBackgroundSizeHorizontal = '14px 100%';
+const getShadowScrollStylesMemoized = _memoize(function getShadowScrollStylesMemoized(theme, backgroundColor) {
+  let orientation = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'vertical';
+  const bgColor = backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.backgroundPrimary;
+  const shadowColor = theme.isDarkMode ? shadowDarkRgb : shadowLightRgb;
+  if (orientation === 'horizontal') {
+    return {
+      background: `
+            ${shadowCoverLeft(bgColor)},
+            ${shadowCoverRight(bgColor)},
+            ${shadowLeft(shadowColor)},
+            ${shadowRight(shadowColor)}`,
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: `
+            ${shadowCoverBackgroundSizeHorizontal},
+            ${shadowCoverBackgroundSizeHorizontal},
+            ${shadowBackgroundSizeHorizontal},
+            ${shadowBackgroundSizeHorizontal}`,
+      backgroundAttachment: 'local, local, scroll, scroll'
+    };
+  }
+  return {
+    background: `
+          ${shadowCoverTop(bgColor)},
+          ${shadowCoverBot(bgColor)},
+          ${shadowTop(shadowColor)},
+          ${shadowBot(shadowColor)}`,
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: `
+          ${shadowCoverBackgroundSizeVertical},
+          ${shadowCoverBackgroundSizeVertical},
+          ${shadowBackgroundSizeVertical},
+          ${shadowBackgroundSizeVertical}`,
+    backgroundAttachment: 'local, local, scroll, scroll'
+  };
+}, (theme, backgroundColor, orientation) => {
+  return `${theme.isDarkMode}-${backgroundColor}-${orientation}`;
+});
+const getShadowScrollStyles = function getShadowScrollStyles(theme) {
+  let {
+    backgroundColor,
+    orientation
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return getShadowScrollStylesMemoized(theme, backgroundColor, orientation);
+};
+const getBottomOnlyShadowScrollStylesMemoized = _memoize(function getBottomOnlyShadowScrollStylesMemoized(theme, backgroundColor) {
+  const bgColor = backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.backgroundPrimary;
+  return {
+    background: `
+          ${shadowCoverBot(bgColor)},
+          ${shadowBot(theme.isDarkMode ? shadowDarkRgb : shadowLightRgb)}`,
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: `
+          ${shadowCoverBackgroundSizeVertical},
+          ${shadowBackgroundSizeVertical}`,
+    backgroundAttachment: 'local, scroll'
+  };
+});
+const getBottomOnlyShadowScrollStyles = function getBottomOnlyShadowScrollStyles(theme) {
+  let {
+    backgroundColor
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return getBottomOnlyShadowScrollStylesMemoized(theme, backgroundColor);
+};
 
 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" ? {
@@ -176,35 +469,19 @@ 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;
-  }
-};
+// THIS FILE IS AUTOMATICALLY GENERATED. DO NOT EDIT.
 
-// Exported from go/designsystem/colorsheet
-const colorPalettePrimary = {
-  primary: '#2272B4',
+const primitiveColors = {
   blue100: '#F0F8FF',
   blue200: '#D7EDFE',
   blue300: '#BAE1FC',
-  blue400: '#8FCDFF',
+  blue400: '#8ACAFF',
   blue500: '#4299E0',
   blue600: '#2272B4',
   blue700: '#0E538B',
   blue800: '#04355D',
+  brown: '#A6630C',
+  coral: '#C83243',
   green100: '#F3FCF6',
   green200: '#D4F7DF',
   green300: '#B1ECC5',
@@ -213,15 +490,22 @@ const colorPalettePrimary = {
   green600: '#277C43',
   green700: '#115026',
   green800: '#093919',
-  white: '#FFFFFF',
-  grey100: '#F2F5F7',
-  grey200: '#E4ECF1',
-  grey300: '#CDDAE5',
-  grey400: '#BDCDDB',
-  grey500: '#8196A7',
-  grey600: '#5D7283',
-  grey700: '#44535F',
-  grey800: '#1F272D',
+  grey050: '#F2F8F8',
+  grey100: '#E4ECF1',
+  grey200: '#CDDAE5',
+  grey300: '#BDCDDB',
+  grey350: '#90A4B5',
+  grey400: '#8196A7',
+  grey500: '#5D7283',
+  grey600: '#44535F',
+  grey650: '#354450',
+  grey700: '#1F272D',
+  grey800: '#11171C',
+  indigo: '#434A93',
+  lemon: '#FACB66',
+  lime: '#308613',
+  pink: '#B45091',
+  purple: '#8A63BF',
   red100: '#FFF5F7',
   red200: '#FDE2E8',
   red300: '#FBD0D8',
@@ -230,6 +514,9 @@ const colorPalettePrimary = {
   red600: '#C82D4C',
   red700: '#9E102C',
   red800: '#630316',
+  teal: '#04867D',
+  turquoise: '#137DAE',
+  white: '#FFFFFF',
   yellow100: '#FFF9EB',
   yellow200: '#FCEACA',
   yellow300: '#F8D4A5',
@@ -239,360 +526,298 @@ 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: colorPalettePrimary.grey600,
-  indigo: '#434A93',
-  lemon: '#FACB66',
-  lime: '#308613',
-  pink: '#B45091',
-  purple: '#8A63BF',
-  teal: '#04867D',
-  turquoise: '#157CBC'
-};
-const lightColorList = {
-  backgroundPrimary: colorPalettePrimary.white,
-  actionDangerPrimaryBackgroundDefault: colorPalettePrimary.red600,
-  actionDangerPrimaryBackgroundHover: colorPalettePrimary.red700,
-  actionDangerPrimaryBackgroundPress: colorPalettePrimary.red800,
-  actionDangerDefaultBackgroundDefault: chroma(colorPalettePrimary.red600).alpha(0).hex(),
-  actionDangerDefaultBackgroundHover: chroma(colorPalettePrimary.red600).alpha(0.08).hex(),
-  actionDangerDefaultBackgroundPress: chroma(colorPalettePrimary.red600).alpha(0.16).hex(),
-  actionDangerDefaultBorderDefault: colorPalettePrimary.red600,
-  actionDangerDefaultBorderHover: colorPalettePrimary.red700,
-  actionDangerDefaultBorderPress: colorPalettePrimary.red800,
-  actionDangerDefaultTextDefault: colorPalettePrimary.red600,
-  actionDangerDefaultTextHover: colorPalettePrimary.red700,
-  actionDangerDefaultTextPress: colorPalettePrimary.red800,
-  actionDefaultBackgroundDefault: chroma(colorPalettePrimary.blue800).alpha(0).hex(),
-  actionDefaultBackgroundHover: chroma(colorPalettePrimary.blue600).alpha(0.08).hex(),
-  actionDefaultBackgroundPress: chroma(colorPalettePrimary.blue600).alpha(0.16).hex(),
-  actionDefaultBorderDefault: colorPalettePrimary.grey300,
-  actionDefaultBorderFocus: colorPalettePrimary.blue600,
-  actionDefaultBorderHover: colorPalettePrimary.blue700,
-  actionDefaultBorderPress: colorPalettePrimary.blue800,
-  actionDefaultTextDefault: colorPalettePrimary.grey800,
-  actionDefaultTextHover: colorPalettePrimary.blue700,
-  actionDefaultTextPress: colorPalettePrimary.blue800,
-  actionDisabledBackground: colorPalettePrimary.grey200,
-  actionDisabledText: colorPalettePrimary.grey400,
-  actionPrimaryBackgroundDefault: colorPalettePrimary.blue600,
-  actionPrimaryBackgroundHover: colorPalettePrimary.blue700,
-  actionPrimaryBackgroundPress: colorPalettePrimary.blue800,
-  actionPrimaryTextDefault: colorPalettePrimary.white,
-  actionPrimaryTextHover: colorPalettePrimary.white,
-  actionPrimaryTextPress: colorPalettePrimary.white,
-  actionTertiaryBackgroundDefault: chroma(colorPalettePrimary.blue600).alpha(0).hex(),
-  actionTertiaryBackgroundHover: chroma(colorPalettePrimary.blue600).alpha(0.08).hex(),
-  actionTertiaryBackgroundPress: chroma(colorPalettePrimary.blue600).alpha(0.16).hex(),
-  actionTertiaryTextDefault: colorPalettePrimary.blue600,
-  actionTertiaryTextHover: colorPalettePrimary.blue700,
-  actionTertiaryTextPress: colorPalettePrimary.blue800,
-  backgroundDanger: chroma(colorPalettePrimary.red100).alpha(0.08).hex(),
-  backgroundSecondary: colorPalettePrimary.grey100,
-  backgroundWarning: chroma(colorPalettePrimary.yellow100).alpha(0.08).hex(),
-  backgroundValidationDanger: colorPalettePrimary.red100,
-  backgroundValidationSuccess: colorPalettePrimary.blue100,
-  backgroundValidationWarning: colorPalettePrimary.yellow100,
-  border: colorPalettePrimary.grey300,
-  borderDecorative: colorPalettePrimary.grey200,
-  borderValidationDanger: colorPalettePrimary.red300,
-  borderValidationWarning: colorPalettePrimary.yellow300,
-  textPrimary: colorPalettePrimary.grey800,
-  textSecondary: colorPalettePrimary.grey600,
-  textPlaceholder: colorPalettePrimary.grey400,
-  textValidationDanger: colorPalettePrimary.red600,
-  textValidationSuccess: colorPalettePrimary.green600,
-  textValidationWarning: colorPalettePrimary.yellow600,
-  textValidationInfo: colorPalettePrimary.grey600,
-  overlayOverlay: chroma(colorPalettePrimary.grey100).alpha(0.72).hex(),
-  // Tags
-  tagDefault: chroma(colorPalettePrimary.grey600).alpha(0.08).hex(),
-  tagBrown: colorPaletteSecondary.brown,
-  tagCoral: colorPaletteSecondary.coral,
-  tagCharcoal: colorPaletteSecondary.charcoal,
-  tagIndigo: colorPaletteSecondary.indigo,
-  tagLemon: colorPaletteSecondary.lemon,
-  tagLime: colorPaletteSecondary.lime,
-  tagPink: colorPaletteSecondary.pink,
-  tagPurple: colorPaletteSecondary.purple,
-  tagTeal: colorPaletteSecondary.teal,
-  tagTurquoise: colorPaletteSecondary.turquoise,
-  tagText: colorPalettePrimary.white,
-  tagHover: chroma(colorPalettePrimary.blue400).alpha(0.08).hex(),
-  tagPress: chroma(colorPalettePrimary.blue400).alpha(0.16).hex(),
-  tagIconHover: chroma(colorPalettePrimary.white).alpha(0.8).hex(),
-  tagIconPress: chroma(colorPalettePrimary.white).alpha(0.76).hex(),
-  // Typography
-  typographyCodeBg: chroma(colorPalettePrimary.grey600).alpha(0.08).hex(),
-  // Table
-  tableRowHover: chroma(colorPalettePrimary.grey600).alpha(0.04).hex(),
-  tooltipBackgroundTooltip: colorPalettePrimary.grey800
-};
+
+// THIS FILE IS AUTOMATICALLY GENERATED. DO NOT EDIT.
+
 const darkColorList = {
-  actionDangerPrimaryBackgroundDefault: chroma(colorPalettePrimary.red400).alpha(0.84).hex(),
-  actionDangerPrimaryBackgroundHover: chroma(colorPalettePrimary.red400).alpha(0.72).hex(),
-  actionDangerPrimaryBackgroundPress: chroma(colorPalettePrimary.red400).alpha(0.6).hex(),
-  actionDangerDefaultBackgroundDefault: chroma(colorPalettePrimary.red400).alpha(0).hex(),
-  actionDangerDefaultBackgroundHover: chroma(colorPalettePrimary.red400).alpha(0.08).hex(),
-  actionDangerDefaultBackgroundPress: chroma(colorPalettePrimary.red400).alpha(0.16).hex(),
-  actionDangerDefaultBorderDefault: colorPalettePrimary.red400,
-  actionDangerDefaultBorderHover: chroma(colorPalettePrimary.red400).alpha(0.72).hex(),
-  actionDangerDefaultBorderPress: chroma(colorPalettePrimary.red400).alpha(0.6).hex(),
-  actionDangerDefaultTextDefault: colorPalettePrimary.red400,
-  actionDangerDefaultTextHover: chroma(colorPalettePrimary.red400).alpha(0.72).hex(),
-  actionDangerDefaultTextPress: chroma(colorPalettePrimary.red400).alpha(0.6).hex(),
-  actionDefaultBackgroundDefault: chroma(colorPalettePrimary.blue400).alpha(0).hex(),
-  actionDefaultBackgroundHover: chroma(colorPalettePrimary.blue400).alpha(0.08).hex(),
-  actionDefaultBackgroundPress: chroma(colorPalettePrimary.blue400).alpha(0.16).hex(),
-  actionDefaultBorderDefault: chroma(colorPalettePrimary.white).alpha(0.6).hex(),
-  actionDefaultBorderFocus: chroma(colorPalettePrimary.blue400).alpha(0.84).hex(),
-  actionDefaultBorderHover: chroma(colorPalettePrimary.blue400).alpha(0.8).hex(),
-  actionDefaultBorderPress: chroma(colorPalettePrimary.blue400).alpha(0.76).hex(),
-  actionDefaultTextDefault: chroma(colorPalettePrimary.white).alpha(0.84).hex(),
-  actionDefaultTextHover: chroma(colorPalettePrimary.blue400).alpha(0.8).hex(),
-  actionDefaultTextPress: chroma(colorPalettePrimary.blue400).alpha(0.76).hex(),
-  actionDisabledBackground: chroma(colorPalettePrimary.white).alpha(0.24).hex(),
-  actionDisabledText: chroma(colorPalettePrimary.white).alpha(0.4).hex(),
-  actionPrimaryBackgroundDefault: chroma(colorPalettePrimary.blue400).alpha(0.84).hex(),
-  actionPrimaryBackgroundHover: chroma(colorPalettePrimary.blue400).alpha(0.8).hex(),
-  actionPrimaryBackgroundPress: chroma(colorPalettePrimary.blue400).alpha(0.76).hex(),
-  actionPrimaryTextDefault: colorPalettePrimary.grey800,
-  actionPrimaryTextHover: colorPalettePrimary.grey800,
-  actionPrimaryTextPress: colorPalettePrimary.grey800,
-  actionTertiaryBackgroundDefault: chroma(colorPalettePrimary.blue400).alpha(0).hex(),
-  actionTertiaryBackgroundHover: chroma(colorPalettePrimary.blue400).alpha(0.08).hex(),
-  actionTertiaryBackgroundPress: chroma(colorPalettePrimary.blue400).alpha(0.16).hex(),
-  actionTertiaryTextDefault: chroma(colorPalettePrimary.blue400).alpha(0.84).hex(),
-  actionTertiaryTextHover: chroma(colorPalettePrimary.blue400).alpha(0.8).hex(),
-  actionTertiaryTextPress: chroma(colorPalettePrimary.blue400).alpha(0.76).hex(),
-  backgroundPrimary: colorPalettePrimary.grey800,
-  backgroundSecondary: '#283035',
-  backgroundValidationDanger: 'transparent',
-  backgroundValidationSuccess: 'transparent',
-  backgroundValidationWarning: 'transparent',
-  border: chroma(colorPalettePrimary.white).alpha(0.48).hex(),
-  borderDecorative: chroma(colorPalettePrimary.white).alpha(0.24).hex(),
-  borderValidationDanger: colorPalettePrimary.red300,
-  borderValidationWarning: colorPalettePrimary.yellow300,
-  textPrimary: chroma(colorPalettePrimary.white).alpha(0.84).hex(),
-  textSecondary: chroma(colorPalettePrimary.white).alpha(0.6).hex(),
-  textPlaceholder: chroma(colorPalettePrimary.grey400).alpha(0.84).hex(),
-  textValidationDanger: chroma(colorPalettePrimary.red400).alpha(0.84).hex(),
-  textValidationSuccess: chroma(colorPalettePrimary.green400).alpha(0.84).hex(),
-  textValidationWarning: chroma(colorPalettePrimary.yellow400).alpha(0.84).hex(),
-  textValidationInfo: chroma(colorPalettePrimary.white).alpha(0.6).hex(),
-  overlayOverlay: chroma(colorPalettePrimary.grey800).alpha(0.72).hex(),
-  // Tags
-  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(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(),
-  tagPink: chroma(colorPaletteSecondary.pink).alpha(0.84).hex(),
-  tagPurple: chroma(colorPaletteSecondary.purple).alpha(0.84).hex(),
-  tagTeal: chroma(colorPaletteSecondary.teal).alpha(0.84).hex(),
-  tagTurquoise: chroma(colorPaletteSecondary.turquoise).alpha(0.84).hex(),
-  tagText: chroma(colorPalettePrimary.white).alpha(0.84).hex(),
-  tagHover: chroma(colorPalettePrimary.blue400).alpha(0.08).hex(),
-  tagPress: chroma(colorPalettePrimary.blue400).alpha(0.16).hex(),
-  tagIconHover: chroma(colorPalettePrimary.white).alpha(0.8).hex(),
-  tagIconPress: chroma(colorPalettePrimary.white).alpha(0.76).hex(),
-  // Typography
-  typographyCodeBg: chroma(colorPalettePrimary.white).alpha(0.16).hex(),
-  // Table
-  tableRowHover: chroma(colorPalettePrimary.white).alpha(0.16).hex(),
-  tooltipBackgroundTooltip: chroma(colorPalettePrimary.white).alpha(0.6).hex(),
-  // Missing in list
-  backgroundDanger: 'rgba(200,45,76,0.08)',
-  backgroundWarning: 'rgba(222,121,33,0.08)'
-};
-const secondaryColorsUsingNewGreys = {
-  charcoal: newGreys.grey600
+  actionDangerDefaultBackgroundDefault: 'rgba(247, 146, 166, 0.0000)',
+  actionDangerDefaultBackgroundHover: 'rgba(247, 146, 166, 0.0800)',
+  actionDangerDefaultBackgroundPress: 'rgba(247, 146, 166, 0.1600)',
+  actionDangerDefaultBorderDefault: primitiveColors.red500,
+  actionDangerDefaultBorderHover: primitiveColors.red400,
+  actionDangerDefaultBorderPress: primitiveColors.red300,
+  actionDangerDefaultTextDefault: primitiveColors.red500,
+  actionDangerDefaultTextHover: primitiveColors.red400,
+  actionDangerDefaultTextPress: primitiveColors.red300,
+  actionDangerPrimaryBackgroundDefault: primitiveColors.red500,
+  actionDangerPrimaryBackgroundHover: primitiveColors.red400,
+  actionDangerPrimaryBackgroundPress: primitiveColors.red300,
+  actionDangerPrimaryText: primitiveColors.grey800,
+  actionDefaultBackgroundDefault: 'rgba(138, 202, 255, 0.0000)',
+  actionDefaultBackgroundHover: 'rgba(138, 202, 255, 0.0800)',
+  actionDefaultBackgroundPress: 'rgba(138, 202, 255, 0.1600)',
+  actionDefaultBorderDefault: primitiveColors.grey650,
+  actionDefaultBorderFocus: primitiveColors.blue400,
+  actionDefaultBorderHover: primitiveColors.blue400,
+  actionDefaultBorderPress: primitiveColors.blue300,
+  actionDefaultIconDefault: primitiveColors.grey350,
+  actionDefaultIconHover: primitiveColors.blue400,
+  actionDefaultIconPress: primitiveColors.blue300,
+  actionDefaultTextDefault: primitiveColors.grey100,
+  actionDefaultTextHover: primitiveColors.blue400,
+  actionDefaultTextPress: primitiveColors.blue300,
+  actionDisabledBackground: primitiveColors.grey700,
+  actionDisabledBorder: primitiveColors.grey650,
+  actionDisabledText: primitiveColors.grey600,
+  actionIconBackgroundDefault: 'rgba(255, 255, 255, 0.0000)',
+  actionIconBackgroundHover: 'rgba(255, 255, 255, 0.0800)',
+  actionIconBackgroundPress: 'rgba(255, 255, 255, 0.1600)',
+  actionIconIconDefault: primitiveColors.grey350,
+  actionIconIconHover: primitiveColors.grey300,
+  actionIconIconPress: primitiveColors.grey200,
+  actionLinkDefault: primitiveColors.blue500,
+  actionLinkHover: primitiveColors.blue400,
+  actionLinkPress: primitiveColors.blue300,
+  actionPrimaryBackgroundDefault: primitiveColors.blue500,
+  actionPrimaryBackgroundHover: primitiveColors.blue400,
+  actionPrimaryBackgroundPress: primitiveColors.blue300,
+  actionPrimaryIcon: primitiveColors.grey800,
+  actionPrimaryTextDefault: primitiveColors.grey800,
+  actionPrimaryTextHover: primitiveColors.grey800,
+  actionPrimaryTextPress: primitiveColors.grey800,
+  actionTertiaryBackgroundDefault: 'rgba(143, 205, 255, 0.0000)',
+  actionTertiaryBackgroundHover: 'rgba(143, 205, 255, 0.0800)',
+  actionTertiaryBackgroundPress: 'rgba(143, 205, 255, 0.1600)',
+  actionTertiaryIconDefault: primitiveColors.blue500,
+  actionTertiaryIconHover: primitiveColors.blue400,
+  actionTertiaryIconPress: primitiveColors.blue300,
+  actionTertiaryTextDefault: primitiveColors.blue500,
+  actionTertiaryTextHover: primitiveColors.blue400,
+  actionTertiaryTextPress: primitiveColors.blue300,
+  backgroundDanger: 'rgba(200, 45, 76, 0.1600)',
+  backgroundInfo: 'rgba(68, 83, 95, 0.1600)',
+  backgroundPrimary: primitiveColors.grey800,
+  backgroundSecondary: primitiveColors.grey700,
+  backgroundSuccess: 'rgba(39, 124, 67, 0.1600)',
+  backgroundWarning: 'rgba(190, 80, 30, 0.1600)',
+  border: primitiveColors.grey650,
+  borderAccessible: primitiveColors.grey300,
+  borderDanger: primitiveColors.red500,
+  borderWarning: primitiveColors.yellow500,
+  codeBackground: primitiveColors.grey700,
+  overlayOverlay: 'rgba(31, 38, 45, 0.7200)',
+  skeleton: 'rgba(228, 236, 241, 0.1000)',
+  tableBackgroundSelectedDefault: 'rgba(189, 205, 219, 0.0800)',
+  tableBackgroundSelectedHover: 'rgba(189, 205, 219, 0.1200)',
+  tableBackgroundUnselectedDefault: primitiveColors.grey800,
+  tableBackgroundUnselectedHover: 'rgba(189, 205, 219, 0.0400)',
+  tagBrown: 'rgba(166, 99, 12, 0.8600)',
+  tagCharcoal: 'rgba(68, 83, 95, 0.8600)',
+  tagCoral: 'rgba(200, 50, 67, 0.8600)',
+  tagDefault: primitiveColors.grey700,
+  tagHover: 'rgba(138, 202, 255, 0.0800)',
+  tagIconDefault: primitiveColors.grey350,
+  tagIconHover: primitiveColors.grey350,
+  tagIconPress: primitiveColors.grey350,
+  tagIndigo: 'rgba(67, 74, 147, 0.8600)',
+  tagInverse: primitiveColors.grey100,
+  tagLemon: 'rgba(250, 203, 102, 0.8600)',
+  tagLime: 'rgba(48, 134, 19, 0.8600)',
+  tagPink: 'rgba(180, 80, 145, 0.8600)',
+  tagPress: 'rgba(138, 202, 255, 0.1600)',
+  tagPurple: 'rgba(138, 99, 191, 0.8600)',
+  tagTeal: 'rgba(4, 134, 125, 0.8600)',
+  tagText: primitiveColors.grey100,
+  tagTurquoise: 'rgba(19, 125, 174, 0.8600)',
+  textPlaceholder: primitiveColors.grey650,
+  textPrimary: primitiveColors.grey100,
+  textSecondary: primitiveColors.grey350,
+  textValidationDanger: primitiveColors.red500,
+  textValidationSuccess: primitiveColors.green500,
+  textValidationWarning: primitiveColors.yellow500,
+  tooltipBackgroundTooltip: primitiveColors.grey300
 };
-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()
+
+// THIS FILE IS AUTOMATICALLY GENERATED. DO NOT EDIT.
+
+const lightColorList = {
+  actionDangerDefaultBackgroundDefault: 'rgba(200, 45, 76, 0.0000)',
+  actionDangerDefaultBackgroundHover: 'rgba(200, 45, 76, 0.0800)',
+  actionDangerDefaultBackgroundPress: 'rgba(200, 45, 76, 0.1600)',
+  actionDangerDefaultBorderDefault: primitiveColors.red600,
+  actionDangerDefaultBorderHover: primitiveColors.red700,
+  actionDangerDefaultBorderPress: primitiveColors.red800,
+  actionDangerDefaultTextDefault: primitiveColors.red600,
+  actionDangerDefaultTextHover: primitiveColors.red700,
+  actionDangerDefaultTextPress: primitiveColors.red800,
+  actionDangerPrimaryBackgroundDefault: primitiveColors.red600,
+  actionDangerPrimaryBackgroundHover: primitiveColors.red700,
+  actionDangerPrimaryBackgroundPress: primitiveColors.red800,
+  actionDangerPrimaryText: primitiveColors.white,
+  actionDefaultBackgroundDefault: 'rgba(34, 114, 180, 0.0000)',
+  actionDefaultBackgroundHover: 'rgba(34, 114, 180, 0.0800)',
+  actionDefaultBackgroundPress: 'rgba(34, 114, 180, 0.1600)',
+  actionDefaultBorderDefault: primitiveColors.grey300,
+  actionDefaultBorderFocus: primitiveColors.blue700,
+  actionDefaultBorderHover: primitiveColors.blue600,
+  actionDefaultBorderPress: primitiveColors.blue800,
+  actionDefaultIconDefault: primitiveColors.grey600,
+  actionDefaultIconHover: primitiveColors.blue700,
+  actionDefaultIconPress: primitiveColors.blue800,
+  actionDefaultTextDefault: primitiveColors.grey800,
+  actionDefaultTextHover: primitiveColors.blue700,
+  actionDefaultTextPress: primitiveColors.blue800,
+  actionDisabledBackground: primitiveColors.grey050,
+  actionDisabledBorder: primitiveColors.grey100,
+  actionDisabledText: primitiveColors.grey300,
+  actionIconBackgroundDefault: 'rgba(34, 114, 180, 0.0000)',
+  actionIconBackgroundHover: 'rgba(34, 114, 180, 0.0800)',
+  actionIconBackgroundPress: 'rgba(34, 114, 180, 0.1600)',
+  actionIconIconDefault: primitiveColors.grey600,
+  actionIconIconHover: primitiveColors.blue700,
+  actionIconIconPress: primitiveColors.blue800,
+  actionLinkDefault: primitiveColors.blue600,
+  actionLinkHover: primitiveColors.blue700,
+  actionLinkPress: primitiveColors.blue800,
+  actionPrimaryBackgroundDefault: primitiveColors.blue600,
+  actionPrimaryBackgroundHover: primitiveColors.blue700,
+  actionPrimaryBackgroundPress: primitiveColors.blue800,
+  actionPrimaryIcon: primitiveColors.white,
+  actionPrimaryTextDefault: primitiveColors.white,
+  actionPrimaryTextHover: primitiveColors.white,
+  actionPrimaryTextPress: primitiveColors.white,
+  actionTertiaryBackgroundDefault: 'rgba(34, 114, 180, 0.0000)',
+  actionTertiaryBackgroundHover: 'rgba(34, 114, 180, 0.0800)',
+  actionTertiaryBackgroundPress: 'rgba(34, 114, 180, 0.1600)',
+  actionTertiaryIconDefault: primitiveColors.blue600,
+  actionTertiaryIconHover: primitiveColors.blue700,
+  actionTertiaryIconPress: primitiveColors.blue800,
+  actionTertiaryTextDefault: primitiveColors.blue600,
+  actionTertiaryTextHover: primitiveColors.blue700,
+  actionTertiaryTextPress: primitiveColors.blue800,
+  backgroundDanger: primitiveColors.red100,
+  backgroundInfo: primitiveColors.grey100,
+  backgroundPrimary: primitiveColors.white,
+  backgroundSecondary: primitiveColors.grey050,
+  backgroundSuccess: primitiveColors.green100,
+  backgroundWarning: primitiveColors.yellow100,
+  border: primitiveColors.grey200,
+  borderAccessible: primitiveColors.grey500,
+  borderDanger: primitiveColors.red300,
+  borderWarning: primitiveColors.yellow300,
+  codeBackground: 'rgba(68, 83, 95, 0.0800)',
+  overlayOverlay: 'rgba(64, 63, 63, 0.7200)',
+  skeleton: 'rgba(17, 23, 28, 0.1000)',
+  tableBackgroundSelectedDefault: 'rgba(68, 83, 95, 0.0800)',
+  tableBackgroundSelectedHover: 'rgba(68, 83, 95, 0.1200)',
+  tableBackgroundUnselectedDefault: primitiveColors.white,
+  tableBackgroundUnselectedHover: 'rgba(68, 83, 95, 0.0400)',
+  tagBrown: primitiveColors.brown,
+  tagCharcoal: primitiveColors.grey600,
+  tagCoral: primitiveColors.coral,
+  tagDefault: primitiveColors.grey050,
+  tagHover: 'rgba(34, 114, 180, 0.0800)',
+  tagIconDefault: primitiveColors.grey600,
+  tagIconHover: primitiveColors.grey600,
+  tagIconPress: primitiveColors.grey600,
+  tagIndigo: primitiveColors.indigo,
+  tagInverse: primitiveColors.grey800,
+  tagLemon: primitiveColors.lemon,
+  tagLime: primitiveColors.lime,
+  tagPink: primitiveColors.pink,
+  tagPress: 'rgba(34, 114, 180, 0.1600)',
+  tagPurple: primitiveColors.purple,
+  tagTeal: primitiveColors.teal,
+  tagText: primitiveColors.white,
+  tagTurquoise: primitiveColors.turquoise,
+  textPlaceholder: primitiveColors.grey400,
+  textPrimary: primitiveColors.grey800,
+  textSecondary: primitiveColors.grey600,
+  textValidationDanger: primitiveColors.red600,
+  textValidationSuccess: primitiveColors.green600,
+  textValidationWarning: primitiveColors.yellow600,
+  tooltipBackgroundTooltip: primitiveColors.grey800
 };
 
+// Currently these are the same for both light and dark mode, but we may want to change this in the future.
+const branded = {
+  /** For AI components, the top-oriented start color of gradient treatments. */
+  aiGradientStart: '#677FFD',
+  /** For AI components, the bottom-oriented end color of gradient treatments. */
+  aiGradientEnd: '#79BFF1'
+};
 const darkColors = {
   ...darkColorList,
-  ...colorPalettePrimary,
-  ...colorPaletteSecondary
+  ...primitiveColors,
+  branded
 };
 const lightColors = {
   ...lightColorList,
-  ...colorPalettePrimary,
-  ...colorPaletteSecondary
+  ...primitiveColors,
+  branded
 };
 function getSemanticColors(isDarkMode) {
-  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;
-  }
+  return isDarkMode ? darkColors : lightColors;
 }
 
-// TODO (FEINF-1674): Remove when removing USE_NEW_RADIO_STYLES
-/*
-Colors that need to be replaced by semantic colors.
- */
-const deprecatedColors = {
-  // Radio Colors
-  radioInteractiveAvailable: colorPalettePrimary.primary,
+// When deprecating a color, add it to this object with a comment explaining why it's deprecated and a link to a JIRA ticket.
+// Example: `@deprecated This color supports XXXX will be removed in an upcoming release (FEINF-1234).`
+const deprecatedPrimitiveColors = {
+  /** @deprecated This was an alias to `primitiveColors.blue600`, please use that instead.
+   * If possible, please use an appropriate semantic color, such as `actionPrimaryBackgroundDefault`. */
+  primary: primitiveColors.blue600,
+  /** @deprecated This was an alias to `primitiveColors.grey600`, please use that instead.
+   * If possible, please use an appropriate semantic color, such as `actionPrimaryBackgroundHover`. */
+  charcoal: primitiveColors.grey600,
+  /** @deprecated This color supports legacy radio styles and will be removed in an upcoming release (FEINF-1674). */
+  radioInteractiveAvailable: primitiveColors.blue600,
+  /** @deprecated This color supports legacy radio styles and will be removed in an upcoming release (FEINF-1674). */
   radioInteractiveHover: '#186099',
+  /** @deprecated This color supports legacy radio styles and will be removed in an upcoming release (FEINF-1674). */
   radioInteractivePress: '#0D4F85',
+  /** @deprecated This color supports legacy radio styles and will be removed in an upcoming release (FEINF-1674). */
   radioDisabled: '#A2AEB8',
+  /** @deprecated This color supports legacy radio styles and will be removed in an upcoming release (FEINF-1674). */
   radioDefaultBorder: '#64727D',
+  /** @deprecated This color supports legacy radio styles and will be removed in an upcoming release (FEINF-1674). */
   radioDefaultBackground: '#FFFFFF',
+  /** @deprecated This color supports legacy radio styles and will be removed in an upcoming release (FEINF-1674). */
   radioInteractiveHoverSecondary: 'rgba(34, 115, 181, 0.08)',
-  // Fade of Interactive Available
-  radioInteractivePressSecondary: 'rgba(34, 115, 181, 0.16)' // Fade of Interactive Available
+  /** @deprecated This color supports legacy radio styles and will be removed in an upcoming release (FEINF-1674). */
+  radioInteractivePressSecondary: 'rgba(34, 115, 181, 0.16)'
+};
+const deprecatedSemanticColorsLight = {
+  /** @deprecated Use `backgroundDanger` (FEINF-xxxx) */
+  backgroundValidationDanger: lightColorList.backgroundDanger,
+  /** @deprecated Use `backgroundSuccess` (FEINF-xxxx) */
+  backgroundValidationSuccess: lightColorList.backgroundSuccess,
+  /** @deprecated Use `backgroundWarning` (FEINF-xxxx) */
+  backgroundValidationWarning: lightColorList.backgroundWarning,
+  /** @deprecated Use `border` (FEINF-xxxx) */
+  borderDecorative: lightColorList.border,
+  /** @deprecated Use `borderDanger` (FEINF-xxxx) */
+  borderValidationDanger: lightColorList.borderDanger,
+  /** @deprecated Use `borderWarning` (FEINF-xxxx) */
+  borderValidationWarning: lightColorList.borderWarning,
+  /** @deprecated Use `tableBackgroundUnselectedHover` (FEINF-xxxx) */
+  tableRowHover: lightColorList.tableBackgroundUnselectedHover,
+  /** @deprecated Use `textSecondary` (FEINF-xxxx) */
+  textValidationInfo: lightColorList.textSecondary,
+  /** @deprecated Use `codeBackground` (FEINF-xxxx) */
+  typographyCodeBg: lightColorList.codeBackground
+};
+const deprecatedSemanticColorsDark = {
+  backgroundValidationDanger: darkColorList.backgroundDanger,
+  backgroundValidationSuccess: darkColorList.backgroundSuccess,
+  backgroundValidationWarning: darkColorList.backgroundWarning,
+  borderDecorative: darkColorList.border,
+  borderValidationDanger: darkColorList.borderDanger,
+  borderValidationWarning: darkColorList.borderWarning,
+  tableRowHover: darkColorList.tableBackgroundUnselectedHover,
+  textValidationInfo: darkColorList.textSecondary,
+  typographyCodeBg: darkColorList.codeBackground
 };
 
+// A static list of secondary colors; these are used as a limited palette of color options in component props, i.e. `color="lime"`.
+// TODO: We should split primitive colors into primary and secondary colors, and automatically generate this list.
 function getColors(isDarkMode) {
   return {
-    ...deprecatedColors,
+    ...deprecatedPrimitiveColors,
+    ...(isDarkMode ? deprecatedSemanticColorsDark : deprecatedSemanticColorsLight),
     ...getSemanticColors(isDarkMode)
   };
 }
 
-// eslint-disable-next-line import/no-anonymous-default-export
-var antdVars = {
-  // IMPORTANT: Do not read this directly from components. Use `React.useContext`.
-  'ant-prefix': 'du-bois'
-};
-
-const DEFAULT_SPACING_UNIT = 8;
-const MODAL_PADDING = 40;
-const spacing = {
-  xs: DEFAULT_SPACING_UNIT / 2,
-  sm: DEFAULT_SPACING_UNIT,
-  md: DEFAULT_SPACING_UNIT * 2,
-  lg: DEFAULT_SPACING_UNIT * 3
-};
-
-// Less variables that are used by AntD
-({
-  defaultPaddingLg: spacing.lg,
-  defaultPaddingMd: spacing.md,
-  defaultPaddingSm: spacing.sm,
-  defaultPaddingXs: spacing.sm,
-  defaultPaddingXss: spacing.xs,
-  paddingLg: spacing.md,
-  // TODO: Check if there is a better alternative with team
-  paddingMd: spacing.sm,
-  paddingSm: spacing.sm,
-  paddingXs: spacing.xs,
-  paddingXss: 0,
-  marginSm: 12,
-  marginLg: spacing.lg,
-  // Button
-  btnPaddingHorizontalBase: DEFAULT_SPACING_UNIT * 2,
-  btnPaddingHorizontalLg: DEFAULT_SPACING_UNIT * 2,
-  btnPaddingHorizontalSm: DEFAULT_SPACING_UNIT * 2,
-  // Input
-  inputPaddingHorizontal: DEFAULT_SPACING_UNIT * 1.5,
-  inputPaddingHorizontalBase: DEFAULT_SPACING_UNIT * 1.5,
-  inputPaddingHorizontalSm: DEFAULT_SPACING_UNIT * 1.5,
-  inputPaddingHorizontalLg: DEFAULT_SPACING_UNIT * 1.5,
-  inputPaddingVertical: spacing.xs + 1,
-  inputPaddingVerticalBase: spacing.xs + 1,
-  inputPaddingVerticalSm: spacing.xs + 1,
-  inputPaddingVerticalLg: spacing.xs + 1,
-  // Modal
-  modalPadding: MODAL_PADDING,
-  modalLessPadding: MODAL_PADDING - 20,
-  modalHeaderPadding: `${MODAL_PADDING}px ${MODAL_PADDING}px ${MODAL_PADDING - 20}px`,
-  modalHeaderCloseSize: MODAL_PADDING * 2 + 22,
-  modalHeaderBorderWidth: 0,
-  modalBodyPadding: `0 ${MODAL_PADDING}px`,
-  modalFooterPaddingVertical: 0,
-  modalFooterPaddingHorizontal: 0,
-  modalFooterBorderWidth: 0,
-  // Switch
-  switchPadding: 0,
-  switchHeight: 16,
-  switchMinWidth: 28,
-  switchPinSize: 14
-});
-var spacing$1 = spacing;
-
-const heightBase = 40;
-const borderWidth = 1;
-const antdGeneralVariables = {
-  classnamePrefix: antdVars['ant-prefix'],
-  iconfontCssPrefix: 'anticon',
-  borderRadiusBase: 4,
-  borderWidth: borderWidth,
-  heightSm: 32,
-  heightBase: heightBase,
-  iconSize: 24,
-  iconFontSize: 16,
-  buttonHeight: heightBase,
-  // Height available within button (for label and icon). Same for middle and small buttons.
-  buttonInnerHeight: heightBase - spacing$1.sm * 2 - borderWidth * 2
-};
-const getShadowVariables = isDarkMode => {
-  if (isDarkMode) {
-    return {
-      shadowLow: '0px 4px 16px rgba(0, 0, 0, 0.12)',
-      shadowHigh: '0px 8px 24px rgba(0, 0, 0, 0.2);'
-    };
-  } else {
-    return {
-      shadowLow: '0px 4px 16px rgba(31, 39, 45, 0.12)',
-      shadowHigh: '0px 8px 24px rgba(31, 39, 45, 0.2)'
-    };
-  }
-};
-var generalVariables = antdGeneralVariables;
-
 const FONT_SIZE_BASE = 13;
 
 // Less variables that are used by AntD
@@ -609,6 +834,7 @@ const antdTypography = {
   lineHeightLg: '24px',
   lineHeightXl: '28px',
   lineHeightXxl: '40px',
+  typographyRegularFontWeight: 400,
   typographyBoldFontWeight: 600
 };
 
@@ -630,7 +856,7 @@ function getTheme(isDarkMode) {
     colors: getColors(isDarkMode),
     spacing: spacing$1,
     general: {
-      ...generalVariables,
+      ...antdGeneralVariables,
       ...getShadowVariables(isDarkMode)
     },
     typography,
@@ -717,7 +943,6 @@ const DesignSystemThemeProvider = _ref => {
 };
 const DesignSystemProvider = _ref2 => {
   let {
-    isDarkMode: deprecatedDarkModeProp,
     children,
     enableAnimation = false,
     zIndexBase = 1000,
@@ -727,9 +952,8 @@ const DesignSystemProvider = _ref2 => {
     disableLegacyAntVirtualization = process.env.NODE_ENV === 'test' ? true : undefined
   } = _ref2;
   const {
-    isDarkMode: contextDarkModeVal
+    isDarkMode
   } = useContext(DesignSystemThemeContext);
-  const isDarkMode = deprecatedDarkModeProp !== null && deprecatedDarkModeProp !== void 0 ? deprecatedDarkModeProp : contextDarkModeVal;
   const theme = useMemo(() => getTheme(isDarkMode, {
     enableAnimation,
     zIndexBase
@@ -871,24 +1095,39 @@ function useDesignSystemFlags() {
   return context.flags;
 }
 
-const getIconEmotionStyles = theme => {
-  return /*#__PURE__*/css({
-    fontSize: theme.general.iconFontSize
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getIconEmotionStyles;");
-};
-const getIconValidationColor = (theme, color) => {
+const uniqueId = () => new Date().getTime() + Array(16).fill('').map(() => parseInt((Math.random() * 10).toString())).join('');
+function useUniqueId() {
+  let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return useState(() => `${prefix}-${uniqueId()}`)[0];
+}
+
+const getIconVariantStyles = (theme, linearGradientId, color) => {
   switch (color) {
     case 'success':
-      return theme.colors.textValidationSuccess;
+      return {
+        color: theme.colors.textValidationSuccess
+      };
     case 'warning':
-      return theme.colors.textValidationWarning;
+      return {
+        color: theme.colors.textValidationWarning
+      };
     case 'danger':
-      return theme.colors.textValidationDanger;
+      return {
+        color: theme.colors.textValidationDanger
+      };
+    case 'ai':
+      return {
+        'svg *': {
+          fill: `url(#${linearGradientId})`
+        }
+      };
     default:
-      return color;
+      return {
+        color: color
+      };
   }
 };
-const Icon = props => {
+const Icon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     component: Component,
     dangerouslySetAntdProps,
@@ -899,6 +1138,7 @@ const Icon = props => {
   const {
     theme
   } = useDesignSystemTheme();
+  const linearGradientId = useUniqueId('ai-linear-gradient');
   const MemoizedComponent = useMemo(() => Component ? _ref => {
     let {
       fill,
@@ -907,26 +1147,50 @@ const Icon = props => {
     return (
       // We don't rely on top-level fills for our colors. Fills are specified
       // with "currentColor" on children of the top-most svg.
-      jsx(Component, {
-        fill: "none",
-        ...iconProps
+      jsxs(Fragment, {
+        children: [jsx(Component, {
+          fill: "none",
+          ...iconProps
+        }), color === 'ai' && jsx("svg", {
+          width: "0",
+          height: "0",
+          viewBox: "0 0 0 0",
+          css: visuallyHidden,
+          children: jsx("defs", {
+            children: jsxs("linearGradient", {
+              id: linearGradientId,
+              x2: "100%",
+              y2: "100%",
+              children: [jsx("stop", {
+                offset: "0%",
+                stopColor: theme.colors.branded.aiGradientStart
+              }), jsx("stop", {
+                offset: "100%",
+                stopColor: theme.colors.branded.aiGradientEnd
+              })]
+            })
+          })
+        })]
       })
     );
-  } : undefined, [Component]);
+  } : undefined, [Component, color, linearGradientId, theme]);
   return jsx(DesignSystemAntDConfigProvider, {
     children: jsx(AntDIcon, {
+      ref: forwardedRef,
       "aria-hidden": "true",
-      css: getIconEmotionStyles(theme),
+      css: /*#__PURE__*/css({
+        fontSize: theme.general.iconFontSize,
+        ...getIconVariantStyles(theme, linearGradientId, color)
+      }, process.env.NODE_ENV === "production" ? "" : ";label:Icon;"),
       component: MemoizedComponent,
       style: {
-        color: getIconValidationColor(theme, color),
         ...style
       },
       ...otherProps,
       ...dangerouslySetAntdProps
     })
   });
-};
+});
 
 function SvgCheckIcon(props) {
   return jsx("svg", {
@@ -944,12 +1208,15 @@ function SvgCheckIcon(props) {
     })
   });
 }
-function CheckIcon(props) {
+const CheckIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   return jsx(Icon, {
+    ref: forwardedRef,
     ...props,
     component: SvgCheckIcon
   });
-}
+});
+CheckIcon.displayName = 'CheckIcon';
+var CheckIcon$1 = CheckIcon;
 
 function SvgChevronLeftIcon(props) {
   return jsx("svg", {
@@ -967,12 +1234,15 @@ function SvgChevronLeftIcon(props) {
     })
   });
 }
-function ChevronLeftIcon(props) {
+const ChevronLeftIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   return jsx(Icon, {
+    ref: forwardedRef,
     ...props,
     component: SvgChevronLeftIcon
   });
-}
+});
+ChevronLeftIcon.displayName = 'ChevronLeftIcon';
+var ChevronLeftIcon$1 = ChevronLeftIcon;
 
 function SvgChevronRightIcon(props) {
   return jsx("svg", {
@@ -990,12 +1260,15 @@ function SvgChevronRightIcon(props) {
     })
   });
 }
-function ChevronRightIcon(props) {
+const ChevronRightIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   return jsx(Icon, {
+    ref: forwardedRef,
     ...props,
     component: SvgChevronRightIcon
   });
-}
+});
+ChevronRightIcon.displayName = 'ChevronRightIcon';
+var ChevronRightIcon$1 = ChevronRightIcon;
 
 function SvgCloseIcon(props) {
   return jsx("svg", {
@@ -1013,12 +1286,15 @@ function SvgCloseIcon(props) {
     })
   });
 }
-function CloseIcon(props) {
+const CloseIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   return jsx(Icon, {
+    ref: forwardedRef,
     ...props,
     component: SvgCloseIcon
   });
-}
+});
+CloseIcon.displayName = 'CloseIcon';
+var CloseIcon$1 = CloseIcon;
 
 function SvgCursorIcon(props) {
   return jsxs("svg", {
@@ -1047,12 +1323,44 @@ function SvgCursorIcon(props) {
     })]
   });
 }
-function CursorIcon(props) {
+const CursorIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   return jsx(Icon, {
+    ref: forwardedRef,
     ...props,
     component: SvgCursorIcon
   });
+});
+CursorIcon.displayName = 'CursorIcon';
+var CursorIcon$1 = CursorIcon;
+
+function SvgDangerIcon(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.248 10.748a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0ZM8.748 4.998v4h-1.5v-4h1.5Z"
+    }), jsx("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "m11.533 15.776 4.243-4.243a.75.75 0 0 0 .22-.53v-6.01a.75.75 0 0 0-.22-.53L11.533.22a.75.75 0 0 0-.53-.22h-6.01a.75.75 0 0 0-.53.22L.22 4.462a.75.75 0 0 0-.22.53v6.011c0 .199.079.39.22.53l4.242 4.243c.141.14.332.22.53.22h6.011a.75.75 0 0 0 .53-.22Zm2.963-10.473v5.39l-3.804 3.803H5.303L1.5 10.692V5.303L5.303 1.5h5.39l3.803 3.803Z",
+      clipRule: "evenodd"
+    })]
+  });
 }
+const DangerIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return jsx(Icon, {
+    ref: forwardedRef,
+    ...props,
+    component: SvgDangerIcon
+  });
+});
+DangerIcon.displayName = 'DangerIcon';
+var DangerIcon$1 = DangerIcon;
 
 function SvgFaceFrownIcon(props) {
   return jsxs("svg", {
@@ -1083,12 +1391,15 @@ function SvgFaceFrownIcon(props) {
     })]
   });
 }
-function FaceFrownIcon(props) {
+const FaceFrownIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   return jsx(Icon, {
+    ref: forwardedRef,
     ...props,
     component: SvgFaceFrownIcon
   });
-}
+});
+FaceFrownIcon.displayName = 'FaceFrownIcon';
+var FaceFrownIcon$1 = FaceFrownIcon;
 
 function SvgFaceNeutralIcon(props) {
   return jsxs("svg", {
@@ -1119,12 +1430,15 @@ function SvgFaceNeutralIcon(props) {
     })]
   });
 }
-function FaceNeutralIcon(props) {
+const FaceNeutralIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   return jsx(Icon, {
+    ref: forwardedRef,
     ...props,
     component: SvgFaceNeutralIcon
   });
-}
+});
+FaceNeutralIcon.displayName = 'FaceNeutralIcon';
+var FaceNeutralIcon$1 = FaceNeutralIcon;
 
 function SvgFaceSmileIcon(props) {
   return jsxs("svg", {
@@ -1159,12 +1473,15 @@ function SvgFaceSmileIcon(props) {
     })]
   });
 }
-function FaceSmileIcon(props) {
+const FaceSmileIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   return jsx(Icon, {
+    ref: forwardedRef,
     ...props,
     component: SvgFaceSmileIcon
   });
-}
+});
+FaceSmileIcon.displayName = 'FaceSmileIcon';
+var FaceSmileIcon$1 = FaceSmileIcon;
 
 function SvgInfoIcon(props) {
   return jsxs("svg", {
@@ -1185,12 +1502,15 @@ function SvgInfoIcon(props) {
     })]
   });
 }
-function InfoIcon(props) {
+const InfoIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   return jsx(Icon, {
+    ref: forwardedRef,
     ...props,
     component: SvgInfoIcon
   });
-}
+});
+InfoIcon.displayName = 'InfoIcon';
+var InfoIcon$1 = InfoIcon;
 
 function SvgLoadingIcon(props) {
   return jsx("svg", {
@@ -1208,12 +1528,41 @@ function SvgLoadingIcon(props) {
     })
   });
 }
-function LoadingIcon(props) {
+const LoadingIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   return jsx(Icon, {
+    ref: forwardedRef,
     ...props,
     component: SvgLoadingIcon
   });
+});
+LoadingIcon.displayName = 'LoadingIcon';
+var LoadingIcon$1 = LoadingIcon;
+
+function SvgMegaphoneIcon(props) {
+  return jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 18 18",
+    ...props,
+    children: jsx("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M16.25 2a.75.75 0 0 0-1.248-.56l-4.287 3.81H4A2.75 2.75 0 0 0 1.25 8v2A2.75 2.75 0 0 0 4 12.75h1.75V16a.75.75 0 0 0 1.5 0v-3.25h3.465l4.287 3.81A.75.75 0 0 0 16.25 16V2Zm-4.752 4.56 3.252-2.89v10.66l-3.252-2.89a.75.75 0 0 0-.498-.19H4c-.69 0-1.25-.56-1.25-1.25V8c0-.69.56-1.25 1.25-1.25h7a.75.75 0 0 0 .498-.19Z",
+      clipRule: "evenodd"
+    })
+  });
 }
+const MegaphoneIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return jsx(Icon, {
+    ref: forwardedRef,
+    ...props,
+    component: SvgMegaphoneIcon
+  });
+});
+MegaphoneIcon.displayName = 'MegaphoneIcon';
+var MegaphoneIcon$1 = MegaphoneIcon;
 
 function SvgNewWindowIcon(props) {
   return jsxs("svg", {
@@ -1232,129 +1581,44 @@ function SvgNewWindowIcon(props) {
     })]
   });
 }
-function NewWindowIcon(props) {
+const NewWindowIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   return jsx(Icon, {
+    ref: forwardedRef,
     ...props,
     component: SvgNewWindowIcon
   });
-}
+});
+NewWindowIcon.displayName = 'NewWindowIcon';
+var NewWindowIcon$1 = NewWindowIcon;
 
-let sequentialCounter = 0;
-function useStableUid() {
-  return useMemo(() => sequentialCounter++, []);
+function SvgWarningIcon(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 10V6.5h1.5V10h-1.5ZM8 12.5A.75.75 0 1 0 8 11a.75.75 0 0 0 0 1.5Z"
+    }), jsx("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M8 1a.75.75 0 0 1 .649.374l7.25 12.5A.75.75 0 0 1 15.25 15H.75a.75.75 0 0 1-.649-1.126l7.25-12.5A.75.75 0 0 1 8 1Zm0 2.245L2.052 13.5h11.896L8 3.245Z",
+      clipRule: "evenodd"
+    })]
+  });
 }
-
-/** Props for UI components that support a "loading" state. */
-
-/**
- * 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.
- */
-
-const LoadingStateContext = /*#__PURE__*/createContext(null);
-/**
- * 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.
- */
-const LoadingState = _ref => {
-  let {
-    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 WarningIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return jsx(Icon, {
+    ref: forwardedRef,
+    ...props,
+    component: SvgWarningIcon
+  });
 });
-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
-        })
-      })]
-    })
-  );
-};
+WarningIcon.displayName = 'WarningIcon';
+var WarningIcon$1 = WarningIcon;
 
 function getDefaultStyles(theme) {
   let loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
@@ -1428,19 +1692,19 @@ function getPrimaryDangerStyles(theme) {
   const defaultStyles = {
     backgroundColor: theme.colors.actionDangerPrimaryBackgroundDefault,
     borderColor: 'transparent',
-    color: theme.colors.white
+    color: theme.colors.actionPrimaryTextDefault
   };
   return {
     ...defaultStyles,
     '&:hover': {
       backgroundColor: theme.colors.actionDangerPrimaryBackgroundHover,
       borderColor: 'transparent',
-      color: theme.colors.white
+      color: theme.colors.actionPrimaryTextHover
     },
     '&:active': {
       backgroundColor: theme.colors.actionDangerPrimaryBackgroundPress,
       borderColor: 'transparent',
-      color: theme.colors.white
+      color: theme.colors.actionPrimaryTextPress
     },
     '&:focus-visible': {
       outlineColor: theme.colors.actionDangerPrimaryBackgroundDefault
@@ -1511,66 +1775,318 @@ function getDisabledTertiaryStyles(theme) {
   };
 }
 
-function getEndIconClsName(theme) {
-  return `${theme.general.iconfontCssPrefix}-btn-end-icon`;
-}
-const getButtonEmotionStyles = _ref => {
+let DesignSystemEventProviderComponentTypes = /*#__PURE__*/function (DesignSystemEventProviderComponentTypes) {
+  DesignSystemEventProviderComponentTypes["Button"] = "button";
+  DesignSystemEventProviderComponentTypes["Input"] = "input";
+  return DesignSystemEventProviderComponentTypes;
+}({});
+let DesignSystemEventProviderAnalyticsEventTypes = /*#__PURE__*/function (DesignSystemEventProviderAnalyticsEventTypes) {
+  DesignSystemEventProviderAnalyticsEventTypes["OnClick"] = "onClick";
+  DesignSystemEventProviderAnalyticsEventTypes["OnView"] = "onView";
+  DesignSystemEventProviderAnalyticsEventTypes["OnValueChange"] = "onValueChange";
+  return DesignSystemEventProviderAnalyticsEventTypes;
+}({});
+const shouldTriggerCallback = (eventType, analyticsEvents) => {
+  return analyticsEvents.includes(eventType);
+};
+const DefaultEmptyCallbacks = {
+  callback: () => {}
+};
+const DesignSystemEventProviderContext = /*#__PURE__*/React__default.createContext(DefaultEmptyCallbacks);
+
+/**
+ * This gets the event provider, which is used to pass callbacks to the design system for events such as onClick, onView, and onValueChange.
+ * If the value is undefined, then the expected behavior is to not emit any events.
+ *
+ * @returns DesignSystemEventProviderContextType
+ */
+const useDesignSystemEventProviderContext = () => {
+  return useContext(DesignSystemEventProviderContext);
+};
+
+/**
+ * NOTE: This is not suggested for direct usage from engineers, and should emit your own events.
+ * See https://databricks.atlassian.net/wiki/spaces/UN/pages/2533556277/Usage+Logging+in+UI#Send-usage-logging-from-UI for more details.
+ *
+ * This gets the event provider component event type callbacks.
+ * If context & componentId are not undefined, then it will check if the event is in analyticsEvents or the default analyticsEvents for that component.
+ * If the context or componentId are undefined, then the expected behavior is to not emit any events.
+ *
+ * @returns Object of event callbacks
+ */
+const useDesignSystemEventComponentCallbacks = _ref => {
   let {
-    theme,
-    classNamePrefix,
-    loading,
-    withIcon,
-    onlyIcon,
-    isAnchor,
-    enableAnimation,
-    size,
-    type,
-    isFlex,
-    useFocusPseudoClass,
-    forceIconStyles
+    componentType,
+    componentId,
+    analyticsEvents
   } = _ref;
-  const clsIcon = `.${theme.general.iconfontCssPrefix}`;
-  const clsEndIcon = `.${getEndIconClsName(theme)}`;
-  const clsLoadingIcon = `.${classNamePrefix}-btn-loading-icon`;
-  const clsIconOnly = `.${classNamePrefix}-btn-icon-only`;
-  const classPrimary = `.${classNamePrefix}-btn-primary`;
-  const classLink = `.${classNamePrefix}-btn-link`;
-  const classDangerous = `.${classNamePrefix}-btn-dangerous`;
-  const SMALL_BUTTON_HEIGHT = 24;
-  const tertiaryColors = {
-    background: theme.colors.actionTertiaryBackgroundDefault,
-    color: theme.colors.actionTertiaryTextDefault,
-    '&:hover': {
-      background: theme.colors.actionTertiaryBackgroundHover,
-      color: theme.colors.actionTertiaryTextHover
-    },
-    '&:active': {
-      background: theme.colors.actionTertiaryBackgroundPress,
-      color: theme.colors.actionTertiaryTextPress
+  const context = useDesignSystemEventProviderContext();
+  const callbacks = useMemo(() => {
+    if (context === DefaultEmptyCallbacks || componentId === undefined) {
+      return {
+        onClick: () => {},
+        onValueChange: () => {},
+        onView: () => {}
+      };
     }
-  };
-  const iconCss = {
-    fontSize: theme.general.iconFontSize,
-    ...(!isFlex && {
-      // verticalAlign used by AntD to move icon and label to center
-      // TODO(schs): Try to move buttons to flexbox to solve this. Main problem is that flex-inline and inline-block
-      //  behave differently (vertically align of multiple buttons is off). See https://codepen.io/qfactor/pen/JXVzBe
-      verticalAlign: -4,
-      ...(onlyIcon && {
-        verticalAlign: -3
-      }),
-      // verticalAlign used by AntD to move icon and label to center
-      // TODO(schs): Try to move buttons to flexbox to solve this. Main problem is that flex-inline and inline-block
-      //  behave differently (vertically align of multiple buttons is off). See https://codepen.io/qfactor/pen/JXVzBe
-      // Need to make sure not to apply this to regular buttons as it will offset the icons
-      ...(!onlyIcon && {
-        verticalAlign: -3
-      })
-    }),
-    lineHeight: 0,
-    ...(size === 'small' && {
-      lineHeight: theme.typography.lineHeightSm,
-      ...((onlyIcon || forceIconStyles) && {
+    return {
+      onClick: () => {
+        if (shouldTriggerCallback(DesignSystemEventProviderAnalyticsEventTypes.OnClick, analyticsEvents)) {
+          context.callback(DesignSystemEventProviderAnalyticsEventTypes.OnClick, componentType, componentId);
+        }
+      },
+      onValueChange: () => {
+        if (shouldTriggerCallback(DesignSystemEventProviderAnalyticsEventTypes.OnValueChange, analyticsEvents)) {
+          context.callback(DesignSystemEventProviderAnalyticsEventTypes.OnValueChange, componentType, componentId);
+        }
+      },
+      onView: () => {
+        if (shouldTriggerCallback(DesignSystemEventProviderAnalyticsEventTypes.OnView, analyticsEvents)) {
+          context.callback(DesignSystemEventProviderAnalyticsEventTypes.OnView, componentType, componentId);
+        }
+      }
+    };
+  }, [context, componentType, componentId, analyticsEvents]);
+  return callbacks;
+};
+
+/**
+ * NOTE: This is not suggested for direct usage from engineers, and should use RecordEventContext instead.
+ * See https://databricks.atlassian.net/wiki/spaces/UN/pages/2533556277/Usage+Logging+in+UI#Send-usage-logging-from-UI for more details.
+ *
+ * This is the Design System Event Context Provider, and is only used to pass callbacks to the design system for events such as onClick, onView, and onValueChange.
+ *
+ * @param children Children react elements
+ * @param callback The event callback function
+ * @returns Design System Event Context Provider with the children inside
+ */
+function DesignSystemEventProvider(_ref2) {
+  let {
+    children,
+    callback
+  } = _ref2;
+  const contextValue = useMemo(() => {
+    return {
+      callback
+    };
+  }, [callback]);
+  return jsx(DesignSystemEventProviderContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+}
+
+// Use Symbol to correctly handled null/undefined as stable values
+const NOT_INITIALIZED = Symbol('NOT_INITIALIZED');
+
+/**
+ * Use to keep a stable value on the first mount of a component
+ * that cannot change.
+ */
+function useStable(valueCallback) {
+  const ref = useRef(NOT_INITIALIZED);
+  if (ref.current === NOT_INITIALIZED) {
+    const val = valueCallback();
+    ref.current = val;
+    return val;
+  }
+  return ref.current;
+}
+let sequentialCounter = 0;
+function useStableUid() {
+  return useStable(() => sequentialCounter++);
+}
+
+/** Props for UI components that support a "loading" state. */
+
+/**
+ * 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.
+ */
+
+const LoadingStateContext = /*#__PURE__*/createContext(null);
+/**
+ * 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.
+ */
+const LoadingState = _ref => {
+  let {
+    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$1, {
+          "aria-hidden": "false",
+          css: cssSpinner(theme, frameRate, delay, animationDuration, inheritColor),
+          className: className
+        })
+      })]
+    })
+  );
+};
+
+/**
+ * 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;
+  }
+};
+
+function getEndIconClsName(theme) {
+  return `${theme.general.iconfontCssPrefix}-btn-end-icon`;
+}
+const getButtonEmotionStyles = _ref => {
+  let {
+    theme,
+    classNamePrefix,
+    loading,
+    withIcon,
+    onlyIcon,
+    isAnchor,
+    enableAnimation,
+    size,
+    type,
+    isFlex,
+    useFocusPseudoClass,
+    forceIconStyles
+  } = _ref;
+  const clsIcon = `.${theme.general.iconfontCssPrefix}`;
+  const clsEndIcon = `.${getEndIconClsName(theme)}`;
+  const clsLoadingIcon = `.${classNamePrefix}-btn-loading-icon`;
+  const clsIconOnly = `.${classNamePrefix}-btn-icon-only`;
+  const classPrimary = `.${classNamePrefix}-btn-primary`;
+  const classLink = `.${classNamePrefix}-btn-link`;
+  const classDangerous = `.${classNamePrefix}-btn-dangerous`;
+  const SMALL_BUTTON_HEIGHT = 24;
+  const tertiaryColors = {
+    background: theme.colors.actionTertiaryBackgroundDefault,
+    color: theme.colors.actionTertiaryTextDefault,
+    '&:hover': {
+      background: theme.colors.actionTertiaryBackgroundHover,
+      color: theme.colors.actionTertiaryTextHover
+    },
+    '&:active': {
+      background: theme.colors.actionTertiaryBackgroundPress,
+      color: theme.colors.actionTertiaryTextPress
+    }
+  };
+  const iconCss = {
+    fontSize: theme.general.iconFontSize,
+    ...(!isFlex && {
+      // verticalAlign used by AntD to move icon and label to center
+      // TODO(schs): Try to move buttons to flexbox to solve this. Main problem is that flex-inline and inline-block
+      //  behave differently (vertically align of multiple buttons is off). See https://codepen.io/qfactor/pen/JXVzBe
+      verticalAlign: -4,
+      ...(onlyIcon && {
+        verticalAlign: -3
+      }),
+      // verticalAlign used by AntD to move icon and label to center
+      // TODO(schs): Try to move buttons to flexbox to solve this. Main problem is that flex-inline and inline-block
+      //  behave differently (vertically align of multiple buttons is off). See https://codepen.io/qfactor/pen/JXVzBe
+      // Need to make sure not to apply this to regular buttons as it will offset the icons
+      ...(!onlyIcon && {
+        verticalAlign: -3
+      })
+    }),
+    lineHeight: 0,
+    ...(size === 'small' && {
+      lineHeight: theme.typography.lineHeightSm,
+      ...((onlyIcon || forceIconStyles) && {
         fontSize: 16,
         ...(isFlex && {
           height: 16
@@ -1821,6 +2337,8 @@ const Button = /* #__PURE__ */(() => {
       dangerouslySetForceIconStyles,
       dangerouslyUseFocusPseudoClass,
       dangerouslyAppendWrapperCss,
+      componentId,
+      analyticsEvents,
       ...props
     } = _ref2;
     const {
@@ -1828,8 +2346,15 @@ const Button = /* #__PURE__ */(() => {
       classNamePrefix
     } = useDesignSystemTheme();
     const {
-      USE_FLEX_BUTTON: isFlex
+      USE_FLEX_BUTTON: flexOverride
     } = useDesignSystemFlags();
+    const eventContext = useDesignSystemEventComponentCallbacks({
+      componentType: DesignSystemEventProviderComponentTypes.Button,
+      componentId,
+      analyticsEvents: analyticsEvents !== null && analyticsEvents !== void 0 ? analyticsEvents : [DesignSystemEventProviderAnalyticsEventTypes.OnClick]
+    });
+    const flexSafex = safex('databricks.fe.designsystem.useFlexButtonStyles', false);
+    const isFlex = flexOverride || flexSafex;
     const clsEndIcon = getEndIconClsName(theme);
     const loadingCls = `${classNamePrefix}-btn-loading-icon`;
     const buttonRef = useRef(null);
@@ -1852,7 +2377,8 @@ const Button = /* #__PURE__ */(() => {
       if (loading) {
         return;
       }
-      onClick === null || onClick === void 0 ? void 0 : onClick(event);
+      eventContext.onClick();
+      onClick === null || onClick === void 0 || onClick(event);
     };
     const loadingSpinner = jsx(Spinner, {
       className: loadingCls,
@@ -1930,746 +2456,710 @@ const Button = /* #__PURE__ */(() => {
   return Button;
 })();
 
-function useUniqueId(prefix) {
-  return useMemo(() => _uniqueId(prefix), [prefix]);
+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;");
 }
-
-const Tooltip = _ref => {
-  let {
-    children,
-    title,
-    placement = 'top',
-    dataTestId,
+function Hint(userProps) {
+  const {
     dangerouslySetAntdProps,
-    silenceScreenReader = false,
-    useAsLabel = false,
+    bold,
+    withoutMargins,
+    color,
     ...props
-  } = _ref;
+  } = userProps;
   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,
+    children: jsx(AntDText$1, {
       ...props,
-      children: childWithProps
+      css: getTextEmotionStyles$1(theme, userProps),
+      ...dangerouslySetAntdProps
     })
   });
-};
+}
 
-const getInputEmotionStyles = (clsPrefix, theme, _ref, useTransparent) => {
-  let {
-    validationState
-  } = _ref;
-  const inputClass = `.${clsPrefix}-input`;
-  const affixClass = `.${clsPrefix}-input-affix-wrapper`;
-  const affixClassFocused = `.${clsPrefix}-input-affix-wrapper-focused`;
-  const clearIcon = `.${clsPrefix}-input-clear-icon`;
-  const prefixIcon = `.${clsPrefix}-input-prefix`;
-  const suffixIcon = `.${clsPrefix}-input-suffix`;
-  const validationColor = getValidationStateColor(theme, validationState);
+const getLinkStyles = (theme, clsPrefix) => {
+  const classTypography = `.${clsPrefix}-typography`;
   const styles = {
-    '&&': {
-      lineHeight: theme.typography.lineHeightBase,
-      minHeight: theme.general.heightSm,
-      ...(validationState && {
-        borderColor: validationColor
-      }),
-      '&:hover': {
-        borderColor: validationState ? validationColor : theme.colors.actionPrimaryBackgroundHover
-      },
-      '&:focus': {
-        outlineColor: validationState ? validationColor : theme.colors.actionPrimaryBackgroundDefault,
-        outlineWidth: 2,
-        outlineOffset: -2,
-        outlineStyle: 'solid',
-        boxShadow: 'none',
-        borderColor: 'transparent'
-      },
-      '&:disabled': {
-        backgroundColor: theme.colors.actionDisabledBackground,
-        color: theme.colors.actionDisabledText
-      },
-      '&::placeholder': {
-        color: theme.colors.textPlaceholder
-      }
-    },
-    [`&${inputClass}, ${inputClass}`]: {
-      ...(useTransparent && {
-        backgroundColor: 'transparent'
-      })
-    },
-    [`&${affixClass}`]: {
-      ...(useTransparent && {
-        backgroundColor: 'transparent'
-      }),
-      lineHeight: theme.typography.lineHeightBase,
-      paddingTop: 5,
-      paddingBottom: 5,
-      minHeight: theme.general.heightSm,
-      '::before': {
-        lineHeight: theme.typography.lineHeightBase
-      },
-      '&:hover': {
-        borderColor: theme.colors.actionPrimaryBackgroundHover
-      },
-      [`input.${clsPrefix}-input`]: {
-        borderRadius: 0
-      }
-    },
-    [`&${affixClassFocused}`]: {
-      boxShadow: 'none',
-      '&&, &:focus': {
-        outlineColor: theme.colors.actionPrimaryBackgroundDefault,
-        outlineWidth: 2,
-        outlineOffset: -2,
-        outlineStyle: 'solid',
-        boxShadow: 'none',
-        borderColor: 'transparent'
-      }
+    [`&${classTypography}, &${classTypography}:focus`]: {
+      color: theme.colors.actionTertiaryTextDefault
     },
-    [clearIcon]: {
-      fontSize: theme.general.iconFontSize
+    [`&${classTypography}:hover, &${classTypography}:hover .anticon`]: {
+      color: theme.colors.actionTertiaryTextHover,
+      textDecoration: 'underline'
     },
-    [prefixIcon]: {
-      marginRight: theme.spacing.sm,
-      color: theme.colors.textSecondary
+    [`&${classTypography}:active, &${classTypography}:active .anticon`]: {
+      color: theme.colors.actionTertiaryTextPress,
+      textDecoration: 'underline'
     },
-    [suffixIcon]: {
-      marginLeft: theme.spacing.sm,
-      color: theme.colors.textSecondary
+    [`&${classTypography}:focus-visible`]: {
+      textDecoration: 'underline'
     },
-    ...getAnimationCss(theme.options.enableAnimation)
+    '.anticon': {
+      fontSize: 12,
+      verticalAlign: 'baseline'
+    }
   };
-  return /*#__PURE__*/css(importantify(styles), process.env.NODE_ENV === "production" ? "" : ";label:getInputEmotionStyles;");
+  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getLinkStyles;");
 };
-const getInputGroupStyling = (clsPrefix, theme) => {
-  const inputClass = `.${clsPrefix}-input`;
-  const buttonClass = `.${clsPrefix}-btn`;
-  return /*#__PURE__*/css({
-    display: 'inline-flex !important',
-    width: 'auto',
-    [`& > ${inputClass}`]: {
-      flexGrow: 1,
-      '&:disabled': {
-        border: 'none',
-        '&:hover': {
-          borderRight: `1px solid ${theme.colors.actionDisabledText} !important`
-        }
-      }
-    },
-    [`& > ${buttonClass} > span`]: {
-      verticalAlign: 'middle'
-    },
-    [`& > ${buttonClass}:disabled, & > ${buttonClass}:disabled:hover`]: {
-      borderLeft: `1px solid ${theme.colors.actionDisabledText} !important`
-    }
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getInputGroupStyling;");
+const getEllipsisNewTabLinkStyles = () => {
+  const styles = {
+    paddingRight: 'calc(2px + 1em)',
+    // 1em for icon
+    position: 'relative'
+  };
+  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getEllipsisNewTabLinkStyles;");
 };
-const TextArea = /*#__PURE__*/forwardRef(function TextArea(_ref2, ref) {
+const getIconStyles = theme => {
+  const styles = {
+    marginLeft: 2,
+    color: theme.colors.actionTertiaryTextDefault
+  };
+  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getIconStyles;");
+};
+const getEllipsisIconStyles = useNewIcons => {
+  const styles = {
+    position: 'absolute',
+    right: 0,
+    bottom: 0,
+    top: 0,
+    display: 'flex',
+    alignItems: 'center',
+    ...(useNewIcons && {
+      fontSize: 12
+    })
+  };
+  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getEllipsisIconStyles;");
+};
+const Link = /*#__PURE__*/forwardRef(function Link(_ref, ref) {
   let {
-    validationState,
-    autoComplete = 'off',
     dangerouslySetAntdProps,
-    dangerouslyAppendEmotionCSS,
     ...props
-  } = _ref2;
+  } = _ref;
   const {
-    classNamePrefix,
-    theme
-  } = useDesignSystemTheme();
+    children,
+    openInNewTab,
+    ...restProps
+  } = props;
   const {
-    USE_TRANSPARENT_INPUT: useTransparent
-  } = useDesignSystemFlags();
+    theme,
+    classNamePrefix
+  } = useDesignSystemTheme();
+  const newTabProps = {
+    rel: 'noopener noreferrer',
+    target: '_blank'
+  };
+  const linkProps = openInNewTab ? {
+    ...restProps,
+    ...newTabProps
+  } : {
+    ...restProps
+  };
+  const linkStyles = props.ellipsis && openInNewTab ? [getLinkStyles(theme, classNamePrefix), getEllipsisNewTabLinkStyles()] : getLinkStyles(theme, classNamePrefix);
+  const iconStyles = props.ellipsis ? [getIconStyles(theme), getEllipsisIconStyles()] : getIconStyles(theme);
   return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(Input$1.TextArea, {
+    children: jsxs(Typography$1.Link, {
+      "aria-disabled": linkProps.disabled,
+      css: linkStyles,
       ref: ref,
-      autoComplete: autoComplete,
-      css: [getInputEmotionStyles(classNamePrefix, theme, {
-        validationState
-      }, useTransparent), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:TextArea;"],
-      ...props,
-      ...dangerouslySetAntdProps
+      ...linkProps,
+      ...dangerouslySetAntdProps,
+      children: [children, openInNewTab ? jsx(NewWindowIcon$1, {
+        css: iconStyles,
+        ...newTabProps
+      }) : null]
     })
   });
 });
-const Password = /*#__PURE__*/forwardRef(function Password(_ref3, ref) {
-  let {
-    validationState,
-    autoComplete = 'off',
-    dangerouslySetAntdProps,
-    dangerouslyAppendEmotionCSS,
-    ...props
-  } = _ref3;
-  const {
-    classNamePrefix,
-    theme
-  } = useDesignSystemTheme();
+
+const {
+  Paragraph: AntDParagraph
+} = Typography$1;
+function getParagraphEmotionStyles(theme, props) {
+  return /*#__PURE__*/css({
+    '&&': {
+      fontSize: theme.typography.fontSizeBase,
+      fontWeight: theme.typography.typographyRegularFontWeight,
+      lineHeight: theme.typography.lineHeightBase,
+      color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
+    },
+    '& .anticon': {
+      verticalAlign: 'text-bottom'
+    }
+  }, props.disabled && {
+    '&&': {
+      color: theme.colors.actionDisabledText
+    }
+  }, props.withoutMargins && {
+    '&&': {
+      marginTop: 0,
+      marginBottom: 0
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getParagraphEmotionStyles;");
+}
+function Paragraph(userProps) {
   const {
-    USE_TRANSPARENT_INPUT: useTransparent
-  } = useDesignSystemFlags();
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(Input$1.Password, {
-      visibilityToggle: false,
-      ref: ref,
-      autoComplete: autoComplete,
-      css: [getInputEmotionStyles(classNamePrefix, theme, {
-        validationState
-      }, useTransparent), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Password;"],
-      ...props,
-      ...dangerouslySetAntdProps
-    })
-  });
-});
-const DuboisInput = /*#__PURE__*/forwardRef(function Input(_ref4, ref) {
-  let {
-    validationState,
-    autoComplete = 'off',
     dangerouslySetAntdProps,
-    dangerouslyAppendEmotionCSS,
-    onChange,
-    onClear,
+    withoutMargins,
+    color,
     ...props
-  } = _ref4;
+  } = userProps;
   const {
-    classNamePrefix,
     theme
   } = useDesignSystemTheme();
-  const {
-    USE_TRANSPARENT_INPUT: useTransparent
-  } = useDesignSystemFlags();
-  const handleChange = e => {
-    // If the input is cleared, call the onClear handler, but only
-    // if the event is not an input event -- which is the case when you click the
-    // ant-provided (X) button.
-    if (!e.target.value && e.nativeEvent instanceof InputEvent === false && onClear) {
-      onClear === null || onClear === void 0 ? void 0 : onClear();
-    } else {
-      onChange === null || onChange === void 0 ? void 0 : onChange(e);
-    }
-  };
   return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(Input$1, {
-      autoComplete: autoComplete,
-      ref: ref,
-      css: [getInputEmotionStyles(classNamePrefix, theme, {
-        validationState
-      }, useTransparent), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:DuboisInput;"],
-      onChange: handleChange,
+    children: jsx(AntDParagraph, {
       ...props,
+      className: props.className,
+      css: getParagraphEmotionStyles(theme, userProps),
       ...dangerouslySetAntdProps
     })
   });
-});
-const Group$1 = _ref5 => {
-  let {
+}
+
+const {
+  Text: AntDText
+} = Typography$1;
+function getTextEmotionStyles(theme, props) {
+  return /*#__PURE__*/css({
+    '&&': {
+      fontSize: theme.typography.fontSizeBase,
+      fontWeight: theme.typography.typographyRegularFontWeight,
+      lineHeight: theme.typography.lineHeightBase,
+      color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
+    }
+  }, props.disabled && {
+    '&&': {
+      color: theme.colors.actionDisabledText
+    }
+  }, props.hint && {
+    '&&': {
+      fontSize: theme.typography.fontSizeSm,
+      lineHeight: theme.typography.lineHeightSm
+    }
+  }, props.bold && {
+    '&&': {
+      fontSize: theme.typography.fontSizeBase,
+      fontWeight: theme.typography.typographyBoldFontWeight,
+      lineHeight: theme.typography.lineHeightBase
+    }
+  }, props.code && {
+    '&& > code': {
+      color: theme.colors.textPrimary,
+      fontSize: theme.typography.fontSizeBase,
+      lineHeight: theme.typography.lineHeightBase,
+      background: theme.colors.typographyCodeBg,
+      fontFamily: 'monospace',
+      borderRadius: theme.borders.borderRadiusMd,
+      padding: '2px 4px',
+      border: 'unset',
+      margin: 0
+    }
+  }, props.size && {
+    '&&': (() => {
+      switch (props.size) {
+        case 'xxl':
+          return {
+            fontSize: theme.typography.fontSizeXxl,
+            lineHeight: theme.typography.lineHeightXxl,
+            '& .anticon': {
+              lineHeight: theme.typography.lineHeightXxl,
+              verticalAlign: 'middle'
+            }
+          };
+        case 'xl':
+          return {
+            fontSize: theme.typography.fontSizeXl,
+            lineHeight: theme.typography.lineHeightXl,
+            '& .anticon': {
+              lineHeight: theme.typography.lineHeightXl,
+              verticalAlign: 'middle'
+            }
+          };
+        case 'lg':
+          return {
+            fontSize: theme.typography.fontSizeLg,
+            lineHeight: theme.typography.lineHeightLg,
+            '& .anticon': {
+              lineHeight: theme.typography.lineHeightLg,
+              verticalAlign: 'middle'
+            }
+          };
+        case 'sm':
+          return {
+            fontSize: theme.typography.fontSizeSm,
+            lineHeight: theme.typography.lineHeightSm,
+            '& .anticon': {
+              verticalAlign: '-0.219em'
+            }
+          };
+        default:
+          return {};
+      }
+    })()
+  }, props.withoutMargins && {
+    '&&': {
+      marginTop: 0,
+      marginBottom: 0
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getTextEmotionStyles;");
+}
+function Text(userProps) {
+  // Omit props that are not supported by `antd`
+  const {
     dangerouslySetAntdProps,
-    dangerouslyAppendEmotionCSS,
-    compact = true,
+    bold,
+    hint,
+    withoutMargins,
+    color,
     ...props
-  } = _ref5;
+  } = userProps;
   const {
-    classNamePrefix,
     theme
   } = useDesignSystemTheme();
   return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(Input$1.Group, {
-      css: [getInputGroupStyling(classNamePrefix, theme), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Group;"],
-      compact: compact,
+    children: jsx(AntDText, {
       ...props,
+      className: props.className,
+      css: getTextEmotionStyles(theme, userProps),
       ...dangerouslySetAntdProps
     })
   });
-};
-
-// Properly creates the namespace and dot-notation components with correct types.
-const InputNamespace = /* #__PURE__ */Object.assign(DuboisInput, {
-  TextArea,
-  Password,
-  Group: Group$1
-});
-const Input = InputNamespace;
-
-// TODO: I'm doing this to support storybook's docgen;
-// We should remove this once we have a better storybook integration,
-// 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$1;
+}
 
 const {
-  Text: AntDText$1
+  Title: AntDTitle
 } = 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 && {
+function getLevelStyles(theme, props) {
+  switch (props.level) {
+    case 1:
+      return /*#__PURE__*/css({
         '&&': {
-          marginTop: 0,
-          marginBottom: 0
+          fontSize: theme.typography.fontSizeXxl,
+          lineHeight: theme.typography.lineHeightXxl,
+          fontWeight: theme.typography.typographyBoldFontWeight
+        },
+        '& > .anticon': {
+          lineHeight: theme.typography.lineHeightXxl
         }
-      })
+      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
+    case 2:
+      return /*#__PURE__*/css({
+        '&&': {
+          fontSize: theme.typography.fontSizeXl,
+          lineHeight: theme.typography.lineHeightXl,
+          fontWeight: theme.typography.typographyBoldFontWeight
+        },
+        '& > .anticon': {
+          lineHeight: theme.typography.lineHeightXl
+        }
+      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
+    case 3:
+      return /*#__PURE__*/css({
+        '&&': {
+          fontSize: theme.typography.fontSizeLg,
+          lineHeight: theme.typography.lineHeightLg,
+          fontWeight: theme.typography.typographyBoldFontWeight
+        },
+        '& > .anticon': {
+          lineHeight: theme.typography.lineHeightLg
+        }
+      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
+    case 4:
+    default:
+      return /*#__PURE__*/css({
+        '&&': {
+          fontSize: theme.typography.fontSizeMd,
+          lineHeight: theme.typography.lineHeightMd,
+          fontWeight: theme.typography.typographyBoldFontWeight
+        },
+        '& > .anticon': {
+          lineHeight: theme.typography.lineHeightMd
+        }
+      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
+  }
+}
+function getTitleEmotionStyles(theme, props) {
+  return /*#__PURE__*/css(getLevelStyles(theme, props), {
+    '&&': {
+      color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
+    },
+    '& > .anticon': {
+      verticalAlign: 'middle'
     }
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getTextEmotionStyles;");
+  }, props.withoutMargins && {
+    '&&': {
+      marginTop: '0 !important',
+      // override general styling
+      marginBottom: '0 !important' // override general styling
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getTitleEmotionStyles;");
 }
-function Hint(userProps) {
+function Title(userProps) {
   const {
     dangerouslySetAntdProps,
-    bold,
     withoutMargins,
     color,
     ...props
-  } = userProps;
+  } = userProps;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(AntDTitle, {
+      ...props,
+      className: props.className,
+      css: getTitleEmotionStyles(theme, userProps),
+      ...dangerouslySetAntdProps
+    })
+  });
+}
+
+const Typography = /* #__PURE__ */(() => {
+  function Typography(_ref) {
+    let {
+      dangerouslySetAntdProps,
+      ...props
+    } = _ref;
+    return jsx(DesignSystemAntDConfigProvider, {
+      children: jsx(Typography$1, {
+        ...props,
+        ...dangerouslySetAntdProps
+      })
+    });
+  }
+  Typography.Text = Text;
+  Typography.Title = Title;
+  Typography.Paragraph = Paragraph;
+  Typography.Link = Link;
+  Typography.Hint = Hint;
+  return Typography;
+})();
+
+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(AntDText$1, {
+    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,
+        ...getDarkModePortalStyles(theme)
+      },
+      overlayStyle: {
+        zIndex: theme.options.zIndexBase + 70,
+        ...overlayStyle
+      },
+      css: /*#__PURE__*/css({
+        ...getAnimationCss(theme.options.enableAnimation)
+      }, process.env.NODE_ENV === "production" ? "" : ";label:Tooltip;"),
+      ...delegatedDangerouslySetAntdProps,
       ...props,
-      css: getTextEmotionStyles$1(theme, userProps),
-      ...dangerouslySetAntdProps
+      children: childWithProps
     })
   });
-}
+};
 
-const getLinkStyles = (theme, clsPrefix) => {
-  const centerIcons = safex('databricks.fe.designsystem.centerIconsInText', false);
-  const classTypography = `.${clsPrefix}-typography`;
-  const styles = {
-    [`&${classTypography}, &${classTypography}:focus`]: {
-      color: theme.colors.actionTertiaryTextDefault
-    },
-    [`&${classTypography}:hover, &${classTypography}:hover .anticon`]: {
-      color: theme.colors.actionTertiaryTextHover,
-      textDecoration: 'underline'
-    },
-    [`&${classTypography}:active, &${classTypography}:active .anticon`]: {
-      color: theme.colors.actionTertiaryTextPress,
-      textDecoration: 'underline'
+const getInputGroupStyling = (clsPrefix, theme) => {
+  const inputClass = `.${clsPrefix}-input`;
+  const buttonClass = `.${clsPrefix}-btn`;
+  return /*#__PURE__*/css({
+    display: 'inline-flex !important',
+    width: 'auto',
+    [`& > ${inputClass}`]: {
+      flexGrow: 1,
+      '&:disabled': {
+        border: 'none',
+        '&:hover': {
+          borderRight: `1px solid ${theme.colors.actionDisabledText} !important`
+        }
+      }
     },
-    [`&${classTypography}:focus-visible`]: {
-      textDecoration: 'underline'
+    [`& > ${buttonClass} > span`]: {
+      verticalAlign: 'middle'
     },
-    '.anticon': {
-      fontSize: 12,
-      ...(centerIcons ? {
-        verticalAlign: 'baseline'
-      } : {})
+    [`& > ${buttonClass}:disabled, & > ${buttonClass}:disabled:hover`]: {
+      borderLeft: `1px solid ${theme.colors.actionDisabledText} !important`
     }
-  };
-  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getLinkStyles;");
-};
-const getEllipsisNewTabLinkStyles = () => {
-  const styles = {
-    paddingRight: 'calc(2px + 1em)',
-    // 1em for icon
-    position: 'relative'
-  };
-  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getEllipsisNewTabLinkStyles;");
-};
-const getIconStyles = theme => {
-  const styles = {
-    marginLeft: 2,
-    color: theme.colors.actionTertiaryTextDefault
-  };
-  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getIconStyles;");
-};
-const getEllipsisIconStyles = useNewIcons => {
-  const styles = {
-    position: 'absolute',
-    right: 0,
-    bottom: 0,
-    top: 0,
-    display: 'flex',
-    alignItems: 'center',
-    ...(useNewIcons && {
-      fontSize: 12
-    })
-  };
-  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getEllipsisIconStyles;");
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getInputGroupStyling;");
 };
-function Link(_ref) {
+const Group$1 = _ref => {
   let {
     dangerouslySetAntdProps,
+    dangerouslyAppendEmotionCSS,
+    compact = true,
     ...props
   } = _ref;
   const {
-    children,
-    openInNewTab,
-    ...restProps
-  } = props;
-  const {
-    theme,
-    classNamePrefix
+    classNamePrefix,
+    theme
   } = useDesignSystemTheme();
-  const newTabProps = {
-    rel: 'noopener noreferrer',
-    target: '_blank'
-  };
-  const linkProps = openInNewTab ? {
-    ...restProps,
-    ...newTabProps
-  } : {
-    ...restProps
-  };
-  const linkStyles = props.ellipsis && openInNewTab ? [getLinkStyles(theme, classNamePrefix), getEllipsisNewTabLinkStyles()] : getLinkStyles(theme, classNamePrefix);
-  const iconStyles = props.ellipsis ? [getIconStyles(theme), getEllipsisIconStyles()] : getIconStyles(theme);
   return jsx(DesignSystemAntDConfigProvider, {
-    children: jsxs(Typography$1.Link, {
-      "aria-disabled": linkProps.disabled,
-      css: linkStyles,
-      ...linkProps,
-      ...dangerouslySetAntdProps,
-      children: [children, openInNewTab ? jsx(NewWindowIcon, {
-        css: iconStyles,
-        ...newTabProps
-      }) : null]
+    children: jsx(Input$2.Group, {
+      css: [getInputGroupStyling(classNamePrefix, theme), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Group;"],
+      compact: compact,
+      ...props,
+      ...dangerouslySetAntdProps
     })
   });
-}
+};
 
-const {
-  Paragraph: AntDParagraph
-} = Typography$1;
-function getParagraphEmotionStyles(theme, props) {
-  const centerIcons = safex('databricks.fe.designsystem.centerIconsInText', false);
-  return /*#__PURE__*/css({
+const getInputEmotionStyles = (clsPrefix, theme, _ref, useTransparent) => {
+  let {
+    validationState
+  } = _ref;
+  const inputClass = `.${clsPrefix}-input`;
+  const affixClass = `.${clsPrefix}-input-affix-wrapper`;
+  const affixClassFocused = `.${clsPrefix}-input-affix-wrapper-focused`;
+  const clearIcon = `.${clsPrefix}-input-clear-icon`;
+  const prefixIcon = `.${clsPrefix}-input-prefix`;
+  const suffixIcon = `.${clsPrefix}-input-suffix`;
+  const validationColor = getValidationStateColor(theme, validationState);
+  const styles = {
     '&&': {
-      fontSize: theme.typography.fontSizeBase,
       lineHeight: theme.typography.lineHeightBase,
-      color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
+      minHeight: theme.general.heightSm,
+      ...(validationState && {
+        borderColor: validationColor
+      }),
+      '&:hover': {
+        borderColor: validationState ? validationColor : theme.colors.actionPrimaryBackgroundHover
+      },
+      '&:focus': {
+        outlineColor: validationState ? validationColor : theme.colors.actionPrimaryBackgroundDefault,
+        outlineWidth: 2,
+        outlineOffset: -2,
+        outlineStyle: 'solid',
+        boxShadow: 'none',
+        borderColor: 'transparent'
+      },
+      '&:disabled': {
+        backgroundColor: theme.colors.actionDisabledBackground,
+        color: theme.colors.actionDisabledText
+      },
+      '&::placeholder': {
+        color: theme.colors.textPlaceholder
+      }
+    },
+    [`&${inputClass}, ${inputClass}`]: {
+      ...(useTransparent && {
+        backgroundColor: 'transparent'
+      })
+    },
+    [`&${affixClass}`]: {
+      ...(useTransparent && {
+        backgroundColor: 'transparent'
+      }),
+      lineHeight: theme.typography.lineHeightBase,
+      paddingTop: 5,
+      paddingBottom: 5,
+      minHeight: theme.general.heightSm,
+      '::before': {
+        lineHeight: theme.typography.lineHeightBase
+      },
+      '&:hover': {
+        borderColor: theme.colors.actionPrimaryBackgroundHover
+      },
+      [`input.${clsPrefix}-input`]: {
+        borderRadius: 0
+      }
     },
-    ...(centerIcons && {
-      '& .anticon': {
-        verticalAlign: 'text-bottom'
+    [`&${affixClassFocused}`]: {
+      boxShadow: 'none',
+      '&&, &:focus': {
+        outlineColor: theme.colors.actionPrimaryBackgroundDefault,
+        outlineWidth: 2,
+        outlineOffset: -2,
+        outlineStyle: 'solid',
+        boxShadow: 'none',
+        borderColor: 'transparent'
       }
-    })
-  }, props.disabled && {
-    '&&': {
-      color: theme.colors.actionDisabledText
-    }
-  }, props.withoutMargins && {
-    '&&': {
-      marginTop: 0,
-      marginBottom: 0
-    }
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getParagraphEmotionStyles;");
-}
-function Paragraph(userProps) {
-  const {
+    },
+    [clearIcon]: {
+      fontSize: theme.typography.fontSizeSm
+    },
+    [prefixIcon]: {
+      marginRight: theme.spacing.sm,
+      color: theme.colors.textSecondary
+    },
+    [suffixIcon]: {
+      marginLeft: theme.spacing.sm,
+      color: theme.colors.textSecondary
+    },
+    ...getAnimationCss(theme.options.enableAnimation)
+  };
+  return /*#__PURE__*/css(importantify(styles), process.env.NODE_ENV === "production" ? "" : ";label:getInputEmotionStyles;");
+};
+const Input$1 = /*#__PURE__*/forwardRef(function Input(_ref2, ref) {
+  let {
+    validationState,
+    autoComplete = 'off',
     dangerouslySetAntdProps,
-    withoutMargins,
-    color,
+    dangerouslyAppendEmotionCSS,
+    onChange,
+    onClear,
     ...props
-  } = userProps;
+  } = _ref2;
   const {
+    classNamePrefix,
     theme
   } = useDesignSystemTheme();
+  const useTransparent = safex('databricks.fe.designsystem.useTransparentInput', false);
+  const handleChange = e => {
+    // If the input is cleared, call the onClear handler, but only
+    // if the event is not an input event -- which is the case when you click the
+    // ant-provided (X) button.
+    if (!e.target.value && e.nativeEvent instanceof InputEvent === false && onClear) {
+      onClear === null || onClear === void 0 || onClear();
+    } else {
+      onChange === null || onChange === void 0 || onChange(e);
+    }
+  };
   return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(AntDParagraph, {
+    children: jsx(Input$2, {
+      autoComplete: autoComplete,
+      ref: ref,
+      css: [getInputEmotionStyles(classNamePrefix, theme, {
+        validationState
+      }, useTransparent), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Input;"],
+      onChange: handleChange,
       ...props,
-      className: props.className,
-      css: getParagraphEmotionStyles(theme, userProps),
       ...dangerouslySetAntdProps
     })
   });
-}
+});
 
-const {
-  Text: AntDText
-} = Typography$1;
-function getTextEmotionStyles(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)
-    }
-  }, props.disabled && {
-    '&&': {
-      color: theme.colors.actionDisabledText
-    }
-  }, props.hint && {
-    '&&': {
-      fontSize: theme.typography.fontSizeSm,
-      lineHeight: theme.typography.lineHeightSm
-    }
-  }, props.bold && {
-    '&&': {
-      fontSize: theme.typography.fontSizeBase,
-      fontWeight: theme.typography.typographyBoldFontWeight,
-      lineHeight: theme.typography.lineHeightBase
-    }
-  }, props.code && {
-    '&& > code': {
-      fontSize: theme.typography.fontSizeBase,
-      lineHeight: theme.typography.lineHeightBase,
-      background: theme.colors.typographyCodeBg,
-      fontFamily: 'monospace',
-      borderRadius: theme.borders.borderRadiusMd,
-      padding: '2px 4px',
-      border: 'unset',
-      margin: 0
-    }
-  }, props.size && {
-    '&&': (() => {
-      switch (props.size) {
-        case 'xxl':
-          return {
-            fontSize: theme.typography.fontSizeXxl,
-            lineHeight: theme.typography.lineHeightXxl,
-            ...(centerIcons && {
-              '& .anticon': {
-                lineHeight: theme.typography.lineHeightXxl,
-                verticalAlign: 'middle'
-              }
-            })
-          };
-        case 'xl':
-          return {
-            fontSize: theme.typography.fontSizeXl,
-            lineHeight: theme.typography.lineHeightXl,
-            ...(centerIcons && {
-              '& .anticon': {
-                lineHeight: theme.typography.lineHeightXl,
-                verticalAlign: 'middle'
-              }
-            })
-          };
-        case 'lg':
-          return {
-            fontSize: theme.typography.fontSizeLg,
-            lineHeight: theme.typography.lineHeightLg,
-            ...(centerIcons && {
-              '& .anticon': {
-                lineHeight: theme.typography.lineHeightLg,
-                verticalAlign: 'middle'
-              }
-            })
-          };
-        case 'sm':
-          return {
-            fontSize: theme.typography.fontSizeSm,
-            lineHeight: theme.typography.lineHeightSm,
-            ...(centerIcons && {
-              '& .anticon': {
-                verticalAlign: '-0.219em'
-              }
-            })
-          };
-        default:
-          return {};
-      }
-    })()
-  }, props.withoutMargins && {
-    '&&': {
-      marginTop: 0,
-      marginBottom: 0
-    }
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getTextEmotionStyles;");
-}
-function Text(userProps) {
-  // Omit props that are not supported by `antd`
-  const {
+const Password = /*#__PURE__*/forwardRef(function Password(_ref, ref) {
+  let {
+    validationState,
+    autoComplete = 'off',
     dangerouslySetAntdProps,
-    bold,
-    hint,
-    withoutMargins,
-    color,
+    dangerouslyAppendEmotionCSS,
     ...props
-  } = userProps;
+  } = _ref;
   const {
+    classNamePrefix,
     theme
   } = useDesignSystemTheme();
+  const useTransparent = safex('databricks.fe.designsystem.useTransparentInput', false);
   return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(AntDText, {
+    children: jsx(Input$2.Password, {
+      visibilityToggle: false,
+      ref: ref,
+      autoComplete: autoComplete,
+      css: [getInputEmotionStyles(classNamePrefix, theme, {
+        validationState
+      }, useTransparent), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Password;"],
       ...props,
-      className: props.className,
-      css: getTextEmotionStyles(theme, userProps),
       ...dangerouslySetAntdProps
     })
   });
-}
+});
 
-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({
-        '&&': {
-          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({
-        '&&': {
-          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({
-        '&&': {
-          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:
-      return /*#__PURE__*/css({
-        '&&': {
-          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',
-      // override general styling
-      marginBottom: '0 !important' // override general styling
-    }
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getTitleEmotionStyles;");
-}
-function Title(userProps) {
-  const {
+const TextArea = /*#__PURE__*/forwardRef(function TextArea(_ref, ref) {
+  let {
+    validationState,
+    autoComplete = 'off',
     dangerouslySetAntdProps,
-    withoutMargins,
-    color,
+    dangerouslyAppendEmotionCSS,
     ...props
-  } = userProps;
+  } = _ref;
   const {
+    classNamePrefix,
     theme
   } = useDesignSystemTheme();
+  const useTransparent = safex('databricks.fe.designsystem.useTransparentInput', false);
   return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(AntDTitle, {
+    children: jsx(Input$2.TextArea, {
+      ref: ref,
+      autoComplete: autoComplete,
+      css: [getInputEmotionStyles(classNamePrefix, theme, {
+        validationState
+      }, useTransparent), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:TextArea;"],
       ...props,
-      className: props.className,
-      css: getTitleEmotionStyles(theme, userProps),
       ...dangerouslySetAntdProps
     })
   });
-}
+});
 
-const Typography = /* #__PURE__ */(() => {
-  function Typography(_ref) {
-    let {
-      dangerouslySetAntdProps,
-      ...props
-    } = _ref;
-    return jsx(DesignSystemAntDConfigProvider, {
-      children: jsx(Typography$1, {
-        ...props,
-        ...dangerouslySetAntdProps
-      })
-    });
-  }
-  Typography.Text = Text;
-  Typography.Title = Title;
-  Typography.Paragraph = Paragraph;
-  Typography.Link = Link;
-  Typography.Hint = Hint;
-  return Typography;
-})();
+// Properly creates the namespace and dot-notation components with correct types.
+const InputNamespace = /* #__PURE__ */Object.assign(Input$1, {
+  TextArea,
+  Password,
+  Group: Group$1
+});
+const Input = InputNamespace;
 
 const Root = DropdownMenu$1.Root; // Behavioral component only
 
@@ -2677,6 +3167,9 @@ const Content = /*#__PURE__*/forwardRef(function Content(_ref, ref) {
   let {
     children,
     minWidth = 220,
+    isInsideModal,
+    onEscapeKeyDown,
+    onKeyDown,
     ...props
   } = _ref;
   const {
@@ -2692,6 +3185,18 @@ const Content = /*#__PURE__*/forwardRef(function Content(_ref, ref) {
       }, process.env.NODE_ENV === "production" ? "" : ";label:Content;"],
       sideOffset: 4,
       align: "start",
+      onKeyDown: e => {
+        // This is a workaround for Radix's DropdownMenu.Content not receiving Escape key events
+        // when nested inside a modal. We need to stop propagation of the event so that the modal
+        // doesn't close when the DropdownMenu should.
+        if (e.key === 'Escape') {
+          if (isInsideModal) {
+            e.stopPropagation();
+          }
+          onEscapeKeyDown === null || onEscapeKeyDown === void 0 || onEscapeKeyDown(e.nativeEvent);
+        }
+        onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
+      },
       ...props,
       children: children
     })
@@ -2749,7 +3254,7 @@ const Item = /*#__PURE__*/forwardRef(function Item(_ref4, ref) {
       if (props.disabled) {
         e.preventDefault();
       } else {
-        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+        onClick === null || onClick === void 0 || onClick(e);
       }
     },
     ...props,
@@ -2808,7 +3313,7 @@ const SubTrigger = /*#__PURE__*/forwardRef(function TriggerItem(_ref7, ref) {
         alignSelf: 'stretch',
         alignItems: 'center'
       }),
-      children: jsx(ChevronRightIcon, {
+      children: jsx(ChevronRightIcon$1, {
         css: theme => ({
           fontSize: CONSTANTS.subMenuIconSize(theme)
         })
@@ -2850,7 +3355,7 @@ const ItemIndicator = /*#__PURE__*/forwardRef(function ItemIndicator(_ref9, ref)
       fontSize: theme.general.iconFontSize
     }),
     ...props,
-    children: children !== null && children !== void 0 ? children : jsx(CheckIcon, {
+    children: children !== null && children !== void 0 ? children : jsx(CheckIcon$1, {
       css: theme => ({
         color: theme.colors.textSecondary
       })
@@ -2959,7 +3464,9 @@ const getNewChildren = (children, props, disabledReason, ref) => {
     },
     children: jsx("span", {
       css: theme => infoIconStyles(theme),
-      children: jsx(InfoIcon, {
+      children: jsx(InfoIcon$1, {
+        role: "presentation",
+        alt: "Disabled state reason",
         "aria-hidden": "false"
       })
     })
@@ -3037,6 +3544,7 @@ const dropdownContentStyles = theme => ({
   padding: `${theme.spacing.xs}px 0`,
   boxShadow: theme.general.shadowLow,
   userSelect: 'none',
+  ...getDarkModePortalStyles(theme),
   // 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.
   //
@@ -3127,5 +3635,5 @@ var DropdownMenu = /*#__PURE__*/Object.freeze({
   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
+export { FaceFrownIcon$1 as $, ApplyDesignSystemContextOverrides as A, Button as B, CloseIcon$1 as C, DesignSystemAntDConfigProvider as D, getPrimaryStyles as E, getDisabledStyles as F, useDesignSystemFlags as G, getButtonEmotionStyles as H, Icon as I, DesignSystemEventProviderComponentTypes as J, DesignSystemEventProviderAnalyticsEventTypes as K, LoadingState as L, useDesignSystemEventComponentCallbacks as M, DesignSystemEventProvider as N, DesignSystemThemeContext as O, DesignSystemContext as P, DesignSystemThemeProvider as Q, RestoreAntDDefaultClsPrefix as R, Spinner as S, Typography as T, DesignSystemProvider as U, ApplyDesignSystemFlags as V, WarningIcon$1 as W, useAntDConfigProviderContext as X, DropdownMenu as Y, WithDesignSystemThemeHoc as Z, CursorIcon$1 as _, getDarkModePortalStyles as a, FaceNeutralIcon$1 as a0, FaceSmileIcon$1 as a1, MegaphoneIcon$1 as a2, NewWindowIcon$1 as a3, LoadingStateContext as a4, getTypographyColor as a5, getBottomOnlyShadowScrollStyles as a6, ColorVars as a7, primitiveColors as a8, dropdownItemStyles as a9, dropdownSeparatorStyles as aa, ChevronRightIcon$1 as b, useDesignSystemContext as c, Tooltip as d, InfoIcon$1 as e, Input as f, getAnimationCss as g, CheckIcon$1 as h, importantify as i, getValidationStateColor as j, getShadowScrollStyles as k, DangerIcon$1 as l, LoadingIcon$1 as m, dropdownContentStyles as n, useUniqueId as o, Title as p, AccessibleContainer as q, ChevronLeftIcon$1 as r, safex as s, DU_BOIS_ENABLE_ANIMATION_CLASSNAME as t, useDesignSystemTheme as u, visuallyHidden as v, lightColorList as w, Root as x, Trigger as y, getDefaultStyles as z };
+//# sourceMappingURL=DropdownMenu-dbeef1b7.js.map