@databricks/design-system 1.12.12 → 1.12.14

package/dist/{DropdownMenu-06a1051f.js → Stepper-839336b1.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 } 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 { notification, ConfigProvider, Button as Button$1, Typography as Typography$1, Input as Input$2 } from 'antd';
+import AntDIcon from '@ant-design/icons';
 import _isNil from 'lodash/isNil';
 import _endsWith from 'lodash/endsWith';
 import _isBoolean from 'lodash/isBoolean';
@@ -12,7 +11,6 @@ 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';
 
 /**
  * Used to hide text visually, but still be readable by screen-readers
@@ -124,13 +122,114 @@ 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["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 +467,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 +488,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: '#F6F7F9',
+  grey100: '#E8ECF0',
+  grey200: '#D1D9E1',
+  grey300: '#C0CDD8',
+  grey350: '#92A4B3',
+  grey400: '#8396A5',
+  grey500: '#5F7281',
+  grey600: '#445461',
+  grey650: '#37444F',
+  grey700: '#1F272D',
+  grey800: '#11171C',
+  indigo: '#434A93',
+  lemon: '#FACB66',
+  lime: '#308613',
+  pink: '#B45091',
+  purple: '#8A63BF',
   red100: '#FFF5F7',
   red200: '#FDE2E8',
   red300: '#FBD0D8',
@@ -404,6 +512,9 @@ const colorPalettePrimary = {
   red600: '#C82D4C',
   red700: '#9E102C',
   red800: '#630316',
+  teal: '#04867D',
+  turquoise: '#137DAE',
+  white: '#FFFFFF',
   yellow100: '#FFF9EB',
   yellow200: '#FCEACA',
   yellow300: '#F8D4A5',
@@ -413,283 +524,292 @@ 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.grey650,
+  actionDisabledBorder: primitiveColors.grey600,
+  actionDisabledText: primitiveColors.grey500,
+  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)',
+  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.grey650,
+  overlayOverlay: 'rgba(31, 38, 45, 0.7200)',
+  skeleton: 'rgba(144, 164, 181, 0.1600)',
+  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.grey650,
+  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.grey400,
+  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.grey100,
+  actionDisabledBorder: primitiveColors.grey200,
+  actionDisabledText: primitiveColors.grey350,
+  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,
+  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(144, 164, 181, 0.1600)',
+  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.grey100,
+  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 +1091,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 +1134,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 +1143,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,
@@ -1320,35 +1479,6 @@ const FaceSmileIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
 FaceSmileIcon.displayName = 'FaceSmileIcon';
 var FaceSmileIcon$1 = FaceSmileIcon;
 
-function SvgInfoIcon(props) {
-  return jsxs("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    viewBox: "0 0 16 16",
-    ...props,
-    children: [jsx("path", {
-      fill: "currentColor",
-      d: "M7.25 11V7h1.5v4h-1.5ZM8 4.5A.75.75 0 1 1 8 6a.75.75 0 0 1 0-1.5Z"
-    }), jsx("path", {
-      fill: "currentColor",
-      fillRule: "evenodd",
-      d: "M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Z",
-      clipRule: "evenodd"
-    })]
-  });
-}
-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", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1428,6 +1558,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 +1742,108 @@ function getDisabledTertiaryStyles(theme) {
   };
 }
 
+let DesignSystemEventProviderComponentTypes = /*#__PURE__*/function (DesignSystemEventProviderComponentTypes) {
+  DesignSystemEventProviderComponentTypes["Banner"] = "banner";
+  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 +1977,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`;
 }
@@ -1732,7 +2011,8 @@ const getButtonEmotionStyles = _ref => {
     type,
     isFlex,
     useFocusPseudoClass,
-    forceIconStyles
+    forceIconStyles,
+    danger
   } = _ref;
   const clsIcon = `.${theme.general.iconfontCssPrefix}`;
   const clsEndIcon = `.${getEndIconClsName(theme)}`;
@@ -1909,10 +2189,10 @@ const getButtonEmotionStyles = _ref => {
       ...iconCss,
       marginLeft: theme.spacing.sm
     },
-    ...(!type && {
+    ...(!type && !danger && {
       [`&:enabled:not(:hover):not(:active) > ${clsIcon}`]: inactiveIconCss
     }),
-    ...(!type && {
+    ...(!type && !danger && {
       [`&:enabled:not(:hover):not(:active) > ${endIconCssSelector}`]: inactiveIconCss
     }),
     // Disable animations
@@ -1925,10 +2205,16 @@ const getButtonEmotionStyles = _ref => {
         ...tertiaryColors,
         color: theme.colors.textSecondary,
         '&:hover > .anticon': {
-          color: tertiaryColors['&:hover'].color
+          color: tertiaryColors['&:hover'].color,
+          ...(danger && {
+            color: theme.colors.actionDangerDefaultTextHover
+          })
         },
         '&:active > .anticon': {
-          color: tertiaryColors['&:active'].color
+          color: tertiaryColors['&:active'].color,
+          ...(danger && {
+            color: theme.colors.actionDangerDefaultTextPress
+          })
         },
         ...(loading && {
           '&&, &:hover, &:active': {
@@ -1937,7 +2223,10 @@ const getButtonEmotionStyles = _ref => {
         })
       },
       [`&:enabled:not(${classLink}) > .anticon`]: {
-        color: theme.colors.textSecondary
+        color: theme.colors.textSecondary,
+        ...(danger && {
+          color: theme.colors.actionDangerDefaultTextDefault
+        })
       },
       ...(isAnchor && {
         lineHeight: `${theme.general.heightSm}px`,
@@ -2026,6 +2315,8 @@ const Button = /* #__PURE__ */(() => {
       dangerouslySetForceIconStyles,
       dangerouslyUseFocusPseudoClass,
       dangerouslyAppendWrapperCss,
+      componentId,
+      analyticsEvents,
       ...props
     } = _ref2;
     const {
@@ -2035,6 +2326,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 +2355,7 @@ const Button = /* #__PURE__ */(() => {
       if (loading) {
         return;
       }
+      eventContext.onClick();
       onClick === null || onClick === void 0 || onClick(event);
     };
     const loadingSpinner = jsx(Spinner, {
@@ -2534,90 +2831,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,
-    title,
-    placement = 'top',
-    dataTestId,
-    dangerouslySetAntdProps,
-    silenceScreenReader = false,
-    useAsLabel = false,
-    ...props
-  } = _ref;
-  const {
-    theme
-  } = useDesignSystemTheme();
-  const id = useUniqueId('dubois-tooltip-component-');
-  if (!title) {
-    return jsx(React__default.Fragment, {
-      children: children
-    });
-  }
-  const titleProps = silenceScreenReader ? {} : {
-    'aria-live': 'polite',
-    'aria-relevant': 'additions'
-  };
-  if (dataTestId) {
-    // TODO FEINF-1337 - this should turn into data-testid
-    titleProps['data-test-id'] = dataTestId;
-  }
-  const liveTitle = title && /*#__PURE__*/React__default.isValidElement(title) ? /*#__PURE__*/React__default.cloneElement(title, titleProps) : jsx("span", {
-    ...titleProps,
-    children: title
-  });
-  const ariaProps = {
-    [useAsLabel ? 'aria-labelledby' : 'aria-describedby']: id,
-    'aria-hidden': false
-  };
-  const childWithProps = /*#__PURE__*/React__default.isValidElement(children) ? /*#__PURE__*/React__default.cloneElement(children, {
-    ...ariaProps,
-    ...children.props
-  }) : _isNil(children) ? children : jsx("span", {
-    ...ariaProps,
-    children: children
-  });
-  const {
-    overlayInnerStyle,
-    overlayStyle,
-    ...delegatedDangerouslySetAntdProps
-  } = dangerouslySetAntdProps || {};
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(Tooltip$1, {
-      id: id,
-      title: liveTitle,
-      placement: placement
-      // Always trigger on hover and focus
-      ,
-      trigger: ['hover', 'focus'],
-      overlayInnerStyle: {
-        backgroundColor: '#2F3941',
-        lineHeight: '22px',
-        padding: '4px 8px',
-        boxShadow: theme.general.shadowLow,
-        ...overlayInnerStyle,
-        ...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,
-      children: childWithProps
-    })
-  });
-};
-
 const getInputGroupStyling = (clsPrefix, theme) => {
   const inputClass = `.${clsPrefix}-input`;
   const buttonClass = `.${clsPrefix}-btn`;
@@ -2641,7 +2854,7 @@ const getInputGroupStyling = (clsPrefix, theme) => {
     }
   }, process.env.NODE_ENV === "production" ? "" : ";label:getInputGroupStyling;");
 };
-const Group$1 = _ref => {
+const Group = _ref => {
   let {
     dangerouslySetAntdProps,
     dangerouslyAppendEmotionCSS,
@@ -2662,10 +2875,14 @@ const Group$1 = _ref => {
   });
 };
 
-const getInputEmotionStyles = (clsPrefix, theme, _ref, useTransparent) => {
+const getInputStyles = (clsPrefix, theme, _ref, _ref2) => {
   let {
     validationState
   } = _ref;
+  let {
+    useTransparent = false,
+    useFocusWithin = false
+  } = _ref2;
   const inputClass = `.${clsPrefix}-input`;
   const affixClass = `.${clsPrefix}-input-affix-wrapper`;
   const affixClassFocused = `.${clsPrefix}-input-affix-wrapper-focused`;
@@ -2673,6 +2890,7 @@ const getInputEmotionStyles = (clsPrefix, theme, _ref, useTransparent) => {
   const prefixIcon = `.${clsPrefix}-input-prefix`;
   const suffixIcon = `.${clsPrefix}-input-suffix`;
   const validationColor = getValidationStateColor(theme, validationState);
+  const focusSpecifier = useFocusWithin ? 'focus-within' : 'focus';
   const styles = {
     '&&': {
       lineHeight: theme.typography.lineHeightBase,
@@ -2683,7 +2901,7 @@ const getInputEmotionStyles = (clsPrefix, theme, _ref, useTransparent) => {
       '&:hover': {
         borderColor: validationState ? validationColor : theme.colors.actionPrimaryBackgroundHover
       },
-      '&:focus': {
+      [`&:${focusSpecifier}`]: {
         outlineColor: validationState ? validationColor : theme.colors.actionPrimaryBackgroundDefault,
         outlineWidth: 2,
         outlineOffset: -2,
@@ -2724,7 +2942,7 @@ const getInputEmotionStyles = (clsPrefix, theme, _ref, useTransparent) => {
     },
     [`&${affixClassFocused}`]: {
       boxShadow: 'none',
-      '&&, &:focus': {
+      [`&&, &:${focusSpecifier}`]: {
         outlineColor: theme.colors.actionPrimaryBackgroundDefault,
         outlineWidth: 2,
         outlineOffset: -2,
@@ -2746,9 +2964,20 @@ const getInputEmotionStyles = (clsPrefix, theme, _ref, useTransparent) => {
     },
     ...getAnimationCss(theme.options.enableAnimation)
   };
+  return styles;
+};
+const getInputEmotionStyles = (clsPrefix, theme, _ref3, useTransparent) => {
+  let {
+    validationState
+  } = _ref3;
+  const styles = getInputStyles(clsPrefix, theme, {
+    validationState
+  }, {
+    useTransparent
+  });
   return /*#__PURE__*/css(importantify(styles), process.env.NODE_ENV === "production" ? "" : ";label:getInputEmotionStyles;");
 };
-const Input$1 = /*#__PURE__*/forwardRef(function Input(_ref2, ref) {
+const Input$1 = /*#__PURE__*/forwardRef(function Input(_ref4, ref) {
   let {
     validationState,
     autoComplete = 'off',
@@ -2757,7 +2986,7 @@ const Input$1 = /*#__PURE__*/forwardRef(function Input(_ref2, ref) {
     onChange,
     onClear,
     ...props
-  } = _ref2;
+  } = _ref4;
   const {
     classNamePrefix,
     theme
@@ -2844,483 +3073,332 @@ const TextArea = /*#__PURE__*/forwardRef(function TextArea(_ref, ref) {
 const InputNamespace = /* #__PURE__ */Object.assign(Input$1, {
   TextArea,
   Password,
-  Group: Group$1
+  Group
 });
 const Input = InputNamespace;
 
-const Root = DropdownMenu$1.Root; // Behavioral component only
-
-const Content = /*#__PURE__*/forwardRef(function Content(_ref, ref) {
+function Stepper(_ref) {
   let {
-    children,
-    minWidth = 220,
-    isInsideModal,
-    onEscapeKeyDown,
-    onKeyDown,
-    ...props
+    direction: requestedDirection,
+    currentStepIndex: currentStep,
+    steps,
+    localizeStepNumber,
+    responsive = true
   } = _ref;
   const {
-    getPopupContainer
-  } = useDesignSystemContext();
-  return jsx(DropdownMenu$1.Portal, {
-    container: getPopupContainer && getPopupContainer(),
-    children: jsx(DropdownMenu$1.Content, {
-      ref: ref,
-      loop: true,
-      css: [contentStyles, {
-        minWidth
-      }, process.env.NODE_ENV === "production" ? "" : ";label:Content;"],
-      sideOffset: 4,
-      align: "start",
-      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
-    })
-  });
-});
-const SubContent = /*#__PURE__*/forwardRef(function Content(_ref2, ref) {
-  let {
-    children,
-    minWidth = 220,
-    ...props
-  } = _ref2;
+    theme
+  } = useDesignSystemTheme();
+  const ref = useRef(null);
   const {
-    getPopupContainer
-  } = useDesignSystemContext();
-  return jsx(DropdownMenu$1.Portal, {
-    container: getPopupContainer && getPopupContainer(),
-    children: jsx(DropdownMenu$1.SubContent, {
-      ref: ref,
-      loop: true,
-      css: [contentStyles, {
-        minWidth
-      }, process.env.NODE_ENV === "production" ? "" : ";label:SubContent;"],
-      sideOffset: -2,
-      alignOffset: -5,
-      ...props,
-      children: children
-    })
-  });
-});
-const Trigger = /*#__PURE__*/forwardRef(function Trigger(_ref3, ref) {
-  let {
-    children,
-    ...props
-  } = _ref3;
-  return jsx(DropdownMenu$1.Trigger, {
-    ref: ref,
-    ...props,
-    children: children
-  });
-});
-const Item = /*#__PURE__*/forwardRef(function Item(_ref4, ref) {
-  let {
-    children,
-    disabledReason,
-    danger,
-    onClick,
-    ...props
-  } = _ref4;
-  const itemRef = useRef(null);
-  useImperativeHandle(ref, () => itemRef.current);
-  return jsx(DropdownMenu$1.Item, {
-    css: theme => [dropdownItemStyles, danger && dangerItemStyles(theme)],
-    ref: itemRef,
-    onClick: e => {
-      if (props.disabled) {
-        e.preventDefault();
-      } else {
-        onClick === null || onClick === void 0 || onClick(e);
-      }
-    },
-    ...props,
-    children: getNewChildren(children, props, disabledReason, itemRef)
-  });
-});
-const Label = /*#__PURE__*/forwardRef(function Label(_ref5, ref) {
-  let {
-    children,
-    ...props
-  } = _ref5;
-  return jsx(DropdownMenu$1.Label, {
-    ref: ref,
-    css: [dropdownItemStyles, theme => ({
-      color: theme.colors.textSecondary,
-      '&:hover': {
-        cursor: 'default'
-      }
-    }), process.env.NODE_ENV === "production" ? "" : ";label:Label;"],
-    ...props,
-    children: children
-  });
-});
-const Separator = /*#__PURE__*/forwardRef(function Separator(_ref6, ref) {
-  let {
-    children,
-    ...props
-  } = _ref6;
-  return jsx(DropdownMenu$1.Separator, {
+    direction
+  } = useResponsiveDirection({
+    ref,
+    requestedDirection,
+    responsive,
+    enabled: steps.length > 0
+  });
+  if (steps.length === 0) {
+    return null;
+  }
+  const isHorizontal = direction === 'horizontal';
+  const currentStepIndex = currentStep ? Math.min(steps.length - 1, Math.max(0, currentStep)) : 0;
+  return jsx("ol", {
+    css: /*#__PURE__*/css(getStepsStyle(theme, isHorizontal), process.env.NODE_ENV === "production" ? "" : ";label:Stepper;"),
     ref: ref,
-    css: dropdownSeparatorStyles,
-    ...props,
-    children: children
-  });
-});
-const SubTrigger = /*#__PURE__*/forwardRef(function TriggerItem(_ref7, ref) {
-  let {
-    children,
-    disabledReason,
-    ...props
-  } = _ref7;
-  const subTriggerRef = useRef(null);
-  useImperativeHandle(ref, () => subTriggerRef.current);
-  return jsxs(DropdownMenu$1.SubTrigger, {
-    ref: subTriggerRef,
-    css: [dropdownItemStyles, theme => ({
-      '&[data-state="open"]': {
-        backgroundColor: theme.colors.actionTertiaryBackgroundHover
-      }
-    }), process.env.NODE_ENV === "production" ? "" : ";label:SubTrigger;"],
-    ...props,
-    children: [getNewChildren(children, props, disabledReason, subTriggerRef), jsx(HintColumn, {
-      css: theme => ({
-        margin: CONSTANTS.subMenuIconMargin(theme),
-        display: 'flex',
-        alignSelf: 'stretch',
-        alignItems: 'center'
-      }),
-      children: jsx(ChevronRightIcon$1, {
-        css: theme => ({
-          fontSize: CONSTANTS.subMenuIconSize(theme)
+    children: steps.map((step, index) => {
+      const isCurrentStep = index === currentStepIndex;
+      const isLastStep = index === steps.length - 1;
+      const displayEndingDivider = !isLastStep;
+      const contentTitleLevel = isCurrentStep ? 3 : 4;
+      const StepIcon = step.icon;
+      const {
+        icon,
+        iconBackgroundColor,
+        iconTextColor,
+        titleTextColor,
+        descriptionTextColor,
+        hasStepItemIconBorder
+      } = getStepContentStyleFields(theme, isCurrentStep, step.status, StepIcon);
+      return jsx("li", {
+        "aria-current": isCurrentStep,
+        css: /*#__PURE__*/css(getStepItemStyle(theme, isHorizontal, isLastStep)),
+        children: jsxs(StepContentGrid, {
+          isHorizontal: isHorizontal,
+          isCurrentStep: isCurrentStep,
+          children: [jsx("div", {
+            css: /*#__PURE__*/css(getStepItemIconParentStyle(theme, isCurrentStep, iconBackgroundColor, hasStepItemIconBorder)),
+            children: StepIcon ? jsx(StepIcon, {
+              statusColor: iconTextColor,
+              status: step.status
+            }) : icon ? jsx("span", {
+              css: /*#__PURE__*/css({
+                color: iconTextColor
+              }),
+              children: icon
+            }) : jsx(Typography.Title, {
+              level: contentTitleLevel,
+              css: /*#__PURE__*/css({
+                color: `${iconTextColor} !important`
+              }),
+              withoutMargins: true,
+              children: localizeStepNumber(index + 1)
+            })
+          }), jsx(Typography.Title, {
+            level: contentTitleLevel,
+            withoutMargins: true,
+            css: /*#__PURE__*/css({
+              flexShrink: 0,
+              color: `${titleTextColor} !important`
+            }),
+            children: step.title
+          }), displayEndingDivider && jsx("div", {
+            css: /*#__PURE__*/css(getStepEndingDividerStyles(theme, isHorizontal, isCurrentStep))
+          }), step.description && jsx(Typography.Text, {
+            css: /*#__PURE__*/css(getStepDescriptionStyles(theme, isHorizontal, isLastStep, descriptionTextColor)),
+            withoutMargins: true,
+            size: "sm",
+            children: step.description
+          })]
         })
-      })
-    })]
-  });
-});
-
-/**
- * Deprecated. Use `SubTrigger` instead.
- * @deprecated
- */
-const TriggerItem = SubTrigger;
-const CheckboxItem = /*#__PURE__*/forwardRef(function CheckboxItem(_ref8, ref) {
-  let {
-    children,
-    disabledReason,
-    ...props
-  } = _ref8;
-  const checkboxItemRef = useRef(null);
-  useImperativeHandle(ref, () => checkboxItemRef.current);
-  return jsx(DropdownMenu$1.CheckboxItem, {
-    ref: checkboxItemRef,
-    css: theme => [dropdownItemStyles, checkboxItemStyles(theme)],
-    ...props,
-    children: getNewChildren(children, props, disabledReason, checkboxItemRef)
-  });
-});
-const ItemIndicator = /*#__PURE__*/forwardRef(function ItemIndicator(_ref9, ref) {
-  let {
-    children,
-    ...props
-  } = _ref9;
-  return jsx(DropdownMenu$1.ItemIndicator, {
-    ref: ref,
-    css: theme => ({
-      marginLeft: -(CONSTANTS.checkboxIconWidth(theme) + CONSTANTS.checkboxPaddingRight(theme)),
-      position: 'absolute',
-      fontSize: theme.general.iconFontSize
-    }),
-    ...props,
-    children: children !== null && children !== void 0 ? children : jsx(CheckIcon$1, {
-      css: theme => ({
-        color: theme.colors.textSecondary
-      })
+      }, index);
     })
   });
-});
-const Arrow = /*#__PURE__*/forwardRef(function Arrow(_ref10, ref) {
+}
+function getStepsStyle(theme, isHorizontal) {
+  return /*#__PURE__*/css({
+    listStyle: 'none',
+    display: 'flex',
+    flexDirection: isHorizontal ? 'row' : 'column',
+    flexWrap: 'wrap',
+    alignItems: 'flex-start',
+    gap: isHorizontal ? theme.spacing.md : theme.spacing.sm,
+    width: '100%',
+    margin: '0',
+    padding: '0'
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getStepsStyle;");
+}
+function getStepItemStyle(theme, isHorizontal, isLastStep) {
+  return /*#__PURE__*/css({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    flexGrow: isLastStep ? 0 : 1,
+    marginRight: isLastStep ? theme.spacing.lg + theme.spacing.md : 0,
+    width: isHorizontal ? undefined : '100%'
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getStepItemStyle;");
+}
+function getStepContentStyleFields(theme, isCurrentStep, status, icon) {
+  const fields = getStepContentStyleFieldsFromStatus(theme, isCurrentStep, status);
+  if (icon) {
+    return {
+      ...fields,
+      icon: undefined,
+      iconBackgroundColor: undefined,
+      iconTextColor: getCustomIconColor(theme, isCurrentStep, status),
+      hasStepItemIconBorder: false
+    };
+  }
+  return fields;
+}
+function getCustomIconColor(theme, isCurrentStep, status) {
+  switch (status) {
+    case 'completed':
+      return theme.colors.actionDefaultBackgroundPress;
+    case 'loading':
+      return theme.colors.textPlaceholder;
+    case 'error':
+      return theme.colors.textValidationDanger;
+    default:
+    case 'upcoming':
+      return isCurrentStep ? theme.colors.actionLinkDefault : theme.colors.textPlaceholder;
+  }
+}
+function getStepContentStyleFieldsFromStatus(theme, isCurrentStep, status) {
+  switch (status) {
+    case 'completed':
+      return {
+        icon: jsx(CheckIcon$1, {}),
+        iconBackgroundColor: theme.colors.actionDefaultBackgroundPress,
+        iconTextColor: theme.colors.textPlaceholder,
+        titleTextColor: theme.colors.textPrimary,
+        descriptionTextColor: theme.colors.textSecondary,
+        hasStepItemIconBorder: true
+      };
+    case 'loading':
+      return {
+        icon: jsx(LoadingIcon$1, {
+          spin: true,
+          css: /*#__PURE__*/css({
+            fontSize: isCurrentStep ? theme.typography.fontSizeXl : theme.typography.fontSizeLg
+          }, process.env.NODE_ENV === "production" ? "" : ";label:icon;")
+        }),
+        iconBackgroundColor: undefined,
+        iconTextColor: theme.colors.textPlaceholder,
+        titleTextColor: isCurrentStep ? theme.colors.textPrimary : theme.colors.textSecondary,
+        descriptionTextColor: theme.colors.textSecondary,
+        hasStepItemIconBorder: false
+      };
+    case 'error':
+      return {
+        icon: jsx(CloseIcon$1, {
+          css: /*#__PURE__*/css({
+            marginBottom: theme.spacing.sm /* center icon in icon circle */
+          }, process.env.NODE_ENV === "production" ? "" : ";label:icon;")
+        }),
+        iconBackgroundColor: theme.colors.textValidationDanger,
+        iconTextColor: 'white',
+        titleTextColor: theme.colors.textValidationDanger,
+        descriptionTextColor: theme.colors.textValidationDanger,
+        hasStepItemIconBorder: false
+      };
+    default:
+    case 'upcoming':
+      if (isCurrentStep) {
+        return {
+          icon: undefined,
+          iconBackgroundColor: theme.colors.actionLinkDefault,
+          iconTextColor: 'white',
+          titleTextColor: theme.colors.textPrimary,
+          descriptionTextColor: theme.colors.textPrimary,
+          hasStepItemIconBorder: false
+        };
+      }
+      return {
+        icon: undefined,
+        iconBackgroundColor: undefined,
+        iconTextColor: theme.colors.textPlaceholder,
+        titleTextColor: theme.colors.textSecondary,
+        descriptionTextColor: theme.colors.textSecondary,
+        hasStepItemIconBorder: true
+      };
+  }
+}
+const MaxHorizontalStepDescriptionWidth = 140;
+const CurrentStepIconSize = DEFAULT_SPACING_UNIT * 4;
+const NonCurrentStepIconSize = DEFAULT_SPACING_UNIT * 3;
+function getStepItemIconParentStyle(theme, isCurrentStep, iconBackgroundColor, hasStepItemIconBorder) {
+  return /*#__PURE__*/css({
+    width: isCurrentStep ? CurrentStepIconSize : NonCurrentStepIconSize,
+    height: isCurrentStep ? CurrentStepIconSize : NonCurrentStepIconSize,
+    backgroundColor: iconBackgroundColor,
+    borderRadius: '50%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    fontSize: '20px',
+    flexShrink: 0,
+    border: hasStepItemIconBorder ? `1px solid ${theme.colors.textPlaceholder}` : undefined
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getStepItemIconParentStyle;");
+}
+function getStepEndingDividerStyles(theme, isHorizontal, isCurrentStep) {
+  const backgroundColor = isCurrentStep ? theme.colors.actionLinkDefault : theme.colors.border;
+  if (isHorizontal) {
+    return /*#__PURE__*/css({
+      backgroundColor,
+      height: '1px',
+      width: '100%',
+      minWidth: theme.spacing.md
+    }, process.env.NODE_ENV === "production" ? "" : ";label:getStepEndingDividerStyles;");
+  }
+  return /*#__PURE__*/css({
+    backgroundColor,
+    height: '100%',
+    minHeight: theme.spacing.md,
+    width: '1px',
+    alignSelf: 'flex-start',
+    marginLeft: theme.spacing.md
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getStepEndingDividerStyles;");
+}
+function getStepDescriptionStyles(theme, isHorizontal, isLastStep, textColor) {
+  return /*#__PURE__*/css({
+    alignSelf: 'flex-start',
+    width: '100%',
+    gridColumn: isHorizontal || isLastStep ? '2 / span 2' : undefined,
+    maxWidth: isHorizontal ? MaxHorizontalStepDescriptionWidth : undefined,
+    paddingBottom: isHorizontal ? undefined : theme.spacing.sm,
+    color: `${textColor} !important`
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getStepDescriptionStyles;");
+}
+function StepContentGrid(_ref2) {
   let {
     children,
-    ...props
-  } = _ref10;
+    isHorizontal,
+    isCurrentStep
+  } = _ref2;
   const {
     theme
   } = useDesignSystemTheme();
-  return jsx(DropdownMenu$1.Arrow, {
+  if (isHorizontal) {
+    return jsx("div", {
+      css: /*#__PURE__*/css({
+        display: 'grid',
+        gridTemplateColumns: `${isCurrentStep ? CurrentStepIconSize : NonCurrentStepIconSize}px fit-content(100%) 1fr`,
+        gridTemplateRows: `${CurrentStepIconSize}px auto`,
+        alignItems: 'center',
+        justifyItems: 'flex-start',
+        gridColumnGap: theme.spacing.sm,
+        gridRowGap: theme.spacing.sm,
+        width: '100%'
+      }, process.env.NODE_ENV === "production" ? "" : ";label:StepContentGrid;"),
+      children: children
+    });
+  }
+  return jsx("div", {
     css: /*#__PURE__*/css({
-      fill: theme.colors.backgroundPrimary,
-      stroke: theme.colors.borderDecorative,
-      strokeDashoffset: -CONSTANTS.arrowBottomLength(),
-      strokeDasharray: CONSTANTS.arrowBottomLength() + 2 * CONSTANTS.arrowSide(),
-      strokeWidth: CONSTANTS.arrowStrokeWidth(),
-      // TODO: This is a temporary fix for the alignment of the Arrow;
-      // Radix has changed the implementation for v1.0.0 (uses floating-ui)
-      // which has new behaviors for alignment that we don't want. Generally
-      // we need to fix the arrow to always be aligned to the left of the menu (with
-      // offset equal to border radius)
-      position: 'relative',
-      top: -1
-    }, process.env.NODE_ENV === "production" ? "" : ";label:Arrow;"),
-    ref: ref,
-    width: 12,
-    height: 6,
-    ...props,
+      display: 'grid',
+      gridTemplateColumns: `${CurrentStepIconSize}px auto`,
+      alignItems: 'center',
+      justifyItems: 'flex-start',
+      gridColumnGap: theme.spacing.md,
+      gridRowGap: theme.spacing.sm,
+      width: '100%',
+      '& > :first-child': {
+        // horizontally center the first column (circle/icon)
+        justifySelf: 'center'
+      }
+    }, process.env.NODE_ENV === "production" ? "" : ";label:StepContentGrid;"),
     children: children
   });
-});
-const RadioItem = /*#__PURE__*/forwardRef(function RadioItem(_ref11, ref) {
-  let {
-    children,
-    disabledReason,
-    ...props
-  } = _ref11;
-  const radioItemRef = useRef(null);
-  useImperativeHandle(ref, () => radioItemRef.current);
-  return jsx(DropdownMenu$1.RadioItem, {
-    ref: radioItemRef,
-    css: theme => [dropdownItemStyles, checkboxItemStyles(theme)],
-    ...props,
-    children: getNewChildren(children, props, disabledReason, radioItemRef)
-  });
-});
+}
 
-// UNWRAPPED RADIX-UI-COMPONENTS
-const Group = DropdownMenu$1.Group;
-const RadioGroup = DropdownMenu$1.RadioGroup;
-const Sub = DropdownMenu$1.Sub;
+// Ant design uses the same value for their stepper and to works well for us as well.
+const MinimumHorizonalDirectionWidth = 532;
 
-// EXTRA COMPONENTS
-const HintColumn = /*#__PURE__*/forwardRef(function HintColumn(_ref12, ref) {
-  let {
-    children,
-    ...props
-  } = _ref12;
-  return jsx("div", {
-    ref: ref,
-    css: [metaTextStyles, "margin-left:auto;" + (process.env.NODE_ENV === "production" ? "" : ";label:HintColumn;")],
-    ...props,
-    children: children
-  });
-});
-const HintRow = /*#__PURE__*/forwardRef(function HintRow(_ref13, ref) {
+// exported for unit test
+function useResponsiveDirection(_ref3) {
   let {
-    children,
-    ...props
-  } = _ref13;
-  return jsx("div", {
-    ref: ref,
-    css: [metaTextStyles, "min-width:100%;" + (process.env.NODE_ENV === "production" ? "" : ";label:HintRow;")],
-    ...props,
-    children: children
-  });
-});
-const IconWrapper = /*#__PURE__*/forwardRef(function IconWrapper(_ref14, ref) {
-  let {
-    children,
-    ...props
-  } = _ref14;
-  return jsx("div", {
-    ref: ref,
-    css: theme => ({
-      fontSize: 16,
-      color: theme.colors.textSecondary,
-      paddingRight: theme.spacing.sm
-    }),
-    ...props,
-    children: children
-  });
-});
-const getNewChildren = (children, props, disabledReason, ref) => {
-  const childCount = Children.count(children);
-  const tooltip = jsx(Tooltip, {
-    title: disabledReason,
-    placement: "right",
-    dangerouslySetAntdProps: {
-      getPopupContainer: () => ref.current || document.body
-    },
-    children: jsx("span", {
-      css: theme => infoIconStyles(theme),
-      children: jsx(InfoIcon$1, {
-        role: "presentation",
-        alt: "Disabled state reason",
-        "aria-hidden": "false"
-      })
-    })
-  });
-  if (childCount === 1) {
-    return getChild(children, Boolean(props['disabled']), disabledReason, tooltip, 0, childCount);
-  }
-  return Children.map(children, (child, idx) => {
-    return getChild(child, Boolean(props['disabled']), disabledReason, tooltip, idx, childCount);
-  });
-};
-const getChild = (child, isDisabled, disabledReason, tooltip, index, siblingCount) => {
-  const HintColumnType = jsx(HintColumn, {}).type;
-  const isHintColumnType = Boolean(child && typeof child !== 'string' && typeof child !== 'number' && typeof child !== 'boolean' && 'type' in child && (child === null || child === void 0 ? void 0 : child.type) === HintColumnType);
-  if (isDisabled && disabledReason && child && isHintColumnType) {
-    return jsxs(Fragment, {
-      children: [tooltip, child]
-    });
-  } else if (index === siblingCount - 1 && isDisabled && disabledReason) {
-    return jsxs(Fragment, {
-      children: [child, tooltip]
+    requestedDirection = 'horizontal',
+    responsive,
+    enabled,
+    ref
+  } = _ref3;
+  const [direction, setDirection] = useState(requestedDirection);
+  useEffect(() => {
+    if (requestedDirection === 'vertical' || !enabled || !responsive || !ref.current) {
+      return;
+    }
+    let timeoutId;
+    const resizeObserver = new ResizeObserver(entries => {
+      timeoutId = requestAnimationFrame(() => {
+        if (entries.length === 1) {
+          const width = entries[0].target.clientWidth || 0;
+          setDirection(width < MinimumHorizonalDirectionWidth ? 'vertical' : 'horizontal');
+        }
+      });
     });
-  }
-  return child;
-};
-
-// CONSTANTS
-const CONSTANTS = {
-  itemPaddingVertical(theme) {
-    // The number from the mocks is the midpoint between constants
-    return 0.5 * theme.spacing.xs + 0.5 * theme.spacing.sm;
-  },
-  itemPaddingHorizontal(theme) {
-    return theme.spacing.sm;
-  },
-  checkboxIconWidth(theme) {
-    return theme.general.iconFontSize;
-  },
-  checkboxPaddingLeft(theme) {
-    return theme.spacing.sm + theme.spacing.xs;
-  },
-  checkboxPaddingRight(theme) {
-    return theme.spacing.sm;
-  },
-  subMenuIconMargin(theme) {
-    // Negative margin so the icons can be larger without increasing the overall item height
-    const iconMarginVertical = this.itemPaddingVertical(theme) / 2;
-    const iconMarginRight = -this.itemPaddingVertical(theme) + theme.spacing.sm * 1.5;
-    return `${-iconMarginVertical}px ${-iconMarginRight}px ${-iconMarginVertical}px auto`;
-  },
-  subMenuIconSize(theme) {
-    return theme.spacing.lg;
-  },
-  arrowBottomLength() {
-    // The built in arrow is a polygon: 0,0 30,0 15,10
-    return 30;
-  },
-  arrowHeight() {
-    return 10;
-  },
-  arrowSide() {
-    return 2 * (this.arrowHeight() ** 2 * 2) ** 0.5;
-  },
-  arrowStrokeWidth() {
-    // This is eyeballed b/c relative to the svg viewbox coordinate system
-    return 2;
-  }
-};
-const dropdownContentStyles = theme => ({
-  backgroundColor: theme.colors.backgroundPrimary,
-  color: theme.colors.textPrimary,
-  lineHeight: theme.typography.lineHeightBase,
-  border: `1px solid ${theme.colors.borderDecorative}`,
-  borderRadius: theme.borders.borderRadiusMd,
-  padding: `${theme.spacing.xs}px 0`,
-  boxShadow: theme.general.shadowLow,
-  userSelect: 'none',
-  ...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.
-  //
-  // Additionally, there is an issue where macOS overlay scrollbars in Chrome and Safari (sometimes!)
-  // overlap other elements with higher zIndex, because the scrollbars themselves have zIndex 9999,
-  // so we have to use a higher value than that: https://github.com/databricks/universe/pull/232825
-  zIndex: 10000,
-  a: importantify({
-    color: theme.colors.textPrimary,
-    '&:hover, &:focus': {
-      color: theme.colors.textPrimary,
-      textDecoration: 'none'
+    if (ref.current) {
+      resizeObserver.observe(ref.current);
     }
-  })
-});
-const contentStyles = theme => ({
-  ...dropdownContentStyles(theme)
-});
-const dropdownItemStyles = theme => ({
-  padding: `${CONSTANTS.itemPaddingVertical(theme)}px ${CONSTANTS.itemPaddingHorizontal(theme)}px`,
-  display: 'flex',
-  flexWrap: 'wrap',
-  alignItems: 'center',
-  outline: 'unset',
-  '&:hover': {
-    cursor: 'pointer'
-  },
-  '&:focus': {
-    backgroundColor: theme.colors.actionTertiaryBackgroundHover
-  },
-  '&[data-disabled]': {
-    pointerEvents: 'none',
-    color: theme.colors.actionDisabledText
-  }
-});
-const dangerItemStyles = theme => ({
-  color: theme.colors.textValidationDanger,
-  '&:hover, &:focus': {
-    backgroundColor: theme.colors.actionDangerDefaultBackgroundHover
-  }
-});
-const infoIconStyles = theme => ({
-  display: 'inline-flex',
-  paddingLeft: theme.spacing.xs,
-  color: theme.colors.textSecondary,
-  pointerEvents: 'all'
-});
-const checkboxItemStyles = theme => ({
-  position: 'relative',
-  paddingLeft: CONSTANTS.checkboxIconWidth(theme) + CONSTANTS.checkboxPaddingLeft(theme) + CONSTANTS.checkboxPaddingRight(theme)
-});
-const metaTextStyles = theme => ({
-  color: theme.colors.textSecondary,
-  fontSize: theme.typography.fontSizeSm,
-  '[data-disabled] &': {
-    color: theme.colors.actionDisabledText
-  }
-});
-const dropdownSeparatorStyles = theme => ({
-  height: 1,
-  margin: `${theme.spacing.xs}px ${theme.spacing.sm}px`,
-  backgroundColor: theme.colors.borderDecorative
-});
-
-var DropdownMenu = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  Arrow: Arrow,
-  CheckboxItem: CheckboxItem,
-  Content: Content,
-  Group: Group,
-  HintColumn: HintColumn,
-  HintRow: HintRow,
-  IconWrapper: IconWrapper,
-  Item: Item,
-  ItemIndicator: ItemIndicator,
-  Label: Label,
-  RadioGroup: RadioGroup,
-  RadioItem: RadioItem,
-  Root: Root,
-  Separator: Separator,
-  Sub: Sub,
-  SubContent: SubContent,
-  SubTrigger: SubTrigger,
-  Trigger: Trigger,
-  TriggerItem: TriggerItem,
-  dropdownContentStyles: dropdownContentStyles,
-  dropdownItemStyles: dropdownItemStyles,
-  dropdownSeparatorStyles: dropdownSeparatorStyles
-});
+    return () => {
+      resizeObserver.disconnect();
+      cancelAnimationFrame(timeoutId);
+    };
+  }, [requestedDirection, enabled, ref, responsive]);
+  return {
+    direction
+  };
+}
 
-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 { getInputStyles as $, ApplyDesignSystemContextOverrides as A, Button as B, CloseIcon$1 as C, DesignSystemAntDConfigProvider as D, DesignSystemEventProviderComponentTypes as E, DesignSystemEventProviderAnalyticsEventTypes as F, useDesignSystemEventComponentCallbacks as G, DesignSystemEventProvider 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, WithDesignSystemThemeHoc as Q, RestoreAntDDefaultClsPrefix as R, Spinner as S, Typography as T, CursorIcon$1 as U, FaceFrownIcon$1 as V, WarningIcon$1 as W, FaceNeutralIcon$1 as X, FaceSmileIcon$1 as Y, MegaphoneIcon$1 as Z, NewWindowIcon$1 as _, getDarkModePortalStyles as a, LoadingStateContext as a0, getTypographyColor as a1, getBottomOnlyShadowScrollStyles as a2, ColorVars as a3, primitiveColors as a4, ChevronRightIcon$1 as b, useUniqueId as c, useDesignSystemContext as d, CheckIcon$1 as e, Input as f, getAnimationCss as g, getValidationStateColor as h, importantify as i, getShadowScrollStyles as j, DangerIcon$1 as k, LoadingIcon$1 as l, Title as m, AccessibleContainer as n, ChevronLeftIcon$1 as o, DU_BOIS_ENABLE_ANIMATION_CLASSNAME as p, lightColorList as q, getDefaultStyles as r, safex as s, getPrimaryStyles as t, useDesignSystemTheme as u, visuallyHidden as v, getDisabledStyles as w, useDesignSystemFlags as x, Stepper as y, getButtonEmotionStyles as z };
+//# sourceMappingURL=Stepper-839336b1.js.map