@databricks/design-system 1.12.16 → 1.12.17

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

@@ -1,7 +1,9 @@
 import React__default, { useRef, useEffect, createContext, useContext, useMemo, useState, forwardRef, useLayoutEffect, useImperativeHandle, useCallback } from 'react';
 import { jsx, Fragment, jsxs } from '@emotion/react/jsx-runtime';
 import { useTheme, ThemeProvider, css, keyframes } from '@emotion/react';
-import { notification, ConfigProvider, Typography as Typography$1, Button as Button$1, Input as Input$2 } from 'antd';
+import { notification, ConfigProvider, Button as Button$1, Typography as Typography$1 } from 'antd';
+import * as Popover$1 from '@radix-ui/react-popover';
+import { TooltipProvider } from '@radix-ui/react-tooltip';
 import AntDIcon from '@ant-design/icons';
 import _isNil from 'lodash/isNil';
 import _endsWith from 'lodash/endsWith';
@@ -498,7 +500,8 @@ function AccessibleContainer(_ref) {
 
 // Border variables
 const borders = {
-  borderRadiusMd: 4
+  borderRadiusMd: 4,
+  borderRadiusLg: 8
 };
 
 // eslint-disable-next-line import/no-anonymous-default-export
@@ -799,10 +802,14 @@ const lightColorList = {
 
 // Currently these are the same for both light and dark mode, but we may want to change this in the future.
 const branded = {
-  /** For AI components, the top-oriented start color of gradient treatments. */
-  aiGradientStart: '#677FFD',
-  /** For AI components, the bottom-oriented end color of gradient treatments. */
-  aiGradientEnd: '#79BFF1'
+  ai: {
+    /** For AI components, the top-left-oriented start color of gradient treatments. */
+    gradientStart: '#4299E0',
+    /** For AI components, the mid color of gradient treatments. */
+    gradientMid: '#CA42E0',
+    /** For AI components, the bottom-right-oriented end color of gradient treatments. */
+    gradientEnd: '#FF5F46'
+  }
 };
 const darkColors = {
   ...darkColorList,
@@ -878,6 +885,7 @@ const deprecatedSemanticColorsDark = {
 
 // A static list of secondary colors; these are used as a limited palette of color options in component props, i.e. `color="lime"`.
 // TODO: We should split primitive colors into primary and secondary colors, and automatically generate this list.
+
 function getColors(isDarkMode) {
   return {
     ...deprecatedPrimitiveColors,
@@ -886,6 +894,13 @@ function getColors(isDarkMode) {
   };
 }
 
+function getGradients(isDarkMode) {
+  const colors = getColors(isDarkMode);
+  return {
+    aiBorderGradient: `linear-gradient(135deg, ${colors.branded.ai.gradientStart} 20.5%, ${colors.branded.ai.gradientMid} 46.91%, ${colors.branded.ai.gradientEnd} 79.5%)`
+  };
+}
+
 const FONT_SIZE_BASE = 13;
 
 // Less variables that are used by AntD
@@ -922,6 +937,7 @@ function getTheme(isDarkMode) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultOptions;
   return {
     colors: getColors(isDarkMode),
+    gradients: getGradients(isDarkMode),
     spacing: spacing$1,
     general: {
       ...antdGeneralVariables,
@@ -1062,9 +1078,11 @@ const DesignSystemProvider = _ref2 => {
           getPopupContainer,
           virtual: !disableLegacyAntVirtualization
         },
-        children: jsx(DesignSystemContext.Provider, {
-          value: value,
-          children: children
+        children: jsx(TooltipProvider, {
+          children: jsx(DesignSystemContext.Provider, {
+            value: value,
+            children: children
+          })
         })
       })
     })
@@ -1158,9 +1176,35 @@ function useDesignSystemContext() {
   return useContext(DesignSystemContext);
 }
 
-function useDesignSystemFlags() {
-  const context = useDesignSystemContext();
-  return context.flags;
+/**
+ * Provides access to http://go/safex flags from the frontend. Note that this is a temporary
+ * workaround until direct `safex` imports are available.
+ * @param flag The name of the flag to check
+ * @param defaultValue The default value to return if the flag is not set
+ * @returns
+ */
+const safex = (flag, defaultValue) => {
+  // Catching errors here, because we don't have type-safety to ensure
+  // that `__debug__safex`'s API hasn't changed.
+  try {
+    const globalSafex = window.__debug__safex;
+    return globalSafex ? globalSafex(flag, defaultValue) : defaultValue;
+  } catch (e) {
+    return defaultValue;
+  }
+};
+
+const getDebugOutlineStyles = theme => /*#__PURE__*/css({
+  outline: `1px dashed ${theme.isDarkMode ? theme.colors.lime : theme.colors.lime}`,
+  outlineOffset: '2px'
+}, process.env.NODE_ENV === "production" ? "" : ";label:getDebugOutlineStyles;");
+function addDebugOutlineIfEnabled() {
+  return safex('databricks.fe.designsystem.showDebugOutline', false) ? {
+    'data-dubois-show-outline': true
+  } : {};
+}
+function addDebugOutlineStylesIfEnabled(theme) {
+  return safex('databricks.fe.designsystem.showDebugOutline', false) ? getDebugOutlineStyles(theme) : {};
 }
 
 const uniqueId = () => new Date().getTime() + Array(16).fill('').map(() => parseInt((Math.random() * 10).toString())).join('');
@@ -1227,14 +1271,19 @@ const Icon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
           children: jsx("defs", {
             children: jsxs("linearGradient", {
               id: linearGradientId,
+              x1: "0%",
+              y1: "0%",
               x2: "100%",
               y2: "100%",
               children: [jsx("stop", {
-                offset: "0%",
-                stopColor: theme.colors.branded.aiGradientStart
+                offset: "20.5%",
+                stopColor: theme.colors.branded.ai.gradientStart
               }), jsx("stop", {
-                offset: "100%",
-                stopColor: theme.colors.branded.aiGradientEnd
+                offset: "46.91%",
+                stopColor: theme.colors.branded.ai.gradientMid
+              }), jsx("stop", {
+                offset: "79.5%",
+                stopColor: theme.colors.branded.ai.gradientEnd
               })]
             })
           })
@@ -1244,6 +1293,7 @@ const Icon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   } : undefined, [Component, color, linearGradientId, theme]);
   return jsx(DesignSystemAntDConfigProvider, {
     children: jsx(AntDIcon, {
+      ...addDebugOutlineIfEnabled(),
       ref: forwardedRef,
       "aria-hidden": "true",
       css: /*#__PURE__*/css({
@@ -1271,7 +1321,7 @@ function SvgCheckIcon(props) {
     children: jsx("path", {
       fill: "currentColor",
       fillRule: "evenodd",
-      d: "m15.06 3.56-9.53 9.531L1 8.561 2.06 7.5l3.47 3.47L14 2.5l1.06 1.06Z",
+      d: "m15.06 3.56-9.53 9.531L1 8.561 2.06 7.5l3.47 3.47L14 2.5z",
       clipRule: "evenodd"
     })
   });
@@ -1286,58 +1336,6 @@ const CheckIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
 CheckIcon.displayName = 'CheckIcon';
 var CheckIcon$1 = CheckIcon;
 
-function SvgChevronLeftIcon(props) {
-  return jsx("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    viewBox: "0 0 16 16",
-    ...props,
-    children: jsx("path", {
-      fill: "currentColor",
-      fillRule: "evenodd",
-      d: "M7.083 8 10 10.947 8.958 12 5 8l3.958-4L10 5.053 7.083 8Z",
-      clipRule: "evenodd"
-    })
-  });
-}
-const ChevronLeftIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
-  return jsx(Icon, {
-    ref: forwardedRef,
-    ...props,
-    component: SvgChevronLeftIcon
-  });
-});
-ChevronLeftIcon.displayName = 'ChevronLeftIcon';
-var ChevronLeftIcon$1 = ChevronLeftIcon;
-
-function SvgChevronRightIcon(props) {
-  return jsx("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    viewBox: "0 0 16 16",
-    ...props,
-    children: jsx("path", {
-      fill: "currentColor",
-      fillRule: "evenodd",
-      d: "M8.917 8 6 5.053 7.042 4 11 8l-3.958 4L6 10.947 8.917 8Z",
-      clipRule: "evenodd"
-    })
-  });
-}
-const ChevronRightIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
-  return jsx(Icon, {
-    ref: forwardedRef,
-    ...props,
-    component: SvgChevronRightIcon
-  });
-});
-ChevronRightIcon.displayName = 'ChevronRightIcon';
-var ChevronRightIcon$1 = ChevronRightIcon;
-
 function SvgCloseIcon(props) {
   return jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1349,7 +1347,7 @@ function SvgCloseIcon(props) {
     children: jsx("path", {
       fill: "currentColor",
       fillRule: "evenodd",
-      d: "M6.97 8.03 2 3.06 3.06 2l4.97 4.97L13 2l1.06 1.06-4.969 4.97 4.97 4.97L13 14.06 8.03 9.092l-4.97 4.97L2 13l4.97-4.97Z",
+      d: "M6.97 8.03 2 3.06 3.06 2l4.97 4.97L13 2l1.06 1.06-4.969 4.97 4.97 4.97L13 14.06 8.03 9.092l-4.97 4.97L2 13z",
       clipRule: "evenodd"
     })
   });
@@ -1364,42 +1362,6 @@ const CloseIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
 CloseIcon.displayName = 'CloseIcon';
 var CloseIcon$1 = CloseIcon;
 
-function SvgCursorIcon(props) {
-  return jsxs("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    viewBox: "0 0 16 16",
-    ...props,
-    children: [jsx("g", {
-      clipPath: "url(#CursorIcon_svg__a)",
-      children: jsx("path", {
-        fill: "currentColor",
-        fillRule: "evenodd",
-        d: "M1.22 1.22a.75.75 0 0 1 .802-.169l13.5 5.25a.75.75 0 0 1-.043 1.413L9.597 9.597l-1.883 5.882a.75.75 0 0 1-1.413.043l-5.25-13.5a.75.75 0 0 1 .169-.802Zm1.847 1.847 3.864 9.937 1.355-4.233a.75.75 0 0 1 .485-.485l4.233-1.355-9.937-3.864Z",
-        clipRule: "evenodd"
-      })
-    }), jsx("defs", {
-      children: jsx("clipPath", {
-        children: jsx("path", {
-          fill: "#fff",
-          d: "M16 0H0v16h16z"
-        })
-      })
-    })]
-  });
-}
-const CursorIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
-  return jsx(Icon, {
-    ref: forwardedRef,
-    ...props,
-    component: SvgCursorIcon
-  });
-});
-CursorIcon.displayName = 'CursorIcon';
-var CursorIcon$1 = CursorIcon;
-
 function SvgDangerIcon(props) {
   return jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1410,11 +1372,11 @@ function SvgDangerIcon(props) {
     ...props,
     children: [jsx("path", {
       fill: "currentColor",
-      d: "M7.248 10.748a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0ZM8.748 4.998v4h-1.5v-4h1.5Z"
+      d: "M7.248 10.748a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0M8.748 4.998v4h-1.5v-4z"
     }), jsx("path", {
       fill: "currentColor",
       fillRule: "evenodd",
-      d: "m11.533 15.776 4.243-4.243a.75.75 0 0 0 .22-.53v-6.01a.75.75 0 0 0-.22-.53L11.533.22a.75.75 0 0 0-.53-.22h-6.01a.75.75 0 0 0-.53.22L.22 4.462a.75.75 0 0 0-.22.53v6.011c0 .199.079.39.22.53l4.242 4.243c.141.14.332.22.53.22h6.011a.75.75 0 0 0 .53-.22Zm2.963-10.473v5.39l-3.804 3.803H5.303L1.5 10.692V5.303L5.303 1.5h5.39l3.803 3.803Z",
+      d: "m11.533 15.776 4.243-4.243a.75.75 0 0 0 .22-.53v-6.01a.75.75 0 0 0-.22-.53L11.533.22a.75.75 0 0 0-.53-.22h-6.01a.75.75 0 0 0-.53.22L.22 4.462a.75.75 0 0 0-.22.53v6.011c0 .199.079.39.22.53l4.242 4.243c.141.14.332.22.53.22h6.011a.75.75 0 0 0 .53-.22m2.963-10.473v5.39l-3.804 3.803H5.303L1.5 10.692V5.303L5.303 1.5h5.39z",
       clipRule: "evenodd"
     })]
   });
@@ -1429,124 +1391,6 @@ const DangerIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
 DangerIcon.displayName = 'DangerIcon';
 var DangerIcon$1 = DangerIcon;
 
-function SvgFaceFrownIcon(props) {
-  return jsxs("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    viewBox: "0 0 16 16",
-    ...props,
-    children: [jsxs("g", {
-      fill: "currentColor",
-      clipPath: "url(#FaceFrownIcon_svg__a)",
-      children: [jsx("path", {
-        d: "M6 5.25a.75.75 0 0 0 0 1.5h.007a.75.75 0 0 0 0-1.5H6ZM9.25 6a.75.75 0 0 1 .75-.75h.007a.75.75 0 0 1 0 1.5H10A.75.75 0 0 1 9.25 6ZM10.07 11.12a.75.75 0 0 0 1.197-.903l-.001-.001v-.001l-.003-.003-.005-.006-.015-.02a2.95 2.95 0 0 0-.217-.246 4.717 4.717 0 0 0-.627-.546C9.86 9 9.04 8.584 8 8.584s-1.858.416-2.4.81a4.716 4.716 0 0 0-.795.733 2.87 2.87 0 0 0-.048.06l-.015.019-.005.006-.002.003-.031.044.03-.042a.75.75 0 1 0 1.22.875 3.219 3.219 0 0 1 .529-.485c.375-.273.89-.523 1.517-.523.627 0 1.142.25 1.517.523a3.219 3.219 0 0 1 .529.485l.021.025.002.003Z"
-      }), jsx("path", {
-        fillRule: "evenodd",
-        d: "M8 .583a7.417 7.417 0 1 0 0 14.834A7.417 7.417 0 0 0 8 .583ZM2.083 8a5.917 5.917 0 1 1 11.834 0A5.917 5.917 0 0 1 2.083 8Z",
-        clipRule: "evenodd"
-      })]
-    }), jsx("defs", {
-      children: jsx("clipPath", {
-        children: jsx("path", {
-          fill: "#fff",
-          d: "M0 0h16v16H0z"
-        })
-      })
-    })]
-  });
-}
-const FaceFrownIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
-  return jsx(Icon, {
-    ref: forwardedRef,
-    ...props,
-    component: SvgFaceFrownIcon
-  });
-});
-FaceFrownIcon.displayName = 'FaceFrownIcon';
-var FaceFrownIcon$1 = FaceFrownIcon;
-
-function SvgFaceNeutralIcon(props) {
-  return jsxs("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    viewBox: "0 0 16 16",
-    ...props,
-    children: [jsxs("g", {
-      fill: "currentColor",
-      fillRule: "evenodd",
-      clipPath: "url(#FaceNeutralIcon_svg__a)",
-      clipRule: "evenodd",
-      children: [jsx("path", {
-        d: "M8 2.083a5.917 5.917 0 1 0 0 11.834A5.917 5.917 0 0 0 8 2.084ZM.583 8a7.417 7.417 0 1 1 14.834 0A7.417 7.417 0 0 1 .583 8Z"
-      }), jsx("path", {
-        d: "M4.583 10a.75.75 0 0 1 .75-.75h5.334a.75.75 0 1 1 0 1.5H5.333a.75.75 0 0 1-.75-.75ZM5.25 6A.75.75 0 0 1 6 5.25h.007a.75.75 0 0 1 0 1.5H6A.75.75 0 0 1 5.25 6ZM9.25 6a.75.75 0 0 1 .75-.75h.007a.75.75 0 1 1 0 1.5H10A.75.75 0 0 1 9.25 6Z"
-      })]
-    }), jsx("defs", {
-      children: jsx("clipPath", {
-        children: jsx("path", {
-          fill: "#fff",
-          d: "M0 0h16v16H0z"
-        })
-      })
-    })]
-  });
-}
-const FaceNeutralIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
-  return jsx(Icon, {
-    ref: forwardedRef,
-    ...props,
-    component: SvgFaceNeutralIcon
-  });
-});
-FaceNeutralIcon.displayName = 'FaceNeutralIcon';
-var FaceNeutralIcon$1 = FaceNeutralIcon;
-
-function SvgFaceSmileIcon(props) {
-  return jsxs("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    viewBox: "0 0 16 16",
-    ...props,
-    children: [jsxs("g", {
-      fill: "currentColor",
-      clipPath: "url(#FaceSmileIcon_svg__a)",
-      children: [jsx("path", {
-        fillRule: "evenodd",
-        d: "M8 2.083a5.917 5.917 0 1 0 0 11.834A5.917 5.917 0 0 0 8 2.084ZM.583 8a7.417 7.417 0 1 1 14.834 0A7.417 7.417 0 0 1 .583 8Z",
-        clipRule: "evenodd"
-      }), jsx("path", {
-        d: "M4.883 8.733a.75.75 0 0 1 1.048.147l.002.003.021.026a3.216 3.216 0 0 0 .529.485c.375.273.89.523 1.517.523.627 0 1.142-.25 1.517-.523a3.215 3.215 0 0 0 .55-.511.75.75 0 0 1 1.2.9l.029-.042-.03.043-.001.002-.002.002-.005.007-.015.019a3.878 3.878 0 0 1-.217.247c-.144.15-.354.348-.627.546-.54.393-1.359.81-2.399.81s-1.858-.417-2.4-.81a4.716 4.716 0 0 1-.795-.734 2.643 2.643 0 0 1-.048-.059l-.015-.02-.005-.006-.002-.002v-.002h-.002a.75.75 0 0 1 .15-1.05Z"
-      }), jsx("path", {
-        fillRule: "evenodd",
-        d: "M5.25 6A.75.75 0 0 1 6 5.25h.007a.75.75 0 0 1 0 1.5H6A.75.75 0 0 1 5.25 6ZM9.25 6a.75.75 0 0 1 .75-.75h.007a.75.75 0 1 1 0 1.5H10A.75.75 0 0 1 9.25 6Z",
-        clipRule: "evenodd"
-      })]
-    }), jsx("defs", {
-      children: jsx("clipPath", {
-        children: jsx("path", {
-          fill: "#fff",
-          d: "M0 0h16v16H0z"
-        })
-      })
-    })]
-  });
-}
-const FaceSmileIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
-  return jsx(Icon, {
-    ref: forwardedRef,
-    ...props,
-    component: SvgFaceSmileIcon
-  });
-});
-FaceSmileIcon.displayName = 'FaceSmileIcon';
-var FaceSmileIcon$1 = FaceSmileIcon;
-
 function SvgLoadingIcon(props) {
   return jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1558,7 +1402,7 @@ function SvgLoadingIcon(props) {
     children: jsx("path", {
       fill: "currentColor",
       fillRule: "evenodd",
-      d: "M23.212 12a.788.788 0 0 1-.789-.788 9.57 9.57 0 0 0-.757-3.751 9.662 9.662 0 0 0-5.129-5.129 9.587 9.587 0 0 0-3.749-.755.788.788 0 0 1 0-1.577c1.513 0 2.983.296 4.365.882a11.128 11.128 0 0 1 3.562 2.403 11.157 11.157 0 0 1 3.283 7.927.785.785 0 0 1-.786.788Z",
+      d: "M23.212 12a.79.79 0 0 1-.789-.788 9.6 9.6 0 0 0-.757-3.751 9.66 9.66 0 0 0-5.129-5.129 9.6 9.6 0 0 0-3.749-.755.788.788 0 0 1 0-1.577c1.513 0 2.983.296 4.365.882a11.1 11.1 0 0 1 3.562 2.403 11.157 11.157 0 0 1 3.283 7.927.785.785 0 0 1-.786.788",
       clipRule: "evenodd"
     })
   });
@@ -1573,32 +1417,6 @@ const LoadingIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
 LoadingIcon.displayName = 'LoadingIcon';
 var LoadingIcon$1 = LoadingIcon;
 
-function SvgMegaphoneIcon(props) {
-  return jsx("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    viewBox: "0 0 18 18",
-    ...props,
-    children: jsx("path", {
-      fill: "currentColor",
-      fillRule: "evenodd",
-      d: "M16.25 2a.75.75 0 0 0-1.248-.56l-4.287 3.81H4A2.75 2.75 0 0 0 1.25 8v2A2.75 2.75 0 0 0 4 12.75h1.75V16a.75.75 0 0 0 1.5 0v-3.25h3.465l4.287 3.81A.75.75 0 0 0 16.25 16V2Zm-4.752 4.56 3.252-2.89v10.66l-3.252-2.89a.75.75 0 0 0-.498-.19H4c-.69 0-1.25-.56-1.25-1.25V8c0-.69.56-1.25 1.25-1.25h7a.75.75 0 0 0 .498-.19Z",
-      clipRule: "evenodd"
-    })
-  });
-}
-const MegaphoneIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
-  return jsx(Icon, {
-    ref: forwardedRef,
-    ...props,
-    component: SvgMegaphoneIcon
-  });
-});
-MegaphoneIcon.displayName = 'MegaphoneIcon';
-var MegaphoneIcon$1 = MegaphoneIcon;
-
 function SvgNewWindowIcon(props) {
   return jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1609,10 +1427,10 @@ function SvgNewWindowIcon(props) {
     ...props,
     children: [jsx("path", {
       fill: "currentColor",
-      d: "M10 1h5v5h-1.5V3.56L8.53 8.53 7.47 7.47l4.97-4.97H10V1Z"
+      d: "M10 1h5v5h-1.5V3.56L8.53 8.53 7.47 7.47l4.97-4.97H10z"
     }), jsx("path", {
       fill: "currentColor",
-      d: "M1 2.75A.75.75 0 0 1 1.75 2H8v1.5H2.5v10h10V8H14v6.25a.75.75 0 0 1-.75.75H1.75a.75.75 0 0 1-.75-.75V2.75Z"
+      d: "M1 2.75A.75.75 0 0 1 1.75 2H8v1.5H2.5v10h10V8H14v6.25a.75.75 0 0 1-.75.75H1.75a.75.75 0 0 1-.75-.75z"
     })]
   });
 }
@@ -1636,11 +1454,11 @@ function SvgWarningIcon(props) {
     ...props,
     children: [jsx("path", {
       fill: "currentColor",
-      d: "M7.25 10V6.5h1.5V10h-1.5ZM8 12.5A.75.75 0 1 0 8 11a.75.75 0 0 0 0 1.5Z"
+      d: "M7.25 10V6.5h1.5V10zM8 12.5A.75.75 0 1 0 8 11a.75.75 0 0 0 0 1.5"
     }), jsx("path", {
       fill: "currentColor",
       fillRule: "evenodd",
-      d: "M8 1a.75.75 0 0 1 .649.374l7.25 12.5A.75.75 0 0 1 15.25 15H.75a.75.75 0 0 1-.649-1.126l7.25-12.5A.75.75 0 0 1 8 1Zm0 2.245L2.052 13.5h11.896L8 3.245Z",
+      d: "M8 1a.75.75 0 0 1 .649.374l7.25 12.5A.75.75 0 0 1 15.25 15H.75a.75.75 0 0 1-.649-1.126l7.25-12.5A.75.75 0 0 1 8 1m0 2.245L2.052 13.5h11.896z",
       clipRule: "evenodd"
     })]
   });
@@ -1655,402 +1473,169 @@ const WarningIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
 WarningIcon.displayName = 'WarningIcon';
 var WarningIcon$1 = WarningIcon;
 
-const {
-  Text: AntDText$1
-} = Typography$1;
-function getTextEmotionStyles$1(theme, props) {
-  return /*#__PURE__*/css({
-    '&&': {
-      display: 'block',
-      fontSize: theme.typography.fontSizeSm,
-      lineHeight: theme.typography.lineHeightSm,
-      color: theme.colors.textSecondary,
-      ...(props.withoutMargins && {
-        '&&': {
-          marginTop: 0,
-          marginBottom: 0
-        }
-      })
-    }
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getTextEmotionStyles;");
-}
-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
-    })
-  });
-}
-
-const getLinkStyles$1 = (theme, clsPrefix) => {
-  const classTypography = `.${clsPrefix}-typography`;
-  const styles = {
-    [`&${classTypography}, &${classTypography}:focus`]: {
-      color: theme.colors.actionTertiaryTextDefault
-    },
-    [`&${classTypography}:hover, &${classTypography}:hover .anticon`]: {
-      color: theme.colors.actionTertiaryTextHover,
-      textDecoration: 'underline'
-    },
-    [`&${classTypography}:active, &${classTypography}:active .anticon`]: {
-      color: theme.colors.actionTertiaryTextPress,
-      textDecoration: 'underline'
-    },
-    [`&${classTypography}:focus-visible`]: {
-      textDecoration: 'underline'
-    },
-    '.anticon': {
-      fontSize: 12,
-      verticalAlign: 'baseline'
-    }
-  };
-  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getLinkStyles;");
+const DefaultDesignSystemEventSuppressInteractionContextValue = {
+  suppressAnalyticsStartInteraction: false
 };
-const getEllipsisNewTabLinkStyles = () => {
-  const styles = {
-    paddingRight: 'calc(2px + 1em)',
-    // 1em for icon
-    position: 'relative'
-  };
-  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getEllipsisNewTabLinkStyles;");
+const DesignSystemEventSuppressInteractionTrueContextValue = {
+  suppressAnalyticsStartInteraction: true
 };
-const getIconStyles = theme => {
-  const styles = {
-    marginLeft: 2,
-    color: theme.colors.actionTertiaryTextDefault
-  };
-  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getIconStyles;");
+const DesignSystemEventSuppressInteractionProviderContext = /*#__PURE__*/React__default.createContext(DefaultDesignSystemEventSuppressInteractionContextValue);
+
+/**
+ * This gets the event suppress interaction provider, is used to suppress the start interaction for analytics events.
+ *
+ * @returns DesignSystemEventSuppressInteractionContextType
+ */
+const useDesignSystemEventSuppressInteractionContext = () => {
+  return useContext(DesignSystemEventSuppressInteractionProviderContext);
 };
-const getEllipsisIconStyles = useNewIcons => {
-  const styles = {
-    position: 'absolute',
-    right: 0,
-    bottom: 0,
-    top: 0,
-    display: 'flex',
-    alignItems: 'center',
-    ...(useNewIcons && {
-      fontSize: 12
-    })
-  };
-  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getEllipsisIconStyles;");
+
+let DesignSystemEventProviderComponentTypes = /*#__PURE__*/function (DesignSystemEventProviderComponentTypes) {
+  DesignSystemEventProviderComponentTypes["Alert"] = "alert";
+  DesignSystemEventProviderComponentTypes["Banner"] = "banner";
+  DesignSystemEventProviderComponentTypes["Button"] = "button";
+  DesignSystemEventProviderComponentTypes["Checkbox"] = "checkbox";
+  DesignSystemEventProviderComponentTypes["DialogCombobox"] = "dialog_combobox";
+  DesignSystemEventProviderComponentTypes["DropdownMenuCheckboxItem"] = "dropdown_menu_checkbox_item";
+  DesignSystemEventProviderComponentTypes["DropdownMenuItem"] = "dropdown_menu_item";
+  DesignSystemEventProviderComponentTypes["DropdownMenuRadioGroup"] = "dropdown_menu_radio_group";
+  DesignSystemEventProviderComponentTypes["Input"] = "input";
+  DesignSystemEventProviderComponentTypes["LegacySelect"] = "legacy_select";
+  DesignSystemEventProviderComponentTypes["Modal"] = "modal";
+  DesignSystemEventProviderComponentTypes["Notification"] = "notification";
+  DesignSystemEventProviderComponentTypes["Pagination"] = "pagination";
+  DesignSystemEventProviderComponentTypes["PillControl"] = "pill_control";
+  DesignSystemEventProviderComponentTypes["RadioGroup"] = "radio_group";
+  DesignSystemEventProviderComponentTypes["SegmentedControlGroup"] = "segmented_control_group";
+  DesignSystemEventProviderComponentTypes["SimpleSelect"] = "simple_select";
+  DesignSystemEventProviderComponentTypes["Switch"] = "switch";
+  DesignSystemEventProviderComponentTypes["TabsV2"] = "tabs";
+  DesignSystemEventProviderComponentTypes["Tag"] = "tag";
+  DesignSystemEventProviderComponentTypes["TextArea"] = "text_area";
+  DesignSystemEventProviderComponentTypes["ToggleButton"] = "toggle_button";
+  DesignSystemEventProviderComponentTypes["TypographyLink"] = "typography_link";
+  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 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'
-  };
-  const linkProps = openInNewTab ? {
-    ...restProps,
-    ...newTabProps
-  } : {
-    ...restProps
-  };
-  const linkStyles = props.ellipsis && openInNewTab ? [getLinkStyles$1(theme, classNamePrefix), getEllipsisNewTabLinkStyles()] : getLinkStyles$1(theme, classNamePrefix);
-  const iconStyles = props.ellipsis ? [getIconStyles(theme), getEllipsisIconStyles()] : getIconStyles(theme);
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsxs(Typography$1.Link, {
-      "aria-disabled": linkProps.disabled,
-      css: linkStyles,
-      ref: ref,
-      ...linkProps,
-      ...dangerouslySetAntdProps,
-      children: [children, openInNewTab ? jsx(NewWindowIcon$1, {
-        css: iconStyles,
-        ...newTabProps
-      }) : null]
-    })
-  });
-});
+const DefaultEmptyCallbacks = {
+  callback: () => {}
+};
+const DesignSystemEventProviderContext = /*#__PURE__*/React__default.createContext(DefaultEmptyCallbacks);
 
-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 {
-    theme
-  } = useDesignSystemTheme();
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(AntDParagraph, {
-      ...props,
-      className: props.className,
-      css: getParagraphEmotionStyles(theme, userProps),
-      ...dangerouslySetAntdProps
-    })
-  });
-}
+/**
+ * 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);
+};
 
-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
+/**
+ * NOTE: This is not suggested for direct usage from engineers, and should emit your own events.
+ * See https://databricks.atlassian.net/wiki/spaces/UN/pages/2533556277/Usage+Logging+in+UI#Send-usage-logging-from-UI for more details.
+ *
+ * This gets the event provider component event type callbacks.
+ * If context & componentId are not undefined, then it will check if the event is in analyticsEvents or the default analyticsEvents for that component.
+ * If the context or componentId are undefined, then the expected behavior is to not emit any events.
+ *
+ * @returns Object of event callbacks
+ */
+const useDesignSystemEventComponentCallbacks = _ref => {
+  let {
+    componentType,
+    componentId,
+    analyticsEvents,
+    valueHasNoPii,
+    shouldStartInteraction
+  } = _ref;
+  const context = useDesignSystemEventProviderContext();
+  const suppressInteractionContext = useDesignSystemEventSuppressInteractionContext();
+  // If shouldStartInteraction is explicitly true or has no suppression when shouldStartInteraction
+  // is not defined for an onClick event, then it will start the interaction
+  const shouldStartInteractionComplete = useMemo(() => shouldStartInteraction || shouldStartInteraction === undefined && !suppressInteractionContext.suppressAnalyticsStartInteraction && shouldTriggerCallback(DesignSystemEventProviderAnalyticsEventTypes.OnClick, analyticsEvents), [suppressInteractionContext, shouldStartInteraction, analyticsEvents]);
+  const callbacks = useMemo(() => {
+    if (context === DefaultEmptyCallbacks || componentId === undefined) {
+      return {
+        onClick: () => {},
+        onValueChange: () => {},
+        onView: () => {}
+      };
     }
-  }, 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 {
-  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
+    return {
+      onClick: event => {
+        if (shouldTriggerCallback(DesignSystemEventProviderAnalyticsEventTypes.OnClick, analyticsEvents)) {
+          context.callback({
+            eventType: DesignSystemEventProviderAnalyticsEventTypes.OnClick,
+            componentType,
+            componentId,
+            value: undefined,
+            shouldStartInteraction: shouldStartInteractionComplete,
+            event
+          });
         }
-      }, 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
+      },
+      onValueChange: value => {
+        if (shouldTriggerCallback(DesignSystemEventProviderAnalyticsEventTypes.OnValueChange, analyticsEvents)) {
+          context.callback({
+            eventType: DesignSystemEventProviderAnalyticsEventTypes.OnValueChange,
+            componentType,
+            componentId,
+            value: valueHasNoPii ? value : undefined,
+            shouldStartInteraction: shouldStartInteractionComplete
+          });
         }
-      }, 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
+      },
+      onView: () => {
+        if (shouldTriggerCallback(DesignSystemEventProviderAnalyticsEventTypes.OnView, analyticsEvents)) {
+          context.callback({
+            eventType: DesignSystemEventProviderAnalyticsEventTypes.OnView,
+            componentType,
+            componentId,
+            value: undefined,
+            shouldStartInteraction: shouldStartInteractionComplete
+          });
         }
-      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
-  }
-}
-function getTitleEmotionStyles(theme, props) {
-  return /*#__PURE__*/css(getLevelStyles(theme, props), {
-    '&&': {
-      color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
-    },
-    '& > .anticon': {
-      verticalAlign: 'middle'
-    }
-  }, props.withoutMargins && {
-    '&&': {
-      marginTop: '0 !important',
-      // override general styling
-      marginBottom: '0 !important' // override general styling
-    }
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getTitleEmotionStyles;");
-}
-function Title(userProps) {
-  const {
-    dangerouslySetAntdProps,
-    withoutMargins,
-    color,
-    ...props
-  } = userProps;
-  const {
-    theme
-  } = useDesignSystemTheme();
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(AntDTitle, {
-      ...props,
-      className: props.className,
-      css: getTitleEmotionStyles(theme, userProps),
-      ...dangerouslySetAntdProps
-    })
-  });
-}
+      }
+    };
+  }, [context, componentId, analyticsEvents, componentType, valueHasNoPii, shouldStartInteractionComplete]);
+  return callbacks;
+};
 
-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;
-})();
+/**
+ * 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
+  });
+}
 
 function getDefaultStyles(theme) {
   let loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
@@ -2096,7 +1681,7 @@ function getPrimaryStyles(theme) {
     }
   };
 }
-function getLinkStyles(theme) {
+function getLinkStyles$1(theme) {
   const defaultStyles = {
     backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
     borderColor: theme.colors.actionTertiaryBackgroundDefault,
@@ -2166,26 +1751,49 @@ function getSecondaryDangerStyles(theme) {
     }
   };
 }
-function getDisabledStyles(theme) {
+function getDisabledDefaultStyles(theme) {
   const defaultStyles = {
-    backgroundColor: theme.colors.actionDisabledBackground,
-    borderColor: 'transparent',
+    backgroundColor: 'transparent',
+    borderColor: theme.colors.actionDisabledBorder,
     color: theme.colors.actionDisabledText
   };
   return {
     ...defaultStyles,
     '&:hover': {
-      backgroundColor: theme.colors.actionDisabledBackground,
-      borderColor: 'transparent',
+      backgroundColor: 'transparent',
+      borderColor: theme.colors.actionDisabledBorder,
       color: theme.colors.actionDisabledText
     },
     '&:active': {
-      backgroundColor: theme.colors.actionDisabledBackground,
-      borderColor: 'transparent',
+      backgroundColor: 'transparent',
+      borderColor: theme.colors.actionDisabledBorder,
       color: theme.colors.actionDisabledText
     }
   };
 }
+function getDisabledPrimaryStyles(theme) {
+  const defaultStyles = {
+    backgroundColor: theme.colors.actionDisabledBorder,
+    borderColor: 'transparent',
+    color: theme.colors.actionPrimaryTextDefault
+  };
+  return {
+    ...defaultStyles,
+    '&:hover': {
+      backgroundColor: theme.colors.actionDisabledBorder,
+      borderColor: 'transparent',
+      color: theme.colors.actionPrimaryTextDefault
+    },
+    '&:active': {
+      backgroundColor: theme.colors.actionDisabledBorder,
+      borderColor: 'transparent',
+      color: theme.colors.actionPrimaryTextDefault
+    }
+  };
+}
+function getDisabledErrorStyles(theme) {
+  return getDisabledPrimaryStyles(theme);
+}
 function getDisabledTertiaryStyles(theme) {
   const defaultStyles = {
     backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
@@ -2206,108 +1814,25 @@ function getDisabledTertiaryStyles(theme) {
     }
   };
 }
-
-let DesignSystemEventProviderComponentTypes = /*#__PURE__*/function (DesignSystemEventProviderComponentTypes) {
-  DesignSystemEventProviderComponentTypes["Banner"] = "banner";
-  DesignSystemEventProviderComponentTypes["Button"] = "button";
-  DesignSystemEventProviderComponentTypes["Input"] = "input";
-  DesignSystemEventProviderComponentTypes["Modal"] = "modal";
-  return DesignSystemEventProviderComponentTypes;
-}({});
-let DesignSystemEventProviderAnalyticsEventTypes = /*#__PURE__*/function (DesignSystemEventProviderAnalyticsEventTypes) {
-  DesignSystemEventProviderAnalyticsEventTypes["OnClick"] = "onClick";
-  DesignSystemEventProviderAnalyticsEventTypes["OnView"] = "onView";
-  DesignSystemEventProviderAnalyticsEventTypes["OnValueChange"] = "onValueChange";
-  return DesignSystemEventProviderAnalyticsEventTypes;
-}({});
-const shouldTriggerCallback = (eventType, analyticsEvents) => {
-  return analyticsEvents.includes(eventType);
-};
-const DefaultEmptyCallbacks = {
-  callback: () => {}
-};
-const DesignSystemEventProviderContext = /*#__PURE__*/React__default.createContext(DefaultEmptyCallbacks);
-
-/**
- * This gets the event provider, which is used to pass callbacks to the design system for events such as onClick, onView, and onValueChange.
- * If the value is undefined, then the expected behavior is to not emit any events.
- *
- * @returns DesignSystemEventProviderContextType
- */
-const useDesignSystemEventProviderContext = () => {
-  return useContext(DesignSystemEventProviderContext);
-};
-
-/**
- * NOTE: This is not suggested for direct usage from engineers, and should emit your own events.
- * See https://databricks.atlassian.net/wiki/spaces/UN/pages/2533556277/Usage+Logging+in+UI#Send-usage-logging-from-UI for more details.
- *
- * This gets the event provider component event type callbacks.
- * If context & componentId are not undefined, then it will check if the event is in analyticsEvents or the default analyticsEvents for that component.
- * If the context or componentId are undefined, then the expected behavior is to not emit any events.
- *
- * @returns Object of event callbacks
- */
-const useDesignSystemEventComponentCallbacks = _ref => {
-  let {
-    componentType,
-    componentId,
-    analyticsEvents
-  } = _ref;
-  const context = useDesignSystemEventProviderContext();
-  const callbacks = useMemo(() => {
-    if (context === DefaultEmptyCallbacks || componentId === undefined) {
-      return {
-        onClick: () => {},
-        onValueChange: () => {},
-        onView: () => {}
-      };
+function getDisabledSplitButtonStyles(theme) {
+  const defaultStyles = {
+    backgroundColor: theme.colors.actionDisabledBorder,
+    borderColor: theme.colors.actionDisabledBorder,
+    color: theme.colors.actionPrimaryTextDefault
+  };
+  return {
+    ...defaultStyles,
+    '&:hover': {
+      backgroundColor: theme.colors.actionDisabledBorder,
+      borderColor: theme.colors.actionDisabledBorder,
+      color: theme.colors.actionPrimaryTextDefault
+    },
+    '&:active': {
+      backgroundColor: theme.colors.actionDisabledBorder,
+      borderColor: theme.colors.actionDisabledBorder,
+      color: theme.colors.actionPrimaryTextDefault
     }
-    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
@@ -2443,30 +1968,6 @@ const Spinner = _ref => {
   );
 };
 
-/**
- * Provides access to http://go/safex flags from the frontend. Note that this is a temporary
- * workaround until direct `safex` imports are available.
- * @param flag The name of the flag to check
- * @param defaultValue The default value to return if the flag is not set
- * @returns
- */
-const safex = (flag, defaultValue) => {
-  // Catching errors here, because we don't have type-safety to ensure
-  // that `__debug__safex`'s API hasn't changed.
-  try {
-    const globalSafex = window.__debug__safex;
-    return globalSafex ? globalSafex(flag, defaultValue) : defaultValue;
-  } catch (e) {
-    return defaultValue;
-  }
-};
-
-function addDebugOutlineIfEnabled() {
-  return safex('databricks.fe.designsystem.showDebugOutline', false) ? {
-    'data-dubois-show-outline': true
-  } : {};
-}
-
 function getEndIconClsName(theme) {
   return `${theme.general.iconfontCssPrefix}-btn-end-icon`;
 }
@@ -2481,7 +1982,6 @@ const getButtonEmotionStyles = _ref => {
     enableAnimation,
     size,
     type,
-    isFlex,
     useFocusPseudoClass,
     forceIconStyles,
     danger
@@ -2508,30 +2008,12 @@ const getButtonEmotionStyles = _ref => {
   };
   const iconCss = {
     fontSize: theme.general.iconFontSize,
-    ...(!isFlex && {
-      // verticalAlign used by AntD to move icon and label to center
-      // TODO(schs): Try to move buttons to flexbox to solve this. Main problem is that flex-inline and inline-block
-      //  behave differently (vertically align of multiple buttons is off). See https://codepen.io/qfactor/pen/JXVzBe
-      verticalAlign: -4,
-      ...(onlyIcon && {
-        verticalAlign: -3
-      }),
-      // verticalAlign used by AntD to move icon and label to center
-      // TODO(schs): Try to move buttons to flexbox to solve this. Main problem is that flex-inline and inline-block
-      //  behave differently (vertically align of multiple buttons is off). See https://codepen.io/qfactor/pen/JXVzBe
-      // Need to make sure not to apply this to regular buttons as it will offset the icons
-      ...(!onlyIcon && {
-        verticalAlign: -3
-      })
-    }),
     lineHeight: 0,
     ...(size === 'small' && {
       lineHeight: theme.typography.lineHeightSm,
+      height: 16,
       ...((onlyIcon || forceIconStyles) && {
-        fontSize: 16,
-        ...(isFlex && {
-          height: 16
-        })
+        fontSize: 16
       })
     })
   };
@@ -2543,12 +2025,10 @@ const getButtonEmotionStyles = _ref => {
     lineHeight: theme.typography.lineHeightBase,
     boxShadow: 'none',
     height: theme.general.heightSm,
-    ...(isFlex && {
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      verticalAlign: 'middle'
-    }),
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    verticalAlign: 'middle',
     ...(!onlyIcon && !forceIconStyles && {
       '&&': {
         padding: '4px 12px',
@@ -2581,7 +2061,7 @@ const getButtonEmotionStyles = _ref => {
       ...getPrimaryStyles(theme)
     },
     [`&${classLink}`]: {
-      ...getLinkStyles(theme),
+      ...getLinkStyles$1(theme),
       ...(type === 'link' && {
         padding: 'unset',
         height: 'auto',
@@ -2598,8 +2078,19 @@ const getButtonEmotionStyles = _ref => {
     [`&${classDangerous}`]: {
       ...getSecondaryDangerStyles(theme)
     },
+    [`&[disabled]`]: {
+      ...getDisabledDefaultStyles(theme)
+    },
+    [`&${classLink}:disabled`]: {
+      ...getDisabledTertiaryStyles(theme)
+    },
+    [`&${classDangerous}:disabled`]: {
+      ...getDisabledErrorStyles(theme)
+    },
+    [`&${classPrimary}:disabled`]: {
+      ...getDisabledPrimaryStyles(theme)
+    },
     [`&[disabled], &${classDangerous}:disabled`]: {
-      ...getDisabledStyles(theme),
       ...((onlyIcon || forceIconStyles) && {
         backgroundColor: 'transparent',
         '&:hover': {
@@ -2628,10 +2119,6 @@ const getButtonEmotionStyles = _ref => {
           // This would break vertical centering of loading circle when onlyIcon is true
           position: 'absolute'
         }),
-        ...(!isFlex && !forceIconStyles && {
-          // Normally we'd do `transform: translateX(-50%)` but `antd` crushes that with injected inline `style`.
-          left: 'calc(50% - 7px)'
-        }),
         // Re-enable animation for the loading spinner, since it can be disabled by the global animation CSS.
         svg: {
           animationDuration: '1s !important'
@@ -2640,7 +2127,6 @@ const getButtonEmotionStyles = _ref => {
       [`& > ${clsLoadingIcon} .anticon`]: {
         paddingRight: 0 // to horizontally center icon
       },
-
       [`> :not(${clsLoadingIcon})`]: {
         // Hide all content except loading icon
         opacity: 0,
@@ -2702,7 +2188,7 @@ const getButtonEmotionStyles = _ref => {
       },
       ...(isAnchor && {
         lineHeight: `${theme.general.heightSm}px`,
-        ...getLinkStyles(theme),
+        ...getLinkStyles$1(theme),
         '&:disabled': {
           color: theme.colors.actionDisabledText
         }
@@ -2788,26 +2274,28 @@ const Button = /* #__PURE__ */(() => {
       dangerouslyUseFocusPseudoClass,
       dangerouslyAppendWrapperCss,
       componentId,
-      analyticsEvents,
+      analyticsEvents: analyticsEventsInput,
+      shouldStartInteraction,
       ...props
     } = _ref2;
     const {
       theme,
       classNamePrefix
     } = useDesignSystemTheme();
-    const {
-      USE_FLEX_BUTTON: flexOverride
-    } = useDesignSystemFlags();
+    const analyticsEvents = useMemo(() => analyticsEventsInput !== null && analyticsEventsInput !== void 0 ? analyticsEventsInput : [DesignSystemEventProviderAnalyticsEventTypes.OnClick], [analyticsEventsInput]);
     const eventContext = useDesignSystemEventComponentCallbacks({
       componentType: DesignSystemEventProviderComponentTypes.Button,
       componentId,
-      analyticsEvents: analyticsEvents !== null && analyticsEvents !== void 0 ? analyticsEvents : [DesignSystemEventProviderAnalyticsEventTypes.OnClick]
+      analyticsEvents,
+      shouldStartInteraction
     });
-    const flexSafex = safex('databricks.fe.designsystem.useFlexButtonStyles', false);
-    const isFlex = flexOverride || flexSafex;
     const clsEndIcon = getEndIconClsName(theme);
     const loadingCls = `${classNamePrefix}-btn-loading-icon`;
-    const buttonRef = useRef(null);
+    const {
+      elementRef: buttonRef
+    } = useNotifyOnFirstView({
+      onView: eventContext.onView
+    });
     useImperativeHandle(ref, () => buttonRef.current);
 
     // Needed to keep backwards compatibility and support existing unit tests
@@ -2821,13 +2309,13 @@ const Button = /* #__PURE__ */(() => {
           buttonRef.current.classList.remove(`${classNamePrefix}-btn-loading`);
         }
       }
-    }, [loading, classNamePrefix]);
+    }, [loading, classNamePrefix, buttonRef]);
     const iconOnly = Boolean((props.icon || endIcon) && !children);
     const handleClick = event => {
       if (loading) {
         return;
       }
-      eventContext.onClick();
+      eventContext.onClick(event);
       onClick === null || onClick === void 0 || onClick(event);
     };
     const loadingSpinner = jsx(Spinner, {
@@ -2865,7 +2353,6 @@ const Button = /* #__PURE__ */(() => {
           enableAnimation: theme.options.enableAnimation,
           size: size || 'middle',
           type,
-          isFlex,
           forceIconStyles: Boolean(dangerouslySetForceIconStyles),
           useFocusPseudoClass: Boolean(dangerouslyUseFocusPseudoClass)
         }),
@@ -2878,19 +2365,15 @@ const Button = /* #__PURE__ */(() => {
         children: children && jsxs("span", {
           style: {
             visibility: loading ? 'hidden' : 'visible',
-            ...(isFlex && {
-              display: 'inline-flex',
-              alignItems: 'center'
-            }),
+            display: 'inline-flex',
+            alignItems: 'center',
             ...dangerouslyAppendWrapperCss
           },
           children: [children, endIcon && jsx("span", {
             className: clsEndIcon,
             style: {
-              ...(isFlex && {
-                display: 'inline-flex',
-                alignItems: 'center'
-              })
+              display: 'inline-flex',
+              alignItems: 'center'
             },
             children: endIcon
           })]
@@ -2907,624 +2390,600 @@ const Button = /* #__PURE__ */(() => {
   return Button;
 })();
 
-const getInputGroupStyling = (clsPrefix, theme) => {
-  const inputClass = `.${clsPrefix}-input`;
-  const buttonClass = `.${clsPrefix}-btn`;
+const Root = Popover$1.Root; // Behavioral component only
+const Anchor = Popover$1.Anchor; // Behavioral component only
+
+const Content = /*#__PURE__*/forwardRef(function Content(_ref, ref) {
+  let {
+    children,
+    minWidth = 220,
+    maxWidth,
+    ...props
+  } = _ref;
+  const {
+    getPopupContainer
+  } = useDesignSystemContext();
+  return jsx(Popover$1.Portal, {
+    container: getPopupContainer && getPopupContainer(),
+    children: jsx(Popover$1.Content, {
+      ...addDebugOutlineIfEnabled(),
+      ref: ref,
+      css: [contentStyles, {
+        minWidth,
+        maxWidth
+      }, process.env.NODE_ENV === "production" ? "" : ";label:Content;"],
+      sideOffset: 4,
+      ...props,
+      children: children
+    })
+  });
+});
+const Trigger = /*#__PURE__*/forwardRef(function Trigger(_ref2, ref) {
+  let {
+    children,
+    ...props
+  } = _ref2;
+  return jsx(Popover$1.Trigger, {
+    ...addDebugOutlineIfEnabled(),
+    ref: ref,
+    ...props,
+    children: children
+  });
+});
+const Close = /*#__PURE__*/forwardRef(function Close(_ref3, ref) {
+  let {
+    children,
+    ...props
+  } = _ref3;
+  return jsx(Popover$1.Close, {
+    ref: ref,
+    ...props,
+    children: children
+  });
+});
+const Arrow = /*#__PURE__*/forwardRef(function Arrow(_ref4, ref) {
+  let {
+    children,
+    ...props
+  } = _ref4;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(Popover$1.Arrow, {
+    css: /*#__PURE__*/css({
+      fill: theme.colors.backgroundPrimary,
+      stroke: theme.colors.borderDecorative,
+      strokeDashoffset: -CONSTANTS.arrowBottomLength(),
+      strokeDasharray: CONSTANTS.arrowBottomLength() + 2 * CONSTANTS.arrowSide(),
+      strokeWidth: CONSTANTS.arrowStrokeWidth(),
+      // TODO: This is a temporary fix for the alignment of the Arrow;
+      // Radix has changed the implementation for v1.0.0 (uses floating-ui)
+      // which has new behaviors for alignment that we don't want. Generally
+      // we need to fix the arrow to always be aligned to the left of the menu (with
+      // offset equal to border radius)
+      position: 'relative',
+      top: -1
+    }, process.env.NODE_ENV === "production" ? "" : ";label:Arrow;"),
+    ref: ref,
+    width: 12,
+    height: 6,
+    ...props,
+    children: children
+  });
+});
+
+// CONSTANTS
+const CONSTANTS = {
+  arrowBottomLength() {
+    // The built in arrow is a polygon: 0,0 30,0 15,10
+    return 30;
+  },
+  arrowHeight() {
+    return 10;
+  },
+  arrowSide() {
+    return 2 * (this.arrowHeight() ** 2 * 2) ** 0.5;
+  },
+  arrowStrokeWidth() {
+    // This is eyeballed b/c relative to the svg viewbox coordinate system
+    return 2;
+  }
+};
+const popoverContentStyles = theme => ({
+  backgroundColor: theme.colors.backgroundPrimary,
+  color: theme.colors.textPrimary,
+  lineHeight: theme.typography.lineHeightBase,
+  border: `1px solid ${theme.colors.borderDecorative}`,
+  borderRadius: theme.borders.borderRadiusMd,
+  padding: `${theme.spacing.sm}px`,
+  boxShadow: theme.general.shadowLow,
+  userSelect: 'none',
+  zIndex: theme.options.zIndexBase + 30,
+  ...getDarkModePortalStyles(theme),
+  a: importantify({
+    color: theme.colors.actionTertiaryTextDefault,
+    cursor: 'default',
+    '&:hover, &:focus': {
+      color: theme.colors.actionTertiaryTextHover
+    }
+  }),
+  '&:focus-visible': {
+    outlineStyle: 'solid',
+    outlineWidth: '2px',
+    outlineOffset: '1px',
+    outlineColor: theme.colors.primary
+  }
+});
+const contentStyles = theme => ({
+  ...popoverContentStyles(theme)
+});
+
+var Popover = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Anchor: Anchor,
+  Arrow: Arrow,
+  Close: Close,
+  Content: Content,
+  Root: Root,
+  Trigger: Trigger
+});
+
+const {
+  Text: AntDText$1
+} = Typography$1;
+function getTextEmotionStyles$1(theme, props) {
   return /*#__PURE__*/css({
-    display: 'inline-flex !important',
-    width: 'auto',
-    [`& > ${inputClass}`]: {
-      flexGrow: 1,
-      '&:disabled': {
-        border: 'none',
-        '&:hover': {
-          borderRight: `1px solid ${theme.colors.actionDisabledText} !important`
+    '&&': {
+      display: 'block',
+      fontSize: theme.typography.fontSizeSm,
+      lineHeight: theme.typography.lineHeightSm,
+      color: theme.colors.textSecondary,
+      ...(props.withoutMargins && {
+        '&&': {
+          marginTop: 0,
+          marginBottom: 0
         }
-      },
-      '&[data-validation]': {
-        marginRight: 0
-      }
-    },
-    [`& > ${buttonClass} > span`]: {
-      verticalAlign: 'middle'
-    },
-    [`& > ${buttonClass}:disabled, & > ${buttonClass}:disabled:hover`]: {
-      borderLeft: `1px solid ${theme.colors.actionDisabledText} !important`
+      })
     }
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getInputGroupStyling;");
-};
-const Group = _ref => {
-  let {
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getTextEmotionStyles;");
+}
+function Hint(userProps) {
+  const {
     dangerouslySetAntdProps,
-    dangerouslyAppendEmotionCSS,
-    compact = true,
+    bold,
+    withoutMargins,
+    color,
     ...props
-  } = _ref;
+  } = userProps;
   const {
-    classNamePrefix,
     theme
   } = useDesignSystemTheme();
   return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(Input$2.Group, {
-      css: [getInputGroupStyling(classNamePrefix, theme), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Group;"],
-      compact: compact,
+    children: jsx(AntDText$1, {
+      ...addDebugOutlineIfEnabled(),
       ...props,
+      css: getTextEmotionStyles$1(theme, userProps),
       ...dangerouslySetAntdProps
     })
   });
-};
+}
 
-/**
- * A React custom hook that allows a callback function to be executed exactly once until it is explicitly reset.
- *
- * Usage:
- *
- * const originalCallback = () => { console.log('originalCallback'); }
- * const { callbackOnceUntilReset, reset } = useCallbackOnceUntilReset(originalCallback);
- *
- * // To execute the callback
- * callbackOnceUntilReset(); // Prints 'originalCallback'
- * callbackOnceUntilReset(); // No effect for further calls
- * reset();
- * callbackOnceUntilReset(); // Prints 'originalCallback' again
- */
-const useCallbackOnceUntilReset = callback => {
-  const canTriggerRef = useRef(true);
-  const reset = useCallback(() => {
-    canTriggerRef.current = true;
-  }, []);
-  const callbackOnceUntilReset = useCallback(() => {
-    if (canTriggerRef.current) {
-      callback();
-      canTriggerRef.current = false;
+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'
     }
-  }, [callback]);
-  return {
-    callbackOnceUntilReset,
-    reset
   };
+  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getLinkStyles;");
 };
-
-const getInputStyles = (clsPrefix, theme, _ref, _ref2) => {
+const getEllipsisNewTabLinkStyles = () => {
+  const styles = {
+    paddingRight: 'calc(2px + 1em)',
+    // 1em for icon
+    position: 'relative'
+  };
+  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getEllipsisNewTabLinkStyles;");
+};
+const getIconStyles = theme => {
+  const styles = {
+    marginLeft: 4,
+    color: theme.colors.actionTertiaryTextDefault,
+    position: 'relative',
+    top: '1px'
+  };
+  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getIconStyles;");
+};
+const getEllipsisIconStyles = useNewIcons => {
+  const styles = {
+    position: 'absolute',
+    right: 0,
+    bottom: 0,
+    top: 0,
+    display: 'flex',
+    alignItems: 'center',
+    ...(useNewIcons && {
+      fontSize: 12
+    })
+  };
+  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getEllipsisIconStyles;");
+};
+const Link = /*#__PURE__*/forwardRef(function Link(_ref, ref) {
   let {
-    validationState
+    dangerouslySetAntdProps,
+    componentId,
+    analyticsEvents,
+    onClick,
+    ...props
   } = _ref;
-  let {
-    useTransparent = false,
-    useFocusWithin = false
-  } = _ref2;
-  const inputClass = `.${clsPrefix}-input`;
-  const affixClass = `.${clsPrefix}-input-affix-wrapper`;
-  const affixClassFocused = `.${clsPrefix}-input-affix-wrapper-focused`;
-  const clearIcon = `.${clsPrefix}-input-clear-icon`;
-  const prefixIcon = `.${clsPrefix}-input-prefix`;
-  const suffixIcon = `.${clsPrefix}-input-suffix`;
-  const validationColor = getValidationStateColor(theme, validationState);
-  const focusSpecifier = useFocusWithin ? 'focus-within' : 'focus';
-  const styles = {
+  const {
+    children,
+    openInNewTab,
+    ...restProps
+  } = props;
+  const {
+    theme,
+    classNamePrefix
+  } = useDesignSystemTheme();
+  const eventContext = useDesignSystemEventComponentCallbacks({
+    componentType: DesignSystemEventProviderComponentTypes.TypographyLink,
+    componentId,
+    analyticsEvents: analyticsEvents !== null && analyticsEvents !== void 0 ? analyticsEvents : [DesignSystemEventProviderAnalyticsEventTypes.OnClick],
+    shouldStartInteraction: false
+  });
+  const onClickHandler = useCallback(e => {
+    eventContext.onClick();
+    onClick === null || onClick === void 0 || onClick(e);
+  }, [eventContext, onClick]);
+  const newTabProps = {
+    rel: 'noopener noreferrer',
+    target: '_blank'
+  };
+  const linkProps = openInNewTab ? {
+    ...restProps,
+    ...newTabProps
+  } : {
+    ...restProps
+  };
+  const linkStyles = props.ellipsis && openInNewTab ? [getLinkStyles(theme, classNamePrefix), getEllipsisNewTabLinkStyles()] : getLinkStyles(theme, classNamePrefix);
+  const iconStyles = props.ellipsis ? [getIconStyles(theme), getEllipsisIconStyles()] : getIconStyles(theme);
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsxs(Typography$1.Link, {
+      ...addDebugOutlineIfEnabled(),
+      "aria-disabled": linkProps.disabled,
+      css: linkStyles,
+      ref: ref,
+      onClick: onClickHandler,
+      ...linkProps,
+      ...dangerouslySetAntdProps,
+      children: [children, openInNewTab ? jsx(NewWindowIcon$1, {
+        css: iconStyles,
+        ...newTabProps
+      }) : null]
+    })
+  });
+});
+
+const {
+  Paragraph: AntDParagraph
+} = Typography$1;
+function getParagraphEmotionStyles(theme, clsPrefix, props) {
+  return /*#__PURE__*/css({
     '&&': {
+      fontSize: theme.typography.fontSizeBase,
+      fontWeight: theme.typography.typographyRegularFontWeight,
       lineHeight: theme.typography.lineHeightBase,
-      minHeight: theme.general.heightSm,
-      ...(validationState && {
-        borderColor: validationColor
-      }),
-      '&:hover': {
-        borderColor: validationState ? validationColor : theme.colors.actionPrimaryBackgroundHover
-      },
-      [`&:${focusSpecifier}`]: {
-        outlineColor: validationState ? validationColor : theme.colors.actionPrimaryBackgroundDefault,
-        outlineWidth: 2,
-        outlineOffset: -2,
-        outlineStyle: 'solid',
-        boxShadow: 'none',
-        borderColor: 'transparent'
-      },
-      '&:disabled': {
-        backgroundColor: theme.colors.actionDisabledBackground,
-        color: theme.colors.actionDisabledText
-      },
-      '&::placeholder': {
-        color: theme.colors.textPlaceholder
-      }
+      color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
     },
-    [`&${inputClass}, ${inputClass}`]: {
-      ...(useTransparent && {
-        backgroundColor: 'transparent'
-      })
+    '& .anticon': {
+      verticalAlign: 'text-bottom'
     },
-    [`&${affixClass}`]: {
-      ...(useTransparent && {
-        backgroundColor: 'transparent'
-      }),
+    [`& .${clsPrefix}-btn-link`]: {
+      verticalAlign: 'baseline !important'
+    }
+  }, props.disabled && {
+    '&&': {
+      color: theme.colors.actionDisabledText
+    }
+  }, props.withoutMargins && {
+    '&&': {
+      marginTop: 0,
+      marginBottom: 0
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getParagraphEmotionStyles;");
+}
+function Paragraph(userProps) {
+  const {
+    dangerouslySetAntdProps,
+    withoutMargins,
+    color,
+    ...props
+  } = userProps;
+  const {
+    theme,
+    classNamePrefix
+  } = useDesignSystemTheme();
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(AntDParagraph, {
+      ...addDebugOutlineIfEnabled(),
+      ...props,
+      className: props.className,
+      css: getParagraphEmotionStyles(theme, classNamePrefix, userProps),
+      ...dangerouslySetAntdProps
+    })
+  });
+}
+
+const {
+  Text: AntDText
+} = Typography$1;
+function getTextEmotionStyles(theme, props) {
+  return /*#__PURE__*/css({
+    '&&': {
+      fontSize: theme.typography.fontSizeBase,
+      fontWeight: theme.typography.typographyRegularFontWeight,
       lineHeight: theme.typography.lineHeightBase,
-      paddingTop: 5,
-      paddingBottom: 5,
-      minHeight: theme.general.heightSm,
-      '::before': {
-        lineHeight: theme.typography.lineHeightBase
-      },
-      '&:hover': {
-        borderColor: theme.colors.actionPrimaryBackgroundHover
-      },
-      [`input.${clsPrefix}-input`]: {
-        borderRadius: 0
-      }
-    },
-    [`&${affixClassFocused}`]: {
-      boxShadow: 'none',
-      [`&&, &:${focusSpecifier}`]: {
-        outlineColor: theme.colors.actionPrimaryBackgroundDefault,
-        outlineWidth: 2,
-        outlineOffset: -2,
-        outlineStyle: 'solid',
-        boxShadow: 'none',
-        borderColor: 'transparent'
+      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 {};
       }
-    },
-    [clearIcon]: {
-      fontSize: theme.typography.fontSizeSm
-    },
-    [prefixIcon]: {
-      marginRight: theme.spacing.sm,
-      color: theme.colors.textSecondary
-    },
-    [suffixIcon]: {
-      marginLeft: theme.spacing.sm,
-      color: theme.colors.textSecondary
-    },
-    ...getAnimationCss(theme.options.enableAnimation)
-  };
-  return styles;
-};
-const getInputEmotionStyles = (clsPrefix, theme, _ref3, useTransparent) => {
-  let {
-    validationState
-  } = _ref3;
-  const styles = getInputStyles(clsPrefix, theme, {
-    validationState
-  }, {
-    useTransparent
-  });
-  return /*#__PURE__*/css(importantify(styles), process.env.NODE_ENV === "production" ? "" : ";label:getInputEmotionStyles;");
-};
-const Input$1 = /*#__PURE__*/forwardRef(function Input(_ref4, ref) {
-  let {
-    validationState,
-    autoComplete = 'off',
+    })()
+  }, 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,
-    dangerouslyAppendEmotionCSS,
-    onChange,
-    onClear,
-    onFocus,
-    componentId,
-    analyticsEvents,
+    bold,
+    hint,
+    withoutMargins,
+    color,
     ...props
-  } = _ref4;
+  } = userProps;
   const {
-    classNamePrefix,
     theme
   } = useDesignSystemTheme();
-  const useTransparent = safex('databricks.fe.designsystem.useTransparentInput', false);
-  const eventContext = useDesignSystemEventComponentCallbacks({
-    componentType: DesignSystemEventProviderComponentTypes.Input,
-    componentId,
-    analyticsEvents: analyticsEvents !== null && analyticsEvents !== void 0 ? analyticsEvents : [DesignSystemEventProviderAnalyticsEventTypes.OnValueChange]
-  });
-
-  // Prevents multiple onValueChange triggers until after a focus event resets it.
-  const {
-    callbackOnceUntilReset: sendAnalyticsEventOncePerFocus,
-    reset: resetSendAnalyticsEventOnFocus
-  } = useCallbackOnceUntilReset(eventContext.onValueChange);
-  const handleChange = e => {
-    sendAnalyticsEventOncePerFocus();
-    // If the input is cleared, call the onClear handler, but only
-    // if the event is not an input event -- which is the case when you click the
-    // ant-provided (X) button.
-    if (!e.target.value && e.nativeEvent instanceof InputEvent === false && onClear) {
-      onClear === null || onClear === void 0 || onClear();
-    } else {
-      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,
+    children: jsx(AntDText, {
+      ...addDebugOutlineIfEnabled(),
       ...props,
+      className: props.className,
+      css: getTextEmotionStyles(theme, userProps),
       ...dangerouslySetAntdProps
     })
   });
-});
+}
 
-const Password = /*#__PURE__*/forwardRef(function Password(_ref, ref) {
-  let {
-    validationState,
-    autoComplete = 'off',
+const {
+  Title: AntDTitle
+} = Typography$1;
+function getLevelStyles(theme, props) {
+  switch (props.level) {
+    case 1:
+      return /*#__PURE__*/css({
+        '&&': {
+          fontSize: theme.typography.fontSizeXxl,
+          lineHeight: theme.typography.lineHeightXxl,
+          fontWeight: theme.typography.typographyBoldFontWeight
+        },
+        '& > .anticon': {
+          lineHeight: theme.typography.lineHeightXxl
+        }
+      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
+    case 2:
+      return /*#__PURE__*/css({
+        '&&': {
+          fontSize: theme.typography.fontSizeXl,
+          lineHeight: theme.typography.lineHeightXl,
+          fontWeight: theme.typography.typographyBoldFontWeight
+        },
+        '& > .anticon': {
+          lineHeight: theme.typography.lineHeightXl
+        }
+      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
+    case 3:
+      return /*#__PURE__*/css({
+        '&&': {
+          fontSize: theme.typography.fontSizeLg,
+          lineHeight: theme.typography.lineHeightLg,
+          fontWeight: theme.typography.typographyBoldFontWeight
+        },
+        '& > .anticon': {
+          lineHeight: theme.typography.lineHeightLg
+        }
+      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
+    case 4:
+    default:
+      return /*#__PURE__*/css({
+        '&&': {
+          fontSize: theme.typography.fontSizeMd,
+          lineHeight: theme.typography.lineHeightMd,
+          fontWeight: theme.typography.typographyBoldFontWeight
+        },
+        '& > .anticon': {
+          lineHeight: theme.typography.lineHeightMd
+        }
+      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
+  }
+}
+function getTitleEmotionStyles(theme, props) {
+  return /*#__PURE__*/css(getLevelStyles(theme, props), {
+    '&&': {
+      color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
+    },
+    '& > .anticon': {
+      verticalAlign: 'middle'
+    }
+  }, props.withoutMargins && {
+    '&&': {
+      marginTop: '0 !important',
+      // override general styling
+      marginBottom: '0 !important' // override general styling
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getTitleEmotionStyles;");
+}
+function Title(userProps) {
+  const {
     dangerouslySetAntdProps,
-    dangerouslyAppendEmotionCSS,
+    withoutMargins,
+    color,
     ...props
-  } = _ref;
+  } = userProps;
   const {
-    classNamePrefix,
     theme
   } = useDesignSystemTheme();
-  const useTransparent = safex('databricks.fe.designsystem.useTransparentInput', false);
   return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(Input$2.Password, {
-      visibilityToggle: false,
-      ref: ref,
-      autoComplete: autoComplete,
-      css: [getInputEmotionStyles(classNamePrefix, theme, {
-        validationState
-      }, useTransparent), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Password;"],
+    children: jsx(AntDTitle, {
+      ...addDebugOutlineIfEnabled(),
       ...props,
+      className: props.className,
+      css: getTitleEmotionStyles(theme, userProps),
       ...dangerouslySetAntdProps
     })
   });
-});
+}
 
-const TextArea = /*#__PURE__*/forwardRef(function TextArea(_ref, ref) {
+const Truncate = _ref => {
   let {
-    validationState,
-    autoComplete = 'off',
-    dangerouslySetAntdProps,
-    dangerouslyAppendEmotionCSS,
+    children,
+    lines = 1,
     ...props
   } = _ref;
-  const {
-    classNamePrefix,
-    theme
-  } = useDesignSystemTheme();
-  const useTransparent = safex('databricks.fe.designsystem.useTransparentInput', false);
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(Input$2.TextArea, {
-      ref: ref,
-      autoComplete: autoComplete,
-      css: [getInputEmotionStyles(classNamePrefix, theme, {
-        validationState
-      }, useTransparent), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:TextArea;"],
-      ...props,
-      ...dangerouslySetAntdProps
-    })
-  });
-});
-
-// Properly creates the namespace and dot-notation components with correct types.
-const InputNamespace = /* #__PURE__ */Object.assign(Input$1, {
-  TextArea,
-  Password,
-  Group
-});
-const Input = InputNamespace;
+  const [textContent, setTextContent] = useState('');
+  const spanRef = useRef(null);
 
-function Stepper(_ref) {
-  let {
-    direction: requestedDirection,
-    currentStepIndex: currentStep,
-    steps,
-    localizeStepNumber,
-    responsive = true
-  } = _ref;
-  const {
-    theme
-  } = useDesignSystemTheme();
-  const ref = useRef(null);
-  const {
-    direction
-  } = useResponsiveDirection({
-    ref,
-    requestedDirection,
-    responsive,
-    enabled: steps.length > 0
-  });
-  if (steps.length === 0) {
-    return null;
-  }
-  const isHorizontal = direction === 'horizontal';
-  const currentStepIndex = currentStep ? Math.min(steps.length - 1, Math.max(0, currentStep)) : 0;
-  return jsx("ol", {
-    css: /*#__PURE__*/css(getStepsStyle(theme, isHorizontal), process.env.NODE_ENV === "production" ? "" : ";label:Stepper;"),
-    ref: ref,
-    children: steps.map((step, index) => {
-      const isCurrentStep = index === currentStepIndex;
-      const isLastStep = index === steps.length - 1;
-      const displayEndingDivider = !isLastStep;
-      const contentTitleLevel = isCurrentStep ? 3 : 4;
-      const StepIcon = step.icon;
-      const {
-        icon,
-        iconBackgroundColor,
-        iconTextColor,
-        titleTextColor,
-        descriptionTextColor,
-        hasStepItemIconBorder
-      } = getStepContentStyleFields(theme, isCurrentStep, step.status, StepIcon);
-      return jsx("li", {
-        "aria-current": isCurrentStep,
-        css: /*#__PURE__*/css(getStepItemStyle(theme, isHorizontal, isLastStep), process.env.NODE_ENV === "production" ? "" : ";label:Stepper;"),
-        children: jsxs(StepContentGrid, {
-          isHorizontal: isHorizontal,
-          isCurrentStep: isCurrentStep,
-          children: [jsx("div", {
-            css: /*#__PURE__*/css(getStepItemIconParentStyle(theme, isCurrentStep, iconBackgroundColor, hasStepItemIconBorder), process.env.NODE_ENV === "production" ? "" : ";label:Stepper;"),
-            children: StepIcon ? jsx(StepIcon, {
-              statusColor: iconTextColor,
-              status: step.status
-            }) : icon ? jsx("span", {
-              css: /*#__PURE__*/css({
-                color: iconTextColor
-              }, process.env.NODE_ENV === "production" ? "" : ";label:Stepper;"),
-              children: icon
-            }) : jsx(Typography.Title, {
-              level: contentTitleLevel,
-              css: /*#__PURE__*/css({
-                color: `${iconTextColor} !important`
-              }, process.env.NODE_ENV === "production" ? "" : ";label:Stepper;"),
-              withoutMargins: true,
-              children: localizeStepNumber(index + 1)
-            })
-          }), jsx(Typography.Title, {
-            level: contentTitleLevel,
-            withoutMargins: true,
-            css: /*#__PURE__*/css({
-              flexShrink: 0,
-              color: `${titleTextColor} !important`
-            }, process.env.NODE_ENV === "production" ? "" : ";label:Stepper;"),
-            children: step.title
-          }), displayEndingDivider && jsx("div", {
-            css: /*#__PURE__*/css(getStepEndingDividerStyles(theme, isHorizontal, isCurrentStep), process.env.NODE_ENV === "production" ? "" : ";label:Stepper;")
-          }), step.description && jsx(Typography.Text, {
-            css: /*#__PURE__*/css(getStepDescriptionStyles(theme, isHorizontal, isLastStep, descriptionTextColor), process.env.NODE_ENV === "production" ? "" : ";label:Stepper;"),
-            withoutMargins: true,
-            size: "sm",
-            children: step.description
-          })]
-        })
-      }, index);
-    })
-  });
-}
-function getStepsStyle(theme, isHorizontal) {
-  return /*#__PURE__*/css({
-    listStyle: 'none',
-    display: 'flex',
-    flexDirection: isHorizontal ? 'row' : 'column',
-    flexWrap: 'wrap',
-    alignItems: 'flex-start',
-    gap: isHorizontal ? theme.spacing.md : theme.spacing.sm,
-    width: '100%',
-    margin: '0',
-    padding: '0'
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getStepsStyle;");
-}
-function getStepItemStyle(theme, isHorizontal, isLastStep) {
-  return /*#__PURE__*/css({
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    flexGrow: isLastStep ? 0 : 1,
-    marginRight: isLastStep ? theme.spacing.lg + theme.spacing.md : 0,
-    width: isHorizontal ? undefined : '100%'
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getStepItemStyle;");
-}
-function getStepContentStyleFields(theme, isCurrentStep, status, icon) {
-  const fields = getStepContentStyleFieldsFromStatus(theme, isCurrentStep, status);
-  if (icon) {
-    return {
-      ...fields,
-      icon: undefined,
-      iconBackgroundColor: undefined,
-      iconTextColor: getCustomIconColor(theme, isCurrentStep, status),
-      hasStepItemIconBorder: false
-    };
-  }
-  return fields;
-}
-function getCustomIconColor(theme, isCurrentStep, status) {
-  switch (status) {
-    case 'completed':
-      return theme.colors.actionDefaultBackgroundPress;
-    case 'loading':
-      return theme.colors.textPlaceholder;
-    case 'error':
-      return theme.colors.textValidationDanger;
-    default:
-    case 'upcoming':
-      return isCurrentStep ? theme.colors.actionLinkDefault : theme.colors.textPlaceholder;
-  }
-}
-function getStepContentStyleFieldsFromStatus(theme, isCurrentStep, status) {
-  switch (status) {
-    case 'completed':
-      return {
-        icon: jsx(CheckIcon$1, {}),
-        iconBackgroundColor: theme.colors.actionDefaultBackgroundPress,
-        iconTextColor: theme.colors.textPlaceholder,
-        titleTextColor: theme.colors.textPrimary,
-        descriptionTextColor: theme.colors.textSecondary,
-        hasStepItemIconBorder: true
-      };
-    case 'loading':
-      return {
-        icon: jsx(LoadingIcon$1, {
-          spin: true,
-          css: /*#__PURE__*/css({
-            fontSize: isCurrentStep ? theme.typography.fontSizeXl : theme.typography.fontSizeLg
-          }, process.env.NODE_ENV === "production" ? "" : ";label:icon;")
-        }),
-        iconBackgroundColor: undefined,
-        iconTextColor: theme.colors.textPlaceholder,
-        titleTextColor: isCurrentStep ? theme.colors.textPrimary : theme.colors.textSecondary,
-        descriptionTextColor: theme.colors.textSecondary,
-        hasStepItemIconBorder: false
-      };
-    case 'error':
-      return {
-        icon: jsx(CloseIcon$1, {}),
-        iconBackgroundColor: theme.colors.textValidationDanger,
-        iconTextColor: 'white',
-        titleTextColor: theme.colors.textValidationDanger,
-        descriptionTextColor: theme.colors.textValidationDanger,
-        hasStepItemIconBorder: false
-      };
-    default:
-    case 'upcoming':
-      if (isCurrentStep) {
-        return {
-          icon: undefined,
-          iconBackgroundColor: theme.colors.actionLinkDefault,
-          iconTextColor: 'white',
-          titleTextColor: theme.colors.textPrimary,
-          descriptionTextColor: theme.colors.textPrimary,
-          hasStepItemIconBorder: false
-        };
-      }
-      return {
-        icon: undefined,
-        iconBackgroundColor: undefined,
-        iconTextColor: theme.colors.textPlaceholder,
-        titleTextColor: theme.colors.textSecondary,
-        descriptionTextColor: theme.colors.textSecondary,
-        hasStepItemIconBorder: true
-      };
-  }
-}
-const MaxHorizontalStepDescriptionWidth = 140;
-const CurrentStepIconSize = DEFAULT_SPACING_UNIT * 4;
-const NonCurrentStepIconSize = DEFAULT_SPACING_UNIT * 3;
-function getStepItemIconParentStyle(theme, isCurrentStep, iconBackgroundColor, hasStepItemIconBorder) {
-  return /*#__PURE__*/css({
-    width: isCurrentStep ? CurrentStepIconSize : NonCurrentStepIconSize,
-    height: isCurrentStep ? CurrentStepIconSize : NonCurrentStepIconSize,
-    backgroundColor: iconBackgroundColor,
-    borderRadius: '50%',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    fontSize: '20px',
-    flexShrink: 0,
-    border: hasStepItemIconBorder ? `1px solid ${theme.colors.textPlaceholder}` : undefined
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getStepItemIconParentStyle;");
-}
-function getStepEndingDividerStyles(theme, isHorizontal, isCurrentStep) {
-  const backgroundColor = isCurrentStep ? theme.colors.actionLinkDefault : theme.colors.border;
-  if (isHorizontal) {
-    return /*#__PURE__*/css({
-      backgroundColor,
-      height: '1px',
-      width: '100%',
-      minWidth: theme.spacing.md
-    }, process.env.NODE_ENV === "production" ? "" : ";label:getStepEndingDividerStyles;");
-  }
-  return /*#__PURE__*/css({
-    backgroundColor,
-    height: '100%',
-    minHeight: theme.spacing.md,
-    width: '1px',
-    alignSelf: 'flex-start',
-    marginLeft: theme.spacing.md
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getStepEndingDividerStyles;");
-}
-function getStepDescriptionStyles(theme, isHorizontal, isLastStep, textColor) {
-  return /*#__PURE__*/css({
-    alignSelf: 'flex-start',
-    width: '100%',
-    gridColumn: isHorizontal || isLastStep ? '2 / span 2' : undefined,
-    maxWidth: isHorizontal ? MaxHorizontalStepDescriptionWidth : undefined,
-    paddingBottom: isHorizontal ? undefined : theme.spacing.sm,
-    color: `${textColor} !important`
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getStepDescriptionStyles;");
-}
-function StepContentGrid(_ref2) {
-  let {
-    children,
-    isHorizontal,
-    isCurrentStep
-  } = _ref2;
-  const {
-    theme
-  } = useDesignSystemTheme();
-  if (isHorizontal) {
-    return jsx("div", {
-      css: /*#__PURE__*/css({
-        display: 'grid',
-        gridTemplateColumns: `${isCurrentStep ? CurrentStepIconSize : NonCurrentStepIconSize}px fit-content(100%) 1fr`,
-        gridTemplateRows: `${CurrentStepIconSize}px auto`,
-        alignItems: 'center',
-        justifyItems: 'flex-start',
-        gridColumnGap: theme.spacing.sm,
-        width: '100%'
-      }, process.env.NODE_ENV === "production" ? "" : ";label:StepContentGrid;"),
-      children: children
-    });
-  }
-  return jsx("div", {
+  // This ensures that truncated text is always available to the user via a native tooltip
+  useEffect(() => {
+    if (spanRef.current) {
+      setTextContent(spanRef.current.textContent || '');
+    }
+  }, [spanRef, children]);
+  return jsx("span", {
+    ref: spanRef,
+    title: textContent,
     css: /*#__PURE__*/css({
-      display: 'grid',
-      gridTemplateColumns: `${CurrentStepIconSize}px auto`,
-      alignItems: 'center',
-      justifyItems: 'flex-start',
-      gridColumnGap: theme.spacing.md,
-      gridRowGap: theme.spacing.sm,
-      width: '100%',
-      '& > :first-child': {
-        // horizontally center the first column (circle/icon)
-        justifySelf: 'center'
-      }
-    }, process.env.NODE_ENV === "production" ? "" : ";label:StepContentGrid;"),
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'normal',
+      wordBreak: 'break-word',
+      display: '-webkit-box',
+      webkitLineClamp: lines,
+      WebkitBoxOrient: 'vertical',
+      WebkitLineClamp: lines
+    }, process.env.NODE_ENV === "production" ? "" : ";label:Truncate;"),
+    ...props,
     children: children
   });
-}
-
-// Ant design uses the same value for their stepper and to works well for us as well.
-const MinimumHorizonalDirectionWidth = 532;
+};
 
-// exported for unit test
-function useResponsiveDirection(_ref3) {
-  let {
-    requestedDirection = 'horizontal',
-    responsive,
-    enabled,
-    ref
-  } = _ref3;
-  const [direction, setDirection] = useState(requestedDirection);
-  useEffect(() => {
-    if (requestedDirection === 'vertical' || !enabled || !responsive || !ref.current) {
-      return;
-    }
-    let timeoutId;
-    const resizeObserver = new ResizeObserver(entries => {
-      timeoutId = requestAnimationFrame(() => {
-        if (entries.length === 1) {
-          const width = entries[0].target.clientWidth || 0;
-          setDirection(width < MinimumHorizonalDirectionWidth ? 'vertical' : 'horizontal');
-        }
-      });
+const Typography = /* #__PURE__ */(() => {
+  function Typography(_ref) {
+    let {
+      dangerouslySetAntdProps,
+      ...props
+    } = _ref;
+    return jsx(DesignSystemAntDConfigProvider, {
+      children: jsx(Typography$1, {
+        ...addDebugOutlineIfEnabled(),
+        ...props,
+        ...dangerouslySetAntdProps
+      })
     });
-    if (ref.current) {
-      resizeObserver.observe(ref.current);
-    }
-    return () => {
-      resizeObserver.disconnect();
-      cancelAnimationFrame(timeoutId);
-    };
-  }, [requestedDirection, enabled, ref, responsive]);
-  return {
-    direction
-  };
-}
+  }
+  Typography.Text = Text;
+  Typography.Title = Title;
+  Typography.Paragraph = Paragraph;
+  Typography.Link = Link;
+  Typography.Hint = Hint;
+  Typography.Truncate = Truncate;
+  return Typography;
+})();
 
-export { NewWindowIcon$1 as $, ApplyDesignSystemContextOverrides as A, Button as B, CloseIcon$1 as C, DesignSystemAntDConfigProvider as D, getDisabledStyles as E, useDesignSystemFlags as F, Stepper as G, getButtonEmotionStyles as H, Icon as I, DesignSystemEventProvider as J, DesignSystemThemeContext as K, LoadingState as L, DesignSystemContext as M, DesignSystemThemeProvider as N, DesignSystemProvider as O, ApplyDesignSystemFlags as P, useAntDConfigProviderContext as Q, RestoreAntDDefaultClsPrefix as R, Spinner as S, Typography as T, WithDesignSystemThemeHoc as U, CursorIcon$1 as V, WarningIcon$1 as W, FaceFrownIcon$1 as X, FaceNeutralIcon$1 as Y, FaceSmileIcon$1 as Z, MegaphoneIcon$1 as _, getDarkModePortalStyles as a, getInputStyles as a0, LoadingStateContext as a1, getTypographyColor as a2, getBottomOnlyShadowScrollStyles as a3, ColorVars as a4, primitiveColors as a5, ChevronRightIcon$1 as b, useUniqueId as c, useDesignSystemContext as d, CheckIcon$1 as e, Input as f, getAnimationCss as g, getValidationStateColor as h, importantify as i, getShadowScrollStyles as j, DangerIcon$1 as k, LoadingIcon$1 as l, Title as m, AccessibleContainer as n, ChevronLeftIcon$1 as o, useDesignSystemEventComponentCallbacks as p, DesignSystemEventProviderComponentTypes as q, DesignSystemEventProviderAnalyticsEventTypes as r, safex as s, useNotifyOnFirstView as t, useDesignSystemTheme as u, visuallyHidden as v, DU_BOIS_ENABLE_ANIMATION_CLASSNAME as w, lightColorList as x, getDefaultStyles as y, getPrimaryStyles as z };
-//# sourceMappingURL=Stepper-ff25c5d1.js.map
+export { LoadingStateContext as $, Arrow as A, Button as B, CloseIcon$1 as C, DesignSystemAntDConfigProvider as D, AccessibleContainer as E, DU_BOIS_ENABLE_ANIMATION_CLASSNAME as F, lightColorList as G, getDefaultStyles as H, Icon as I, getPrimaryStyles as J, getDisabledSplitButtonStyles as K, LoadingState as L, getButtonEmotionStyles as M, DesignSystemEventProvider as N, useDesignSystemEventSuppressInteractionContext as O, DesignSystemThemeContext as P, DesignSystemContext as Q, RestoreAntDDefaultClsPrefix as R, Spinner as S, Trigger as T, DesignSystemThemeProvider as U, DesignSystemProvider as V, WarningIcon$1 as W, ApplyDesignSystemFlags as X, useAntDConfigProviderContext as Y, WithDesignSystemThemeHoc as Z, NewWindowIcon$1 as _, useDesignSystemTheme as a, Popover as a0, getTypographyColor as a1, getBottomOnlyShadowScrollStyles as a2, ColorVars as a3, primitiveColors as a4, DEFAULT_SPACING_UNIT as a5, addDebugOutlineStylesIfEnabled as b, useDesignSystemEventComponentCallbacks as c, DesignSystemEventProviderComponentTypes as d, DesignSystemEventProviderAnalyticsEventTypes as e, useNotifyOnFirstView as f, getAnimationCss as g, addDebugOutlineIfEnabled as h, getDarkModePortalStyles as i, useUniqueId as j, Root as k, Content as l, DesignSystemEventSuppressInteractionProviderContext as m, DesignSystemEventSuppressInteractionTrueContextValue as n, Typography as o, importantify as p, CheckIcon$1 as q, getValidationStateColor as r, safex as s, ApplyDesignSystemContextOverrides as t, useDesignSystemContext as u, visuallyHidden as v, getShadowScrollStyles as w, DangerIcon$1 as x, LoadingIcon$1 as y, Title as z };
+//# sourceMappingURL=Typography-ed0b1c4d.js.map