@databricks/design-system 1.12.16 → 1.12.18

package/dist/{Stepper-ff25c5d1.js → Typography-CTfAhQ8V.js}

@@ -1,7 +1,9 @@
-import React__default, { useRef, useEffect, createContext, useContext, useMemo, useState, forwardRef, useLayoutEffect, useImperativeHandle, useCallback } from 'react';
-import { jsx, Fragment, jsxs } from '@emotion/react/jsx-runtime';
+import React__default, { createContext, useContext, useMemo, useEffect, useState, forwardRef, useRef, useLayoutEffect, useCallback, useImperativeHandle } from 'react';
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import { useTheme, ThemeProvider, css, keyframes } from '@emotion/react';
-import { notification, ConfigProvider, Typography as Typography$1, Button as Button$1, Input as Input$2 } from 'antd';
+import { notification, ConfigProvider, Button as Button$1, Typography as Typography$1 } from 'antd';
+import * as Popover$1 from '@radix-ui/react-popover';
+import { TooltipProvider } from '@radix-ui/react-tooltip';
 import AntDIcon from '@ant-design/icons';
 import _isNil from 'lodash/isNil';
 import _endsWith from 'lodash/endsWith';
@@ -11,6 +13,7 @@ import _isString from 'lodash/isString';
 import _mapValues from 'lodash/mapValues';
 import _memoize from 'lodash/memoize';
 import unitless from '@emotion/unitless';
+import _uniqueId from 'lodash/uniqueId';
 
 /**
  * Used to hide text visually, but still be readable by screen-readers
@@ -83,7 +86,6 @@ const spacing = {
   switchMinWidth: 28,
   switchPinSize: 14
 });
-var spacing$1 = spacing;
 
 // eslint-disable-next-line import/no-anonymous-default-export
 var antdVars = {
@@ -104,19 +106,31 @@ const antdGeneralVariables = {
   iconFontSize: 16,
   buttonHeight: heightBase,
   // Height available within button (for label and icon). Same for middle and small buttons.
-  buttonInnerHeight: heightBase - spacing$1.sm * 2 - borderWidth * 2
+  buttonInnerHeight: heightBase - spacing.sm * 2 - borderWidth * 2
 };
 const shadowLightRgb = '31, 39, 45';
 const shadowDarkRgb = '0, 0, 0';
 const getShadowVariables = isDarkMode => {
   if (isDarkMode) {
     return {
+      /**
+       * @deprecated Use new shadow variables under theme.shadows.*, check out go/dubois-elevation-doc decision doc for guidance on choosing the new shadow variable
+       */
       shadowLow: `0px 4px 16px rgba(${shadowDarkRgb}, 0.12)`,
+      /**
+       * @deprecated Use new shadow variables under theme.shadows.*, check out go/dubois-elevation-doc decision doc for guidance on choosing the new shadow variable
+       */
       shadowHigh: `0px 8px 24px rgba(${shadowDarkRgb}, 0.2);`
     };
   } else {
     return {
+      /**
+       * @deprecated Use new shadow variables under theme.shadows.*, check out go/dubois-elevation-doc decision doc for guidance on choosing the new shadow variable
+       */
       shadowLow: `0px 4px 16px rgba(${shadowLightRgb}, 0.12)`,
+      /**
+       * @deprecated Use new shadow variables under theme.shadows.*, check out go/dubois-elevation-doc decision doc for guidance on choosing the new shadow variable
+       */
       shadowHigh: `0px 8px 24px rgba(${shadowLightRgb}, 0.2)`
     };
   }
@@ -124,402 +138,40 @@ 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["ProgressFill"] = "progressFill";
-  ValidSemanticColors["ProgressTrack"] = "progressTrack";
-  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: ValidSemanticColors.TextPrimary,
-  secondary: ValidSemanticColors.TextSecondary,
-  info: ValidSemanticColors.TextSecondary,
-  error: ValidSemanticColors.TextValidationDanger,
-  success: ValidSemanticColors.TextValidationSuccess,
-  warning: ValidSemanticColors.TextValidationWarning
+const borderRadii = {
+  borderRadius0: 0,
+  borderRadiusSm: 4,
+  borderRadiusMd: 8,
+  borderRadiusLg: 12,
+  borderRadiusFull: 999
 };
 
-/**
- * Recursively appends `!important` to all CSS properties in an Emotion `CSSObject`.
- * Used to ensure that we always override Ant styles, without worrying about selector precedence.
- */
-function importantify(obj) {
-  return _mapValues(obj, (value, key) => {
-    if (_isString(value) || _isNumber(value) || _isBoolean(value)) {
-      // Make sure we don't double-append important
-      if (_isString(value) && _endsWith(value, '!important')) {
-        return value;
-      }
-      if (_isNumber(value)) {
-        if (unitless[key]) {
-          return `${value}!important`;
-        }
-        return `${value}px!important`;
-      }
-      return `${value}!important`;
-    }
-    if (_isNil(value)) {
-      return value;
-    }
-    return importantify(value);
-  });
-}
+// Border variables
+const borders = {
+  borderRadiusMd: 4,
+  borderRadiusLg: 8
+};
+const getLegacyBorders = () => {
+  return borders;
+};
+const getBorders = () => {
+  return borderRadii;
+};
 
 /**
- * Returns a text color, in case of invalid/missing key and missing fallback color it will return textPrimary
- * @param theme
- * @param key - key of TypographyColor
- * @param fallbackColor - color to return as fallback -- used to remove tertiary check inline
+ * These values are based on AntD's breakpoints which follow BootStrap 4 media query rules.
+ * The numerical values represent the min-width of the given size.
+ * AntD values: https://ant.design/components/grid#col
+ * Bootstrap: https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints
  */
-function getTypographyColor(theme, key, fallbackColor) {
-  if (theme && key && Object(theme.colors).hasOwnProperty(ColorVars[key])) {
-    return theme.colors[ColorVars[key]];
-  }
-  return fallbackColor !== null && fallbackColor !== void 0 ? fallbackColor : theme.colors.textPrimary;
-}
 
-/**
- * Returns validation color based on state, has default validation colors if params are not provided
- * @param theme
- * @param validationState
- * @param errorColor
- * @param warningColor
- * @param successColor
- */
-function getValidationStateColor(theme, validationState) {
-  let {
-    errorColor,
-    warningColor,
-    successColor
-  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  switch (validationState) {
-    case 'error':
-      return errorColor || theme.colors.actionDangerPrimaryBackgroundDefault;
-    case 'warning':
-      return warningColor || theme.colors.textValidationWarning;
-    case 'success':
-      return successColor || theme.colors.textValidationSuccess;
-    default:
-      return undefined;
-  }
-}
-function getDarkModePortalStyles(theme) {
-  if (!theme || !theme.isDarkMode) {
-    return {};
-  }
-  return {
-    border: `1px solid ${theme.colors.borderDecorative}`,
-    boxShadow: 'none'
-  };
-}
-const shadowCoverTop = bgColor => `linear-gradient(${bgColor} 30%, rgba(0, 0, 0, 0)) center top`;
-const shadowCoverBot = bgColor => `linear-gradient(rgba(0, 0, 0, 0), ${bgColor} 70%) center bottom`;
-const shadowCoverLeft = bgColor => `linear-gradient(to left, rgba(0, 0, 0, 0), ${bgColor} 30%) left center`;
-const shadowCoverRight = bgColor => `linear-gradient(to left, ${bgColor} 70%, rgba(0, 0, 0, 0)) right center`;
-const shadowTop = shadowRgb => `radial-gradient(
-  farthest-side at 50% 0,
-  rgba(${shadowRgb}, 0.2),
-  rgba(${shadowRgb}, 0)
-) center top`;
-const shadowBot = shadowRgb => `radial-gradient(
-  farthest-side at 50% 100%,
-  rgba(${shadowRgb}, 0.2),
-  rgba(${shadowRgb}, 0)
-) center bottom`;
-const shadowLeft = shadowRgb => `radial-gradient(
-  farthest-side at 0 50%,
-  rgba(${shadowRgb}, 0.2),
-  rgba(${shadowRgb}, 0)
-) left center`;
-const shadowRight = shadowRgb => `radial-gradient(
-  farthest-side at 100% 50%,
-  rgba(${shadowRgb}, 0.2),
-  rgba(${shadowRgb}, 0)
-) right center`;
-const shadowCoverBackgroundSizeVertical = '100% 40px';
-const shadowCoverBackgroundSizeHorizontal = '40px 100%';
-const shadowBackgroundSizeVertical = '100% 14px';
-const shadowBackgroundSizeHorizontal = '14px 100%';
-const getShadowScrollStylesMemoized = _memoize(function getShadowScrollStylesMemoized(theme, backgroundColor) {
-  let orientation = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'vertical';
-  const bgColor = backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.backgroundPrimary;
-  const shadowColor = theme.isDarkMode ? shadowDarkRgb : shadowLightRgb;
-  if (orientation === 'horizontal') {
-    return {
-      background: `
-            ${shadowCoverLeft(bgColor)},
-            ${shadowCoverRight(bgColor)},
-            ${shadowLeft(shadowColor)},
-            ${shadowRight(shadowColor)}`,
-      backgroundRepeat: 'no-repeat',
-      backgroundSize: `
-            ${shadowCoverBackgroundSizeHorizontal},
-            ${shadowCoverBackgroundSizeHorizontal},
-            ${shadowBackgroundSizeHorizontal},
-            ${shadowBackgroundSizeHorizontal}`,
-      backgroundAttachment: 'local, local, scroll, scroll'
-    };
-  }
-  return {
-    background: `
-          ${shadowCoverTop(bgColor)},
-          ${shadowCoverBot(bgColor)},
-          ${shadowTop(shadowColor)},
-          ${shadowBot(shadowColor)}`,
-    backgroundRepeat: 'no-repeat',
-    backgroundSize: `
-          ${shadowCoverBackgroundSizeVertical},
-          ${shadowCoverBackgroundSizeVertical},
-          ${shadowBackgroundSizeVertical},
-          ${shadowBackgroundSizeVertical}`,
-    backgroundAttachment: 'local, local, scroll, scroll'
-  };
-}, (theme, backgroundColor, orientation) => {
-  return `${theme.isDarkMode}-${backgroundColor}-${orientation}`;
-});
-const getShadowScrollStyles = function getShadowScrollStyles(theme) {
-  let {
-    backgroundColor,
-    orientation
-  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return getShadowScrollStylesMemoized(theme, backgroundColor, orientation);
-};
-const getBottomOnlyShadowScrollStylesMemoized = _memoize(function getBottomOnlyShadowScrollStylesMemoized(theme, backgroundColor) {
-  const bgColor = backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.backgroundPrimary;
-  return {
-    background: `
-          ${shadowCoverBot(bgColor)},
-          ${shadowBot(theme.isDarkMode ? shadowDarkRgb : shadowLightRgb)}`,
-    backgroundRepeat: 'no-repeat',
-    backgroundSize: `
-          ${shadowCoverBackgroundSizeVertical},
-          ${shadowBackgroundSizeVertical}`,
-    backgroundAttachment: 'local, scroll'
-  };
-});
-const getBottomOnlyShadowScrollStyles = function getBottomOnlyShadowScrollStyles(theme) {
-  let {
-    backgroundColor
-  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return getBottomOnlyShadowScrollStylesMemoized(theme, backgroundColor);
-};
-
-// Define a module-global observer and a WeakMap on elements to hold callbacks
-let sharedObserver = null;
-const entryCallbackMap = new WeakMap();
-const ensureSharedObserverExists = () => {
-  if (!sharedObserver) {
-    sharedObserver = new IntersectionObserver(entries => {
-      entries.forEach(entry => {
-        if (entry.isIntersecting) {
-          const entryCallback = entryCallbackMap.get(entry.target);
-          if (entryCallback) {
-            entryCallback();
-            entryCallbackMap.delete(entry.target);
-          }
-        }
-      });
-    });
-  }
-};
-function observeElement(element, callback) {
-  var _sharedObserver;
-  ensureSharedObserverExists();
-  entryCallbackMap.set(element, callback);
-  (_sharedObserver = sharedObserver) === null || _sharedObserver === void 0 || _sharedObserver.observe(element);
-  return () => {
-    if (element) {
-      var _sharedObserver2;
-      (_sharedObserver2 = sharedObserver) === null || _sharedObserver2 === void 0 || _sharedObserver2.unobserve(element);
-      entryCallbackMap.delete(element);
-    }
-  };
-}
-/**
- * Checks if the element was viewed and calls the onView callback.
- * NOTE: This hook only triggers the onView callback once for the element.
- * @param onView - callback to be called when the element is viewed
- * @typeParam T - extends Element to specify the type of element being observed
- */
-const useNotifyOnFirstView = _ref => {
-  let {
-    onView
-  } = _ref;
-  const isViewedRef = useRef(false);
-  const elementRef = useRef(null);
-  useEffect(() => {
-    const element = elementRef.current;
-    // If already viewed or element is not available, do nothing
-    if (!element || isViewedRef.current) {
-      return;
-    }
-    const callback = () => {
-      isViewedRef.current = true;
-      onView();
-    };
-
-    // If IntersectionObserver is not available, assume that the element is visible
-    if (!window.IntersectionObserver) {
-      callback();
-      return;
-    }
-    return observeElement(element, callback);
-  }, [onView]);
-  return {
-    elementRef
-  };
-};
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-var _ref2 = process.env.NODE_ENV === "production" ? {
-  name: "g8zzui",
-  styles: "cursor:progress"
-} : {
-  name: "4y1qki-AccessibleContainer",
-  styles: "cursor:progress;label:AccessibleContainer;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-function AccessibleContainer(_ref) {
-  let {
-    children,
-    label
-  } = _ref;
-  if (!label) {
-    return jsx(Fragment, {
-      children: children
-    });
-  }
-  return jsxs("div", {
-    css: _ref2,
-    children: [jsx("span", {
-      css: visuallyHidden,
-      children: label
-    }), jsx("div", {
-      "aria-hidden": true,
-      children: children
-    })]
-  });
-}
-
-// Border variables
-const borders = {
-  borderRadiusMd: 4
-};
-
-// eslint-disable-next-line import/no-anonymous-default-export
-var borders$1 = {
-  ...borders
-};
-
-/**
- * These values are based on AntD's breakpoints which follow BootStrap 4 media query rules.
- * The numerical values represent the min-width of the given size.
- * AntD values: https://ant.design/components/grid#col
- * Bootstrap: https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints
- */
-
-const breakpoints = {
-  xs: 0,
-  sm: 576,
-  md: 768,
-  lg: 992,
-  xl: 1200,
-  xxl: 1600
+const breakpoints = {
+  xs: 0,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  xxl: 1600
 };
 const mediaQueries = {
   xs: '@media (max-width: 575.98px)',
@@ -533,7 +185,6 @@ const responsive = {
   breakpoints,
   mediaQueries
 };
-var responsive$1 = responsive;
 
 // THIS FILE IS AUTOMATICALLY GENERATED. DO NOT EDIT.
 
@@ -595,6 +246,79 @@ const primitiveColors = {
 
 // THIS FILE IS AUTOMATICALLY GENERATED. DO NOT EDIT.
 
+const darkProtectedColorList = {
+  tagBackgroundBrown: 'rgba(171, 86, 2, 0.1000)',
+  tagBackgroundCharcoal: primitiveColors.grey300,
+  tagBackgroundCoral: 'rgba(240, 0, 64, 0.1000)',
+  tagBackgroundDefault: 'rgba(232, 236, 240, 0.0800)',
+  tagBackgroundIndigo: 'rgba(1, 68, 255, 0.1200)',
+  tagBackgroundLemon: 'rgba(255, 191, 1, 0.1800)',
+  tagBackgroundLime: 'rgba(2, 179, 2, 0.0800)',
+  tagBackgroundPink: 'rgba(240, 1, 150, 0.1200)',
+  tagBackgroundPurple: 'rgba(59, 0, 255, 0.1200)',
+  tagBackgroundTeal: 'rgba(2, 192, 150, 0.1200)',
+  tagBackgroundTurquoise: 'rgba(2, 192, 213, 0.1200)',
+  tagIconBrown: '#DAB594',
+  tagIconCharcoal: primitiveColors.grey650,
+  tagIconCoral: '#FF859D',
+  tagIconDefault: primitiveColors.grey350,
+  tagIconIndigo: '#99A2FF',
+  tagIconLemon: '#FFCD4D',
+  tagIconLime: '#70D083',
+  tagIconPink: '#F986C9',
+  tagIconPurple: '#B399FF',
+  tagIconTeal: '#0AD8B6',
+  tagIconTurquoise: '#1FD0F3',
+  tagTextBrown: '#DAB594',
+  tagTextCharcoal: primitiveColors.grey800,
+  tagTextCoral: '#FF859D',
+  tagTextDefault: primitiveColors.grey100,
+  tagTextIndigo: '#99A2FF',
+  tagTextLemon: '#FFCD4D',
+  tagTextLime: '#70D083',
+  tagTextPink: '#F986C9',
+  tagTextPurple: '#B399FF',
+  tagTextTeal: '#0AD8B6',
+  tagTextTurquoise: '#1FD0F3'
+};
+const lightProtectedColorList = {
+  tagBackgroundBrown: 'rgba(171, 86, 2, 0.0800)',
+  tagBackgroundCharcoal: primitiveColors.grey650,
+  tagBackgroundCoral: 'rgba(240, 0, 64, 0.0600)',
+  tagBackgroundDefault: 'rgba(0, 0, 59, 0.0500)',
+  tagBackgroundIndigo: 'rgba(1, 68, 255, 0.0600)',
+  tagBackgroundLemon: 'rgba(255, 191, 1, 0.1800)',
+  tagBackgroundLime: 'rgba(2, 179, 2, 0.0800)',
+  tagBackgroundPink: 'rgba(240, 1, 150, 0.0600)',
+  tagBackgroundPurple: 'rgba(59, 0, 255, 0.0500)',
+  tagBackgroundTeal: 'rgba(2, 192, 150, 0.0900)',
+  tagBackgroundTurquoise: 'rgba(2, 192, 213, 0.0900)',
+  tagIconBrown: '#815E46',
+  tagIconCharcoal: primitiveColors.grey350,
+  tagIconCoral: '#CA244E',
+  tagIconDefault: primitiveColors.grey600,
+  tagIconIndigo: '#3451B2',
+  tagIconLemon: '#915830',
+  tagIconLime: '#297C3B',
+  tagIconPink: '#C41C87',
+  tagIconPurple: '#5746AF',
+  tagIconTeal: '#067A6F',
+  tagIconTurquoise: '#0C7792',
+  tagTextBrown: '#815E46',
+  tagTextCharcoal: primitiveColors.grey100,
+  tagTextCoral: '#CA244E',
+  tagTextDefault: primitiveColors.grey800,
+  tagTextIndigo: '#3451B2',
+  tagTextLemon: '#915830',
+  tagTextLime: '#227534',
+  tagTextPink: '#C41C87',
+  tagTextPurple: '#5746AF',
+  tagTextTeal: '#00776B',
+  tagTextTurquoise: '#00708D'
+};
+
+// THIS FILE IS AUTOMATICALLY GENERATED. DO NOT EDIT.
+
 const darkColorList = {
   actionDangerDefaultBackgroundDefault: 'rgba(247, 146, 166, 0.0000)',
   actionDangerDefaultBackgroundHover: 'rgba(247, 146, 166, 0.0800)',
@@ -661,38 +385,20 @@ const darkColorList = {
   borderWarning: primitiveColors.yellow500,
   codeBackground: primitiveColors.grey650,
   overlayOverlay: 'rgba(31, 38, 45, 0.7200)',
-  progressFill: primitiveColors.grey600,
-  progressTrack: primitiveColors.grey700,
+  progressFill: primitiveColors.grey500,
+  progressTrack: primitiveColors.grey650,
   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.grey800,
-  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
+  tooltipBackgroundTooltip: primitiveColors.grey050
 };
 
 // THIS FILE IS AUTOMATICALLY GENERATED. DO NOT EDIT.
@@ -715,7 +421,7 @@ const lightColorList = {
   actionDefaultBackgroundHover: 'rgba(34, 114, 180, 0.0800)',
   actionDefaultBackgroundPress: 'rgba(34, 114, 180, 0.1600)',
   actionDefaultBorderDefault: primitiveColors.grey300,
-  actionDefaultBorderFocus: primitiveColors.blue700,
+  actionDefaultBorderFocus: primitiveColors.blue600,
   actionDefaultBorderHover: primitiveColors.blue600,
   actionDefaultBorderPress: primitiveColors.blue800,
   actionDefaultIconDefault: primitiveColors.grey600,
@@ -770,25 +476,7 @@ const lightColorList = {
   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,
+  textPlaceholder: primitiveColors.grey500,
   textPrimary: primitiveColors.grey800,
   textSecondary: primitiveColors.grey500,
   textValidationDanger: primitiveColors.red600,
@@ -799,10 +487,14 @@ const lightColorList = {
 
 // 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'
+  ai: {
+    /** For AI components, the top-left-oriented start color of gradient treatments. */
+    gradientStart: '#4299E0',
+    /** For AI components, the mid color of gradient treatments. */
+    gradientMid: '#CA42E0',
+    /** For AI components, the bottom-right-oriented end color of gradient treatments. */
+    gradientEnd: '#FF5F46'
+  }
 };
 const darkColors = {
   ...darkColorList,
@@ -817,6 +509,9 @@ const lightColors = {
 function getSemanticColors(isDarkMode) {
   return isDarkMode ? darkColors : lightColors;
 }
+function getProtectedSemanticColors(isDarkMode) {
+  return isDarkMode ? darkProtectedColorList : lightProtectedColorList;
+}
 
 // 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).`
@@ -862,7 +557,41 @@ const deprecatedSemanticColorsLight = {
   /** @deprecated Use `textSecondary` (FEINF-xxxx) */
   textValidationInfo: lightColorList.textSecondary,
   /** @deprecated Use `codeBackground` (FEINF-xxxx) */
-  typographyCodeBg: lightColorList.codeBackground
+  typographyCodeBg: lightColorList.codeBackground,
+  /** @deprecated Do not use Tag colors (go/updating-tag-colors). Ask in #dubois if you have any questions. */
+  tagBrown: primitiveColors.brown,
+  /** @deprecated Do not use Tag colors (go/updating-tag-colors). Ask in #dubois if you have any questions. */
+  tagCharcoal: primitiveColors.grey600,
+  /** @deprecated Do not use Tag colors (go/updating-tag-colors). Ask in #dubois if you have any questions. */
+  tagCoral: primitiveColors.coral,
+  /** @deprecated Do not use Tag colors (go/updating-tag-colors). Ask in #dubois if you have any questions. */
+  tagDefault: primitiveColors.grey100,
+  /** @deprecated Do not use Tag colors (go/updating-tag-colors). Ask in #dubois if you have any questions. */
+  tagHover: 'rgba(34, 114, 180, 0.0800)',
+  /** @deprecated Do not use Tag colors (go/updating-tag-colors). Ask in #dubois if you have any questions. */
+  tagIconHover: primitiveColors.grey600,
+  /** @deprecated Do not use Tag colors (go/updating-tag-colors). Ask in #dubois if you have any questions. */
+  tagIconPress: primitiveColors.grey600,
+  /** @deprecated Do not use Tag colors (go/updating-tag-colors). Ask in #dubois if you have any questions. */
+  tagIndigo: primitiveColors.indigo,
+  /** @deprecated Do not use Tag colors (go/updating-tag-colors). Ask in #dubois if you have any questions. */
+  tagInverse: primitiveColors.grey800,
+  /** @deprecated Do not use Tag colors (go/updating-tag-colors). Ask in #dubois if you have any questions. */
+  tagLemon: primitiveColors.lemon,
+  /** @deprecated Do not use Tag colors (go/updating-tag-colors). Ask in #dubois if you have any questions. */
+  tagLime: primitiveColors.lime,
+  /** @deprecated Do not use Tag colors (go/updating-tag-colors). Ask in #dubois if you have any questions. */
+  tagPink: primitiveColors.pink,
+  /** @deprecated Do not use Tag colors (go/updating-tag-colors). Ask in #dubois if you have any questions. */
+  tagPress: 'rgba(34, 114, 180, 0.1600)',
+  /** @deprecated Do not use Tag colors (go/updating-tag-colors). Ask in #dubois if you have any questions. */
+  tagPurple: primitiveColors.purple,
+  /** @deprecated Do not use Tag colors (go/updating-tag-colors). Ask in #dubois if you have any questions. */
+  tagTeal: primitiveColors.teal,
+  /** @deprecated Do not use Tag colors (go/updating-tag-colors). Ask in #dubois if you have any questions. */
+  tagText: primitiveColors.white,
+  /** @deprecated Do not use Tag colors (go/updating-tag-colors). Ask in #dubois if you have any questions. */
+  tagTurquoise: primitiveColors.turquoise
 };
 const deprecatedSemanticColorsDark = {
   backgroundValidationDanger: darkColorList.backgroundDanger,
@@ -873,11 +602,29 @@ const deprecatedSemanticColorsDark = {
   borderValidationWarning: darkColorList.borderWarning,
   tableRowHover: darkColorList.tableBackgroundUnselectedHover,
   textValidationInfo: darkColorList.textSecondary,
-  typographyCodeBg: darkColorList.codeBackground
+  typographyCodeBg: darkColorList.codeBackground,
+  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)',
+  tagIconHover: primitiveColors.grey350,
+  tagIconPress: primitiveColors.grey350,
+  tagIndigo: 'rgba(67, 74, 147, 0.8600)',
+  tagInverse: primitiveColors.grey800,
+  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)'
 };
 
 // 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 {
     ...deprecatedPrimitiveColors,
@@ -886,6 +633,40 @@ function getColors(isDarkMode) {
   };
 }
 
+function getGradients(isDarkMode) {
+  const colors = getColors(isDarkMode);
+  return {
+    aiBorderGradient: `linear-gradient(135deg, ${colors.branded.ai.gradientStart} 20.5%, ${colors.branded.ai.gradientMid} 46.91%, ${colors.branded.ai.gradientEnd} 79.5%)`
+  };
+}
+
+// Dark mode colors
+const blackAlpha87 = 'rgba(0, 0, 0, 0.87)';
+const blackAlpha61 = 'rgba(0, 0, 0, 0.61)';
+const blackAlpha45 = 'rgba(0, 0, 0, 0.45)';
+const blackAlpha26 = 'rgba(0, 0, 0, 0.26)';
+
+// Light mode colors
+const blackAlpha13 = 'rgba(0, 0, 0, 0.13)';
+const blackAlpha08 = 'rgba(0, 0, 0, 0.08)';
+const blackAlpha05 = 'rgba(0, 0, 0, 0.05)';
+const blackAlpha02 = 'rgba(0, 0, 0, 0.02)';
+const getShadows = isDarkMode => {
+  return isDarkMode ? {
+    xs: `0px 1px 0px 0px ${blackAlpha45}`,
+    sm: ` 0px 2px 3px -1px ${blackAlpha45}, 0px 1px 0px 0px ${blackAlpha26}`,
+    md: `0px 3px 6px 0px ${blackAlpha45}`,
+    lg: `0px 2px 16px 0px ${blackAlpha61}`,
+    xl: `0px 8px 40px 0px ${blackAlpha87}`
+  } : {
+    xs: `0px 1px 0px 0px ${blackAlpha05}`,
+    sm: ` 0px 2px 3px -1px ${blackAlpha05}, 0px 1px 0px 0px ${blackAlpha02}`,
+    md: `0px 3px 6px 0px ${blackAlpha05}`,
+    lg: `0px 2px 16px 0px ${blackAlpha08}`,
+    xl: `0px 8px 40px 0px ${blackAlpha13}`
+  };
+};
+
 const FONT_SIZE_BASE = 13;
 
 // Less variables that are used by AntD
@@ -922,16 +703,23 @@ function getTheme(isDarkMode) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultOptions;
   return {
     colors: getColors(isDarkMode),
-    spacing: spacing$1,
+    gradients: getGradients(isDarkMode),
+    spacing,
     general: {
       ...antdGeneralVariables,
       ...getShadowVariables(isDarkMode)
     },
+    shadows: getShadows(isDarkMode),
     typography,
-    borders: borders$1,
-    responsive: responsive$1,
+    legacyBorders: getLegacyBorders(),
+    // TODO: Update to use `getBorders`
+    borders: getBorders(),
+    responsive,
     isDarkMode,
-    options
+    options,
+    DU_BOIS_INTERNAL_ONLY: {
+      colors: getProtectedSemanticColors(isDarkMode)
+    }
   };
 }
 
@@ -1062,9 +850,11 @@ const DesignSystemProvider = _ref2 => {
           getPopupContainer,
           virtual: !disableLegacyAntVirtualization
         },
-        children: jsx(DesignSystemContext.Provider, {
-          value: value,
-          children: children
+        children: jsx(TooltipProvider, {
+          children: jsx(DesignSystemContext.Provider, {
+            value: value,
+            children: children
+          })
         })
       })
     })
@@ -1158,9 +948,35 @@ function useDesignSystemContext() {
   return useContext(DesignSystemContext);
 }
 
-function useDesignSystemFlags() {
-  const context = useDesignSystemContext();
-  return context.flags;
+/**
+ * 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;
+  }
+};
+
+const getDebugOutlineStyles = theme => /*#__PURE__*/css({
+  outline: `1px dashed ${theme.isDarkMode ? theme.colors.lime : theme.colors.lime}`,
+  outlineOffset: '2px'
+}, process.env.NODE_ENV === "production" ? "" : ";label:getDebugOutlineStyles;");
+function addDebugOutlineIfEnabled() {
+  return safex('databricks.fe.designsystem.showDebugOutline', false) ? {
+    'data-dubois-show-outline': true
+  } : {};
+}
+function addDebugOutlineStylesIfEnabled(theme) {
+  return safex('databricks.fe.designsystem.showDebugOutline', false) ? getDebugOutlineStyles(theme) : {};
 }
 
 const uniqueId = () => new Date().getTime() + Array(16).fill('').map(() => parseInt((Math.random() * 10).toString())).join('');
@@ -1169,7 +985,7 @@ function useUniqueId() {
   return useState(() => `${prefix}-${uniqueId()}`)[0];
 }
 
-const getIconVariantStyles = (theme, linearGradientId, color) => {
+const getIconVariantStyles = (theme, color) => {
   switch (color) {
     case 'success':
       return {
@@ -1186,7 +1002,7 @@ const getIconVariantStyles = (theme, linearGradientId, color) => {
     case 'ai':
       return {
         'svg *': {
-          fill: `url(#${linearGradientId})`
+          fill: 'var(--ai-icon-gradient)'
         }
       };
     default:
@@ -1218,7 +1034,11 @@ const Icon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       jsxs(Fragment, {
         children: [jsx(Component, {
           fill: "none",
-          ...iconProps
+          ...iconProps,
+          style: color === 'ai' ? {
+            ['--ai-icon-gradient']: `url(#${linearGradientId})`,
+            ...iconProps.style
+          } : iconProps.style
         }), color === 'ai' && jsx("svg", {
           width: "0",
           height: "0",
@@ -1227,14 +1047,19 @@ const Icon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
           children: jsx("defs", {
             children: jsxs("linearGradient", {
               id: linearGradientId,
+              x1: "0%",
+              y1: "0%",
               x2: "100%",
               y2: "100%",
               children: [jsx("stop", {
-                offset: "0%",
-                stopColor: theme.colors.branded.aiGradientStart
+                offset: "20.5%",
+                stopColor: theme.colors.branded.ai.gradientStart
+              }), jsx("stop", {
+                offset: "46.91%",
+                stopColor: theme.colors.branded.ai.gradientMid
               }), jsx("stop", {
-                offset: "100%",
-                stopColor: theme.colors.branded.aiGradientEnd
+                offset: "79.5%",
+                stopColor: theme.colors.branded.ai.gradientEnd
               })]
             })
           })
@@ -1244,11 +1069,12 @@ const Icon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   } : undefined, [Component, color, linearGradientId, theme]);
   return jsx(DesignSystemAntDConfigProvider, {
     children: jsx(AntDIcon, {
+      ...addDebugOutlineIfEnabled(),
       ref: forwardedRef,
       "aria-hidden": "true",
       css: /*#__PURE__*/css({
         fontSize: theme.general.iconFontSize,
-        ...getIconVariantStyles(theme, linearGradientId, color)
+        ...getIconVariantStyles(theme, color)
       }, process.env.NODE_ENV === "production" ? "" : ";label:Icon;"),
       component: MemoizedComponent,
       style: {
@@ -1271,7 +1097,7 @@ function SvgCheckIcon(props) {
     children: jsx("path", {
       fill: "currentColor",
       fillRule: "evenodd",
-      d: "m15.06 3.56-9.53 9.531L1 8.561 2.06 7.5l3.47 3.47L14 2.5l1.06 1.06Z",
+      d: "m15.06 3.56-9.53 9.531L1 8.561 2.06 7.5l3.47 3.47L14 2.5z",
       clipRule: "evenodd"
     })
   });
@@ -1284,7 +1110,6 @@ const CheckIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   });
 });
 CheckIcon.displayName = 'CheckIcon';
-var CheckIcon$1 = CheckIcon;
 
 function SvgChevronLeftIcon(props) {
   return jsx("svg", {
@@ -1297,7 +1122,7 @@ function SvgChevronLeftIcon(props) {
     children: jsx("path", {
       fill: "currentColor",
       fillRule: "evenodd",
-      d: "M7.083 8 10 10.947 8.958 12 5 8l3.958-4L10 5.053 7.083 8Z",
+      d: "M7.083 8 10 10.947 8.958 12 5 8l3.958-4L10 5.053z",
       clipRule: "evenodd"
     })
   });
@@ -1310,7 +1135,6 @@ const ChevronLeftIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   });
 });
 ChevronLeftIcon.displayName = 'ChevronLeftIcon';
-var ChevronLeftIcon$1 = ChevronLeftIcon;
 
 function SvgChevronRightIcon(props) {
   return jsx("svg", {
@@ -1323,7 +1147,7 @@ function SvgChevronRightIcon(props) {
     children: jsx("path", {
       fill: "currentColor",
       fillRule: "evenodd",
-      d: "M8.917 8 6 5.053 7.042 4 11 8l-3.958 4L6 10.947 8.917 8Z",
+      d: "M8.917 8 6 5.053 7.042 4 11 8l-3.958 4L6 10.947z",
       clipRule: "evenodd"
     })
   });
@@ -1336,7 +1160,6 @@ const ChevronRightIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   });
 });
 ChevronRightIcon.displayName = 'ChevronRightIcon';
-var ChevronRightIcon$1 = ChevronRightIcon;
 
 function SvgCloseIcon(props) {
   return jsx("svg", {
@@ -1349,7 +1172,7 @@ function SvgCloseIcon(props) {
     children: jsx("path", {
       fill: "currentColor",
       fillRule: "evenodd",
-      d: "M6.97 8.03 2 3.06 3.06 2l4.97 4.97L13 2l1.06 1.06-4.969 4.97 4.97 4.97L13 14.06 8.03 9.092l-4.97 4.97L2 13l4.97-4.97Z",
+      d: "M6.97 8.03 2 3.06 3.06 2l4.97 4.97L13 2l1.06 1.06-4.969 4.97 4.97 4.97L13 14.06 8.03 9.092l-4.97 4.97L2 13z",
       clipRule: "evenodd"
     })
   });
@@ -1362,9 +1185,8 @@ const CloseIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   });
 });
 CloseIcon.displayName = 'CloseIcon';
-var CloseIcon$1 = CloseIcon;
 
-function SvgCursorIcon(props) {
+function SvgDangerIcon(props) {
   return jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
@@ -1372,183 +1194,28 @@ function SvgCursorIcon(props) {
     fill: "none",
     viewBox: "0 0 16 16",
     ...props,
-    children: [jsx("g", {
-      clipPath: "url(#CursorIcon_svg__a)",
-      children: jsx("path", {
-        fill: "currentColor",
-        fillRule: "evenodd",
-        d: "M1.22 1.22a.75.75 0 0 1 .802-.169l13.5 5.25a.75.75 0 0 1-.043 1.413L9.597 9.597l-1.883 5.882a.75.75 0 0 1-1.413.043l-5.25-13.5a.75.75 0 0 1 .169-.802Zm1.847 1.847 3.864 9.937 1.355-4.233a.75.75 0 0 1 .485-.485l4.233-1.355-9.937-3.864Z",
-        clipRule: "evenodd"
-      })
-    }), jsx("defs", {
-      children: jsx("clipPath", {
-        children: jsx("path", {
-          fill: "#fff",
-          d: "M16 0H0v16h16z"
-        })
-      })
+    children: [jsx("path", {
+      fill: "currentColor",
+      d: "M7.248 10.748a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0M8.748 4.998v4h-1.5v-4z"
+    }), jsx("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "m11.533 15.776 4.243-4.243a.75.75 0 0 0 .22-.53v-6.01a.75.75 0 0 0-.22-.53L11.533.22a.75.75 0 0 0-.53-.22h-6.01a.75.75 0 0 0-.53.22L.22 4.462a.75.75 0 0 0-.22.53v6.011c0 .199.079.39.22.53l4.242 4.243c.141.14.332.22.53.22h6.011a.75.75 0 0 0 .53-.22m2.963-10.473v5.39l-3.804 3.803H5.303L1.5 10.692V5.303L5.303 1.5h5.39z",
+      clipRule: "evenodd"
     })]
   });
 }
-const CursorIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+const DangerIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   return jsx(Icon, {
     ref: forwardedRef,
     ...props,
-    component: SvgCursorIcon
+    component: SvgDangerIcon
   });
 });
-CursorIcon.displayName = 'CursorIcon';
-var CursorIcon$1 = CursorIcon;
+DangerIcon.displayName = 'DangerIcon';
 
-function SvgDangerIcon(props) {
-  return jsxs("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    viewBox: "0 0 16 16",
-    ...props,
-    children: [jsx("path", {
-      fill: "currentColor",
-      d: "M7.248 10.748a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0ZM8.748 4.998v4h-1.5v-4h1.5Z"
-    }), jsx("path", {
-      fill: "currentColor",
-      fillRule: "evenodd",
-      d: "m11.533 15.776 4.243-4.243a.75.75 0 0 0 .22-.53v-6.01a.75.75 0 0 0-.22-.53L11.533.22a.75.75 0 0 0-.53-.22h-6.01a.75.75 0 0 0-.53.22L.22 4.462a.75.75 0 0 0-.22.53v6.011c0 .199.079.39.22.53l4.242 4.243c.141.14.332.22.53.22h6.011a.75.75 0 0 0 .53-.22Zm2.963-10.473v5.39l-3.804 3.803H5.303L1.5 10.692V5.303L5.303 1.5h5.39l3.803 3.803Z",
-      clipRule: "evenodd"
-    })]
-  });
-}
-const DangerIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
-  return jsx(Icon, {
-    ref: forwardedRef,
-    ...props,
-    component: SvgDangerIcon
-  });
-});
-DangerIcon.displayName = 'DangerIcon';
-var DangerIcon$1 = DangerIcon;
-
-function SvgFaceFrownIcon(props) {
-  return jsxs("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    viewBox: "0 0 16 16",
-    ...props,
-    children: [jsxs("g", {
-      fill: "currentColor",
-      clipPath: "url(#FaceFrownIcon_svg__a)",
-      children: [jsx("path", {
-        d: "M6 5.25a.75.75 0 0 0 0 1.5h.007a.75.75 0 0 0 0-1.5H6ZM9.25 6a.75.75 0 0 1 .75-.75h.007a.75.75 0 0 1 0 1.5H10A.75.75 0 0 1 9.25 6ZM10.07 11.12a.75.75 0 0 0 1.197-.903l-.001-.001v-.001l-.003-.003-.005-.006-.015-.02a2.95 2.95 0 0 0-.217-.246 4.717 4.717 0 0 0-.627-.546C9.86 9 9.04 8.584 8 8.584s-1.858.416-2.4.81a4.716 4.716 0 0 0-.795.733 2.87 2.87 0 0 0-.048.06l-.015.019-.005.006-.002.003-.031.044.03-.042a.75.75 0 1 0 1.22.875 3.219 3.219 0 0 1 .529-.485c.375-.273.89-.523 1.517-.523.627 0 1.142.25 1.517.523a3.219 3.219 0 0 1 .529.485l.021.025.002.003Z"
-      }), jsx("path", {
-        fillRule: "evenodd",
-        d: "M8 .583a7.417 7.417 0 1 0 0 14.834A7.417 7.417 0 0 0 8 .583ZM2.083 8a5.917 5.917 0 1 1 11.834 0A5.917 5.917 0 0 1 2.083 8Z",
-        clipRule: "evenodd"
-      })]
-    }), jsx("defs", {
-      children: jsx("clipPath", {
-        children: jsx("path", {
-          fill: "#fff",
-          d: "M0 0h16v16H0z"
-        })
-      })
-    })]
-  });
-}
-const FaceFrownIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
-  return jsx(Icon, {
-    ref: forwardedRef,
-    ...props,
-    component: SvgFaceFrownIcon
-  });
-});
-FaceFrownIcon.displayName = 'FaceFrownIcon';
-var FaceFrownIcon$1 = FaceFrownIcon;
-
-function SvgFaceNeutralIcon(props) {
-  return jsxs("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    viewBox: "0 0 16 16",
-    ...props,
-    children: [jsxs("g", {
-      fill: "currentColor",
-      fillRule: "evenodd",
-      clipPath: "url(#FaceNeutralIcon_svg__a)",
-      clipRule: "evenodd",
-      children: [jsx("path", {
-        d: "M8 2.083a5.917 5.917 0 1 0 0 11.834A5.917 5.917 0 0 0 8 2.084ZM.583 8a7.417 7.417 0 1 1 14.834 0A7.417 7.417 0 0 1 .583 8Z"
-      }), jsx("path", {
-        d: "M4.583 10a.75.75 0 0 1 .75-.75h5.334a.75.75 0 1 1 0 1.5H5.333a.75.75 0 0 1-.75-.75ZM5.25 6A.75.75 0 0 1 6 5.25h.007a.75.75 0 0 1 0 1.5H6A.75.75 0 0 1 5.25 6ZM9.25 6a.75.75 0 0 1 .75-.75h.007a.75.75 0 1 1 0 1.5H10A.75.75 0 0 1 9.25 6Z"
-      })]
-    }), jsx("defs", {
-      children: jsx("clipPath", {
-        children: jsx("path", {
-          fill: "#fff",
-          d: "M0 0h16v16H0z"
-        })
-      })
-    })]
-  });
-}
-const FaceNeutralIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
-  return jsx(Icon, {
-    ref: forwardedRef,
-    ...props,
-    component: SvgFaceNeutralIcon
-  });
-});
-FaceNeutralIcon.displayName = 'FaceNeutralIcon';
-var FaceNeutralIcon$1 = FaceNeutralIcon;
-
-function SvgFaceSmileIcon(props) {
-  return jsxs("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    viewBox: "0 0 16 16",
-    ...props,
-    children: [jsxs("g", {
-      fill: "currentColor",
-      clipPath: "url(#FaceSmileIcon_svg__a)",
-      children: [jsx("path", {
-        fillRule: "evenodd",
-        d: "M8 2.083a5.917 5.917 0 1 0 0 11.834A5.917 5.917 0 0 0 8 2.084ZM.583 8a7.417 7.417 0 1 1 14.834 0A7.417 7.417 0 0 1 .583 8Z",
-        clipRule: "evenodd"
-      }), jsx("path", {
-        d: "M4.883 8.733a.75.75 0 0 1 1.048.147l.002.003.021.026a3.216 3.216 0 0 0 .529.485c.375.273.89.523 1.517.523.627 0 1.142-.25 1.517-.523a3.215 3.215 0 0 0 .55-.511.75.75 0 0 1 1.2.9l.029-.042-.03.043-.001.002-.002.002-.005.007-.015.019a3.878 3.878 0 0 1-.217.247c-.144.15-.354.348-.627.546-.54.393-1.359.81-2.399.81s-1.858-.417-2.4-.81a4.716 4.716 0 0 1-.795-.734 2.643 2.643 0 0 1-.048-.059l-.015-.02-.005-.006-.002-.002v-.002h-.002a.75.75 0 0 1 .15-1.05Z"
-      }), jsx("path", {
-        fillRule: "evenodd",
-        d: "M5.25 6A.75.75 0 0 1 6 5.25h.007a.75.75 0 0 1 0 1.5H6A.75.75 0 0 1 5.25 6ZM9.25 6a.75.75 0 0 1 .75-.75h.007a.75.75 0 1 1 0 1.5H10A.75.75 0 0 1 9.25 6Z",
-        clipRule: "evenodd"
-      })]
-    }), jsx("defs", {
-      children: jsx("clipPath", {
-        children: jsx("path", {
-          fill: "#fff",
-          d: "M0 0h16v16H0z"
-        })
-      })
-    })]
-  });
-}
-const FaceSmileIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
-  return jsx(Icon, {
-    ref: forwardedRef,
-    ...props,
-    component: SvgFaceSmileIcon
-  });
-});
-FaceSmileIcon.displayName = 'FaceSmileIcon';
-var FaceSmileIcon$1 = FaceSmileIcon;
-
-function SvgLoadingIcon(props) {
-  return jsx("svg", {
+function SvgLoadingIcon(props) {
+  return jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
@@ -1558,7 +1225,7 @@ function SvgLoadingIcon(props) {
     children: jsx("path", {
       fill: "currentColor",
       fillRule: "evenodd",
-      d: "M23.212 12a.788.788 0 0 1-.789-.788 9.57 9.57 0 0 0-.757-3.751 9.662 9.662 0 0 0-5.129-5.129 9.587 9.587 0 0 0-3.749-.755.788.788 0 0 1 0-1.577c1.513 0 2.983.296 4.365.882a11.128 11.128 0 0 1 3.562 2.403 11.157 11.157 0 0 1 3.283 7.927.785.785 0 0 1-.786.788Z",
+      d: "M23.212 12a.79.79 0 0 1-.789-.788 9.6 9.6 0 0 0-.757-3.751 9.66 9.66 0 0 0-5.129-5.129 9.6 9.6 0 0 0-3.749-.755.788.788 0 0 1 0-1.577c1.513 0 2.983.296 4.365.882a11.1 11.1 0 0 1 3.562 2.403 11.157 11.157 0 0 1 3.283 7.927.785.785 0 0 1-.786.788",
       clipRule: "evenodd"
     })
   });
@@ -1571,33 +1238,6 @@ const LoadingIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   });
 });
 LoadingIcon.displayName = 'LoadingIcon';
-var LoadingIcon$1 = LoadingIcon;
-
-function SvgMegaphoneIcon(props) {
-  return jsx("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    viewBox: "0 0 18 18",
-    ...props,
-    children: jsx("path", {
-      fill: "currentColor",
-      fillRule: "evenodd",
-      d: "M16.25 2a.75.75 0 0 0-1.248-.56l-4.287 3.81H4A2.75 2.75 0 0 0 1.25 8v2A2.75 2.75 0 0 0 4 12.75h1.75V16a.75.75 0 0 0 1.5 0v-3.25h3.465l4.287 3.81A.75.75 0 0 0 16.25 16V2Zm-4.752 4.56 3.252-2.89v10.66l-3.252-2.89a.75.75 0 0 0-.498-.19H4c-.69 0-1.25-.56-1.25-1.25V8c0-.69.56-1.25 1.25-1.25h7a.75.75 0 0 0 .498-.19Z",
-      clipRule: "evenodd"
-    })
-  });
-}
-const MegaphoneIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
-  return jsx(Icon, {
-    ref: forwardedRef,
-    ...props,
-    component: SvgMegaphoneIcon
-  });
-});
-MegaphoneIcon.displayName = 'MegaphoneIcon';
-var MegaphoneIcon$1 = MegaphoneIcon;
 
 function SvgNewWindowIcon(props) {
   return jsxs("svg", {
@@ -1609,10 +1249,10 @@ function SvgNewWindowIcon(props) {
     ...props,
     children: [jsx("path", {
       fill: "currentColor",
-      d: "M10 1h5v5h-1.5V3.56L8.53 8.53 7.47 7.47l4.97-4.97H10V1Z"
+      d: "M10 1h5v5h-1.5V3.56L8.53 8.53 7.47 7.47l4.97-4.97H10z"
     }), jsx("path", {
       fill: "currentColor",
-      d: "M1 2.75A.75.75 0 0 1 1.75 2H8v1.5H2.5v10h10V8H14v6.25a.75.75 0 0 1-.75.75H1.75a.75.75 0 0 1-.75-.75V2.75Z"
+      d: "M1 2.75A.75.75 0 0 1 1.75 2H8v1.5H2.5v10h10V8H14v6.25a.75.75 0 0 1-.75.75H1.75a.75.75 0 0 1-.75-.75z"
     })]
   });
 }
@@ -1624,7 +1264,6 @@ const NewWindowIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   });
 });
 NewWindowIcon.displayName = 'NewWindowIcon';
-var NewWindowIcon$1 = NewWindowIcon;
 
 function SvgWarningIcon(props) {
   return jsxs("svg", {
@@ -1636,11 +1275,11 @@ function SvgWarningIcon(props) {
     ...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"
+      d: "M7.25 10V6.5h1.5V10zM8 12.5A.75.75 0 1 0 8 11a.75.75 0 0 0 0 1.5"
     }), 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",
+      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 1m0 2.245L2.052 13.5h11.896z",
       clipRule: "evenodd"
     })]
   });
@@ -1653,405 +1292,1039 @@ const WarningIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   });
 });
 WarningIcon.displayName = 'WarningIcon';
-var WarningIcon$1 = WarningIcon;
 
-const {
-  Text: AntDText$1
-} = Typography$1;
-function getTextEmotionStyles$1(theme, props) {
-  return /*#__PURE__*/css({
-    '&&': {
-      display: 'block',
-      fontSize: theme.typography.fontSizeSm,
-      lineHeight: theme.typography.lineHeightSm,
-      color: theme.colors.textSecondary,
-      ...(props.withoutMargins && {
-        '&&': {
-          marginTop: 0,
-          marginBottom: 0
-        }
-      })
-    }
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getTextEmotionStyles;");
+// Use Symbol to correctly handled null/undefined as stable values
+const NOT_INITIALIZED = Symbol('NOT_INITIALIZED');
+
+/**
+ * Use to keep a stable value on the first mount of a component
+ * that cannot change.
+ */
+function useStable(valueCallback) {
+  const ref = useRef(NOT_INITIALIZED);
+  if (ref.current === NOT_INITIALIZED) {
+    const val = valueCallback();
+    ref.current = val;
+    return val;
+  }
+  return ref.current;
 }
-function Hint(userProps) {
-  const {
-    dangerouslySetAntdProps,
-    bold,
-    withoutMargins,
-    color,
-    ...props
-  } = userProps;
-  const {
-    theme
-  } = useDesignSystemTheme();
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(AntDText$1, {
-      ...props,
-      css: getTextEmotionStyles$1(theme, userProps),
-      ...dangerouslySetAntdProps
-    })
-  });
+let sequentialCounter = 0;
+function useStableUid() {
+  return useStable(() => sequentialCounter++);
 }
 
-const getLinkStyles$1 = (theme, clsPrefix) => {
-  const classTypography = `.${clsPrefix}-typography`;
-  const styles = {
-    [`&${classTypography}, &${classTypography}:focus`]: {
-      color: theme.colors.actionTertiaryTextDefault
-    },
-    [`&${classTypography}:hover, &${classTypography}:hover .anticon`]: {
-      color: theme.colors.actionTertiaryTextHover,
-      textDecoration: 'underline'
-    },
-    [`&${classTypography}:active, &${classTypography}:active .anticon`]: {
-      color: theme.colors.actionTertiaryTextPress,
-      textDecoration: 'underline'
-    },
-    [`&${classTypography}:focus-visible`]: {
-      textDecoration: 'underline'
-    },
-    '.anticon': {
-      fontSize: 12,
-      verticalAlign: 'baseline'
+/** Props for UI components that support a "loading" state. */
+
+/**
+ * A handler for integrating UI components with external latency instrumentation.
+ * If provided via `LoadingStateContext`, hooks will be called whenever child
+ * components in a "loading" state are mounted and unmounted.
+ */
+
+const LoadingStateContext = /*#__PURE__*/createContext(null);
+/**
+ * Indicates that the containing component is in a "loading" state, i.e. that the UI
+ * displayed to the user is semantically equivalent to them seeing a spinner or a
+ * loading indicator. This means that the UI is not in its final settled state yet.
+ *
+ * All components that are in a "loading" state should render a `<LoadingState>`
+ * component, preferrably with an appropriate description.
+ *
+ * By itself, `<LoadingState>` doesn't do anything, but if used within `LoadingStateContext`,
+ * it will call the provided `startLoading()`/`endLoading()` hooks when the component
+ * is mounted/unmounted, which can be used to integrate existing latency instrumentation.
+ */
+const LoadingState = _ref => {
+  let {
+    description = 'Generic UI loading state'
+  } = _ref;
+  const uid = useStableUid();
+  const loadingStateContext = useContext(LoadingStateContext);
+  useLayoutEffect(() => {
+    // mount
+    if (loadingStateContext) {
+      loadingStateContext.startLoading(uid, description);
     }
-  };
-  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getLinkStyles;");
-};
-const getEllipsisNewTabLinkStyles = () => {
-  const styles = {
-    paddingRight: 'calc(2px + 1em)',
-    // 1em for icon
-    position: 'relative'
-  };
-  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getEllipsisNewTabLinkStyles;");
+    return () => {
+      // unmount
+      if (loadingStateContext) {
+        loadingStateContext.endLoading(uid);
+      }
+    };
+  }, [uid, description, loadingStateContext]);
+  return null;
 };
-const getIconStyles = theme => {
+
+const rotate = keyframes({
+  '0%': {
+    transform: 'rotate(0deg) translate3d(0, 0, 0)'
+  },
+  '100%': {
+    transform: 'rotate(360deg) translate3d(0, 0, 0)'
+  }
+});
+const cssSpinner = function (theme) {
+  let frameRate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 60;
+  let delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  let animationDuration = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+  let inheritColor = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   const styles = {
-    marginLeft: 2,
-    color: theme.colors.actionTertiaryTextDefault
+    animation: `${rotate} ${animationDuration}s steps(${frameRate}, end) infinite`,
+    ...(inheritColor ? {
+      color: 'inherit'
+    } : {
+      color: theme.colors.textSecondary
+    }),
+    animationDelay: `${delay}s`,
+    '@media only percy': {
+      animation: 'none'
+    }
   };
-  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getIconStyles;");
+  return /*#__PURE__*/css(importantify(styles), process.env.NODE_ENV === "production" ? "" : ";label:cssSpinner;");
 };
-const getEllipsisIconStyles = useNewIcons => {
-  const styles = {
-    position: 'absolute',
-    right: 0,
-    bottom: 0,
-    top: 0,
-    display: 'flex',
-    alignItems: 'center',
-    ...(useNewIcons && {
-      fontSize: 12
-    })
-  };
-  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getEllipsisIconStyles;");
-};
-const Link = /*#__PURE__*/forwardRef(function Link(_ref, ref) {
+const Spinner = _ref => {
   let {
-    dangerouslySetAntdProps,
+    frameRate,
+    size = 'default',
+    delay,
+    className: propClass,
+    label,
+    animationDuration,
+    inheritColor,
+    loading = true,
+    loadingDescription = 'Spinner',
     ...props
   } = _ref;
   const {
-    children,
-    openInNewTab,
-    ...restProps
-  } = props;
-  const {
-    theme,
-    classNamePrefix
-  } = useDesignSystemTheme();
-  const newTabProps = {
-    rel: 'noopener noreferrer',
-    target: '_blank'
-  };
-  const linkProps = openInNewTab ? {
-    ...restProps,
-    ...newTabProps
-  } : {
-    ...restProps
-  };
-  const linkStyles = props.ellipsis && openInNewTab ? [getLinkStyles$1(theme, classNamePrefix), getEllipsisNewTabLinkStyles()] : getLinkStyles$1(theme, classNamePrefix);
-  const iconStyles = props.ellipsis ? [getIconStyles(theme), getEllipsisIconStyles()] : getIconStyles(theme);
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsxs(Typography$1.Link, {
-      "aria-disabled": linkProps.disabled,
-      css: linkStyles,
-      ref: ref,
-      ...linkProps,
-      ...dangerouslySetAntdProps,
-      children: [children, openInNewTab ? jsx(NewWindowIcon$1, {
-        css: iconStyles,
-        ...newTabProps
-      }) : null]
-    })
-  });
-});
-
-const {
-  Paragraph: AntDParagraph
-} = Typography$1;
-function getParagraphEmotionStyles(theme, props) {
-  return /*#__PURE__*/css({
-    '&&': {
-      fontSize: theme.typography.fontSizeBase,
-      fontWeight: theme.typography.typographyRegularFontWeight,
-      lineHeight: theme.typography.lineHeightBase,
-      color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
-    },
-    '& .anticon': {
-      verticalAlign: 'text-bottom'
-    }
-  }, props.disabled && {
-    '&&': {
-      color: theme.colors.actionDisabledText
-    }
-  }, props.withoutMargins && {
-    '&&': {
-      marginTop: 0,
-      marginBottom: 0
-    }
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getParagraphEmotionStyles;");
-}
-function Paragraph(userProps) {
-  const {
-    dangerouslySetAntdProps,
-    withoutMargins,
-    color,
-    ...props
-  } = userProps;
-  const {
+    classNamePrefix,
     theme
   } = useDesignSystemTheme();
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(AntDParagraph, {
+
+  // We use Antd classes to keep styling unchanged
+  // TODO(FEINF-1407): We want to move away from Antd classes and use Emotion for styling in the future
+  const sizeSuffix = size === 'small' ? '-sm' : size === 'large' ? '-lg' : '';
+  const sizeClass = sizeSuffix ? `${classNamePrefix}-spin${sizeSuffix}` : '';
+  const wrapperClass = `${propClass || ''} ${classNamePrefix}-spin ${sizeClass} ${classNamePrefix}-spin-spinning ${DU_BOIS_ENABLE_ANIMATION_CLASSNAME}`.trim();
+  const className = `${classNamePrefix}-spin-dot ${DU_BOIS_ENABLE_ANIMATION_CLASSNAME}`.trim();
+  return (
+    // className has to follow {...props}, otherwise is `css` prop is passed down it will overwrite our className
+    jsxs("div", {
       ...props,
-      className: props.className,
-      css: getParagraphEmotionStyles(theme, userProps),
-      ...dangerouslySetAntdProps
+      className: wrapperClass,
+      children: [loading && jsx(LoadingState, {
+        description: loadingDescription
+      }), jsx(AccessibleContainer, {
+        label: label,
+        children: jsx(LoadingIcon, {
+          "aria-hidden": "false",
+          css: cssSpinner(theme, frameRate, delay, animationDuration, inheritColor),
+          className: className
+        })
+      })]
     })
-  });
-}
+  );
+};
 
-const {
-  Text: AntDText
-} = Typography$1;
-function getTextEmotionStyles(theme, props) {
-  return /*#__PURE__*/css({
-    '&&': {
-      fontSize: theme.typography.fontSizeBase,
-      fontWeight: theme.typography.typographyRegularFontWeight,
-      lineHeight: theme.typography.lineHeightBase,
-      color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
-    }
-  }, props.disabled && {
-    '&&': {
-      color: theme.colors.actionDisabledText
-    }
-  }, props.hint && {
-    '&&': {
-      fontSize: theme.typography.fontSizeSm,
-      lineHeight: theme.typography.lineHeightSm
+const getDialogComboboxOptionLabelWidth = (theme, width) => {
+  const paddingLeft = theme.spacing.xs + theme.spacing.sm;
+  const iconWidth = theme.spacing.md;
+  const labelMarginLeft = theme.spacing.sm;
+  if (typeof width === 'string') {
+    return `calc(${width} - ${paddingLeft + iconWidth + labelMarginLeft}px)`;
+  }
+  return width - paddingLeft + iconWidth + labelMarginLeft;
+};
+function isOptionDisabled(option) {
+  return option.hasAttribute('disabled') && option.getAttribute('disabled') !== 'false';
+}
+function highlightFirstNonDisabledOption(firstOptionItem) {
+  let startAt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'start';
+  let previousSelection = arguments.length > 2 ? arguments[2] : undefined;
+  if (isOptionDisabled(firstOptionItem)) {
+    const firstHighlightableOption = findClosestOptionSibling(firstOptionItem, startAt === 'end' ? 'previous' : 'next');
+    if (firstHighlightableOption) {
+      highlightOption(firstHighlightableOption, previousSelection);
     }
-  }, props.bold && {
-    '&&': {
-      fontSize: theme.typography.fontSizeBase,
-      fontWeight: theme.typography.typographyBoldFontWeight,
-      lineHeight: theme.typography.lineHeightBase
+  } else {
+    highlightOption(firstOptionItem, previousSelection);
+  }
+}
+function findClosestOptionSibling(element, direction) {
+  const nextSibling = direction === 'previous' ? element.previousElementSibling : element.nextElementSibling;
+  if ((nextSibling === null || nextSibling === void 0 ? void 0 : nextSibling.getAttribute('role')) === 'option') {
+    if (isOptionDisabled(nextSibling)) {
+      return findClosestOptionSibling(nextSibling, direction);
     }
-  }, props.code && {
-    '&& > code': {
-      color: theme.colors.textPrimary,
-      fontSize: theme.typography.fontSizeBase,
-      lineHeight: theme.typography.lineHeightBase,
-      background: theme.colors.typographyCodeBg,
-      fontFamily: 'monospace',
-      borderRadius: theme.borders.borderRadiusMd,
-      padding: '2px 4px',
-      border: 'unset',
-      margin: 0
+    return nextSibling;
+  } else if (nextSibling) {
+    let nextOptionSibling = nextSibling;
+    while (nextOptionSibling && (nextOptionSibling.getAttribute('role') !== 'option' || isOptionDisabled(nextOptionSibling))) {
+      nextOptionSibling = direction === 'previous' ? nextOptionSibling.previousElementSibling : nextOptionSibling.nextElementSibling;
     }
-  }, props.size && {
-    '&&': (() => {
-      switch (props.size) {
-        case 'xxl':
-          return {
-            fontSize: theme.typography.fontSizeXxl,
-            lineHeight: theme.typography.lineHeightXxl,
-            '& .anticon': {
-              lineHeight: theme.typography.lineHeightXxl,
-              verticalAlign: 'middle'
-            }
-          };
-        case 'xl':
-          return {
-            fontSize: theme.typography.fontSizeXl,
-            lineHeight: theme.typography.lineHeightXl,
-            '& .anticon': {
-              lineHeight: theme.typography.lineHeightXl,
-              verticalAlign: 'middle'
-            }
-          };
-        case 'lg':
-          return {
-            fontSize: theme.typography.fontSizeLg,
-            lineHeight: theme.typography.lineHeightLg,
-            '& .anticon': {
-              lineHeight: theme.typography.lineHeightLg,
-              verticalAlign: 'middle'
+    return nextOptionSibling;
+  }
+  return null;
+}
+const resetAllHighlightedOptions = currentSelection => {
+  const options = getContentOptions(currentSelection);
+  options === null || options === void 0 || options.forEach(option => {
+    option.setAttribute('tabIndex', '-1');
+    option.setAttribute('data-highlighted', 'false');
+  });
+};
+const highlightOption = function (currentSelection, prevSelection) {
+  var _currentSelection$scr;
+  let focus = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  if (prevSelection) {
+    prevSelection.setAttribute('tabIndex', '-1');
+    prevSelection.setAttribute('data-highlighted', 'false');
+  }
+  if (focus) {
+    currentSelection.focus();
+  }
+  currentSelection.setAttribute('tabIndex', '0');
+  currentSelection.setAttribute('data-highlighted', 'true');
+  (_currentSelection$scr = currentSelection.scrollIntoView) === null || _currentSelection$scr === void 0 || _currentSelection$scr.call(currentSelection, {
+    block: 'center'
+  });
+};
+const findHighlightedOption = options => {
+  var _options$find;
+  return (_options$find = options.find(option => option.getAttribute('data-highlighted') === 'true')) !== null && _options$find !== void 0 ? _options$find : undefined;
+};
+const getContentOptions = element => {
+  var _element$closest;
+  const options = (_element$closest = element.closest('[data-combobox-option-list="true"]')) === null || _element$closest === void 0 ? void 0 : _element$closest.querySelectorAll('[role="option"]');
+  return options ? Array.from(options) : undefined;
+};
+const getKeyboardNavigationFunctions = (handleSelect, _ref) => {
+  let {
+    onKeyDown,
+    onMouseEnter,
+    onDefaultKeyDown
+  } = _ref;
+  return {
+    onKeyDown: e => {
+      onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault();
+          const nextSibling = findClosestOptionSibling(e.currentTarget, 'next');
+          if (nextSibling) {
+            highlightOption(nextSibling, e.currentTarget);
+          } else {
+            var _getContentOptions;
+            const firstOption = (_getContentOptions = getContentOptions(e.currentTarget)) === null || _getContentOptions === void 0 ? void 0 : _getContentOptions[0];
+            if (firstOption) {
+              highlightFirstNonDisabledOption(firstOption, 'start', e.currentTarget);
             }
-          };
-        case 'sm':
-          return {
-            fontSize: theme.typography.fontSizeSm,
-            lineHeight: theme.typography.lineHeightSm,
-            '& .anticon': {
-              verticalAlign: '-0.219em'
+          }
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          const previousSibling = findClosestOptionSibling(e.currentTarget, 'previous');
+          if (previousSibling) {
+            highlightOption(previousSibling, e.currentTarget);
+          } else {
+            var _getContentOptions2;
+            const lastOption = (_getContentOptions2 = getContentOptions(e.currentTarget)) === null || _getContentOptions2 === void 0 ? void 0 : _getContentOptions2.slice(-1)[0];
+            if (lastOption) {
+              highlightFirstNonDisabledOption(lastOption, 'end', e.currentTarget);
             }
-          };
+          }
+          break;
+        case 'Enter':
+          e.preventDefault();
+          handleSelect(e);
+          break;
         default:
-          return {};
+          onDefaultKeyDown === null || onDefaultKeyDown === void 0 || onDefaultKeyDown(e);
+          break;
       }
-    })()
-  }, props.withoutMargins && {
-    '&&': {
-      marginTop: 0,
-      marginBottom: 0
+    },
+    onMouseEnter: e => {
+      onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter(e);
+      resetTabIndexToFocusedElement(e.currentTarget);
     }
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getTextEmotionStyles;");
-}
-function Text(userProps) {
-  // Omit props that are not supported by `antd`
-  const {
-    dangerouslySetAntdProps,
-    bold,
-    hint,
-    withoutMargins,
-    color,
-    ...props
-  } = userProps;
-  const {
-    theme
-  } = useDesignSystemTheme();
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(AntDText, {
-      ...props,
-      className: props.className,
-      css: getTextEmotionStyles(theme, userProps),
-      ...dangerouslySetAntdProps
-    })
+  };
+};
+const resetTabIndexToFocusedElement = elem => {
+  resetAllHighlightedOptions(elem);
+  elem.setAttribute('tabIndex', '0');
+  elem.focus();
+};
+const dialogComboboxLookAheadKeyDown = (e, setLookAhead, lookAhead) => {
+  var _e$currentTarget$pare, _e$currentTarget$pare2;
+  if (e.key === 'Escape' || e.key === 'Tab' || e.key === 'Enter') {
+    return;
+  }
+  e.preventDefault();
+  const siblings = Array.from((_e$currentTarget$pare = (_e$currentTarget$pare2 = e.currentTarget.parentElement) === null || _e$currentTarget$pare2 === void 0 ? void 0 : _e$currentTarget$pare2.children) !== null && _e$currentTarget$pare !== void 0 ? _e$currentTarget$pare : []);
+  // Look for the first sibling that starts with the pressed key + recently pressed keys (lookAhead, cleared after 1.5 seconds of inactivity)
+  const nextSiblingIndex = siblings.findIndex(sibling => {
+    var _sibling$textContent$, _sibling$textContent;
+    const siblingLabel = (_sibling$textContent$ = (_sibling$textContent = sibling.textContent) === null || _sibling$textContent === void 0 ? void 0 : _sibling$textContent.toLowerCase()) !== null && _sibling$textContent$ !== void 0 ? _sibling$textContent$ : '';
+    return siblingLabel.startsWith(lookAhead + e.key);
   });
-}
+  if (nextSiblingIndex !== -1) {
+    const nextSibling = siblings[nextSiblingIndex];
+    nextSibling.focus();
+    if (setLookAhead) {
+      setLookAhead(lookAhead + e.key);
+    }
+    resetTabIndexToFocusedElement(nextSibling);
+  }
+};
 
-const {
-  Title: AntDTitle
-} = Typography$1;
-function getLevelStyles(theme, props) {
-  switch (props.level) {
-    case 1:
-      return /*#__PURE__*/css({
-        '&&': {
-          fontSize: theme.typography.fontSizeXxl,
-          lineHeight: theme.typography.lineHeightXxl,
-          fontWeight: theme.typography.typographyBoldFontWeight
-        },
-        '& > .anticon': {
-          lineHeight: theme.typography.lineHeightXxl
-        }
-      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
-    case 2:
-      return /*#__PURE__*/css({
-        '&&': {
-          fontSize: theme.typography.fontSizeXl,
-          lineHeight: theme.typography.lineHeightXl,
-          fontWeight: theme.typography.typographyBoldFontWeight
-        },
-        '& > .anticon': {
-          lineHeight: theme.typography.lineHeightXl
-        }
-      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
-    case 3:
-      return /*#__PURE__*/css({
-        '&&': {
-          fontSize: theme.typography.fontSizeLg,
-          lineHeight: theme.typography.lineHeightLg,
-          fontWeight: theme.typography.typographyBoldFontWeight
-        },
-        '& > .anticon': {
-          lineHeight: theme.typography.lineHeightLg
+const getComboboxContentWrapperStyles = (theme, _ref) => {
+  let {
+    maxHeight = '100vh',
+    maxWidth = '100vw',
+    minHeight = 0,
+    minWidth = 0,
+    width,
+    useNewShadows
+  } = _ref;
+  return /*#__PURE__*/css({
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
+    ...(width ? {
+      width
+    } : {}),
+    background: theme.colors.backgroundPrimary,
+    color: theme.colors.textPrimary,
+    overflow: 'auto',
+    // Making sure the content popover overlaps the remove button when opens to the right
+    zIndex: theme.options.zIndexBase + 10,
+    boxSizing: 'border-box',
+    border: `1px solid ${theme.colors.border}`,
+    boxShadow: useNewShadows ? theme.shadows.lg : theme.general.shadowLow,
+    borderRadius: theme.general.borderRadiusBase,
+    colorScheme: theme.isDarkMode ? 'dark' : 'light',
+    ...getDarkModePortalStyles(theme, useNewShadows)
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getComboboxContentWrapperStyles;");
+};
+const COMBOBOX_MENU_ITEM_PADDING = [6, 32, 6, 12];
+const getComboboxOptionItemWrapperStyles = theme => {
+  return /*#__PURE__*/css(importantify({
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+    alignSelf: 'stretch',
+    padding: `${COMBOBOX_MENU_ITEM_PADDING.map(x => `${x}px`).join(' ')}`,
+    lineHeight: theme.typography.lineHeightBase,
+    boxSizing: 'content-box',
+    cursor: 'pointer',
+    userSelect: 'none',
+    '&:hover, &[data-highlighted="true"]': {
+      background: theme.colors.actionTertiaryBackgroundHover
+    },
+    '&:focus': {
+      background: theme.colors.actionTertiaryBackgroundHover,
+      outline: 'none'
+    },
+    '&[disabled]': {
+      pointerEvents: 'none',
+      color: theme.colors.actionDisabledText,
+      background: theme.colors.backgroundPrimary
+    }
+  }), process.env.NODE_ENV === "production" ? "" : ";label:getComboboxOptionItemWrapperStyles;");
+};
+const getComboboxOptionLabelStyles = _ref2 => {
+  let {
+    theme,
+    dangerouslyHideCheck,
+    textOverflowMode,
+    contentWidth,
+    hasHintColumn
+  } = _ref2;
+  return /*#__PURE__*/css({
+    marginLeft: !dangerouslyHideCheck ? theme.spacing.sm : 0,
+    fontSize: theme.typography.fontSizeBase,
+    fontStyle: 'normal',
+    fontWeight: 400,
+    cursor: 'pointer',
+    overflow: 'hidden',
+    wordBreak: 'break-word',
+    ...(textOverflowMode === 'ellipsis' && {
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }),
+    ...(contentWidth ? {
+      width: getDialogComboboxOptionLabelWidth(theme, contentWidth)
+    } : {}),
+    ...(hasHintColumn && {
+      display: 'flex'
+    })
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getComboboxOptionLabelStyles;");
+};
+const getInfoIconStyles = theme => {
+  return /*#__PURE__*/css({
+    paddingLeft: theme.spacing.xs,
+    color: theme.colors.textSecondary,
+    pointerEvents: 'all',
+    cursor: 'pointer',
+    verticalAlign: 'middle'
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getInfoIconStyles;");
+};
+const getCheckboxStyles = (theme, textOverflowMode) => {
+  return /*#__PURE__*/css({
+    pointerEvents: 'none',
+    height: 'unset',
+    width: '100%',
+    '& > label': {
+      display: 'flex',
+      width: '100%',
+      fontSize: theme.typography.fontSizeBase,
+      fontStyle: 'normal',
+      fontWeight: 400,
+      cursor: 'pointer',
+      '& > span:first-of-type': {
+        alignSelf: 'flex-start',
+        display: 'inline-flex',
+        alignItems: 'center',
+        paddingTop: theme.spacing.xs / 2
+      },
+      '& > span:last-of-type, & > span:last-of-type > label': {
+        paddingRight: 0,
+        width: '100%',
+        overflow: 'hidden',
+        wordBreak: 'break-word',
+        ...(textOverflowMode === 'ellipsis' ? {
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap'
+        } : {})
+      }
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getCheckboxStyles;");
+};
+const getFooterStyles = theme => {
+  return /*#__PURE__*/css({
+    width: '100%',
+    background: theme.colors.backgroundPrimary,
+    padding: `${theme.spacing.sm}px ${theme.spacing.lg / 2}px ${theme.spacing.sm}px ${theme.spacing.lg / 2}px`,
+    position: 'sticky',
+    bottom: 0,
+    boxSizing: 'border-box',
+    '&:has(> .combobox-footer-add-button)': {
+      padding: `${theme.spacing.sm}px 0 ${theme.spacing.sm}px 0`,
+      '& > :not(.combobox-footer-add-button)': {
+        marginLeft: `${theme.spacing.lg / 2}px`,
+        marginRight: `${theme.spacing.lg / 2}px`
+      },
+      '& > .combobox-footer-add-button': {
+        justifyContent: 'flex-start !important'
+      }
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getFooterStyles;");
+};
+const getSelectItemWithHintColumnStyles = function () {
+  let hintColumnWidthPercent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 50;
+  return /*#__PURE__*/css({
+    flexGrow: 1,
+    display: 'inline-grid',
+    gridTemplateColumns: `${100 - hintColumnWidthPercent}% ${hintColumnWidthPercent}%`
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getSelectItemWithHintColumnStyles;");
+};
+const getHintColumnStyles = (theme, disabled, textOverflowMode) => {
+  return /*#__PURE__*/css({
+    color: theme.colors.textSecondary,
+    fontSize: theme.typography.fontSizeSm,
+    textAlign: 'right',
+    ...(disabled && {
+      color: theme.colors.actionDisabledText
+    }),
+    ...(textOverflowMode === 'ellipsis' && {
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden'
+    })
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getHintColumnStyles;");
+};
+
+// 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["ProgressFill"] = "progressFill";
+  ValidSemanticColors["ProgressTrack"] = "progressTrack";
+  ValidSemanticColors["Skeleton"] = "skeleton";
+  ValidSemanticColors["TableBackgroundSelectedDefault"] = "tableBackgroundSelectedDefault";
+  ValidSemanticColors["TableBackgroundSelectedHover"] = "tableBackgroundSelectedHover";
+  ValidSemanticColors["TableBackgroundUnselectedDefault"] = "tableBackgroundUnselectedDefault";
+  ValidSemanticColors["TableBackgroundUnselectedHover"] = "tableBackgroundUnselectedHover";
+  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: ValidSemanticColors.TextPrimary,
+  secondary: ValidSemanticColors.TextSecondary,
+  info: ValidSemanticColors.TextSecondary,
+  error: ValidSemanticColors.TextValidationDanger,
+  success: ValidSemanticColors.TextValidationSuccess,
+  warning: ValidSemanticColors.TextValidationWarning
+};
+
+/**
+ * Recursively appends `!important` to all CSS properties in an Emotion `CSSObject`.
+ * Used to ensure that we always override Ant styles, without worrying about selector precedence.
+ */
+function importantify(obj) {
+  return _mapValues(obj, (value, key) => {
+    if (_isString(value) || _isNumber(value) || _isBoolean(value)) {
+      // Make sure we don't double-append important
+      if (_isString(value) && _endsWith(value, '!important')) {
+        return value;
+      }
+      if (_isNumber(value)) {
+        if (unitless[key]) {
+          return `${value}!important`;
         }
-      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
-    case 4:
+        return `${value}px!important`;
+      }
+      return `${value}!important`;
+    }
+    if (_isNil(value)) {
+      return value;
+    }
+    return importantify(value);
+  });
+}
+
+/**
+ * Returns a text color, in case of invalid/missing key and missing fallback color it will return textPrimary
+ * @param theme
+ * @param key - key of TypographyColor
+ * @param fallbackColor - color to return as fallback -- used to remove tertiary check inline
+ */
+function getTypographyColor(theme, key, fallbackColor) {
+  if (theme && key && Object(theme.colors).hasOwnProperty(ColorVars[key])) {
+    return theme.colors[ColorVars[key]];
+  }
+  return fallbackColor !== null && fallbackColor !== void 0 ? fallbackColor : theme.colors.textPrimary;
+}
+
+/**
+ * Returns validation color based on state, has default validation colors if params are not provided
+ * @param theme
+ * @param validationState
+ * @param errorColor
+ * @param warningColor
+ * @param successColor
+ */
+function getValidationStateColor(theme, validationState) {
+  let {
+    errorColor,
+    warningColor,
+    successColor
+  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  switch (validationState) {
+    case 'error':
+      return errorColor || theme.colors.actionDangerPrimaryBackgroundDefault;
+    case 'warning':
+      return warningColor || theme.colors.textValidationWarning;
+    case 'success':
+      return successColor || theme.colors.textValidationSuccess;
     default:
-      return /*#__PURE__*/css({
-        '&&': {
-          fontSize: theme.typography.fontSizeMd,
-          lineHeight: theme.typography.lineHeightMd,
-          fontWeight: theme.typography.typographyBoldFontWeight
-        },
-        '& > .anticon': {
-          lineHeight: theme.typography.lineHeightMd
+      return undefined;
+  }
+}
+function getDarkModePortalStyles(theme, useNewShadows) {
+  if (!theme || !theme.isDarkMode) {
+    return {};
+  }
+  return {
+    border: `1px solid ${theme.colors.borderDecorative}`,
+    // With the new shadows we have corrected the style of shadows for dark mode, and don't need to disable them.
+    ...(useNewShadows ? {} : {
+      boxShadow: 'none'
+    })
+  };
+}
+const shadowCoverTop = bgColor => `linear-gradient(${bgColor} 30%, rgba(0, 0, 0, 0)) center top`;
+const shadowCoverBot = bgColor => `linear-gradient(rgba(0, 0, 0, 0), ${bgColor} 70%) center bottom`;
+const shadowCoverLeft = bgColor => `linear-gradient(to left, rgba(0, 0, 0, 0), ${bgColor} 30%) left center`;
+const shadowCoverRight = bgColor => `linear-gradient(to left, ${bgColor} 70%, rgba(0, 0, 0, 0)) right center`;
+const shadowTop = shadowRgb => `radial-gradient(
+  farthest-side at 50% 0,
+  rgba(${shadowRgb}, 0.2),
+  rgba(${shadowRgb}, 0)
+) center top`;
+const shadowBot = shadowRgb => `radial-gradient(
+  farthest-side at 50% 100%,
+  rgba(${shadowRgb}, 0.2),
+  rgba(${shadowRgb}, 0)
+) center bottom`;
+const shadowLeft = shadowRgb => `radial-gradient(
+  farthest-side at 0 50%,
+  rgba(${shadowRgb}, 0.2),
+  rgba(${shadowRgb}, 0)
+) left center`;
+const shadowRight = shadowRgb => `radial-gradient(
+  farthest-side at 100% 50%,
+  rgba(${shadowRgb}, 0.2),
+  rgba(${shadowRgb}, 0)
+) right center`;
+const shadowCoverBackgroundSizeVertical = '100% 40px';
+const shadowCoverBackgroundSizeHorizontal = '40px 100%';
+const shadowBackgroundSizeVertical = '100% 14px';
+const shadowBackgroundSizeHorizontal = '14px 100%';
+const getShadowScrollStylesMemoized = _memoize(function getShadowScrollStylesMemoized(theme, backgroundColor) {
+  let orientation = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'vertical';
+  const bgColor = backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.backgroundPrimary;
+  const shadowColor = theme.isDarkMode ? shadowDarkRgb : shadowLightRgb;
+  if (orientation === 'horizontal') {
+    return {
+      background: `
+            ${shadowCoverLeft(bgColor)},
+            ${shadowCoverRight(bgColor)},
+            ${shadowLeft(shadowColor)},
+            ${shadowRight(shadowColor)}`,
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: `
+            ${shadowCoverBackgroundSizeHorizontal},
+            ${shadowCoverBackgroundSizeHorizontal},
+            ${shadowBackgroundSizeHorizontal},
+            ${shadowBackgroundSizeHorizontal}`,
+      backgroundAttachment: 'local, local, scroll, scroll'
+    };
+  }
+  return {
+    background: `
+          ${shadowCoverTop(bgColor)},
+          ${shadowCoverBot(bgColor)},
+          ${shadowTop(shadowColor)},
+          ${shadowBot(shadowColor)}`,
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: `
+          ${shadowCoverBackgroundSizeVertical},
+          ${shadowCoverBackgroundSizeVertical},
+          ${shadowBackgroundSizeVertical},
+          ${shadowBackgroundSizeVertical}`,
+    backgroundAttachment: 'local, local, scroll, scroll'
+  };
+}, (theme, backgroundColor, orientation) => {
+  return `${theme.isDarkMode}-${backgroundColor}-${orientation}`;
+});
+const getShadowScrollStyles = function getShadowScrollStyles(theme) {
+  let {
+    backgroundColor,
+    orientation
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return getShadowScrollStylesMemoized(theme, backgroundColor, orientation);
+};
+const getBottomOnlyShadowScrollStylesMemoized = _memoize(function getBottomOnlyShadowScrollStylesMemoized(theme, backgroundColor) {
+  const bgColor = backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.backgroundPrimary;
+  return {
+    background: `
+          ${shadowCoverBot(bgColor)},
+          ${shadowBot(theme.isDarkMode ? shadowDarkRgb : shadowLightRgb)}`,
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: `
+          ${shadowCoverBackgroundSizeVertical},
+          ${shadowBackgroundSizeVertical}`,
+    backgroundAttachment: 'local, scroll'
+  };
+});
+const getBottomOnlyShadowScrollStyles = function getBottomOnlyShadowScrollStyles(theme) {
+  let {
+    backgroundColor
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return getBottomOnlyShadowScrollStylesMemoized(theme, backgroundColor);
+};
+function getVirtualizedComboboxMenuItemStyles(virtualItem) {
+  const topBottomPadding = COMBOBOX_MENU_ITEM_PADDING[0] + COMBOBOX_MENU_ITEM_PADDING[2];
+  const leftRightPadding = COMBOBOX_MENU_ITEM_PADDING[1] + COMBOBOX_MENU_ITEM_PADDING[3];
+  return {
+    position: 'absolute',
+    width: `calc(100% - ${leftRightPadding}px)`,
+    height: `${virtualItem.size - topBottomPadding}px`,
+    transform: `translateY(${virtualItem.start}px)`
+  };
+}
+
+// Define a module-global observer and a WeakMap on elements to hold callbacks
+let sharedObserver = null;
+const entryCallbackMap = new WeakMap();
+const ensureSharedObserverExists = () => {
+  if (!sharedObserver) {
+    sharedObserver = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          const entryCallback = entryCallbackMap.get(entry.target);
+          if (entryCallback) {
+            entryCallback();
+            entryCallbackMap.delete(entry.target);
+          }
         }
-      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
+      });
+    });
   }
+};
+function observeElement(element, callback) {
+  var _sharedObserver;
+  ensureSharedObserverExists();
+  entryCallbackMap.set(element, callback);
+  (_sharedObserver = sharedObserver) === null || _sharedObserver === void 0 || _sharedObserver.observe(element);
+  return () => {
+    if (element) {
+      var _sharedObserver2;
+      (_sharedObserver2 = sharedObserver) === null || _sharedObserver2 === void 0 || _sharedObserver2.unobserve(element);
+      entryCallbackMap.delete(element);
+    }
+  };
 }
-function getTitleEmotionStyles(theme, props) {
-  return /*#__PURE__*/css(getLevelStyles(theme, props), {
-    '&&': {
-      color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
-    },
-    '& > .anticon': {
-      verticalAlign: 'middle'
+/**
+ * Checks if the element was viewed and calls the onView callback.
+ * NOTE: This hook only triggers the onView callback once for the element.
+ * @param onView - callback to be called when the element is viewed
+ * @param resetKey - optional key that resets the observer when changed
+ * @typeParam T - extends Element to specify the type of element being observed
+ */
+const useNotifyOnFirstView = _ref => {
+  let {
+    onView,
+    resetKey
+  } = _ref;
+  const isViewedRef = useRef(false);
+  const elementRef = useRef(null);
+  const previousResetKey = useRef(resetKey);
+
+  // Only reset isViewedRef when resetKey changes
+  useEffect(() => {
+    if (previousResetKey.current !== resetKey) {
+      isViewedRef.current = false;
+      previousResetKey.current = resetKey;
     }
-  }, props.withoutMargins && {
-    '&&': {
-      marginTop: '0 !important',
-      // override general styling
-      marginBottom: '0 !important' // override general styling
+  }, [resetKey]);
+  useEffect(() => {
+    const element = elementRef.current;
+    // If already viewed or element is not available, do nothing
+    if (!element || isViewedRef.current) {
+      return;
+    }
+    const callback = () => {
+      isViewedRef.current = true;
+      onView();
+    };
+
+    // If IntersectionObserver is not available, assume that the element is visible
+    if (!window.IntersectionObserver) {
+      callback();
+      return;
+    }
+    return observeElement(element, callback);
+  }, [onView]);
+  return {
+    elementRef
+  };
+};
+
+const useDesignSystemSafexFlags = () => {
+  return {
+    useNewShadows: safex('databricks.fe.designsystem.useNewShadows', false)
+  };
+};
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "g8zzui",
+  styles: "cursor:progress"
+} : {
+  name: "4y1qki-AccessibleContainer",
+  styles: "cursor:progress;label:AccessibleContainer;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+function AccessibleContainer(_ref) {
+  let {
+    children,
+    label
+  } = _ref;
+  if (!label) {
+    return jsx(Fragment, {
+      children: children
+    });
+  }
+  return jsxs("div", {
+    css: _ref2,
+    children: [jsx("span", {
+      css: visuallyHidden,
+      children: label
+    }), jsx("div", {
+      "aria-hidden": true,
+      children: children
+    })]
+  });
+}
+
+const DefaultDesignSystemEventSuppressInteractionContextValue = {
+  suppressAnalyticsStartInteraction: false
+};
+const DesignSystemEventSuppressInteractionTrueContextValue = {
+  suppressAnalyticsStartInteraction: true
+};
+const DesignSystemEventSuppressInteractionProviderContext = /*#__PURE__*/React__default.createContext(DefaultDesignSystemEventSuppressInteractionContextValue);
+
+/**
+ * This gets the event suppress interaction provider, is used to suppress the start interaction for analytics events.
+ *
+ * @returns DesignSystemEventSuppressInteractionContextType
+ */
+const useDesignSystemEventSuppressInteractionContext = () => {
+  return useContext(DesignSystemEventSuppressInteractionProviderContext);
+};
+
+let DesignSystemEventProviderComponentTypes = /*#__PURE__*/function (DesignSystemEventProviderComponentTypes) {
+  DesignSystemEventProviderComponentTypes["Accordion"] = "accordion";
+  DesignSystemEventProviderComponentTypes["Alert"] = "alert";
+  DesignSystemEventProviderComponentTypes["Banner"] = "banner";
+  DesignSystemEventProviderComponentTypes["Button"] = "button";
+  DesignSystemEventProviderComponentTypes["Card"] = "card";
+  DesignSystemEventProviderComponentTypes["Checkbox"] = "checkbox";
+  DesignSystemEventProviderComponentTypes["ContextMenuCheckboxItem"] = "context_menu_checkbox_item";
+  DesignSystemEventProviderComponentTypes["ContextMenuItem"] = "context_menu_item";
+  DesignSystemEventProviderComponentTypes["ContextMenuRadioGroup"] = "context_menu_radio_group";
+  DesignSystemEventProviderComponentTypes["DialogCombobox"] = "dialog_combobox";
+  DesignSystemEventProviderComponentTypes["Drawer"] = "drawer_content";
+  DesignSystemEventProviderComponentTypes["DropdownMenuCheckboxItem"] = "dropdown_menu_checkbox_item";
+  DesignSystemEventProviderComponentTypes["DropdownMenuItem"] = "dropdown_menu_item";
+  DesignSystemEventProviderComponentTypes["DropdownMenuRadioGroup"] = "dropdown_menu_radio_group";
+  DesignSystemEventProviderComponentTypes["Form"] = "form";
+  DesignSystemEventProviderComponentTypes["Input"] = "input";
+  DesignSystemEventProviderComponentTypes["LegacySelect"] = "legacy_select";
+  DesignSystemEventProviderComponentTypes["Modal"] = "modal";
+  DesignSystemEventProviderComponentTypes["Notification"] = "notification";
+  DesignSystemEventProviderComponentTypes["Pagination"] = "pagination";
+  DesignSystemEventProviderComponentTypes["PillControl"] = "pill_control";
+  DesignSystemEventProviderComponentTypes["Popover"] = "popover";
+  DesignSystemEventProviderComponentTypes["PreviewCard"] = "preview_card";
+  DesignSystemEventProviderComponentTypes["RadioGroup"] = "radio_group";
+  DesignSystemEventProviderComponentTypes["SegmentedControlGroup"] = "segmented_control_group";
+  DesignSystemEventProviderComponentTypes["SimpleSelect"] = "simple_select";
+  DesignSystemEventProviderComponentTypes["Switch"] = "switch";
+  DesignSystemEventProviderComponentTypes["TableHeader"] = "table_header";
+  DesignSystemEventProviderComponentTypes["Tabs"] = "tabs";
+  DesignSystemEventProviderComponentTypes["Tag"] = "tag";
+  DesignSystemEventProviderComponentTypes["TextArea"] = "text_area";
+  DesignSystemEventProviderComponentTypes["ToggleButton"] = "toggle_button";
+  DesignSystemEventProviderComponentTypes["Tooltip"] = "tooltip";
+  DesignSystemEventProviderComponentTypes["TypeaheadCombobox"] = "typeahead_combobox";
+  DesignSystemEventProviderComponentTypes["TypographyLink"] = "typography_link";
+  return DesignSystemEventProviderComponentTypes;
+}({});
+let DesignSystemEventProviderAnalyticsEventTypes = /*#__PURE__*/function (DesignSystemEventProviderAnalyticsEventTypes) {
+  DesignSystemEventProviderAnalyticsEventTypes["OnClick"] = "onClick";
+  DesignSystemEventProviderAnalyticsEventTypes["OnSubmit"] = "onSubmit";
+  DesignSystemEventProviderAnalyticsEventTypes["OnValueChange"] = "onValueChange";
+  DesignSystemEventProviderAnalyticsEventTypes["OnView"] = "onView";
+  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,
+    valueHasNoPii,
+    shouldStartInteraction,
+    isInteractionSubject
+  } = _ref;
+  const context = useDesignSystemEventProviderContext();
+  const suppressInteractionContext = useDesignSystemEventSuppressInteractionContext();
+  // If shouldStartInteraction is explicitly true or has no suppression when shouldStartInteraction
+  // is not defined for an onClick event, then it will start the interaction
+  const shouldStartInteractionComplete = useMemo(() => shouldStartInteraction || shouldStartInteraction === undefined && !suppressInteractionContext.suppressAnalyticsStartInteraction && (shouldTriggerCallback(DesignSystemEventProviderAnalyticsEventTypes.OnClick, analyticsEvents) || shouldTriggerCallback(DesignSystemEventProviderAnalyticsEventTypes.OnSubmit, analyticsEvents)), [suppressInteractionContext, shouldStartInteraction, analyticsEvents]);
+  const callbacks = useMemo(() => {
+    if (context === DefaultEmptyCallbacks || componentId === undefined) {
+      return {
+        onClick: () => {},
+        onSubmit: () => {},
+        onValueChange: () => {},
+        onView: () => {}
+      };
     }
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getTitleEmotionStyles;");
-}
-function Title(userProps) {
-  const {
-    dangerouslySetAntdProps,
-    withoutMargins,
-    color,
-    ...props
-  } = userProps;
-  const {
-    theme
-  } = useDesignSystemTheme();
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(AntDTitle, {
-      ...props,
-      className: props.className,
-      css: getTitleEmotionStyles(theme, userProps),
-      ...dangerouslySetAntdProps
-    })
+    return {
+      onClick: event => {
+        if (shouldTriggerCallback(DesignSystemEventProviderAnalyticsEventTypes.OnClick, analyticsEvents)) {
+          context.callback({
+            eventType: DesignSystemEventProviderAnalyticsEventTypes.OnClick,
+            componentType,
+            componentId,
+            value: undefined,
+            shouldStartInteraction: shouldStartInteractionComplete,
+            event,
+            isInteractionSubject
+          });
+        }
+      },
+      onSubmit: (event, referrerComponent) => {
+        if (shouldTriggerCallback(DesignSystemEventProviderAnalyticsEventTypes.OnSubmit, analyticsEvents)) {
+          context.callback({
+            eventType: DesignSystemEventProviderAnalyticsEventTypes.OnSubmit,
+            componentType,
+            componentId,
+            value: undefined,
+            shouldStartInteraction: shouldStartInteractionComplete,
+            event,
+            referrerComponent
+          });
+        }
+      },
+      onValueChange: value => {
+        if (shouldTriggerCallback(DesignSystemEventProviderAnalyticsEventTypes.OnValueChange, analyticsEvents)) {
+          context.callback({
+            eventType: DesignSystemEventProviderAnalyticsEventTypes.OnValueChange,
+            componentType,
+            componentId,
+            value: valueHasNoPii ? value : undefined,
+            shouldStartInteraction: shouldStartInteractionComplete
+          });
+        }
+      },
+      onView: () => {
+        if (shouldTriggerCallback(DesignSystemEventProviderAnalyticsEventTypes.OnView, analyticsEvents)) {
+          context.callback({
+            eventType: DesignSystemEventProviderAnalyticsEventTypes.OnView,
+            componentType,
+            componentId,
+            value: undefined,
+            shouldStartInteraction: shouldStartInteractionComplete
+          });
+        }
+      }
+    };
+  }, [context, componentId, analyticsEvents, componentType, shouldStartInteractionComplete, isInteractionSubject, valueHasNoPii]);
+  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
   });
 }
 
-const Typography = /* #__PURE__ */(() => {
-  function Typography(_ref) {
-    let {
-      dangerouslySetAntdProps,
-      ...props
-    } = _ref;
-    return jsx(DesignSystemAntDConfigProvider, {
-      children: jsx(Typography$1, {
-        ...props,
-        ...dangerouslySetAntdProps
-      })
-    });
-  }
-  Typography.Text = Text;
-  Typography.Title = Title;
-  Typography.Paragraph = Paragraph;
-  Typography.Link = Link;
-  Typography.Hint = Hint;
-  return Typography;
-})();
-
 function getDefaultStyles(theme) {
   let loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   const defaultStyles = {
@@ -2096,7 +2369,7 @@ function getPrimaryStyles(theme) {
     }
   };
 }
-function getLinkStyles(theme) {
+function getLinkStyles$1(theme) {
   const defaultStyles = {
     backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
     borderColor: theme.colors.actionTertiaryBackgroundDefault,
@@ -2166,31 +2439,63 @@ function getSecondaryDangerStyles(theme) {
     }
   };
 }
-function getDisabledStyles(theme) {
+function getDisabledDefaultStyles(theme, useNewShadows) {
+  const defaultStyles = {
+    backgroundColor: 'transparent',
+    borderColor: theme.colors.actionDisabledBorder,
+    color: theme.colors.actionDisabledText,
+    ...(useNewShadows && {
+      boxShadow: 'none'
+    })
+  };
+  return {
+    ...defaultStyles,
+    '&:hover': {
+      backgroundColor: 'transparent',
+      borderColor: theme.colors.actionDisabledBorder,
+      color: theme.colors.actionDisabledText
+    },
+    '&:active': {
+      backgroundColor: 'transparent',
+      borderColor: theme.colors.actionDisabledBorder,
+      color: theme.colors.actionDisabledText
+    }
+  };
+}
+function getDisabledPrimaryStyles(theme, useNewShadows) {
   const defaultStyles = {
-    backgroundColor: theme.colors.actionDisabledBackground,
+    backgroundColor: theme.colors.actionDisabledBorder,
     borderColor: 'transparent',
-    color: theme.colors.actionDisabledText
+    color: theme.colors.actionPrimaryTextDefault,
+    ...(useNewShadows && {
+      boxShadow: 'none'
+    })
   };
   return {
     ...defaultStyles,
     '&:hover': {
-      backgroundColor: theme.colors.actionDisabledBackground,
+      backgroundColor: theme.colors.actionDisabledBorder,
       borderColor: 'transparent',
-      color: theme.colors.actionDisabledText
+      color: theme.colors.actionPrimaryTextDefault
     },
     '&:active': {
-      backgroundColor: theme.colors.actionDisabledBackground,
+      backgroundColor: theme.colors.actionDisabledBorder,
       borderColor: 'transparent',
-      color: theme.colors.actionDisabledText
+      color: theme.colors.actionPrimaryTextDefault
     }
   };
 }
-function getDisabledTertiaryStyles(theme) {
+function getDisabledErrorStyles(theme, useNewShadows) {
+  return getDisabledPrimaryStyles(theme, useNewShadows);
+}
+function getDisabledTertiaryStyles(theme, useNewShadows) {
   const defaultStyles = {
     backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
     borderColor: 'transparent',
-    color: theme.colors.actionDisabledText
+    color: theme.colors.actionDisabledText,
+    ...(useNewShadows && {
+      boxShadow: 'none'
+    })
   };
   return {
     ...defaultStyles,
@@ -2206,267 +2511,149 @@ function getDisabledTertiaryStyles(theme) {
     }
   };
 }
-
-let DesignSystemEventProviderComponentTypes = /*#__PURE__*/function (DesignSystemEventProviderComponentTypes) {
-  DesignSystemEventProviderComponentTypes["Banner"] = "banner";
-  DesignSystemEventProviderComponentTypes["Button"] = "button";
-  DesignSystemEventProviderComponentTypes["Input"] = "input";
-  DesignSystemEventProviderComponentTypes["Modal"] = "modal";
-  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: () => {}
-      };
+function getDisabledSplitButtonStyles(theme, useNewShadows) {
+  const defaultStyles = {
+    backgroundColor: theme.colors.actionDefaultBackgroundDefault,
+    borderColor: theme.colors.actionDisabledBorder,
+    color: theme.colors.actionDisabledText,
+    ...(useNewShadows && {
+      boxShadow: 'none'
+    })
+  };
+  return {
+    ...defaultStyles,
+    '&:hover': {
+      backgroundColor: theme.colors.actionDefaultBackgroundDefault,
+      borderColor: theme.colors.actionDisabledBorder,
+      color: theme.colors.actionDisabledText
+    },
+    '&:active': {
+      backgroundColor: theme.colors.actionDefaultBackgroundDefault,
+      borderColor: theme.colors.actionDisabledBorder,
+      color: theme.colors.actionDisabledText
     }
-    return {
-      onClick: () => {
-        if (shouldTriggerCallback(DesignSystemEventProviderAnalyticsEventTypes.OnClick, analyticsEvents)) {
-          context.callback(DesignSystemEventProviderAnalyticsEventTypes.OnClick, componentType, componentId);
-        }
-      },
-      onValueChange: () => {
-        if (shouldTriggerCallback(DesignSystemEventProviderAnalyticsEventTypes.OnValueChange, analyticsEvents)) {
-          context.callback(DesignSystemEventProviderAnalyticsEventTypes.OnValueChange, componentType, componentId);
-        }
-      },
-      onView: () => {
-        if (shouldTriggerCallback(DesignSystemEventProviderAnalyticsEventTypes.OnView, analyticsEvents)) {
-          context.callback(DesignSystemEventProviderAnalyticsEventTypes.OnView, componentType, componentId);
-        }
-      }
-    };
-  }, [context, componentType, componentId, analyticsEvents]);
-  return callbacks;
-};
-
-/**
- * NOTE: This is not suggested for direct usage from engineers, and should use RecordEventContext instead.
- * See https://databricks.atlassian.net/wiki/spaces/UN/pages/2533556277/Usage+Logging+in+UI#Send-usage-logging-from-UI for more details.
- *
- * This is the Design System Event Context Provider, and is only used to pass callbacks to the design system for events such as onClick, onView, and onValueChange.
- *
- * @param children Children react elements
- * @param callback The event callback function
- * @returns Design System Event Context Provider with the children inside
- */
-function DesignSystemEventProvider(_ref2) {
-  let {
-    children,
-    callback
-  } = _ref2;
-  const contextValue = useMemo(() => {
-    return {
-      callback
-    };
-  }, [callback]);
-  return jsx(DesignSystemEventProviderContext.Provider, {
-    value: contextValue,
-    children: children
-  });
-}
-
-// Use Symbol to correctly handled null/undefined as stable values
-const NOT_INITIALIZED = Symbol('NOT_INITIALIZED');
-
-/**
- * Use to keep a stable value on the first mount of a component
- * that cannot change.
- */
-function useStable(valueCallback) {
-  const ref = useRef(NOT_INITIALIZED);
-  if (ref.current === NOT_INITIALIZED) {
-    const val = valueCallback();
-    ref.current = val;
-    return val;
-  }
-  return ref.current;
-}
-let sequentialCounter = 0;
-function useStableUid() {
-  return useStable(() => sequentialCounter++);
+  };
+}
+function getDisabledPrimarySplitButtonStyles(theme, useNewShadows) {
+  const defaultStyles = {
+    backgroundColor: theme.colors.actionDisabledBorder,
+    color: theme.colors.actionPrimaryTextDefault,
+    ...(useNewShadows && {
+      boxShadow: 'none'
+    })
+  };
+  return {
+    ...defaultStyles,
+    '&:hover': {
+      backgroundColor: theme.colors.actionDisabledBorder,
+      color: theme.colors.actionPrimaryTextDefault
+    },
+    '&:active': {
+      backgroundColor: theme.colors.actionDisabledBorder,
+      color: theme.colors.actionPrimaryTextDefault
+    }
+  };
 }
 
-/** Props for UI components that support a "loading" state. */
-
-/**
- * A handler for integrating UI components with external latency instrumentation.
- * If provided via `LoadingStateContext`, hooks will be called whenever child
- * components in a "loading" state are mounted and unmounted.
- */
-
-const LoadingStateContext = /*#__PURE__*/createContext(null);
+const FormContext = /*#__PURE__*/React__default.createContext({
+  componentId: undefined,
+  isSubmitting: false,
+  formRef: undefined
+});
+const useFormContext = () => React__default.useContext(FormContext);
 /**
- * Indicates that the containing component is in a "loading" state, i.e. that the UI
- * displayed to the user is semantically equivalent to them seeing a spinner or a
- * loading indicator. This means that the UI is not in its final settled state yet.
- *
- * All components that are in a "loading" state should render a `<LoadingState>`
- * component, preferrably with an appropriate description.
+ * Form is a wrapper around the form element that allows us to track the active element before the form is submitted.
+ * This is useful for analytics purposes to know what component was last focused when the form was sent for submission.
  *
- * By itself, `<LoadingState>` doesn't do anything, but if used within `LoadingStateContext`,
- * it will call the provided `startLoading()`/`endLoading()` hooks when the component
- * is mounted/unmounted, which can be used to integrate existing latency instrumentation.
+ * NOTE: Form component cannot be nested.
  */
-const LoadingState = _ref => {
+const Form = _ref => {
   let {
-    description = 'Generic UI loading state'
+    children,
+    componentId,
+    analyticsEvents = [DesignSystemEventProviderAnalyticsEventTypes.OnSubmit],
+    onSubmit,
+    shouldStartInteraction,
+    ...otherProps
   } = _ref;
-  const uid = useStableUid();
-  const loadingStateContext = useContext(LoadingStateContext);
-  useLayoutEffect(() => {
-    // mount
-    if (loadingStateContext) {
-      loadingStateContext.startLoading(uid, description);
-    }
-    return () => {
-      // unmount
-      if (loadingStateContext) {
-        loadingStateContext.endLoading(uid);
-      }
-    };
-  }, [uid, description, loadingStateContext]);
-  return null;
-};
-
-const rotate = keyframes({
-  '0%': {
-    transform: 'rotate(0deg) translate3d(0, 0, 0)'
-  },
-  '100%': {
-    transform: 'rotate(360deg) translate3d(0, 0, 0)'
+  const formContext = useFormContext();
+  const formRef = useRef(null);
+  const eventRef = useRef(null);
+  if (formContext.componentId !== undefined) {
+    throw new Error('DuBois Form component cannot be nested');
   }
-});
-const cssSpinner = function (theme) {
-  let frameRate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 60;
-  let delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-  let animationDuration = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
-  let inheritColor = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-  const styles = {
-    animation: `${rotate} ${animationDuration}s steps(${frameRate}, end) infinite`,
-    ...(inheritColor ? {
-      color: 'inherit'
-    } : {
-      color: theme.colors.textSecondary
-    }),
-    animationDelay: `${delay}s`,
-    '@media only percy': {
-      animation: 'none'
+  const memoizedAnalyticsEvents = useMemo(() => analyticsEvents, [analyticsEvents]);
+  const eventContext = useDesignSystemEventComponentCallbacks({
+    componentType: DesignSystemEventProviderComponentTypes.Form,
+    componentId,
+    analyticsEvents: memoizedAnalyticsEvents,
+    shouldStartInteraction
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const onSubmitHandler = useCallback(async e => {
+    try {
+      setIsSubmitting(true);
+      eventContext.onSubmit(e, extractReferrerComponent());
+      await onSubmit(e);
+    } finally {
+      setIsSubmitting(false);
     }
-  };
-  return /*#__PURE__*/css(importantify(styles), process.env.NODE_ENV === "production" ? "" : ";label:cssSpinner;");
-};
-const Spinner = _ref => {
-  let {
-    frameRate,
-    size = 'default',
-    delay,
-    className: propClass,
-    label,
-    animationDuration,
-    inheritColor,
-    loading = true,
-    loadingDescription = 'Spinner',
-    ...props
-  } = _ref;
-  const {
-    classNamePrefix,
-    theme
-  } = useDesignSystemTheme();
-
-  // We use Antd classes to keep styling unchanged
-  // TODO(FEINF-1407): We want to move away from Antd classes and use Emotion for styling in the future
-  const sizeSuffix = size === 'small' ? '-sm' : size === 'large' ? '-lg' : '';
-  const sizeClass = sizeSuffix ? `${classNamePrefix}-spin${sizeSuffix}` : '';
-  const wrapperClass = `${propClass || ''} ${classNamePrefix}-spin ${sizeClass} ${classNamePrefix}-spin-spinning ${DU_BOIS_ENABLE_ANIMATION_CLASSNAME}`.trim();
-  const className = `${classNamePrefix}-spin-dot ${DU_BOIS_ENABLE_ANIMATION_CLASSNAME}`.trim();
-  return (
-    // className has to follow {...props}, otherwise is `css` prop is passed down it will overwrite our className
-    jsxs("div", {
-      ...props,
-      className: wrapperClass,
-      children: [loading && jsx(LoadingState, {
-        description: loadingDescription
-      }), jsx(AccessibleContainer, {
-        label: label,
-        children: jsx(LoadingIcon$1, {
-          "aria-hidden": "false",
-          css: cssSpinner(theme, frameRate, delay, animationDuration, inheritColor),
-          className: className
-        })
-      })]
+  }, [eventContext, onSubmit]);
+  const contextValue = useMemo(() => ({
+    componentId,
+    isSubmitting,
+    eventRef,
+    formRef
+  }), [componentId, isSubmitting]);
+  return jsx(FormContext.Provider, {
+    value: contextValue,
+    children: jsxs("form", {
+      onSubmit: onSubmitHandler,
+      ...otherProps,
+      ref: formRef,
+      children: [isSubmitting && jsx(LoadingState, {
+        description: componentId
+      }), children]
     })
-  );
+  });
 };
-
-/**
- * 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 extractReferrerComponent() {
+  var _activeElement$datase;
+  const activeElement = document.activeElement;
+  const {
+    componentType,
+    componentId
+  } = (_activeElement$datase = activeElement === null || activeElement === void 0 ? void 0 : activeElement.dataset) !== null && _activeElement$datase !== void 0 ? _activeElement$datase : {};
+  if (componentType && componentId) {
+    return {
+      type: componentType,
+      id: componentId
+    };
   }
-};
-
-function addDebugOutlineIfEnabled() {
-  return safex('databricks.fe.designsystem.showDebugOutline', false) ? {
-    'data-dubois-show-outline': true
-  } : {};
+  return undefined;
 }
 
+const buttonStylesCache = new WeakMap();
+const getMemoizedButtonEmotionStyles = props => {
+  // Theme is a large object, so cache it by ref using a WeakMap,
+  // and then JSON.stringify() the rest of the props as the cache key.
+  const {
+    theme,
+    ...rest
+  } = props;
+  const themeCache = buttonStylesCache.get(theme) || new Map();
+  if (!buttonStylesCache.has(theme)) {
+    buttonStylesCache.set(theme, themeCache);
+  }
+  const cacheKey = JSON.stringify(rest);
+  const cachedStyles = themeCache.get(cacheKey);
+  if (cachedStyles) {
+    return cachedStyles;
+  }
+  const styles = getButtonEmotionStyles(props);
+  themeCache.set(cacheKey, styles);
+  return styles;
+};
 function getEndIconClsName(theme) {
   return `${theme.general.iconfontCssPrefix}-btn-end-icon`;
 }
@@ -2481,10 +2668,10 @@ const getButtonEmotionStyles = _ref => {
     enableAnimation,
     size,
     type,
-    isFlex,
     useFocusPseudoClass,
     forceIconStyles,
-    danger
+    danger,
+    useNewShadows
   } = _ref;
   const clsIcon = `.${theme.general.iconfontCssPrefix}`;
   const clsEndIcon = `.${getEndIconClsName(theme)}`;
@@ -2497,6 +2684,9 @@ const getButtonEmotionStyles = _ref => {
   const tertiaryColors = {
     background: theme.colors.actionTertiaryBackgroundDefault,
     color: theme.colors.actionTertiaryTextDefault,
+    ...(useNewShadows && {
+      boxShadow: 'none'
+    }),
     '&:hover': {
       background: theme.colors.actionTertiaryBackgroundHover,
       color: theme.colors.actionTertiaryTextHover
@@ -2508,30 +2698,12 @@ const getButtonEmotionStyles = _ref => {
   };
   const iconCss = {
     fontSize: theme.general.iconFontSize,
-    ...(!isFlex && {
-      // verticalAlign used by AntD to move icon and label to center
-      // TODO(schs): Try to move buttons to flexbox to solve this. Main problem is that flex-inline and inline-block
-      //  behave differently (vertically align of multiple buttons is off). See https://codepen.io/qfactor/pen/JXVzBe
-      verticalAlign: -4,
-      ...(onlyIcon && {
-        verticalAlign: -3
-      }),
-      // verticalAlign used by AntD to move icon and label to center
-      // TODO(schs): Try to move buttons to flexbox to solve this. Main problem is that flex-inline and inline-block
-      //  behave differently (vertically align of multiple buttons is off). See https://codepen.io/qfactor/pen/JXVzBe
-      // Need to make sure not to apply this to regular buttons as it will offset the icons
-      ...(!onlyIcon && {
-        verticalAlign: -3
-      })
-    }),
     lineHeight: 0,
     ...(size === 'small' && {
       lineHeight: theme.typography.lineHeightSm,
+      height: 16,
       ...((onlyIcon || forceIconStyles) && {
-        fontSize: 16,
-        ...(isFlex && {
-          height: 16
-        })
+        fontSize: 16
       })
     })
   };
@@ -2541,14 +2713,12 @@ const getButtonEmotionStyles = _ref => {
   const endIconCssSelector = `span > ${clsEndIcon} > ${clsIcon}`;
   const styles = {
     lineHeight: theme.typography.lineHeightBase,
-    boxShadow: 'none',
+    boxShadow: useNewShadows ? theme.shadows.xs : 'none',
     height: theme.general.heightSm,
-    ...(isFlex && {
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      verticalAlign: 'middle'
-    }),
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    verticalAlign: 'middle',
     ...(!onlyIcon && !forceIconStyles && {
       '&&': {
         padding: '4px 12px',
@@ -2581,7 +2751,7 @@ const getButtonEmotionStyles = _ref => {
       ...getPrimaryStyles(theme)
     },
     [`&${classLink}`]: {
-      ...getLinkStyles(theme),
+      ...getLinkStyles$1(theme),
       ...(type === 'link' && {
         padding: 'unset',
         height: 'auto',
@@ -2598,8 +2768,22 @@ const getButtonEmotionStyles = _ref => {
     [`&${classDangerous}`]: {
       ...getSecondaryDangerStyles(theme)
     },
+    [`&[disabled]`]: {
+      ...getDisabledDefaultStyles(theme, useNewShadows)
+    },
+    [`&${classLink}:disabled`]: {
+      ...getDisabledTertiaryStyles(theme, useNewShadows)
+    },
+    [`&${classDangerous}:disabled`]: {
+      ...getDisabledErrorStyles(theme, useNewShadows)
+    },
+    [`&${classPrimary}:disabled`]: {
+      ...getDisabledPrimaryStyles(theme, useNewShadows)
+    },
     [`&[disabled], &${classDangerous}:disabled`]: {
-      ...getDisabledStyles(theme),
+      ...(useNewShadows && {
+        boxShadow: 'none'
+      }),
       ...((onlyIcon || forceIconStyles) && {
         backgroundColor: 'transparent',
         '&:hover': {
@@ -2628,10 +2812,6 @@ const getButtonEmotionStyles = _ref => {
           // This would break vertical centering of loading circle when onlyIcon is true
           position: 'absolute'
         }),
-        ...(!isFlex && !forceIconStyles && {
-          // Normally we'd do `transform: translateX(-50%)` but `antd` crushes that with injected inline `style`.
-          left: 'calc(50% - 7px)'
-        }),
         // Re-enable animation for the loading spinner, since it can be disabled by the global animation CSS.
         svg: {
           animationDuration: '1s !important'
@@ -2640,7 +2820,6 @@ const getButtonEmotionStyles = _ref => {
       [`& > ${clsLoadingIcon} .anticon`]: {
         paddingRight: 0 // to horizontally center icon
       },
-
       [`> :not(${clsLoadingIcon})`]: {
         // Hide all content except loading icon
         opacity: 0,
@@ -2673,6 +2852,9 @@ const getButtonEmotionStyles = _ref => {
     },
     [`&${clsIconOnly}`]: {
       border: 'none',
+      ...(useNewShadows && {
+        boxShadow: 'none'
+      }),
       [`&:enabled:not(${classLink})`]: {
         ...tertiaryColors,
         color: theme.colors.textSecondary,
@@ -2702,7 +2884,7 @@ const getButtonEmotionStyles = _ref => {
       },
       ...(isAnchor && {
         lineHeight: `${theme.general.heightSm}px`,
-        ...getLinkStyles(theme),
+        ...getLinkStyles$1(theme),
         '&:disabled': {
           color: theme.colors.actionDisabledText
         }
@@ -2764,7 +2946,7 @@ const getButtonEmotionStyles = _ref => {
     ...(type === 'tertiary' && {
       [`&:enabled:not(${clsIconOnly})`]: tertiaryColors,
       [`&${classLink}[disabled]`]: {
-        ...getDisabledTertiaryStyles(theme)
+        ...getDisabledTertiaryStyles(theme, useNewShadows)
       }
     })
   };
@@ -2773,42 +2955,51 @@ const getButtonEmotionStyles = _ref => {
   return /*#__PURE__*/css(importantStyles, importantTypeStyles, process.env.NODE_ENV === "production" ? "" : ";label:getButtonEmotionStyles;");
 };
 const Button = /* #__PURE__ */(() => {
-  const Button = /*#__PURE__*/forwardRef(function Button( // Keep size out of props passed to AntD to make deprecation and eventual removal have 0 impact
+  const Button = /*#__PURE__*/forwardRef(function Button(// Keep size out of props passed to AntD to make deprecation and eventual removal have 0 impact
   _ref2, ref) {
     let {
       dangerouslySetAntdProps,
       children,
       size,
       type,
-      loading,
-      loadingDescription = 'Button',
+      loading: loadingProp,
+      loadingDescription,
       endIcon,
       onClick,
       dangerouslySetForceIconStyles,
       dangerouslyUseFocusPseudoClass,
       dangerouslyAppendWrapperCss,
       componentId,
-      analyticsEvents,
+      analyticsEvents = [DesignSystemEventProviderAnalyticsEventTypes.OnClick],
+      shouldStartInteraction,
       ...props
     } = _ref2;
+    const formContext = useFormContext();
     const {
       theme,
       classNamePrefix
     } = useDesignSystemTheme();
     const {
-      USE_FLEX_BUTTON: flexOverride
-    } = useDesignSystemFlags();
+      useNewShadows
+    } = useDesignSystemSafexFlags();
+    const memoizedAnalyticsEvents = useMemo(() => analyticsEvents, [analyticsEvents]);
     const eventContext = useDesignSystemEventComponentCallbacks({
       componentType: DesignSystemEventProviderComponentTypes.Button,
       componentId,
-      analyticsEvents: analyticsEvents !== null && analyticsEvents !== void 0 ? analyticsEvents : [DesignSystemEventProviderAnalyticsEventTypes.OnClick]
+      analyticsEvents: memoizedAnalyticsEvents,
+      shouldStartInteraction,
+      // If the button is a submit button and is part of a form, it is not the subject of the interaction, the form submission is
+      isInteractionSubject: !(props.htmlType === 'submit' && formContext.componentId)
     });
-    const flexSafex = safex('databricks.fe.designsystem.useFlexButtonStyles', false);
-    const isFlex = flexOverride || flexSafex;
     const clsEndIcon = getEndIconClsName(theme);
     const loadingCls = `${classNamePrefix}-btn-loading-icon`;
-    const buttonRef = useRef(null);
+    const {
+      elementRef: buttonRef
+    } = useNotifyOnFirstView({
+      onView: eventContext.onView
+    });
     useImperativeHandle(ref, () => buttonRef.current);
+    const loading = loadingProp !== null && loadingProp !== void 0 ? loadingProp : props.htmlType === 'submit' && formContext.isSubmitting;
 
     // Needed to keep backwards compatibility and support existing unit tests
     useEffect(() => {
@@ -2821,22 +3012,27 @@ const Button = /* #__PURE__ */(() => {
           buttonRef.current.classList.remove(`${classNamePrefix}-btn-loading`);
         }
       }
-    }, [loading, classNamePrefix]);
+    }, [loading, classNamePrefix, buttonRef]);
     const iconOnly = Boolean((props.icon || endIcon) && !children);
-    const handleClick = event => {
+    const handleClick = useCallback(event => {
+      var _formContext$formRef;
       if (loading) {
         return;
       }
-      eventContext.onClick();
+      eventContext.onClick(event);
+      if (props.htmlType === 'submit' && (_formContext$formRef = formContext.formRef) !== null && _formContext$formRef !== void 0 && _formContext$formRef.current) {
+        event.preventDefault();
+        formContext.formRef.current.requestSubmit();
+      }
       onClick === null || onClick === void 0 || onClick(event);
-    };
+    }, [loading, props.htmlType, formContext.formRef, eventContext, onClick]);
     const loadingSpinner = jsx(Spinner, {
       className: loadingCls,
       animationDuration: 8,
       inheritColor: true,
       label: "loading",
       "aria-label": "loading",
-      loadingDescription: loadingDescription,
+      loadingDescription: loadingDescription !== null && loadingDescription !== void 0 ? loadingDescription : componentId,
       css: /*#__PURE__*/css({
         color: 'inherit !important',
         pointerEvents: 'none',
@@ -2854,7 +3050,7 @@ const Button = /* #__PURE__ */(() => {
       children: jsx(Button$1, {
         ...addDebugOutlineIfEnabled(),
         ...props,
-        css: getButtonEmotionStyles({
+        css: getMemoizedButtonEmotionStyles({
           theme,
           classNamePrefix,
           loading: Boolean(loading),
@@ -2865,9 +3061,9 @@ const Button = /* #__PURE__ */(() => {
           enableAnimation: theme.options.enableAnimation,
           size: size || 'middle',
           type,
-          isFlex,
           forceIconStyles: Boolean(dangerouslySetForceIconStyles),
-          useFocusPseudoClass: Boolean(dangerouslyUseFocusPseudoClass)
+          useFocusPseudoClass: Boolean(dangerouslyUseFocusPseudoClass),
+          useNewShadows
         }),
         href: props.disabled ? undefined : props.href,
         ...dangerouslySetAntdProps,
@@ -2875,22 +3071,20 @@ const Button = /* #__PURE__ */(() => {
         icon: loading ? loadingSpinner : props.icon,
         ref: buttonRef,
         type: type === 'tertiary' ? 'link' : type,
+        "data-component-type": DesignSystemEventProviderComponentTypes.Button,
+        "data-component-id": componentId,
         children: children && jsxs("span", {
           style: {
             visibility: loading ? 'hidden' : 'visible',
-            ...(isFlex && {
-              display: 'inline-flex',
-              alignItems: 'center'
-            }),
+            display: 'inline-flex',
+            alignItems: 'center',
             ...dangerouslyAppendWrapperCss
           },
           children: [children, endIcon && jsx("span", {
             className: clsEndIcon,
             style: {
-              ...(isFlex && {
-                display: 'inline-flex',
-                alignItems: 'center'
-              })
+              display: 'inline-flex',
+              alignItems: 'center'
             },
             children: endIcon
           })]
@@ -2907,624 +3101,715 @@ const Button = /* #__PURE__ */(() => {
   return Button;
 })();
 
-const getInputGroupStyling = (clsPrefix, theme) => {
-  const inputClass = `.${clsPrefix}-input`;
-  const buttonClass = `.${clsPrefix}-btn`;
+const Anchor = Popover$1.Anchor; // Behavioral component only
+
+const Root = _ref => {
+  let {
+    children,
+    onOpenChange,
+    componentId,
+    analyticsEvents = [DesignSystemEventProviderAnalyticsEventTypes.OnView],
+    ...props
+  } = _ref;
+  const firstView = useRef(true);
+  const memoizedAnalyticsEvents = useMemo(() => analyticsEvents, [analyticsEvents]);
+  const eventContext = useDesignSystemEventComponentCallbacks({
+    componentType: DesignSystemEventProviderComponentTypes.Popover,
+    componentId: componentId !== null && componentId !== void 0 ? componentId : 'design_system.popover',
+    analyticsEvents: memoizedAnalyticsEvents
+  });
+  const onOpenChangeHandler = useCallback(open => {
+    if (open && firstView.current) {
+      eventContext.onView();
+      firstView.current = false;
+    }
+    onOpenChange === null || onOpenChange === void 0 || onOpenChange(open);
+  }, [eventContext, onOpenChange]);
+  return jsx(Popover$1.Root, {
+    ...props,
+    onOpenChange: onOpenChangeHandler,
+    children: children
+  });
+};
+const Content = /*#__PURE__*/forwardRef(function Content(_ref2, ref) {
+  let {
+    children,
+    minWidth = 220,
+    maxWidth,
+    ...props
+  } = _ref2;
+  const {
+    getPopupContainer
+  } = useDesignSystemContext();
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const {
+    useNewShadows
+  } = useDesignSystemSafexFlags();
+  return jsx(Popover$1.Portal, {
+    container: getPopupContainer && getPopupContainer(),
+    children: jsx(Popover$1.Content, {
+      ...addDebugOutlineIfEnabled(),
+      ref: ref,
+      css: [contentStyles(theme, useNewShadows), {
+        minWidth,
+        maxWidth
+      }, process.env.NODE_ENV === "production" ? "" : ";label:Content;"],
+      sideOffset: 4,
+      ...props,
+      children: children
+    })
+  });
+});
+const Trigger = /*#__PURE__*/forwardRef(function Trigger(_ref3, ref) {
+  let {
+    children,
+    ...props
+  } = _ref3;
+  return jsx(Popover$1.Trigger, {
+    ...addDebugOutlineIfEnabled(),
+    ref: ref,
+    ...props,
+    children: children
+  });
+});
+const Close = /*#__PURE__*/forwardRef(function Close(_ref4, ref) {
+  let {
+    children,
+    ...props
+  } = _ref4;
+  return jsx(Popover$1.Close, {
+    ref: ref,
+    ...props,
+    children: children
+  });
+});
+const Arrow = /*#__PURE__*/forwardRef(function Arrow(_ref5, ref) {
+  let {
+    children,
+    ...props
+  } = _ref5;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(Popover$1.Arrow, {
+    css: /*#__PURE__*/css({
+      fill: theme.colors.backgroundPrimary,
+      stroke: theme.colors.borderDecorative,
+      strokeDashoffset: -CONSTANTS.arrowBottomLength(),
+      strokeDasharray: CONSTANTS.arrowBottomLength() + 2 * CONSTANTS.arrowSide(),
+      strokeWidth: CONSTANTS.arrowStrokeWidth(),
+      // TODO: This is a temporary fix for the alignment of the Arrow;
+      // Radix has changed the implementation for v1.0.0 (uses floating-ui)
+      // which has new behaviors for alignment that we don't want. Generally
+      // we need to fix the arrow to always be aligned to the left of the menu (with
+      // offset equal to border radius)
+      position: 'relative',
+      top: -1
+    }, process.env.NODE_ENV === "production" ? "" : ";label:Arrow;"),
+    ref: ref,
+    width: 12,
+    height: 6,
+    ...props,
+    children: children
+  });
+});
+
+// CONSTANTS
+const CONSTANTS = {
+  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 popoverContentStyles = (theme, useNewShadows) => ({
+  backgroundColor: theme.colors.backgroundPrimary,
+  color: theme.colors.textPrimary,
+  lineHeight: theme.typography.lineHeightBase,
+  border: `1px solid ${theme.colors.borderDecorative}`,
+  borderRadius: theme.legacyBorders.borderRadiusMd,
+  padding: `${theme.spacing.sm}px`,
+  boxShadow: useNewShadows ? theme.shadows.lg : theme.general.shadowLow,
+  userSelect: 'none',
+  zIndex: theme.options.zIndexBase + 30,
+  ...getDarkModePortalStyles(theme, useNewShadows),
+  a: importantify({
+    color: theme.colors.actionTertiaryTextDefault,
+    cursor: 'default',
+    '&:hover, &:focus': {
+      color: theme.colors.actionTertiaryTextHover
+    }
+  }),
+  '&:focus-visible': {
+    outlineStyle: 'solid',
+    outlineWidth: '2px',
+    outlineOffset: '1px',
+    outlineColor: theme.colors.primary
+  }
+});
+const contentStyles = (theme, useNewShadows) => ({
+  ...popoverContentStyles(theme, useNewShadows)
+});
+
+var Popover = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Anchor: Anchor,
+  Arrow: Arrow,
+  Close: Close,
+  Content: Content,
+  Root: Root,
+  Trigger: Trigger
+});
+
+const {
+  Text: AntDText$1
+} = Typography$1;
+function getTextEmotionStyles$1(theme, props) {
   return /*#__PURE__*/css({
-    display: 'inline-flex !important',
-    width: 'auto',
-    [`& > ${inputClass}`]: {
-      flexGrow: 1,
-      '&:disabled': {
-        border: 'none',
-        '&:hover': {
-          borderRight: `1px solid ${theme.colors.actionDisabledText} !important`
-        }
-      },
-      '&[data-validation]': {
-        marginRight: 0
-      }
-    },
-    [`& > ${buttonClass} > span`]: {
-      verticalAlign: 'middle'
-    },
-    [`& > ${buttonClass}:disabled, & > ${buttonClass}:disabled:hover`]: {
-      borderLeft: `1px solid ${theme.colors.actionDisabledText} !important`
+    '&&': {
+      display: 'block',
+      fontSize: theme.typography.fontSizeSm,
+      lineHeight: theme.typography.lineHeightSm,
+      color: theme.colors.textSecondary,
+      ...(props.withoutMargins && {
+        '&&': {
+          marginTop: 0,
+          marginBottom: 0
+        }
+      })
     }
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getInputGroupStyling;");
-};
-const Group = _ref => {
-  let {
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getTextEmotionStyles;");
+}
+function Hint(userProps) {
+  const {
     dangerouslySetAntdProps,
-    dangerouslyAppendEmotionCSS,
-    compact = true,
+    bold,
+    withoutMargins,
+    color,
     ...props
-  } = _ref;
+  } = userProps;
   const {
-    classNamePrefix,
     theme
   } = useDesignSystemTheme();
   return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(Input$2.Group, {
-      css: [getInputGroupStyling(classNamePrefix, theme), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Group;"],
-      compact: compact,
+    children: jsx(AntDText$1, {
+      ...addDebugOutlineIfEnabled(),
       ...props,
+      css: getTextEmotionStyles$1(theme, userProps),
       ...dangerouslySetAntdProps
     })
   });
-};
-
-/**
- * A React custom hook that allows a callback function to be executed exactly once until it is explicitly reset.
- *
- * Usage:
- *
- * const originalCallback = () => { console.log('originalCallback'); }
- * const { callbackOnceUntilReset, reset } = useCallbackOnceUntilReset(originalCallback);
- *
- * // To execute the callback
- * callbackOnceUntilReset(); // Prints 'originalCallback'
- * callbackOnceUntilReset(); // No effect for further calls
- * reset();
- * callbackOnceUntilReset(); // Prints 'originalCallback' again
- */
-const useCallbackOnceUntilReset = callback => {
-  const canTriggerRef = useRef(true);
-  const reset = useCallback(() => {
-    canTriggerRef.current = true;
-  }, []);
-  const callbackOnceUntilReset = useCallback(() => {
-    if (canTriggerRef.current) {
-      callback();
-      canTriggerRef.current = false;
-    }
-  }, [callback]);
-  return {
-    callbackOnceUntilReset,
-    reset
-  };
-};
+}
 
-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`;
-  const clearIcon = `.${clsPrefix}-input-clear-icon`;
-  const prefixIcon = `.${clsPrefix}-input-prefix`;
-  const suffixIcon = `.${clsPrefix}-input-suffix`;
-  const validationColor = getValidationStateColor(theme, validationState);
-  const focusSpecifier = useFocusWithin ? 'focus-within' : 'focus';
+const getLinkStyles = (theme, clsPrefix) => {
+  const classTypography = `.${clsPrefix}-typography`;
   const styles = {
-    '&&': {
-      lineHeight: theme.typography.lineHeightBase,
-      minHeight: theme.general.heightSm,
-      ...(validationState && {
-        borderColor: validationColor
-      }),
-      '&:hover': {
-        borderColor: validationState ? validationColor : theme.colors.actionPrimaryBackgroundHover
-      },
-      [`&:${focusSpecifier}`]: {
-        outlineColor: validationState ? validationColor : theme.colors.actionPrimaryBackgroundDefault,
-        outlineWidth: 2,
-        outlineOffset: -2,
-        outlineStyle: 'solid',
-        boxShadow: 'none',
-        borderColor: 'transparent'
-      },
-      '&:disabled': {
-        backgroundColor: theme.colors.actionDisabledBackground,
-        color: theme.colors.actionDisabledText
-      },
-      '&::placeholder': {
-        color: theme.colors.textPlaceholder
-      }
-    },
-    [`&${inputClass}, ${inputClass}`]: {
-      ...(useTransparent && {
-        backgroundColor: 'transparent'
-      })
-    },
-    [`&${affixClass}`]: {
-      ...(useTransparent && {
-        backgroundColor: 'transparent'
-      }),
-      lineHeight: theme.typography.lineHeightBase,
-      paddingTop: 5,
-      paddingBottom: 5,
-      minHeight: theme.general.heightSm,
-      '::before': {
-        lineHeight: theme.typography.lineHeightBase
-      },
-      '&:hover': {
-        borderColor: theme.colors.actionPrimaryBackgroundHover
-      },
-      [`input.${clsPrefix}-input`]: {
-        borderRadius: 0
-      }
+    [`&${classTypography}, &${classTypography}:focus`]: {
+      color: theme.colors.actionTertiaryTextDefault
     },
-    [`&${affixClassFocused}`]: {
-      boxShadow: 'none',
-      [`&&, &:${focusSpecifier}`]: {
-        outlineColor: theme.colors.actionPrimaryBackgroundDefault,
-        outlineWidth: 2,
-        outlineOffset: -2,
-        outlineStyle: 'solid',
-        boxShadow: 'none',
-        borderColor: 'transparent'
-      }
+    [`&${classTypography}:hover, &${classTypography}:hover .anticon`]: {
+      color: theme.colors.actionTertiaryTextHover,
+      textDecoration: 'underline'
     },
-    [clearIcon]: {
-      fontSize: theme.typography.fontSizeSm
+    [`&${classTypography}:active, &${classTypography}:active .anticon`]: {
+      color: theme.colors.actionTertiaryTextPress,
+      textDecoration: 'underline'
     },
-    [prefixIcon]: {
-      marginRight: theme.spacing.sm,
-      color: theme.colors.textSecondary
+    [`&${classTypography}:focus-visible`]: {
+      textDecoration: 'underline'
     },
-    [suffixIcon]: {
-      marginLeft: theme.spacing.sm,
-      color: theme.colors.textSecondary
+    '.anticon': {
+      fontSize: 12,
+      verticalAlign: 'baseline'
     },
-    ...getAnimationCss(theme.options.enableAnimation)
+    // manually update color for link within a LegacyTooltip since tooltip always has an inverted background color for light/dark mode
+    // this is required for accessibility compliance
+    [`.${clsPrefix}-tooltip-inner a&${classTypography}`]: {
+      [`&, :focus`]: {
+        color: theme.colors.blue500,
+        '.anticon': {
+          color: theme.colors.blue500
+        }
+      },
+      ':active': {
+        color: theme.colors.blue500,
+        '.anticon': {
+          color: theme.colors.blue500
+        }
+      },
+      ':hover': {
+        color: theme.colors.blue400,
+        '.anticon': {
+          color: theme.colors.blue400
+        }
+      }
+    }
   };
-  return styles;
+  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getLinkStyles;");
 };
-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 getEllipsisNewTabLinkStyles = () => {
+  const styles = {
+    paddingRight: 'calc(2px + 1em)',
+    // 1em for icon
+    position: 'relative'
+  };
+  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getEllipsisNewTabLinkStyles;");
 };
-const Input$1 = /*#__PURE__*/forwardRef(function Input(_ref4, ref) {
+const getIconStyles = theme => {
+  const styles = {
+    marginLeft: 4,
+    color: theme.colors.actionTertiaryTextDefault,
+    position: 'relative',
+    top: '1px'
+  };
+  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getIconStyles;");
+};
+const getEllipsisIconStyles = useNewIcons => {
+  const styles = {
+    position: 'absolute',
+    right: 0,
+    bottom: 0,
+    top: 0,
+    display: 'flex',
+    alignItems: 'center',
+    ...(useNewIcons)
+  };
+  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getEllipsisIconStyles;");
+};
+const Link = /*#__PURE__*/forwardRef(function Link(_ref, ref) {
   let {
-    validationState,
-    autoComplete = 'off',
     dangerouslySetAntdProps,
-    dangerouslyAppendEmotionCSS,
-    onChange,
-    onClear,
-    onFocus,
     componentId,
-    analyticsEvents,
+    analyticsEvents = [DesignSystemEventProviderAnalyticsEventTypes.OnClick],
+    onClick,
     ...props
-  } = _ref4;
+  } = _ref;
   const {
-    classNamePrefix,
-    theme
+    children,
+    openInNewTab,
+    ...restProps
+  } = props;
+  const {
+    theme,
+    classNamePrefix
   } = useDesignSystemTheme();
-  const useTransparent = safex('databricks.fe.designsystem.useTransparentInput', false);
+  const memoizedAnalyticsEvents = useMemo(() => analyticsEvents, [analyticsEvents]);
   const eventContext = useDesignSystemEventComponentCallbacks({
-    componentType: DesignSystemEventProviderComponentTypes.Input,
+    componentType: DesignSystemEventProviderComponentTypes.TypographyLink,
     componentId,
-    analyticsEvents: analyticsEvents !== null && analyticsEvents !== void 0 ? analyticsEvents : [DesignSystemEventProviderAnalyticsEventTypes.OnValueChange]
+    analyticsEvents: memoizedAnalyticsEvents,
+    shouldStartInteraction: false
+  });
+  const onClickHandler = useCallback(e => {
+    eventContext.onClick(e);
+    onClick === null || onClick === void 0 || onClick(e);
+  }, [eventContext, onClick]);
+  const newTabProps = {
+    rel: 'noopener noreferrer',
+    target: '_blank'
+  };
+  const linkProps = openInNewTab ? {
+    ...restProps,
+    ...newTabProps
+  } : {
+    ...restProps
+  };
+  const linkStyles = props.ellipsis && openInNewTab ? [getLinkStyles(theme, classNamePrefix), getEllipsisNewTabLinkStyles()] : getLinkStyles(theme, classNamePrefix);
+  const iconStyles = props.ellipsis ? [getIconStyles(theme), getEllipsisIconStyles()] : getIconStyles(theme);
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsxs(Typography$1.Link, {
+      ...addDebugOutlineIfEnabled(),
+      "aria-disabled": linkProps.disabled,
+      css: linkStyles,
+      ref: ref,
+      onClick: onClickHandler,
+      ...linkProps,
+      ...dangerouslySetAntdProps,
+      children: [children, openInNewTab ? jsx(NewWindowIcon, {
+        css: iconStyles,
+        ...newTabProps
+      }) : null]
+    })
   });
+});
 
-  // Prevents multiple onValueChange triggers until after a focus event resets it.
+const {
+  Paragraph: AntDParagraph
+} = Typography$1;
+function getParagraphEmotionStyles(theme, clsPrefix, props) {
+  return /*#__PURE__*/css({
+    '&&': {
+      fontSize: theme.typography.fontSizeBase,
+      fontWeight: theme.typography.typographyRegularFontWeight,
+      lineHeight: theme.typography.lineHeightBase,
+      color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
+    },
+    '& .anticon': {
+      verticalAlign: 'text-bottom'
+    },
+    [`& .${clsPrefix}-btn-link`]: {
+      verticalAlign: 'baseline !important'
+    }
+  }, props.disabled && {
+    '&&': {
+      color: theme.colors.actionDisabledText
+    }
+  }, props.withoutMargins && {
+    '&&': {
+      marginTop: 0,
+      marginBottom: 0
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getParagraphEmotionStyles;");
+}
+function Paragraph(userProps) {
   const {
-    callbackOnceUntilReset: sendAnalyticsEventOncePerFocus,
-    reset: resetSendAnalyticsEventOnFocus
-  } = useCallbackOnceUntilReset(eventContext.onValueChange);
-  const handleChange = e => {
-    sendAnalyticsEventOncePerFocus();
-    // If the input is cleared, call the onClear handler, but only
-    // if the event is not an input event -- which is the case when you click the
-    // ant-provided (X) button.
-    if (!e.target.value && e.nativeEvent instanceof InputEvent === false && onClear) {
-      onClear === null || onClear === void 0 || onClear();
-    } else {
-      onChange === null || onChange === void 0 || onChange(e);
+    dangerouslySetAntdProps,
+    withoutMargins,
+    color,
+    ...props
+  } = userProps;
+  const {
+    theme,
+    classNamePrefix
+  } = useDesignSystemTheme();
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(AntDParagraph, {
+      ...addDebugOutlineIfEnabled(),
+      ...props,
+      className: props.className,
+      css: getParagraphEmotionStyles(theme, classNamePrefix, userProps),
+      ...dangerouslySetAntdProps
+    })
+  });
+}
+
+const {
+  Text: AntDText
+} = Typography$1;
+function getTextEmotionStyles(theme, props) {
+  return /*#__PURE__*/css({
+    '&&': {
+      fontSize: theme.typography.fontSizeBase,
+      fontWeight: theme.typography.typographyRegularFontWeight,
+      lineHeight: theme.typography.lineHeightBase,
+      color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
+    }
+  }, props.disabled && {
+    '&&': {
+      color: theme.colors.actionDisabledText
+    }
+  }, props.hint && {
+    '&&': {
+      fontSize: theme.typography.fontSizeSm,
+      lineHeight: theme.typography.lineHeightSm
+    }
+  }, props.bold && {
+    '&&': {
+      fontSize: theme.typography.fontSizeBase,
+      fontWeight: theme.typography.typographyBoldFontWeight,
+      lineHeight: theme.typography.lineHeightBase
+    }
+  }, props.code && {
+    '&& > code': {
+      color: theme.colors.textPrimary,
+      fontSize: theme.typography.fontSizeBase,
+      lineHeight: theme.typography.lineHeightBase,
+      background: theme.colors.typographyCodeBg,
+      fontFamily: 'monospace',
+      borderRadius: theme.legacyBorders.borderRadiusMd,
+      padding: '2px 4px',
+      border: 'unset',
+      margin: 0
+    }
+  }, props.size && {
+    '&&': (() => {
+      switch (props.size) {
+        case 'xxl':
+          return {
+            fontSize: theme.typography.fontSizeXxl,
+            lineHeight: theme.typography.lineHeightXxl,
+            '& .anticon': {
+              lineHeight: theme.typography.lineHeightXxl,
+              verticalAlign: 'middle'
+            }
+          };
+        case 'xl':
+          return {
+            fontSize: theme.typography.fontSizeXl,
+            lineHeight: theme.typography.lineHeightXl,
+            '& .anticon': {
+              lineHeight: theme.typography.lineHeightXl,
+              verticalAlign: 'middle'
+            }
+          };
+        case 'lg':
+          return {
+            fontSize: theme.typography.fontSizeLg,
+            lineHeight: theme.typography.lineHeightLg,
+            '& .anticon': {
+              lineHeight: theme.typography.lineHeightLg,
+              verticalAlign: 'middle'
+            }
+          };
+        case 'sm':
+          return {
+            fontSize: theme.typography.fontSizeSm,
+            lineHeight: theme.typography.lineHeightSm,
+            '& .anticon': {
+              verticalAlign: '-0.219em'
+            }
+          };
+        default:
+          return {};
+      }
+    })()
+  }, props.withoutMargins && {
+    '&&': {
+      marginTop: 0,
+      marginBottom: 0
     }
-  };
-  const handleFocus = e => {
-    resetSendAnalyticsEventOnFocus();
-    onFocus === null || onFocus === void 0 || onFocus(e);
-  };
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(Input$2, {
-      autoComplete: autoComplete,
-      "data-validation": validationState,
-      ref: ref,
-      css: [getInputEmotionStyles(classNamePrefix, theme, {
-        validationState
-      }, useTransparent), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Input;"],
-      onChange: handleChange,
-      onFocus: handleFocus,
-      ...props,
-      ...dangerouslySetAntdProps
-    })
-  });
-});
-
-const Password = /*#__PURE__*/forwardRef(function Password(_ref, ref) {
-  let {
-    validationState,
-    autoComplete = 'off',
-    dangerouslySetAntdProps,
-    dangerouslyAppendEmotionCSS,
-    ...props
-  } = _ref;
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getTextEmotionStyles;");
+}
+function Text(userProps) {
+  // Omit props that are not supported by `antd`
   const {
-    classNamePrefix,
-    theme
-  } = useDesignSystemTheme();
-  const useTransparent = safex('databricks.fe.designsystem.useTransparentInput', false);
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(Input$2.Password, {
-      visibilityToggle: false,
-      ref: ref,
-      autoComplete: autoComplete,
-      css: [getInputEmotionStyles(classNamePrefix, theme, {
-        validationState
-      }, useTransparent), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Password;"],
-      ...props,
-      ...dangerouslySetAntdProps
-    })
-  });
-});
-
-const TextArea = /*#__PURE__*/forwardRef(function TextArea(_ref, ref) {
-  let {
-    validationState,
-    autoComplete = 'off',
     dangerouslySetAntdProps,
-    dangerouslyAppendEmotionCSS,
+    bold,
+    hint,
+    withoutMargins,
+    color,
     ...props
-  } = _ref;
+  } = userProps;
   const {
-    classNamePrefix,
     theme
   } = useDesignSystemTheme();
-  const useTransparent = safex('databricks.fe.designsystem.useTransparentInput', false);
   return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(Input$2.TextArea, {
-      ref: ref,
-      autoComplete: autoComplete,
-      css: [getInputEmotionStyles(classNamePrefix, theme, {
-        validationState
-      }, useTransparent), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:TextArea;"],
+    children: jsx(AntDText, {
+      ...addDebugOutlineIfEnabled(),
       ...props,
+      className: props.className,
+      css: getTextEmotionStyles(theme, userProps),
       ...dangerouslySetAntdProps
     })
   });
-});
-
-// Properly creates the namespace and dot-notation components with correct types.
-const InputNamespace = /* #__PURE__ */Object.assign(Input$1, {
-  TextArea,
-  Password,
-  Group
-});
-const Input = InputNamespace;
+}
 
-function Stepper(_ref) {
+const MiddleElideSuffixLength = 6;
+function TextMiddleElide(_ref) {
+  var _process, _textProps$title;
   let {
-    direction: requestedDirection,
-    currentStepIndex: currentStep,
-    steps,
-    localizeStepNumber,
-    responsive = true
+    text,
+    suffixLength = MiddleElideSuffixLength,
+    ...textProps
   } = _ref;
+  const id = useMemo(() => _uniqueId('text-middle-elided-'), []);
   const {
-    theme
-  } = useDesignSystemTheme();
-  const ref = useRef(null);
-  const {
-    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,
-    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), process.env.NODE_ENV === "production" ? "" : ";label:Stepper;"),
-        children: jsxs(StepContentGrid, {
-          isHorizontal: isHorizontal,
-          isCurrentStep: isCurrentStep,
-          children: [jsx("div", {
-            css: /*#__PURE__*/css(getStepItemIconParentStyle(theme, isCurrentStep, iconBackgroundColor, hasStepItemIconBorder), process.env.NODE_ENV === "production" ? "" : ";label:Stepper;"),
-            children: StepIcon ? jsx(StepIcon, {
-              statusColor: iconTextColor,
-              status: step.status
-            }) : icon ? jsx("span", {
-              css: /*#__PURE__*/css({
-                color: iconTextColor
-              }, process.env.NODE_ENV === "production" ? "" : ";label:Stepper;"),
-              children: icon
-            }) : jsx(Typography.Title, {
-              level: contentTitleLevel,
-              css: /*#__PURE__*/css({
-                color: `${iconTextColor} !important`
-              }, process.env.NODE_ENV === "production" ? "" : ";label:Stepper;"),
-              withoutMargins: true,
-              children: localizeStepNumber(index + 1)
-            })
-          }), jsx(Typography.Title, {
-            level: contentTitleLevel,
-            withoutMargins: true,
-            css: /*#__PURE__*/css({
-              flexShrink: 0,
-              color: `${titleTextColor} !important`
-            }, process.env.NODE_ENV === "production" ? "" : ";label:Stepper;"),
-            children: step.title
-          }), displayEndingDivider && jsx("div", {
-            css: /*#__PURE__*/css(getStepEndingDividerStyles(theme, isHorizontal, isCurrentStep), process.env.NODE_ENV === "production" ? "" : ";label:Stepper;")
-          }), step.description && jsx(Typography.Text, {
-            css: /*#__PURE__*/css(getStepDescriptionStyles(theme, isHorizontal, isLastStep, descriptionTextColor), process.env.NODE_ENV === "production" ? "" : ";label:Stepper;"),
-            withoutMargins: true,
-            size: "sm",
-            children: step.description
-          })]
-        })
-      }, index);
-    })
+    start,
+    suffix
+  } = getStartAndSuffix(text, suffixLength);
+  const disableElide = ((_process = process) === null || _process === void 0 || (_process = _process.env) === null || _process === void 0 ? void 0 : _process.NODE_ENV) === 'test'; // so unit tests play nice
+
+  // use the entire text on select and copy
+  useEffect(() => {
+    var _document$querySelect;
+    const clipboardCopyHandler = e => {
+      var _e$clipboardData;
+      e === null || e === void 0 || e.preventDefault();
+      e === null || e === void 0 || (_e$clipboardData = e.clipboardData) === null || _e$clipboardData === void 0 || _e$clipboardData.setData('text/plain', text);
+    };
+    const selector = `.${id}`;
+    (_document$querySelect = document.querySelector(selector)) === null || _document$querySelect === void 0 || _document$querySelect.addEventListener('copy', clipboardCopyHandler);
+    return () => {
+      var _document$querySelect2;
+      (_document$querySelect2 = document.querySelector(selector)) === null || _document$querySelect2 === void 0 || _document$querySelect2.removeEventListener('copy', clipboardCopyHandler);
+    };
+  }, [id, text]);
+  return jsx(Text, {
+    ellipsis: disableElide ? undefined : {
+      suffix
+    },
+    ...textProps,
+    "aria-label": text,
+    title: (_textProps$title = textProps.title) !== null && _textProps$title !== void 0 ? _textProps$title : text,
+    className: id,
+    children: disableElide ? text : start
   });
 }
-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) {
+
+// Exported for unit tests
+function getStartAndSuffix(text, suffixLength) {
+  if (text.length <= suffixLength) {
     return {
-      ...fields,
-      icon: undefined,
-      iconBackgroundColor: undefined,
-      iconTextColor: getCustomIconColor(theme, isCurrentStep, status),
-      hasStepItemIconBorder: false
+      start: text,
+      suffix: undefined
     };
   }
-  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;
-  }
+  const start = text.slice(0, text.length - suffixLength).trim();
+  const suffix = text.slice(-suffixLength).trim();
+  return {
+    start,
+    suffix
+  };
 }
-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, {}),
-        iconBackgroundColor: theme.colors.textValidationDanger,
-        iconTextColor: 'white',
-        titleTextColor: theme.colors.textValidationDanger,
-        descriptionTextColor: theme.colors.textValidationDanger,
-        hasStepItemIconBorder: false
-      };
+
+const {
+  Title: AntDTitle
+} = Typography$1;
+function getLevelStyles(theme, props) {
+  switch (props.level) {
+    case 1:
+      return /*#__PURE__*/css({
+        '&&': {
+          fontSize: theme.typography.fontSizeXxl,
+          lineHeight: theme.typography.lineHeightXxl,
+          fontWeight: theme.typography.typographyBoldFontWeight
+        },
+        '& > .anticon': {
+          lineHeight: theme.typography.lineHeightXxl
+        }
+      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
+    case 2:
+      return /*#__PURE__*/css({
+        '&&': {
+          fontSize: theme.typography.fontSizeXl,
+          lineHeight: theme.typography.lineHeightXl,
+          fontWeight: theme.typography.typographyBoldFontWeight
+        },
+        '& > .anticon': {
+          lineHeight: theme.typography.lineHeightXl
+        }
+      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
+    case 3:
+      return /*#__PURE__*/css({
+        '&&': {
+          fontSize: theme.typography.fontSizeLg,
+          lineHeight: theme.typography.lineHeightLg,
+          fontWeight: theme.typography.typographyBoldFontWeight
+        },
+        '& > .anticon': {
+          lineHeight: theme.typography.lineHeightLg
+        }
+      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
+    case 4:
     default:
-    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({
+        '&&': {
+          fontSize: theme.typography.fontSizeMd,
+          lineHeight: theme.typography.lineHeightMd,
+          fontWeight: theme.typography.typographyBoldFontWeight
+        },
+        '& > .anticon': {
+          lineHeight: theme.typography.lineHeightMd
+        }
+      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
   }
-  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 getTitleEmotionStyles(theme, props) {
+  return /*#__PURE__*/css(getLevelStyles(theme, props), {
+    '&&': {
+      color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
+    },
+    '& > .anticon': {
+      verticalAlign: 'middle'
+    }
+  }, props.withoutMargins && {
+    '&&': {
+      marginTop: '0 !important',
+      // override general styling
+      marginBottom: '0 !important' // override general styling
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getTitleEmotionStyles;");
 }
-function StepContentGrid(_ref2) {
-  let {
-    children,
-    isHorizontal,
-    isCurrentStep
-  } = _ref2;
+function Title(userProps) {
+  const {
+    dangerouslySetAntdProps,
+    withoutMargins,
+    color,
+    elementLevel,
+    ...props
+  } = userProps;
   const {
     theme
   } = useDesignSystemTheme();
-  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,
-        width: '100%'
-      }, process.env.NODE_ENV === "production" ? "" : ";label:StepContentGrid;"),
-      children: children
-    });
-  }
-  return jsx("div", {
-    css: /*#__PURE__*/css({
-      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
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(AntDTitle, {
+      ...addDebugOutlineIfEnabled(),
+      ...props,
+      level: elementLevel !== null && elementLevel !== void 0 ? elementLevel : props.level,
+      className: props.className,
+      css: getTitleEmotionStyles(theme, userProps),
+      ...dangerouslySetAntdProps
+    })
   });
 }
 
-// Ant design uses the same value for their stepper and to works well for us as well.
-const MinimumHorizonalDirectionWidth = 532;
-
-// exported for unit test
-function useResponsiveDirection(_ref3) {
+const Truncate = _ref => {
   let {
-    requestedDirection = 'horizontal',
-    responsive,
-    enabled,
-    ref
-  } = _ref3;
-  const [direction, setDirection] = useState(requestedDirection);
+    children,
+    lines = 1,
+    ...props
+  } = _ref;
+  const [textContent, setTextContent] = useState('');
+  const spanRef = useRef(null);
+
+  // This ensures that truncated text is always available to the user via a native tooltip
   useEffect(() => {
-    if (requestedDirection === 'vertical' || !enabled || !responsive || !ref.current) {
-      return;
+    if (spanRef.current) {
+      setTextContent(spanRef.current.textContent || '');
     }
-    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');
-        }
-      });
+  }, [spanRef, children]);
+  return jsx("span", {
+    ref: spanRef,
+    title: textContent,
+    css: /*#__PURE__*/css({
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'normal',
+      wordBreak: 'break-word',
+      display: '-webkit-box',
+      webkitLineClamp: lines,
+      WebkitBoxOrient: 'vertical',
+      WebkitLineClamp: lines
+    }, process.env.NODE_ENV === "production" ? "" : ";label:Truncate;"),
+    ...props,
+    children: children
+  });
+};
+
+const Typography = /* #__PURE__ */(() => {
+  function Typography(_ref) {
+    let {
+      dangerouslySetAntdProps,
+      ...props
+    } = _ref;
+    return jsx(DesignSystemAntDConfigProvider, {
+      children: jsx(Typography$1, {
+        ...addDebugOutlineIfEnabled(),
+        ...props,
+        ...dangerouslySetAntdProps
+      })
     });
-    if (ref.current) {
-      resizeObserver.observe(ref.current);
-    }
-    return () => {
-      resizeObserver.disconnect();
-      cancelAnimationFrame(timeoutId);
-    };
-  }, [requestedDirection, enabled, ref, responsive]);
-  return {
-    direction
-  };
-}
+  }
+  Typography.Text = Text;
+  Typography.Title = Title;
+  Typography.Paragraph = Paragraph;
+  Typography.Link = Link;
+  Typography.Hint = Hint;
+  Typography.Truncate = Truncate;
+  Typography.TextMiddleElide = TextMiddleElide;
+  return Typography;
+})();
 
-export { NewWindowIcon$1 as $, ApplyDesignSystemContextOverrides as A, Button as B, CloseIcon$1 as C, DesignSystemAntDConfigProvider as D, getDisabledStyles as E, useDesignSystemFlags as F, Stepper as G, getButtonEmotionStyles as H, Icon as I, DesignSystemEventProvider as J, DesignSystemThemeContext as K, LoadingState as L, DesignSystemContext as M, DesignSystemThemeProvider as N, DesignSystemProvider as O, ApplyDesignSystemFlags as P, useAntDConfigProviderContext as Q, RestoreAntDDefaultClsPrefix as R, Spinner as S, Typography as T, WithDesignSystemThemeHoc as U, CursorIcon$1 as V, WarningIcon$1 as W, FaceFrownIcon$1 as X, FaceNeutralIcon$1 as Y, FaceSmileIcon$1 as Z, MegaphoneIcon$1 as _, getDarkModePortalStyles as a, getInputStyles as a0, LoadingStateContext as a1, getTypographyColor as a2, getBottomOnlyShadowScrollStyles as a3, ColorVars as a4, primitiveColors as a5, 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, useDesignSystemEventComponentCallbacks as p, DesignSystemEventProviderComponentTypes as q, DesignSystemEventProviderAnalyticsEventTypes as r, safex as s, useNotifyOnFirstView as t, useDesignSystemTheme as u, visuallyHidden as v, DU_BOIS_ENABLE_ANIMATION_CLASSNAME as w, lightColorList as x, getDefaultStyles as y, getPrimaryStyles as z };
-//# sourceMappingURL=Stepper-ff25c5d1.js.map
+export { Title as $, Arrow as A, Button as B, CloseIcon as C, DesignSystemAntDConfigProvider as D, getInfoIconStyles as E, getKeyboardNavigationFunctions as F, dialogComboboxLookAheadKeyDown as G, getCheckboxStyles as H, Icon as I, getDialogComboboxOptionLabelWidth as J, getContentOptions as K, LoadingState as L, findHighlightedOption as M, highlightOption as N, findClosestOptionSibling as O, getComboboxOptionLabelStyles as P, getSelectItemWithHintColumnStyles as Q, RestoreAntDDefaultClsPrefix as R, Spinner as S, Trigger as T, getHintColumnStyles as U, getValidationStateColor as V, ApplyDesignSystemContextOverrides as W, getShadowScrollStyles as X, DangerIcon as Y, WarningIcon as Z, LoadingIcon as _, useDesignSystemTheme as a, AccessibleContainer as a0, ChevronLeftIcon as a1, DU_BOIS_ENABLE_ANIMATION_CLASSNAME as a2, lightColorList as a3, getDefaultStyles as a4, getPrimaryStyles as a5, getDisabledSplitButtonStyles as a6, getDisabledPrimarySplitButtonStyles as a7, getMemoizedButtonEmotionStyles as a8, getButtonEmotionStyles as a9, DesignSystemEventProvider as aa, useDesignSystemEventSuppressInteractionContext as ab, DesignSystemThemeContext as ac, DesignSystemContext as ad, DesignSystemThemeProvider as ae, DesignSystemProvider as af, ApplyDesignSystemFlags as ag, useAntDConfigProviderContext as ah, isOptionDisabled as ai, resetTabIndexToFocusedElement as aj, WithDesignSystemThemeHoc as ak, NewWindowIcon as al, LoadingStateContext as am, Popover as an, getTypographyColor as ao, getBottomOnlyShadowScrollStyles as ap, getVirtualizedComboboxMenuItemStyles as aq, ColorVars as ar, primitiveColors as as, useFormContext as at, Form as au, DEFAULT_SPACING_UNIT as av, DesignSystemEventProviderAnalyticsEventTypes as b, useDesignSystemEventComponentCallbacks as c, DesignSystemEventProviderComponentTypes as d, addDebugOutlineStylesIfEnabled as e, useNotifyOnFirstView as f, getAnimationCss as g, addDebugOutlineIfEnabled as h, useDesignSystemSafexFlags as i, getDarkModePortalStyles as j, useUniqueId as k, Root as l, Content as m, ChevronRightIcon as n, DesignSystemEventSuppressInteractionProviderContext as o, DesignSystemEventSuppressInteractionTrueContextValue as p, Typography as q, importantify as r, safex as s, CheckIcon as t, useDesignSystemContext as u, visuallyHidden as v, getComboboxOptionItemWrapperStyles as w, getComboboxContentWrapperStyles as x, getFooterStyles as y, highlightFirstNonDisabledOption as z };
+//# sourceMappingURL=Typography-CTfAhQ8V.js.map