@databricks/design-system 1.12.10 → 1.12.11

package/dist/index.js

@@ -1,20 +1,24 @@
 import * as React from 'react';
-import React__default, { useRef, useMemo, forwardRef, createContext, useContext, useState, useEffect, useImperativeHandle, Children, useCallback } from 'react';
-import { u as useDesignSystemTheme, I as Icon, D as DesignSystemAntDConfigProvider, R as RestoreAntDDefaultClsPrefix, g as getAnimationCss, C as CloseIcon, a as ChevronRightIcon, b as useDesignSystemFlags, i as importantify, c as DU_BOIS_ENABLE_ANIMATION_CLASSNAME, d as useDesignSystemContext, T as Tooltip, e as InfoIcon, f as Input, h as CheckIcon, B as Button, j as getValidationStateColor, A as ApplyDesignSystemContextOverrides, k as Typography, s as safex, l as dropdownContentStyles, m as Title$2, n as ChevronLeftIcon, o as Root$4, p as Trigger$2, q as getDefaultStyles, r as getPrimaryStyles, t as getDisabledStyles, v as lightColorList } from './DropdownMenu-e0c3fc1d.js';
-export { F as ApplyDesignSystemFlags, J as CursorIcon, y as DesignSystemContext, E as DesignSystemProvider, x as DesignSystemThemeContext, z as DesignSystemThemeProvider, H as DropdownMenu, K as FaceFrownIcon, L as FaceNeutralIcon, M as FaceSmileIcon, N as NewWindowIcon, W as WithDesignSystemThemeHoc, P as __INTERNAL_DO_NOT_USE_DEDUPE__Group, O as __INTERNAL_DO_NOT_USE__Password, _ as __INTERNAL_DO_NOT_USE__TextArea, w as getButtonEmotionStyles, Q as getTypographyColor, G as useAntDConfigProviderContext } from './DropdownMenu-e0c3fc1d.js';
-import { jsx, Fragment, jsxs } from '@emotion/react/jsx-runtime';
-import { css, keyframes, ClassNames, createElement } from '@emotion/react';
-import { Collapse, Alert as Alert$1, AutoComplete as AutoComplete$1, Breadcrumb as Breadcrumb$1, Checkbox as Checkbox$1, DatePicker, Dropdown as Dropdown$1, Form as Form$1, Radio as Radio$1, Select as Select$1, Col as Col$1, Row as Row$1, Space as Space$1, Layout as Layout$1, notification, Popover as Popover$2, Pagination as Pagination$1, Table as Table$1, Menu as Menu$1, Modal as Modal$1, Skeleton, Button as Button$1, Switch as Switch$1, Tabs as Tabs$1, Tree as Tree$1 } from 'antd';
+import React__default, { useRef, useMemo, forwardRef, createContext, useContext, useState, useEffect, useImperativeHandle, Children, useCallback, useLayoutEffect } from 'react';
+import { u as useDesignSystemTheme, I as Icon, D as DesignSystemAntDConfigProvider, R as RestoreAntDDefaultClsPrefix, g as getAnimationCss, C as CloseIcon, a as ChevronRightIcon, b as useDesignSystemFlags, i as importantify, S as Spinner, c as useDesignSystemContext, T as Tooltip, d as InfoIcon, e as Input, f as CheckIcon, B as Button, h as getValidationStateColor, A as ApplyDesignSystemContextOverrides, j as Typography, s as safex, L as LoadingState, k as LoadingIcon, l as dropdownContentStyles, m as Title$2, n as AccessibleContainer, o as ChevronLeftIcon, p as DU_BOIS_ENABLE_ANIMATION_CLASSNAME, v as visuallyHidden, q as Root$4, r as Trigger$2, t as getDefaultStyles, w as getPrimaryStyles, x as getDisabledStyles, y as lightColorList } from './DropdownMenu-eb8788e5.js';
+export { J as ApplyDesignSystemFlags, N as CursorIcon, F as DesignSystemContext, H as DesignSystemProvider, E as DesignSystemThemeContext, G as DesignSystemThemeProvider, M as DropdownMenu, O as FaceFrownIcon, P as FaceNeutralIcon, Q as FaceSmileIcon, Y as LoadingStateContext, U as NewWindowIcon, W as WithDesignSystemThemeHoc, X as __INTERNAL_DO_NOT_USE_DEDUPE__Group, V as __INTERNAL_DO_NOT_USE__Password, _ as __INTERNAL_DO_NOT_USE__TextArea, z as getButtonEmotionStyles, Z as getTypographyColor, K as useAntDConfigProviderContext } from './DropdownMenu-eb8788e5.js';
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { css, Global, keyframes, ClassNames, createElement } from '@emotion/react';
+import { Collapse, Alert as Alert$1, AutoComplete as AutoComplete$1, Breadcrumb as Breadcrumb$1, Checkbox as Checkbox$1, DatePicker, Dropdown as Dropdown$1, Form as Form$1, Radio as Radio$1, Select as Select$1, Col as Col$1, Row as Row$1, Space as Space$1, Layout as Layout$1, notification, Popover as Popover$2, Skeleton, Pagination as Pagination$1, Table as Table$1, Menu as Menu$1, Modal as Modal$1, Button as Button$1, Switch as Switch$1, Tabs as Tabs$1, Tree as Tree$1 } from 'antd';
 import classnames from 'classnames';
 import * as Popover$1 from '@radix-ui/react-popover';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { useController } from 'react-hook-form';
+import _uniqueId from 'lodash/uniqueId';
 import * as Toast from '@radix-ui/react-toast';
 import { ResizableBox } from 'react-resizable';
 import _times from 'lodash/times';
 import _random from 'lodash/random';
 import AntDIcon, { InfoCircleOutlined } from '@ant-design/icons';
 import * as Toggle from '@radix-ui/react-toggle';
+import { useFloating, autoUpdate, offset, flip, shift, useMergeRefs } from '@floating-ui/react';
+import { createPortal } from 'react-dom';
+import { useCombobox, useMultipleSelection } from 'downshift';
 import '@radix-ui/react-dropdown-menu';
 import 'chroma-js';
 import 'lodash/isNil';
@@ -25,55 +29,6 @@ import 'lodash/isString';
 import 'lodash/mapValues';
 import '@emotion/unitless';
 
-/**
- * Used to hide text visually, but still be readable by screen-readers
- * and other assistive devices.
- *
- * https://www.tpgi.com/the-anatomy-of-visually-hidden/
- */
-const visuallyHidden = {
-  '&:not(:focus):not(:active)': {
-    clip: 'rect(0 0 0 0)',
-    clipPath: 'inset(50%)',
-    height: '1px',
-    overflow: 'hidden',
-    position: 'absolute',
-    whiteSpace: 'nowrap',
-    width: '1px'
-  }
-};
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__$l() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-var _ref2$8 = process.env.NODE_ENV === "production" ? {
-  name: "g8zzui",
-  styles: "cursor:progress"
-} : {
-  name: "4y1qki-AccessibleContainer",
-  styles: "cursor:progress;label:AccessibleContainer;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$l
-};
-function AccessibleContainer(_ref) {
-  let {
-    children,
-    label
-  } = _ref;
-  if (!label) {
-    return jsx(Fragment, {
-      children: children
-    });
-  }
-  return jsxs("div", {
-    css: _ref2$8,
-    children: [jsx("span", {
-      css: visuallyHidden,
-      children: label
-    }), jsx("div", {
-      "aria-hidden": true,
-      children: children
-    })]
-  });
-}
-
 /**
  * A helper hook that allows quick creation of theme-dependent styles. 
  * Results in more compact code than using useMemo and 
@@ -1249,6 +1204,53 @@ function ClockIcon(props) {
   });
 }
 
+function SvgClockKeyIcon(props) {
+  return jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 16 16",
+    ...props,
+    children: [jsx("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M15.25 12.5h-4.292a3 3 0 1 0-.13 1.5H12v2h1.5v-2h1v2H16v-2.75a.75.75 0 0 0-.75-.75ZM8 11.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z",
+      clipRule: "evenodd"
+    }), jsx("mask", {
+      id: "ClockKeyIcon_svg__a",
+      width: 17,
+      height: 16,
+      x: -1,
+      y: 0,
+      maskUnits: "userSpaceOnUse",
+      style: {
+        maskType: 'alpha'
+      },
+      children: jsx("path", {
+        fill: "#D9D9D9",
+        d: "M0 0h16v11.131h-2.848c-1.162 0-3.207-2.794-6.438-1.808-1.84.562-2.933 3.061-2.933 3.061V16H0V0Z"
+      })
+    }), jsxs("g", {
+      fill: "currentColor",
+      mask: "url(#ClockKeyIcon_svg__a)",
+      children: [jsx("path", {
+        fillRule: "evenodd",
+        d: "M1.5 8a6.5 6.5 0 1 1 13 0 6.5 6.5 0 0 1-13 0ZM8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Z",
+        clipRule: "evenodd"
+      }), jsx("path", {
+        d: "M7.25 8V4h1.5v3.69l1.78 1.78-1.06 1.06-2-2A.75.75 0 0 1 7.25 8Z"
+      })]
+    })]
+  });
+}
+function ClockKeyIcon(props) {
+  return jsx(Icon, {
+    ...props,
+    component: SvgClockKeyIcon
+  });
+}
+
 function SvgCloudDownloadIcon(props) {
   return jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -2762,6 +2764,32 @@ function InfoFillIcon(props) {
   });
 }
 
+function SvgIngestionIcon(props) {
+  return jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 16 16",
+    ...props,
+    children: [jsx("path", {
+      fill: "currentColor",
+      d: "M15 2.5a.75.75 0 0 0-.75-.75h-3a.75.75 0 0 0-.75.75V6H12V3.25h1.5v9.5H12V10h-1.5v3.5c0 .414.336.75.75.75h3a.75.75 0 0 0 .75-.75v-11Z"
+    }), jsx("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M3.75 0c1.26 0 2.322.848 2.648 2.004A2.75 2.75 0 0 1 9 4.75v2.5h3v1.5H9v2.5a2.75 2.75 0 0 1-2.602 2.746 2.751 2.751 0 1 1-3.47-3.371 2.751 2.751 0 0 1 0-5.25A2.751 2.751 0 0 1 3.75 0ZM5 2.75a1.25 1.25 0 1 0-2.5 0 1.25 1.25 0 0 0 2.5 0Zm-.428 2.625a2.756 2.756 0 0 0 1.822-1.867A1.25 1.25 0 0 1 7.5 4.75v2.5H6.396a2.756 2.756 0 0 0-1.824-1.875ZM6.396 8.75H7.5v2.5a1.25 1.25 0 0 1-1.106 1.242 2.756 2.756 0 0 0-1.822-1.867A2.756 2.756 0 0 0 6.396 8.75ZM3.75 12a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Zm0-5.25a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5Z",
+      clipRule: "evenodd"
+    })]
+  });
+}
+function IngestionIcon(props) {
+  return jsx(Icon, {
+    ...props,
+    component: SvgIngestionIcon
+  });
+}
+
 function SvgItalicIcon(props) {
   return jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3025,29 +3053,6 @@ function ListIcon(props) {
   });
 }
 
-function SvgLoadingIcon(props) {
-  return jsx("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    ...props,
-    children: jsx("path", {
-      fill: "currentColor",
-      fillRule: "evenodd",
-      d: "M23.212 12a.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",
-      clipRule: "evenodd"
-    })
-  });
-}
-function LoadingIcon(props) {
-  return jsx(Icon, {
-    ...props,
-    component: SvgLoadingIcon
-  });
-}
-
 function SvgLockFillIcon(props) {
   return jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3946,6 +3951,34 @@ function QuestionMarkIcon(props) {
   });
 }
 
+function SvgQuestionMarkSpeechBubbleIcon(props) {
+  return jsxs("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: "M9 3.5a5.5 5.5 0 0 0-3.89 9.39.75.75 0 0 1 0 1.06l-.55.55h3.916a.75.75 0 0 1 .18-.01A5.5 5.5 0 1 0 9 3.5Zm-.295 12.494a7 7 0 1 0-5.157-2.603L2.22 14.72A.75.75 0 0 0 2.75 16h5.86a.762.762 0 0 0 .095-.006Z",
+      clipRule: "evenodd"
+    }), jsx("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M11.079 8.111A2.25 2.25 0 1 0 6.75 7.25h1.5A.75.75 0 1 1 9 8a.75.75 0 0 0-.75.75V10h1.5v-.629a2.249 2.249 0 0 0 1.329-1.26ZM9 12.5A.75.75 0 1 1 9 11a.75.75 0 0 1 0 1.5Z",
+      clipRule: "evenodd"
+    })]
+  });
+}
+function QuestionMarkSpeechBubbleIcon(props) {
+  return jsx(Icon, {
+    ...props,
+    component: SvgQuestionMarkSpeechBubbleIcon
+  });
+}
+
 function SvgReaderModeIcon(props) {
   return jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -5716,6 +5749,23 @@ const getAlertEmotionStyles = (clsPrefix, theme, props) => {
   return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getAlertEmotionStyles;");
 };
 
+const getGlobalStyles = theme => {
+  return /*#__PURE__*/css({
+    'body, .mfe-root': {
+      backgroundColor: theme.colors.backgroundPrimary,
+      color: theme.colors.textPrimary
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getGlobalStyles;");
+};
+const ApplyGlobalStyles = () => {
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(Global, {
+    styles: getGlobalStyles(theme)
+  });
+};
+
 const AutoComplete = /* #__PURE__ */(() => {
   const AutoComplete = _ref => {
     let {
@@ -5824,6 +5874,11 @@ function getCheckboxEmotionStyles(clsPrefix, theme) {
     [classInner]: {
       borderColor: theme.colors.actionDefaultBorderDefault
     },
+    // Style wrapper span added by Antd
+    [`&> span:not(.${clsPrefix})`]: {
+      display: 'inline-flex',
+      alignItems: 'center'
+    },
     // Layout styling
     [`&${classContainer}`]: {
       display: 'flex',
@@ -6405,7 +6460,33 @@ const DialogComboboxButtonContainer = _ref => {
   });
 };
 
-const DialogComboboxEmpty = () => {
+const getButtonStyles = theme => {
+  return /*#__PURE__*/css({
+    color: theme.colors.textPlaceholder,
+    fontSize: theme.typography.fontSizeSm,
+    marginLeft: theme.spacing.xs,
+    ':hover': {
+      color: theme.colors.actionTertiaryTextHover
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getButtonStyles;");
+};
+const ClearSelectionButton = _ref => {
+  let {
+    ...restProps
+  } = _ref;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(XCircleFillIcon, {
+    "aria-hidden": "false",
+    css: getButtonStyles(theme),
+    role: "button",
+    "aria-label": "Clear selection",
+    ...restProps
+  });
+};
+
+const EmptyResults = () => {
   const {
     theme
   } = useDesignSystemTheme();
@@ -6420,69 +6501,32 @@ const DialogComboboxEmpty = () => {
       padding: '6px 12px',
       width: '100%',
       boxSizing: 'border-box'
-    }, process.env.NODE_ENV === "production" ? "" : ";label:DialogComboboxEmpty;"),
+    }, process.env.NODE_ENV === "production" ? "" : ";label:EmptyResults;"),
     children: emptyText !== undefined ? emptyText : 'No results found'
   });
 };
 
-const rotate = keyframes({
-  '0%': {
-    transform: 'rotate(0deg) translate3d(0, 0, 0)'
-  },
-  '100%': {
-    transform: 'rotate(360deg) translate3d(0, 0, 0)'
-  }
-});
-const cssSpinner = function (theme) {
-  let frameRate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 60;
-  let delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-  const styles = {
-    animation: `${rotate} 1s steps(${frameRate}, end) infinite`,
-    color: theme.colors.textSecondary,
-    animationDelay: `${delay}s`,
-    '@media only percy': {
-      animation: 'none'
-    }
-  };
-  return /*#__PURE__*/css(importantify(styles), process.env.NODE_ENV === "production" ? "" : ";label:cssSpinner;");
-};
-const Spinner = _ref => {
+const HintRow = _ref => {
   let {
-    frameRate,
-    size = 'default',
-    delay,
-    className: propClass,
-    label,
-    ...props
+    disabled,
+    children
   } = _ref;
   const {
-    classNamePrefix,
     theme
   } = useDesignSystemTheme();
-
-  // We use Antd classes to keep styling unchanged
-  // TODO(FEINF-1407): We want to move away from Antd classes and use Emotion for styling in the future
-  const sizeSuffix = size === 'small' ? '-sm' : size === 'large' ? '-lg' : '';
-  const sizeClass = sizeSuffix ? `${classNamePrefix}-spin${sizeSuffix}` : '';
-  const wrapperClass = `${propClass || ''} ${classNamePrefix}-spin ${sizeClass} ${classNamePrefix}-spin-spinning ${DU_BOIS_ENABLE_ANIMATION_CLASSNAME}`.trim();
-  const className = `${classNamePrefix}-spin-dot ${DU_BOIS_ENABLE_ANIMATION_CLASSNAME}`.trim();
-  return (
-    // className has to follow {...props}, otherwise is `css` prop is passed down it will overwrite our className
-    jsx("div", {
-      ...props,
-      className: wrapperClass,
-      children: jsx(AccessibleContainer, {
-        label: label,
-        children: jsx(LoadingIcon, {
-          css: cssSpinner(theme, frameRate, delay),
-          className: className
-        })
+  return jsx("div", {
+    css: /*#__PURE__*/css({
+      color: theme.colors.textSecondary,
+      fontSize: theme.typography.fontSizeSm,
+      ...(disabled && {
+        color: theme.colors.actionDisabledText
       })
-    })
-  );
+    }, process.env.NODE_ENV === "production" ? "" : ";label:HintRow;"),
+    children: children
+  });
 };
 
-const DialogComboboxLoadingSpinner = props => {
+const LoadingSpinner = props => {
   const {
     theme
   } = useDesignSystemTheme();
@@ -6497,13 +6541,53 @@ const DialogComboboxLoadingSpinner = props => {
       '> span': {
         fontSize: 20
       }
-    }, process.env.NODE_ENV === "production" ? "" : ";label:DialogComboboxLoadingSpinner;"),
+    }, process.env.NODE_ENV === "production" ? "" : ";label:LoadingSpinner;"),
     ...props
   });
 };
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$k() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-const getContentWrapperStyles = (theme, _ref) => {
+const SectionHeader = _ref => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx("div", {
+    ...props,
+    css: /*#__PURE__*/css({
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      padding: `${theme.spacing.xs}px ${theme.spacing.lg / 2}px`,
+      alignSelf: 'stretch',
+      fontWeight: 400,
+      color: theme.colors.textSecondary
+    }, process.env.NODE_ENV === "production" ? "" : ";label:SectionHeader;"),
+    children: children
+  });
+};
+
+const Separator = props => {
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx("div", {
+    ...props,
+    css: /*#__PURE__*/css({
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      margin: `${theme.spacing.xs}px ${theme.spacing.lg / 2}px`,
+      border: `1px solid ${theme.colors.borderDecorative}`,
+      borderBottom: 0,
+      alignSelf: 'stretch'
+    }, process.env.NODE_ENV === "production" ? "" : ";label:Separator;")
+  });
+};
+
+const getComboboxContentWrapperStyles = (theme, _ref) => {
   let {
     maxHeight = '100vh',
     maxWidth = '100vw',
@@ -6527,22 +6611,98 @@ const getContentWrapperStyles = (theme, _ref) => {
     boxSizing: 'border-box',
     border: `1px solid ${theme.colors.border}`,
     boxShadow: theme.general.shadowLow,
-    borderRadius: 4,
+    borderRadius: theme.general.borderRadiusBase,
     colorScheme: theme.isDarkMode ? 'dark' : 'light'
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getContentWrapperStyles;");
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getComboboxContentWrapperStyles;");
 };
-var _ref3$5 = process.env.NODE_ENV === "production" ? {
-  name: "1ij1o5n",
-  styles: "display:flex;flex-direction:column;align-items:flex-start;justify-content:center"
-} : {
-  name: "189loa6-DialogComboboxContent",
-  styles: "display:flex;flex-direction:column;align-items:flex-start;justify-content:center;label:DialogComboboxContent;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$k
+const getComboboxOptionItemWrapperStyles = theme => {
+  return /*#__PURE__*/css(importantify({
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+    alignSelf: 'stretch',
+    padding: '6px 32px 6px 12px',
+    lineHeight: theme.typography.lineHeightBase,
+    boxSizing: 'content-box',
+    cursor: 'pointer',
+    userSelect: 'none',
+    '&:hover, &[data-highlighted="true"]': {
+      background: theme.colors.actionTertiaryBackgroundHover
+    },
+    '&:focus': {
+      background: theme.colors.actionTertiaryBackgroundHover,
+      outline: 'none'
+    },
+    '&[disabled]': {
+      pointerEvents: 'none',
+      color: theme.colors.actionDisabledText,
+      background: theme.colors.backgroundPrimary
+    }
+  }), process.env.NODE_ENV === "production" ? "" : ";label:getComboboxOptionItemWrapperStyles;");
 };
-const DialogComboboxContent = /*#__PURE__*/forwardRef((_ref2, forwardedRef) => {
-  let {
-    children,
-    loading,
+const getInfoIconStyles = theme => {
+  return /*#__PURE__*/css({
+    paddingLeft: theme.spacing.xs,
+    color: theme.colors.textSecondary,
+    pointerEvents: 'all',
+    cursor: 'pointer',
+    verticalAlign: 'middle'
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getInfoIconStyles;");
+};
+const getCheckboxStyles = (theme, textOverflowMode) => {
+  return /*#__PURE__*/css({
+    pointerEvents: 'none',
+    height: 'unset',
+    width: '100%',
+    '& > label': {
+      display: 'flex',
+      width: '100%',
+      fontSize: theme.typography.fontSizeBase,
+      fontStyle: 'normal',
+      fontWeight: 400,
+      cursor: 'pointer',
+      '& > span:first-of-type': {
+        alignSelf: 'flex-start',
+        marginTop: theme.spacing.xs / 2
+      },
+      '& > span:last-of-type': {
+        paddingRight: 0,
+        width: '100%',
+        overflow: 'hidden',
+        wordBreak: 'break-word',
+        ...(textOverflowMode === 'ellipsis' ? {
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap'
+        } : {})
+      }
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getCheckboxStyles;");
+};
+const getFooterStyles = theme => {
+  return /*#__PURE__*/css({
+    width: '100%',
+    background: theme.colors.backgroundPrimary,
+    padding: `${theme.spacing.sm}px ${theme.spacing.lg / 2}px ${theme.spacing.sm}px ${theme.spacing.lg / 2}px`,
+    position: 'sticky',
+    bottom: 0
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getFooterStyles;");
+};
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__$s() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var _ref2$e = process.env.NODE_ENV === "production" ? {
+  name: "1ij1o5n",
+  styles: "display:flex;flex-direction:column;align-items:flex-start;justify-content:center"
+} : {
+  name: "189loa6-DialogComboboxContent",
+  styles: "display:flex;flex-direction:column;align-items:flex-start;justify-content:center;label:DialogComboboxContent;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$s
+};
+const DialogComboboxContent = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
+  let {
+    children,
+    loading,
+    loadingDescription = 'DialogComboboxContent',
     matchTriggerWidth,
     textOverflowMode,
     maxHeight = 'var(--radix-popover-content-available-height)',
@@ -6554,7 +6714,7 @@ const DialogComboboxContent = /*#__PURE__*/forwardRef((_ref2, forwardedRef) => {
     side = 'bottom',
     sideOffset = 4,
     ...restProps
-  } = _ref2;
+  } = _ref;
   const {
     theme
   } = useDesignSystemTheme();
@@ -6618,7 +6778,7 @@ const DialogComboboxContent = /*#__PURE__*/forwardRef((_ref2, forwardedRef) => {
       "aria-busy": loading,
       role: "listbox",
       "aria-multiselectable": multiSelect,
-      css: getContentWrapperStyles(theme, {
+      css: getComboboxContentWrapperStyles(theme, {
         maxHeight,
         maxWidth,
         minHeight,
@@ -6631,11 +6791,12 @@ const DialogComboboxContent = /*#__PURE__*/forwardRef((_ref2, forwardedRef) => {
       ...restProps,
       ref: contentRef,
       children: jsx("div", {
-        css: _ref3$5,
-        children: loading ? jsx(DialogComboboxLoadingSpinner, {
+        css: _ref2$e,
+        children: loading ? jsx(LoadingSpinner, {
           "aria-label": "Loading",
-          alt: "Loading spinner"
-        }) : children ? children : jsx(DialogComboboxEmpty, {})
+          alt: "Loading spinner",
+          loadingDescription: loadingDescription
+        }) : children ? children : jsx(EmptyResults, {})
       })
     })
   });
@@ -6670,15 +6831,6 @@ const DialogComboboxCountBadge = props => {
   });
 };
 
-const getFooterStyles = theme => {
-  return /*#__PURE__*/css({
-    width: '100%',
-    background: theme.colors.backgroundPrimary,
-    padding: `${theme.spacing.sm}px ${theme.spacing.lg / 2}px ${theme.spacing.sm}px ${theme.spacing.lg / 2}px`,
-    position: 'sticky',
-    bottom: 0
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getFooterStyles;");
-};
 const DialogComboboxFooter = _ref => {
   let {
     children,
@@ -6735,109 +6887,6 @@ const DialogComboboxOptionListContextProvider = _ref => {
   });
 };
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$j() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-var _ref2$7 = process.env.NODE_ENV === "production" ? {
-  name: "1pgv7dg",
-  styles: "display:flex;flex-direction:column;align-items:flex-start;width:100%"
-} : {
-  name: "1dtf9pj-DialogComboboxOptionList",
-  styles: "display:flex;flex-direction:column;align-items:flex-start;width:100%;label:DialogComboboxOptionList;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$j
-};
-const DialogComboboxOptionList = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
-  let {
-    children,
-    loading,
-    withProgressiveLoading,
-    ...restProps
-  } = _ref;
-  const {
-    isInsideDialogCombobox
-  } = useDialogComboboxContext();
-  const ref = useRef(null);
-  useImperativeHandle(forwardedRef, () => ref.current);
-  const [lookAhead, setLookAhead] = useState('');
-  if (!isInsideDialogCombobox) {
-    throw new Error('`DialogComboboxOptionList` must be used within `DialogCombobox`');
-  }
-  const lookAheadTimeout = useRef(null);
-  useEffect(() => {
-    if (lookAheadTimeout.current) {
-      clearTimeout(lookAheadTimeout.current);
-    }
-    lookAheadTimeout.current = setTimeout(() => {
-      setLookAhead('');
-    }, 1500);
-    return () => {
-      if (lookAheadTimeout.current) {
-        clearTimeout(lookAheadTimeout.current);
-      }
-    };
-  }, [lookAhead]);
-  useEffect(() => {
-    var _ref$current;
-    if (loading && !withProgressiveLoading) {
-      return;
-    }
-    const optionItems = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelectorAll('[role="option"]');
-    const hasTabIndexedOption = Array.from(optionItems !== null && optionItems !== void 0 ? optionItems : []).some(optionItem => {
-      return optionItem.getAttribute('tabindex') === '0';
-    });
-    if (!hasTabIndexedOption) {
-      const firstOptionItem = optionItems === null || optionItems === void 0 ? void 0 : optionItems[0];
-      if (firstOptionItem) {
-        firstOptionItem.setAttribute('tabindex', '0');
-      }
-    }
-  }, [loading, withProgressiveLoading]);
-  return jsx("div", {
-    ref: ref,
-    "aria-busy": loading,
-    css: _ref2$7,
-    ...restProps,
-    children: jsx(DialogComboboxOptionListContextProvider, {
-      value: {
-        isInsideDialogComboboxOptionList: true,
-        lookAhead,
-        setLookAhead
-      },
-      children: loading ? withProgressiveLoading ? jsxs(Fragment, {
-        children: [children, jsx(DialogComboboxLoadingSpinner, {
-          "aria-label": "Loading",
-          alt: "Loading spinner"
-        })]
-      }) : jsx(DialogComboboxLoadingSpinner, {
-        "aria-label": "Loading",
-        alt: "Loading spinner"
-      }) : children && Children.toArray(children).some(child => /*#__PURE__*/React__default.isValidElement(child)) ? children : jsx(DialogComboboxEmpty, {})
-    })
-  });
-});
-
-const InfoTooltip = _ref => {
-  let {
-    title,
-    tooltipProps
-  } = _ref;
-  const {
-    theme
-  } = useDesignSystemTheme();
-  return jsx(Tooltip, {
-    title: title,
-    ...tooltipProps,
-    children: jsx(InfoCircleOutlined, {
-      css: /*#__PURE__*/css({
-        fontSize: theme.typography.fontSizeSm,
-        color: theme.colors.textSecondary
-      }, process.env.NODE_ENV === "production" ? "" : ";label:InfoTooltip;")
-    })
-  });
-};
-
-const useDialogComboboxOptionListContext = () => {
-  return useContext(DialogComboboxOptionListContext);
-};
-
 const getDialogComboboxOptionLabelWidth = (theme, width) => {
   const paddingLeft = theme.spacing.xs + theme.spacing.sm;
   const iconWidth = theme.spacing.md;
@@ -6847,39 +6896,6 @@ const getDialogComboboxOptionLabelWidth = (theme, width) => {
   }
   return width - paddingLeft + iconWidth + labelMarginLeft;
 };
-const getDialogComboboxOptionItemWrapperStyles = theme => {
-  return /*#__PURE__*/css(importantify({
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    justifyContent: 'flex-start',
-    alignSelf: 'stretch',
-    padding: '6px 32px 6px 12px',
-    lineHeight: theme.typography.lineHeightBase,
-    boxSizing: 'content-box',
-    cursor: 'pointer',
-    userSelect: 'none',
-    '&:hover': {
-      background: theme.colors.actionTertiaryBackgroundHover
-    },
-    '&:focus': {
-      background: theme.colors.actionTertiaryBackgroundHover,
-      outline: 'none'
-    },
-    '&[disabled]': {
-      pointerEvents: 'none',
-      color: theme.colors.actionDisabledText,
-      background: theme.colors.backgroundPrimary
-    }
-  }), process.env.NODE_ENV === "production" ? "" : ";label:getDialogComboboxOptionItemWrapperStyles;");
-};
-const infoIconStyles = theme => ({
-  paddingLeft: theme.spacing.xs,
-  color: theme.colors.textSecondary,
-  pointerEvents: 'all',
-  cursor: 'pointer',
-  verticalAlign: 'middle'
-});
 function findClosestOptionSibling(element, direction) {
   const nextSibling = direction === 'previous' ? element.previousElementSibling : element.nextElementSibling;
   if ((nextSibling === null || nextSibling === void 0 ? void 0 : nextSibling.getAttribute('role')) === 'option') {
@@ -6893,6 +6909,31 @@ function findClosestOptionSibling(element, direction) {
   }
   return null;
 }
+const highlightOption = function (currentSelection, prevSelection) {
+  var _currentSelection$scr;
+  let focus = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  if (prevSelection) {
+    prevSelection.setAttribute('tabIndex', '-1');
+    prevSelection.setAttribute('data-highlighted', 'false');
+  }
+  if (focus) {
+    currentSelection.focus();
+  }
+  currentSelection.setAttribute('tabIndex', '0');
+  currentSelection.setAttribute('data-highlighted', 'true');
+  (_currentSelection$scr = currentSelection.scrollIntoView) === null || _currentSelection$scr === void 0 ? void 0 : _currentSelection$scr.call(currentSelection, {
+    block: 'center'
+  });
+};
+const findHighlightedOption = options => {
+  var _options$find;
+  return (_options$find = options.find(option => option.getAttribute('data-highlighted') === 'true')) !== null && _options$find !== void 0 ? _options$find : undefined;
+};
+const getContentOptions = element => {
+  var _element$closest;
+  const options = (_element$closest = element.closest('[data-combobox-option-list="true"]')) === null || _element$closest === void 0 ? void 0 : _element$closest.querySelectorAll('[role="option"]');
+  return options ? Array.from(options) : undefined;
+};
 const getKeyboardNavigationFunctions = (handleSelect, _ref) => {
   let {
     onKeyDown,
@@ -6907,18 +6948,26 @@ const getKeyboardNavigationFunctions = (handleSelect, _ref) => {
           e.preventDefault();
           const nextSibling = findClosestOptionSibling(e.currentTarget, 'next');
           if (nextSibling) {
-            e.currentTarget.setAttribute('tabIndex', '-1');
-            nextSibling.focus();
-            nextSibling.setAttribute('tabIndex', '0');
+            highlightOption(nextSibling, e.currentTarget);
+          } else {
+            var _getContentOptions;
+            const firstOption = (_getContentOptions = getContentOptions(e.currentTarget)) === null || _getContentOptions === void 0 ? void 0 : _getContentOptions[0];
+            if (firstOption) {
+              highlightOption(firstOption, e.currentTarget);
+            }
           }
           break;
         case 'ArrowUp':
           e.preventDefault();
           const previousSibling = findClosestOptionSibling(e.currentTarget, 'previous');
           if (previousSibling) {
-            e.currentTarget.setAttribute('tabIndex', '-1');
-            previousSibling.focus();
-            previousSibling.setAttribute('tabIndex', '0');
+            highlightOption(previousSibling, e.currentTarget);
+          } else {
+            var _getContentOptions2;
+            const lastOption = (_getContentOptions2 = getContentOptions(e.currentTarget)) === null || _getContentOptions2 === void 0 ? void 0 : _getContentOptions2.slice(-1)[0];
+            if (lastOption) {
+              highlightOption(lastOption, e.currentTarget);
+            }
           }
           break;
         case 'Enter':
@@ -6967,50 +7016,174 @@ const dialogComboboxLookAheadKeyDown = (e, setLookAhead, lookAhead) => {
   }
 };
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$i() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-var _ref2$6 = process.env.NODE_ENV === "production" ? {
-  name: "zjik7",
-  styles: "display:flex"
+function _EMOTION_STRINGIFIED_CSS_ERROR__$r() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var _ref2$d = process.env.NODE_ENV === "production" ? {
+  name: "1pgv7dg",
+  styles: "display:flex;flex-direction:column;align-items:flex-start;width:100%"
 } : {
-  name: "tiu4as-content",
-  styles: "display:flex;label:content;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$i
+  name: "1dtf9pj-DialogComboboxOptionList",
+  styles: "display:flex;flex-direction:column;align-items:flex-start;width:100%;label:DialogComboboxOptionList;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$r
 };
-const DuboisDialogComboboxOptionListCheckboxItem = /*#__PURE__*/forwardRef((_ref, ref) => {
+const DialogComboboxOptionList = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
   let {
-    value,
-    checked,
-    indeterminate,
-    onChange,
     children,
-    disabledReason,
-    _TYPE,
-    ...props
+    loading,
+    loadingDescription = 'DialogComboboxOptionList',
+    withProgressiveLoading,
+    ...restProps
   } = _ref;
   const {
-    theme
-  } = useDesignSystemTheme();
-  const {
-    textOverflowMode,
-    contentWidth
+    isInsideDialogCombobox
   } = useDialogComboboxContext();
-  const {
-    isInsideDialogComboboxOptionList,
-    setLookAhead,
-    lookAhead
-  } = useDialogComboboxOptionListContext();
-  if (!isInsideDialogComboboxOptionList) {
-    throw new Error('`DialogComboboxOptionListCheckboxItem` must be used within `DialogComboboxOptionList`');
+  const ref = useRef(null);
+  useImperativeHandle(forwardedRef, () => ref.current);
+  const [lookAhead, setLookAhead] = useState('');
+  if (!isInsideDialogCombobox) {
+    throw new Error('`DialogComboboxOptionList` must be used within `DialogCombobox`');
   }
-  const handleSelect = () => {
-    if (onChange) {
-      onChange(value);
+  const lookAheadTimeout = useRef(null);
+  useEffect(() => {
+    if (lookAheadTimeout.current) {
+      clearTimeout(lookAheadTimeout.current);
+    }
+    lookAheadTimeout.current = setTimeout(() => {
+      setLookAhead('');
+    }, 1500);
+    return () => {
+      if (lookAheadTimeout.current) {
+        clearTimeout(lookAheadTimeout.current);
+      }
+    };
+  }, [lookAhead]);
+  useEffect(() => {
+    var _ref$current;
+    if (loading && !withProgressiveLoading) {
+      return;
+    }
+    const optionItems = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelectorAll('[role="option"]');
+    const hasTabIndexedOption = Array.from(optionItems !== null && optionItems !== void 0 ? optionItems : []).some(optionItem => {
+      return optionItem.getAttribute('tabindex') === '0';
+    });
+    if (!hasTabIndexedOption) {
+      const firstOptionItem = optionItems === null || optionItems === void 0 ? void 0 : optionItems[0];
+      if (firstOptionItem) {
+        highlightOption(firstOptionItem, undefined, false);
+      }
+    }
+  }, [loading, withProgressiveLoading]);
+  const handleOnMouseEnter = event => {
+    const target = event.target;
+    if (target) {
+      var _target$closest;
+      const options = target.hasAttribute('data-combobox-option-list') ? target.querySelectorAll('[role="option"]') : target === null || target === void 0 ? void 0 : (_target$closest = target.closest('[data-combobox-option-list="true"]')) === null || _target$closest === void 0 ? void 0 : _target$closest.querySelectorAll('[role="option"]');
+      if (options) {
+        options.forEach(option => option.removeAttribute('data-highlighted'));
+      }
     }
   };
-  let content = children !== null && children !== void 0 ? children : value;
-  if (props.disabled && disabledReason) {
-    content = jsxs("div", {
-      css: _ref2$6,
+  return jsx("div", {
+    ref: ref,
+    "aria-busy": loading,
+    "data-combobox-option-list": "true",
+    css: _ref2$d,
+    onMouseEnter: handleOnMouseEnter,
+    ...restProps,
+    children: jsx(DialogComboboxOptionListContextProvider, {
+      value: {
+        isInsideDialogComboboxOptionList: true,
+        lookAhead,
+        setLookAhead
+      },
+      children: loading ? withProgressiveLoading ? jsxs(Fragment, {
+        children: [children, jsx(LoadingSpinner, {
+          "aria-label": "Loading",
+          alt: "Loading spinner",
+          loadingDescription: loadingDescription
+        })]
+      }) : jsx(LoadingSpinner, {
+        "aria-label": "Loading",
+        alt: "Loading spinner",
+        loadingDescription: loadingDescription
+      }) : children && Children.toArray(children).some(child => /*#__PURE__*/React__default.isValidElement(child)) ? children : jsx(EmptyResults, {})
+    })
+  });
+});
+
+const InfoTooltip = _ref => {
+  let {
+    title,
+    tooltipProps,
+    iconTitle,
+    ...iconProps
+  } = _ref;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(Tooltip, {
+    title: title,
+    ...tooltipProps,
+    children: jsx(InfoCircleOutlined, {
+      "aria-hidden": "false",
+      title: iconTitle,
+      "aria-label": iconTitle,
+      css: /*#__PURE__*/css({
+        fontSize: theme.typography.fontSizeSm,
+        color: theme.colors.textSecondary
+      }, process.env.NODE_ENV === "production" ? "" : ";label:InfoTooltip;"),
+      ...iconProps
+    })
+  });
+};
+
+const useDialogComboboxOptionListContext = () => {
+  return useContext(DialogComboboxOptionListContext);
+};
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__$q() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var _ref2$c = process.env.NODE_ENV === "production" ? {
+  name: "zjik7",
+  styles: "display:flex"
+} : {
+  name: "tiu4as-content",
+  styles: "display:flex;label:content;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$q
+};
+const DuboisDialogComboboxOptionListCheckboxItem = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    value,
+    checked,
+    indeterminate,
+    onChange,
+    children,
+    disabledReason,
+    _TYPE,
+    ...props
+  } = _ref;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const {
+    textOverflowMode,
+    contentWidth
+  } = useDialogComboboxContext();
+  const {
+    isInsideDialogComboboxOptionList,
+    setLookAhead,
+    lookAhead
+  } = useDialogComboboxOptionListContext();
+  if (!isInsideDialogComboboxOptionList) {
+    throw new Error('`DialogComboboxOptionListCheckboxItem` must be used within `DialogComboboxOptionList`');
+  }
+  const handleSelect = () => {
+    if (onChange) {
+      onChange(value);
+    }
+  };
+  let content = children !== null && children !== void 0 ? children : value;
+  if (props.disabled && disabledReason) {
+    content = jsxs("div", {
+      css: _ref2$c,
       children: [jsx("div", {
         children: content
       }), jsx("div", {
@@ -7018,8 +7191,10 @@ const DuboisDialogComboboxOptionListCheckboxItem = /*#__PURE__*/forwardRef((_ref
           title: disabledReason,
           placement: "right",
           children: jsx("span", {
-            css: infoIconStyles(theme),
-            children: jsx(InfoIcon, {})
+            css: getInfoIconStyles(theme),
+            children: jsx(InfoIcon, {
+              "aria-hidden": "false"
+            })
           })
         })
       })]
@@ -7031,7 +7206,7 @@ const DuboisDialogComboboxOptionListCheckboxItem = /*#__PURE__*/forwardRef((_ref
     // Using aria-selected instead of aria-checked because the parent listbox
     ,
     "aria-selected": indeterminate ? false : checked,
-    css: [getDialogComboboxOptionItemWrapperStyles(theme), process.env.NODE_ENV === "production" ? "" : ";label:DuboisDialogComboboxOptionListCheckboxItem;"],
+    css: [getComboboxOptionItemWrapperStyles(theme), process.env.NODE_ENV === "production" ? "" : ";label:DuboisDialogComboboxOptionListCheckboxItem;"],
     ...props,
     onClick: e => {
       if (props.disabled) {
@@ -7049,31 +7224,11 @@ const DuboisDialogComboboxOptionListCheckboxItem = /*#__PURE__*/forwardRef((_ref
     children: jsx(Checkbox, {
       disabled: props.disabled,
       isChecked: indeterminate ? null : checked,
-      css: /*#__PURE__*/css({
-        pointerEvents: 'none',
-        height: 'unset',
-        width: '100%',
-        '& > label': {
-          width: '100%',
-          fontSize: theme.typography.fontSizeBase,
-          fontStyle: 'normal',
-          fontWeight: 400,
-          cursor: 'pointer',
-          '& > span:last-of-type': {
-            paddingRight: 0,
-            width: '100%',
-            overflow: 'hidden',
-            wordBreak: 'break-word',
-            ...(textOverflowMode === 'ellipsis' && {
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap'
-            }),
-            ...(contentWidth ? {
-              width: getDialogComboboxOptionLabelWidth(theme, contentWidth)
-            } : {})
-          }
+      css: [getCheckboxStyles(theme, textOverflowMode), contentWidth ? {
+        '& > span:last-of-type': {
+          width: getDialogComboboxOptionLabelWidth(theme, contentWidth)
         }
-      }, process.env.NODE_ENV === "production" ? "" : ";label:DuboisDialogComboboxOptionListCheckboxItem;"),
+      } : {}, process.env.NODE_ENV === "production" ? "" : ";label:DuboisDialogComboboxOptionListCheckboxItem;"],
       tabIndex: -1
       // Needed because Antd handles keyboard inputs as clicks
       ,
@@ -7090,7 +7245,7 @@ DuboisDialogComboboxOptionListCheckboxItem.defaultProps = {
 };
 const DialogComboboxOptionListCheckboxItem = DuboisDialogComboboxOptionListCheckboxItem;
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$h() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__$p() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const extractTextContent = node => {
   if (typeof node === 'string' || typeof node === 'number') {
     return node.toString();
@@ -7117,13 +7272,13 @@ const filterChildren = (children, searchValue) => {
     return child;
   })) === null || _React$Children$map === void 0 ? void 0 : _React$Children$map.filter(child => child);
 };
-var _ref2$5 = process.env.NODE_ENV === "production" ? {
+var _ref2$b = process.env.NODE_ENV === "production" ? {
   name: "1d3w5wq",
   styles: "width:100%"
 } : {
   name: "csdki6-DialogComboboxOptionListSearch",
   styles: "width:100%;label:DialogComboboxOptionListSearch;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$h
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$p
 };
 const DialogComboboxOptionListSearch = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
   var _filteredChildren, _filteredChildren$pro, _filteredChildren2;
@@ -7158,9 +7313,68 @@ const DialogComboboxOptionListSearch = /*#__PURE__*/forwardRef((_ref, forwardedR
       filteredChildren = /*#__PURE__*/React__default.cloneElement(children, {}, filteredChildren);
     }
   }
+  const inputWrapperRef = useRef(null);
+
+  // When the search value changes, highlight the first option
+  useEffect(() => {
+    if (!inputWrapperRef.current) {
+      return;
+    }
+    const optionItems = getContentOptions(inputWrapperRef.current);
+    if (optionItems) {
+      // Reset previous highlights
+      const highlightedOption = findHighlightedOption(optionItems);
+      const firstOptionItem = optionItems === null || optionItems === void 0 ? void 0 : optionItems[0];
+      if (firstOptionItem) {
+        highlightOption(firstOptionItem, highlightedOption, false);
+      }
+    }
+  }, [searchValue]);
+  const handleOnKeyDown = event => {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter') {
+      event.preventDefault();
+    } else {
+      return;
+    }
+
+    // Find closest parent of type DialogComboboxOptionList and get all options within it
+    const options = getContentOptions(event.target);
+    if (!options) {
+      return;
+    }
+    const highlightedOption = findHighlightedOption(options);
+
+    // If the user is navigating the option is highlighted without focusing in order to avoid losing focus on the input
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      if (highlightedOption) {
+        const nextOption = findClosestOptionSibling(highlightedOption, event.key === 'ArrowDown' ? 'next' : 'previous');
+        if (nextOption) {
+          highlightOption(nextOption, highlightedOption, false);
+        } else if (event.key === 'ArrowDown') {
+          // If there is no next option, highlight the first option
+          const firstOption = options[0];
+          highlightOption(firstOption, highlightedOption, false);
+        } else if (event.key === 'ArrowUp') {
+          // If there is no previous option, highlight the last option
+          const lastOption = options[options.length - 1];
+          highlightOption(lastOption, highlightedOption, false);
+        }
+      } else {
+        // In case there is no highlighted option, highlight the first / last option depending on key
+        const nextOption = event.key === 'ArrowDown' ? options[0] : options[options.length - 1];
+        if (nextOption) {
+          highlightOption(nextOption, undefined, false);
+        }
+      }
+      // On Enter trigger a click event on the highlighted option
+    } else if (event.key === 'Enter' && highlightedOption) {
+      highlightedOption.click();
+    }
+  };
   const childrenIsNotEmpty = Children.toArray(hasWrapper ? children.props.children : children).some(child => /*#__PURE__*/React__default.isValidElement(child));
   return jsxs(Fragment, {
     children: [jsx("div", {
+      ref: inputWrapperRef,
       css: /*#__PURE__*/css({
         padding: `${theme.spacing.sm}px ${theme.spacing.lg / 2}px ${theme.spacing.sm}px`,
         width: '100%',
@@ -7177,14 +7391,19 @@ const DialogComboboxOptionListSearch = /*#__PURE__*/forwardRef((_ref, forwardedR
         prefix: jsx(SearchIcon, {}),
         placeholder: "Search",
         onChange: handleOnChange,
+        onKeyDown: event => {
+          var _restProps$onKeyDown;
+          handleOnKeyDown(event);
+          (_restProps$onKeyDown = restProps.onKeyDown) === null || _restProps$onKeyDown === void 0 ? void 0 : _restProps$onKeyDown.call(restProps, event);
+        },
         value: searchValue,
         ...restProps
       })
     }), virtualized ? children : (hasWrapper && (_filteredChildren = filteredChildren) !== null && _filteredChildren !== void 0 && (_filteredChildren$pro = _filteredChildren.props.children) !== null && _filteredChildren$pro !== void 0 && _filteredChildren$pro.length || !hasWrapper && (_filteredChildren2 = filteredChildren) !== null && _filteredChildren2 !== void 0 && _filteredChildren2.length) && childrenIsNotEmpty ? jsx("div", {
       "aria-live": "polite",
-      css: _ref2$5,
+      css: _ref2$b,
       children: filteredChildren
-    }) : jsx(DialogComboboxEmpty, {})]
+    }) : jsx(EmptyResults, {})]
   });
 });
 
@@ -7207,22 +7426,22 @@ const useSelectContext = () => {
   return useContext(SelectContext);
 };
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$g() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-var _ref2$4 = process.env.NODE_ENV === "production" ? {
+function _EMOTION_STRINGIFIED_CSS_ERROR__$o() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var _ref2$a = process.env.NODE_ENV === "production" ? {
   name: "zjik7",
   styles: "display:flex"
 } : {
   name: "tiu4as-content",
   styles: "display:flex;label:content;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$g
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$o
 };
-var _ref3$4 = process.env.NODE_ENV === "production" ? {
+var _ref3$5 = process.env.NODE_ENV === "production" ? {
   name: "kjj0ot",
   styles: "padding-top:2px"
 } : {
   name: "15osdio-DuboisDialogComboboxOptionListSelectItem",
   styles: "padding-top:2px;label:DuboisDialogComboboxOptionListSelectItem;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$g
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$o
 };
 const DuboisDialogComboboxOptionListSelectItem = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -7301,22 +7520,24 @@ const DuboisDialogComboboxOptionListSelectItem = /*#__PURE__*/forwardRef((_ref,
   let content = children !== null && children !== void 0 ? children : value;
   if (props.disabled && disabledReason) {
     content = jsxs("div", {
-      css: _ref2$4,
+      css: _ref2$a,
       children: [jsx("div", {
         children: content
       }), jsx(Tooltip, {
         title: disabledReason,
         placement: "right",
         children: jsx("span", {
-          css: infoIconStyles(theme),
-          children: jsx(InfoIcon, {})
+          css: getInfoIconStyles(theme),
+          children: jsx(InfoIcon, {
+            "aria-hidden": "false"
+          })
         })
       })]
     });
   }
   return jsxs("div", {
     ref: itemRef,
-    css: [getDialogComboboxOptionItemWrapperStyles(theme), {
+    css: [getComboboxOptionItemWrapperStyles(theme), {
       '&:focus': {
         background: theme.colors.actionTertiaryBackgroundHover,
         outline: 'none'
@@ -7338,9 +7559,8 @@ const DuboisDialogComboboxOptionListSelectItem = /*#__PURE__*/forwardRef((_ref,
     }),
     role: "option",
     "aria-selected": checked,
-    "aria-label": value,
     children: [checked ? jsx(CheckIcon, {
-      css: _ref3$4
+      css: _ref3$5
     }) : jsx("div", {
       style: {
         width: 16,
@@ -7372,20 +7592,21 @@ DuboisDialogComboboxOptionListSelectItem.defaultProps = {
 };
 const DialogComboboxOptionListSelectItem = DuboisDialogComboboxOptionListSelectItem;
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$f() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-var _ref2$3 = process.env.NODE_ENV === "production" ? {
+function _EMOTION_STRINGIFIED_CSS_ERROR__$n() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var _ref2$9 = process.env.NODE_ENV === "production" ? {
   name: "1pgv7dg",
   styles: "display:flex;flex-direction:column;align-items:flex-start;width:100%"
 } : {
   name: "18t0chz-DialogComboboxOptionControlledList",
   styles: "display:flex;flex-direction:column;align-items:flex-start;width:100%;label:DialogComboboxOptionControlledList;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$f
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$n
 };
 const DialogComboboxOptionControlledList = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
   let {
     options,
     onChange,
     loading,
+    loadingDescription = 'DialogComboboxOptionControlledList',
     withProgressiveLoading,
     withSearch,
     showAllOption,
@@ -7404,6 +7625,8 @@ const DialogComboboxOptionControlledList = /*#__PURE__*/forwardRef((_ref, forwar
     throw new Error('`DialogComboboxOptionControlledList` must be used within `DialogCombobox`');
   }
   const lookAheadTimeout = useRef(null);
+  const ref = useRef(null);
+  useImperativeHandle(forwardedRef, () => ref.current);
   useEffect(() => {
     if (lookAheadTimeout.current) {
       clearTimeout(lookAheadTimeout.current);
@@ -7417,6 +7640,22 @@ const DialogComboboxOptionControlledList = /*#__PURE__*/forwardRef((_ref, forwar
       }
     };
   }, [lookAhead]);
+  useEffect(() => {
+    var _ref$current;
+    if (loading && !withProgressiveLoading) {
+      return;
+    }
+    const optionItems = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelectorAll('[role="option"]');
+    const hasTabIndexedOption = Array.from(optionItems !== null && optionItems !== void 0 ? optionItems : []).some(optionItem => {
+      return optionItem.getAttribute('tabindex') === '0';
+    });
+    if (!hasTabIndexedOption) {
+      const firstOptionItem = optionItems === null || optionItems === void 0 ? void 0 : optionItems[0];
+      if (firstOptionItem) {
+        highlightOption(firstOptionItem, undefined, false);
+      }
+    }
+  }, [loading, withProgressiveLoading]);
   const isOptionChecked = options.reduce((acc, option) => {
     acc[option] = value === null || value === void 0 ? void 0 : value.includes(option);
     return acc;
@@ -7459,7 +7698,7 @@ const DialogComboboxOptionControlledList = /*#__PURE__*/forwardRef((_ref, forwar
       }
     }
   };
-  const renderedOptions = jsxs(DialogComboboxOptionList, {
+  const renderedOptions = jsxs(Fragment, {
     children: [showAllOption && multiSelect && jsx(DialogComboboxOptionListCheckboxItem, {
       value: "all",
       onChange: handleSelectAll,
@@ -7476,12 +7715,18 @@ const DialogComboboxOptionControlledList = /*#__PURE__*/forwardRef((_ref, forwar
       checked: isOptionChecked[option],
       onChange: handleUpdate,
       children: option
-    }, key)) : jsx(DialogComboboxEmpty, {})]
+    }, key)) : jsx(EmptyResults, {})]
+  });
+  const optionList = jsx(DialogComboboxOptionList, {
+    children: withSearch ? jsx(DialogComboboxOptionListSearch, {
+      hasWrapper: true,
+      children: renderedOptions
+    }) : renderedOptions
   });
   return jsx("div", {
-    ref: forwardedRef,
+    ref: ref,
     "aria-busy": loading,
-    css: _ref2$3,
+    css: _ref2$9,
     ...restProps,
     children: jsx(DialogComboboxOptionListContextProvider, {
       value: {
@@ -7491,20 +7736,16 @@ const DialogComboboxOptionControlledList = /*#__PURE__*/forwardRef((_ref, forwar
       },
       children: jsx(Fragment, {
         children: loading ? withProgressiveLoading ? jsxs(Fragment, {
-          children: [withSearch ? jsx(DialogComboboxOptionListSearch, {
-            hasWrapper: true,
-            children: renderedOptions
-          }) : renderedOptions, jsx(DialogComboboxLoadingSpinner, {
+          children: [optionList, jsx(LoadingSpinner, {
             "aria-label": "Loading",
-            alt: "Loading spinner"
+            alt: "Loading spinner",
+            loadingDescription: loadingDescription
           })]
-        }) : jsx(DialogComboboxLoadingSpinner, {
+        }) : jsx(LoadingSpinner, {
           "aria-label": "Loading",
-          alt: "Loading spinner"
-        }) : withSearch ? jsx(DialogComboboxOptionListSearch, {
-          hasWrapper: true,
-          children: renderedOptions
-        }) : renderedOptions
+          alt: "Loading spinner",
+          loadingDescription: loadingDescription
+        }) : optionList
       })
     })
   });
@@ -7515,51 +7756,27 @@ const DialogComboboxSectionHeader = _ref => {
     children,
     ...props
   } = _ref;
-  const {
-    theme
-  } = useDesignSystemTheme();
   const {
     isInsideDialogCombobox
   } = useDialogComboboxContext();
   if (!isInsideDialogCombobox) {
     throw new Error('`DialogComboboxSectionHeader` must be used within `DialogCombobox`');
   }
-  return jsx("div", {
+  return jsx(SectionHeader, {
     ...props,
-    css: /*#__PURE__*/css({
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'flex-start',
-      padding: `${theme.spacing.xs}px ${theme.spacing.lg / 2}px`,
-      alignSelf: 'stretch',
-      fontWeight: 400,
-      color: theme.colors.textSecondary
-    }, process.env.NODE_ENV === "production" ? "" : ";label:DialogComboboxSectionHeader;"),
     children: children
   });
 };
 
 const DialogComboboxSeparator = props => {
-  const {
-    theme
-  } = useDesignSystemTheme();
   const {
     isInsideDialogCombobox
   } = useDialogComboboxContext();
   if (!isInsideDialogCombobox) {
     throw new Error('`DialogComboboxSeparator` must be used within `DialogCombobox`');
   }
-  return jsx("div", {
-    ...props,
-    css: /*#__PURE__*/css({
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'center',
-      margin: `${theme.spacing.xs}px ${theme.spacing.lg / 2}px`,
-      border: `1px solid ${theme.colors.borderDecorative}`,
-      borderBottom: 0,
-      alignSelf: 'stretch'
-    }, process.env.NODE_ENV === "production" ? "" : ";label:DialogComboboxSeparator;")
+  return jsx(Separator, {
+    ...props
   });
 };
 
@@ -7764,18 +7981,8 @@ const DialogComboboxTrigger = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
         }, process.env.NODE_ENV === "production" ? "" : ";label:triggerContent;"),
         children: selectPlaceholder
       })
-    }), allowClear && value !== null && value !== void 0 && value.length ? jsx(XCircleFillIcon, {
-      onClick: handleClear,
-      css: /*#__PURE__*/css({
-        color: theme.colors.textPlaceholder,
-        fontSize: theme.typography.fontSizeSm,
-        marginLeft: theme.spacing.xs,
-        ':hover': {
-          color: theme.colors.actionTertiaryTextHover
-        }
-      }, process.env.NODE_ENV === "production" ? "" : ";label:triggerContent;"),
-      role: "button",
-      "aria-label": "Clear selection"
+    }), allowClear && value !== null && value !== void 0 && value.length ? jsx(ClearSelectionButton, {
+      onClick: handleClear
     }) : null, jsx(ChevronDownIcon, {
       css: /*#__PURE__*/css({
         color: theme.colors.textSecondary,
@@ -7802,16 +8009,15 @@ const DialogComboboxTrigger = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
         }
       }, process.env.NODE_ENV === "production" ? "" : ";label:triggerContent;"),
       ref: triggerContentRef,
-      children: [withInlineLabel ? jsx("span", {
+      children: [withInlineLabel ? jsxs("span", {
         css: /*#__PURE__*/css({
           height: theme.typography.lineHeightBase,
           marginRight: theme.spacing.xs,
-          fontWeight: theme.typography.typographyBoldFontWeight,
           whiteSpace: 'unset',
           overflow: 'unset',
           textOverflow: 'unset'
         }, process.env.NODE_ENV === "production" ? "" : ";label:triggerContent;"),
-        children: label
+        children: [label, value !== null && value !== void 0 && value.length ? ':' : null]
       }) : !(value !== null && value !== void 0 && value.length) && jsx("span", {
         css: /*#__PURE__*/css({
           color: theme.colors.textPlaceholder
@@ -7829,18 +8035,8 @@ const DialogComboboxTrigger = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
           "aria-label": "Selected options count"
         })]
       }) : displayedValues]
-    }), allowClear && value !== null && value !== void 0 && value.length ? jsx(XCircleFillIcon, {
-      onClick: handleClear,
-      css: /*#__PURE__*/css({
-        color: theme.colors.textPlaceholder,
-        fontSize: theme.typography.fontSizeSm,
-        marginLeft: theme.spacing.xs,
-        ':hover': {
-          color: theme.colors.actionTertiaryTextHover
-        }
-      }, process.env.NODE_ENV === "production" ? "" : ";label:triggerContent;"),
-      role: "button",
-      "aria-label": "Clear selection"
+    }), allowClear && value !== null && value !== void 0 && value.length ? jsx(ClearSelectionButton, {
+      onClick: handleClear
     }) : null, withChevronIcon ? jsx(ChevronDownIcon, {
       css: /*#__PURE__*/css({
         color: theme.colors.textSecondary,
@@ -7860,7 +8056,9 @@ const DialogComboboxTrigger = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
       "aria-label": `Remove ${label}`,
       onClick: handleRemove,
       dangerouslySetForceIconStyles: true,
-      children: jsx(CloseIcon, {})
+      children: jsx(CloseIcon, {
+        "aria-hidden": "false"
+      })
     })]
   });
 });
@@ -7891,20 +8089,20 @@ const Spacer = _ref => {
   });
 };
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$e() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__$m() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const DEFAULT_WIDTH$1 = 320;
 const MIN_WIDTH = 320;
 const MAX_WIDTH = '90vw';
 const DEFAULT_POSITION = 'right';
 const ZINDEX_OVERLAY = 10;
 const ZINDEX_CONTENT = ZINDEX_OVERLAY + 10;
-var _ref2$2 = process.env.NODE_ENV === "production" ? {
+var _ref2$8 = process.env.NODE_ENV === "production" ? {
   name: "zh83op",
   styles: "flex-grow:1;margin-bottom:0;margin-top:0;white-space:nowrap;overflow:hidden"
 } : {
   name: "h5yqvj-Content",
   styles: "flex-grow:1;margin-bottom:0;margin-top:0;white-space:nowrap;overflow:hidden;label:Content;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$e
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$m
 };
 const Content$3 = _ref => {
   let {
@@ -8017,7 +8215,7 @@ const Content$3 = _ref => {
           children: [jsx(DialogPrimitive.Title, {
             title: typeof title === 'string' ? title : undefined,
             asChild: typeof title === 'string',
-            css: _ref2$2,
+            css: _ref2$8,
             children: typeof title === 'string' ? jsx(Typography.Title, {
               level: 2,
               withoutMargins: true,
@@ -8136,7 +8334,7 @@ const Dropdown = _ref => {
   });
 };
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$d() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__$l() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const {
   Title: Title$1,
   Paragraph
@@ -8149,8 +8347,9 @@ function getEmptyStyles(theme) {
     textAlign: 'center',
     maxWidth: 600,
     wordBreak: 'break-word',
-    // Set size of image to 64px
-    '> :first-child': {
+    // TODO: This isn't ideal, but migrating to a safer selector would require a SAFE flag / careful migration.
+    '> [role="img"]': {
+      // Set size of image to 64px
       fontSize: 64,
       color: theme.colors.actionDisabledText,
       marginBottom: theme.spacing.md
@@ -8177,13 +8376,13 @@ function getEmptyDescriptionStyles(theme, clsPrefix) {
   };
   return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getEmptyDescriptionStyles;");
 }
-var _ref$2 = process.env.NODE_ENV === "production" ? {
+var _ref$5 = process.env.NODE_ENV === "production" ? {
   name: "zl1inp",
   styles: "display:flex;justify-content:center"
 } : {
   name: "11tid6c-Empty",
   styles: "display:flex;justify-content:center;label:Empty;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$d
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$l
 };
 const Empty = props => {
   const {
@@ -8200,7 +8399,7 @@ const Empty = props => {
   } = props;
   return jsx("div", {
     ...dataProps,
-    css: _ref$2,
+    css: _ref$5,
     children: jsxs("div", {
       css: [getEmptyStyles(theme), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Empty;"],
       children: [image, title && jsx(Title$1, {
@@ -8389,7 +8588,8 @@ const Hint = props => {
   });
 };
 
-const getLabelStyles = (classNamePrefix, theme, _ref) => {
+function _EMOTION_STRINGIFIED_CSS_ERROR__$k() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const getLabelStyles$1 = (classNamePrefix, theme, _ref) => {
   let {
     inline
   } = _ref;
@@ -8406,6 +8606,14 @@ const getLabelStyles = (classNamePrefix, theme, _ref) => {
   };
   return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getLabelStyles;");
 };
+var _ref2$7 = process.env.NODE_ENV === "production" ? {
+  name: "s5xdrg",
+  styles: "display:flex;align-items:center"
+} : {
+  name: "53ggpt-Label",
+  styles: "display:flex;align-items:center;label:Label;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$k
+};
 const Label = props => {
   const {
     children,
@@ -8418,12 +8626,15 @@ const Label = props => {
     theme
   } = useDesignSystemTheme();
   return jsx("label", {
-    css: getLabelStyles(classNamePrefix, theme, {
+    css: getLabelStyles$1(classNamePrefix, theme, {
       inline
     }),
     className: classnames(`${classNamePrefix}-label`, className),
     ...restProps,
-    children: children
+    children: jsx("span", {
+      css: _ref2$7,
+      children: children
+    })
   });
 };
 
@@ -9097,6 +9308,7 @@ function DuboisSelect(_ref2, ref) {
     children,
     validationState,
     loading,
+    loadingDescription = 'Select',
     mode,
     options,
     notFoundContent,
@@ -9104,6 +9316,8 @@ function DuboisSelect(_ref2, ref) {
     dangerouslySetAntdProps,
     virtual,
     dropdownClassName,
+    id,
+    onDropdownVisibleChange,
     ...restProps
   } = _ref2;
   const {
@@ -9114,22 +9328,51 @@ function DuboisSelect(_ref2, ref) {
     USE_NEW_SELECT_DROPDOWN_STYLES
   } = useDesignSystemFlags();
   const clsPrefix = getPrefixedClassName('select');
+  const [isOpen, setIsOpen] = useState(false);
+  const [uniqueId, setUniqueId] = useState('');
+  useEffect(() => {
+    setUniqueId(id || _uniqueId('dubois-select-'));
+  }, [id]);
+  useEffect(() => {
+    var _document$getElementB;
+    // Ant doesn't populate aria-expanded on init (only on user interaction) so we need to do it ourselves
+    // in order to pass accessibility tests (Microsoft Accessibility Insights). See: JOBS-11125
+    (_document$getElementB = document.getElementById(uniqueId)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.setAttribute('aria-expanded', 'false');
+  }, [uniqueId]);
   return jsx(ClassNames, {
     children: _ref3 => {
       let {
         css: css$1
       } = _ref3;
-      return jsx(DesignSystemAntDConfigProvider, {
-        children: jsx(Select$1, {
+      return jsxs(DesignSystemAntDConfigProvider, {
+        children: [loading && jsx(LoadingState, {
+          description: loadingDescription
+        }), jsx(Select$1, {
+          onDropdownVisibleChange: visible => {
+            onDropdownVisibleChange === null || onDropdownVisibleChange === void 0 ? void 0 : onDropdownVisibleChange(visible);
+            setIsOpen(visible);
+          }
+          // unset aria-owns, aria-controls, and aria-activedescendant if the dropdown is closed;
+          // ant always sets these even if the dropdown isn't present in the DOM yet.
+          // This was flagged by Microsoft Accessibility Insights. See: JOBS-11125
+          ,
+          ...(!isOpen ? {
+            'aria-owns': undefined,
+            'aria-controls': undefined,
+            'aria-activedescendant': undefined
+          } : {}),
+          id: uniqueId,
           css: getSelectEmotionStyles({
             clsPrefix,
             theme,
             validationState
           }),
           removeIcon: jsx(CloseIcon, {
+            "aria-hidden": "false",
             css: getIconSizeStyle(theme)
           }),
           clearIcon: jsx(XCircleFillIcon, {
+            "aria-hidden": "false",
             css: getIconSizeStyle(theme, 12),
             "aria-label": "close-circle"
           }),
@@ -9137,6 +9380,7 @@ function DuboisSelect(_ref2, ref) {
           suffixIcon: loading && mode === 'tags' ? jsx(LoadingIcon, {
             spin: true,
             "aria-label": "loading",
+            "aria-hidden": "false",
             css: getIconSizeStyle(theme, 12)
           }) : jsx(ChevronDownIcon, {
             css: getIconSizeStyle(theme)
@@ -9172,13 +9416,14 @@ function DuboisSelect(_ref2, ref) {
               value: "select-loading-options",
               className: `${clsPrefix}-loading-options`,
               children: jsx(LoadingIcon, {
+                "aria-hidden": "false",
                 spin: true,
                 css: getLoadingIconStyles(theme),
                 "aria-label": "loading"
               })
             })]
           }) : children
-        })
+        })]
       });
     }
   });
@@ -9649,10 +9894,42 @@ const RHFControlledComponents = {
   RadioGroup: RHFControlledRadioGroup
 };
 
+const getHorizontalInputStyles = (theme, labelColWidth, inputColWidth) => {
+  return /*#__PURE__*/css({
+    display: 'flex',
+    gap: theme.spacing.sm,
+    '& > input, & > textarea, & > select': {
+      marginTop: '0 !important'
+    },
+    '& > div:nth-of-type(1)': {
+      width: labelColWidth
+    },
+    '& > div:nth-of-type(2)': {
+      width: inputColWidth
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getHorizontalInputStyles;");
+};
+const HorizontalFormRow = _ref => {
+  let {
+    children,
+    labelColWidth = '33%',
+    inputColWidth = '66%',
+    ...restProps
+  } = _ref;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx("div", {
+    css: getHorizontalInputStyles(theme, labelColWidth, inputColWidth),
+    ...restProps,
+    children: children
+  });
+};
 const FormUI = {
   Message: FormMessage,
   Label: Label,
-  Hint: Hint
+  Hint: Hint,
+  HorizontalFormRow
 };
 
 const Col = _ref => {
@@ -9695,7 +9972,7 @@ const Space = _ref => {
   });
 };
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$c() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__$j() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const getHeaderStyles = (clsPrefix, theme) => {
   const breadcrumbClass = `.${clsPrefix}-breadcrumb`;
   const styles = {
@@ -9705,37 +9982,37 @@ const getHeaderStyles = (clsPrefix, theme) => {
   };
   return /*#__PURE__*/css(importantify(styles), process.env.NODE_ENV === "production" ? "" : ";label:getHeaderStyles;");
 };
-var _ref$1 = process.env.NODE_ENV === "production" ? {
-  name: "5s4ezj",
-  styles: "display:inline-flex;vertical-align:middle;align-items:center;margin-left:8px"
+var _ref$4 = process.env.NODE_ENV === "production" ? {
+  name: "eh0igi",
+  styles: "display:inline-flex;vertical-align:middle;align-items:center"
 } : {
-  name: "gxikdi-titleAddOnsWrapper",
-  styles: "display:inline-flex;vertical-align:middle;align-items:center;margin-left:8px;label:titleAddOnsWrapper;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$c
+  name: "n13uil-titleAddOnsWrapper",
+  styles: "display:inline-flex;vertical-align:middle;align-items:center;label:titleAddOnsWrapper;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$j
 };
-var _ref2$1 = process.env.NODE_ENV === "production" ? {
+var _ref2$6 = process.env.NODE_ENV === "production" ? {
   name: "1q4vxyr",
   styles: "margin-left:8px"
 } : {
   name: "ozrfom-buttonContainer",
   styles: "margin-left:8px;label:buttonContainer;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$c
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$j
 };
-var _ref3$3 = process.env.NODE_ENV === "production" ? {
+var _ref3$4 = process.env.NODE_ENV === "production" ? {
   name: "s079uh",
   styles: "margin-top:2px"
 } : {
   name: "1ky5whb-titleIfOtherElementsPresent",
   styles: "margin-top:2px;label:titleIfOtherElementsPresent;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$c
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$j
 };
-var _ref4$1 = process.env.NODE_ENV === "production" ? {
+var _ref4$2 = process.env.NODE_ENV === "production" ? {
   name: "fuxm9z",
   styles: "margin-top:0;margin-bottom:0 !important;align-self:stretch"
 } : {
   name: "h5m2l9-title",
   styles: "margin-top:0;margin-bottom:0 !important;align-self:stretch;label:title;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$c
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$j
 };
 var _ref5 = process.env.NODE_ENV === "production" ? {
   name: "1cl2a0e",
@@ -9743,7 +10020,7 @@ var _ref5 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "m9gz0x-titleWrapper",
   styles: "display:flex;align-items:flex-start;justify-content:space-between;label:titleWrapper;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$c
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$j
 };
 const Header$1 = _ref6 => {
   let {
@@ -9766,12 +10043,13 @@ const Header$1 = _ref6 => {
     breadcrumbWrapper: /*#__PURE__*/css({
       lineHeight: theme.typography.lineHeightBase
     }, process.env.NODE_ENV === "production" ? "" : ";label:breadcrumbWrapper;"),
-    title: _ref4$1,
+    title: _ref4$2,
     // TODO: Look into a more emotion-idomatic way of doing this.
-    titleIfOtherElementsPresent: _ref3$3,
-    buttonContainer: _ref2$1,
-    titleAddOnsWrapper: _ref$1
+    titleIfOtherElementsPresent: _ref3$4,
+    buttonContainer: _ref2$6,
+    titleAddOnsWrapper: _ref$4
   };
+  const buttonsArray = Array.isArray(buttons) ? buttons : [buttons];
   return jsxs("div", {
     css: [getHeaderStyles(clsPrefix, theme), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Header;"],
     ...rest,
@@ -9783,15 +10061,24 @@ const Header$1 = _ref6 => {
       children: [jsxs(Title$2, {
         level: 2,
         css: [styles.title, (buttons || breadcrumbs) && styles.titleIfOtherElementsPresent, process.env.NODE_ENV === "production" ? "" : ";label:Header;"],
-        children: [title, titleAddOns && jsx("span", {
-          css: styles.titleAddOnsWrapper,
-          children: titleAddOns
+        children: [title, titleAddOns && jsxs(Fragment, {
+          children: ["\u2002", jsx("span", {
+            css: styles.titleAddOnsWrapper,
+            children: titleAddOns
+          })]
         })]
       }), buttons && jsx("div", {
         css: styles.buttonContainer,
         children: jsx(Space, {
           size: 8,
-          children: buttons
+          children: buttonsArray.filter(Boolean).map((button, i) => {
+            const defaultKey = `dubois-header-button-${i}`;
+            return /*#__PURE__*/React__default.isValidElement(button) ? /*#__PURE__*/React__default.cloneElement(button, {
+              key: button.key || defaultKey
+            }) : jsx(React__default.Fragment, {
+              children: button
+            }, defaultKey);
+          })
         })
       })]
     })]
@@ -9916,6 +10203,7 @@ function useLegacyNotification() {
       className: iconClassName
     });
     mergedArgs.closeIcon = jsx(CloseIcon, {
+      "aria-hidden": "false",
       css: /*#__PURE__*/css({
         cursor: 'pointer',
         fontSize: theme.general.iconSize
@@ -10013,21 +10301,58 @@ const LegacyPopover = _ref => {
   });
 };
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$b() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-function getPaginationEmotionStyles(clsPrefix, theme) {
-  const classRoot = `.${clsPrefix}-pagination`;
-  const classItem = `.${clsPrefix}-pagination-item`;
-  const classLink = `.${clsPrefix}-pagination-item-link`;
-  const classActive = `.${clsPrefix}-pagination-item-active`;
-  const classEllipsis = `.${clsPrefix}-pagination-item-ellipsis`;
-  const classNext = `.${clsPrefix}-pagination-next`;
-  const classPrev = `.${clsPrefix}-pagination-prev`;
-  const classJumpNext = `.${clsPrefix}-pagination-jump-next`;
-  const classJumpPrev = `.${clsPrefix}-pagination-jump-prev`;
-  const classSizeChanger = `.${clsPrefix}-pagination-options-size-changer`;
-  const classOptions = `.${clsPrefix}-pagination-options`;
-  const styles = {
-    'span[role=img]': {
+/** @deprecated This component is deprecated. Use ParagraphSkeleton, TitleSkeleton, or GenericSkeleton instead. */
+const LegacySkeleton = /* #__PURE__ */(() => {
+  const LegacySkeleton = _ref => {
+    var _loading;
+    let {
+      dangerouslySetAntdProps,
+      label,
+      loadingDescription = 'LegacySkeleton',
+      ...props
+    } = _ref;
+    // There is a conflict in how the 'loading' prop is handled here, so we can't default it to true in
+    // props destructuring above like we do for 'loadingDescription'. The 'loading' param is used both
+    // for <LoadingState> and in <AntDSkeleton>. The intent is for 'loading' to default to true in
+    // <LoadingState>, but if we do that, <AntDSkeleton> will not render the children. The workaround
+    // here is to default 'loading' to true only when considering whether to render a <LoadingState>.
+    // Also, AntDSkeleton looks at the presence of 'loading' in props, so We cannot explicitly destructure
+    // 'loading' in the constructor since we would no longer be able to differentiate between it not being
+    // passed in at all and being passed undefined.
+    const loadingStateLoading = (_loading = props.loading) !== null && _loading !== void 0 ? _loading : true;
+    return jsx(DesignSystemAntDConfigProvider, {
+      children: jsxs(AccessibleContainer, {
+        label: label,
+        children: [loadingStateLoading && jsx(LoadingState, {
+          description: loadingDescription
+        }), jsx(Skeleton, {
+          ...props,
+          ...dangerouslySetAntdProps
+        })]
+      })
+    });
+  };
+  LegacySkeleton.Button = Skeleton.Button;
+  LegacySkeleton.Image = Skeleton.Image;
+  LegacySkeleton.Input = Skeleton.Input;
+  return LegacySkeleton;
+})();
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__$i() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function getPaginationEmotionStyles(clsPrefix, theme) {
+  const classRoot = `.${clsPrefix}-pagination`;
+  const classItem = `.${clsPrefix}-pagination-item`;
+  const classLink = `.${clsPrefix}-pagination-item-link`;
+  const classActive = `.${clsPrefix}-pagination-item-active`;
+  const classEllipsis = `.${clsPrefix}-pagination-item-ellipsis`;
+  const classNext = `.${clsPrefix}-pagination-next`;
+  const classPrev = `.${clsPrefix}-pagination-prev`;
+  const classJumpNext = `.${clsPrefix}-pagination-jump-next`;
+  const classJumpPrev = `.${clsPrefix}-pagination-jump-prev`;
+  const classSizeChanger = `.${clsPrefix}-pagination-options-size-changer`;
+  const classOptions = `.${clsPrefix}-pagination-options`;
+  const styles = {
+    'span[role=img]': {
       color: theme.colors.textSecondary,
       '> *': {
         color: 'inherit'
@@ -10150,13 +10475,13 @@ const Pagination = function Pagination(_ref) {
     })
   });
 };
-var _ref3$2 = process.env.NODE_ENV === "production" ? {
+var _ref3$3 = process.env.NODE_ENV === "production" ? {
   name: "1u1zie3",
   styles: "width:120px"
 } : {
   name: "1am9qog-CursorPagination",
   styles: "width:120px;label:CursorPagination;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$b
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$i
 };
 const CursorPagination = function CursorPagination(_ref2) {
   let {
@@ -10202,7 +10527,7 @@ const CursorPagination = function CursorPagination(_ref2) {
       children: nextPageText
     }), pageSizeOptions && jsx(Select, {
       value: String(pageSizeValue),
-      css: _ref3$2,
+      css: _ref3$3,
       onChange: pageSize => {
         const updatedPageSize = Number(pageSize);
         onPageSizeChange === null || onPageSizeChange === void 0 ? void 0 : onPageSizeChange(updatedPageSize);
@@ -10340,7 +10665,7 @@ const Menu = /* #__PURE__ */(() => {
   return Menu;
 })();
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$a() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__$h() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const SIZE_PRESETS = {
   normal: 640,
   wide: 880
@@ -10434,7 +10759,8 @@ const getModalEmotionStyles = args => {
       paddingRight: MODAL_PADDING,
       minHeight: headerHeight / 2,
       display: 'flex',
-      alignItems: 'center'
+      alignItems: 'center',
+      overflowWrap: 'anywhere'
     },
     [classNameContent]: {
       backgroundColor: theme.colors.backgroundPrimary,
@@ -10536,6 +10862,7 @@ function Modal(_ref2) {
     size = 'normal',
     verticalSizing = 'dynamic',
     autoFocusButton,
+    truncateTitle,
     ...props
   } = _ref2;
   const {
@@ -10551,7 +10878,16 @@ function Modal(_ref2) {
         maxedOutHeight: verticalSizing === 'maxed_out'
       }),
       title: jsx(RestoreAntDDefaultClsPrefix, {
-        children: title
+        children: truncateTitle ? jsx("div", {
+          css: /*#__PURE__*/css({
+            textOverflow: 'ellipsis',
+            marginRight: theme.spacing.md,
+            overflow: 'hidden',
+            whiteSpace: 'nowrap'
+          }, process.env.NODE_ENV === "production" ? "" : ";label:Modal;"),
+          title: typeof title === 'string' ? title : undefined,
+          children: title
+        }) : title
       }),
       footer: jsx(RestoreAntDDefaultClsPrefix, {
         children: footer === undefined ? jsx(DefaultFooter, {
@@ -10577,21 +10913,21 @@ function Modal(_ref2) {
     })
   });
 }
-var _ref3$1 = process.env.NODE_ENV === "production" ? {
+var _ref3$2 = process.env.NODE_ENV === "production" ? {
   name: "b9hrb",
   styles: "position:relative;display:inline-flex;align-items:center"
 } : {
   name: "1jkwrsj-titleComp",
   styles: "position:relative;display:inline-flex;align-items:center;label:titleComp;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$a
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$h
 };
-var _ref4 = process.env.NODE_ENV === "production" ? {
+var _ref4$1 = process.env.NODE_ENV === "production" ? {
   name: "1o6wc9k",
   styles: "padding-left:6px"
 } : {
   name: "i303lp-titleComp",
   styles: "padding-left:6px;label:titleComp;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$a
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$h
 };
 function DangerModal(props) {
   const {
@@ -10610,7 +10946,7 @@ function DangerModal(props) {
   const iconSize = 18;
   const iconFontSize = 18;
   const titleComp = jsxs("div", {
-    css: _ref3$1,
+    css: _ref3$2,
     children: [jsx(DangerIcon, {
       css: /*#__PURE__*/css({
         color: theme.colors.textValidationDanger,
@@ -10620,7 +10956,7 @@ function DangerModal(props) {
         fontSize: iconFontSize
       }, process.env.NODE_ENV === "production" ? "" : ";label:titleComp;")
     }), jsx("div", {
-      css: _ref4,
+      css: _ref4$1,
       children: title
     })]
   });
@@ -11171,7 +11507,7 @@ const SegmentedControlGroup = /*#__PURE__*/forwardRef(function SegmentedControlG
   });
 });
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$9() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__$g() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const DEFAULT_WIDTH = 200;
 const ContentContextDefaults = {
   openPanelId: undefined,
@@ -11398,7 +11734,7 @@ var _ref7 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "fs19p8-PanelHeader",
   styles: "display:flex;justify-content:space-between;align-items:center;label:PanelHeader;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$9
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$g
 };
 function PanelHeader(_ref6) {
   let {
@@ -11531,30 +11867,6 @@ const Sidebar = /* #__PURE__ */(() => {
   return Sidebar;
 })();
 
-/** @deprecated This component is deprecated. Use ParagraphSkeleton, TitleSkeleton, or GenericSkeleton instead. */
-const LegacySkeleton = /* #__PURE__ */(() => {
-  const LegacySkeleton = _ref => {
-    let {
-      dangerouslySetAntdProps,
-      label,
-      ...props
-    } = _ref;
-    return jsx(DesignSystemAntDConfigProvider, {
-      children: jsx(AccessibleContainer, {
-        label: label,
-        children: jsx(Skeleton, {
-          ...props,
-          ...dangerouslySetAntdProps
-        })
-      })
-    });
-  };
-  LegacySkeleton.Button = Skeleton.Button;
-  LegacySkeleton.Image = Skeleton.Image;
-  LegacySkeleton.Input = Skeleton.Input;
-  return LegacySkeleton;
-})();
-
 // This is a very simple PRNG that is seeded (so that the output is deterministic).
 // We need this in order to produce a random ragged edge for the table skeleton.
 function pseudoRandomNumberGeneratorFromSeed(seed) {
@@ -11612,45 +11924,51 @@ const genSkeletonAnimatedColor = function (theme) {
   }, process.env.NODE_ENV === "production" ? "" : ";label:genSkeletonAnimatedColor;");
 };
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$8() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__$f() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const GenericContainerStyles = process.env.NODE_ENV === "production" ? {
   name: "12h7em6",
   styles: "cursor:progress;border-radius:var(--border-radius)"
 } : {
   name: "19fx6jo-GenericContainerStyles",
   styles: "cursor:progress;border-radius:var(--border-radius);label:GenericContainerStyles;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$8
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$f
 };
 const GenericSkeleton = _ref => {
   let {
     label,
     frameRate = 60,
-    style
+    style,
+    loading = true,
+    loadingDescription = 'GenericSkeleton',
+    ...restProps
   } = _ref;
   const {
     theme
   } = useDesignSystemTheme();
-  return jsx("div", {
+  return jsxs("div", {
     css: [GenericContainerStyles, genSkeletonAnimatedColor(theme, frameRate), process.env.NODE_ENV === "production" ? "" : ";label:GenericSkeleton;"],
     style: {
       ...style,
       ['--border-radius']: `${theme.general.borderRadiusBase}px`
     },
-    children: jsx("span", {
+    ...restProps,
+    children: [loading && jsx(LoadingState, {
+      description: loadingDescription
+    }), jsx("span", {
       css: visuallyHidden,
       children: label
-    })
+    })]
   });
 };
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$7() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__$e() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const paragraphContainerStyles = process.env.NODE_ENV === "production" ? {
   name: "sj05g9",
   styles: "cursor:progress;width:100%;height:20px;display:flex;justify-content:flex-start;align-items:center"
 } : {
   name: "u3a3v7-paragraphContainerStyles",
   styles: "cursor:progress;width:100%;height:20px;display:flex;justify-content:flex-start;align-items:center;label:paragraphContainerStyles;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$7
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$e
 };
 const paragraphFillStyles = process.env.NODE_ENV === "production" ? {
   name: "10nptxl",
@@ -11658,14 +11976,17 @@ const paragraphFillStyles = process.env.NODE_ENV === "production" ? {
 } : {
   name: "h6xifd-paragraphFillStyles",
   styles: "border-radius:var(--border-radius);height:8px;label:paragraphFillStyles;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$7
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$e
 };
 const ParagraphSkeleton = _ref => {
   let {
     label,
     seed = '',
     frameRate = 60,
-    style
+    style,
+    loading = true,
+    loadingDescription = 'ParagraphSkeleton',
+    ...restProps
   } = _ref;
   const {
     theme
@@ -11677,7 +11998,10 @@ const ParagraphSkeleton = _ref => {
       ...style,
       ['--border-radius']: `${theme.general.borderRadiusBase}px`
     },
-    children: [jsx("span", {
+    ...restProps,
+    children: [loading && jsx(LoadingState, {
+      description: loadingDescription
+    }), jsx("span", {
       css: visuallyHidden,
       children: label
     }), jsx("div", {
@@ -11689,14 +12013,14 @@ const ParagraphSkeleton = _ref => {
   });
 };
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$6() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__$d() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const titleContainerStyles = process.env.NODE_ENV === "production" ? {
   name: "116rc6i",
   styles: "cursor:progress;width:100%;height:28px;display:flex;justify-content:flex-start;align-items:center"
 } : {
   name: "1dar8xl-titleContainerStyles",
   styles: "cursor:progress;width:100%;height:28px;display:flex;justify-content:flex-start;align-items:center;label:titleContainerStyles;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$d
 };
 const titleFillStyles = process.env.NODE_ENV === "production" ? {
   name: "9fmdbb",
@@ -11704,13 +12028,16 @@ const titleFillStyles = process.env.NODE_ENV === "production" ? {
 } : {
   name: "1vyd6dg-titleFillStyles",
   styles: "border-radius:var(--border-radius);height:12px;width:100%;label:titleFillStyles;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$d
 };
 const TitleSkeleton = _ref => {
   let {
     label,
     frameRate = 60,
-    style
+    style,
+    loading = true,
+    loadingDescription = 'TitleSkeleton',
+    ...restProps
   } = _ref;
   const {
     theme
@@ -11721,7 +12048,10 @@ const TitleSkeleton = _ref => {
       ...style,
       ['--border-radius']: `${theme.general.borderRadiusBase}px`
     },
-    children: [jsx("span", {
+    ...restProps,
+    children: [loading && jsx(LoadingState, {
+      description: loadingDescription
+    }), jsx("span", {
       css: visuallyHidden,
       children: label
     }), jsx("div", {
@@ -11731,7 +12061,7 @@ const TitleSkeleton = _ref => {
   });
 };
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$5() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__$c() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 // Class names that can be used to reference children within
 // Should not be used outside of design system
 // TODO: PE-239 Maybe we could add "dangerous" into the names or make them completely random.
@@ -11754,7 +12084,7 @@ const repeatingElementsStyles = {
   } : {
     name: "q5g0tm-cell",
     styles: "display:inline-grid;position:relative;flex:1;line-height:initial;box-sizing:border-box;padding-left:var(--table-spacing-sm);padding-right:var(--table-spacing-sm);word-break:break-word;overflow:hidden;& .anticon{vertical-align:text-bottom;};label:cell;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$c
   },
   header: process.env.NODE_ENV === "production" ? {
     name: "ik7qgz",
@@ -11762,7 +12092,7 @@ const repeatingElementsStyles = {
   } : {
     name: "1xg6jn4-header",
     styles: "font-weight:bold;align-items:flex-end;display:flex;overflow:hidden;&[aria-sort]{cursor:pointer;user-select:none;}.table-header-text{color:var(--table-header-text-color);}.table-header-icon-container{color:var(--table-header-sort-icon-color);display:none;}&[aria-sort]:hover{.table-header-icon-container, .table-header-text{color:var(--table-header-focus-color);}}&[aria-sort]:active{.table-header-icon-container, .table-header-text{color:var(--table-header-active-color);}}&:hover, &[aria-sort=\"ascending\"], &[aria-sort=\"descending\"]{.table-header-icon-container{display:inline;}};label:header;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$c
   },
   row: process.env.NODE_ENV === "production" ? {
     name: "gf0r0k",
@@ -11770,7 +12100,7 @@ const repeatingElementsStyles = {
   } : {
     name: "1nztrlu-row",
     styles: "display:flex;&.table-isHeader{> *{background-color:var(--table-header-background-color);}.table-isScrollable &{position:sticky;top:0;z-index:1;}}.table-row-select-cell input[type=\"checkbox\"] ~ *{opacity:var(--row-checkbox-opacity, 0);}&:not(.table-row-isGrid)&:hover{&:not(.table-isHeader){background-color:var(--table-row-hover);}.table-row-select-cell input[type=\"checkbox\"] ~ *{opacity:1;}}.table-row-select-cell input[type=\"checkbox\"]:focus ~ *{opacity:1;}> *{padding-top:var(--table-row-vertical-padding);padding-bottom:var(--table-row-vertical-padding);border-bottom:1px solid;border-color:var(--table-separator-color);}&.table-row-isGrid > *{border-right:1px solid;border-color:var(--table-separator-color);}&.table-row-isGrid > :first-of-type{border-left:1px solid;border-color:var(--table-separator-color);}&.table-row-isGrid.table-row-isHeader:first-of-type > *{border-top:1px solid;border-color:var(--table-separator-color);};label:row;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$c
   }
 };
 
@@ -11849,15 +12179,23 @@ const tableStyles = {
   } : {
     name: "1iv4trp-headerButtonTarget",
     styles: "align-items:flex-end;display:flex;overflow:hidden;width:100%;justify-content:inherit;&:focus{.table-header-text{color:var(--table-header-focus-color);}.table-header-icon-container{color:var(--table-header-focus-color);display:inline;}}&:active{.table-header-icon-container, .table-header-text{color:var(--table-header-active-color);}};label:headerButtonTarget;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$c
   },
-  sortHeaderIcon: process.env.NODE_ENV === "production" ? {
+  sortHeaderIconOnRight: process.env.NODE_ENV === "production" ? {
     name: "1hdiaor",
     styles: "margin-left:var(--table-spacing-xs)"
   } : {
-    name: "oruvmh-sortHeaderIcon",
-    styles: "margin-left:var(--table-spacing-xs);label:sortHeaderIcon;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
+    name: "evh3p3-sortHeaderIconOnRight",
+    styles: "margin-left:var(--table-spacing-xs);label:sortHeaderIconOnRight;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$c
+  },
+  sortHeaderIconOnLeft: process.env.NODE_ENV === "production" ? {
+    name: "d4plmt",
+    styles: "margin-right:var(--table-spacing-xs)"
+  } : {
+    name: "1gr7edl-sortHeaderIconOnLeft",
+    styles: "margin-right:var(--table-spacing-xs);label:sortHeaderIconOnLeft;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$c
   },
   checkboxCell: process.env.NODE_ENV === "production" ? {
     name: "4cdr0s",
@@ -11865,7 +12203,7 @@ const tableStyles = {
   } : {
     name: "17au6u2-checkboxCell",
     styles: "display:flex;align-items:center;flex:0;padding-left:var(--table-spacing-sm);padding-top:0;padding-bottom:0;min-width:var(--table-spacing-md);max-width:var(--table-spacing-md);box-sizing:content-box;label:checkboxCell;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$c
   },
   resizeHandleContainer: /*#__PURE__*/css({
     position: 'absolute',
@@ -11886,7 +12224,7 @@ const tableStyles = {
   } : {
     name: "1ot7jju-resizeHandle",
     styles: "width:1px;background:var(--table-resize-handle-color);label:resizeHandle;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$c
   },
   paginationContainer: process.env.NODE_ENV === "production" ? {
     name: "ehlmid",
@@ -11894,7 +12232,7 @@ const tableStyles = {
   } : {
     name: "p324df-paginationContainer",
     styles: "display:flex;justify-content:flex-end;padding-top:var(--table-spacing-sm);padding-bottom:var(--table-spacing-sm);label:paginationContainer;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$c
   }
 };
 var tableStyles$1 = tableStyles;
@@ -12007,14 +12345,12 @@ const TableCell = /*#__PURE__*/forwardRef(function (_ref, ref) {
     children,
     className,
     ellipsis = false,
-    multiline: multilineProp,
+    multiline = false,
     align = 'left',
     style,
     wrapContent = true,
     ...rest
   } = _ref;
-  const defaultToEllipsisSAFE = safex('databricks.fe.designsystem.defaultTableCellToEllipsis', false);
-  const multiline = multilineProp !== null && multilineProp !== void 0 ? multilineProp : !defaultToEllipsisSAFE;
   const {
     size,
     grid
@@ -12024,9 +12360,9 @@ const TableCell = /*#__PURE__*/forwardRef(function (_ref, ref) {
     typographySize = 'sm';
   }
   const content = wrapContent === true ? jsx(Typography.Text, {
-    ellipsis: defaultToEllipsisSAFE ? !multiline : ellipsis,
+    ellipsis: !multiline,
     size: typographySize,
-    title: (defaultToEllipsisSAFE ? !multiline : ellipsis) && typeof children === 'string' && children || undefined,
+    title: !multiline && typeof children === 'string' && children || undefined,
     children: children
   }) : children;
   return jsx("div", {
@@ -12099,7 +12435,7 @@ const TableRow = /*#__PURE__*/forwardRef(function TableRow(_ref, ref) {
   });
 });
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$4() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__$b() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const TableRowActionStyles = {
   container: process.env.NODE_ENV === "production" ? {
     name: "gk361n",
@@ -12107,7 +12443,7 @@ const TableRowActionStyles = {
   } : {
     name: "q9pljs-container",
     styles: "width:32px;padding-top:var(--vertical-padding);padding-bottom:var(--vertical-padding);display:flex;align-items:start;justify-content:center;label:container;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$4
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$b
   }
 };
 const TableRowAction = /*#__PURE__*/forwardRef(function TableRowAction(_ref, ref) {
@@ -12139,7 +12475,7 @@ const TableRowAction = /*#__PURE__*/forwardRef(function TableRowAction(_ref, ref
 /** @deprecated Use `TableRowAction` instead */
 const TableRowMenuContainer = TableRowAction;
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$3() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__$a() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const TableSkeletonStyles = {
   container: process.env.NODE_ENV === "production" ? {
     name: "6kz1wu",
@@ -12147,7 +12483,7 @@ const TableSkeletonStyles = {
   } : {
     name: "1we0er9-container",
     styles: "display:flex;flex-direction:column;align-items:flex-start;label:container;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$3
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$a
   },
   cell: process.env.NODE_ENV === "production" ? {
     name: "1t820zr",
@@ -12155,7 +12491,7 @@ const TableSkeletonStyles = {
   } : {
     name: "1m8dl5b-cell",
     styles: "width:100%;height:8px;border-radius:4px;background:var(--table-skeleton-color);margin-top:var(--table-skeleton-row-vertical-margin);margin-bottom:var(--table-skeleton-row-vertical-margin);label:cell;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$3
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$a
   }
 };
 const TableSkeleton = _ref => {
@@ -12195,13 +12531,17 @@ const TableSkeletonRows = _ref2 => {
   let {
     table,
     actionColumnIds = [],
-    numRows = 3
+    numRows = 3,
+    loading = true,
+    loadingDescription = 'Table skeleton rows'
   } = _ref2;
   const {
     theme
   } = useDesignSystemTheme();
-  return jsx(Fragment, {
-    children: [...Array(numRows).keys()].map(i => jsx(TableRow, {
+  return jsxs(Fragment, {
+    children: [loading && jsx(LoadingState, {
+      description: loadingDescription
+    }), [...Array(numRows).keys()].map(i => jsx(TableRow, {
       children: table.getFlatHeaders().map(header => {
         var _meta$styles, _meta$numSkeletonLine;
         const meta = header.column.columnDef.meta;
@@ -12221,7 +12561,7 @@ const TableSkeletonRows = _ref2 => {
           })
         }, `cell-${header.id}-${i}`);
       })
-    }, i))
+    }, i))]
   });
 };
 
@@ -12334,7 +12674,7 @@ const DropdownButton = props => {
   });
 };
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$2() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__$9() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const BUTTON_HORIZONTAL_PADDING = 12;
 function getSplitButtonEmotionStyles(classNamePrefix, theme) {
   const classDefault = `.${classNamePrefix}-btn`;
@@ -12356,7 +12696,7 @@ function getSplitButtonEmotionStyles(classNamePrefix, theme) {
     },
     [classPrimary]: {
       ...getPrimaryStyles(theme),
-      [`&:first-child`]: {
+      [`&:first-of-type`]: {
         borderRight: `1px solid ${theme.colors.actionPrimaryTextDefault}`,
         marginRight: 1
       },
@@ -12383,7 +12723,7 @@ function getSplitButtonEmotionStyles(classNamePrefix, theme) {
     },
     '[disabled]': {
       ...getDisabledStyles(theme),
-      [`&:first-child`]: {
+      [`&:first-of-type`]: {
         borderRight: `1px solid ${theme.colors.actionDisabledText}`,
         marginRight: 1
       },
@@ -12391,7 +12731,7 @@ function getSplitButtonEmotionStyles(classNamePrefix, theme) {
         borderLeft: `1px solid ${theme.colors.actionDisabledText}`
       }
     },
-    [`${classDefault}:not(:first-child)`]: {
+    [`${classDefault}:not(:first-of-type)`]: {
       width: theme.general.heightSm,
       padding: '3px !important'
     },
@@ -12400,13 +12740,13 @@ function getSplitButtonEmotionStyles(classNamePrefix, theme) {
   const importantStyles = importantify(styles);
   return /*#__PURE__*/css(importantStyles, process.env.NODE_ENV === "production" ? "" : ";label:getSplitButtonEmotionStyles;");
 }
-var _ref = process.env.NODE_ENV === "production" ? {
+var _ref$3 = process.env.NODE_ENV === "production" ? {
   name: "tp1ooh",
   styles: "display:inline-flex;position:relative;vertical-align:middle"
 } : {
   name: "1kplxg4-SplitButton",
   styles: "display:inline-flex;position:relative;vertical-align:middle;label:SplitButton;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$9
 };
 const SplitButton = props => {
   const {
@@ -12439,7 +12779,7 @@ const SplitButton = props => {
   return jsx(DesignSystemAntDConfigProvider, {
     children: jsx("div", {
       ref: ref,
-      css: _ref,
+      css: _ref$3,
       children: loading ? jsx(Button, {
         type: type === 'default' ? undefined : type,
         style: {
@@ -12606,7 +12946,7 @@ const Switch = _ref2 => {
   });
 };
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$1() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__$8() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const getTableFilterInputStyles = (theme, defaultWidth) => {
   return /*#__PURE__*/css({
     [theme.responsive.mediaQueries.sm]: {
@@ -12620,21 +12960,21 @@ const getTableFilterInputStyles = (theme, defaultWidth) => {
     }
   }, process.env.NODE_ENV === "production" ? "" : ";label:getTableFilterInputStyles;");
 };
-var _ref2 = process.env.NODE_ENV === "production" ? {
+var _ref2$5 = process.env.NODE_ENV === "production" ? {
   name: "7whenc",
   styles: "display:flex;width:100%"
 } : {
   name: "3ktoz7-component",
   styles: "display:flex;width:100%;label:component;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$8
 };
-var _ref3 = process.env.NODE_ENV === "production" ? {
+var _ref3$1 = process.env.NODE_ENV === "production" ? {
   name: "82a6rk",
   styles: "flex:1"
 } : {
   name: "18ug1j7-component",
   styles: "flex:1;label:component;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$8
 };
 const TableFilterInput = /*#__PURE__*/forwardRef(function SearchInput(_ref, ref) {
   let {
@@ -12656,33 +12996,43 @@ const TableFilterInput = /*#__PURE__*/forwardRef(function SearchInput(_ref, ref)
   });
   if (showSearchButton) {
     component = jsxs(Input.Group, {
-      css: _ref2,
+      css: _ref2$5,
       className: className,
       children: [jsx(Input, {
         allowClear: true,
         ...inputProps,
         ref: ref,
-        css: _ref3
+        css: _ref3$1
       }), jsx(Button, {
         htmlType: "submit",
         children: jsx(SearchIcon, {})
       })]
     });
   }
-  return jsx("form", {
+  const commonProps = {
     style: {
       height: theme.general.heightSm
     },
-    css: getTableFilterInputStyles(theme, DEFAULT_WIDTH),
-    onSubmit: e => {
-      e.preventDefault();
-      onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();
-    },
-    children: component
-  });
+    css: getTableFilterInputStyles(theme, DEFAULT_WIDTH)
+  };
+  if (onSubmit) {
+    return jsx("form", {
+      ...commonProps,
+      onSubmit: e => {
+        e.preventDefault();
+        onSubmit();
+      },
+      children: component
+    });
+  } else {
+    return jsx("div", {
+      ...commonProps,
+      children: component
+    });
+  }
 });
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__$7() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const tableFilterLayoutStyles = {
   layout: process.env.NODE_ENV === "production" ? {
     name: "1yb0qmd",
@@ -12690,7 +13040,7 @@ const tableFilterLayoutStyles = {
   } : {
     name: "bmua0k-layout",
     styles: "display:flex;flex-direction:row;justify-content:space-between;margin-bottom:var(--table-filter-layout-group-margin);label:layout;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$7
   },
   filters: process.env.NODE_ENV === "production" ? {
     name: "2pdmyz",
@@ -12698,7 +13048,7 @@ const tableFilterLayoutStyles = {
   } : {
     name: "i28ows-filters",
     styles: "display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;gap:var(--table-filter-layout-item-gap);flex:1;label:filters;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$7
   },
   filterActions: process.env.NODE_ENV === "production" ? {
     name: "1ol8kzq",
@@ -12706,7 +13056,7 @@ const tableFilterLayoutStyles = {
   } : {
     name: "bcekwq-filterActions",
     styles: "display:flex;gap:var(--table-filter-layout-item-gap);margin-left:var(--table-filter-layout-group-margin);label:filterActions;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$7
   }
 };
 const TableFilterLayout = /*#__PURE__*/forwardRef(function TableFilterLayout(_ref, ref) {
@@ -12769,7 +13119,7 @@ const TableHeader = /*#__PURE__*/forwardRef(function TableHeader(_ref2, ref) {
   let {
     children,
     ellipsis = false,
-    multiline: multilineProp,
+    multiline = false,
     sortable,
     sortDirection,
     onToggleSort,
@@ -12782,8 +13132,6 @@ const TableHeader = /*#__PURE__*/forwardRef(function TableHeader(_ref2, ref) {
     wrapContent = true,
     ...rest
   } = _ref2;
-  const defaultToEllipsisSAFE = safex('databricks.fe.designsystem.defaultTableCellToEllipsis', false);
-  const multiline = multilineProp !== null && multilineProp !== void 0 ? multilineProp : !defaultToEllipsisSAFE;
   const {
     size,
     grid
@@ -12810,15 +13158,16 @@ const TableHeader = /*#__PURE__*/forwardRef(function TableHeader(_ref2, ref) {
       ariaSort = 'none';
     }
   }
+  const sortIconOnLeft = align === 'right';
   let typographySize = 'md';
   if (size === 'small') {
     typographySize = 'sm';
   }
   const content = wrapContent ? jsx(Typography.Text, {
     className: "table-header-text",
-    ellipsis: defaultToEllipsisSAFE ? !multiline : ellipsis,
+    ellipsis: !multiline,
     size: typographySize,
-    title: (defaultToEllipsisSAFE ? !multiline : ellipsis) && typeof children === 'string' && children || undefined,
+    title: !multiline && typeof children === 'string' && children || undefined,
     children: children
   }) : children;
   const resizeHandle = resizable ? jsx(TableHeaderResizeHandle, {
@@ -12851,11 +13200,15 @@ const TableHeader = /*#__PURE__*/forwardRef(function TableHeader(_ref2, ref) {
           return onToggleSort === null || onToggleSort === void 0 ? void 0 : onToggleSort(event);
         }
       },
-      children: [content, jsx("span", {
+      children: [sortIconOnLeft ? jsx("span", {
         className: "table-header-icon-container",
-        css: [tableStyles$1.sortHeaderIcon, process.env.NODE_ENV === "production" ? "" : ";label:TableHeader;"],
+        css: [tableStyles$1.sortHeaderIconOnLeft, process.env.NODE_ENV === "production" ? "" : ";label:TableHeader;"],
         children: sortIcon
-      })]
+      }) : null, content, !sortIconOnLeft ? jsx("span", {
+        className: "table-header-icon-container",
+        css: [tableStyles$1.sortHeaderIconOnRight, process.env.NODE_ENV === "production" ? "" : ";label:TableHeader;"],
+        children: sortIcon
+      }) : null]
     }) : content, resizeHandle]
   });
 });
@@ -13226,11 +13579,8 @@ function Tag(props) {
     ...attributes,
     css: styles.tag,
     children: jsxs("div", {
-      css: styles.content,
-      children: [jsx("div", {
-        css: styles.text,
-        children: children
-      }), closable && jsx("button", {
+      css: [styles.content, styles.text, process.env.NODE_ENV === "production" ? "" : ";label:Tag;"],
+      children: [children, closable && jsx("button", {
         css: styles.close,
         tabIndex: 0,
         onClick: e => {
@@ -13666,5 +14016,977 @@ const Tree = /*#__PURE__*/forwardRef(function Tree(_ref, ref) {
   });
 });
 
-export { AccessibleContainer, Accordion, AccordionPanel, Alert, AlignCenterIcon, AlignLeftIcon, AlignRightIcon, AppIcon, ApplyDesignSystemContextOverrides, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowsUpDownIcon, AutoComplete, BarChartIcon, BarGroupedIcon, BarStackedIcon, BeakerIcon, BinaryIcon, BoldIcon, BookIcon, BookmarkFillIcon, BookmarkIcon, BooksIcon, BracketsCurlyIcon, BracketsSquareIcon, BracketsXIcon, BranchIcon, Breadcrumb, BriefcaseFillIcon, BriefcaseIcon, Button, CalendarClockIcon, CalendarEventIcon, CalendarIcon, CaretDownSquareIcon, CaretUpSquareIcon, CatalogIcon, CatalogOffIcon, ChartLineIcon, CheckCircleBadgeIcon, CheckCircleFillIcon, CheckCircleIcon, CheckIcon, CheckLineIcon, Checkbox, CheckboxIcon, ChecklistIcon, ChevronDoubleDownIcon, ChevronDoubleLeftIcon, ChevronDoubleRightIcon, ChevronDoubleUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDownloadIcon, CloudIcon, CloudKeyIcon, CloudModelIcon, CloudOffIcon, CloudUploadIcon, CodeIcon, Col, ColorFillIcon, ColumnIcon, ColumnsIcon, ConnectIcon, Content, CopyIcon, CursorPagination, CursorTypeIcon, DIcon, DU_BOIS_ENABLE_ANIMATION_CLASSNAME, DagIcon, DangerFillIcon, DangerIcon, DangerModal, DashIcon, DashboardIcon, DataIcon, DatabaseIcon, DecimalIcon, DesignSystemAntDConfigProvider, DialogCombobox, DialogComboboxButtonContainer, DialogComboboxContent, DialogComboboxCountBadge, DialogComboboxFooter, DialogComboboxHintRow, DialogComboboxLoadingSpinner, DialogComboboxOptionControlledList, DialogComboboxOptionList, DialogComboboxOptionListCheckboxItem, DialogComboboxOptionListSearch, DialogComboboxOptionListSelectItem, DialogComboboxSectionHeader, DialogComboboxSeparator, DialogComboboxTrigger, DotsCircleIcon, DownloadIcon, DragIcon, Drawer, Dropdown, DuboisDatePicker, Empty, ExpandLessIcon, ExpandMoreIcon, FileCodeIcon, FileDocumentIcon, FileIcon, FileImageIcon, FileModelIcon, FilterIcon, FloatIcon, FolderBranchIcon, FolderCloudFilledIcon, FolderCloudIcon, FolderFillIcon, FolderIcon, FontIcon, ForkIcon, Form, FormDubois, FormUI, FullscreenExitIcon, FullscreenIcon, FunctionIcon, GearFillIcon, GearIcon, GenericSkeleton, GiftIcon, GitCommitIcon, GlobeIcon, GridDashIcon, GridIcon, H1Icon, H2Icon, H3Icon, Header$1 as Header, HistoryIcon, HomeIcon, Icon, ImageIcon, IndentDecreaseIcon, IndentIncreaseIcon, InfinityIcon, InfoFillIcon, InfoIcon, InfoTooltip, Input, ItalicIcon, KeyIcon, KeyboardIcon, LayerIcon, Layout, LegacyDatePicker, LegacyPopover, LegacySkeleton, LegacyTable, LettersIcon, LibrariesIcon, LightningIcon, LinkIcon, LinkOffIcon, ListBorderIcon, ListIcon, LoadingIcon, LockFillIcon, LockIcon, LockUnlockedIcon, MIcon, Menu, MenuIcon, MinusBoxIcon, MinusCircleFillIcon, MinusCircleIcon, Modal, ModelsIcon, Nav, NavButton, NoIcon, NotebookIcon, Notification, NotificationIcon, NotificationOffIcon, NumbersIcon, OfficeIcon, OptGroup, Option, OverflowIcon, PageBottomIcon, PageFirstIcon, PageLastIcon, PageTopIcon, PageWrapper, Pagination, Panel, PanelBody, PanelHeader, PanelHeaderButtons, PanelHeaderTitle, ParagraphSkeleton, PencilIcon, PinCancelIcon, PinFillIcon, PinIcon, PipelineIcon, PlayCircleFillIcon, PlayCircleIcon, PlayIcon, PlugIcon, PlusCircleFillIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, Popover, QueryEditorIcon, QueryIcon, QuestionMarkFillIcon, QuestionMarkIcon, RHFControlledComponents, ROW_GUTTER_SIZE, Radio, ReaderModeIcon, RedoIcon, RefreshIcon, RestoreAntDDefaultClsPrefix, RobotIcon, Row, SaveIcon, SchoolIcon, SearchIcon, SecurityIcon, SegmentedControlButton, SegmentedControlGroup, Select, SelectOptGroup, SelectOption, SelectV2, SelectV2Content, SelectV2Option, SelectV2OptionGroup, SelectV2Trigger, ShareIcon, Sidebar, SidebarAutoIcon, SidebarCollapseIcon, SidebarExpandIcon, SidebarIcon, SlidersIcon, SortAlphabeticalAscendingIcon, SortAlphabeticalDescendingIcon, SortAlphabeticalLeftIcon, SortAlphabeticalRightIcon, SortAscendingIcon, SortDescendingIcon, SortUnsortedIcon, Space, Spacer, SpeechBubbleIcon, SpeechBubblePlusIcon, Spinner, SplitButton, StarFillIcon, StarIcon, StopCircleFillIcon, StopCircleIcon, StopIcon, StorefrontIcon, StreamIcon, Switch, SyncIcon, TabPane, Table, TableCell, TableContext, TableFilterInput, TableFilterLayout, TableHeader, TableIcon, TableInfinityIcon, TableLightningIcon, TableRow, TableRowAction, TableRowContext, TableRowMenuContainer, TableRowSelectCell, TableSkeleton, TableSkeletonRows, TableViewIcon, Tabs, Tag, TextBoxIcon, ThumbsDownIcon, ThumbsUpIcon, TitleSkeleton, ToggleButton, Tooltip, TrashIcon, Tree, TreeIcon, Typography, UnderlineIcon, UndoIcon, UploadIcon, UsbIcon, UserBadgeIcon, UserCircleIcon, UserGroupIcon, UserIcon, VisibleIcon, VisibleOffIcon, WarningFillIcon, WarningIcon, WorkflowsIcon, WorkspacesIcon, XCircleFillIcon, XCircleIcon, ZoomInIcon, ZoomOutIcon, __INTERNAL_DO_NOT_USE__FormItem, __INTERNAL_DO_NOT_USE__Group, __INTERNAL_DO_NOT_USE__HorizontalGroup, __INTERNAL_DO_NOT_USE__VerticalGroup, getAnimationCss, getPaginationEmotionStyles, getRadioStyles, getTabEmotionStyles, getValidationStateColor, getWrapperStyle, importantify, useDesignSystemFlags, useDesignSystemTheme, useLegacyNotification, useThemedStyles, visuallyHidden, withNotifications };
+const typeaheadComboboxContextDefaults = {
+  isInsideTypeaheadCombobox: false,
+  multiSelect: false
+};
+const TypeaheadComboboxContext = /*#__PURE__*/createContext(typeaheadComboboxContextDefaults);
+const TypeaheadComboboxContextProvider = _ref => {
+  let {
+    children,
+    value
+  } = _ref;
+  return jsx(TypeaheadComboboxContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+
+const TypeaheadComboboxRoot = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    comboboxState,
+    multiSelect = false,
+    children,
+    ...props
+  } = _ref;
+  const {
+    refs,
+    floatingStyles
+  } = useFloating({
+    whileElementsMounted: autoUpdate,
+    middleware: [offset(4), flip(), shift()],
+    placement: 'bottom-start'
+  });
+  return jsx(TypeaheadComboboxContextProvider, {
+    value: {
+      multiSelect,
+      isInsideTypeaheadCombobox: true,
+      floatingUiRefs: refs,
+      floatingStyles: floatingStyles
+    },
+    children: jsx("div", {
+      ...comboboxState.getComboboxProps({}, {
+        suppressRefError: true
+      }),
+      ...props,
+      ref: ref,
+      children: children
+    })
+  });
+});
+
+function useComboboxState(_ref) {
+  let {
+    allItems,
+    items,
+    itemToString,
+    onIsOpenChange,
+    ...props
+  } = _ref;
+  function getFilteredItems(inputValue) {
+    var _inputValue$toLowerCa;
+    const lowerCasedInputValue = (_inputValue$toLowerCa = inputValue === null || inputValue === void 0 ? void 0 : inputValue.toLowerCase()) !== null && _inputValue$toLowerCa !== void 0 ? _inputValue$toLowerCa : '';
+    return allItems.filter(item => !inputValue || props.matcher(item, lowerCasedInputValue));
+  }
+  const comboboxState = useCombobox({
+    onIsOpenChange: onIsOpenChange,
+    onInputValueChange: props.multiSelect ? _ref2 => {
+      let {
+        inputValue
+      } = _ref2;
+      return inputValue !== undefined && props.setInputValue(inputValue);
+    } : _ref3 => {
+      let {
+        inputValue
+      } = _ref3;
+      return props.setItems(getFilteredItems(inputValue));
+    },
+    items: items,
+    itemToString(item) {
+      return item ? itemToString ? itemToString(item) : item.toString() : '';
+    },
+    defaultHighlightedIndex: props.multiSelect ? 0 : undefined,
+    // after selection for multiselect, highlight the first item.
+    scrollIntoView: () => {},
+    // disabling scroll because floating-ui repositions the menu
+    selectedItem: props.multiSelect ? null : undefined,
+    // useMultipleSelection will handle the item selection for multiselect
+    stateReducer(state, actionAndChanges) {
+      const {
+        changes,
+        type
+      } = actionAndChanges;
+      switch (type) {
+        case useCombobox.stateChangeTypes.InputBlur:
+          // If input is empty, clear selection
+          if (!props.multiSelect && state.inputValue === '') {
+            return {};
+          } else {
+            return changes;
+          }
+        case useCombobox.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox.stateChangeTypes.ItemClick:
+          return {
+            ...changes,
+            highlightedIndex: 0,
+            // with the first option highlighted.
+            isOpen: props.multiSelect ? true : false // for multiselect, keep the menu open after selection.
+          };
+
+        default:
+          return changes;
+      }
+    },
+    onStateChange: props.multiSelect ? _ref4 => {
+      let {
+        type,
+        selectedItem: newSelectedItem,
+        inputValue: newInputValue
+      } = _ref4;
+      switch (type) {
+        case useCombobox.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox.stateChangeTypes.ItemClick:
+        case useCombobox.stateChangeTypes.InputBlur:
+          if (newSelectedItem) {
+            props.setSelectedItems([...props.selectedItems, newSelectedItem]);
+            props.setInputValue('');
+          }
+          break;
+        case useCombobox.stateChangeTypes.InputChange:
+          props.setInputValue(newInputValue !== null && newInputValue !== void 0 ? newInputValue : '');
+          break;
+      }
+      // Unselect when clicking selected item
+      if (newSelectedItem && props.selectedItems.includes(newSelectedItem)) {
+        props.setSelectedItems(props.selectedItems.filter(item => item !== newSelectedItem));
+      }
+    } : undefined
+  });
+  return comboboxState;
+}
+function useMultipleSelectionState(selectedItems, setSelectedItems) {
+  return useMultipleSelection({
+    selectedItems,
+    onStateChange(_ref5) {
+      let {
+        selectedItems: newSelectedItems,
+        type
+      } = _ref5;
+      switch (type) {
+        case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace:
+        case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete:
+        case useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace:
+        case useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem:
+          setSelectedItems(newSelectedItems || []);
+          break;
+      }
+    }
+  });
+}
+
+const useTypeaheadComboboxContext = () => {
+  return useContext(TypeaheadComboboxContext);
+};
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__$6() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var _ref$2 = process.env.NODE_ENV === "production" ? {
+  name: "xv0ss6",
+  styles: "padding:0;margin:0;display:flex;flex-direction:column;align-items:flex-start;position:absolute"
+} : {
+  name: "1sd733r-getTypeaheadComboboxMenuStyles",
+  styles: "padding:0;margin:0;display:flex;flex-direction:column;align-items:flex-start;position:absolute;label:getTypeaheadComboboxMenuStyles;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
+};
+const getTypeaheadComboboxMenuStyles = () => {
+  return _ref$2;
+};
+const TypeaheadComboboxMenu = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    comboboxState,
+    loading,
+    width,
+    minWidth = 240,
+    maxWidth,
+    minHeight,
+    maxHeight,
+    listWrapperHeight,
+    virtualizerRef,
+    children,
+    ...restProps
+  } = _ref2;
+  const {
+    getMenuProps,
+    isOpen
+  } = comboboxState;
+  const {
+    ref: downshiftRef,
+    ...downshiftProps
+  } = getMenuProps({}, {
+    suppressRefError: true
+  });
+  const {
+    floatingUiRefs,
+    floatingStyles,
+    isInsideTypeaheadCombobox
+  } = useTypeaheadComboboxContext();
+  if (!isInsideTypeaheadCombobox) {
+    throw new Error('`TypeaheadComboboxMenu` must be used within `TypeaheadCombobox`');
+  }
+  const mergedRef = useMergeRefs([ref, downshiftRef, floatingUiRefs === null || floatingUiRefs === void 0 ? void 0 : floatingUiRefs.setFloating]);
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const {
+    getPopupContainer
+  } = useDesignSystemContext();
+  if (!isOpen) return null;
+  const hasResults = children && Children.toArray(children).some(child => {
+    if ( /*#__PURE__*/React__default.isValidElement(child)) {
+      var _child$props$__EMOTIO, _child$props$__EMOTIO2;
+      const childType = (_child$props$__EMOTIO = (_child$props$__EMOTIO2 = child.props['__EMOTION_TYPE_PLEASE_DO_NOT_USE__']) === null || _child$props$__EMOTIO2 === void 0 ? void 0 : _child$props$__EMOTIO2.defaultProps._TYPE) !== null && _child$props$__EMOTIO !== void 0 ? _child$props$__EMOTIO : child.props._TYPE;
+      return ['TypeaheadComboboxMenuItem', 'TypeaheadComboboxCheckboxItem'].includes(childType);
+    }
+    return false;
+  });
+  const footer = Children.toArray(children).filter(child => /*#__PURE__*/React__default.isValidElement(child) && child.props._TYPE === 'TypeaheadComboboxFooter');
+  return /*#__PURE__*/createPortal(jsx("ul", {
+    "aria-busy": loading,
+    ...downshiftProps,
+    ref: mergedRef,
+    css: [getComboboxContentWrapperStyles(theme, {
+      maxHeight,
+      maxWidth,
+      minHeight,
+      minWidth,
+      width
+    }), getTypeaheadComboboxMenuStyles(), process.env.NODE_ENV === "production" ? "" : ";label:TypeaheadComboboxMenu;"],
+    style: {
+      ...floatingStyles
+    },
+    ...restProps,
+    children: loading ? jsx(LoadingSpinner, {
+      "aria-label": "Loading",
+      alt: "Loading spinner"
+    }) : hasResults ? jsx("div", {
+      ref: virtualizerRef,
+      style: {
+        position: 'relative',
+        width: '100%',
+        ...(listWrapperHeight && {
+          height: listWrapperHeight
+        })
+      },
+      children: children
+    }) : jsxs(Fragment, {
+      children: [jsx(EmptyResults, {}), footer]
+    })
+  }), getPopupContainer ? getPopupContainer() : document.body);
+});
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__$5() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const getMenuItemStyles = (theme, isHighlighted, disabled) => {
+  return /*#__PURE__*/css({
+    ...(disabled && {
+      pointerEvents: 'none',
+      color: theme.colors.actionDisabledText
+    }),
+    ...(isHighlighted && {
+      background: theme.colors.actionTertiaryBackgroundHover
+    })
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getMenuItemStyles;");
+};
+const getLabelStyles = (theme, textOverflowMode) => {
+  return /*#__PURE__*/css({
+    marginLeft: theme.spacing.sm,
+    fontSize: theme.typography.fontSizeBase,
+    fontStyle: 'normal',
+    fontWeight: 400,
+    cursor: 'pointer',
+    overflow: 'hidden',
+    wordBreak: 'break-word',
+    ...(textOverflowMode === 'ellipsis' && {
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    })
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getLabelStyles;");
+};
+var _ref2$4 = process.env.NODE_ENV === "production" ? {
+  name: "kjj0ot",
+  styles: "padding-top:2px"
+} : {
+  name: "1uez6s6-TypeaheadComboboxMenuItem",
+  styles: "padding-top:2px;label:TypeaheadComboboxMenuItem;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
+};
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "zjik7",
+  styles: "display:flex"
+} : {
+  name: "1p9uv37-TypeaheadComboboxMenuItem",
+  styles: "display:flex;label:TypeaheadComboboxMenuItem;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
+};
+const TypeaheadComboboxMenuItem = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    item,
+    index,
+    comboboxState,
+    textOverflowMode = 'multiline',
+    isDisabled,
+    disabledReason,
+    hintContent,
+    children,
+    ...restProps
+  } = _ref;
+  const {
+    selectedItem,
+    highlightedIndex,
+    getItemProps
+  } = comboboxState;
+  const isSelected = selectedItem === item;
+  const isHighlighted = highlightedIndex === index;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsxs("li", {
+    ref: ref,
+    role: "option",
+    "aria-selected": isSelected,
+    disabled: isDisabled,
+    css: [getComboboxOptionItemWrapperStyles(theme), getMenuItemStyles(theme, isHighlighted, isDisabled), process.env.NODE_ENV === "production" ? "" : ";label:TypeaheadComboboxMenuItem;"],
+    ...getItemProps({
+      item,
+      index,
+      disabled: isDisabled
+    }),
+    ...restProps,
+    children: [isSelected ? jsx(CheckIcon, {
+      css: _ref2$4
+    }) : jsx("div", {
+      style: {
+        width: 16,
+        flexShrink: 0
+      }
+    }), jsxs("label", {
+      css: getLabelStyles(theme, textOverflowMode),
+      children: [isDisabled && disabledReason ? jsxs("div", {
+        css: _ref3,
+        children: [jsx("div", {
+          children: children
+        }), jsx("div", {
+          css: getInfoIconStyles(theme),
+          children: jsx(InfoTooltip, {
+            title: disabledReason
+          })
+        })]
+      }) : children, jsx(HintRow, {
+        disabled: isDisabled,
+        children: hintContent
+      })]
+    })]
+  });
+});
+TypeaheadComboboxMenuItem.defaultProps = {
+  _TYPE: 'TypeaheadComboboxMenuItem'
+};
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__$4() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var _ref2$3 = process.env.NODE_ENV === "production" ? {
+  name: "zjik7",
+  styles: "display:flex"
+} : {
+  name: "1pneh3l-TypeaheadComboboxCheckboxItem",
+  styles: "display:flex;label:TypeaheadComboboxCheckboxItem;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$4
+};
+const TypeaheadComboboxCheckboxItem = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    item,
+    index,
+    comboboxState,
+    selectedItems,
+    textOverflowMode = 'multiline',
+    isDisabled,
+    disabledReason,
+    hintContent,
+    children,
+    ...restProps
+  } = _ref;
+  const {
+    highlightedIndex,
+    getItemProps
+  } = comboboxState;
+  const isHighlighted = highlightedIndex === index;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const isSelected = selectedItems.includes(item);
+  return jsx("li", {
+    ref: ref,
+    role: "option",
+    "aria-selected": isSelected,
+    disabled: isDisabled,
+    css: [getComboboxOptionItemWrapperStyles(theme), getMenuItemStyles(theme, isHighlighted, isDisabled), process.env.NODE_ENV === "production" ? "" : ";label:TypeaheadComboboxCheckboxItem;"],
+    ...getItemProps({
+      item,
+      index,
+      disabled: isDisabled
+    }),
+    ...restProps,
+    children: jsx(Checkbox, {
+      disabled: isDisabled,
+      isChecked: isSelected,
+      css: getCheckboxStyles(theme, textOverflowMode),
+      tabIndex: -1
+      // Needed because Antd handles keyboard inputs as clicks
+      ,
+      onClick: e => {
+        e.stopPropagation();
+      },
+      children: jsxs("label", {
+        children: [isDisabled && disabledReason ? jsxs("div", {
+          css: _ref2$3,
+          children: [jsx("div", {
+            children: children
+          }), jsx("div", {
+            css: getInfoIconStyles(theme),
+            children: jsx(InfoTooltip, {
+              title: disabledReason
+            })
+          })]
+        }) : children, jsx(HintRow, {
+          disabled: isDisabled,
+          children: hintContent
+        })]
+      })
+    })
+  });
+});
+TypeaheadComboboxCheckboxItem.defaultProps = {
+  _TYPE: 'TypeaheadComboboxCheckboxItem'
+};
+
+const getToggleButtonStyles = (theme, disabled) => {
+  return /*#__PURE__*/css({
+    cursor: 'pointer',
+    userSelect: 'none',
+    color: theme.colors.textSecondary,
+    backgroundColor: 'transparent',
+    border: 'none',
+    padding: 0,
+    marginLeft: theme.spacing.xs,
+    height: 16,
+    width: 16,
+    ...(disabled && {
+      color: theme.colors.actionDisabledText
+    })
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getToggleButtonStyles;");
+};
+const TypeaheadComboboxToggleButton = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    disabled,
+    ...restProps
+  } = _ref;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const {
+    onClick
+  } = restProps;
+  function handleClick(e) {
+    e.stopPropagation();
+    onClick(e);
+  }
+  return jsx("button", {
+    "aria-label": "toggle menu",
+    ref: ref,
+    css: getToggleButtonStyles(theme, disabled),
+    ...restProps,
+    onClick: handleClick,
+    children: jsx(ChevronDownIcon, {})
+  });
+});
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__$3() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var _ref2$2 = process.env.NODE_ENV === "production" ? {
+  name: "l1fpjx",
+  styles: "pointer-events:all;vertical-align:text-top"
+} : {
+  name: "4edanz-TypeaheadComboboxControls",
+  styles: "pointer-events:all;vertical-align:text-top;label:TypeaheadComboboxControls;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$3
+};
+const TypeaheadComboboxControls = _ref => {
+  let {
+    getDownshiftToggleButtonProps,
+    showClearSelectionButton,
+    handleClear,
+    disabled
+  } = _ref;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsxs("div", {
+    css: /*#__PURE__*/css({
+      position: 'absolute',
+      top: theme.spacing.sm,
+      right: 7,
+      height: 16
+    }, process.env.NODE_ENV === "production" ? "" : ";label:TypeaheadComboboxControls;"),
+    children: [showClearSelectionButton && jsx(ClearSelectionButton, {
+      onClick: handleClear,
+      css: _ref2$2
+    }), jsx(TypeaheadComboboxToggleButton, {
+      ...getDownshiftToggleButtonProps(),
+      disabled: disabled
+    })]
+  });
+};
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__$2() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var _ref$1 = process.env.NODE_ENV === "production" ? {
+  name: "1lb3761",
+  styles: "display:flex;position:relative;width:fit-content"
+} : {
+  name: "rseyaw-getContainerStyles",
+  styles: "display:flex;position:relative;width:fit-content;label:getContainerStyles;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
+};
+const getContainerStyles$1 = () => {
+  return _ref$1;
+};
+const getInputStyles$1 = theme => /*#__PURE__*/css({
+  paddingRight: 52,
+  width: '100%',
+  minWidth: 72,
+  '&:disabled': {
+    border: 'none',
+    backgroundColor: theme.colors.actionDisabledBackground,
+    color: theme.colors.actionDisabledText
+  },
+  '&:not(:disabled)': {
+    backgroundColor: 'transparent'
+  }
+}, process.env.NODE_ENV === "production" ? "" : ";label:getInputStyles;");
+const TypeaheadComboboxInput = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    comboboxState,
+    allowClear = true,
+    ...restProps
+  } = _ref2;
+  const {
+    isInsideTypeaheadCombobox,
+    floatingUiRefs
+  } = useTypeaheadComboboxContext();
+  if (!isInsideTypeaheadCombobox) {
+    throw new Error('`TypeaheadComboboxInput` must be used within `TypeaheadCombobox`');
+  }
+  const {
+    getInputProps,
+    getToggleButtonProps,
+    toggleMenu,
+    inputValue,
+    setInputValue,
+    reset
+  } = comboboxState;
+  const {
+    ref: downshiftRef,
+    ...downshiftProps
+  } = getInputProps({}, {
+    suppressRefError: true
+  });
+  const mergedRef = useMergeRefs([ref, downshiftRef]);
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const handleClick = () => {
+    toggleMenu();
+  };
+  const handleClear = () => {
+    setInputValue('');
+    reset();
+  };
+  return jsxs("div", {
+    ref: floatingUiRefs === null || floatingUiRefs === void 0 ? void 0 : floatingUiRefs.setReference,
+    css: getContainerStyles$1(),
+    children: [jsx(Input, {
+      ref: mergedRef,
+      ...downshiftProps,
+      onClick: handleClick,
+      css: getInputStyles$1(theme),
+      ...restProps
+    }), jsx(TypeaheadComboboxControls, {
+      getDownshiftToggleButtonProps: getToggleButtonProps,
+      showClearSelectionButton: allowClear && Boolean(inputValue),
+      handleClear: handleClear,
+      disabled: restProps.disabled
+    })]
+  });
+});
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__$1() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const getSelectedItemStyles = theme => {
+  return /*#__PURE__*/css({
+    backgroundColor: theme.colors.tagDefault,
+    borderRadius: theme.general.borderRadiusBase,
+    color: theme.colors.textPrimary,
+    lineHeight: theme.typography.lineHeightBase,
+    fontSize: theme.typography.fontSizeBase,
+    marginTop: 2,
+    marginBottom: 2,
+    marginInlineEnd: theme.spacing.xs,
+    paddingRight: 0,
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingInlineStart: theme.spacing.xs,
+    position: 'relative',
+    flex: 'none',
+    maxWidth: '100%'
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getSelectedItemStyles;");
+};
+const getIconContainerStyles = theme => {
+  return /*#__PURE__*/css({
+    width: 16,
+    height: 16,
+    ':hover': {
+      color: theme.colors.actionTertiaryTextHover,
+      backgroundColor: theme.colors.tagHover
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getIconContainerStyles;");
+};
+const getXIconStyles = theme => {
+  return /*#__PURE__*/css({
+    fontSize: theme.typography.fontSizeSm,
+    verticalAlign: '-1px',
+    paddingLeft: theme.spacing.xs / 2,
+    paddingRight: theme.spacing.xs / 2
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getXIconStyles;");
+};
+var _ref2$1 = process.env.NODE_ENV === "production" ? {
+  name: "2bhlo8",
+  styles: "margin-right:2px"
+} : {
+  name: "d61dng-TypeaheadComboboxSelectedItem",
+  styles: "margin-right:2px;label:TypeaheadComboboxSelectedItem;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
+};
+const TypeaheadComboboxSelectedItem = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    item,
+    getSelectedItemProps,
+    removeSelectedItem,
+    ...restProps
+  } = _ref;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsxs("span", {
+    ...getSelectedItemProps({
+      selectedItem: item
+    }),
+    css: getSelectedItemStyles(theme),
+    ref: ref,
+    ...restProps,
+    children: [jsx("span", {
+      css: _ref2$1,
+      children: item.title
+    }), jsx("span", {
+      css: getIconContainerStyles(theme),
+      children: jsx(CloseIcon, {
+        "aria-hidden": "false",
+        onClick: e => {
+          e.stopPropagation();
+          removeSelectedItem(item);
+        },
+        css: getXIconStyles(theme),
+        role: "button",
+        "aria-label": "Remove selected item"
+      })
+    })]
+  });
+});
+
+const CountBadge = _ref => {
+  let {
+    countStartAt,
+    totalCount
+  } = _ref;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx("div", {
+    css: [getSelectedItemStyles(theme), {
+      paddingInlineEnd: theme.spacing.xs
+    }, process.env.NODE_ENV === "production" ? "" : ";label:CountBadge;"],
+    children: countStartAt ? `+${totalCount - countStartAt}` : totalCount
+  });
+};
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const getContainerStyles = (theme, width, maxHeight) => {
+  return /*#__PURE__*/css({
+    cursor: 'text',
+    display: 'inline-block',
+    border: `1px solid ${theme.colors.border}`,
+    borderRadius: theme.general.borderRadiusBase,
+    minHeight: 32,
+    height: 'auto',
+    minWidth: 0,
+    ...(width ? {
+      width
+    } : {}),
+    ...(maxHeight ? {
+      maxHeight
+    } : {}),
+    padding: '5px 52px 5px 12px',
+    position: 'relative',
+    overflow: 'auto',
+    textOverflow: 'ellipsis',
+    '&:hover': {
+      border: `1px solid ${theme.colors.actionPrimaryBackgroundHover}`
+    },
+    '&:focus-within': {
+      outlineColor: theme.colors.actionPrimaryBackgroundDefault,
+      outlineWidth: 2,
+      outlineOffset: -2,
+      outlineStyle: 'solid',
+      boxShadow: 'none',
+      borderColor: 'transparent'
+    },
+    '&:disabled': {
+      backgroundColor: theme.colors.actionDisabledBackground,
+      color: theme.colors.actionDisabledText
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getContainerStyles;");
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "a9xlat",
+  styles: "display:flex;flex:auto;flex-wrap:wrap;max-width:100%;position:relative"
+} : {
+  name: "azzs2i-getContentWrapperStyles",
+  styles: "display:flex;flex:auto;flex-wrap:wrap;max-width:100%;position:relative;label:getContentWrapperStyles;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+const getContentWrapperStyles = () => {
+  return _ref2;
+};
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "qngrd1",
+  styles: "display:inline-flex;position:relative;max-width:100%;align-self:auto;flex:none"
+} : {
+  name: "10x8s5t-getInputWrapperStyles",
+  styles: "display:inline-flex;position:relative;max-width:100%;align-self:auto;flex:none;label:getInputWrapperStyles;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+const getInputWrapperStyles = () => {
+  return _ref;
+};
+const getInputStyles = theme => {
+  return /*#__PURE__*/css({
+    lineHeight: 20,
+    height: 24,
+    margin: 0,
+    padding: 0,
+    appearance: 'none',
+    cursor: 'auto',
+    width: '100%',
+    backgroundColor: 'transparent',
+    color: theme.colors.textPrimary,
+    '&, &:hover, &:focus-visible': {
+      border: 'none',
+      outline: 'none'
+    },
+    '&::placeholder': {
+      color: theme.colors.textPlaceholder
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getInputStyles;");
+};
+var _ref4 = process.env.NODE_ENV === "production" ? {
+  name: "1r88pt9",
+  styles: "visibility:hidden;white-space:pre;position:absolute"
+} : {
+  name: "1noplic-content",
+  styles: "visibility:hidden;white-space:pre;position:absolute;label:content;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+const TypeaheadComboboxMultiSelectInput = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  var _measureRef$current, _itemsRef$current, _containerRef$current, _innerRef$current2;
+  let {
+    comboboxState,
+    multipleSelectionState,
+    selectedItems,
+    setSelectedItems,
+    getSelectedItemLabel,
+    allowClear = true,
+    showTagAfterValueCount = 20,
+    width,
+    maxHeight,
+    ...restProps
+  } = _ref3;
+  const {
+    isInsideTypeaheadCombobox
+  } = useTypeaheadComboboxContext();
+  if (!isInsideTypeaheadCombobox) {
+    throw new Error('`TypeaheadComboboxMultiSelectInput` must be used within `TypeaheadCombobox`');
+  }
+  const {
+    getInputProps,
+    getToggleButtonProps,
+    toggleMenu,
+    inputValue,
+    setInputValue
+  } = comboboxState;
+  const {
+    getSelectedItemProps,
+    getDropdownProps,
+    removeSelectedItem
+  } = multipleSelectionState;
+  const {
+    ref: downshiftRef,
+    ...downshiftProps
+  } = getInputProps(getDropdownProps({}, {
+    suppressRefError: true
+  }));
+  const {
+    floatingUiRefs
+  } = useTypeaheadComboboxContext();
+  const containerRef = useRef(null);
+  const mergedContainerRef = useMergeRefs([containerRef, floatingUiRefs === null || floatingUiRefs === void 0 ? void 0 : floatingUiRefs.setReference]);
+  const itemsRef = useRef(null);
+  const measureRef = useRef(null);
+  const innerRef = useRef(null);
+  const mergedInputRef = useMergeRefs([ref, innerRef, downshiftRef]);
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const [inputWidth, setInputWidth] = useState(0);
+  const shouldShowCountBadge = selectedItems.length > showTagAfterValueCount;
+  const [showTooltip, setShowTooltip] = useState(shouldShowCountBadge);
+  const selectedItemsToRender = selectedItems.slice(0, showTagAfterValueCount);
+  const handleClick = () => {
+    var _innerRef$current;
+    (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
+    toggleMenu();
+  };
+  const handleClear = () => {
+    setInputValue('');
+    setSelectedItems([]);
+  };
+
+  // We measure width and set to the input immediately
+  useLayoutEffect(() => {
+    if (measureRef !== null && measureRef !== void 0 && measureRef.current) {
+      const measuredWidth = measureRef.current.scrollWidth;
+      setInputWidth(measuredWidth);
+    }
+  }, [measureRef === null || measureRef === void 0 ? void 0 : (_measureRef$current = measureRef.current) === null || _measureRef$current === void 0 ? void 0 : _measureRef$current.scrollWidth, selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length]);
+
+  // Determine whether to show tooltip
+  useEffect(() => {
+    let isPartiallyHidden = false;
+    if (itemsRef.current && containerRef.current) {
+      const {
+        clientHeight: innerHeight
+      } = itemsRef.current;
+      const {
+        clientHeight: outerHeight
+      } = containerRef.current;
+      isPartiallyHidden = innerHeight > outerHeight;
+    }
+    setShowTooltip(shouldShowCountBadge || isPartiallyHidden);
+  }, [shouldShowCountBadge, (_itemsRef$current = itemsRef.current) === null || _itemsRef$current === void 0 ? void 0 : _itemsRef$current.clientHeight, (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.clientHeight]);
+  const content = jsxs("div", {
+    onClick: handleClick,
+    ref: mergedContainerRef,
+    css: getContainerStyles(theme, width, maxHeight),
+    children: [jsxs("div", {
+      ref: itemsRef,
+      css: getContentWrapperStyles(),
+      children: [selectedItemsToRender === null || selectedItemsToRender === void 0 ? void 0 : selectedItemsToRender.map((selectedItemForRender, index) => jsx(TypeaheadComboboxSelectedItem, {
+        label: getSelectedItemLabel(selectedItemForRender),
+        item: selectedItemForRender,
+        getSelectedItemProps: getSelectedItemProps,
+        removeSelectedItem: removeSelectedItem
+      }, `selected-item-${index}`)), shouldShowCountBadge && jsx(CountBadge, {
+        countStartAt: showTagAfterValueCount,
+        totalCount: selectedItems.length,
+        role: "status",
+        "aria-label": "Selected options count"
+      }), jsxs("div", {
+        css: getInputWrapperStyles(),
+        children: [jsx("input", {
+          ...downshiftProps,
+          ref: mergedInputRef,
+          css: [getInputStyles(theme), {
+            width: inputWidth
+          }, process.env.NODE_ENV === "production" ? "" : ";label:content;"],
+          ...restProps
+        }), jsxs("span", {
+          ref: measureRef,
+          "aria-hidden": true,
+          css: _ref4,
+          children: [selectedItems !== null && selectedItems !== void 0 && selectedItems.length ? (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.value : restProps.placeholder, "\xA0"]
+        })]
+      })]
+    }), jsx(TypeaheadComboboxControls, {
+      getDownshiftToggleButtonProps: getToggleButtonProps,
+      showClearSelectionButton: allowClear && (Boolean(inputValue) || selectedItems && selectedItems.length > 0),
+      handleClear: handleClear,
+      disabled: restProps.disabled
+    })]
+  });
+  if (showTooltip && selectedItems.length > 0) {
+    return jsx(Tooltip, {
+      title: selectedItems.map(item => getSelectedItemLabel(item)).join(', '),
+      children: content
+    });
+  }
+  return content;
+});
+
+const TypeaheadComboboxSectionHeader = _ref => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  const {
+    isInsideTypeaheadCombobox
+  } = useTypeaheadComboboxContext();
+  if (!isInsideTypeaheadCombobox) {
+    throw new Error('`TypeaheadComboboxSectionHeader` must be used within `TypeaheadComboboxMenu`');
+  }
+  return jsx(SectionHeader, {
+    ...props,
+    children: children
+  });
+};
+
+const TypeaheadComboboxSeparator = props => {
+  const {
+    isInsideTypeaheadCombobox
+  } = useTypeaheadComboboxContext();
+  if (!isInsideTypeaheadCombobox) {
+    throw new Error('`TypeaheadComboboxSeparator` must be used within `TypeaheadComboboxMenu`');
+  }
+  return jsx(Separator, {
+    ...props
+  });
+};
+
+const DuboisTypeaheadComboboxFooter = _ref => {
+  let {
+    children,
+    ...restProps
+  } = _ref;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const {
+    isInsideTypeaheadCombobox
+  } = useTypeaheadComboboxContext();
+  if (!isInsideTypeaheadCombobox) {
+    throw new Error('`TypeaheadComboboxFooter` must be used within `TypeaheadComboboxMenu`');
+  }
+  return jsx("div", {
+    ...restProps,
+    css: getFooterStyles(theme),
+    children: children
+  });
+};
+DuboisTypeaheadComboboxFooter.defaultProps = {
+  _TYPE: 'TypeaheadComboboxFooter'
+};
+const TypeaheadComboboxFooter = DuboisTypeaheadComboboxFooter;
+
+export { AccessibleContainer, Accordion, AccordionPanel, Alert, AlignCenterIcon, AlignLeftIcon, AlignRightIcon, AppIcon, ApplyDesignSystemContextOverrides, ApplyGlobalStyles, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowsUpDownIcon, AutoComplete, BarChartIcon, BarGroupedIcon, BarStackedIcon, BeakerIcon, BinaryIcon, BoldIcon, BookIcon, BookmarkFillIcon, BookmarkIcon, BooksIcon, BracketsCurlyIcon, BracketsSquareIcon, BracketsXIcon, BranchIcon, Breadcrumb, BriefcaseFillIcon, BriefcaseIcon, Button, CalendarClockIcon, CalendarEventIcon, CalendarIcon, CaretDownSquareIcon, CaretUpSquareIcon, CatalogIcon, CatalogOffIcon, ChartLineIcon, CheckCircleBadgeIcon, CheckCircleFillIcon, CheckCircleIcon, CheckIcon, CheckLineIcon, Checkbox, CheckboxIcon, ChecklistIcon, ChevronDoubleDownIcon, ChevronDoubleLeftIcon, ChevronDoubleRightIcon, ChevronDoubleUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardIcon, ClockIcon, ClockKeyIcon, CloseIcon, CloudDownloadIcon, CloudIcon, CloudKeyIcon, CloudModelIcon, CloudOffIcon, CloudUploadIcon, CodeIcon, Col, ColorFillIcon, ColumnIcon, ColumnsIcon, ConnectIcon, Content, CopyIcon, CursorPagination, CursorTypeIcon, DIcon, DU_BOIS_ENABLE_ANIMATION_CLASSNAME, DagIcon, DangerFillIcon, DangerIcon, DangerModal, DashIcon, DashboardIcon, DataIcon, DatabaseIcon, DecimalIcon, DesignSystemAntDConfigProvider, DialogCombobox, DialogComboboxButtonContainer, DialogComboboxContent, DialogComboboxCountBadge, EmptyResults as DialogComboboxEmpty, DialogComboboxFooter, DialogComboboxHintRow, DialogComboboxOptionControlledList, DialogComboboxOptionList, DialogComboboxOptionListCheckboxItem, DialogComboboxOptionListSearch, DialogComboboxOptionListSelectItem, DialogComboboxSectionHeader, DialogComboboxSeparator, DialogComboboxTrigger, DotsCircleIcon, DownloadIcon, DragIcon, Drawer, Dropdown, DuboisDatePicker, Empty, ExpandLessIcon, ExpandMoreIcon, FileCodeIcon, FileDocumentIcon, FileIcon, FileImageIcon, FileModelIcon, FilterIcon, FloatIcon, FolderBranchIcon, FolderCloudFilledIcon, FolderCloudIcon, FolderFillIcon, FolderIcon, FontIcon, ForkIcon, Form, FormDubois, FormUI, FullscreenExitIcon, FullscreenIcon, FunctionIcon, GearFillIcon, GearIcon, GenericSkeleton, GiftIcon, GitCommitIcon, GlobeIcon, GridDashIcon, GridIcon, H1Icon, H2Icon, H3Icon, Header$1 as Header, HistoryIcon, HomeIcon, Icon, ImageIcon, IndentDecreaseIcon, IndentIncreaseIcon, InfinityIcon, InfoFillIcon, InfoIcon, InfoTooltip, IngestionIcon, Input, ItalicIcon, KeyIcon, KeyboardIcon, LayerIcon, Layout, LegacyDatePicker, LegacyPopover, LegacySkeleton, LegacyTable, LettersIcon, LibrariesIcon, LightningIcon, LinkIcon, LinkOffIcon, ListBorderIcon, ListIcon, LoadingIcon, LoadingState, LockFillIcon, LockIcon, LockUnlockedIcon, MIcon, Menu, MenuIcon, MinusBoxIcon, MinusCircleFillIcon, MinusCircleIcon, Modal, ModelsIcon, Nav, NavButton, NoIcon, NotebookIcon, Notification, NotificationIcon, NotificationOffIcon, NumbersIcon, OfficeIcon, OptGroup, Option, OverflowIcon, PageBottomIcon, PageFirstIcon, PageLastIcon, PageTopIcon, PageWrapper, Pagination, Panel, PanelBody, PanelHeader, PanelHeaderButtons, PanelHeaderTitle, ParagraphSkeleton, PencilIcon, PinCancelIcon, PinFillIcon, PinIcon, PipelineIcon, PlayCircleFillIcon, PlayCircleIcon, PlayIcon, PlugIcon, PlusCircleFillIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, Popover, QueryEditorIcon, QueryIcon, QuestionMarkFillIcon, QuestionMarkIcon, QuestionMarkSpeechBubbleIcon, RHFControlledComponents, ROW_GUTTER_SIZE, Radio, ReaderModeIcon, RedoIcon, RefreshIcon, RestoreAntDDefaultClsPrefix, RobotIcon, Row, SaveIcon, SchoolIcon, SearchIcon, SecurityIcon, SegmentedControlButton, SegmentedControlGroup, Select, SelectOptGroup, SelectOption, SelectV2, SelectV2Content, SelectV2Option, SelectV2OptionGroup, SelectV2Trigger, ShareIcon, Sidebar, SidebarAutoIcon, SidebarCollapseIcon, SidebarExpandIcon, SidebarIcon, SlidersIcon, SortAlphabeticalAscendingIcon, SortAlphabeticalDescendingIcon, SortAlphabeticalLeftIcon, SortAlphabeticalRightIcon, SortAscendingIcon, SortDescendingIcon, SortUnsortedIcon, Space, Spacer, SpeechBubbleIcon, SpeechBubblePlusIcon, Spinner, SplitButton, StarFillIcon, StarIcon, StopCircleFillIcon, StopCircleIcon, StopIcon, StorefrontIcon, StreamIcon, Switch, SyncIcon, TabPane, Table, TableCell, TableContext, TableFilterInput, TableFilterLayout, TableHeader, TableIcon, TableInfinityIcon, TableLightningIcon, TableRow, TableRowAction, TableRowContext, TableRowMenuContainer, TableRowSelectCell, TableSkeleton, TableSkeletonRows, TableViewIcon, Tabs, Tag, TextBoxIcon, ThumbsDownIcon, ThumbsUpIcon, TitleSkeleton, ToggleButton, Tooltip, TrashIcon, Tree, TreeIcon, TypeaheadComboboxCheckboxItem, TypeaheadComboboxFooter, TypeaheadComboboxInput, TypeaheadComboboxMenu, TypeaheadComboboxMenuItem, TypeaheadComboboxMultiSelectInput, TypeaheadComboboxRoot, TypeaheadComboboxSectionHeader, TypeaheadComboboxSelectedItem, TypeaheadComboboxSeparator, TypeaheadComboboxToggleButton, Typography, UnderlineIcon, UndoIcon, UploadIcon, UsbIcon, UserBadgeIcon, UserCircleIcon, UserGroupIcon, UserIcon, VisibleIcon, VisibleOffIcon, WarningFillIcon, WarningIcon, WorkflowsIcon, WorkspacesIcon, XCircleFillIcon, XCircleIcon, ZoomInIcon, ZoomOutIcon, __INTERNAL_DO_NOT_USE__FormItem, __INTERNAL_DO_NOT_USE__Group, __INTERNAL_DO_NOT_USE__HorizontalGroup, __INTERNAL_DO_NOT_USE__VerticalGroup, dialogComboboxLookAheadKeyDown, findClosestOptionSibling, findHighlightedOption, getAnimationCss, getContentOptions, getDialogComboboxOptionLabelWidth, getGlobalStyles, getKeyboardNavigationFunctions, getPaginationEmotionStyles, getRadioStyles, getTabEmotionStyles, getValidationStateColor, getWrapperStyle, highlightOption, importantify, resetTabIndexToFocusedElement, useComboboxState, useDesignSystemFlags, useDesignSystemTheme, useLegacyNotification, useMultipleSelectionState, useThemedStyles, useTypeaheadComboboxContext, visuallyHidden, withNotifications };
 //# sourceMappingURL=index.js.map