@databricks/design-system 1.12.14 → 1.12.16

package/dist/{Stepper-839336b1.js → Stepper-ff25c5d1.js}

@@ -1,7 +1,7 @@
-import React__default, { createContext, useContext, useMemo, useEffect, useState, forwardRef, useRef, useLayoutEffect, useImperativeHandle } 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, Input as Input$2 } from 'antd';
+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';
@@ -190,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";
@@ -397,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",
@@ -593,6 +661,8 @@ const darkColorList = {
   borderWarning: primitiveColors.yellow500,
   codeBackground: primitiveColors.grey650,
   overlayOverlay: 'rgba(31, 38, 45, 0.7200)',
+  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)',
@@ -607,7 +677,7 @@ const darkColorList = {
   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)',
@@ -693,6 +763,8 @@ const lightColorList = {
   borderWarning: primitiveColors.yellow300,
   codeBackground: 'rgba(68, 83, 95, 0.0800)',
   overlayOverlay: 'rgba(64, 63, 63, 0.7200)',
+  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)',
@@ -718,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,
@@ -1310,7 +1382,6 @@ function SvgCursorIcon(props) {
       })
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "CursorIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
           d: "M16 0H0v16h16z"
@@ -1378,7 +1449,6 @@ function SvgFaceFrownIcon(props) {
       })]
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "FaceFrownIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
           d: "M0 0h16v16H0z"
@@ -1417,7 +1487,6 @@ function SvgFaceNeutralIcon(props) {
       })]
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "FaceNeutralIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
           d: "M0 0h16v16H0z"
@@ -1460,7 +1529,6 @@ function SvgFaceSmileIcon(props) {
       })]
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "FaceSmileIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
           d: "M0 0h16v16H0z"
@@ -1587,1248 +1655,1256 @@ 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
+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 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
-    }
-  };
+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 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
+
+const getLinkStyles$1 = (theme, clsPrefix) => {
+  const classTypography = `.${clsPrefix}-typography`;
+  const styles = {
+    [`&${classTypography}, &${classTypography}:focus`]: {
+      color: theme.colors.actionTertiaryTextDefault
     },
-    '&:active': {
-      backgroundColor: theme.colors.actionTertiaryBackgroundPress,
-      borderColor: 'transparent',
-      color: theme.colors.actionTertiaryTextPress
+    [`&${classTypography}:hover, &${classTypography}:hover .anticon`]: {
+      color: theme.colors.actionTertiaryTextHover,
+      textDecoration: 'underline'
     },
-    '&[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
+    [`&${classTypography}:active, &${classTypography}:active .anticon`]: {
+      color: theme.colors.actionTertiaryTextPress,
+      textDecoration: 'underline'
     },
-    '&:active': {
-      backgroundColor: theme.colors.actionDangerPrimaryBackgroundPress,
-      borderColor: 'transparent',
-      color: theme.colors.actionPrimaryTextPress
+    [`&${classTypography}:focus-visible`]: {
+      textDecoration: 'underline'
     },
-    '&:focus-visible': {
-      outlineColor: theme.colors.actionDangerPrimaryBackgroundDefault
+    '.anticon': {
+      fontSize: 12,
+      verticalAlign: 'baseline'
     }
   };
-}
-function getSecondaryDangerStyles(theme) {
-  const defaultStyles = {
-    backgroundColor: theme.colors.actionDangerDefaultBackgroundDefault,
-    borderColor: theme.colors.actionDangerDefaultBorderDefault,
-    color: theme.colors.actionDangerDefaultTextDefault
+  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.actionDangerDefaultBackgroundHover,
-      borderColor: theme.colors.actionDangerDefaultBorderHover,
-      color: theme.colors.actionDangerDefaultTextHover
-    },
-    '&:active': {
-      backgroundColor: theme.colors.actionDangerDefaultBackgroundPress,
-      borderColor: theme.colors.actionDangerDefaultBorderPress,
-      color: theme.colors.actionDangerDefaultTextPress
-    },
-    '&:focus-visible': {
-      outlineColor: theme.colors.actionDangerPrimaryBackgroundDefault
-    }
+  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getEllipsisNewTabLinkStyles;");
+};
+const getIconStyles = theme => {
+  const styles = {
+    marginLeft: 2,
+    color: theme.colors.actionTertiaryTextDefault
   };
-}
-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: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.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:getEllipsisIconStyles;");
+};
+const Link = /*#__PURE__*/forwardRef(function Link(_ref, ref) {
+  let {
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref;
+  const {
+    children,
+    openInNewTab,
+    ...restProps
+  } = props;
+  const {
+    theme,
+    classNamePrefix
+  } = useDesignSystemTheme();
+  const newTabProps = {
+    rel: 'noopener noreferrer',
+    target: '_blank'
   };
-}
-function getDisabledTertiaryStyles(theme) {
-  const defaultStyles = {
-    backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
-    borderColor: 'transparent',
-    color: theme.colors.actionDisabledText
+  const linkProps = openInNewTab ? {
+    ...restProps,
+    ...newTabProps
+  } : {
+    ...restProps
   };
-  return {
-    ...defaultStyles,
-    '&:hover': {
-      backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
-      borderColor: 'transparent',
-      color: theme.colors.actionDisabledText
+  const linkStyles = props.ellipsis && openInNewTab ? [getLinkStyles$1(theme, classNamePrefix), getEllipsisNewTabLinkStyles()] : getLinkStyles$1(theme, classNamePrefix);
+  const iconStyles = props.ellipsis ? [getIconStyles(theme), getEllipsisIconStyles()] : getIconStyles(theme);
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsxs(Typography$1.Link, {
+      "aria-disabled": linkProps.disabled,
+      css: linkStyles,
+      ref: ref,
+      ...linkProps,
+      ...dangerouslySetAntdProps,
+      children: [children, openInNewTab ? jsx(NewWindowIcon$1, {
+        css: iconStyles,
+        ...newTabProps
+      }) : null]
+    })
+  });
+});
+
+const {
+  Paragraph: AntDParagraph
+} = Typography$1;
+function getParagraphEmotionStyles(theme, props) {
+  return /*#__PURE__*/css({
+    '&&': {
+      fontSize: theme.typography.fontSizeBase,
+      fontWeight: theme.typography.typographyRegularFontWeight,
+      lineHeight: theme.typography.lineHeightBase,
+      color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
     },
-    '&:active': {
-      backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
-      borderColor: 'transparent',
+    '& .anticon': {
+      verticalAlign: 'text-bottom'
+    }
+  }, props.disabled && {
+    '&&': {
       color: theme.colors.actionDisabledText
     }
-  };
-}
-
-let DesignSystemEventProviderComponentTypes = /*#__PURE__*/function (DesignSystemEventProviderComponentTypes) {
-  DesignSystemEventProviderComponentTypes["Banner"] = "banner";
-  DesignSystemEventProviderComponentTypes["Button"] = "button";
-  DesignSystemEventProviderComponentTypes["Input"] = "input";
-  return DesignSystemEventProviderComponentTypes;
-}({});
-let DesignSystemEventProviderAnalyticsEventTypes = /*#__PURE__*/function (DesignSystemEventProviderAnalyticsEventTypes) {
-  DesignSystemEventProviderAnalyticsEventTypes["OnClick"] = "onClick";
-  DesignSystemEventProviderAnalyticsEventTypes["OnView"] = "onView";
-  DesignSystemEventProviderAnalyticsEventTypes["OnValueChange"] = "onValueChange";
-  return DesignSystemEventProviderAnalyticsEventTypes;
-}({});
-const shouldTriggerCallback = (eventType, analyticsEvents) => {
-  return analyticsEvents.includes(eventType);
-};
-const DefaultEmptyCallbacks = {
-  callback: () => {}
-};
-const DesignSystemEventProviderContext = /*#__PURE__*/React__default.createContext(DefaultEmptyCallbacks);
-
-/**
- * This gets the event provider, which is used to pass callbacks to the design system for events such as onClick, onView, and onValueChange.
- * If the value is undefined, then the expected behavior is to not emit any events.
- *
- * @returns DesignSystemEventProviderContextType
- */
-const useDesignSystemEventProviderContext = () => {
-  return useContext(DesignSystemEventProviderContext);
-};
-
-/**
- * NOTE: This is not suggested for direct usage from engineers, and should emit your own events.
- * See https://databricks.atlassian.net/wiki/spaces/UN/pages/2533556277/Usage+Logging+in+UI#Send-usage-logging-from-UI for more details.
- *
- * This gets the event provider component event type callbacks.
- * If context & componentId are not undefined, then it will check if the event is in analyticsEvents or the default analyticsEvents for that component.
- * If the context or componentId are undefined, then the expected behavior is to not emit any events.
- *
- * @returns Object of event callbacks
- */
-const useDesignSystemEventComponentCallbacks = _ref => {
-  let {
-    componentType,
-    componentId,
-    analyticsEvents
-  } = _ref;
-  const context = useDesignSystemEventProviderContext();
-  const callbacks = useMemo(() => {
-    if (context === DefaultEmptyCallbacks || componentId === undefined) {
-      return {
-        onClick: () => {},
-        onValueChange: () => {},
-        onView: () => {}
-      };
+  }, props.withoutMargins && {
+    '&&': {
+      marginTop: 0,
+      marginBottom: 0
     }
-    return {
-      onClick: () => {
-        if (shouldTriggerCallback(DesignSystemEventProviderAnalyticsEventTypes.OnClick, analyticsEvents)) {
-          context.callback(DesignSystemEventProviderAnalyticsEventTypes.OnClick, componentType, componentId);
-        }
-      },
-      onValueChange: () => {
-        if (shouldTriggerCallback(DesignSystemEventProviderAnalyticsEventTypes.OnValueChange, analyticsEvents)) {
-          context.callback(DesignSystemEventProviderAnalyticsEventTypes.OnValueChange, componentType, componentId);
-        }
-      },
-      onView: () => {
-        if (shouldTriggerCallback(DesignSystemEventProviderAnalyticsEventTypes.OnView, analyticsEvents)) {
-          context.callback(DesignSystemEventProviderAnalyticsEventTypes.OnView, componentType, componentId);
-        }
-      }
-    };
-  }, [context, componentType, componentId, analyticsEvents]);
-  return callbacks;
-};
-
-/**
- * NOTE: This is not suggested for direct usage from engineers, and should use RecordEventContext instead.
- * See https://databricks.atlassian.net/wiki/spaces/UN/pages/2533556277/Usage+Logging+in+UI#Send-usage-logging-from-UI for more details.
- *
- * This is the Design System Event Context Provider, and is only used to pass callbacks to the design system for events such as onClick, onView, and onValueChange.
- *
- * @param children Children react elements
- * @param callback The event callback function
- * @returns Design System Event Context Provider with the children inside
- */
-function DesignSystemEventProvider(_ref2) {
-  let {
-    children,
-    callback
-  } = _ref2;
-  const contextValue = useMemo(() => {
-    return {
-      callback
-    };
-  }, [callback]);
-  return jsx(DesignSystemEventProviderContext.Provider, {
-    value: contextValue,
-    children: children
-  });
-}
-
-// Use Symbol to correctly handled null/undefined as stable values
-const NOT_INITIALIZED = Symbol('NOT_INITIALIZED');
-
-/**
- * Use to keep a stable value on the first mount of a component
- * that cannot change.
- */
-function useStable(valueCallback) {
-  const ref = useRef(NOT_INITIALIZED);
-  if (ref.current === NOT_INITIALIZED) {
-    const val = valueCallback();
-    ref.current = val;
-    return val;
-  }
-  return ref.current;
-}
-let sequentialCounter = 0;
-function useStableUid() {
-  return useStable(() => sequentialCounter++);
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getParagraphEmotionStyles;");
 }
-
-/** 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 () => {
-      // 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'
-    }
-  };
-  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',
+function Paragraph(userProps) {
+  const {
+    dangerouslySetAntdProps,
+    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(AntDParagraph, {
       ...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: getParagraphEmotionStyles(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 {
+  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 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
+    })
+  });
+}
 
-function getEndIconClsName(theme) {
-  return `${theme.general.iconfontCssPrefix}-btn-end-icon`;
+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;");
+  }
 }
-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
+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 && !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'
+    '&: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,
-          ...(danger && {
-            color: theme.colors.actionDangerDefaultTextHover
-          })
-        },
-        '&: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$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
+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,
+    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
     }
-  }, 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
-  } = userProps;
-  const {
-    theme
-  } = useDesignSystemTheme();
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(AntDText, {
-      ...props,
-      className: props.className,
-      css: getTextEmotionStyles(theme, userProps),
-      ...dangerouslySetAntdProps
+  };
+  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
-        },
-        '& > .anticon': {
-          lineHeight: theme.typography.lineHeightLg
+      })
+    },
+    [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'
         }
-      }, 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
+      },
+      [`& > ${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.lineHeightMd
+        '&: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
+        }
+      }),
+      ...(loading && {
+        '&&, &:hover, &:active': {
+          backgroundColor: '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)
+      }),
+      '&[disabled]:hover': {
+        backgroundColor: 'transparent'
+      }
     },
-    '& > .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
-    })
-  });
-}
+    [`&: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'
+        }
+      }),
+      '& > 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;
+  });
+
+  // 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) => {
@@ -2844,6 +2920,9 @@ const getInputGroupStyling = (clsPrefix, theme) => {
         '&:hover': {
           borderRight: `1px solid ${theme.colors.actionDisabledText} !important`
         }
+      },
+      '&[data-validation]': {
+        marginRight: 0
       }
     },
     [`& > ${buttonClass} > span`]: {
@@ -2875,6 +2954,37 @@ const Group = _ref => {
   });
 };
 
+/**
+ * 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
@@ -2985,6 +3095,9 @@ const Input$1 = /*#__PURE__*/forwardRef(function Input(_ref4, ref) {
     dangerouslyAppendEmotionCSS,
     onChange,
     onClear,
+    onFocus,
+    componentId,
+    analyticsEvents,
     ...props
   } = _ref4;
   const {
@@ -2992,7 +3105,19 @@ const Input$1 = /*#__PURE__*/forwardRef(function Input(_ref4, ref) {
     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.
@@ -3002,14 +3127,20 @@ const Input$1 = /*#__PURE__*/forwardRef(function Input(_ref4, 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
     })
@@ -3121,25 +3252,25 @@ function Stepper(_ref) {
       } = getStepContentStyleFields(theme, isCurrentStep, step.status, StepIcon);
       return jsx("li", {
         "aria-current": isCurrentStep,
-        css: /*#__PURE__*/css(getStepItemStyle(theme, isHorizontal, isLastStep)),
+        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)),
+            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)
             })
@@ -3149,12 +3280,12 @@ function Stepper(_ref) {
             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))
+            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)),
+            css: /*#__PURE__*/css(getStepDescriptionStyles(theme, isHorizontal, isLastStep, descriptionTextColor), process.env.NODE_ENV === "production" ? "" : ";label:Stepper;"),
             withoutMargins: true,
             size: "sm",
             children: step.description
@@ -3241,11 +3372,7 @@ function getStepContentStyleFieldsFromStatus(theme, isCurrentStep, status) {
       };
     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;")
-        }),
+        icon: jsx(CloseIcon$1, {}),
         iconBackgroundColor: theme.colors.textValidationDanger,
         iconTextColor: 'white',
         titleTextColor: theme.colors.textValidationDanger,
@@ -3338,7 +3465,6 @@ function StepContentGrid(_ref2) {
         alignItems: 'center',
         justifyItems: 'flex-start',
         gridColumnGap: theme.spacing.sm,
-        gridRowGap: theme.spacing.sm,
         width: '100%'
       }, process.env.NODE_ENV === "production" ? "" : ";label:StepContentGrid;"),
       children: children
@@ -3400,5 +3526,5 @@ function useResponsiveDirection(_ref3) {
   };
 }
 
-export { getInputStyles as $, ApplyDesignSystemContextOverrides as A, Button as B, CloseIcon$1 as C, DesignSystemAntDConfigProvider as D, DesignSystemEventProviderComponentTypes as E, DesignSystemEventProviderAnalyticsEventTypes as F, useDesignSystemEventComponentCallbacks as G, DesignSystemEventProvider as H, Icon as I, DesignSystemThemeContext as J, DesignSystemContext as K, LoadingState as L, DesignSystemThemeProvider as M, DesignSystemProvider as N, ApplyDesignSystemFlags as O, useAntDConfigProviderContext as P, WithDesignSystemThemeHoc as Q, RestoreAntDDefaultClsPrefix as R, Spinner as S, Typography as T, CursorIcon$1 as U, FaceFrownIcon$1 as V, WarningIcon$1 as W, FaceNeutralIcon$1 as X, FaceSmileIcon$1 as Y, MegaphoneIcon$1 as Z, NewWindowIcon$1 as _, getDarkModePortalStyles as a, LoadingStateContext as a0, getTypographyColor as a1, getBottomOnlyShadowScrollStyles as a2, ColorVars as a3, primitiveColors as a4, ChevronRightIcon$1 as b, useUniqueId as c, useDesignSystemContext as d, CheckIcon$1 as e, Input as f, getAnimationCss as g, getValidationStateColor as h, importantify as i, getShadowScrollStyles as j, DangerIcon$1 as k, LoadingIcon$1 as l, Title as m, AccessibleContainer as n, ChevronLeftIcon$1 as o, DU_BOIS_ENABLE_ANIMATION_CLASSNAME as p, lightColorList as q, getDefaultStyles as r, safex as s, getPrimaryStyles as t, useDesignSystemTheme as u, visuallyHidden as v, getDisabledStyles as w, useDesignSystemFlags as x, Stepper as y, getButtonEmotionStyles as z };
-//# sourceMappingURL=Stepper-839336b1.js.map
+export { NewWindowIcon$1 as $, ApplyDesignSystemContextOverrides as A, Button as B, CloseIcon$1 as C, DesignSystemAntDConfigProvider as D, getDisabledStyles as E, useDesignSystemFlags as F, Stepper as G, getButtonEmotionStyles as H, Icon as I, DesignSystemEventProvider as J, DesignSystemThemeContext as K, LoadingState as L, DesignSystemContext as M, DesignSystemThemeProvider as N, DesignSystemProvider as O, ApplyDesignSystemFlags as P, useAntDConfigProviderContext as Q, RestoreAntDDefaultClsPrefix as R, Spinner as S, Typography as T, WithDesignSystemThemeHoc as U, CursorIcon$1 as V, WarningIcon$1 as W, FaceFrownIcon$1 as X, FaceNeutralIcon$1 as Y, FaceSmileIcon$1 as Z, MegaphoneIcon$1 as _, getDarkModePortalStyles as a, getInputStyles as a0, LoadingStateContext as a1, getTypographyColor as a2, getBottomOnlyShadowScrollStyles as a3, ColorVars as a4, primitiveColors as a5, ChevronRightIcon$1 as b, useUniqueId as c, useDesignSystemContext as d, CheckIcon$1 as e, Input as f, getAnimationCss as g, getValidationStateColor as h, importantify as i, getShadowScrollStyles as j, DangerIcon$1 as k, LoadingIcon$1 as l, Title as m, AccessibleContainer as n, ChevronLeftIcon$1 as o, useDesignSystemEventComponentCallbacks as p, DesignSystemEventProviderComponentTypes as q, DesignSystemEventProviderAnalyticsEventTypes as r, safex as s, useNotifyOnFirstView as t, useDesignSystemTheme as u, visuallyHidden as v, DU_BOIS_ENABLE_ANIMATION_CLASSNAME as w, lightColorList as x, getDefaultStyles as y, getPrimaryStyles as z };
+//# sourceMappingURL=Stepper-ff25c5d1.js.map