@databricks/design-system 1.12.17 → 1.12.18

package/dist/{Typography-ed0b1c4d.js → Typography-CTfAhQ8V.js}

@@ -1,5 +1,5 @@
-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, Button as Button$1, Typography as Typography$1 } from 'antd';
 import * as Popover$1 from '@radix-ui/react-popover';
@@ -13,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
@@ -85,7 +86,6 @@ const spacing = {
   switchMinWidth: 28,
   switchPinSize: 14
 });
-var spacing$1 = spacing;
 
 // eslint-disable-next-line import/no-anonymous-default-export
 var antdVars = {
@@ -106,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)`
     };
   }
@@ -126,403 +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,
-  borderRadiusLg: 8
-};
-
-// 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)',
@@ -536,7 +185,6 @@ const responsive = {
   breakpoints,
   mediaQueries
 };
-var responsive$1 = responsive;
 
 // THIS FILE IS AUTOMATICALLY GENERATED. DO NOT EDIT.
 
@@ -598,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)',
@@ -664,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.
@@ -718,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,
@@ -773,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,
@@ -824,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).`
@@ -869,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,
@@ -880,598 +602,1535 @@ 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,
+    ...(isDarkMode ? deprecatedSemanticColorsDark : deprecatedSemanticColorsLight),
+    ...getSemanticColors(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
+const antdTypography = {
+  fontSizeSm: 12,
+  fontSizeBase: FONT_SIZE_BASE,
+  fontSizeMd: FONT_SIZE_BASE,
+  fontSizeLg: 18,
+  fontSizeXl: 22,
+  fontSizeXxl: 32,
+  lineHeightSm: '16px',
+  lineHeightBase: '20px',
+  lineHeightMd: '20px',
+  lineHeightLg: '24px',
+  lineHeightXl: '28px',
+  lineHeightXxl: '40px',
+  typographyRegularFontWeight: 400,
+  typographyBoldFontWeight: 600
+};
+
+// eslint-disable-next-line import/no-anonymous-default-export
+var typography = {
+  ...antdTypography
 };
 
-// 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.
+const defaultOptions = {
+  enableAnimation: false,
+  zIndexBase: 1000
+};
+
+// Function to get variables for a certain theme.
+// End users should use useDesignSystemTheme instead.
+function getTheme(isDarkMode) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultOptions;
+  return {
+    colors: getColors(isDarkMode),
+    gradients: getGradients(isDarkMode),
+    spacing,
+    general: {
+      ...antdGeneralVariables,
+      ...getShadowVariables(isDarkMode)
+    },
+    shadows: getShadows(isDarkMode),
+    typography,
+    legacyBorders: getLegacyBorders(),
+    // TODO: Update to use `getBorders`
+    borders: getBorders(),
+    responsive,
+    isDarkMode,
+    options,
+    DU_BOIS_INTERNAL_ONLY: {
+      colors: getProtectedSemanticColors(isDarkMode)
+    }
+  };
+}
+
+function getClassNamePrefix(theme) {
+  const antdThemeName = theme.isDarkMode ? 'dark' : 'light';
+  return `${theme.general.classnamePrefix}-${antdThemeName}`;
+}
+function getPrefixedClassNameFromTheme(theme, className) {
+  return [getClassNamePrefix(theme), className].filter(Boolean).join('-');
+}
+function useDesignSystemTheme() {
+  const emotionTheme = useTheme();
+  // Graceful fallback to default theme in case a test or developer forgot context.
+  const theme = emotionTheme && emotionTheme.general ? emotionTheme : getTheme(false);
+  return {
+    theme: theme,
+    classNamePrefix: getClassNamePrefix(theme),
+    getPrefixedClassName: className => getPrefixedClassNameFromTheme(theme, className)
+  };
+}
+// This is a simple typed HOC wrapper around the useDesignSystemTheme hook, for use in older react components.
+function WithDesignSystemThemeHoc(Component) {
+  return function WrappedWithDesignSystemTheme(props) {
+    const themeValues = useDesignSystemTheme();
+    return jsx(Component, {
+      ...props,
+      designSystemThemeApi: themeValues
+    });
+  };
+}
+
+const DuboisContextDefaults = {
+  enableAnimation: false,
+  // Prefer to use useDesignSystemTheme.getPrefixedClassName instead
+  getPrefixCls: suffix => suffix ? `du-bois-${suffix}` : 'du-bois',
+  flags: {}
+};
+const DesignSystemThemeContext = /*#__PURE__*/createContext({
+  isDarkMode: false
+});
+const DesignSystemContext = /*#__PURE__*/createContext(DuboisContextDefaults);
+const DU_BOIS_ENABLE_ANIMATION_CLASSNAME = 'du-bois-enable-animation';
+function getAnimationCss(enableAnimation) {
+  const disableAnimationCss = {
+    animationDuration: '0s !important',
+    transition: 'none !important'
+  };
+  return enableAnimation ? {} : {
+    // Apply to the current element
+    ...disableAnimationCss,
+    '&::before': disableAnimationCss,
+    '&::after': disableAnimationCss,
+    // Also apply to all child elements with a class that starts with our prefix
+    [`[class*=du-bois]:not(.${DU_BOIS_ENABLE_ANIMATION_CLASSNAME}, .${DU_BOIS_ENABLE_ANIMATION_CLASSNAME} *)`]: {
+      ...disableAnimationCss,
+      // Also target any pseudo-elements associated with those elements, since these can also be animated.
+      '&::before': disableAnimationCss,
+      '&::after': disableAnimationCss
+    }
+  };
+}
+const DesignSystemProviderPropsContext = /*#__PURE__*/React__default.createContext(null);
+const AntDConfigProviderPropsContext = /*#__PURE__*/React__default.createContext(null);
+
+/** Only to be accessed by SupportsDuBoisThemes, except for special exceptions like tests and storybook. Ask in #dubois first if you need to use it. */
+const DesignSystemThemeProvider = _ref => {
+  let {
+    isDarkMode = false,
+    children
+  } = _ref;
+  return jsx(DesignSystemThemeContext.Provider, {
+    value: {
+      isDarkMode
+    },
+    children: children
+  });
+};
+const DesignSystemProvider = _ref2 => {
+  let {
+    children,
+    enableAnimation = false,
+    zIndexBase = 1000,
+    getPopupContainer,
+    flags = {},
+    // Disable virtualization of legacy AntD components when running tests so that all items are rendered
+    disableLegacyAntVirtualization = process.env.NODE_ENV === 'test' ? true : undefined
+  } = _ref2;
+  const {
+    isDarkMode
+  } = useContext(DesignSystemThemeContext);
+  const theme = useMemo(() => getTheme(isDarkMode, {
+    enableAnimation,
+    zIndexBase
+  }),
+  // TODO: revisit this
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [isDarkMode, zIndexBase]);
+  const providerPropsContext = useMemo(() => ({
+    isDarkMode,
+    enableAnimation,
+    zIndexBase,
+    getPopupContainer,
+    flags
+  }), [isDarkMode, enableAnimation, zIndexBase, getPopupContainer, flags]);
+  const classNamePrefix = getClassNamePrefix(theme);
+  const value = useMemo(() => {
+    return {
+      enableAnimation,
+      isDarkMode,
+      getPrefixCls: suffix => getPrefixedClassNameFromTheme(theme, suffix),
+      getPopupContainer,
+      flags
+    };
+  }, [enableAnimation, theme, isDarkMode, getPopupContainer, flags]);
+  useEffect(() => {
+    return () => {
+      // when the design system context is unmounted, make sure the notification cache is also cleaned up
+      notification.destroy();
+    };
+  }, []);
+  return jsx(DesignSystemProviderPropsContext.Provider, {
+    value: providerPropsContext,
+    children: jsx(ThemeProvider, {
+      theme: theme,
+      children: jsx(AntDConfigProviderPropsContext.Provider, {
+        value: {
+          prefixCls: classNamePrefix,
+          getPopupContainer,
+          virtual: !disableLegacyAntVirtualization
+        },
+        children: jsx(TooltipProvider, {
+          children: jsx(DesignSystemContext.Provider, {
+            value: value,
+            children: children
+          })
+        })
+      })
+    })
+  });
+};
+const ApplyDesignSystemContextOverrides = _ref3 => {
+  let {
+    enableAnimation,
+    zIndexBase,
+    getPopupContainer,
+    flags,
+    children
+  } = _ref3;
+  const parentDesignSystemProviderProps = useContext(DesignSystemProviderPropsContext);
+  if (parentDesignSystemProviderProps === null) {
+    throw new Error(`ApplyDesignSystemContextOverrides cannot be used standalone - DesignSystemProvider must exist in the React context`);
+  }
+  const newProps = useMemo(() => ({
+    ...parentDesignSystemProviderProps,
+    enableAnimation: enableAnimation !== null && enableAnimation !== void 0 ? enableAnimation : parentDesignSystemProviderProps.enableAnimation,
+    zIndexBase: zIndexBase !== null && zIndexBase !== void 0 ? zIndexBase : parentDesignSystemProviderProps.zIndexBase,
+    getPopupContainer: getPopupContainer !== null && getPopupContainer !== void 0 ? getPopupContainer : parentDesignSystemProviderProps.getPopupContainer,
+    flags: {
+      ...parentDesignSystemProviderProps.flags,
+      ...flags
+    }
+  }), [parentDesignSystemProviderProps, enableAnimation, zIndexBase, getPopupContainer, flags]);
+  return jsx(DesignSystemProvider, {
+    ...newProps,
+    children: children
+  });
+};
+
+// This is a more-specific version of `ApplyDesignSystemContextOverrides` that only allows overriding the flags.
+const ApplyDesignSystemFlags = _ref4 => {
+  let {
+    flags,
+    children
+  } = _ref4;
+  const parentDesignSystemProviderProps = useContext(DesignSystemProviderPropsContext);
+  if (parentDesignSystemProviderProps === null) {
+    throw new Error(`ApplyDesignSystemFlags cannot be used standalone - DesignSystemProvider must exist in the React context`);
+  }
+  const newProps = useMemo(() => ({
+    ...parentDesignSystemProviderProps,
+    flags: {
+      ...parentDesignSystemProviderProps.flags,
+      ...flags
+    }
+  }), [parentDesignSystemProviderProps, flags]);
+  return jsx(DesignSystemProvider, {
+    ...newProps,
+    children: children
+  });
+};
+const DesignSystemAntDConfigProvider = _ref5 => {
+  let {
+    children
+  } = _ref5;
+  const antdContext = useAntDConfigProviderContext();
+  return jsx(ConfigProvider, {
+    ...antdContext,
+    children: children
+  });
+};
+const useAntDConfigProviderContext = () => {
+  var _useContext;
+  return (_useContext = useContext(AntDConfigProviderPropsContext)) !== null && _useContext !== void 0 ? _useContext : {
+    prefixCls: undefined
+  };
+};
+
+/**
+ * When using AntD components inside Design System wrapper components (e.g. Modal, Collapse etc),
+ * we don't want Design System's prefix class to override them.
+ *
+ * Since all Design System's components have are wrapped with DesignSystemAntDConfigProvider,
+ * this won't affect their own prefixCls, but just allow nested antd components to keep their ant prefix.
+ */
+const RestoreAntDDefaultClsPrefix = _ref6 => {
+  let {
+    children
+  } = _ref6;
+  return jsx(ConfigProvider, {
+    prefixCls: "ant",
+    children: children
+  });
+};
+
+function useDesignSystemContext() {
+  return useContext(DesignSystemContext);
+}
+
+/**
+ * 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('');
+function useUniqueId() {
+  let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return useState(() => `${prefix}-${uniqueId()}`)[0];
+}
+
+const getIconVariantStyles = (theme, color) => {
+  switch (color) {
+    case 'success':
+      return {
+        color: theme.colors.textValidationSuccess
+      };
+    case 'warning':
+      return {
+        color: theme.colors.textValidationWarning
+      };
+    case 'danger':
+      return {
+        color: theme.colors.textValidationDanger
+      };
+    case 'ai':
+      return {
+        'svg *': {
+          fill: 'var(--ai-icon-gradient)'
+        }
+      };
+    default:
+      return {
+        color: color
+      };
+  }
+};
+const Icon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    component: Component,
+    dangerouslySetAntdProps,
+    color,
+    style,
+    ...otherProps
+  } = props;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const linearGradientId = useUniqueId('ai-linear-gradient');
+  const MemoizedComponent = useMemo(() => Component ? _ref => {
+    let {
+      fill,
+      ...iconProps
+    } = _ref;
+    return (
+      // We don't rely on top-level fills for our colors. Fills are specified
+      // with "currentColor" on children of the top-most svg.
+      jsxs(Fragment, {
+        children: [jsx(Component, {
+          fill: "none",
+          ...iconProps,
+          style: color === 'ai' ? {
+            ['--ai-icon-gradient']: `url(#${linearGradientId})`,
+            ...iconProps.style
+          } : iconProps.style
+        }), color === 'ai' && jsx("svg", {
+          width: "0",
+          height: "0",
+          viewBox: "0 0 0 0",
+          css: visuallyHidden,
+          children: jsx("defs", {
+            children: jsxs("linearGradient", {
+              id: linearGradientId,
+              x1: "0%",
+              y1: "0%",
+              x2: "100%",
+              y2: "100%",
+              children: [jsx("stop", {
+                offset: "20.5%",
+                stopColor: theme.colors.branded.ai.gradientStart
+              }), jsx("stop", {
+                offset: "46.91%",
+                stopColor: theme.colors.branded.ai.gradientMid
+              }), jsx("stop", {
+                offset: "79.5%",
+                stopColor: theme.colors.branded.ai.gradientEnd
+              })]
+            })
+          })
+        })]
+      })
+    );
+  } : 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, color)
+      }, process.env.NODE_ENV === "production" ? "" : ";label:Icon;"),
+      component: MemoizedComponent,
+      style: {
+        ...style
+      },
+      ...otherProps,
+      ...dangerouslySetAntdProps
+    })
+  });
+});
+
+function SvgCheckIcon(props) {
+  return jsx("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",
+      fillRule: "evenodd",
+      d: "m15.06 3.56-9.53 9.531L1 8.561 2.06 7.5l3.47 3.47L14 2.5z",
+      clipRule: "evenodd"
+    })
+  });
+}
+const CheckIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return jsx(Icon, {
+    ref: forwardedRef,
+    ...props,
+    component: SvgCheckIcon
+  });
+});
+CheckIcon.displayName = 'CheckIcon';
+
+function SvgChevronLeftIcon(props) {
+  return jsx("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",
+      fillRule: "evenodd",
+      d: "M7.083 8 10 10.947 8.958 12 5 8l3.958-4L10 5.053z",
+      clipRule: "evenodd"
+    })
+  });
+}
+const ChevronLeftIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return jsx(Icon, {
+    ref: forwardedRef,
+    ...props,
+    component: SvgChevronLeftIcon
+  });
+});
+ChevronLeftIcon.displayName = 'ChevronLeftIcon';
+
+function SvgChevronRightIcon(props) {
+  return jsx("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",
+      fillRule: "evenodd",
+      d: "M8.917 8 6 5.053 7.042 4 11 8l-3.958 4L6 10.947z",
+      clipRule: "evenodd"
+    })
+  });
+}
+const ChevronRightIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return jsx(Icon, {
+    ref: forwardedRef,
+    ...props,
+    component: SvgChevronRightIcon
+  });
+});
+ChevronRightIcon.displayName = 'ChevronRightIcon';
+
+function SvgCloseIcon(props) {
+  return jsx("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",
+      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 13z",
+      clipRule: "evenodd"
+    })
+  });
+}
+const CloseIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return jsx(Icon, {
+    ref: forwardedRef,
+    ...props,
+    component: SvgCloseIcon
+  });
+});
+CloseIcon.displayName = 'CloseIcon';
+
+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 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 DangerIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return jsx(Icon, {
+    ref: forwardedRef,
+    ...props,
+    component: SvgDangerIcon
+  });
+});
+DangerIcon.displayName = 'DangerIcon';
+
+function SvgLoadingIcon(props) {
+  return jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: jsx("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M23.212 12a.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"
+    })
+  });
+}
+const LoadingIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return jsx(Icon, {
+    ref: forwardedRef,
+    ...props,
+    component: SvgLoadingIcon
+  });
+});
+LoadingIcon.displayName = 'LoadingIcon';
+
+function SvgNewWindowIcon(props) {
+  return jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 16 16",
+    ...props,
+    children: [jsx("path", {
+      fill: "currentColor",
+      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-.75z"
+    })]
+  });
+}
+const NewWindowIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return jsx(Icon, {
+    ref: forwardedRef,
+    ...props,
+    component: SvgNewWindowIcon
+  });
+});
+NewWindowIcon.displayName = 'NewWindowIcon';
+
+function SvgWarningIcon(props) {
+  return jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 16 16",
+    ...props,
+    children: [jsx("path", {
+      fill: "currentColor",
+      d: "M7.25 10V6.5h1.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 1m0 2.245L2.052 13.5h11.896z",
+      clipRule: "evenodd"
+    })]
+  });
+}
+const WarningIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return jsx(Icon, {
+    ref: forwardedRef,
+    ...props,
+    component: SvgWarningIcon
+  });
+});
+WarningIcon.displayName = 'WarningIcon';
+
+// Use Symbol to correctly handled null/undefined as stable values
+const NOT_INITIALIZED = Symbol('NOT_INITIALIZED');
 
-function getColors(isDarkMode) {
-  return {
-    ...deprecatedPrimitiveColors,
-    ...(isDarkMode ? deprecatedSemanticColorsDark : deprecatedSemanticColorsLight),
-    ...getSemanticColors(isDarkMode)
-  };
+/**
+ * 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 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%)`
-  };
+let sequentialCounter = 0;
+function useStableUid() {
+  return useStable(() => sequentialCounter++);
 }
 
-const FONT_SIZE_BASE = 13;
+/** Props for UI components that support a "loading" state. */
 
-// Less variables that are used by AntD
-const antdTypography = {
-  fontSizeSm: 12,
-  fontSizeBase: FONT_SIZE_BASE,
-  fontSizeMd: FONT_SIZE_BASE,
-  fontSizeLg: 18,
-  fontSizeXl: 22,
-  fontSizeXxl: 32,
-  lineHeightSm: '16px',
-  lineHeightBase: '20px',
-  lineHeightMd: '20px',
-  lineHeightLg: '24px',
-  lineHeightXl: '28px',
-  lineHeightXxl: '40px',
-  typographyRegularFontWeight: 400,
-  typographyBoldFontWeight: 600
+/**
+ * A handler for integrating UI components with external latency instrumentation.
+ * If provided via `LoadingStateContext`, hooks will be called whenever child
+ * components in a "loading" state are mounted and unmounted.
+ */
+
+const LoadingStateContext = /*#__PURE__*/createContext(null);
+/**
+ * Indicates that the containing component is in a "loading" state, i.e. that the UI
+ * displayed to the user is semantically equivalent to them seeing a spinner or a
+ * loading indicator. This means that the UI is not in its final settled state yet.
+ *
+ * All components that are in a "loading" state should render a `<LoadingState>`
+ * component, preferrably with an appropriate description.
+ *
+ * By itself, `<LoadingState>` doesn't do anything, but if used within `LoadingStateContext`,
+ * it will call the provided `startLoading()`/`endLoading()` hooks when the component
+ * is mounted/unmounted, which can be used to integrate existing latency instrumentation.
+ */
+const LoadingState = _ref => {
+  let {
+    description = 'Generic UI loading state'
+  } = _ref;
+  const uid = useStableUid();
+  const loadingStateContext = useContext(LoadingStateContext);
+  useLayoutEffect(() => {
+    // mount
+    if (loadingStateContext) {
+      loadingStateContext.startLoading(uid, description);
+    }
+    return () => {
+      // unmount
+      if (loadingStateContext) {
+        loadingStateContext.endLoading(uid);
+      }
+    };
+  }, [uid, description, loadingStateContext]);
+  return null;
 };
 
-// eslint-disable-next-line import/no-anonymous-default-export
-var typography = {
-  ...antdTypography
+const rotate = keyframes({
+  '0%': {
+    transform: 'rotate(0deg) translate3d(0, 0, 0)'
+  },
+  '100%': {
+    transform: 'rotate(360deg) translate3d(0, 0, 0)'
+  }
+});
+const cssSpinner = function (theme) {
+  let frameRate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 60;
+  let delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  let animationDuration = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+  let inheritColor = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  const styles = {
+    animation: `${rotate} ${animationDuration}s steps(${frameRate}, end) infinite`,
+    ...(inheritColor ? {
+      color: 'inherit'
+    } : {
+      color: theme.colors.textSecondary
+    }),
+    animationDelay: `${delay}s`,
+    '@media only percy': {
+      animation: 'none'
+    }
+  };
+  return /*#__PURE__*/css(importantify(styles), process.env.NODE_ENV === "production" ? "" : ";label:cssSpinner;");
 };
+const Spinner = _ref => {
+  let {
+    frameRate,
+    size = 'default',
+    delay,
+    className: propClass,
+    label,
+    animationDuration,
+    inheritColor,
+    loading = true,
+    loadingDescription = 'Spinner',
+    ...props
+  } = _ref;
+  const {
+    classNamePrefix,
+    theme
+  } = useDesignSystemTheme();
 
-const defaultOptions = {
-  enableAnimation: false,
-  zIndexBase: 1000
+  // We use Antd classes to keep styling unchanged
+  // TODO(FEINF-1407): We want to move away from Antd classes and use Emotion for styling in the future
+  const sizeSuffix = size === 'small' ? '-sm' : size === 'large' ? '-lg' : '';
+  const sizeClass = sizeSuffix ? `${classNamePrefix}-spin${sizeSuffix}` : '';
+  const wrapperClass = `${propClass || ''} ${classNamePrefix}-spin ${sizeClass} ${classNamePrefix}-spin-spinning ${DU_BOIS_ENABLE_ANIMATION_CLASSNAME}`.trim();
+  const className = `${classNamePrefix}-spin-dot ${DU_BOIS_ENABLE_ANIMATION_CLASSNAME}`.trim();
+  return (
+    // className has to follow {...props}, otherwise is `css` prop is passed down it will overwrite our className
+    jsxs("div", {
+      ...props,
+      className: wrapperClass,
+      children: [loading && jsx(LoadingState, {
+        description: loadingDescription
+      }), jsx(AccessibleContainer, {
+        label: label,
+        children: jsx(LoadingIcon, {
+          "aria-hidden": "false",
+          css: cssSpinner(theme, frameRate, delay, animationDuration, inheritColor),
+          className: className
+        })
+      })]
+    })
+  );
 };
 
-// Function to get variables for a certain theme.
-// End users should use useDesignSystemTheme instead.
-function getTheme(isDarkMode) {
-  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultOptions;
-  return {
-    colors: getColors(isDarkMode),
-    gradients: getGradients(isDarkMode),
-    spacing: spacing$1,
-    general: {
-      ...antdGeneralVariables,
-      ...getShadowVariables(isDarkMode)
-    },
-    typography,
-    borders: borders$1,
-    responsive: responsive$1,
-    isDarkMode,
-    options
-  };
+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 getClassNamePrefix(theme) {
-  const antdThemeName = theme.isDarkMode ? 'dark' : 'light';
-  return `${theme.general.classnamePrefix}-${antdThemeName}`;
+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);
+    }
+  } else {
+    highlightOption(firstOptionItem, previousSelection);
+  }
 }
-function getPrefixedClassNameFromTheme(theme, className) {
-  return [getClassNamePrefix(theme), className].filter(Boolean).join('-');
+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);
+    }
+    return nextSibling;
+  } else if (nextSibling) {
+    let nextOptionSibling = nextSibling;
+    while (nextOptionSibling && (nextOptionSibling.getAttribute('role') !== 'option' || isOptionDisabled(nextOptionSibling))) {
+      nextOptionSibling = direction === 'previous' ? nextOptionSibling.previousElementSibling : nextOptionSibling.nextElementSibling;
+    }
+    return nextOptionSibling;
+  }
+  return null;
 }
-function useDesignSystemTheme() {
-  const emotionTheme = useTheme();
-  // Graceful fallback to default theme in case a test or developer forgot context.
-  const theme = emotionTheme && emotionTheme.general ? emotionTheme : getTheme(false);
+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 {
-    theme: theme,
-    classNamePrefix: getClassNamePrefix(theme),
-    getPrefixedClassName: className => getPrefixedClassNameFromTheme(theme, className)
-  };
-}
-// This is a simple typed HOC wrapper around the useDesignSystemTheme hook, for use in older react components.
-function WithDesignSystemThemeHoc(Component) {
-  return function WrappedWithDesignSystemTheme(props) {
-    const themeValues = useDesignSystemTheme();
-    return jsx(Component, {
-      ...props,
-      designSystemThemeApi: themeValues
-    });
+    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);
+            }
+          }
+          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:
+          onDefaultKeyDown === null || onDefaultKeyDown === void 0 || onDefaultKeyDown(e);
+          break;
+      }
+    },
+    onMouseEnter: e => {
+      onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter(e);
+      resetTabIndexToFocusedElement(e.currentTarget);
+    }
   };
-}
-
-const DuboisContextDefaults = {
-  enableAnimation: false,
-  // Prefer to use useDesignSystemTheme.getPrefixedClassName instead
-  getPrefixCls: suffix => suffix ? `du-bois-${suffix}` : 'du-bois',
-  flags: {}
 };
-const DesignSystemThemeContext = /*#__PURE__*/createContext({
-  isDarkMode: false
-});
-const DesignSystemContext = /*#__PURE__*/createContext(DuboisContextDefaults);
-const DU_BOIS_ENABLE_ANIMATION_CLASSNAME = 'du-bois-enable-animation';
-function getAnimationCss(enableAnimation) {
-  const disableAnimationCss = {
-    animationDuration: '0s !important',
-    transition: 'none !important'
-  };
-  return enableAnimation ? {} : {
-    // Apply to the current element
-    ...disableAnimationCss,
-    '&::before': disableAnimationCss,
-    '&::after': disableAnimationCss,
-    // Also apply to all child elements with a class that starts with our prefix
-    [`[class*=du-bois]:not(.${DU_BOIS_ENABLE_ANIMATION_CLASSNAME}, .${DU_BOIS_ENABLE_ANIMATION_CLASSNAME} *)`]: {
-      ...disableAnimationCss,
-      // Also target any pseudo-elements associated with those elements, since these can also be animated.
-      '&::before': disableAnimationCss,
-      '&::after': disableAnimationCss
+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);
     }
-  };
-}
-const DesignSystemProviderPropsContext = /*#__PURE__*/React__default.createContext(null);
-const AntDConfigProviderPropsContext = /*#__PURE__*/React__default.createContext(null);
+    resetTabIndexToFocusedElement(nextSibling);
+  }
+};
 
-/** Only to be accessed by SupportsDuBoisThemes, except for special exceptions like tests and storybook. Ask in #dubois first if you need to use it. */
-const DesignSystemThemeProvider = _ref => {
+const getComboboxContentWrapperStyles = (theme, _ref) => {
   let {
-    isDarkMode = false,
-    children
+    maxHeight = '100vh',
+    maxWidth = '100vw',
+    minHeight = 0,
+    minWidth = 0,
+    width,
+    useNewShadows
   } = _ref;
-  return jsx(DesignSystemThemeContext.Provider, {
-    value: {
-      isDarkMode
+  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
     },
-    children: children
-  });
+    '&: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 DesignSystemProvider = _ref2 => {
+const getComboboxOptionLabelStyles = _ref2 => {
   let {
-    children,
-    enableAnimation = false,
-    zIndexBase = 1000,
-    getPopupContainer,
-    flags = {},
-    // Disable virtualization of legacy AntD components when running tests so that all items are rendered
-    disableLegacyAntVirtualization = process.env.NODE_ENV === 'test' ? true : undefined
+    theme,
+    dangerouslyHideCheck,
+    textOverflowMode,
+    contentWidth,
+    hasHintColumn
   } = _ref2;
-  const {
-    isDarkMode
-  } = useContext(DesignSystemThemeContext);
-  const theme = useMemo(() => getTheme(isDarkMode, {
-    enableAnimation,
-    zIndexBase
-  }),
-  // TODO: revisit this
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [isDarkMode, zIndexBase]);
-  const providerPropsContext = useMemo(() => ({
-    isDarkMode,
-    enableAnimation,
-    zIndexBase,
-    getPopupContainer,
-    flags
-  }), [isDarkMode, enableAnimation, zIndexBase, getPopupContainer, flags]);
-  const classNamePrefix = getClassNamePrefix(theme);
-  const value = useMemo(() => {
-    return {
-      enableAnimation,
-      isDarkMode,
-      getPrefixCls: suffix => getPrefixedClassNameFromTheme(theme, suffix),
-      getPopupContainer,
-      flags
-    };
-  }, [enableAnimation, theme, isDarkMode, getPopupContainer, flags]);
-  useEffect(() => {
-    return () => {
-      // when the design system context is unmounted, make sure the notification cache is also cleaned up
-      notification.destroy();
-    };
-  }, []);
-  return jsx(DesignSystemProviderPropsContext.Provider, {
-    value: providerPropsContext,
-    children: jsx(ThemeProvider, {
-      theme: theme,
-      children: jsx(AntDConfigProviderPropsContext.Provider, {
-        value: {
-          prefixCls: classNamePrefix,
-          getPopupContainer,
-          virtual: !disableLegacyAntVirtualization
-        },
-        children: jsx(TooltipProvider, {
-          children: jsx(DesignSystemContext.Provider, {
-            value: value,
-            children: children
-          })
-        })
-      })
+  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 ApplyDesignSystemContextOverrides = _ref3 => {
-  let {
-    enableAnimation,
-    zIndexBase,
-    getPopupContainer,
-    flags,
-    children
-  } = _ref3;
-  const parentDesignSystemProviderProps = useContext(DesignSystemProviderPropsContext);
-  if (parentDesignSystemProviderProps === null) {
-    throw new Error(`ApplyDesignSystemContextOverrides cannot be used standalone - DesignSystemProvider must exist in the React context`);
-  }
-  const newProps = useMemo(() => ({
-    ...parentDesignSystemProviderProps,
-    enableAnimation: enableAnimation !== null && enableAnimation !== void 0 ? enableAnimation : parentDesignSystemProviderProps.enableAnimation,
-    zIndexBase: zIndexBase !== null && zIndexBase !== void 0 ? zIndexBase : parentDesignSystemProviderProps.zIndexBase,
-    getPopupContainer: getPopupContainer !== null && getPopupContainer !== void 0 ? getPopupContainer : parentDesignSystemProviderProps.getPopupContainer,
-    flags: {
-      ...parentDesignSystemProviderProps.flags,
-      ...flags
+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'
+        } : {})
+      }
     }
-  }), [parentDesignSystemProviderProps, enableAnimation, zIndexBase, getPopupContainer, flags]);
-  return jsx(DesignSystemProvider, {
-    ...newProps,
-    children: children
-  });
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getCheckboxStyles;");
 };
-
-// This is a more-specific version of `ApplyDesignSystemContextOverrides` that only allows overriding the flags.
-const ApplyDesignSystemFlags = _ref4 => {
-  let {
-    flags,
-    children
-  } = _ref4;
-  const parentDesignSystemProviderProps = useContext(DesignSystemProviderPropsContext);
-  if (parentDesignSystemProviderProps === null) {
-    throw new Error(`ApplyDesignSystemFlags cannot be used standalone - DesignSystemProvider must exist in the React context`);
-  }
-  const newProps = useMemo(() => ({
-    ...parentDesignSystemProviderProps,
-    flags: {
-      ...parentDesignSystemProviderProps.flags,
-      ...flags
+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'
+      }
     }
-  }), [parentDesignSystemProviderProps, flags]);
-  return jsx(DesignSystemProvider, {
-    ...newProps,
-    children: children
-  });
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getFooterStyles;");
 };
-const DesignSystemAntDConfigProvider = _ref5 => {
-  let {
-    children
-  } = _ref5;
-  const antdContext = useAntDConfigProviderContext();
-  return jsx(ConfigProvider, {
-    ...antdContext,
-    children: children
-  });
+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 useAntDConfigProviderContext = () => {
-  var _useContext;
-  return (_useContext = useContext(AntDConfigProviderPropsContext)) !== null && _useContext !== void 0 ? _useContext : {
-    prefixCls: undefined
-  };
+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
 };
 
 /**
- * When using AntD components inside Design System wrapper components (e.g. Modal, Collapse etc),
- * we don't want Design System's prefix class to override them.
- *
- * Since all Design System's components have are wrapped with DesignSystemAntDConfigProvider,
- * this won't affect their own prefixCls, but just allow nested antd components to keep their ant prefix.
+ * 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.
  */
-const RestoreAntDDefaultClsPrefix = _ref6 => {
-  let {
-    children
-  } = _ref6;
-  return jsx(ConfigProvider, {
-    prefixCls: "ant",
-    children: children
+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);
   });
-};
-
-function useDesignSystemContext() {
-  return useContext(DesignSystemContext);
 }
 
 /**
- * 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
+ * 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
  */
-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 getTypographyColor(theme, key, fallbackColor) {
+  if (theme && key && Object(theme.colors).hasOwnProperty(ColorVars[key])) {
+    return theme.colors[ColorVars[key]];
   }
-};
-
-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('');
-function useUniqueId() {
-  let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  return useState(() => `${prefix}-${uniqueId()}`)[0];
+  return fallbackColor !== null && fallbackColor !== void 0 ? fallbackColor : theme.colors.textPrimary;
 }
 
-const getIconVariantStyles = (theme, linearGradientId, color) => {
-  switch (color) {
-    case 'success':
-      return {
-        color: theme.colors.textValidationSuccess
-      };
+/**
+ * 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 {
-        color: theme.colors.textValidationWarning
-      };
-    case 'danger':
-      return {
-        color: theme.colors.textValidationDanger
-      };
-    case 'ai':
-      return {
-        'svg *': {
-          fill: `url(#${linearGradientId})`
-        }
-      };
+      return warningColor || theme.colors.textValidationWarning;
+    case 'success':
+      return successColor || theme.colors.textValidationSuccess;
     default:
-      return {
-        color: color
-      };
+      return undefined;
   }
-};
-const Icon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
-  const {
-    component: Component,
-    dangerouslySetAntdProps,
-    color,
-    style,
-    ...otherProps
-  } = props;
-  const {
-    theme
-  } = useDesignSystemTheme();
-  const linearGradientId = useUniqueId('ai-linear-gradient');
-  const MemoizedComponent = useMemo(() => Component ? _ref => {
-    let {
-      fill,
-      ...iconProps
-    } = _ref;
-    return (
-      // We don't rely on top-level fills for our colors. Fills are specified
-      // with "currentColor" on children of the top-most svg.
-      jsxs(Fragment, {
-        children: [jsx(Component, {
-          fill: "none",
-          ...iconProps
-        }), color === 'ai' && jsx("svg", {
-          width: "0",
-          height: "0",
-          viewBox: "0 0 0 0",
-          css: visuallyHidden,
-          children: jsx("defs", {
-            children: jsxs("linearGradient", {
-              id: linearGradientId,
-              x1: "0%",
-              y1: "0%",
-              x2: "100%",
-              y2: "100%",
-              children: [jsx("stop", {
-                offset: "20.5%",
-                stopColor: theme.colors.branded.ai.gradientStart
-              }), jsx("stop", {
-                offset: "46.91%",
-                stopColor: theme.colors.branded.ai.gradientMid
-              }), jsx("stop", {
-                offset: "79.5%",
-                stopColor: theme.colors.branded.ai.gradientEnd
-              })]
-            })
-          })
-        })]
-      })
-    );
-  } : 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)
-      }, process.env.NODE_ENV === "production" ? "" : ";label:Icon;"),
-      component: MemoizedComponent,
-      style: {
-        ...style
-      },
-      ...otherProps,
-      ...dangerouslySetAntdProps
+}
+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}`;
 });
-
-function SvgCheckIcon(props) {
-  return jsx("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",
-      fillRule: "evenodd",
-      d: "m15.06 3.56-9.53 9.531L1 8.561 2.06 7.5l3.47 3.47L14 2.5z",
-      clipRule: "evenodd"
-    })
-  });
-}
-const CheckIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
-  return jsx(Icon, {
-    ref: forwardedRef,
-    ...props,
-    component: SvgCheckIcon
-  });
+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'
+  };
 });
-CheckIcon.displayName = 'CheckIcon';
-var CheckIcon$1 = CheckIcon;
-
-function SvgCloseIcon(props) {
-  return jsx("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",
-      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 13z",
-      clipRule: "evenodd"
-    })
-  });
+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)`
+  };
 }
-const CloseIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
-  return jsx(Icon, {
-    ref: forwardedRef,
-    ...props,
-    component: SvgCloseIcon
-  });
-});
-CloseIcon.displayName = 'CloseIcon';
-var CloseIcon$1 = CloseIcon;
 
-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 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"
-    })]
-  });
+// 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);
+    }
+  };
 }
-const DangerIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
-  return jsx(Icon, {
-    ref: forwardedRef,
-    ...props,
-    component: SvgDangerIcon
-  });
-});
-DangerIcon.displayName = 'DangerIcon';
-var DangerIcon$1 = DangerIcon;
+/**
+ * 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);
 
-function SvgLoadingIcon(props) {
-  return jsx("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    ...props,
-    children: jsx("path", {
-      fill: "currentColor",
-      fillRule: "evenodd",
-      d: "M23.212 12a.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"
-    })
-  });
-}
-const LoadingIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
-  return jsx(Icon, {
-    ref: forwardedRef,
-    ...props,
-    component: SvgLoadingIcon
-  });
-});
-LoadingIcon.displayName = 'LoadingIcon';
-var LoadingIcon$1 = LoadingIcon;
+  // Only reset isViewedRef when resetKey changes
+  useEffect(() => {
+    if (previousResetKey.current !== resetKey) {
+      isViewedRef.current = false;
+      previousResetKey.current = resetKey;
+    }
+  }, [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();
+    };
 
-function SvgNewWindowIcon(props) {
-  return jsxs("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    viewBox: "0 0 16 16",
-    ...props,
-    children: [jsx("path", {
-      fill: "currentColor",
-      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-.75z"
-    })]
-  });
-}
-const NewWindowIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
-  return jsx(Icon, {
-    ref: forwardedRef,
-    ...props,
-    component: SvgNewWindowIcon
-  });
-});
-NewWindowIcon.displayName = 'NewWindowIcon';
-var NewWindowIcon$1 = NewWindowIcon;
+    // If IntersectionObserver is not available, assume that the element is visible
+    if (!window.IntersectionObserver) {
+      callback();
+      return;
+    }
+    return observeElement(element, callback);
+  }, [onView]);
+  return {
+    elementRef
+  };
+};
 
-function SvgWarningIcon(props) {
-  return jsxs("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    viewBox: "0 0 16 16",
-    ...props,
-    children: [jsx("path", {
-      fill: "currentColor",
-      d: "M7.25 10V6.5h1.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 1m0 2.245L2.052 13.5h11.896z",
-      clipRule: "evenodd"
+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 WarningIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
-  return jsx(Icon, {
-    ref: forwardedRef,
-    ...props,
-    component: SvgWarningIcon
-  });
-});
-WarningIcon.displayName = 'WarningIcon';
-var WarningIcon$1 = WarningIcon;
 
 const DefaultDesignSystemEventSuppressInteractionContextValue = {
   suppressAnalyticsStartInteraction: false
@@ -1491,35 +2150,48 @@ const useDesignSystemEventSuppressInteractionContext = () => {
 };
 
 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["TabsV2"] = "tabs";
+  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["OnView"] = "onView";
+  DesignSystemEventProviderAnalyticsEventTypes["OnSubmit"] = "onSubmit";
   DesignSystemEventProviderAnalyticsEventTypes["OnValueChange"] = "onValueChange";
+  DesignSystemEventProviderAnalyticsEventTypes["OnView"] = "onView";
   return DesignSystemEventProviderAnalyticsEventTypes;
 }({});
 const shouldTriggerCallback = (eventType, analyticsEvents) => {
@@ -1556,17 +2228,19 @@ const useDesignSystemEventComponentCallbacks = _ref => {
     componentId,
     analyticsEvents,
     valueHasNoPii,
-    shouldStartInteraction
+    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), [suppressInteractionContext, shouldStartInteraction, analyticsEvents]);
+  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: () => {}
       };
@@ -1580,7 +2254,21 @@ const useDesignSystemEventComponentCallbacks = _ref => {
             componentId,
             value: undefined,
             shouldStartInteraction: shouldStartInteractionComplete,
-            event
+            event,
+            isInteractionSubject
+          });
+        }
+      },
+      onSubmit: (event, referrerComponent) => {
+        if (shouldTriggerCallback(DesignSystemEventProviderAnalyticsEventTypes.OnSubmit, analyticsEvents)) {
+          context.callback({
+            eventType: DesignSystemEventProviderAnalyticsEventTypes.OnSubmit,
+            componentType,
+            componentId,
+            value: undefined,
+            shouldStartInteraction: shouldStartInteractionComplete,
+            event,
+            referrerComponent
           });
         }
       },
@@ -1607,7 +2295,7 @@ const useDesignSystemEventComponentCallbacks = _ref => {
         }
       }
     };
-  }, [context, componentId, analyticsEvents, componentType, valueHasNoPii, shouldStartInteractionComplete]);
+  }, [context, componentId, analyticsEvents, componentType, shouldStartInteractionComplete, isInteractionSubject, valueHasNoPii]);
   return callbacks;
 };
 
@@ -1751,11 +2439,14 @@ function getSecondaryDangerStyles(theme) {
     }
   };
 }
-function getDisabledDefaultStyles(theme) {
+function getDisabledDefaultStyles(theme, useNewShadows) {
   const defaultStyles = {
     backgroundColor: 'transparent',
     borderColor: theme.colors.actionDisabledBorder,
-    color: theme.colors.actionDisabledText
+    color: theme.colors.actionDisabledText,
+    ...(useNewShadows && {
+      boxShadow: 'none'
+    })
   };
   return {
     ...defaultStyles,
@@ -1771,11 +2462,14 @@ function getDisabledDefaultStyles(theme) {
     }
   };
 }
-function getDisabledPrimaryStyles(theme) {
+function getDisabledPrimaryStyles(theme, useNewShadows) {
   const defaultStyles = {
     backgroundColor: theme.colors.actionDisabledBorder,
     borderColor: 'transparent',
-    color: theme.colors.actionPrimaryTextDefault
+    color: theme.colors.actionPrimaryTextDefault,
+    ...(useNewShadows && {
+      boxShadow: 'none'
+    })
   };
   return {
     ...defaultStyles,
@@ -1791,14 +2485,17 @@ function getDisabledPrimaryStyles(theme) {
     }
   };
 }
-function getDisabledErrorStyles(theme) {
-  return getDisabledPrimaryStyles(theme);
+function getDisabledErrorStyles(theme, useNewShadows) {
+  return getDisabledPrimaryStyles(theme, useNewShadows);
 }
-function getDisabledTertiaryStyles(theme) {
+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,
@@ -1814,160 +2511,149 @@ function getDisabledTertiaryStyles(theme) {
     }
   };
 }
-function getDisabledSplitButtonStyles(theme) {
+function getDisabledSplitButtonStyles(theme, useNewShadows) {
   const defaultStyles = {
-    backgroundColor: theme.colors.actionDisabledBorder,
+    backgroundColor: theme.colors.actionDefaultBackgroundDefault,
     borderColor: theme.colors.actionDisabledBorder,
-    color: theme.colors.actionPrimaryTextDefault
+    color: theme.colors.actionDisabledText,
+    ...(useNewShadows && {
+      boxShadow: 'none'
+    })
   };
   return {
     ...defaultStyles,
     '&:hover': {
-      backgroundColor: theme.colors.actionDisabledBorder,
+      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
+    }
+  };
+}
+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,
-      borderColor: theme.colors.actionDisabledBorder,
       color: theme.colors.actionPrimaryTextDefault
     }
   };
 }
 
-// Use Symbol to correctly handled null/undefined as stable values
-const NOT_INITIALIZED = Symbol('NOT_INITIALIZED');
-
-/**
- * Use to keep a stable value on the first mount of a component
- * that cannot change.
- */
-function useStable(valueCallback) {
-  const ref = useRef(NOT_INITIALIZED);
-  if (ref.current === NOT_INITIALIZED) {
-    const val = valueCallback();
-    ref.current = val;
-    return val;
-  }
-  return ref.current;
-}
-let sequentialCounter = 0;
-function useStableUid() {
-  return useStable(() => sequentialCounter++);
-}
-
-/** Props for UI components that support a "loading" state. */
-
-/**
- * A handler for integrating UI components with external latency instrumentation.
- * If provided via `LoadingStateContext`, hooks will be called whenever child
- * components in a "loading" state are mounted and unmounted.
- */
-
-const LoadingStateContext = /*#__PURE__*/createContext(null);
+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;");
+  }, [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]
+    })
+  });
 };
-const Spinner = _ref => {
-  let {
-    frameRate,
-    size = 'default',
-    delay,
-    className: propClass,
-    label,
-    animationDuration,
-    inheritColor,
-    loading = true,
-    loadingDescription = 'Spinner',
-    ...props
-  } = _ref;
+function extractReferrerComponent() {
+  var _activeElement$datase;
+  const activeElement = document.activeElement;
   const {
-    classNamePrefix,
-    theme
-  } = useDesignSystemTheme();
+    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
+    };
+  }
+  return undefined;
+}
 
-  // 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
-        })
-      })]
-    })
-  );
+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`;
 }
@@ -1984,7 +2670,8 @@ const getButtonEmotionStyles = _ref => {
     type,
     useFocusPseudoClass,
     forceIconStyles,
-    danger
+    danger,
+    useNewShadows
   } = _ref;
   const clsIcon = `.${theme.general.iconfontCssPrefix}`;
   const clsEndIcon = `.${getEndIconClsName(theme)}`;
@@ -1997,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
@@ -2023,7 +2713,7 @@ 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,
     display: 'inline-flex',
     alignItems: 'center',
@@ -2079,18 +2769,21 @@ const getButtonEmotionStyles = _ref => {
       ...getSecondaryDangerStyles(theme)
     },
     [`&[disabled]`]: {
-      ...getDisabledDefaultStyles(theme)
+      ...getDisabledDefaultStyles(theme, useNewShadows)
     },
     [`&${classLink}:disabled`]: {
-      ...getDisabledTertiaryStyles(theme)
+      ...getDisabledTertiaryStyles(theme, useNewShadows)
     },
     [`&${classDangerous}:disabled`]: {
-      ...getDisabledErrorStyles(theme)
+      ...getDisabledErrorStyles(theme, useNewShadows)
     },
     [`&${classPrimary}:disabled`]: {
-      ...getDisabledPrimaryStyles(theme)
+      ...getDisabledPrimaryStyles(theme, useNewShadows)
     },
     [`&[disabled], &${classDangerous}:disabled`]: {
+      ...(useNewShadows && {
+        boxShadow: 'none'
+      }),
       ...((onlyIcon || forceIconStyles) && {
         backgroundColor: 'transparent',
         '&:hover': {
@@ -2159,6 +2852,9 @@ const getButtonEmotionStyles = _ref => {
     },
     [`&${clsIconOnly}`]: {
       border: 'none',
+      ...(useNewShadows && {
+        boxShadow: 'none'
+      }),
       [`&:enabled:not(${classLink})`]: {
         ...tertiaryColors,
         color: theme.colors.textSecondary,
@@ -2250,7 +2946,7 @@ const getButtonEmotionStyles = _ref => {
     ...(type === 'tertiary' && {
       [`&:enabled:not(${clsIconOnly})`]: tertiaryColors,
       [`&${classLink}[disabled]`]: {
-        ...getDisabledTertiaryStyles(theme)
+        ...getDisabledTertiaryStyles(theme, useNewShadows)
       }
     })
   };
@@ -2259,35 +2955,41 @@ 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: analyticsEventsInput,
+      analyticsEvents = [DesignSystemEventProviderAnalyticsEventTypes.OnClick],
       shouldStartInteraction,
       ...props
     } = _ref2;
+    const formContext = useFormContext();
     const {
       theme,
       classNamePrefix
     } = useDesignSystemTheme();
-    const analyticsEvents = useMemo(() => analyticsEventsInput !== null && analyticsEventsInput !== void 0 ? analyticsEventsInput : [DesignSystemEventProviderAnalyticsEventTypes.OnClick], [analyticsEventsInput]);
+    const {
+      useNewShadows
+    } = useDesignSystemSafexFlags();
+    const memoizedAnalyticsEvents = useMemo(() => analyticsEvents, [analyticsEvents]);
     const eventContext = useDesignSystemEventComponentCallbacks({
       componentType: DesignSystemEventProviderComponentTypes.Button,
       componentId,
-      analyticsEvents,
-      shouldStartInteraction
+      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 clsEndIcon = getEndIconClsName(theme);
     const loadingCls = `${classNamePrefix}-btn-loading-icon`;
@@ -2297,6 +2999,7 @@ const Button = /* #__PURE__ */(() => {
       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(() => {
@@ -2311,20 +3014,25 @@ const Button = /* #__PURE__ */(() => {
       }
     }, [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(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',
@@ -2342,7 +3050,7 @@ const Button = /* #__PURE__ */(() => {
       children: jsx(Button$1, {
         ...addDebugOutlineIfEnabled(),
         ...props,
-        css: getButtonEmotionStyles({
+        css: getMemoizedButtonEmotionStyles({
           theme,
           classNamePrefix,
           loading: Boolean(loading),
@@ -2354,7 +3062,8 @@ const Button = /* #__PURE__ */(() => {
           size: size || 'middle',
           type,
           forceIconStyles: Boolean(dangerouslySetForceIconStyles),
-          useFocusPseudoClass: Boolean(dangerouslyUseFocusPseudoClass)
+          useFocusPseudoClass: Boolean(dangerouslyUseFocusPseudoClass),
+          useNewShadows
         }),
         href: props.disabled ? undefined : props.href,
         ...dangerouslySetAntdProps,
@@ -2362,6 +3071,8 @@ 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',
@@ -2390,25 +3101,58 @@ const Button = /* #__PURE__ */(() => {
   return Button;
 })();
 
-const Root = Popover$1.Root; // Behavioral component only
 const Anchor = Popover$1.Anchor; // Behavioral component only
 
-const Content = /*#__PURE__*/forwardRef(function Content(_ref, ref) {
+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
-  } = _ref;
+  } = _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, {
+      css: [contentStyles(theme, useNewShadows), {
         minWidth,
         maxWidth
       }, process.env.NODE_ENV === "production" ? "" : ";label:Content;"],
@@ -2418,11 +3162,11 @@ const Content = /*#__PURE__*/forwardRef(function Content(_ref, ref) {
     })
   });
 });
-const Trigger = /*#__PURE__*/forwardRef(function Trigger(_ref2, ref) {
+const Trigger = /*#__PURE__*/forwardRef(function Trigger(_ref3, ref) {
   let {
     children,
     ...props
-  } = _ref2;
+  } = _ref3;
   return jsx(Popover$1.Trigger, {
     ...addDebugOutlineIfEnabled(),
     ref: ref,
@@ -2430,22 +3174,22 @@ const Trigger = /*#__PURE__*/forwardRef(function Trigger(_ref2, ref) {
     children: children
   });
 });
-const Close = /*#__PURE__*/forwardRef(function Close(_ref3, ref) {
+const Close = /*#__PURE__*/forwardRef(function Close(_ref4, ref) {
   let {
     children,
     ...props
-  } = _ref3;
+  } = _ref4;
   return jsx(Popover$1.Close, {
     ref: ref,
     ...props,
     children: children
   });
 });
-const Arrow = /*#__PURE__*/forwardRef(function Arrow(_ref4, ref) {
+const Arrow = /*#__PURE__*/forwardRef(function Arrow(_ref5, ref) {
   let {
     children,
     ...props
-  } = _ref4;
+  } = _ref5;
   const {
     theme
   } = useDesignSystemTheme();
@@ -2489,17 +3233,17 @@ const CONSTANTS = {
     return 2;
   }
 };
-const popoverContentStyles = theme => ({
+const popoverContentStyles = (theme, useNewShadows) => ({
   backgroundColor: theme.colors.backgroundPrimary,
   color: theme.colors.textPrimary,
   lineHeight: theme.typography.lineHeightBase,
   border: `1px solid ${theme.colors.borderDecorative}`,
-  borderRadius: theme.borders.borderRadiusMd,
+  borderRadius: theme.legacyBorders.borderRadiusMd,
   padding: `${theme.spacing.sm}px`,
-  boxShadow: theme.general.shadowLow,
+  boxShadow: useNewShadows ? theme.shadows.lg : theme.general.shadowLow,
   userSelect: 'none',
   zIndex: theme.options.zIndexBase + 30,
-  ...getDarkModePortalStyles(theme),
+  ...getDarkModePortalStyles(theme, useNewShadows),
   a: importantify({
     color: theme.colors.actionTertiaryTextDefault,
     cursor: 'default',
@@ -2514,8 +3258,8 @@ const popoverContentStyles = theme => ({
     outlineColor: theme.colors.primary
   }
 });
-const contentStyles = theme => ({
-  ...popoverContentStyles(theme)
+const contentStyles = (theme, useNewShadows) => ({
+  ...popoverContentStyles(theme, useNewShadows)
 });
 
 var Popover = /*#__PURE__*/Object.freeze({
@@ -2588,6 +3332,28 @@ const getLinkStyles = (theme, clsPrefix) => {
     '.anticon': {
       fontSize: 12,
       verticalAlign: 'baseline'
+    },
+    // 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 /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getLinkStyles;");
@@ -2617,9 +3383,7 @@ const getEllipsisIconStyles = useNewIcons => {
     top: 0,
     display: 'flex',
     alignItems: 'center',
-    ...(useNewIcons && {
-      fontSize: 12
-    })
+    ...(useNewIcons)
   };
   return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getEllipsisIconStyles;");
 };
@@ -2627,7 +3391,7 @@ const Link = /*#__PURE__*/forwardRef(function Link(_ref, ref) {
   let {
     dangerouslySetAntdProps,
     componentId,
-    analyticsEvents,
+    analyticsEvents = [DesignSystemEventProviderAnalyticsEventTypes.OnClick],
     onClick,
     ...props
   } = _ref;
@@ -2640,14 +3404,15 @@ const Link = /*#__PURE__*/forwardRef(function Link(_ref, ref) {
     theme,
     classNamePrefix
   } = useDesignSystemTheme();
+  const memoizedAnalyticsEvents = useMemo(() => analyticsEvents, [analyticsEvents]);
   const eventContext = useDesignSystemEventComponentCallbacks({
     componentType: DesignSystemEventProviderComponentTypes.TypographyLink,
     componentId,
-    analyticsEvents: analyticsEvents !== null && analyticsEvents !== void 0 ? analyticsEvents : [DesignSystemEventProviderAnalyticsEventTypes.OnClick],
+    analyticsEvents: memoizedAnalyticsEvents,
     shouldStartInteraction: false
   });
   const onClickHandler = useCallback(e => {
-    eventContext.onClick();
+    eventContext.onClick(e);
     onClick === null || onClick === void 0 || onClick(e);
   }, [eventContext, onClick]);
   const newTabProps = {
@@ -2671,7 +3436,7 @@ const Link = /*#__PURE__*/forwardRef(function Link(_ref, ref) {
       onClick: onClickHandler,
       ...linkProps,
       ...dangerouslySetAntdProps,
-      children: [children, openInNewTab ? jsx(NewWindowIcon$1, {
+      children: [children, openInNewTab ? jsx(NewWindowIcon, {
         css: iconStyles,
         ...newTabProps
       }) : null]
@@ -2762,7 +3527,7 @@ function getTextEmotionStyles(theme, props) {
       lineHeight: theme.typography.lineHeightBase,
       background: theme.colors.typographyCodeBg,
       fontFamily: 'monospace',
-      borderRadius: theme.borders.borderRadiusMd,
+      borderRadius: theme.legacyBorders.borderRadiusMd,
       padding: '2px 4px',
       border: 'unset',
       margin: 0
@@ -2840,6 +3605,64 @@ function Text(userProps) {
   });
 }
 
+const MiddleElideSuffixLength = 6;
+function TextMiddleElide(_ref) {
+  var _process, _textProps$title;
+  let {
+    text,
+    suffixLength = MiddleElideSuffixLength,
+    ...textProps
+  } = _ref;
+  const id = useMemo(() => _uniqueId('text-middle-elided-'), []);
+  const {
+    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
+  });
+}
+
+// Exported for unit tests
+function getStartAndSuffix(text, suffixLength) {
+  if (text.length <= suffixLength) {
+    return {
+      start: text,
+      suffix: undefined
+    };
+  }
+  const start = text.slice(0, text.length - suffixLength).trim();
+  const suffix = text.slice(-suffixLength).trim();
+  return {
+    start,
+    suffix
+  };
+}
+
 const {
   Title: AntDTitle
 } = Typography$1;
@@ -2913,6 +3736,7 @@ function Title(userProps) {
     dangerouslySetAntdProps,
     withoutMargins,
     color,
+    elementLevel,
     ...props
   } = userProps;
   const {
@@ -2922,6 +3746,7 @@ function Title(userProps) {
     children: jsx(AntDTitle, {
       ...addDebugOutlineIfEnabled(),
       ...props,
+      level: elementLevel !== null && elementLevel !== void 0 ? elementLevel : props.level,
       className: props.className,
       css: getTitleEmotionStyles(theme, userProps),
       ...dangerouslySetAntdProps
@@ -2982,8 +3807,9 @@ const Typography = /* #__PURE__ */(() => {
   Typography.Link = Link;
   Typography.Hint = Hint;
   Typography.Truncate = Truncate;
+  Typography.TextMiddleElide = TextMiddleElide;
   return Typography;
 })();
 
-export { LoadingStateContext as $, Arrow as A, Button as B, CloseIcon$1 as C, DesignSystemAntDConfigProvider as D, AccessibleContainer as E, DU_BOIS_ENABLE_ANIMATION_CLASSNAME as F, lightColorList as G, getDefaultStyles as H, Icon as I, getPrimaryStyles as J, getDisabledSplitButtonStyles as K, LoadingState as L, getButtonEmotionStyles as M, DesignSystemEventProvider as N, useDesignSystemEventSuppressInteractionContext as O, DesignSystemThemeContext as P, DesignSystemContext as Q, RestoreAntDDefaultClsPrefix as R, Spinner as S, Trigger as T, DesignSystemThemeProvider as U, DesignSystemProvider as V, WarningIcon$1 as W, ApplyDesignSystemFlags as X, useAntDConfigProviderContext as Y, WithDesignSystemThemeHoc as Z, NewWindowIcon$1 as _, useDesignSystemTheme as a, Popover as a0, getTypographyColor as a1, getBottomOnlyShadowScrollStyles as a2, ColorVars as a3, primitiveColors as a4, DEFAULT_SPACING_UNIT as a5, addDebugOutlineStylesIfEnabled as b, useDesignSystemEventComponentCallbacks as c, DesignSystemEventProviderComponentTypes as d, DesignSystemEventProviderAnalyticsEventTypes as e, useNotifyOnFirstView as f, getAnimationCss as g, addDebugOutlineIfEnabled as h, getDarkModePortalStyles as i, useUniqueId as j, Root as k, Content as l, DesignSystemEventSuppressInteractionProviderContext as m, DesignSystemEventSuppressInteractionTrueContextValue as n, Typography as o, importantify as p, CheckIcon$1 as q, getValidationStateColor as r, safex as s, ApplyDesignSystemContextOverrides as t, useDesignSystemContext as u, visuallyHidden as v, getShadowScrollStyles as w, DangerIcon$1 as x, LoadingIcon$1 as y, Title as z };
-//# sourceMappingURL=Typography-ed0b1c4d.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