@databricks/design-system 1.12.12 → 1.12.13

package/dist/{DropdownMenu-06a1051f.js → DropdownMenu-dbeef1b7.js}

@@ -1,9 +1,8 @@
-import React__default, { createContext, useContext, useMemo, useEffect, forwardRef, useRef, useLayoutEffect, useImperativeHandle, useState, 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, 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';
@@ -124,13 +123,115 @@ const getShadowVariables = isDarkMode => {
   }
 };
 
+// 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
 };
 
 /**
@@ -368,17 +469,19 @@ const responsive = {
 };
 var responsive$1 = responsive;
 
-// Exported from go/designsystem/colorsheet
-const colorPalettePrimary = {
-  primary: '#2272B4',
+// THIS FILE IS AUTOMATICALLY GENERATED. DO NOT EDIT.
+
+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',
@@ -387,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',
@@ -404,6 +514,9 @@ const colorPalettePrimary = {
   red600: '#C82D4C',
   red700: '#9E102C',
   red800: '#630316',
+  teal: '#04867D',
+  turquoise: '#137DAE',
+  white: '#FFFFFF',
   yellow100: '#FFF9EB',
   yellow200: '#FCEACA',
   yellow300: '#F8D4A5',
@@ -413,283 +526,294 @@ 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
-};
-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()
+  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
 };
 
-/**
- * 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.
+
+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)
   };
 }
@@ -971,21 +1095,36 @@ 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 = /*#__PURE__*/forwardRef((props, forwardedRef) => {
@@ -999,6 +1138,7 @@ const Icon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     theme
   } = useDesignSystemTheme();
+  const linearGradientId = useUniqueId('ai-linear-gradient');
   const MemoizedComponent = useMemo(() => Component ? _ref => {
     let {
       fill,
@@ -1007,20 +1147,43 @@ const Icon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     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,
@@ -1428,6 +1591,35 @@ const NewWindowIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
 NewWindowIcon.displayName = 'NewWindowIcon';
 var NewWindowIcon$1 = NewWindowIcon;
 
+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"
+    })]
+  });
+}
+const WarningIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return jsx(Icon, {
+    ref: forwardedRef,
+    ...props,
+    component: SvgWarningIcon
+  });
+});
+WarningIcon.displayName = 'WarningIcon';
+var WarningIcon$1 = WarningIcon;
+
 function getDefaultStyles(theme) {
   let loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   const defaultStyles = {
@@ -1583,6 +1775,107 @@ function getDisabledTertiaryStyles(theme) {
   };
 }
 
+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 {
+    componentType,
+    componentId,
+    analyticsEvents
+  } = _ref;
+  const context = useDesignSystemEventProviderContext();
+  const callbacks = useMemo(() => {
+    if (context === DefaultEmptyCallbacks || componentId === undefined) {
+      return {
+        onClick: () => {},
+        onValueChange: () => {},
+        onView: () => {}
+      };
+    }
+    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');
 
@@ -1716,6 +2009,24 @@ const Spinner = _ref => {
   );
 };
 
+/**
+ * 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`;
 }
@@ -2026,6 +2337,8 @@ const Button = /* #__PURE__ */(() => {
       dangerouslySetForceIconStyles,
       dangerouslyUseFocusPseudoClass,
       dangerouslyAppendWrapperCss,
+      componentId,
+      analyticsEvents,
       ...props
     } = _ref2;
     const {
@@ -2035,6 +2348,11 @@ const Button = /* #__PURE__ */(() => {
     const {
       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);
@@ -2059,6 +2377,7 @@ const Button = /* #__PURE__ */(() => {
       if (loading) {
         return;
       }
+      eventContext.onClick();
       onClick === null || onClick === void 0 || onClick(event);
     };
     const loadingSpinner = jsx(Spinner, {
@@ -2534,12 +2853,6 @@ const Typography = /* #__PURE__ */(() => {
   return Typography;
 })();
 
-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 Tooltip = _ref => {
   let {
     children,
@@ -3322,5 +3635,5 @@ var DropdownMenu = /*#__PURE__*/Object.freeze({
   dropdownSeparatorStyles: dropdownSeparatorStyles
 });
 
-export { LoadingStateContext as $, ApplyDesignSystemContextOverrides as A, Button as B, CloseIcon$1 as C, DesignSystemAntDConfigProvider as D, getDisabledStyles as E, useUniqueId as F, useDesignSystemFlags as G, getButtonEmotionStyles as H, Icon as I, DesignSystemThemeContext as J, DesignSystemContext as K, LoadingState as L, DesignSystemThemeProvider as M, DesignSystemProvider as N, ApplyDesignSystemFlags as O, useAntDConfigProviderContext as P, DropdownMenu as Q, RestoreAntDDefaultClsPrefix as R, Spinner as S, Typography as T, CursorIcon$1 as U, FaceFrownIcon$1 as V, WithDesignSystemThemeHoc as W, FaceNeutralIcon$1 as X, FaceSmileIcon$1 as Y, MegaphoneIcon$1 as Z, NewWindowIcon$1 as _, getDarkModePortalStyles as a, getTypographyColor as a0, getBottomOnlyShadowScrollStyles as a1, ColorVars as a2, dropdownItemStyles as a3, dropdownSeparatorStyles as a4, 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, Title as o, AccessibleContainer as p, ChevronLeftIcon$1 as q, DU_BOIS_ENABLE_ANIMATION_CLASSNAME as r, safex as s, lightColorList as t, useDesignSystemTheme as u, visuallyHidden as v, Root as w, Trigger as x, getDefaultStyles as y, getPrimaryStyles as z };
-//# sourceMappingURL=DropdownMenu-06a1051f.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