@databricks/design-system 1.12.13 → 1.12.15

package/dist/{DropdownMenu-dbeef1b7.js → Stepper-a0fb4d9b.js}

@@ -1,8 +1,8 @@
-import React__default, { createContext, useContext, useMemo, useEffect, useState, forwardRef, useRef, useLayoutEffect, useImperativeHandle, Children } from 'react';
+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 { useTheme, ThemeProvider, css, keyframes } from '@emotion/react';
-import { notification, ConfigProvider, Button as Button$1, Typography as Typography$1, Tooltip as Tooltip$1, Input as Input$2 } from 'antd';
-import * as DropdownMenu$1 from '@radix-ui/react-dropdown-menu';
+import { notification, ConfigProvider, Typography as Typography$1, Button as Button$1, Input as Input$2 } from 'antd';
+import AntDIcon from '@ant-design/icons';
 import _isNil from 'lodash/isNil';
 import _endsWith from 'lodash/endsWith';
 import _isBoolean from 'lodash/isBoolean';
@@ -11,7 +11,6 @@ import _isString from 'lodash/isString';
 import _mapValues from 'lodash/mapValues';
 import _memoize from 'lodash/memoize';
 import unitless from '@emotion/unitless';
-import AntDIcon from '@ant-design/icons';
 
 /**
  * Used to hide text visually, but still be readable by screen-readers
@@ -181,7 +180,6 @@ let ValidSemanticColors = /*#__PURE__*/function (ValidSemanticColors) {
   ValidSemanticColors["ActionTertiaryTextHover"] = "actionTertiaryTextHover";
   ValidSemanticColors["ActionTertiaryTextPress"] = "actionTertiaryTextPress";
   ValidSemanticColors["BackgroundDanger"] = "backgroundDanger";
-  ValidSemanticColors["BackgroundInfo"] = "backgroundInfo";
   ValidSemanticColors["BackgroundPrimary"] = "backgroundPrimary";
   ValidSemanticColors["BackgroundSecondary"] = "backgroundSecondary";
   ValidSemanticColors["BackgroundSuccess"] = "backgroundSuccess";
@@ -192,6 +190,8 @@ let ValidSemanticColors = /*#__PURE__*/function (ValidSemanticColors) {
   ValidSemanticColors["BorderWarning"] = "borderWarning";
   ValidSemanticColors["CodeBackground"] = "codeBackground";
   ValidSemanticColors["OverlayOverlay"] = "overlayOverlay";
+  ValidSemanticColors["ProgressFill"] = "progressFill";
+  ValidSemanticColors["ProgressTrack"] = "progressTrack";
   ValidSemanticColors["Skeleton"] = "skeleton";
   ValidSemanticColors["TableBackgroundSelectedDefault"] = "tableBackgroundSelectedDefault";
   ValidSemanticColors["TableBackgroundSelectedHover"] = "tableBackgroundSelectedHover";
@@ -399,6 +399,72 @@ const getBottomOnlyShadowScrollStyles = function getBottomOnlyShadowScrollStyles
   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",
@@ -490,15 +556,15 @@ const primitiveColors = {
   green600: '#277C43',
   green700: '#115026',
   green800: '#093919',
-  grey050: '#F2F8F8',
-  grey100: '#E4ECF1',
-  grey200: '#CDDAE5',
-  grey300: '#BDCDDB',
-  grey350: '#90A4B5',
-  grey400: '#8196A7',
-  grey500: '#5D7283',
-  grey600: '#44535F',
-  grey650: '#354450',
+  grey050: '#F6F7F9',
+  grey100: '#E8ECF0',
+  grey200: '#D1D9E1',
+  grey300: '#C0CDD8',
+  grey350: '#92A4B3',
+  grey400: '#8396A5',
+  grey500: '#5F7281',
+  grey600: '#445461',
+  grey650: '#37444F',
   grey700: '#1F272D',
   grey800: '#11171C',
   indigo: '#434A93',
@@ -556,9 +622,9 @@ const darkColorList = {
   actionDefaultTextDefault: primitiveColors.grey100,
   actionDefaultTextHover: primitiveColors.blue400,
   actionDefaultTextPress: primitiveColors.blue300,
-  actionDisabledBackground: primitiveColors.grey700,
-  actionDisabledBorder: primitiveColors.grey650,
-  actionDisabledText: primitiveColors.grey600,
+  actionDisabledBackground: primitiveColors.grey650,
+  actionDisabledBorder: primitiveColors.grey600,
+  actionDisabledText: primitiveColors.grey500,
   actionIconBackgroundDefault: 'rgba(255, 255, 255, 0.0000)',
   actionIconBackgroundHover: 'rgba(255, 255, 255, 0.0800)',
   actionIconBackgroundPress: 'rgba(255, 255, 255, 0.1600)',
@@ -585,7 +651,6 @@ const darkColorList = {
   actionTertiaryTextHover: primitiveColors.blue400,
   actionTertiaryTextPress: primitiveColors.blue300,
   backgroundDanger: 'rgba(200, 45, 76, 0.1600)',
-  backgroundInfo: 'rgba(68, 83, 95, 0.1600)',
   backgroundPrimary: primitiveColors.grey800,
   backgroundSecondary: primitiveColors.grey700,
   backgroundSuccess: 'rgba(39, 124, 67, 0.1600)',
@@ -594,9 +659,11 @@ const darkColorList = {
   borderAccessible: primitiveColors.grey300,
   borderDanger: primitiveColors.red500,
   borderWarning: primitiveColors.yellow500,
-  codeBackground: primitiveColors.grey700,
+  codeBackground: primitiveColors.grey650,
   overlayOverlay: 'rgba(31, 38, 45, 0.7200)',
-  skeleton: 'rgba(228, 236, 241, 0.1000)',
+  progressFill: primitiveColors.grey600,
+  progressTrack: primitiveColors.grey700,
+  skeleton: 'rgba(144, 164, 181, 0.1600)',
   tableBackgroundSelectedDefault: 'rgba(189, 205, 219, 0.0800)',
   tableBackgroundSelectedHover: 'rgba(189, 205, 219, 0.1200)',
   tableBackgroundUnselectedDefault: primitiveColors.grey800,
@@ -604,13 +671,13 @@ const darkColorList = {
   tagBrown: 'rgba(166, 99, 12, 0.8600)',
   tagCharcoal: 'rgba(68, 83, 95, 0.8600)',
   tagCoral: 'rgba(200, 50, 67, 0.8600)',
-  tagDefault: primitiveColors.grey700,
+  tagDefault: primitiveColors.grey650,
   tagHover: 'rgba(138, 202, 255, 0.0800)',
   tagIconDefault: primitiveColors.grey350,
   tagIconHover: primitiveColors.grey350,
   tagIconPress: primitiveColors.grey350,
   tagIndigo: 'rgba(67, 74, 147, 0.8600)',
-  tagInverse: primitiveColors.grey100,
+  tagInverse: primitiveColors.grey800,
   tagLemon: 'rgba(250, 203, 102, 0.8600)',
   tagLime: 'rgba(48, 134, 19, 0.8600)',
   tagPink: 'rgba(180, 80, 145, 0.8600)',
@@ -619,7 +686,7 @@ const darkColorList = {
   tagTeal: 'rgba(4, 134, 125, 0.8600)',
   tagText: primitiveColors.grey100,
   tagTurquoise: 'rgba(19, 125, 174, 0.8600)',
-  textPlaceholder: primitiveColors.grey650,
+  textPlaceholder: primitiveColors.grey400,
   textPrimary: primitiveColors.grey100,
   textSecondary: primitiveColors.grey350,
   textValidationDanger: primitiveColors.red500,
@@ -657,9 +724,9 @@ const lightColorList = {
   actionDefaultTextDefault: primitiveColors.grey800,
   actionDefaultTextHover: primitiveColors.blue700,
   actionDefaultTextPress: primitiveColors.blue800,
-  actionDisabledBackground: primitiveColors.grey050,
-  actionDisabledBorder: primitiveColors.grey100,
-  actionDisabledText: primitiveColors.grey300,
+  actionDisabledBackground: primitiveColors.grey100,
+  actionDisabledBorder: primitiveColors.grey200,
+  actionDisabledText: primitiveColors.grey350,
   actionIconBackgroundDefault: 'rgba(34, 114, 180, 0.0000)',
   actionIconBackgroundHover: 'rgba(34, 114, 180, 0.0800)',
   actionIconBackgroundPress: 'rgba(34, 114, 180, 0.1600)',
@@ -686,7 +753,6 @@ const lightColorList = {
   actionTertiaryTextHover: primitiveColors.blue700,
   actionTertiaryTextPress: primitiveColors.blue800,
   backgroundDanger: primitiveColors.red100,
-  backgroundInfo: primitiveColors.grey100,
   backgroundPrimary: primitiveColors.white,
   backgroundSecondary: primitiveColors.grey050,
   backgroundSuccess: primitiveColors.green100,
@@ -697,7 +763,9 @@ const lightColorList = {
   borderWarning: primitiveColors.yellow300,
   codeBackground: 'rgba(68, 83, 95, 0.0800)',
   overlayOverlay: 'rgba(64, 63, 63, 0.7200)',
-  skeleton: 'rgba(17, 23, 28, 0.1000)',
+  progressFill: primitiveColors.grey300,
+  progressTrack: primitiveColors.grey100,
+  skeleton: 'rgba(144, 164, 181, 0.1600)',
   tableBackgroundSelectedDefault: 'rgba(68, 83, 95, 0.0800)',
   tableBackgroundSelectedHover: 'rgba(68, 83, 95, 0.1200)',
   tableBackgroundUnselectedDefault: primitiveColors.white,
@@ -705,7 +773,7 @@ const lightColorList = {
   tagBrown: primitiveColors.brown,
   tagCharcoal: primitiveColors.grey600,
   tagCoral: primitiveColors.coral,
-  tagDefault: primitiveColors.grey050,
+  tagDefault: primitiveColors.grey100,
   tagHover: 'rgba(34, 114, 180, 0.0800)',
   tagIconDefault: primitiveColors.grey600,
   tagIconHover: primitiveColors.grey600,
@@ -722,7 +790,7 @@ const lightColorList = {
   tagTurquoise: primitiveColors.turquoise,
   textPlaceholder: primitiveColors.grey400,
   textPrimary: primitiveColors.grey800,
-  textSecondary: primitiveColors.grey600,
+  textSecondary: primitiveColors.grey500,
   textValidationDanger: primitiveColors.red600,
   textValidationSuccess: primitiveColors.green600,
   textValidationWarning: primitiveColors.yellow600,
@@ -1314,7 +1382,6 @@ function SvgCursorIcon(props) {
       })
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "CursorIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
           d: "M16 0H0v16h16z"
@@ -1382,7 +1449,6 @@ function SvgFaceFrownIcon(props) {
       })]
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "FaceFrownIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
           d: "M0 0h16v16H0z"
@@ -1421,7 +1487,6 @@ function SvgFaceNeutralIcon(props) {
       })]
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "FaceNeutralIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
           d: "M0 0h16v16H0z"
@@ -1464,7 +1529,6 @@ function SvgFaceSmileIcon(props) {
       })]
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "FaceSmileIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
           d: "M0 0h16v16H0z"
@@ -1483,35 +1547,6 @@ const FaceSmileIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
 FaceSmileIcon.displayName = 'FaceSmileIcon';
 var FaceSmileIcon$1 = FaceSmileIcon;
 
-function SvgInfoIcon(props) {
-  return jsxs("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    viewBox: "0 0 16 16",
-    ...props,
-    children: [jsx("path", {
-      fill: "currentColor",
-      d: "M7.25 11V7h1.5v4h-1.5ZM8 4.5A.75.75 0 1 1 8 6a.75.75 0 0 1 0-1.5Z"
-    }), jsx("path", {
-      fill: "currentColor",
-      fillRule: "evenodd",
-      d: "M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Z",
-      clipRule: "evenodd"
-    })]
-  });
-}
-const InfoIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
-  return jsx(Icon, {
-    ref: forwardedRef,
-    ...props,
-    component: SvgInfoIcon
-  });
-});
-InfoIcon.displayName = 'InfoIcon';
-var InfoIcon$1 = InfoIcon;
-
 function SvgLoadingIcon(props) {
   return jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1620,1316 +1655,1257 @@ const WarningIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
 WarningIcon.displayName = 'WarningIcon';
 var WarningIcon$1 = WarningIcon;
 
-function getDefaultStyles(theme) {
-  let loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  const defaultStyles = {
-    backgroundColor: theme.colors.actionDefaultBackgroundDefault,
-    borderColor: theme.colors.actionDefaultBorderDefault,
-    color: theme.colors.actionDefaultTextDefault
-  };
-  return {
-    ...defaultStyles,
-    lineHeight: theme.typography.lineHeightBase,
-    textDecoration: 'none',
-    '&:hover': {
-      backgroundColor: theme.colors.actionDefaultBackgroundHover,
-      borderColor: theme.colors.actionDefaultBorderHover,
-      color: theme.colors.actionDefaultTextHover
-    },
-    '&:active': {
-      backgroundColor: loading ? theme.colors.actionDefaultBackgroundDefault : theme.colors.actionDefaultBackgroundPress,
-      borderColor: theme.colors.actionDefaultBorderPress,
-      color: theme.colors.actionDefaultTextPress
-    }
-  };
-}
-function getPrimaryStyles(theme) {
-  const defaultStyles = {
-    backgroundColor: theme.colors.actionPrimaryBackgroundDefault,
-    borderColor: 'transparent',
-    color: theme.colors.actionPrimaryTextDefault
-  };
-  return {
-    ...defaultStyles,
-    textShadow: 'none',
-    '&:hover': {
-      backgroundColor: theme.colors.actionPrimaryBackgroundHover,
-      borderColor: 'transparent',
-      color: theme.colors.actionPrimaryTextHover
-    },
-    '&:active': {
-      backgroundColor: theme.colors.actionPrimaryBackgroundPress,
-      borderColor: 'transparent',
-      color: theme.colors.actionPrimaryTextPress
+const {
+  Text: AntDText$1
+} = Typography$1;
+function getTextEmotionStyles$1(theme, props) {
+  return /*#__PURE__*/css({
+    '&&': {
+      display: 'block',
+      fontSize: theme.typography.fontSizeSm,
+      lineHeight: theme.typography.lineHeightSm,
+      color: theme.colors.textSecondary,
+      ...(props.withoutMargins && {
+        '&&': {
+          marginTop: 0,
+          marginBottom: 0
+        }
+      })
     }
-  };
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getTextEmotionStyles;");
 }
-function getLinkStyles$1(theme) {
-  const defaultStyles = {
-    backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
-    borderColor: theme.colors.actionTertiaryBackgroundDefault,
-    color: theme.colors.actionTertiaryTextDefault
-  };
-  return {
-    ...defaultStyles,
-    '&:hover': {
-      backgroundColor: theme.colors.actionTertiaryBackgroundHover,
-      borderColor: 'transparent',
-      color: theme.colors.actionTertiaryTextHover
-    },
-    '&:active': {
-      backgroundColor: theme.colors.actionTertiaryBackgroundPress,
-      borderColor: 'transparent',
-      color: theme.colors.actionTertiaryTextPress
-    },
-    '&[disabled]:hover': {
-      background: 'none',
-      color: theme.colors.actionDisabledText
-    }
-  };
+function Hint(userProps) {
+  const {
+    dangerouslySetAntdProps,
+    bold,
+    withoutMargins,
+    color,
+    ...props
+  } = userProps;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(AntDText$1, {
+      ...props,
+      css: getTextEmotionStyles$1(theme, userProps),
+      ...dangerouslySetAntdProps
+    })
+  });
 }
-function getPrimaryDangerStyles(theme) {
-  const defaultStyles = {
-    backgroundColor: theme.colors.actionDangerPrimaryBackgroundDefault,
-    borderColor: 'transparent',
-    color: theme.colors.actionPrimaryTextDefault
-  };
-  return {
-    ...defaultStyles,
-    '&:hover': {
-      backgroundColor: theme.colors.actionDangerPrimaryBackgroundHover,
-      borderColor: 'transparent',
-      color: theme.colors.actionPrimaryTextHover
+
+const getLinkStyles$1 = (theme, clsPrefix) => {
+  const classTypography = `.${clsPrefix}-typography`;
+  const styles = {
+    [`&${classTypography}, &${classTypography}:focus`]: {
+      color: theme.colors.actionTertiaryTextDefault
     },
-    '&:active': {
-      backgroundColor: theme.colors.actionDangerPrimaryBackgroundPress,
-      borderColor: 'transparent',
-      color: theme.colors.actionPrimaryTextPress
+    [`&${classTypography}:hover, &${classTypography}:hover .anticon`]: {
+      color: theme.colors.actionTertiaryTextHover,
+      textDecoration: 'underline'
     },
-    '&:focus-visible': {
-      outlineColor: theme.colors.actionDangerPrimaryBackgroundDefault
-    }
-  };
-}
-function getSecondaryDangerStyles(theme) {
-  const defaultStyles = {
-    backgroundColor: theme.colors.actionDangerDefaultBackgroundDefault,
-    borderColor: theme.colors.actionDangerDefaultBorderDefault,
-    color: theme.colors.actionDangerDefaultTextDefault
-  };
-  return {
-    ...defaultStyles,
-    '&:hover': {
-      backgroundColor: theme.colors.actionDangerDefaultBackgroundHover,
-      borderColor: theme.colors.actionDangerDefaultBorderHover,
-      color: theme.colors.actionDangerDefaultTextHover
+    [`&${classTypography}:active, &${classTypography}:active .anticon`]: {
+      color: theme.colors.actionTertiaryTextPress,
+      textDecoration: 'underline'
     },
-    '&:active': {
-      backgroundColor: theme.colors.actionDangerDefaultBackgroundPress,
-      borderColor: theme.colors.actionDangerDefaultBorderPress,
-      color: theme.colors.actionDangerDefaultTextPress
+    [`&${classTypography}:focus-visible`]: {
+      textDecoration: 'underline'
     },
-    '&:focus-visible': {
-      outlineColor: theme.colors.actionDangerPrimaryBackgroundDefault
+    '.anticon': {
+      fontSize: 12,
+      verticalAlign: 'baseline'
     }
   };
-}
-function getDisabledStyles(theme) {
-  const defaultStyles = {
-    backgroundColor: theme.colors.actionDisabledBackground,
-    borderColor: 'transparent',
-    color: theme.colors.actionDisabledText
+  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getLinkStyles;");
+};
+const getEllipsisNewTabLinkStyles = () => {
+  const styles = {
+    paddingRight: 'calc(2px + 1em)',
+    // 1em for icon
+    position: 'relative'
   };
-  return {
-    ...defaultStyles,
-    '&:hover': {
-      backgroundColor: theme.colors.actionDisabledBackground,
-      borderColor: 'transparent',
-      color: theme.colors.actionDisabledText
-    },
-    '&:active': {
-      backgroundColor: theme.colors.actionDisabledBackground,
-      borderColor: 'transparent',
-      color: theme.colors.actionDisabledText
-    }
+  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getEllipsisNewTabLinkStyles;");
+};
+const getIconStyles = theme => {
+  const styles = {
+    marginLeft: 2,
+    color: theme.colors.actionTertiaryTextDefault
   };
-}
-function getDisabledTertiaryStyles(theme) {
-  const defaultStyles = {
-    backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
-    borderColor: 'transparent',
-    color: theme.colors.actionDisabledText
+  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getIconStyles;");
+};
+const getEllipsisIconStyles = useNewIcons => {
+  const styles = {
+    position: 'absolute',
+    right: 0,
+    bottom: 0,
+    top: 0,
+    display: 'flex',
+    alignItems: 'center',
+    ...(useNewIcons && {
+      fontSize: 12
+    })
   };
-  return {
-    ...defaultStyles,
-    '&:hover': {
-      backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
-      borderColor: 'transparent',
-      color: theme.colors.actionDisabledText
-    },
-    '&:active': {
-      backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
-      borderColor: 'transparent',
-      color: theme.colors.actionDisabledText
-    }
-  };
-}
-
-let DesignSystemEventProviderComponentTypes = /*#__PURE__*/function (DesignSystemEventProviderComponentTypes) {
-  DesignSystemEventProviderComponentTypes["Button"] = "button";
-  DesignSystemEventProviderComponentTypes["Input"] = "input";
-  return DesignSystemEventProviderComponentTypes;
-}({});
-let DesignSystemEventProviderAnalyticsEventTypes = /*#__PURE__*/function (DesignSystemEventProviderAnalyticsEventTypes) {
-  DesignSystemEventProviderAnalyticsEventTypes["OnClick"] = "onClick";
-  DesignSystemEventProviderAnalyticsEventTypes["OnView"] = "onView";
-  DesignSystemEventProviderAnalyticsEventTypes["OnValueChange"] = "onValueChange";
-  return DesignSystemEventProviderAnalyticsEventTypes;
-}({});
-const shouldTriggerCallback = (eventType, analyticsEvents) => {
-  return analyticsEvents.includes(eventType);
-};
-const DefaultEmptyCallbacks = {
-  callback: () => {}
-};
-const DesignSystemEventProviderContext = /*#__PURE__*/React__default.createContext(DefaultEmptyCallbacks);
-
-/**
- * This gets the event provider, which is used to pass callbacks to the design system for events such as onClick, onView, and onValueChange.
- * If the value is undefined, then the expected behavior is to not emit any events.
- *
- * @returns DesignSystemEventProviderContextType
- */
-const useDesignSystemEventProviderContext = () => {
-  return useContext(DesignSystemEventProviderContext);
+  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getEllipsisIconStyles;");
 };
-
-/**
- * NOTE: This is not suggested for direct usage from engineers, and should emit your own events.
- * See https://databricks.atlassian.net/wiki/spaces/UN/pages/2533556277/Usage+Logging+in+UI#Send-usage-logging-from-UI for more details.
- *
- * This gets the event provider component event type callbacks.
- * If context & componentId are not undefined, then it will check if the event is in analyticsEvents or the default analyticsEvents for that component.
- * If the context or componentId are undefined, then the expected behavior is to not emit any events.
- *
- * @returns Object of event callbacks
- */
-const useDesignSystemEventComponentCallbacks = _ref => {
+const Link = /*#__PURE__*/forwardRef(function Link(_ref, ref) {
   let {
-    componentType,
-    componentId,
-    analyticsEvents
+    dangerouslySetAntdProps,
+    ...props
   } = _ref;
-  const context = useDesignSystemEventProviderContext();
-  const callbacks = useMemo(() => {
-    if (context === DefaultEmptyCallbacks || componentId === undefined) {
-      return {
-        onClick: () => {},
-        onValueChange: () => {},
-        onView: () => {}
-      };
-    }
-    return {
-      onClick: () => {
-        if (shouldTriggerCallback(DesignSystemEventProviderAnalyticsEventTypes.OnClick, analyticsEvents)) {
-          context.callback(DesignSystemEventProviderAnalyticsEventTypes.OnClick, componentType, componentId);
-        }
-      },
-      onValueChange: () => {
-        if (shouldTriggerCallback(DesignSystemEventProviderAnalyticsEventTypes.OnValueChange, analyticsEvents)) {
-          context.callback(DesignSystemEventProviderAnalyticsEventTypes.OnValueChange, componentType, componentId);
-        }
-      },
-      onView: () => {
-        if (shouldTriggerCallback(DesignSystemEventProviderAnalyticsEventTypes.OnView, analyticsEvents)) {
-          context.callback(DesignSystemEventProviderAnalyticsEventTypes.OnView, componentType, componentId);
-        }
-      }
-    };
-  }, [context, componentType, componentId, analyticsEvents]);
-  return callbacks;
-};
-
-/**
- * NOTE: This is not suggested for direct usage from engineers, and should use RecordEventContext instead.
- * See https://databricks.atlassian.net/wiki/spaces/UN/pages/2533556277/Usage+Logging+in+UI#Send-usage-logging-from-UI for more details.
- *
- * This is the Design System Event Context Provider, and is only used to pass callbacks to the design system for events such as onClick, onView, and onValueChange.
- *
- * @param children Children react elements
- * @param callback The event callback function
- * @returns Design System Event Context Provider with the children inside
- */
-function DesignSystemEventProvider(_ref2) {
-  let {
+  const {
     children,
-    callback
-  } = _ref2;
-  const contextValue = useMemo(() => {
-    return {
-      callback
-    };
-  }, [callback]);
-  return jsx(DesignSystemEventProviderContext.Provider, {
-    value: contextValue,
-    children: children
+    openInNewTab,
+    ...restProps
+  } = props;
+  const {
+    theme,
+    classNamePrefix
+  } = useDesignSystemTheme();
+  const newTabProps = {
+    rel: 'noopener noreferrer',
+    target: '_blank'
+  };
+  const linkProps = openInNewTab ? {
+    ...restProps,
+    ...newTabProps
+  } : {
+    ...restProps
+  };
+  const linkStyles = props.ellipsis && openInNewTab ? [getLinkStyles$1(theme, classNamePrefix), getEllipsisNewTabLinkStyles()] : getLinkStyles$1(theme, classNamePrefix);
+  const iconStyles = props.ellipsis ? [getIconStyles(theme), getEllipsisIconStyles()] : getIconStyles(theme);
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsxs(Typography$1.Link, {
+      "aria-disabled": linkProps.disabled,
+      css: linkStyles,
+      ref: ref,
+      ...linkProps,
+      ...dangerouslySetAntdProps,
+      children: [children, openInNewTab ? jsx(NewWindowIcon$1, {
+        css: iconStyles,
+        ...newTabProps
+      }) : null]
+    })
   });
-}
-
-// 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;
+const {
+  Paragraph: AntDParagraph
+} = Typography$1;
+function getParagraphEmotionStyles(theme, props) {
+  return /*#__PURE__*/css({
+    '&&': {
+      fontSize: theme.typography.fontSizeBase,
+      fontWeight: theme.typography.typographyRegularFontWeight,
+      lineHeight: theme.typography.lineHeightBase,
+      color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
+    },
+    '& .anticon': {
+      verticalAlign: 'text-bottom'
+    }
+  }, props.disabled && {
+    '&&': {
+      color: theme.colors.actionDisabledText
+    }
+  }, props.withoutMargins && {
+    '&&': {
+      marginTop: 0,
+      marginBottom: 0
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getParagraphEmotionStyles;");
 }
-let sequentialCounter = 0;
-function useStableUid() {
-  return useStable(() => sequentialCounter++);
+function Paragraph(userProps) {
+  const {
+    dangerouslySetAntdProps,
+    withoutMargins,
+    color,
+    ...props
+  } = userProps;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(AntDParagraph, {
+      ...props,
+      className: props.className,
+      css: getParagraphEmotionStyles(theme, userProps),
+      ...dangerouslySetAntdProps
+    })
+  });
 }
 
-/** Props for UI components that support a "loading" state. */
-
-/**
- * A handler for integrating UI components with external latency instrumentation.
- * If provided via `LoadingStateContext`, hooks will be called whenever child
- * components in a "loading" state are mounted and unmounted.
- */
-
-const LoadingStateContext = /*#__PURE__*/createContext(null);
-/**
- * Indicates that the containing component is in a "loading" state, i.e. that the UI
- * displayed to the user is semantically equivalent to them seeing a spinner or a
- * loading indicator. This means that the UI is not in its final settled state yet.
- *
- * All components that are in a "loading" state should render a `<LoadingState>`
- * component, preferrably with an appropriate description.
- *
- * By itself, `<LoadingState>` doesn't do anything, but if used within `LoadingStateContext`,
- * it will call the provided `startLoading()`/`endLoading()` hooks when the component
- * is mounted/unmounted, which can be used to integrate existing latency instrumentation.
- */
-const LoadingState = _ref => {
-  let {
-    description = 'Generic UI loading state'
-  } = _ref;
-  const uid = useStableUid();
-  const loadingStateContext = useContext(LoadingStateContext);
-  useLayoutEffect(() => {
-    // mount
-    if (loadingStateContext) {
-      loadingStateContext.startLoading(uid, description);
+const {
+  Text: AntDText
+} = Typography$1;
+function getTextEmotionStyles(theme, props) {
+  return /*#__PURE__*/css({
+    '&&': {
+      fontSize: theme.typography.fontSizeBase,
+      fontWeight: theme.typography.typographyRegularFontWeight,
+      lineHeight: theme.typography.lineHeightBase,
+      color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
     }
-    return () => {
-      // unmount
-      if (loadingStateContext) {
-        loadingStateContext.endLoading(uid);
-      }
-    };
-  }, [uid, description, loadingStateContext]);
-  return null;
-};
-
-const rotate = keyframes({
-  '0%': {
-    transform: 'rotate(0deg) translate3d(0, 0, 0)'
-  },
-  '100%': {
-    transform: 'rotate(360deg) translate3d(0, 0, 0)'
-  }
-});
-const cssSpinner = function (theme) {
-  let frameRate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 60;
-  let delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-  let animationDuration = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
-  let inheritColor = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-  const styles = {
-    animation: `${rotate} ${animationDuration}s steps(${frameRate}, end) infinite`,
-    ...(inheritColor ? {
-      color: 'inherit'
-    } : {
-      color: theme.colors.textSecondary
-    }),
-    animationDelay: `${delay}s`,
-    '@media only percy': {
-      animation: 'none'
+  }, props.disabled && {
+    '&&': {
+      color: theme.colors.actionDisabledText
     }
-  };
-  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.hint && {
+    '&&': {
+      fontSize: theme.typography.fontSizeSm,
+      lineHeight: theme.typography.lineHeightSm
+    }
+  }, props.bold && {
+    '&&': {
+      fontSize: theme.typography.fontSizeBase,
+      fontWeight: theme.typography.typographyBoldFontWeight,
+      lineHeight: theme.typography.lineHeightBase
+    }
+  }, props.code && {
+    '&& > code': {
+      color: theme.colors.textPrimary,
+      fontSize: theme.typography.fontSizeBase,
+      lineHeight: theme.typography.lineHeightBase,
+      background: theme.colors.typographyCodeBg,
+      fontFamily: 'monospace',
+      borderRadius: theme.borders.borderRadiusMd,
+      padding: '2px 4px',
+      border: 'unset',
+      margin: 0
+    }
+  }, props.size && {
+    '&&': (() => {
+      switch (props.size) {
+        case 'xxl':
+          return {
+            fontSize: theme.typography.fontSizeXxl,
+            lineHeight: theme.typography.lineHeightXxl,
+            '& .anticon': {
+              lineHeight: theme.typography.lineHeightXxl,
+              verticalAlign: 'middle'
+            }
+          };
+        case 'xl':
+          return {
+            fontSize: theme.typography.fontSizeXl,
+            lineHeight: theme.typography.lineHeightXl,
+            '& .anticon': {
+              lineHeight: theme.typography.lineHeightXl,
+              verticalAlign: 'middle'
+            }
+          };
+        case 'lg':
+          return {
+            fontSize: theme.typography.fontSizeLg,
+            lineHeight: theme.typography.lineHeightLg,
+            '& .anticon': {
+              lineHeight: theme.typography.lineHeightLg,
+              verticalAlign: 'middle'
+            }
+          };
+        case 'sm':
+          return {
+            fontSize: theme.typography.fontSizeSm,
+            lineHeight: theme.typography.lineHeightSm,
+            '& .anticon': {
+              verticalAlign: '-0.219em'
+            }
+          };
+        default:
+          return {};
+      }
+    })()
+  }, props.withoutMargins && {
+    '&&': {
+      marginTop: 0,
+      marginBottom: 0
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getTextEmotionStyles;");
+}
+function Text(userProps) {
+  // Omit props that are not supported by `antd`
+  const {
+    dangerouslySetAntdProps,
+    bold,
+    hint,
+    withoutMargins,
+    color,
     ...props
-  } = _ref;
+  } = userProps;
   const {
-    classNamePrefix,
     theme
   } = useDesignSystemTheme();
-
-  // We use Antd classes to keep styling unchanged
-  // TODO(FEINF-1407): We want to move away from Antd classes and use Emotion for styling in the future
-  const sizeSuffix = size === 'small' ? '-sm' : size === 'large' ? '-lg' : '';
-  const sizeClass = sizeSuffix ? `${classNamePrefix}-spin${sizeSuffix}` : '';
-  const wrapperClass = `${propClass || ''} ${classNamePrefix}-spin ${sizeClass} ${classNamePrefix}-spin-spinning ${DU_BOIS_ENABLE_ANIMATION_CLASSNAME}`.trim();
-  const className = `${classNamePrefix}-spin-dot ${DU_BOIS_ENABLE_ANIMATION_CLASSNAME}`.trim();
-  return (
-    // className has to follow {...props}, otherwise is `css` prop is passed down it will overwrite our className
-    jsxs("div", {
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(AntDText, {
       ...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
-        })
-      })]
+      className: props.className,
+      css: getTextEmotionStyles(theme, userProps),
+      ...dangerouslySetAntdProps
     })
-  );
-};
+  });
+}
 
-/**
- * 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 {
+  Title: AntDTitle
+} = Typography$1;
+function getLevelStyles(theme, props) {
+  switch (props.level) {
+    case 1:
+      return /*#__PURE__*/css({
+        '&&': {
+          fontSize: theme.typography.fontSizeXxl,
+          lineHeight: theme.typography.lineHeightXxl,
+          fontWeight: theme.typography.typographyBoldFontWeight
+        },
+        '& > .anticon': {
+          lineHeight: theme.typography.lineHeightXxl
+        }
+      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
+    case 2:
+      return /*#__PURE__*/css({
+        '&&': {
+          fontSize: theme.typography.fontSizeXl,
+          lineHeight: theme.typography.lineHeightXl,
+          fontWeight: theme.typography.typographyBoldFontWeight
+        },
+        '& > .anticon': {
+          lineHeight: theme.typography.lineHeightXl
+        }
+      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
+    case 3:
+      return /*#__PURE__*/css({
+        '&&': {
+          fontSize: theme.typography.fontSizeLg,
+          lineHeight: theme.typography.lineHeightLg,
+          fontWeight: theme.typography.typographyBoldFontWeight
+        },
+        '& > .anticon': {
+          lineHeight: theme.typography.lineHeightLg
+        }
+      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
+    case 4:
+    default:
+      return /*#__PURE__*/css({
+        '&&': {
+          fontSize: theme.typography.fontSizeMd,
+          lineHeight: theme.typography.lineHeightMd,
+          fontWeight: theme.typography.typographyBoldFontWeight
+        },
+        '& > .anticon': {
+          lineHeight: theme.typography.lineHeightMd
+        }
+      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
   }
-};
-
-function getEndIconClsName(theme) {
-  return `${theme.general.iconfontCssPrefix}-btn-end-icon`;
 }
-const getButtonEmotionStyles = _ref => {
-  let {
-    theme,
-    classNamePrefix,
-    loading,
-    withIcon,
-    onlyIcon,
-    isAnchor,
-    enableAnimation,
-    size,
-    type,
-    isFlex,
-    useFocusPseudoClass,
-    forceIconStyles
-  } = _ref;
-  const clsIcon = `.${theme.general.iconfontCssPrefix}`;
-  const clsEndIcon = `.${getEndIconClsName(theme)}`;
-  const clsLoadingIcon = `.${classNamePrefix}-btn-loading-icon`;
-  const clsIconOnly = `.${classNamePrefix}-btn-icon-only`;
-  const classPrimary = `.${classNamePrefix}-btn-primary`;
-  const classLink = `.${classNamePrefix}-btn-link`;
-  const classDangerous = `.${classNamePrefix}-btn-dangerous`;
-  const SMALL_BUTTON_HEIGHT = 24;
-  const tertiaryColors = {
-    background: theme.colors.actionTertiaryBackgroundDefault,
-    color: theme.colors.actionTertiaryTextDefault,
-    '&:hover': {
-      background: theme.colors.actionTertiaryBackgroundHover,
-      color: theme.colors.actionTertiaryTextHover
+function getTitleEmotionStyles(theme, props) {
+  return /*#__PURE__*/css(getLevelStyles(theme, props), {
+    '&&': {
+      color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
     },
-    '&:active': {
-      background: theme.colors.actionTertiaryBackgroundPress,
-      color: theme.colors.actionTertiaryTextPress
+    '& > .anticon': {
+      verticalAlign: 'middle'
     }
-  };
-  const iconCss = {
-    fontSize: theme.general.iconFontSize,
-    ...(!isFlex && {
-      // verticalAlign used by AntD to move icon and label to center
-      // TODO(schs): Try to move buttons to flexbox to solve this. Main problem is that flex-inline and inline-block
-      //  behave differently (vertically align of multiple buttons is off). See https://codepen.io/qfactor/pen/JXVzBe
-      verticalAlign: -4,
-      ...(onlyIcon && {
-        verticalAlign: -3
-      }),
-      // verticalAlign used by AntD to move icon and label to center
-      // TODO(schs): Try to move buttons to flexbox to solve this. Main problem is that flex-inline and inline-block
-      //  behave differently (vertically align of multiple buttons is off). See https://codepen.io/qfactor/pen/JXVzBe
-      // Need to make sure not to apply this to regular buttons as it will offset the icons
-      ...(!onlyIcon && {
-        verticalAlign: -3
-      })
-    }),
-    lineHeight: 0,
-    ...(size === 'small' && {
-      lineHeight: theme.typography.lineHeightSm,
-      ...((onlyIcon || forceIconStyles) && {
-        fontSize: 16,
-        ...(isFlex && {
-          height: 16
-        })
-      })
+  }, props.withoutMargins && {
+    '&&': {
+      marginTop: '0 !important',
+      // override general styling
+      marginBottom: '0 !important' // override general styling
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getTitleEmotionStyles;");
+}
+function Title(userProps) {
+  const {
+    dangerouslySetAntdProps,
+    withoutMargins,
+    color,
+    ...props
+  } = userProps;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(AntDTitle, {
+      ...props,
+      className: props.className,
+      css: getTitleEmotionStyles(theme, userProps),
+      ...dangerouslySetAntdProps
     })
+  });
+}
+
+const Typography = /* #__PURE__ */(() => {
+  function Typography(_ref) {
+    let {
+      dangerouslySetAntdProps,
+      ...props
+    } = _ref;
+    return jsx(DesignSystemAntDConfigProvider, {
+      children: jsx(Typography$1, {
+        ...props,
+        ...dangerouslySetAntdProps
+      })
+    });
+  }
+  Typography.Text = Text;
+  Typography.Title = Title;
+  Typography.Paragraph = Paragraph;
+  Typography.Link = Link;
+  Typography.Hint = Hint;
+  return Typography;
+})();
+
+function getDefaultStyles(theme) {
+  let loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  const defaultStyles = {
+    backgroundColor: theme.colors.actionDefaultBackgroundDefault,
+    borderColor: theme.colors.actionDefaultBorderDefault,
+    color: theme.colors.actionDefaultTextDefault
   };
-  const inactiveIconCss = {
-    color: theme.colors.textSecondary
-  };
-  const endIconCssSelector = `span > ${clsEndIcon} > ${clsIcon}`;
-  const styles = {
+  return {
+    ...defaultStyles,
     lineHeight: theme.typography.lineHeightBase,
-    boxShadow: 'none',
-    height: theme.general.heightSm,
-    ...(isFlex && {
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      verticalAlign: 'middle'
-    }),
-    ...(!onlyIcon && !forceIconStyles && {
-      '&&': {
-        padding: '4px 12px',
-        ...(size === 'small' && {
-          padding: '0 8px'
-        })
-      }
-    }),
-    ...((onlyIcon || forceIconStyles) && {
-      width: theme.general.heightSm
-    }),
-    ...(size === 'small' && {
-      height: SMALL_BUTTON_HEIGHT,
-      lineHeight: theme.typography.lineHeightBase,
-      ...((onlyIcon || forceIconStyles) && {
-        width: SMALL_BUTTON_HEIGHT,
-        paddingTop: 0,
-        paddingBottom: 0,
-        verticalAlign: 'middle'
-      })
-    }),
-    '&:focus-visible': {
-      outlineStyle: 'solid',
-      outlineWidth: '2px',
-      outlineOffset: '1px',
-      outlineColor: theme.isDarkMode ? theme.colors.actionDefaultBorderFocus : theme.colors.primary
+    textDecoration: 'none',
+    '&:hover': {
+      backgroundColor: theme.colors.actionDefaultBackgroundHover,
+      borderColor: theme.colors.actionDefaultBorderHover,
+      color: theme.colors.actionDefaultTextHover
     },
-    ...getDefaultStyles(theme, loading),
-    [`&${classPrimary}`]: {
-      ...getPrimaryStyles(theme)
+    '&:active': {
+      backgroundColor: loading ? theme.colors.actionDefaultBackgroundDefault : theme.colors.actionDefaultBackgroundPress,
+      borderColor: theme.colors.actionDefaultBorderPress,
+      color: theme.colors.actionDefaultTextPress
+    }
+  };
+}
+function getPrimaryStyles(theme) {
+  const defaultStyles = {
+    backgroundColor: theme.colors.actionPrimaryBackgroundDefault,
+    borderColor: 'transparent',
+    color: theme.colors.actionPrimaryTextDefault
+  };
+  return {
+    ...defaultStyles,
+    textShadow: 'none',
+    '&:hover': {
+      backgroundColor: theme.colors.actionPrimaryBackgroundHover,
+      borderColor: 'transparent',
+      color: theme.colors.actionPrimaryTextHover
     },
-    [`&${classLink}`]: {
-      ...getLinkStyles$1(theme),
-      ...(type === 'link' && {
-        padding: 'unset',
-        height: 'auto',
-        border: 'none',
-        boxShadow: 'none',
-        '&[disabled],&:hover': {
-          background: 'none'
-        }
-      })
+    '&:active': {
+      backgroundColor: theme.colors.actionPrimaryBackgroundPress,
+      borderColor: 'transparent',
+      color: theme.colors.actionPrimaryTextPress
+    }
+  };
+}
+function getLinkStyles(theme) {
+  const defaultStyles = {
+    backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
+    borderColor: theme.colors.actionTertiaryBackgroundDefault,
+    color: theme.colors.actionTertiaryTextDefault
+  };
+  return {
+    ...defaultStyles,
+    '&:hover': {
+      backgroundColor: theme.colors.actionTertiaryBackgroundHover,
+      borderColor: 'transparent',
+      color: theme.colors.actionTertiaryTextHover
     },
-    [`&${classDangerous}${classPrimary}`]: {
-      ...getPrimaryDangerStyles(theme)
+    '&:active': {
+      backgroundColor: theme.colors.actionTertiaryBackgroundPress,
+      borderColor: 'transparent',
+      color: theme.colors.actionTertiaryTextPress
     },
-    [`&${classDangerous}`]: {
-      ...getSecondaryDangerStyles(theme)
+    '&[disabled]:hover': {
+      background: 'none',
+      color: theme.colors.actionDisabledText
+    }
+  };
+}
+function getPrimaryDangerStyles(theme) {
+  const defaultStyles = {
+    backgroundColor: theme.colors.actionDangerPrimaryBackgroundDefault,
+    borderColor: 'transparent',
+    color: theme.colors.actionPrimaryTextDefault
+  };
+  return {
+    ...defaultStyles,
+    '&:hover': {
+      backgroundColor: theme.colors.actionDangerPrimaryBackgroundHover,
+      borderColor: 'transparent',
+      color: theme.colors.actionPrimaryTextHover
     },
-    [`&[disabled], &${classDangerous}:disabled`]: {
-      ...getDisabledStyles(theme),
-      ...((onlyIcon || forceIconStyles) && {
-        backgroundColor: 'transparent',
-        '&:hover': {
-          backgroundColor: 'transparent'
-        },
-        '&:active': {
-          backgroundColor: 'transparent'
-        }
-      })
+    '&:active': {
+      backgroundColor: theme.colors.actionDangerPrimaryBackgroundPress,
+      borderColor: 'transparent',
+      color: theme.colors.actionPrimaryTextPress
     },
-    [clsLoadingIcon]: {
-      display: 'none'
+    '&:focus-visible': {
+      outlineColor: theme.colors.actionDangerPrimaryBackgroundDefault
+    }
+  };
+}
+function getSecondaryDangerStyles(theme) {
+  const defaultStyles = {
+    backgroundColor: theme.colors.actionDangerDefaultBackgroundDefault,
+    borderColor: theme.colors.actionDangerDefaultBorderDefault,
+    color: theme.colors.actionDangerDefaultTextDefault
+  };
+  return {
+    ...defaultStyles,
+    '&:hover': {
+      backgroundColor: theme.colors.actionDangerDefaultBackgroundHover,
+      borderColor: theme.colors.actionDangerDefaultBorderHover,
+      color: theme.colors.actionDangerDefaultTextHover
     },
-    // Loading styles
-    ...(loading && {
-      '::before': {
-        opacity: 0
-      },
-      cursor: 'default',
-      [`${clsLoadingIcon}`]: {
-        ...(onlyIcon ? {
-          // In case of only icon, the icon is already centered but vertically not aligned, this fixes that
-          verticalAlign: 'middle'
-        } : {
-          // Position loading indicator in center
-          // This would break vertical centering of loading circle when onlyIcon is true
-          position: 'absolute'
-        }),
-        ...(!isFlex && !forceIconStyles && {
-          // Normally we'd do `transform: translateX(-50%)` but `antd` crushes that with injected inline `style`.
-          left: 'calc(50% - 7px)'
-        }),
-        // Re-enable animation for the loading spinner, since it can be disabled by the global animation CSS.
-        svg: {
-          animationDuration: '1s !important'
-        }
-      },
-      [`& > ${clsLoadingIcon} .anticon`]: {
-        paddingRight: 0 // to horizontally center icon
-      },
-
-      [`> :not(${clsLoadingIcon})`]: {
-        // Hide all content except loading icon
-        opacity: 0,
-        visibility: 'hidden',
-        // Add horizontal space for icon
-        ...(withIcon && {
-          paddingLeft: theme.general.iconFontSize + theme.spacing.xs
-        })
-      }
-    }),
-    // Icon styles
-    [`> ${clsIcon} + span, > span + ${clsIcon}`]: {
-      marginRight: 0,
-      marginLeft: theme.spacing.xs
+    '&:active': {
+      backgroundColor: theme.colors.actionDangerDefaultBackgroundPress,
+      borderColor: theme.colors.actionDangerDefaultBorderPress,
+      color: theme.colors.actionDangerDefaultTextPress
     },
-    [`> ${clsIcon}`]: iconCss,
-    [`> ${endIconCssSelector}`]: {
-      ...iconCss,
-      marginLeft: theme.spacing.sm
+    '&:focus-visible': {
+      outlineColor: theme.colors.actionDangerPrimaryBackgroundDefault
+    }
+  };
+}
+function getDisabledStyles(theme) {
+  const defaultStyles = {
+    backgroundColor: theme.colors.actionDisabledBackground,
+    borderColor: 'transparent',
+    color: theme.colors.actionDisabledText
+  };
+  return {
+    ...defaultStyles,
+    '&:hover': {
+      backgroundColor: theme.colors.actionDisabledBackground,
+      borderColor: 'transparent',
+      color: theme.colors.actionDisabledText
     },
-    ...(!type && {
-      [`&:enabled:not(:hover):not(:active) > ${clsIcon}`]: inactiveIconCss
-    }),
-    ...(!type && {
-      [`&:enabled:not(:hover):not(:active) > ${endIconCssSelector}`]: inactiveIconCss
-    }),
-    // Disable animations
-    [`&[${classNamePrefix}-click-animating-without-extra-node='true']::after`]: {
-      display: 'none'
+    '&:active': {
+      backgroundColor: theme.colors.actionDisabledBackground,
+      borderColor: 'transparent',
+      color: theme.colors.actionDisabledText
+    }
+  };
+}
+function getDisabledTertiaryStyles(theme) {
+  const defaultStyles = {
+    backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
+    borderColor: 'transparent',
+    color: theme.colors.actionDisabledText
+  };
+  return {
+    ...defaultStyles,
+    '&:hover': {
+      backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
+      borderColor: 'transparent',
+      color: theme.colors.actionDisabledText
     },
-    [`&${clsIconOnly}`]: {
-      border: 'none',
-      [`&:enabled:not(${classLink})`]: {
-        ...tertiaryColors,
-        color: theme.colors.textSecondary,
-        '&:hover > .anticon': {
-          color: tertiaryColors['&:hover'].color
-        },
-        '&:active > .anticon': {
-          color: tertiaryColors['&:active'].color
-        },
-        ...(loading && {
-          '&&, &:hover, &:active': {
-            backgroundColor: 'transparent'
-          }
-        })
-      },
-      [`&:enabled:not(${classLink}) > .anticon`]: {
-        color: theme.colors.textSecondary
-      },
-      ...(isAnchor && {
-        lineHeight: `${theme.general.heightSm}px`,
-        ...getLinkStyles$1(theme),
-        '&:disabled': {
-          color: theme.colors.actionDisabledText
-        }
-      }),
-      ...(loading && {
-        '&&, &:hover, &:active': {
-          backgroundColor: 'transparent'
+    '&:active': {
+      backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
+      borderColor: 'transparent',
+      color: theme.colors.actionDisabledText
+    }
+  };
+}
+
+let DesignSystemEventProviderComponentTypes = /*#__PURE__*/function (DesignSystemEventProviderComponentTypes) {
+  DesignSystemEventProviderComponentTypes["Banner"] = "banner";
+  DesignSystemEventProviderComponentTypes["Button"] = "button";
+  DesignSystemEventProviderComponentTypes["Input"] = "input";
+  DesignSystemEventProviderComponentTypes["Modal"] = "modal";
+  return DesignSystemEventProviderComponentTypes;
+}({});
+let DesignSystemEventProviderAnalyticsEventTypes = /*#__PURE__*/function (DesignSystemEventProviderAnalyticsEventTypes) {
+  DesignSystemEventProviderAnalyticsEventTypes["OnClick"] = "onClick";
+  DesignSystemEventProviderAnalyticsEventTypes["OnView"] = "onView";
+  DesignSystemEventProviderAnalyticsEventTypes["OnValueChange"] = "onValueChange";
+  return DesignSystemEventProviderAnalyticsEventTypes;
+}({});
+const shouldTriggerCallback = (eventType, analyticsEvents) => {
+  return analyticsEvents.includes(eventType);
+};
+const DefaultEmptyCallbacks = {
+  callback: () => {}
+};
+const DesignSystemEventProviderContext = /*#__PURE__*/React__default.createContext(DefaultEmptyCallbacks);
+
+/**
+ * This gets the event provider, which is used to pass callbacks to the design system for events such as onClick, onView, and onValueChange.
+ * If the value is undefined, then the expected behavior is to not emit any events.
+ *
+ * @returns DesignSystemEventProviderContextType
+ */
+const useDesignSystemEventProviderContext = () => {
+  return useContext(DesignSystemEventProviderContext);
+};
+
+/**
+ * NOTE: This is not suggested for direct usage from engineers, and should emit your own events.
+ * See https://databricks.atlassian.net/wiki/spaces/UN/pages/2533556277/Usage+Logging+in+UI#Send-usage-logging-from-UI for more details.
+ *
+ * This gets the event provider component event type callbacks.
+ * If context & componentId are not undefined, then it will check if the event is in analyticsEvents or the default analyticsEvents for that component.
+ * If the context or componentId are undefined, then the expected behavior is to not emit any events.
+ *
+ * @returns Object of event callbacks
+ */
+const useDesignSystemEventComponentCallbacks = _ref => {
+  let {
+    componentType,
+    componentId,
+    analyticsEvents
+  } = _ref;
+  const context = useDesignSystemEventProviderContext();
+  const callbacks = useMemo(() => {
+    if (context === DefaultEmptyCallbacks || componentId === undefined) {
+      return {
+        onClick: () => {},
+        onValueChange: () => {},
+        onView: () => {}
+      };
+    }
+    return {
+      onClick: () => {
+        if (shouldTriggerCallback(DesignSystemEventProviderAnalyticsEventTypes.OnClick, analyticsEvents)) {
+          context.callback(DesignSystemEventProviderAnalyticsEventTypes.OnClick, componentType, componentId);
         }
-      }),
-      '&[disabled]:hover': {
-        backgroundColor: 'transparent'
-      }
-    },
-    [`&:focus`]: {
-      ...(useFocusPseudoClass && {
-        outlineStyle: 'solid',
-        outlineWidth: '2px',
-        outlineOffset: '1px',
-        outlineColor: theme.isDarkMode ? theme.colors.actionDefaultBorderFocus : theme.colors.primary
-      }),
-      [`${clsLoadingIcon}`]: {
-        ...(onlyIcon && {
-          // Mitigate wrong left offset for loading state with onlyIcon
-          left: 0
-        })
-      }
-    },
-    ...(forceIconStyles && {
-      padding: '0 6px',
-      lineHeight: theme.typography.lineHeightSm,
-      color: theme.colors.textSecondary,
-      ...(loading && {
-        '&&, &:hover, &:active': {
-          backgroundColor: 'transparent',
-          borderColor: theme.colors.actionDefaultBorderDefault
-        },
-        '&[disabled], &[disabled]:hover, &[disabled]:active': {
-          backgroundColor: 'transparent',
-          borderColor: 'transparent'
+      },
+      onValueChange: () => {
+        if (shouldTriggerCallback(DesignSystemEventProviderAnalyticsEventTypes.OnValueChange, analyticsEvents)) {
+          context.callback(DesignSystemEventProviderAnalyticsEventTypes.OnValueChange, componentType, componentId);
         }
-      }),
-      '& > span': {
-        verticalAlign: -1,
-        height: theme.general.heightSm / 2,
-        width: theme.general.heightSm / 2
       },
-      [`& > ${clsLoadingIcon} .anticon`]: {
-        // left: `calc(50% - 6px)!important`,
-        height: theme.general.heightSm / 2,
-        width: theme.general.heightSm / 2,
-        padding: 0
-      }
-    }),
-    ...getAnimationCss(enableAnimation)
-  };
-
-  // Moved outside main style object because state & selector matching in the already existing object keys can create bugs and unwanted overwrites
-  const typeStyles = {
-    ...(type === 'tertiary' && {
-      [`&:enabled:not(${clsIconOnly})`]: tertiaryColors,
-      [`&${classLink}[disabled]`]: {
-        ...getDisabledTertiaryStyles(theme)
+      onView: () => {
+        if (shouldTriggerCallback(DesignSystemEventProviderAnalyticsEventTypes.OnView, analyticsEvents)) {
+          context.callback(DesignSystemEventProviderAnalyticsEventTypes.OnView, componentType, componentId);
+        }
       }
-    })
-  };
-  const importantStyles = importantify(styles);
-  const importantTypeStyles = importantify(typeStyles);
-  return /*#__PURE__*/css(importantStyles, importantTypeStyles, process.env.NODE_ENV === "production" ? "" : ";label:getButtonEmotionStyles;");
+    };
+  }, [context, componentType, componentId, analyticsEvents]);
+  return callbacks;
 };
-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
-  _ref2, ref) {
-    let {
-      dangerouslySetAntdProps,
-      children,
-      size,
-      type,
-      loading,
-      loadingDescription = 'Button',
-      endIcon,
-      onClick,
-      dangerouslySetForceIconStyles,
-      dangerouslyUseFocusPseudoClass,
-      dangerouslyAppendWrapperCss,
-      componentId,
-      analyticsEvents,
-      ...props
-    } = _ref2;
-    const {
-      theme,
-      classNamePrefix
-    } = useDesignSystemTheme();
-    const {
-      USE_FLEX_BUTTON: flexOverride
-    } = useDesignSystemFlags();
-    const eventContext = useDesignSystemEventComponentCallbacks({
-      componentType: DesignSystemEventProviderComponentTypes.Button,
-      componentId,
-      analyticsEvents: analyticsEvents !== null && analyticsEvents !== void 0 ? analyticsEvents : [DesignSystemEventProviderAnalyticsEventTypes.OnClick]
-    });
-    const flexSafex = safex('databricks.fe.designsystem.useFlexButtonStyles', false);
-    const isFlex = flexOverride || flexSafex;
-    const clsEndIcon = getEndIconClsName(theme);
-    const loadingCls = `${classNamePrefix}-btn-loading-icon`;
-    const buttonRef = useRef(null);
-    useImperativeHandle(ref, () => buttonRef.current);
 
-    // Needed to keep backwards compatibility and support existing unit tests
-    useEffect(() => {
-      if (buttonRef.current) {
-        if (loading) {
-          buttonRef.current.setAttribute('loading', 'true');
-          buttonRef.current.classList.add(`${classNamePrefix}-btn-loading`);
-        } else {
-          buttonRef.current.setAttribute('loading', 'false');
-          buttonRef.current.classList.remove(`${classNamePrefix}-btn-loading`);
-        }
-      }
-    }, [loading, classNamePrefix]);
-    const iconOnly = Boolean((props.icon || endIcon) && !children);
-    const handleClick = event => {
-      if (loading) {
-        return;
-      }
-      eventContext.onClick();
-      onClick === null || onClick === void 0 || onClick(event);
+/**
+ * NOTE: This is not suggested for direct usage from engineers, and should use RecordEventContext instead.
+ * See https://databricks.atlassian.net/wiki/spaces/UN/pages/2533556277/Usage+Logging+in+UI#Send-usage-logging-from-UI for more details.
+ *
+ * This is the Design System Event Context Provider, and is only used to pass callbacks to the design system for events such as onClick, onView, and onValueChange.
+ *
+ * @param children Children react elements
+ * @param callback The event callback function
+ * @returns Design System Event Context Provider with the children inside
+ */
+function DesignSystemEventProvider(_ref2) {
+  let {
+    children,
+    callback
+  } = _ref2;
+  const contextValue = useMemo(() => {
+    return {
+      callback
     };
-    const loadingSpinner = jsx(Spinner, {
-      className: loadingCls,
-      animationDuration: 8,
-      inheritColor: true,
-      label: "loading",
-      "aria-label": "loading",
-      loadingDescription: loadingDescription,
-      css: /*#__PURE__*/css({
-        color: 'inherit !important',
-        pointerEvents: 'none',
-        ...(!iconOnly && !dangerouslySetForceIconStyles && {
-          '.anticon': {
-            verticalAlign: '-0.2em'
-          }
-        }),
-        '[aria-hidden="true"]': {
-          display: 'inline'
-        }
-      }, process.env.NODE_ENV === "production" ? "" : ";label:loadingSpinner;")
-    });
-    return jsx(DesignSystemAntDConfigProvider, {
-      children: jsx(Button$1, {
-        ...props,
-        css: getButtonEmotionStyles({
-          theme,
-          classNamePrefix,
-          loading: Boolean(loading),
-          withIcon: Boolean(props.icon),
-          onlyIcon: iconOnly,
-          isAnchor: Boolean(props.href && !type),
-          danger: Boolean(props.danger),
-          enableAnimation: theme.options.enableAnimation,
-          size: size || 'middle',
-          type,
-          isFlex,
-          forceIconStyles: Boolean(dangerouslySetForceIconStyles),
-          useFocusPseudoClass: Boolean(dangerouslyUseFocusPseudoClass)
-        }),
-        href: props.disabled ? undefined : props.href,
-        ...dangerouslySetAntdProps,
-        onClick: handleClick,
-        icon: loading ? loadingSpinner : props.icon,
-        ref: buttonRef,
-        type: type === 'tertiary' ? 'link' : type,
-        children: children && jsxs("span", {
-          style: {
-            visibility: loading ? 'hidden' : 'visible',
-            ...(isFlex && {
-              display: 'inline-flex',
-              alignItems: 'center'
-            }),
-            ...dangerouslyAppendWrapperCss
-          },
-          children: [children, endIcon && jsx("span", {
-            className: clsEndIcon,
-            style: {
-              ...(isFlex && {
-                display: 'inline-flex',
-                alignItems: 'center'
-              })
-            },
-            children: endIcon
-          })]
-        })
-      })
-    });
+  }, [callback]);
+  return jsx(DesignSystemEventProviderContext.Provider, {
+    value: contextValue,
+    children: children
   });
+}
 
-  // This is needed for other Ant components that wrap Button, such as Tooltip, to correctly
-  // identify it as an Ant button.
-  // This should be removed if the component is rewritten to no longer be a wrapper around Ant.
-  // See: https://github.com/ant-design/ant-design/blob/6dd39c1f89b4d6632e6ed022ff1bc275ca1e0f1f/components/button/button.tsx#L291
-  Button.__ANT_BUTTON = true;
-  return Button;
-})();
+// Use Symbol to correctly handled null/undefined as stable values
+const NOT_INITIALIZED = Symbol('NOT_INITIALIZED');
 
-const {
-  Text: AntDText$1
-} = Typography$1;
-function getTextEmotionStyles$1(theme, props) {
-  return /*#__PURE__*/css({
-    '&&': {
-      display: 'block',
-      fontSize: theme.typography.fontSizeSm,
-      lineHeight: theme.typography.lineHeightSm,
-      color: theme.colors.textSecondary,
-      ...(props.withoutMargins && {
-        '&&': {
-          marginTop: 0,
-          marginBottom: 0
-        }
-      })
-    }
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getTextEmotionStyles;");
+/**
+ * Use to keep a stable value on the first mount of a component
+ * that cannot change.
+ */
+function useStable(valueCallback) {
+  const ref = useRef(NOT_INITIALIZED);
+  if (ref.current === NOT_INITIALIZED) {
+    const val = valueCallback();
+    ref.current = val;
+    return val;
+  }
+  return ref.current;
 }
-function Hint(userProps) {
-  const {
-    dangerouslySetAntdProps,
-    bold,
-    withoutMargins,
-    color,
-    ...props
-  } = userProps;
-  const {
-    theme
-  } = useDesignSystemTheme();
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(AntDText$1, {
-      ...props,
-      css: getTextEmotionStyles$1(theme, userProps),
-      ...dangerouslySetAntdProps
-    })
-  });
+let sequentialCounter = 0;
+function useStableUid() {
+  return useStable(() => sequentialCounter++);
 }
 
-const getLinkStyles = (theme, clsPrefix) => {
-  const classTypography = `.${clsPrefix}-typography`;
-  const styles = {
-    [`&${classTypography}, &${classTypography}:focus`]: {
-      color: theme.colors.actionTertiaryTextDefault
-    },
-    [`&${classTypography}:hover, &${classTypography}:hover .anticon`]: {
-      color: theme.colors.actionTertiaryTextHover,
-      textDecoration: 'underline'
-    },
-    [`&${classTypography}:active, &${classTypography}:active .anticon`]: {
-      color: theme.colors.actionTertiaryTextPress,
-      textDecoration: 'underline'
-    },
-    [`&${classTypography}:focus-visible`]: {
-      textDecoration: 'underline'
-    },
-    '.anticon': {
-      fontSize: 12,
-      verticalAlign: 'baseline'
+/** Props for UI components that support a "loading" state. */
+
+/**
+ * A handler for integrating UI components with external latency instrumentation.
+ * If provided via `LoadingStateContext`, hooks will be called whenever child
+ * components in a "loading" state are mounted and unmounted.
+ */
+
+const LoadingStateContext = /*#__PURE__*/createContext(null);
+/**
+ * Indicates that the containing component is in a "loading" state, i.e. that the UI
+ * displayed to the user is semantically equivalent to them seeing a spinner or a
+ * loading indicator. This means that the UI is not in its final settled state yet.
+ *
+ * All components that are in a "loading" state should render a `<LoadingState>`
+ * component, preferrably with an appropriate description.
+ *
+ * By itself, `<LoadingState>` doesn't do anything, but if used within `LoadingStateContext`,
+ * it will call the provided `startLoading()`/`endLoading()` hooks when the component
+ * is mounted/unmounted, which can be used to integrate existing latency instrumentation.
+ */
+const LoadingState = _ref => {
+  let {
+    description = 'Generic UI loading state'
+  } = _ref;
+  const uid = useStableUid();
+  const loadingStateContext = useContext(LoadingStateContext);
+  useLayoutEffect(() => {
+    // mount
+    if (loadingStateContext) {
+      loadingStateContext.startLoading(uid, description);
     }
-  };
-  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getLinkStyles;");
-};
-const getEllipsisNewTabLinkStyles = () => {
-  const styles = {
-    paddingRight: 'calc(2px + 1em)',
-    // 1em for icon
-    position: 'relative'
-  };
-  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getEllipsisNewTabLinkStyles;");
+    return () => {
+      // unmount
+      if (loadingStateContext) {
+        loadingStateContext.endLoading(uid);
+      }
+    };
+  }, [uid, description, loadingStateContext]);
+  return null;
 };
-const getIconStyles = theme => {
-  const styles = {
-    marginLeft: 2,
-    color: theme.colors.actionTertiaryTextDefault
-  };
-  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getIconStyles;");
-};
-const getEllipsisIconStyles = useNewIcons => {
+
+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 = {
-    position: 'absolute',
-    right: 0,
-    bottom: 0,
-    top: 0,
-    display: 'flex',
-    alignItems: 'center',
-    ...(useNewIcons && {
-      fontSize: 12
-    })
+    animation: `${rotate} ${animationDuration}s steps(${frameRate}, end) infinite`,
+    ...(inheritColor ? {
+      color: 'inherit'
+    } : {
+      color: theme.colors.textSecondary
+    }),
+    animationDelay: `${delay}s`,
+    '@media only percy': {
+      animation: 'none'
+    }
   };
-  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getEllipsisIconStyles;");
+  return /*#__PURE__*/css(importantify(styles), process.env.NODE_ENV === "production" ? "" : ";label:cssSpinner;");
 };
-const Link = /*#__PURE__*/forwardRef(function Link(_ref, ref) {
+const Spinner = _ref => {
   let {
-    dangerouslySetAntdProps,
+    frameRate,
+    size = 'default',
+    delay,
+    className: propClass,
+    label,
+    animationDuration,
+    inheritColor,
+    loading = true,
+    loadingDescription = 'Spinner',
     ...props
   } = _ref;
   const {
-    children,
-    openInNewTab,
-    ...restProps
-  } = props;
-  const {
-    theme,
-    classNamePrefix
-  } = useDesignSystemTheme();
-  const newTabProps = {
-    rel: 'noopener noreferrer',
-    target: '_blank'
-  };
-  const linkProps = openInNewTab ? {
-    ...restProps,
-    ...newTabProps
-  } : {
-    ...restProps
-  };
-  const linkStyles = props.ellipsis && openInNewTab ? [getLinkStyles(theme, classNamePrefix), getEllipsisNewTabLinkStyles()] : getLinkStyles(theme, classNamePrefix);
-  const iconStyles = props.ellipsis ? [getIconStyles(theme), getEllipsisIconStyles()] : getIconStyles(theme);
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsxs(Typography$1.Link, {
-      "aria-disabled": linkProps.disabled,
-      css: linkStyles,
-      ref: ref,
-      ...linkProps,
-      ...dangerouslySetAntdProps,
-      children: [children, openInNewTab ? jsx(NewWindowIcon$1, {
-        css: iconStyles,
-        ...newTabProps
-      }) : null]
-    })
-  });
-});
-
-const {
-  Paragraph: AntDParagraph
-} = Typography$1;
-function getParagraphEmotionStyles(theme, props) {
-  return /*#__PURE__*/css({
-    '&&': {
-      fontSize: theme.typography.fontSizeBase,
-      fontWeight: theme.typography.typographyRegularFontWeight,
-      lineHeight: theme.typography.lineHeightBase,
-      color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
-    },
-    '& .anticon': {
-      verticalAlign: 'text-bottom'
-    }
-  }, props.disabled && {
-    '&&': {
-      color: theme.colors.actionDisabledText
-    }
-  }, props.withoutMargins && {
-    '&&': {
-      marginTop: 0,
-      marginBottom: 0
-    }
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getParagraphEmotionStyles;");
-}
-function Paragraph(userProps) {
-  const {
-    dangerouslySetAntdProps,
-    withoutMargins,
-    color,
-    ...props
-  } = userProps;
-  const {
+    classNamePrefix,
     theme
   } = useDesignSystemTheme();
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(AntDParagraph, {
+
+  // We use Antd classes to keep styling unchanged
+  // TODO(FEINF-1407): We want to move away from Antd classes and use Emotion for styling in the future
+  const sizeSuffix = size === 'small' ? '-sm' : size === 'large' ? '-lg' : '';
+  const sizeClass = sizeSuffix ? `${classNamePrefix}-spin${sizeSuffix}` : '';
+  const wrapperClass = `${propClass || ''} ${classNamePrefix}-spin ${sizeClass} ${classNamePrefix}-spin-spinning ${DU_BOIS_ENABLE_ANIMATION_CLASSNAME}`.trim();
+  const className = `${classNamePrefix}-spin-dot ${DU_BOIS_ENABLE_ANIMATION_CLASSNAME}`.trim();
+  return (
+    // className has to follow {...props}, otherwise is `css` prop is passed down it will overwrite our className
+    jsxs("div", {
       ...props,
-      className: props.className,
-      css: getParagraphEmotionStyles(theme, userProps),
-      ...dangerouslySetAntdProps
+      className: wrapperClass,
+      children: [loading && jsx(LoadingState, {
+        description: loadingDescription
+      }), jsx(AccessibleContainer, {
+        label: label,
+        children: jsx(LoadingIcon$1, {
+          "aria-hidden": "false",
+          css: cssSpinner(theme, frameRate, delay, animationDuration, inheritColor),
+          className: className
+        })
+      })]
     })
-  });
+  );
+};
+
+/**
+ * Provides access to http://go/safex flags from the frontend. Note that this is a temporary
+ * workaround until direct `safex` imports are available.
+ * @param flag The name of the flag to check
+ * @param defaultValue The default value to return if the flag is not set
+ * @returns
+ */
+const safex = (flag, defaultValue) => {
+  // Catching errors here, because we don't have type-safety to ensure
+  // that `__debug__safex`'s API hasn't changed.
+  try {
+    const globalSafex = window.__debug__safex;
+    return globalSafex ? globalSafex(flag, defaultValue) : defaultValue;
+  } catch (e) {
+    return defaultValue;
+  }
+};
+
+function addDebugOutlineIfEnabled() {
+  return safex('databricks.fe.designsystem.showDebugOutline', false) ? {
+    'data-dubois-show-outline': true
+  } : {};
 }
 
-const {
-  Text: AntDText
-} = Typography$1;
-function getTextEmotionStyles(theme, props) {
-  return /*#__PURE__*/css({
-    '&&': {
-      fontSize: theme.typography.fontSizeBase,
-      fontWeight: theme.typography.typographyRegularFontWeight,
-      lineHeight: theme.typography.lineHeightBase,
-      color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
-    }
-  }, props.disabled && {
-    '&&': {
-      color: theme.colors.actionDisabledText
-    }
-  }, props.hint && {
-    '&&': {
-      fontSize: theme.typography.fontSizeSm,
-      lineHeight: theme.typography.lineHeightSm
-    }
-  }, props.bold && {
-    '&&': {
-      fontSize: theme.typography.fontSizeBase,
-      fontWeight: theme.typography.typographyBoldFontWeight,
-      lineHeight: theme.typography.lineHeightBase
-    }
-  }, props.code && {
-    '&& > code': {
-      color: theme.colors.textPrimary,
-      fontSize: theme.typography.fontSizeBase,
-      lineHeight: theme.typography.lineHeightBase,
-      background: theme.colors.typographyCodeBg,
-      fontFamily: 'monospace',
-      borderRadius: theme.borders.borderRadiusMd,
-      padding: '2px 4px',
-      border: 'unset',
-      margin: 0
-    }
-  }, props.size && {
-    '&&': (() => {
-      switch (props.size) {
-        case 'xxl':
-          return {
-            fontSize: theme.typography.fontSizeXxl,
-            lineHeight: theme.typography.lineHeightXxl,
-            '& .anticon': {
-              lineHeight: theme.typography.lineHeightXxl,
-              verticalAlign: 'middle'
-            }
-          };
-        case 'xl':
-          return {
-            fontSize: theme.typography.fontSizeXl,
-            lineHeight: theme.typography.lineHeightXl,
-            '& .anticon': {
-              lineHeight: theme.typography.lineHeightXl,
-              verticalAlign: 'middle'
-            }
-          };
-        case 'lg':
-          return {
-            fontSize: theme.typography.fontSizeLg,
-            lineHeight: theme.typography.lineHeightLg,
-            '& .anticon': {
-              lineHeight: theme.typography.lineHeightLg,
-              verticalAlign: 'middle'
-            }
-          };
-        case 'sm':
-          return {
-            fontSize: theme.typography.fontSizeSm,
-            lineHeight: theme.typography.lineHeightSm,
-            '& .anticon': {
-              verticalAlign: '-0.219em'
-            }
-          };
-        default:
-          return {};
-      }
-    })()
-  }, props.withoutMargins && {
-    '&&': {
-      marginTop: 0,
-      marginBottom: 0
-    }
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getTextEmotionStyles;");
+function getEndIconClsName(theme) {
+  return `${theme.general.iconfontCssPrefix}-btn-end-icon`;
 }
-function Text(userProps) {
-  // Omit props that are not supported by `antd`
-  const {
-    dangerouslySetAntdProps,
-    bold,
-    hint,
-    withoutMargins,
-    color,
-    ...props
-  } = userProps;
-  const {
-    theme
-  } = useDesignSystemTheme();
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(AntDText, {
-      ...props,
-      className: props.className,
-      css: getTextEmotionStyles(theme, userProps),
-      ...dangerouslySetAntdProps
+const getButtonEmotionStyles = _ref => {
+  let {
+    theme,
+    classNamePrefix,
+    loading,
+    withIcon,
+    onlyIcon,
+    isAnchor,
+    enableAnimation,
+    size,
+    type,
+    isFlex,
+    useFocusPseudoClass,
+    forceIconStyles,
+    danger
+  } = _ref;
+  const clsIcon = `.${theme.general.iconfontCssPrefix}`;
+  const clsEndIcon = `.${getEndIconClsName(theme)}`;
+  const clsLoadingIcon = `.${classNamePrefix}-btn-loading-icon`;
+  const clsIconOnly = `.${classNamePrefix}-btn-icon-only`;
+  const classPrimary = `.${classNamePrefix}-btn-primary`;
+  const classLink = `.${classNamePrefix}-btn-link`;
+  const classDangerous = `.${classNamePrefix}-btn-dangerous`;
+  const SMALL_BUTTON_HEIGHT = 24;
+  const tertiaryColors = {
+    background: theme.colors.actionTertiaryBackgroundDefault,
+    color: theme.colors.actionTertiaryTextDefault,
+    '&:hover': {
+      background: theme.colors.actionTertiaryBackgroundHover,
+      color: theme.colors.actionTertiaryTextHover
+    },
+    '&:active': {
+      background: theme.colors.actionTertiaryBackgroundPress,
+      color: theme.colors.actionTertiaryTextPress
+    }
+  };
+  const iconCss = {
+    fontSize: theme.general.iconFontSize,
+    ...(!isFlex && {
+      // verticalAlign used by AntD to move icon and label to center
+      // TODO(schs): Try to move buttons to flexbox to solve this. Main problem is that flex-inline and inline-block
+      //  behave differently (vertically align of multiple buttons is off). See https://codepen.io/qfactor/pen/JXVzBe
+      verticalAlign: -4,
+      ...(onlyIcon && {
+        verticalAlign: -3
+      }),
+      // verticalAlign used by AntD to move icon and label to center
+      // TODO(schs): Try to move buttons to flexbox to solve this. Main problem is that flex-inline and inline-block
+      //  behave differently (vertically align of multiple buttons is off). See https://codepen.io/qfactor/pen/JXVzBe
+      // Need to make sure not to apply this to regular buttons as it will offset the icons
+      ...(!onlyIcon && {
+        verticalAlign: -3
+      })
+    }),
+    lineHeight: 0,
+    ...(size === 'small' && {
+      lineHeight: theme.typography.lineHeightSm,
+      ...((onlyIcon || forceIconStyles) && {
+        fontSize: 16,
+        ...(isFlex && {
+          height: 16
+        })
+      })
     })
-  });
-}
-
-const {
-  Title: AntDTitle
-} = Typography$1;
-function getLevelStyles(theme, props) {
-  switch (props.level) {
-    case 1:
-      return /*#__PURE__*/css({
-        '&&': {
-          fontSize: theme.typography.fontSizeXxl,
-          lineHeight: theme.typography.lineHeightXxl,
-          fontWeight: theme.typography.typographyBoldFontWeight
-        },
-        '& > .anticon': {
-          lineHeight: theme.typography.lineHeightXxl
+  };
+  const inactiveIconCss = {
+    color: theme.colors.textSecondary
+  };
+  const endIconCssSelector = `span > ${clsEndIcon} > ${clsIcon}`;
+  const styles = {
+    lineHeight: theme.typography.lineHeightBase,
+    boxShadow: 'none',
+    height: theme.general.heightSm,
+    ...(isFlex && {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      verticalAlign: 'middle'
+    }),
+    ...(!onlyIcon && !forceIconStyles && {
+      '&&': {
+        padding: '4px 12px',
+        ...(size === 'small' && {
+          padding: '0 8px'
+        })
+      }
+    }),
+    ...((onlyIcon || forceIconStyles) && {
+      width: theme.general.heightSm
+    }),
+    ...(size === 'small' && {
+      height: SMALL_BUTTON_HEIGHT,
+      lineHeight: theme.typography.lineHeightBase,
+      ...((onlyIcon || forceIconStyles) && {
+        width: SMALL_BUTTON_HEIGHT,
+        paddingTop: 0,
+        paddingBottom: 0,
+        verticalAlign: 'middle'
+      })
+    }),
+    '&:focus-visible': {
+      outlineStyle: 'solid',
+      outlineWidth: '2px',
+      outlineOffset: '1px',
+      outlineColor: theme.isDarkMode ? theme.colors.actionDefaultBorderFocus : theme.colors.primary
+    },
+    ...getDefaultStyles(theme, loading),
+    [`&${classPrimary}`]: {
+      ...getPrimaryStyles(theme)
+    },
+    [`&${classLink}`]: {
+      ...getLinkStyles(theme),
+      ...(type === 'link' && {
+        padding: 'unset',
+        height: 'auto',
+        border: 'none',
+        boxShadow: 'none',
+        '&[disabled],&:hover': {
+          background: 'none'
         }
-      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
-    case 2:
-      return /*#__PURE__*/css({
-        '&&': {
-          fontSize: theme.typography.fontSizeXl,
-          lineHeight: theme.typography.lineHeightXl,
-          fontWeight: theme.typography.typographyBoldFontWeight
+      })
+    },
+    [`&${classDangerous}${classPrimary}`]: {
+      ...getPrimaryDangerStyles(theme)
+    },
+    [`&${classDangerous}`]: {
+      ...getSecondaryDangerStyles(theme)
+    },
+    [`&[disabled], &${classDangerous}:disabled`]: {
+      ...getDisabledStyles(theme),
+      ...((onlyIcon || forceIconStyles) && {
+        backgroundColor: 'transparent',
+        '&:hover': {
+          backgroundColor: 'transparent'
         },
-        '& > .anticon': {
-          lineHeight: theme.typography.lineHeightXl
+        '&:active': {
+          backgroundColor: 'transparent'
         }
-      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
-    case 3:
-      return /*#__PURE__*/css({
-        '&&': {
-          fontSize: theme.typography.fontSizeLg,
-          lineHeight: theme.typography.lineHeightLg,
-          fontWeight: theme.typography.typographyBoldFontWeight
+      })
+    },
+    [clsLoadingIcon]: {
+      display: 'none'
+    },
+    // Loading styles
+    ...(loading && {
+      '::before': {
+        opacity: 0
+      },
+      cursor: 'default',
+      [`${clsLoadingIcon}`]: {
+        ...(onlyIcon ? {
+          // In case of only icon, the icon is already centered but vertically not aligned, this fixes that
+          verticalAlign: 'middle'
+        } : {
+          // Position loading indicator in center
+          // This would break vertical centering of loading circle when onlyIcon is true
+          position: 'absolute'
+        }),
+        ...(!isFlex && !forceIconStyles && {
+          // Normally we'd do `transform: translateX(-50%)` but `antd` crushes that with injected inline `style`.
+          left: 'calc(50% - 7px)'
+        }),
+        // Re-enable animation for the loading spinner, since it can be disabled by the global animation CSS.
+        svg: {
+          animationDuration: '1s !important'
+        }
+      },
+      [`& > ${clsLoadingIcon} .anticon`]: {
+        paddingRight: 0 // to horizontally center icon
+      },
+
+      [`> :not(${clsLoadingIcon})`]: {
+        // Hide all content except loading icon
+        opacity: 0,
+        visibility: 'hidden',
+        // Add horizontal space for icon
+        ...(withIcon && {
+          paddingLeft: theme.general.iconFontSize + theme.spacing.xs
+        })
+      }
+    }),
+    // Icon styles
+    [`> ${clsIcon} + span, > span + ${clsIcon}`]: {
+      marginRight: 0,
+      marginLeft: theme.spacing.xs
+    },
+    [`> ${clsIcon}`]: iconCss,
+    [`> ${endIconCssSelector}`]: {
+      ...iconCss,
+      marginLeft: theme.spacing.sm
+    },
+    ...(!type && !danger && {
+      [`&:enabled:not(:hover):not(:active) > ${clsIcon}`]: inactiveIconCss
+    }),
+    ...(!type && !danger && {
+      [`&:enabled:not(:hover):not(:active) > ${endIconCssSelector}`]: inactiveIconCss
+    }),
+    // Disable animations
+    [`&[${classNamePrefix}-click-animating-without-extra-node='true']::after`]: {
+      display: 'none'
+    },
+    [`&${clsIconOnly}`]: {
+      border: 'none',
+      [`&:enabled:not(${classLink})`]: {
+        ...tertiaryColors,
+        color: theme.colors.textSecondary,
+        '&:hover > .anticon': {
+          color: tertiaryColors['&:hover'].color,
+          ...(danger && {
+            color: theme.colors.actionDangerDefaultTextHover
+          })
         },
-        '& > .anticon': {
-          lineHeight: theme.typography.lineHeightLg
+        '&:active > .anticon': {
+          color: tertiaryColors['&:active'].color,
+          ...(danger && {
+            color: theme.colors.actionDangerDefaultTextPress
+          })
+        },
+        ...(loading && {
+          '&&, &:hover, &:active': {
+            backgroundColor: 'transparent'
+          }
+        })
+      },
+      [`&:enabled:not(${classLink}) > .anticon`]: {
+        color: theme.colors.textSecondary,
+        ...(danger && {
+          color: theme.colors.actionDangerDefaultTextDefault
+        })
+      },
+      ...(isAnchor && {
+        lineHeight: `${theme.general.heightSm}px`,
+        ...getLinkStyles(theme),
+        '&:disabled': {
+          color: theme.colors.actionDisabledText
         }
-      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
-    case 4:
-    default:
-      return /*#__PURE__*/css({
-        '&&': {
-          fontSize: theme.typography.fontSizeMd,
-          lineHeight: theme.typography.lineHeightMd,
-          fontWeight: theme.typography.typographyBoldFontWeight
+      }),
+      ...(loading && {
+        '&&, &:hover, &:active': {
+          backgroundColor: 'transparent'
+        }
+      }),
+      '&[disabled]:hover': {
+        backgroundColor: 'transparent'
+      }
+    },
+    [`&:focus`]: {
+      ...(useFocusPseudoClass && {
+        outlineStyle: 'solid',
+        outlineWidth: '2px',
+        outlineOffset: '1px',
+        outlineColor: theme.isDarkMode ? theme.colors.actionDefaultBorderFocus : theme.colors.primary
+      }),
+      [`${clsLoadingIcon}`]: {
+        ...(onlyIcon && {
+          // Mitigate wrong left offset for loading state with onlyIcon
+          left: 0
+        })
+      }
+    },
+    ...(forceIconStyles && {
+      padding: '0 6px',
+      lineHeight: theme.typography.lineHeightSm,
+      color: theme.colors.textSecondary,
+      ...(loading && {
+        '&&, &:hover, &:active': {
+          backgroundColor: 'transparent',
+          borderColor: theme.colors.actionDefaultBorderDefault
         },
-        '& > .anticon': {
-          lineHeight: theme.typography.lineHeightMd
+        '&[disabled], &[disabled]:hover, &[disabled]:active': {
+          backgroundColor: 'transparent',
+          borderColor: 'transparent'
         }
-      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
-  }
-}
-function getTitleEmotionStyles(theme, props) {
-  return /*#__PURE__*/css(getLevelStyles(theme, props), {
-    '&&': {
-      color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
-    },
-    '& > .anticon': {
-      verticalAlign: 'middle'
-    }
-  }, props.withoutMargins && {
-    '&&': {
-      marginTop: '0 !important',
-      // override general styling
-      marginBottom: '0 !important' // override general styling
-    }
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getTitleEmotionStyles;");
-}
-function Title(userProps) {
-  const {
-    dangerouslySetAntdProps,
-    withoutMargins,
-    color,
-    ...props
-  } = userProps;
-  const {
-    theme
-  } = useDesignSystemTheme();
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(AntDTitle, {
-      ...props,
-      className: props.className,
-      css: getTitleEmotionStyles(theme, userProps),
-      ...dangerouslySetAntdProps
-    })
-  });
-}
+      }),
+      '& > span': {
+        verticalAlign: -1,
+        height: theme.general.heightSm / 2,
+        width: theme.general.heightSm / 2
+      },
+      [`& > ${clsLoadingIcon} .anticon`]: {
+        // left: `calc(50% - 6px)!important`,
+        height: theme.general.heightSm / 2,
+        width: theme.general.heightSm / 2,
+        padding: 0
+      }
+    }),
+    ...getAnimationCss(enableAnimation)
+  };
 
-const Typography = /* #__PURE__ */(() => {
-  function Typography(_ref) {
+  // Moved outside main style object because state & selector matching in the already existing object keys can create bugs and unwanted overwrites
+  const typeStyles = {
+    ...(type === 'tertiary' && {
+      [`&:enabled:not(${clsIconOnly})`]: tertiaryColors,
+      [`&${classLink}[disabled]`]: {
+        ...getDisabledTertiaryStyles(theme)
+      }
+    })
+  };
+  const importantStyles = importantify(styles);
+  const importantTypeStyles = importantify(typeStyles);
+  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
+  _ref2, ref) {
     let {
       dangerouslySetAntdProps,
+      children,
+      size,
+      type,
+      loading,
+      loadingDescription = 'Button',
+      endIcon,
+      onClick,
+      dangerouslySetForceIconStyles,
+      dangerouslyUseFocusPseudoClass,
+      dangerouslyAppendWrapperCss,
+      componentId,
+      analyticsEvents,
       ...props
-    } = _ref;
+    } = _ref2;
+    const {
+      theme,
+      classNamePrefix
+    } = useDesignSystemTheme();
+    const {
+      USE_FLEX_BUTTON: flexOverride
+    } = useDesignSystemFlags();
+    const eventContext = useDesignSystemEventComponentCallbacks({
+      componentType: DesignSystemEventProviderComponentTypes.Button,
+      componentId,
+      analyticsEvents: analyticsEvents !== null && analyticsEvents !== void 0 ? analyticsEvents : [DesignSystemEventProviderAnalyticsEventTypes.OnClick]
+    });
+    const flexSafex = safex('databricks.fe.designsystem.useFlexButtonStyles', false);
+    const isFlex = flexOverride || flexSafex;
+    const clsEndIcon = getEndIconClsName(theme);
+    const loadingCls = `${classNamePrefix}-btn-loading-icon`;
+    const buttonRef = useRef(null);
+    useImperativeHandle(ref, () => buttonRef.current);
+
+    // Needed to keep backwards compatibility and support existing unit tests
+    useEffect(() => {
+      if (buttonRef.current) {
+        if (loading) {
+          buttonRef.current.setAttribute('loading', 'true');
+          buttonRef.current.classList.add(`${classNamePrefix}-btn-loading`);
+        } else {
+          buttonRef.current.setAttribute('loading', 'false');
+          buttonRef.current.classList.remove(`${classNamePrefix}-btn-loading`);
+        }
+      }
+    }, [loading, classNamePrefix]);
+    const iconOnly = Boolean((props.icon || endIcon) && !children);
+    const handleClick = event => {
+      if (loading) {
+        return;
+      }
+      eventContext.onClick();
+      onClick === null || onClick === void 0 || onClick(event);
+    };
+    const loadingSpinner = jsx(Spinner, {
+      className: loadingCls,
+      animationDuration: 8,
+      inheritColor: true,
+      label: "loading",
+      "aria-label": "loading",
+      loadingDescription: loadingDescription,
+      css: /*#__PURE__*/css({
+        color: 'inherit !important',
+        pointerEvents: 'none',
+        ...(!iconOnly && !dangerouslySetForceIconStyles && {
+          '.anticon': {
+            verticalAlign: '-0.2em'
+          }
+        }),
+        '[aria-hidden="true"]': {
+          display: 'inline'
+        }
+      }, process.env.NODE_ENV === "production" ? "" : ";label:loadingSpinner;")
+    });
     return jsx(DesignSystemAntDConfigProvider, {
-      children: jsx(Typography$1, {
+      children: jsx(Button$1, {
+        ...addDebugOutlineIfEnabled(),
         ...props,
-        ...dangerouslySetAntdProps
+        css: getButtonEmotionStyles({
+          theme,
+          classNamePrefix,
+          loading: Boolean(loading),
+          withIcon: Boolean(props.icon),
+          onlyIcon: iconOnly,
+          isAnchor: Boolean(props.href && !type),
+          danger: Boolean(props.danger),
+          enableAnimation: theme.options.enableAnimation,
+          size: size || 'middle',
+          type,
+          isFlex,
+          forceIconStyles: Boolean(dangerouslySetForceIconStyles),
+          useFocusPseudoClass: Boolean(dangerouslyUseFocusPseudoClass)
+        }),
+        href: props.disabled ? undefined : props.href,
+        ...dangerouslySetAntdProps,
+        onClick: handleClick,
+        icon: loading ? loadingSpinner : props.icon,
+        ref: buttonRef,
+        type: type === 'tertiary' ? 'link' : type,
+        children: children && jsxs("span", {
+          style: {
+            visibility: loading ? 'hidden' : 'visible',
+            ...(isFlex && {
+              display: 'inline-flex',
+              alignItems: 'center'
+            }),
+            ...dangerouslyAppendWrapperCss
+          },
+          children: [children, endIcon && jsx("span", {
+            className: clsEndIcon,
+            style: {
+              ...(isFlex && {
+                display: 'inline-flex',
+                alignItems: 'center'
+              })
+            },
+            children: endIcon
+          })]
+        })
       })
     });
-  }
-  Typography.Text = Text;
-  Typography.Title = Title;
-  Typography.Paragraph = Paragraph;
-  Typography.Link = Link;
-  Typography.Hint = Hint;
-  return Typography;
-})();
-
-const Tooltip = _ref => {
-  let {
-    children,
-    title,
-    placement = 'top',
-    dataTestId,
-    dangerouslySetAntdProps,
-    silenceScreenReader = false,
-    useAsLabel = false,
-    ...props
-  } = _ref;
-  const {
-    theme
-  } = useDesignSystemTheme();
-  const id = useUniqueId('dubois-tooltip-component-');
-  if (!title) {
-    return jsx(React__default.Fragment, {
-      children: children
-    });
-  }
-  const titleProps = silenceScreenReader ? {} : {
-    'aria-live': 'polite',
-    'aria-relevant': 'additions'
-  };
-  if (dataTestId) {
-    // TODO FEINF-1337 - this should turn into data-testid
-    titleProps['data-test-id'] = dataTestId;
-  }
-  const liveTitle = title && /*#__PURE__*/React__default.isValidElement(title) ? /*#__PURE__*/React__default.cloneElement(title, titleProps) : jsx("span", {
-    ...titleProps,
-    children: title
-  });
-  const ariaProps = {
-    [useAsLabel ? 'aria-labelledby' : 'aria-describedby']: id,
-    'aria-hidden': false
-  };
-  const childWithProps = /*#__PURE__*/React__default.isValidElement(children) ? /*#__PURE__*/React__default.cloneElement(children, {
-    ...ariaProps,
-    ...children.props
-  }) : _isNil(children) ? children : jsx("span", {
-    ...ariaProps,
-    children: children
-  });
-  const {
-    overlayInnerStyle,
-    overlayStyle,
-    ...delegatedDangerouslySetAntdProps
-  } = dangerouslySetAntdProps || {};
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(Tooltip$1, {
-      id: id,
-      title: liveTitle,
-      placement: placement
-      // Always trigger on hover and focus
-      ,
-      trigger: ['hover', 'focus'],
-      overlayInnerStyle: {
-        backgroundColor: '#2F3941',
-        lineHeight: '22px',
-        padding: '4px 8px',
-        boxShadow: theme.general.shadowLow,
-        ...overlayInnerStyle,
-        ...getDarkModePortalStyles(theme)
-      },
-      overlayStyle: {
-        zIndex: theme.options.zIndexBase + 70,
-        ...overlayStyle
-      },
-      css: /*#__PURE__*/css({
-        ...getAnimationCss(theme.options.enableAnimation)
-      }, process.env.NODE_ENV === "production" ? "" : ";label:Tooltip;"),
-      ...delegatedDangerouslySetAntdProps,
-      ...props,
-      children: childWithProps
-    })
   });
-};
+
+  // This is needed for other Ant components that wrap Button, such as Tooltip, to correctly
+  // identify it as an Ant button.
+  // This should be removed if the component is rewritten to no longer be a wrapper around Ant.
+  // See: https://github.com/ant-design/ant-design/blob/6dd39c1f89b4d6632e6ed022ff1bc275ca1e0f1f/components/button/button.tsx#L291
+  Button.__ANT_BUTTON = true;
+  return Button;
+})();
 
 const getInputGroupStyling = (clsPrefix, theme) => {
   const inputClass = `.${clsPrefix}-input`;
@@ -2944,6 +2920,9 @@ const getInputGroupStyling = (clsPrefix, theme) => {
         '&:hover': {
           borderRight: `1px solid ${theme.colors.actionDisabledText} !important`
         }
+      },
+      '&[data-validation]': {
+        marginRight: 0
       }
     },
     [`& > ${buttonClass} > span`]: {
@@ -2954,7 +2933,7 @@ const getInputGroupStyling = (clsPrefix, theme) => {
     }
   }, process.env.NODE_ENV === "production" ? "" : ";label:getInputGroupStyling;");
 };
-const Group$1 = _ref => {
+const Group = _ref => {
   let {
     dangerouslySetAntdProps,
     dangerouslyAppendEmotionCSS,
@@ -2975,10 +2954,45 @@ const Group$1 = _ref => {
   });
 };
 
-const getInputEmotionStyles = (clsPrefix, theme, _ref, useTransparent) => {
+/**
+ * A React custom hook that allows a callback function to be executed exactly once until it is explicitly reset.
+ *
+ * Usage:
+ *
+ * const originalCallback = () => { console.log('originalCallback'); }
+ * const { callbackOnceUntilReset, reset } = useCallbackOnceUntilReset(originalCallback);
+ *
+ * // To execute the callback
+ * callbackOnceUntilReset(); // Prints 'originalCallback'
+ * callbackOnceUntilReset(); // No effect for further calls
+ * reset();
+ * callbackOnceUntilReset(); // Prints 'originalCallback' again
+ */
+const useCallbackOnceUntilReset = callback => {
+  const canTriggerRef = useRef(true);
+  const reset = useCallback(() => {
+    canTriggerRef.current = true;
+  }, []);
+  const callbackOnceUntilReset = useCallback(() => {
+    if (canTriggerRef.current) {
+      callback();
+      canTriggerRef.current = false;
+    }
+  }, [callback]);
+  return {
+    callbackOnceUntilReset,
+    reset
+  };
+};
+
+const getInputStyles = (clsPrefix, theme, _ref, _ref2) => {
   let {
     validationState
   } = _ref;
+  let {
+    useTransparent = false,
+    useFocusWithin = false
+  } = _ref2;
   const inputClass = `.${clsPrefix}-input`;
   const affixClass = `.${clsPrefix}-input-affix-wrapper`;
   const affixClassFocused = `.${clsPrefix}-input-affix-wrapper-focused`;
@@ -2986,6 +3000,7 @@ const getInputEmotionStyles = (clsPrefix, theme, _ref, useTransparent) => {
   const prefixIcon = `.${clsPrefix}-input-prefix`;
   const suffixIcon = `.${clsPrefix}-input-suffix`;
   const validationColor = getValidationStateColor(theme, validationState);
+  const focusSpecifier = useFocusWithin ? 'focus-within' : 'focus';
   const styles = {
     '&&': {
       lineHeight: theme.typography.lineHeightBase,
@@ -2996,7 +3011,7 @@ const getInputEmotionStyles = (clsPrefix, theme, _ref, useTransparent) => {
       '&:hover': {
         borderColor: validationState ? validationColor : theme.colors.actionPrimaryBackgroundHover
       },
-      '&:focus': {
+      [`&:${focusSpecifier}`]: {
         outlineColor: validationState ? validationColor : theme.colors.actionPrimaryBackgroundDefault,
         outlineWidth: 2,
         outlineOffset: -2,
@@ -3037,7 +3052,7 @@ const getInputEmotionStyles = (clsPrefix, theme, _ref, useTransparent) => {
     },
     [`&${affixClassFocused}`]: {
       boxShadow: 'none',
-      '&&, &:focus': {
+      [`&&, &:${focusSpecifier}`]: {
         outlineColor: theme.colors.actionPrimaryBackgroundDefault,
         outlineWidth: 2,
         outlineOffset: -2,
@@ -3059,9 +3074,20 @@ const getInputEmotionStyles = (clsPrefix, theme, _ref, useTransparent) => {
     },
     ...getAnimationCss(theme.options.enableAnimation)
   };
+  return styles;
+};
+const getInputEmotionStyles = (clsPrefix, theme, _ref3, useTransparent) => {
+  let {
+    validationState
+  } = _ref3;
+  const styles = getInputStyles(clsPrefix, theme, {
+    validationState
+  }, {
+    useTransparent
+  });
   return /*#__PURE__*/css(importantify(styles), process.env.NODE_ENV === "production" ? "" : ";label:getInputEmotionStyles;");
 };
-const Input$1 = /*#__PURE__*/forwardRef(function Input(_ref2, ref) {
+const Input$1 = /*#__PURE__*/forwardRef(function Input(_ref4, ref) {
   let {
     validationState,
     autoComplete = 'off',
@@ -3069,14 +3095,29 @@ const Input$1 = /*#__PURE__*/forwardRef(function Input(_ref2, ref) {
     dangerouslyAppendEmotionCSS,
     onChange,
     onClear,
+    onFocus,
+    componentId,
+    analyticsEvents,
     ...props
-  } = _ref2;
+  } = _ref4;
   const {
     classNamePrefix,
     theme
   } = useDesignSystemTheme();
   const useTransparent = safex('databricks.fe.designsystem.useTransparentInput', false);
+  const eventContext = useDesignSystemEventComponentCallbacks({
+    componentType: DesignSystemEventProviderComponentTypes.Input,
+    componentId,
+    analyticsEvents: analyticsEvents !== null && analyticsEvents !== void 0 ? analyticsEvents : [DesignSystemEventProviderAnalyticsEventTypes.OnValueChange]
+  });
+
+  // Prevents multiple onValueChange triggers until after a focus event resets it.
+  const {
+    callbackOnceUntilReset: sendAnalyticsEventOncePerFocus,
+    reset: resetSendAnalyticsEventOnFocus
+  } = useCallbackOnceUntilReset(eventContext.onValueChange);
   const handleChange = e => {
+    sendAnalyticsEventOncePerFocus();
     // If the input is cleared, call the onClear handler, but only
     // if the event is not an input event -- which is the case when you click the
     // ant-provided (X) button.
@@ -3086,14 +3127,20 @@ const Input$1 = /*#__PURE__*/forwardRef(function Input(_ref2, ref) {
       onChange === null || onChange === void 0 || onChange(e);
     }
   };
+  const handleFocus = e => {
+    resetSendAnalyticsEventOnFocus();
+    onFocus === null || onFocus === void 0 || onFocus(e);
+  };
   return jsx(DesignSystemAntDConfigProvider, {
     children: jsx(Input$2, {
       autoComplete: autoComplete,
+      "data-validation": validationState,
       ref: ref,
       css: [getInputEmotionStyles(classNamePrefix, theme, {
         validationState
       }, useTransparent), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Input;"],
       onChange: handleChange,
+      onFocus: handleFocus,
       ...props,
       ...dangerouslySetAntdProps
     })
@@ -3157,483 +3204,331 @@ const TextArea = /*#__PURE__*/forwardRef(function TextArea(_ref, ref) {
 const InputNamespace = /* #__PURE__ */Object.assign(Input$1, {
   TextArea,
   Password,
-  Group: Group$1
+  Group
 });
 const Input = InputNamespace;
 
-const Root = DropdownMenu$1.Root; // Behavioral component only
-
-const Content = /*#__PURE__*/forwardRef(function Content(_ref, ref) {
+function Stepper(_ref) {
   let {
-    children,
-    minWidth = 220,
-    isInsideModal,
-    onEscapeKeyDown,
-    onKeyDown,
-    ...props
+    direction: requestedDirection,
+    currentStepIndex: currentStep,
+    steps,
+    localizeStepNumber,
+    responsive = true
   } = _ref;
   const {
-    getPopupContainer
-  } = useDesignSystemContext();
-  return jsx(DropdownMenu$1.Portal, {
-    container: getPopupContainer && getPopupContainer(),
-    children: jsx(DropdownMenu$1.Content, {
-      ref: ref,
-      loop: true,
-      css: [contentStyles, {
-        minWidth
-      }, process.env.NODE_ENV === "production" ? "" : ";label:Content;"],
-      sideOffset: 4,
-      align: "start",
-      onKeyDown: e => {
-        // This is a workaround for Radix's DropdownMenu.Content not receiving Escape key events
-        // when nested inside a modal. We need to stop propagation of the event so that the modal
-        // doesn't close when the DropdownMenu should.
-        if (e.key === 'Escape') {
-          if (isInsideModal) {
-            e.stopPropagation();
-          }
-          onEscapeKeyDown === null || onEscapeKeyDown === void 0 || onEscapeKeyDown(e.nativeEvent);
-        }
-        onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
-      },
-      ...props,
-      children: children
-    })
-  });
-});
-const SubContent = /*#__PURE__*/forwardRef(function Content(_ref2, ref) {
-  let {
-    children,
-    minWidth = 220,
-    ...props
-  } = _ref2;
+    theme
+  } = useDesignSystemTheme();
+  const ref = useRef(null);
   const {
-    getPopupContainer
-  } = useDesignSystemContext();
-  return jsx(DropdownMenu$1.Portal, {
-    container: getPopupContainer && getPopupContainer(),
-    children: jsx(DropdownMenu$1.SubContent, {
-      ref: ref,
-      loop: true,
-      css: [contentStyles, {
-        minWidth
-      }, process.env.NODE_ENV === "production" ? "" : ";label:SubContent;"],
-      sideOffset: -2,
-      alignOffset: -5,
-      ...props,
-      children: children
-    })
-  });
-});
-const Trigger = /*#__PURE__*/forwardRef(function Trigger(_ref3, ref) {
-  let {
-    children,
-    ...props
-  } = _ref3;
-  return jsx(DropdownMenu$1.Trigger, {
-    ref: ref,
-    ...props,
-    children: children
-  });
-});
-const Item = /*#__PURE__*/forwardRef(function Item(_ref4, ref) {
-  let {
-    children,
-    disabledReason,
-    danger,
-    onClick,
-    ...props
-  } = _ref4;
-  const itemRef = useRef(null);
-  useImperativeHandle(ref, () => itemRef.current);
-  return jsx(DropdownMenu$1.Item, {
-    css: theme => [dropdownItemStyles, danger && dangerItemStyles(theme)],
-    ref: itemRef,
-    onClick: e => {
-      if (props.disabled) {
-        e.preventDefault();
-      } else {
-        onClick === null || onClick === void 0 || onClick(e);
-      }
-    },
-    ...props,
-    children: getNewChildren(children, props, disabledReason, itemRef)
-  });
-});
-const Label = /*#__PURE__*/forwardRef(function Label(_ref5, ref) {
-  let {
-    children,
-    ...props
-  } = _ref5;
-  return jsx(DropdownMenu$1.Label, {
-    ref: ref,
-    css: [dropdownItemStyles, theme => ({
-      color: theme.colors.textSecondary,
-      '&:hover': {
-        cursor: 'default'
-      }
-    }), process.env.NODE_ENV === "production" ? "" : ";label:Label;"],
-    ...props,
-    children: children
-  });
-});
-const Separator = /*#__PURE__*/forwardRef(function Separator(_ref6, ref) {
-  let {
-    children,
-    ...props
-  } = _ref6;
-  return jsx(DropdownMenu$1.Separator, {
+    direction
+  } = useResponsiveDirection({
+    ref,
+    requestedDirection,
+    responsive,
+    enabled: steps.length > 0
+  });
+  if (steps.length === 0) {
+    return null;
+  }
+  const isHorizontal = direction === 'horizontal';
+  const currentStepIndex = currentStep ? Math.min(steps.length - 1, Math.max(0, currentStep)) : 0;
+  return jsx("ol", {
+    css: /*#__PURE__*/css(getStepsStyle(theme, isHorizontal), process.env.NODE_ENV === "production" ? "" : ";label:Stepper;"),
     ref: ref,
-    css: dropdownSeparatorStyles,
-    ...props,
-    children: children
-  });
-});
-const SubTrigger = /*#__PURE__*/forwardRef(function TriggerItem(_ref7, ref) {
-  let {
-    children,
-    disabledReason,
-    ...props
-  } = _ref7;
-  const subTriggerRef = useRef(null);
-  useImperativeHandle(ref, () => subTriggerRef.current);
-  return jsxs(DropdownMenu$1.SubTrigger, {
-    ref: subTriggerRef,
-    css: [dropdownItemStyles, theme => ({
-      '&[data-state="open"]': {
-        backgroundColor: theme.colors.actionTertiaryBackgroundHover
-      }
-    }), process.env.NODE_ENV === "production" ? "" : ";label:SubTrigger;"],
-    ...props,
-    children: [getNewChildren(children, props, disabledReason, subTriggerRef), jsx(HintColumn, {
-      css: theme => ({
-        margin: CONSTANTS.subMenuIconMargin(theme),
-        display: 'flex',
-        alignSelf: 'stretch',
-        alignItems: 'center'
-      }),
-      children: jsx(ChevronRightIcon$1, {
-        css: theme => ({
-          fontSize: CONSTANTS.subMenuIconSize(theme)
+    children: steps.map((step, index) => {
+      const isCurrentStep = index === currentStepIndex;
+      const isLastStep = index === steps.length - 1;
+      const displayEndingDivider = !isLastStep;
+      const contentTitleLevel = isCurrentStep ? 3 : 4;
+      const StepIcon = step.icon;
+      const {
+        icon,
+        iconBackgroundColor,
+        iconTextColor,
+        titleTextColor,
+        descriptionTextColor,
+        hasStepItemIconBorder
+      } = getStepContentStyleFields(theme, isCurrentStep, step.status, StepIcon);
+      return jsx("li", {
+        "aria-current": isCurrentStep,
+        css: /*#__PURE__*/css(getStepItemStyle(theme, isHorizontal, isLastStep), process.env.NODE_ENV === "production" ? "" : ";label:Stepper;"),
+        children: jsxs(StepContentGrid, {
+          isHorizontal: isHorizontal,
+          isCurrentStep: isCurrentStep,
+          children: [jsx("div", {
+            css: /*#__PURE__*/css(getStepItemIconParentStyle(theme, isCurrentStep, iconBackgroundColor, hasStepItemIconBorder), process.env.NODE_ENV === "production" ? "" : ";label:Stepper;"),
+            children: StepIcon ? jsx(StepIcon, {
+              statusColor: iconTextColor,
+              status: step.status
+            }) : icon ? jsx("span", {
+              css: /*#__PURE__*/css({
+                color: iconTextColor
+              }, process.env.NODE_ENV === "production" ? "" : ";label:Stepper;"),
+              children: icon
+            }) : jsx(Typography.Title, {
+              level: contentTitleLevel,
+              css: /*#__PURE__*/css({
+                color: `${iconTextColor} !important`
+              }, process.env.NODE_ENV === "production" ? "" : ";label:Stepper;"),
+              withoutMargins: true,
+              children: localizeStepNumber(index + 1)
+            })
+          }), jsx(Typography.Title, {
+            level: contentTitleLevel,
+            withoutMargins: true,
+            css: /*#__PURE__*/css({
+              flexShrink: 0,
+              color: `${titleTextColor} !important`
+            }, process.env.NODE_ENV === "production" ? "" : ";label:Stepper;"),
+            children: step.title
+          }), displayEndingDivider && jsx("div", {
+            css: /*#__PURE__*/css(getStepEndingDividerStyles(theme, isHorizontal, isCurrentStep), process.env.NODE_ENV === "production" ? "" : ";label:Stepper;")
+          }), step.description && jsx(Typography.Text, {
+            css: /*#__PURE__*/css(getStepDescriptionStyles(theme, isHorizontal, isLastStep, descriptionTextColor), process.env.NODE_ENV === "production" ? "" : ";label:Stepper;"),
+            withoutMargins: true,
+            size: "sm",
+            children: step.description
+          })]
         })
-      })
-    })]
-  });
-});
-
-/**
- * Deprecated. Use `SubTrigger` instead.
- * @deprecated
- */
-const TriggerItem = SubTrigger;
-const CheckboxItem = /*#__PURE__*/forwardRef(function CheckboxItem(_ref8, ref) {
-  let {
-    children,
-    disabledReason,
-    ...props
-  } = _ref8;
-  const checkboxItemRef = useRef(null);
-  useImperativeHandle(ref, () => checkboxItemRef.current);
-  return jsx(DropdownMenu$1.CheckboxItem, {
-    ref: checkboxItemRef,
-    css: theme => [dropdownItemStyles, checkboxItemStyles(theme)],
-    ...props,
-    children: getNewChildren(children, props, disabledReason, checkboxItemRef)
-  });
-});
-const ItemIndicator = /*#__PURE__*/forwardRef(function ItemIndicator(_ref9, ref) {
-  let {
-    children,
-    ...props
-  } = _ref9;
-  return jsx(DropdownMenu$1.ItemIndicator, {
-    ref: ref,
-    css: theme => ({
-      marginLeft: -(CONSTANTS.checkboxIconWidth(theme) + CONSTANTS.checkboxPaddingRight(theme)),
-      position: 'absolute',
-      fontSize: theme.general.iconFontSize
-    }),
-    ...props,
-    children: children !== null && children !== void 0 ? children : jsx(CheckIcon$1, {
-      css: theme => ({
-        color: theme.colors.textSecondary
-      })
+      }, index);
     })
   });
-});
-const Arrow = /*#__PURE__*/forwardRef(function Arrow(_ref10, ref) {
+}
+function getStepsStyle(theme, isHorizontal) {
+  return /*#__PURE__*/css({
+    listStyle: 'none',
+    display: 'flex',
+    flexDirection: isHorizontal ? 'row' : 'column',
+    flexWrap: 'wrap',
+    alignItems: 'flex-start',
+    gap: isHorizontal ? theme.spacing.md : theme.spacing.sm,
+    width: '100%',
+    margin: '0',
+    padding: '0'
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getStepsStyle;");
+}
+function getStepItemStyle(theme, isHorizontal, isLastStep) {
+  return /*#__PURE__*/css({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    flexGrow: isLastStep ? 0 : 1,
+    marginRight: isLastStep ? theme.spacing.lg + theme.spacing.md : 0,
+    width: isHorizontal ? undefined : '100%'
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getStepItemStyle;");
+}
+function getStepContentStyleFields(theme, isCurrentStep, status, icon) {
+  const fields = getStepContentStyleFieldsFromStatus(theme, isCurrentStep, status);
+  if (icon) {
+    return {
+      ...fields,
+      icon: undefined,
+      iconBackgroundColor: undefined,
+      iconTextColor: getCustomIconColor(theme, isCurrentStep, status),
+      hasStepItemIconBorder: false
+    };
+  }
+  return fields;
+}
+function getCustomIconColor(theme, isCurrentStep, status) {
+  switch (status) {
+    case 'completed':
+      return theme.colors.actionDefaultBackgroundPress;
+    case 'loading':
+      return theme.colors.textPlaceholder;
+    case 'error':
+      return theme.colors.textValidationDanger;
+    default:
+    case 'upcoming':
+      return isCurrentStep ? theme.colors.actionLinkDefault : theme.colors.textPlaceholder;
+  }
+}
+function getStepContentStyleFieldsFromStatus(theme, isCurrentStep, status) {
+  switch (status) {
+    case 'completed':
+      return {
+        icon: jsx(CheckIcon$1, {}),
+        iconBackgroundColor: theme.colors.actionDefaultBackgroundPress,
+        iconTextColor: theme.colors.textPlaceholder,
+        titleTextColor: theme.colors.textPrimary,
+        descriptionTextColor: theme.colors.textSecondary,
+        hasStepItemIconBorder: true
+      };
+    case 'loading':
+      return {
+        icon: jsx(LoadingIcon$1, {
+          spin: true,
+          css: /*#__PURE__*/css({
+            fontSize: isCurrentStep ? theme.typography.fontSizeXl : theme.typography.fontSizeLg
+          }, process.env.NODE_ENV === "production" ? "" : ";label:icon;")
+        }),
+        iconBackgroundColor: undefined,
+        iconTextColor: theme.colors.textPlaceholder,
+        titleTextColor: isCurrentStep ? theme.colors.textPrimary : theme.colors.textSecondary,
+        descriptionTextColor: theme.colors.textSecondary,
+        hasStepItemIconBorder: false
+      };
+    case 'error':
+      return {
+        icon: jsx(CloseIcon$1, {
+          css: /*#__PURE__*/css({
+            marginBottom: theme.spacing.sm /* center icon in icon circle */
+          }, process.env.NODE_ENV === "production" ? "" : ";label:icon;")
+        }),
+        iconBackgroundColor: theme.colors.textValidationDanger,
+        iconTextColor: 'white',
+        titleTextColor: theme.colors.textValidationDanger,
+        descriptionTextColor: theme.colors.textValidationDanger,
+        hasStepItemIconBorder: false
+      };
+    default:
+    case 'upcoming':
+      if (isCurrentStep) {
+        return {
+          icon: undefined,
+          iconBackgroundColor: theme.colors.actionLinkDefault,
+          iconTextColor: 'white',
+          titleTextColor: theme.colors.textPrimary,
+          descriptionTextColor: theme.colors.textPrimary,
+          hasStepItemIconBorder: false
+        };
+      }
+      return {
+        icon: undefined,
+        iconBackgroundColor: undefined,
+        iconTextColor: theme.colors.textPlaceholder,
+        titleTextColor: theme.colors.textSecondary,
+        descriptionTextColor: theme.colors.textSecondary,
+        hasStepItemIconBorder: true
+      };
+  }
+}
+const MaxHorizontalStepDescriptionWidth = 140;
+const CurrentStepIconSize = DEFAULT_SPACING_UNIT * 4;
+const NonCurrentStepIconSize = DEFAULT_SPACING_UNIT * 3;
+function getStepItemIconParentStyle(theme, isCurrentStep, iconBackgroundColor, hasStepItemIconBorder) {
+  return /*#__PURE__*/css({
+    width: isCurrentStep ? CurrentStepIconSize : NonCurrentStepIconSize,
+    height: isCurrentStep ? CurrentStepIconSize : NonCurrentStepIconSize,
+    backgroundColor: iconBackgroundColor,
+    borderRadius: '50%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    fontSize: '20px',
+    flexShrink: 0,
+    border: hasStepItemIconBorder ? `1px solid ${theme.colors.textPlaceholder}` : undefined
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getStepItemIconParentStyle;");
+}
+function getStepEndingDividerStyles(theme, isHorizontal, isCurrentStep) {
+  const backgroundColor = isCurrentStep ? theme.colors.actionLinkDefault : theme.colors.border;
+  if (isHorizontal) {
+    return /*#__PURE__*/css({
+      backgroundColor,
+      height: '1px',
+      width: '100%',
+      minWidth: theme.spacing.md
+    }, process.env.NODE_ENV === "production" ? "" : ";label:getStepEndingDividerStyles;");
+  }
+  return /*#__PURE__*/css({
+    backgroundColor,
+    height: '100%',
+    minHeight: theme.spacing.md,
+    width: '1px',
+    alignSelf: 'flex-start',
+    marginLeft: theme.spacing.md
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getStepEndingDividerStyles;");
+}
+function getStepDescriptionStyles(theme, isHorizontal, isLastStep, textColor) {
+  return /*#__PURE__*/css({
+    alignSelf: 'flex-start',
+    width: '100%',
+    gridColumn: isHorizontal || isLastStep ? '2 / span 2' : undefined,
+    maxWidth: isHorizontal ? MaxHorizontalStepDescriptionWidth : undefined,
+    paddingBottom: isHorizontal ? undefined : theme.spacing.sm,
+    color: `${textColor} !important`
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getStepDescriptionStyles;");
+}
+function StepContentGrid(_ref2) {
   let {
     children,
-    ...props
-  } = _ref10;
+    isHorizontal,
+    isCurrentStep
+  } = _ref2;
   const {
     theme
   } = useDesignSystemTheme();
-  return jsx(DropdownMenu$1.Arrow, {
+  if (isHorizontal) {
+    return jsx("div", {
+      css: /*#__PURE__*/css({
+        display: 'grid',
+        gridTemplateColumns: `${isCurrentStep ? CurrentStepIconSize : NonCurrentStepIconSize}px fit-content(100%) 1fr`,
+        gridTemplateRows: `${CurrentStepIconSize}px auto`,
+        alignItems: 'center',
+        justifyItems: 'flex-start',
+        gridColumnGap: theme.spacing.sm,
+        width: '100%'
+      }, process.env.NODE_ENV === "production" ? "" : ";label:StepContentGrid;"),
+      children: children
+    });
+  }
+  return jsx("div", {
     css: /*#__PURE__*/css({
-      fill: theme.colors.backgroundPrimary,
-      stroke: theme.colors.borderDecorative,
-      strokeDashoffset: -CONSTANTS.arrowBottomLength(),
-      strokeDasharray: CONSTANTS.arrowBottomLength() + 2 * CONSTANTS.arrowSide(),
-      strokeWidth: CONSTANTS.arrowStrokeWidth(),
-      // TODO: This is a temporary fix for the alignment of the Arrow;
-      // Radix has changed the implementation for v1.0.0 (uses floating-ui)
-      // which has new behaviors for alignment that we don't want. Generally
-      // we need to fix the arrow to always be aligned to the left of the menu (with
-      // offset equal to border radius)
-      position: 'relative',
-      top: -1
-    }, process.env.NODE_ENV === "production" ? "" : ";label:Arrow;"),
-    ref: ref,
-    width: 12,
-    height: 6,
-    ...props,
+      display: 'grid',
+      gridTemplateColumns: `${CurrentStepIconSize}px auto`,
+      alignItems: 'center',
+      justifyItems: 'flex-start',
+      gridColumnGap: theme.spacing.md,
+      gridRowGap: theme.spacing.sm,
+      width: '100%',
+      '& > :first-child': {
+        // horizontally center the first column (circle/icon)
+        justifySelf: 'center'
+      }
+    }, process.env.NODE_ENV === "production" ? "" : ";label:StepContentGrid;"),
     children: children
   });
-});
-const RadioItem = /*#__PURE__*/forwardRef(function RadioItem(_ref11, ref) {
-  let {
-    children,
-    disabledReason,
-    ...props
-  } = _ref11;
-  const radioItemRef = useRef(null);
-  useImperativeHandle(ref, () => radioItemRef.current);
-  return jsx(DropdownMenu$1.RadioItem, {
-    ref: radioItemRef,
-    css: theme => [dropdownItemStyles, checkboxItemStyles(theme)],
-    ...props,
-    children: getNewChildren(children, props, disabledReason, radioItemRef)
-  });
-});
+}
 
-// UNWRAPPED RADIX-UI-COMPONENTS
-const Group = DropdownMenu$1.Group;
-const RadioGroup = DropdownMenu$1.RadioGroup;
-const Sub = DropdownMenu$1.Sub;
+// Ant design uses the same value for their stepper and to works well for us as well.
+const MinimumHorizonalDirectionWidth = 532;
 
-// EXTRA COMPONENTS
-const HintColumn = /*#__PURE__*/forwardRef(function HintColumn(_ref12, ref) {
-  let {
-    children,
-    ...props
-  } = _ref12;
-  return jsx("div", {
-    ref: ref,
-    css: [metaTextStyles, "margin-left:auto;" + (process.env.NODE_ENV === "production" ? "" : ";label:HintColumn;")],
-    ...props,
-    children: children
-  });
-});
-const HintRow = /*#__PURE__*/forwardRef(function HintRow(_ref13, ref) {
-  let {
-    children,
-    ...props
-  } = _ref13;
-  return jsx("div", {
-    ref: ref,
-    css: [metaTextStyles, "min-width:100%;" + (process.env.NODE_ENV === "production" ? "" : ";label:HintRow;")],
-    ...props,
-    children: children
-  });
-});
-const IconWrapper = /*#__PURE__*/forwardRef(function IconWrapper(_ref14, ref) {
+// exported for unit test
+function useResponsiveDirection(_ref3) {
   let {
-    children,
-    ...props
-  } = _ref14;
-  return jsx("div", {
-    ref: ref,
-    css: theme => ({
-      fontSize: 16,
-      color: theme.colors.textSecondary,
-      paddingRight: theme.spacing.sm
-    }),
-    ...props,
-    children: children
-  });
-});
-const getNewChildren = (children, props, disabledReason, ref) => {
-  const childCount = Children.count(children);
-  const tooltip = jsx(Tooltip, {
-    title: disabledReason,
-    placement: "right",
-    dangerouslySetAntdProps: {
-      getPopupContainer: () => ref.current || document.body
-    },
-    children: jsx("span", {
-      css: theme => infoIconStyles(theme),
-      children: jsx(InfoIcon$1, {
-        role: "presentation",
-        alt: "Disabled state reason",
-        "aria-hidden": "false"
-      })
-    })
-  });
-  if (childCount === 1) {
-    return getChild(children, Boolean(props['disabled']), disabledReason, tooltip, 0, childCount);
-  }
-  return Children.map(children, (child, idx) => {
-    return getChild(child, Boolean(props['disabled']), disabledReason, tooltip, idx, childCount);
-  });
-};
-const getChild = (child, isDisabled, disabledReason, tooltip, index, siblingCount) => {
-  const HintColumnType = jsx(HintColumn, {}).type;
-  const isHintColumnType = Boolean(child && typeof child !== 'string' && typeof child !== 'number' && typeof child !== 'boolean' && 'type' in child && (child === null || child === void 0 ? void 0 : child.type) === HintColumnType);
-  if (isDisabled && disabledReason && child && isHintColumnType) {
-    return jsxs(Fragment, {
-      children: [tooltip, child]
-    });
-  } else if (index === siblingCount - 1 && isDisabled && disabledReason) {
-    return jsxs(Fragment, {
-      children: [child, tooltip]
+    requestedDirection = 'horizontal',
+    responsive,
+    enabled,
+    ref
+  } = _ref3;
+  const [direction, setDirection] = useState(requestedDirection);
+  useEffect(() => {
+    if (requestedDirection === 'vertical' || !enabled || !responsive || !ref.current) {
+      return;
+    }
+    let timeoutId;
+    const resizeObserver = new ResizeObserver(entries => {
+      timeoutId = requestAnimationFrame(() => {
+        if (entries.length === 1) {
+          const width = entries[0].target.clientWidth || 0;
+          setDirection(width < MinimumHorizonalDirectionWidth ? 'vertical' : 'horizontal');
+        }
+      });
     });
-  }
-  return child;
-};
-
-// CONSTANTS
-const CONSTANTS = {
-  itemPaddingVertical(theme) {
-    // The number from the mocks is the midpoint between constants
-    return 0.5 * theme.spacing.xs + 0.5 * theme.spacing.sm;
-  },
-  itemPaddingHorizontal(theme) {
-    return theme.spacing.sm;
-  },
-  checkboxIconWidth(theme) {
-    return theme.general.iconFontSize;
-  },
-  checkboxPaddingLeft(theme) {
-    return theme.spacing.sm + theme.spacing.xs;
-  },
-  checkboxPaddingRight(theme) {
-    return theme.spacing.sm;
-  },
-  subMenuIconMargin(theme) {
-    // Negative margin so the icons can be larger without increasing the overall item height
-    const iconMarginVertical = this.itemPaddingVertical(theme) / 2;
-    const iconMarginRight = -this.itemPaddingVertical(theme) + theme.spacing.sm * 1.5;
-    return `${-iconMarginVertical}px ${-iconMarginRight}px ${-iconMarginVertical}px auto`;
-  },
-  subMenuIconSize(theme) {
-    return theme.spacing.lg;
-  },
-  arrowBottomLength() {
-    // The built in arrow is a polygon: 0,0 30,0 15,10
-    return 30;
-  },
-  arrowHeight() {
-    return 10;
-  },
-  arrowSide() {
-    return 2 * (this.arrowHeight() ** 2 * 2) ** 0.5;
-  },
-  arrowStrokeWidth() {
-    // This is eyeballed b/c relative to the svg viewbox coordinate system
-    return 2;
-  }
-};
-const dropdownContentStyles = theme => ({
-  backgroundColor: theme.colors.backgroundPrimary,
-  color: theme.colors.textPrimary,
-  lineHeight: theme.typography.lineHeightBase,
-  border: `1px solid ${theme.colors.borderDecorative}`,
-  borderRadius: theme.borders.borderRadiusMd,
-  padding: `${theme.spacing.xs}px 0`,
-  boxShadow: theme.general.shadowLow,
-  userSelect: 'none',
-  ...getDarkModePortalStyles(theme),
-  // Ant Design uses 1000s for their zIndex space; this ensures Radix works with that, but
-  // we'll likely need to be sure that all Radix components are using the same zIndex going forward.
-  //
-  // Additionally, there is an issue where macOS overlay scrollbars in Chrome and Safari (sometimes!)
-  // overlap other elements with higher zIndex, because the scrollbars themselves have zIndex 9999,
-  // so we have to use a higher value than that: https://github.com/databricks/universe/pull/232825
-  zIndex: 10000,
-  a: importantify({
-    color: theme.colors.textPrimary,
-    '&:hover, &:focus': {
-      color: theme.colors.textPrimary,
-      textDecoration: 'none'
+    if (ref.current) {
+      resizeObserver.observe(ref.current);
     }
-  })
-});
-const contentStyles = theme => ({
-  ...dropdownContentStyles(theme)
-});
-const dropdownItemStyles = theme => ({
-  padding: `${CONSTANTS.itemPaddingVertical(theme)}px ${CONSTANTS.itemPaddingHorizontal(theme)}px`,
-  display: 'flex',
-  flexWrap: 'wrap',
-  alignItems: 'center',
-  outline: 'unset',
-  '&:hover': {
-    cursor: 'pointer'
-  },
-  '&:focus': {
-    backgroundColor: theme.colors.actionTertiaryBackgroundHover
-  },
-  '&[data-disabled]': {
-    pointerEvents: 'none',
-    color: theme.colors.actionDisabledText
-  }
-});
-const dangerItemStyles = theme => ({
-  color: theme.colors.textValidationDanger,
-  '&:hover, &:focus': {
-    backgroundColor: theme.colors.actionDangerDefaultBackgroundHover
-  }
-});
-const infoIconStyles = theme => ({
-  display: 'inline-flex',
-  paddingLeft: theme.spacing.xs,
-  color: theme.colors.textSecondary,
-  pointerEvents: 'all'
-});
-const checkboxItemStyles = theme => ({
-  position: 'relative',
-  paddingLeft: CONSTANTS.checkboxIconWidth(theme) + CONSTANTS.checkboxPaddingLeft(theme) + CONSTANTS.checkboxPaddingRight(theme)
-});
-const metaTextStyles = theme => ({
-  color: theme.colors.textSecondary,
-  fontSize: theme.typography.fontSizeSm,
-  '[data-disabled] &': {
-    color: theme.colors.actionDisabledText
-  }
-});
-const dropdownSeparatorStyles = theme => ({
-  height: 1,
-  margin: `${theme.spacing.xs}px ${theme.spacing.sm}px`,
-  backgroundColor: theme.colors.borderDecorative
-});
-
-var DropdownMenu = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  Arrow: Arrow,
-  CheckboxItem: CheckboxItem,
-  Content: Content,
-  Group: Group,
-  HintColumn: HintColumn,
-  HintRow: HintRow,
-  IconWrapper: IconWrapper,
-  Item: Item,
-  ItemIndicator: ItemIndicator,
-  Label: Label,
-  RadioGroup: RadioGroup,
-  RadioItem: RadioItem,
-  Root: Root,
-  Separator: Separator,
-  Sub: Sub,
-  SubContent: SubContent,
-  SubTrigger: SubTrigger,
-  Trigger: Trigger,
-  TriggerItem: TriggerItem,
-  dropdownContentStyles: dropdownContentStyles,
-  dropdownItemStyles: dropdownItemStyles,
-  dropdownSeparatorStyles: dropdownSeparatorStyles
-});
+    return () => {
+      resizeObserver.disconnect();
+      cancelAnimationFrame(timeoutId);
+    };
+  }, [requestedDirection, enabled, ref, responsive]);
+  return {
+    direction
+  };
+}
 
-export { FaceFrownIcon$1 as $, ApplyDesignSystemContextOverrides as A, Button as B, CloseIcon$1 as C, DesignSystemAntDConfigProvider as D, getPrimaryStyles as E, getDisabledStyles as F, useDesignSystemFlags as G, getButtonEmotionStyles as H, Icon as I, DesignSystemEventProviderComponentTypes as J, DesignSystemEventProviderAnalyticsEventTypes as K, LoadingState as L, useDesignSystemEventComponentCallbacks as M, DesignSystemEventProvider as N, DesignSystemThemeContext as O, DesignSystemContext as P, DesignSystemThemeProvider as Q, RestoreAntDDefaultClsPrefix as R, Spinner as S, Typography as T, DesignSystemProvider as U, ApplyDesignSystemFlags as V, WarningIcon$1 as W, useAntDConfigProviderContext as X, DropdownMenu as Y, WithDesignSystemThemeHoc as Z, CursorIcon$1 as _, getDarkModePortalStyles as a, FaceNeutralIcon$1 as a0, FaceSmileIcon$1 as a1, MegaphoneIcon$1 as a2, NewWindowIcon$1 as a3, LoadingStateContext as a4, getTypographyColor as a5, getBottomOnlyShadowScrollStyles as a6, ColorVars as a7, primitiveColors as a8, dropdownItemStyles as a9, dropdownSeparatorStyles as aa, ChevronRightIcon$1 as b, useDesignSystemContext as c, Tooltip as d, InfoIcon$1 as e, Input as f, getAnimationCss as g, CheckIcon$1 as h, importantify as i, getValidationStateColor as j, getShadowScrollStyles as k, DangerIcon$1 as l, LoadingIcon$1 as m, dropdownContentStyles as n, useUniqueId as o, Title as p, AccessibleContainer as q, ChevronLeftIcon$1 as r, safex as s, DU_BOIS_ENABLE_ANIMATION_CLASSNAME as t, useDesignSystemTheme as u, visuallyHidden as v, lightColorList as w, Root as x, Trigger as y, getDefaultStyles as z };
-//# sourceMappingURL=DropdownMenu-dbeef1b7.js.map
+export { NewWindowIcon$1 as $, ApplyDesignSystemContextOverrides as A, Button as B, CloseIcon$1 as C, DesignSystemAntDConfigProvider as D, getDisabledStyles as E, useDesignSystemFlags as F, Stepper as G, getButtonEmotionStyles as H, Icon as I, DesignSystemEventProvider as J, DesignSystemThemeContext as K, LoadingState as L, DesignSystemContext as M, DesignSystemThemeProvider as N, DesignSystemProvider as O, ApplyDesignSystemFlags as P, useAntDConfigProviderContext as Q, RestoreAntDDefaultClsPrefix as R, Spinner as S, Typography as T, WithDesignSystemThemeHoc as U, CursorIcon$1 as V, WarningIcon$1 as W, FaceFrownIcon$1 as X, FaceNeutralIcon$1 as Y, FaceSmileIcon$1 as Z, MegaphoneIcon$1 as _, getDarkModePortalStyles as a, getInputStyles as a0, LoadingStateContext as a1, getTypographyColor as a2, getBottomOnlyShadowScrollStyles as a3, ColorVars as a4, primitiveColors as a5, ChevronRightIcon$1 as b, useUniqueId as c, useDesignSystemContext as d, CheckIcon$1 as e, Input as f, getAnimationCss as g, getValidationStateColor as h, importantify as i, getShadowScrollStyles as j, DangerIcon$1 as k, LoadingIcon$1 as l, Title as m, AccessibleContainer as n, ChevronLeftIcon$1 as o, useDesignSystemEventComponentCallbacks as p, DesignSystemEventProviderComponentTypes as q, DesignSystemEventProviderAnalyticsEventTypes as r, safex as s, useNotifyOnFirstView as t, useDesignSystemTheme as u, visuallyHidden as v, DU_BOIS_ENABLE_ANIMATION_CLASSNAME as w, lightColorList as x, getDefaultStyles as y, getPrimaryStyles as z };
+//# sourceMappingURL=Stepper-a0fb4d9b.js.map