@databricks/design-system 1.12.12 → 1.12.14

package/dist/index.js

@@ -1,12 +1,15 @@
-import { u as useDesignSystemTheme, I as Icon, D as DesignSystemAntDConfigProvider, R as RestoreAntDDefaultClsPrefix, g as getAnimationCss, C as CloseIcon, a as getDarkModePortalStyles, b as ChevronRightIcon, L as LoadingState, v as visuallyHidden, T as Typography, s as safex, i as importantify, S as Spinner, c as useDesignSystemContext, d as Tooltip, e as InfoIcon, f as Input, h as CheckIcon, B as Button, j as getValidationStateColor, A as ApplyDesignSystemContextOverrides, k as getShadowScrollStyles, l as DangerIcon, m as LoadingIcon, n as dropdownContentStyles, o as Title$2, p as AccessibleContainer, q as ChevronLeftIcon, r as DU_BOIS_ENABLE_ANIMATION_CLASSNAME, t as lightColorList, w as Root$4, x as Trigger$2, y as getDefaultStyles, z as getPrimaryStyles, E as getDisabledStyles, F as useUniqueId, G as useDesignSystemFlags } from './DropdownMenu-06a1051f.js';
-export { O as ApplyDesignSystemFlags, a2 as ColorVars, U as CursorIcon, K as DesignSystemContext, N as DesignSystemProvider, J as DesignSystemThemeContext, M as DesignSystemThemeProvider, Q as DropdownMenu, V as FaceFrownIcon, X as FaceNeutralIcon, Y as FaceSmileIcon, $ as LoadingStateContext, Z as MegaphoneIcon, _ as NewWindowIcon, W as WithDesignSystemThemeHoc, a1 as getBottomOnlyShadowScrollStyles, H as getButtonEmotionStyles, a0 as getTypographyColor, P as useAntDConfigProviderContext } from './DropdownMenu-06a1051f.js';
+import { u as useDesignSystemTheme, I as Icon, D as DesignSystemAntDConfigProvider, R as RestoreAntDDefaultClsPrefix, g as getAnimationCss, C as CloseIcon, a as getDarkModePortalStyles, b as ChevronRightIcon, L as LoadingState, v as visuallyHidden, T as Typography, s as safex, i as importantify, c as useUniqueId, d as useDesignSystemContext, e as CheckIcon, S as Spinner, f as Input, B as Button, h as getValidationStateColor, A as ApplyDesignSystemContextOverrides, j as getShadowScrollStyles, k as DangerIcon, W as WarningIcon, l as LoadingIcon, m as Title$2, n as AccessibleContainer, o as ChevronLeftIcon, p as DU_BOIS_ENABLE_ANIMATION_CLASSNAME, q as lightColorList, r as getDefaultStyles, t as getPrimaryStyles, w as getDisabledStyles, x as useDesignSystemFlags, y as Stepper } from './Stepper-839336b1.js';
+export { O as ApplyDesignSystemFlags, a3 as ColorVars, U as CursorIcon, K as DesignSystemContext, H as DesignSystemEventProvider, F as DesignSystemEventProviderAnalyticsEventTypes, E as DesignSystemEventProviderComponentTypes, N as DesignSystemProvider, J as DesignSystemThemeContext, M as DesignSystemThemeProvider, V as FaceFrownIcon, X as FaceNeutralIcon, Y as FaceSmileIcon, a0 as LoadingStateContext, Z as MegaphoneIcon, _ as NewWindowIcon, Q as WithDesignSystemThemeHoc, a2 as getBottomOnlyShadowScrollStyles, z as getButtonEmotionStyles, $ as getInputStyles, a1 as getTypographyColor, P as useAntDConfigProviderContext, G as useDesignSystemEventComponentCallbacks } from './Stepper-839336b1.js';
 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, Steps as Steps$1, Switch as Switch$1, Tabs as Tabs$1, Tree as Tree$1 } from 'antd';
+import { Collapse, Alert as Alert$1, AutoComplete as AutoComplete$1, Breadcrumb as Breadcrumb$1, Checkbox as Checkbox$1, Tooltip as Tooltip$1, DatePicker, Dropdown as Dropdown$1, Form as Form$1, Radio as Radio$1, Select as Select$1, Switch as Switch$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, Steps as Steps$1, Tabs as Tabs$1, Tree as Tree$1 } from 'antd';
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import * as React from 'react';
 import React__default, { useRef, useMemo, forwardRef, useEffect, createContext, useState, useImperativeHandle, useContext, Children, useCallback, Fragment as Fragment$1, useLayoutEffect } from 'react';
 import classnames from 'classnames';
 import _isUndefined from 'lodash/isUndefined';
+import { ContextMenu as ContextMenu$2, ContextMenuTrigger, ContextMenuItemIndicator, ContextMenuGroup, ContextMenuRadioGroup, ContextMenuArrow, ContextMenuSub, ContextMenuSubTrigger, ContextMenuPortal, ContextMenuContent, ContextMenuSubContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator } from '@radix-ui/react-context-menu';
+import * as DropdownMenu$1 from '@radix-ui/react-dropdown-menu';
+import _isNil from 'lodash/isNil';
 import * as Popover$1 from '@radix-ui/react-popover';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { useController } from 'react-hook-form';
@@ -21,8 +24,8 @@ import _times from 'lodash/times';
 import _random from 'lodash/random';
 import * as Toggle from '@radix-ui/react-toggle';
 import chroma from 'chroma-js';
-import '@radix-ui/react-dropdown-menu';
-import 'lodash/isNil';
+import _compact from 'lodash/compact';
+import _pick from 'lodash/pick';
 import 'lodash/endsWith';
 import 'lodash/isBoolean';
 import 'lodash/isNumber';
@@ -485,6 +488,32 @@ const BarStackedIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
 BarStackedIcon.displayName = 'BarStackedIcon';
 var BarStackedIcon$1 = BarStackedIcon;
 
+function SvgBarStackedPercentageIcon(props) {
+  return jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 12 14",
+    ...props,
+    children: jsx("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M3.88 0c-.415 0-.38 0 0 0H.75A.75.75 0 0 0 0 .75v12.5c0 .414.336.75.75.75h10.5a.75.75 0 0 0 .75-.75V.5c0-.414-.336-.5-.75-.5H3.88ZM7 7.5v5H5v-5h2ZM7 6V1.5H5V6h2Zm3.5 6.5h-2v-1.75h2v1.75Zm-2-11v7.75h2V1.5h-2Zm-5 7.75V1.5h-2v7.75h2Zm0 3.25v-1.75h-2v1.75h2Z",
+      clipRule: "evenodd"
+    })
+  });
+}
+const BarStackedPercentageIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return jsx(Icon, {
+    ref: forwardedRef,
+    ...props,
+    component: SvgBarStackedPercentageIcon
+  });
+});
+BarStackedPercentageIcon.displayName = 'BarStackedPercentageIcon';
+var BarStackedPercentageIcon$1 = BarStackedPercentageIcon;
+
 function SvgBeakerIcon(props) {
   return jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -2176,6 +2205,136 @@ const DragIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
 DragIcon.displayName = 'DragIcon';
 var DragIcon$1 = DragIcon;
 
+function SvgErdIcon(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("mask", {
+      id: "ERDIcon_svg__a",
+      width: 6,
+      height: 5,
+      x: 10,
+      y: 1,
+      maskUnits: "userSpaceOnUse",
+      style: {
+        maskType: 'luminance'
+      },
+      children: jsx("path", {
+        fill: "#fff",
+        d: "M11.25 6h4a.75.75 0 0 0 .75-.75v-3.5a.75.75 0 0 0-.75-.75h-4a.75.75 0 0 0-.75.75v3.5c0 .414.336.75.75.75Z"
+      })
+    }), jsx("g", {
+      mask: "url(#ERDIcon_svg__a)",
+      children: jsx("path", {
+        stroke: "currentColor",
+        strokeWidth: 3,
+        d: "M11.25 6h4a.75.75 0 0 0 .75-.75v-3.5a.75.75 0 0 0-.75-.75h-4a.75.75 0 0 0-.75.75v3.5c0 .414.336.75.75.75Z"
+      })
+    }), jsx("mask", {
+      id: "ERDIcon_svg__b",
+      width: 6,
+      height: 5,
+      x: 10,
+      y: 10,
+      maskUnits: "userSpaceOnUse",
+      style: {
+        maskType: 'luminance'
+      },
+      children: jsx("path", {
+        fill: "#fff",
+        d: "M11.25 15h4a.75.75 0 0 0 .75-.75v-3.5a.75.75 0 0 0-.75-.75h-4a.75.75 0 0 0-.75.75v3.5c0 .414.336.75.75.75Z"
+      })
+    }), jsx("g", {
+      mask: "url(#ERDIcon_svg__b)",
+      children: jsx("path", {
+        stroke: "currentColor",
+        strokeWidth: 3,
+        d: "M11.25 15h4a.75.75 0 0 0 .75-.75v-3.5a.75.75 0 0 0-.75-.75h-4a.75.75 0 0 0-.75.75v3.5c0 .414.336.75.75.75Z"
+      })
+    }), jsx("mask", {
+      id: "ERDIcon_svg__c",
+      width: 6,
+      height: 5,
+      x: 0,
+      y: 1,
+      maskUnits: "userSpaceOnUse",
+      style: {
+        maskType: 'luminance'
+      },
+      children: jsx("path", {
+        fill: "#fff",
+        d: "M.75 6h4a.75.75 0 0 0 .75-.75v-3.5A.75.75 0 0 0 4.75 1h-4a.75.75 0 0 0-.75.75v3.5c0 .414.336.75.75.75Z"
+      })
+    }), jsx("g", {
+      mask: "url(#ERDIcon_svg__c)",
+      children: jsx("path", {
+        stroke: "currentColor",
+        strokeWidth: 3,
+        d: "M.75 6h4a.75.75 0 0 0 .75-.75v-3.5A.75.75 0 0 0 4.75 1h-4a.75.75 0 0 0-.75.75v3.5c0 .414.336.75.75.75Z"
+      })
+    }), jsx("mask", {
+      id: "ERDIcon_svg__d",
+      width: 6,
+      height: 5,
+      x: 0,
+      y: 10,
+      maskUnits: "userSpaceOnUse",
+      style: {
+        maskType: 'luminance'
+      },
+      children: jsx("path", {
+        fill: "#fff",
+        d: "M.75 15h4a.75.75 0 0 0 .75-.75v-3.5a.75.75 0 0 0-.75-.75h-4a.75.75 0 0 0-.75.75v3.5c0 .414.336.75.75.75Z"
+      })
+    }), jsx("g", {
+      mask: "url(#ERDIcon_svg__d)",
+      children: jsx("path", {
+        stroke: "currentColor",
+        strokeWidth: 3,
+        d: "M.75 15h4a.75.75 0 0 0 .75-.75v-3.5a.75.75 0 0 0-.75-.75h-4a.75.75 0 0 0-.75.75v3.5c0 .414.336.75.75.75Z"
+      })
+    }), jsx("mask", {
+      id: "ERDIcon_svg__e",
+      width: 6,
+      height: 6,
+      x: 5,
+      y: 5,
+      maskUnits: "userSpaceOnUse",
+      style: {
+        maskType: 'luminance'
+      },
+      children: jsx("path", {
+        fill: "#fff",
+        d: "M6 10.5h4a.75.75 0 0 0 .75-.75v-3.5A.75.75 0 0 0 10 5.5H6a.75.75 0 0 0-.75.75v3.5c0 .414.336.75.75.75Z"
+      })
+    }), jsx("g", {
+      mask: "url(#ERDIcon_svg__e)",
+      children: jsx("path", {
+        stroke: "currentColor",
+        strokeWidth: 3,
+        d: "M6 10.5h4a.75.75 0 0 0 .75-.75v-3.5A.75.75 0 0 0 10 5.5H6a.75.75 0 0 0-.75.75v3.5c0 .414.336.75.75.75Z"
+      })
+    }), jsx("path", {
+      stroke: "currentColor",
+      strokeWidth: 1.5,
+      d: "M11.5 11 9.75 9.5M4.5 5l1.75 1.5M11.5 5 9.75 6.5M4.5 11l1.75-1.5"
+    })]
+  });
+}
+const ErdIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return jsx(Icon, {
+    ref: forwardedRef,
+    ...props,
+    component: SvgErdIcon
+  });
+});
+ErdIcon.displayName = 'ErdIcon';
+var ErdIcon$1 = ErdIcon;
+
 function SvgExpandLessIcon(props) {
   return jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3192,6 +3351,35 @@ const InfoFillIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
 InfoFillIcon.displayName = 'InfoFillIcon';
 var InfoFillIcon$1 = InfoFillIcon;
 
+function SvgInfoIcon(props) {
+  return jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 16 16",
+    ...props,
+    children: [jsx("path", {
+      fill: "currentColor",
+      d: "M7.25 11V7h1.5v4h-1.5ZM8 4.5A.75.75 0 1 1 8 6a.75.75 0 0 1 0-1.5Z"
+    }), jsx("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Z",
+      clipRule: "evenodd"
+    })]
+  });
+}
+const InfoIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return jsx(Icon, {
+    ref: forwardedRef,
+    ...props,
+    component: SvgInfoIcon
+  });
+});
+InfoIcon.displayName = 'InfoIcon';
+var InfoIcon$1 = InfoIcon;
+
 function SvgIngestionIcon(props) {
   return jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3527,6 +3715,30 @@ const ListBorderIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
 ListBorderIcon.displayName = 'ListBorderIcon';
 var ListBorderIcon$1 = ListBorderIcon;
 
+function SvgListClearIcon(props) {
+  return jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 16 14",
+    ...props,
+    children: jsx("path", {
+      fill: "currentColor",
+      d: "M10.133 14 8.89 12.775 11.2 10.5 8.889 8.225 10.133 7l2.311 2.275L14.756 7 16 8.225 13.689 10.5 16 12.775 14.756 14l-2.312-2.275L10.134 14ZM0 8.75V7h6.222v1.75H0Zm0-3.5V3.5h9.778v1.75H0Zm0-3.5V0h9.778v1.75H0Z"
+    })
+  });
+}
+const ListClearIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return jsx(Icon, {
+    ref: forwardedRef,
+    ...props,
+    component: SvgListClearIcon
+  });
+});
+ListClearIcon.displayName = 'ListClearIcon';
+var ListClearIcon$1 = ListClearIcon;
+
 function SvgListIcon(props) {
   return jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -4122,6 +4334,32 @@ const PageTopIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
 PageTopIcon.displayName = 'PageTopIcon';
 var PageTopIcon$1 = PageTopIcon;
 
+function SvgPauseIcon(props) {
+  return jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 16 16",
+    ...props,
+    children: jsx("path", {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeWidth: 1.5,
+      d: "M5.25 3v10M10.752 3v10"
+    })
+  });
+}
+const PauseIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return jsx(Icon, {
+    ref: forwardedRef,
+    ...props,
+    component: SvgPauseIcon
+  });
+});
+PauseIcon.displayName = 'PauseIcon';
+var PauseIcon$1 = PauseIcon;
+
 function SvgPencilIcon(props) {
   return jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -5277,6 +5515,30 @@ const SortUnsortedIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
 SortUnsortedIcon.displayName = 'SortUnsortedIcon';
 var SortUnsortedIcon$1 = SortUnsortedIcon;
 
+function SvgSparkleIcon(props) {
+  return jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 16 16",
+    ...props,
+    children: jsx("path", {
+      fill: "currentColor",
+      d: "m7.7 6.407-1.14.43c-.45.17-.45.81 0 .98l1.14.43c.82.31 1.46.95 1.77 1.77l.43 1.14c.17.45.81.45.98 0l.43-1.14c.31-.82.95-1.46 1.77-1.77l1.14-.43c.45-.17.45-.81 0-.98l-1.14-.43c-.82-.31-1.46-.95-1.77-1.77l-.43-1.14a.524.524 0 0 0-.98 0l-.43 1.14c-.31.82-.95 1.46-1.77 1.77ZM3.855 11.045l-.66.25c-.26.1-.26.47 0 .57l.66.25c.47.18.85.55 1.03 1.03l.25.66c.1.26.47.26.57 0l.25-.66c.18-.47.55-.85 1.03-1.03l.66-.25c.26-.1.26-.47 0-.57l-.66-.25c-.47-.18-.85-.55-1.03-1.03l-.25-.66a.306.306 0 0 0-.57 0l-.25.66c-.18.47-.55.85-1.03 1.03ZM2.713 4.723l-.551.203a.25.25 0 0 0 0 .468l.55.203c.396.144.707.455.85.85l.204.551a.25.25 0 0 0 .468 0l.203-.55c.144-.396.455-.707.85-.85l.551-.204a.25.25 0 0 0 0-.468l-.55-.203a1.422 1.422 0 0 1-.85-.85l-.204-.551a.25.25 0 0 0-.468 0l-.203.55a1.422 1.422 0 0 1-.85.85Z"
+    })
+  });
+}
+const SparkleIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return jsx(Icon, {
+    ref: forwardedRef,
+    ...props,
+    component: SvgSparkleIcon
+  });
+});
+SparkleIcon.displayName = 'SparkleIcon';
+var SparkleIcon$1 = SparkleIcon;
+
 function SvgSpeechBubbleIcon(props) {
   return jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -5411,6 +5673,93 @@ const StarIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
 StarIcon.displayName = 'StarIcon';
 var StarIcon$1 = StarIcon;
 
+function SvgStepIntoIcon(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: "m7.47 10.53-4-4 1.06-1.06 2.72 2.72V1h1.5v7.19l2.72-2.72 1.06 1.06-4 4-.53.53-.53-.53Z",
+      clipRule: "evenodd"
+    }), jsx("path", {
+      fill: "currentColor",
+      d: "M6.5 13.5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 0 0-3 0Z"
+    })]
+  });
+}
+const StepIntoIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return jsx(Icon, {
+    ref: forwardedRef,
+    ...props,
+    component: SvgStepIntoIcon
+  });
+});
+StepIntoIcon.displayName = 'StepIntoIcon';
+var StepIntoIcon$1 = StepIntoIcon;
+
+function SvgStepOutIcon(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: "m7.47 5.47-4 4 1.06 1.06 2.72-2.72V15h1.5V7.81l2.72 2.72 1.06-1.06-4-4L8 4.94l-.53.53Z",
+      clipRule: "evenodd"
+    }), jsx("path", {
+      fill: "currentColor",
+      d: "M6.5 2.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z"
+    })]
+  });
+}
+const StepOutIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return jsx(Icon, {
+    ref: forwardedRef,
+    ...props,
+    component: SvgStepOutIcon
+  });
+});
+StepOutIcon.displayName = 'StepOutIcon';
+var StepOutIcon$1 = StepOutIcon;
+
+function SvgStepOverIcon(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: "M9.5 13.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
+    }), jsx("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M8.012 4c2.179 0 4.137.931 5.488 2.412V4H15v5h-1.5v-.018H10v-1.5h2.608a6.018 6.018 0 0 0-4.596-2.116A6.001 6.001 0 0 0 2.477 9C2.5 9 1.27 8.313 1.27 8.313A7.389 7.389 0 0 1 8.012 4Z",
+      clipRule: "evenodd"
+    })]
+  });
+}
+const StepOverIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return jsx(Icon, {
+    ref: forwardedRef,
+    ...props,
+    component: SvgStepOverIcon
+  });
+});
+StepOverIcon.displayName = 'StepOverIcon';
+var StepOverIcon$1 = StepOverIcon;
+
 function SvgStopCircleFillIcon(props) {
   return jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -5649,6 +5998,37 @@ const TableLightningIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
 TableLightningIcon.displayName = 'TableLightningIcon';
 var TableLightningIcon$1 = TableLightningIcon;
 
+function SvgTableOnlineViewIcon(props) {
+  return jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 16 15",
+    ...props,
+    children: [jsx("path", {
+      stroke: "currentColor",
+      strokeWidth: 1.5,
+      d: "M.75 1A.25.25 0 0 1 1 .75h12a.25.25 0 0 1 .25.25v12a.25.25 0 0 1-.25.25H1A.25.25 0 0 1 .75 13V1ZM1 5.25h12M5.25 13V6"
+    }), jsx("path", {
+      fill: "#fff",
+      d: "M7 7h9v7.5H7z"
+    }), jsx("path", {
+      stroke: "currentColor",
+      d: "M10.5 12H15m0 0-1.5-1.5M15 12l-1.5 1.5M12.5 9.5H8m0 0L9.5 11M8 9.5 9.5 8"
+    })]
+  });
+}
+const TableOnlineViewIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return jsx(Icon, {
+    ref: forwardedRef,
+    ...props,
+    component: SvgTableOnlineViewIcon
+  });
+});
+TableOnlineViewIcon.displayName = 'TableOnlineViewIcon';
+var TableOnlineViewIcon$1 = TableOnlineViewIcon;
+
 function SvgTableStreamIcon(props) {
   return jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -6335,35 +6715,6 @@ const WarningFillIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
 WarningFillIcon.displayName = 'WarningFillIcon';
 var WarningFillIcon$1 = WarningFillIcon;
 
-function SvgWarningIcon(props) {
-  return jsxs("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    viewBox: "0 0 16 16",
-    ...props,
-    children: [jsx("path", {
-      fill: "currentColor",
-      d: "M7.25 10V6.5h1.5V10h-1.5ZM8 12.5A.75.75 0 1 0 8 11a.75.75 0 0 0 0 1.5Z"
-    }), jsx("path", {
-      fill: "currentColor",
-      fillRule: "evenodd",
-      d: "M8 1a.75.75 0 0 1 .649.374l7.25 12.5A.75.75 0 0 1 15.25 15H.75a.75.75 0 0 1-.649-1.126l7.25-12.5A.75.75 0 0 1 8 1Zm0 2.245L2.052 13.5h11.896L8 3.245Z",
-      clipRule: "evenodd"
-    })]
-  });
-}
-const WarningIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
-  return jsx(Icon, {
-    ref: forwardedRef,
-    ...props,
-    component: SvgWarningIcon
-  });
-});
-WarningIcon.displayName = 'WarningIcon';
-var WarningIcon$1 = WarningIcon;
-
 function SvgWorkflowsIcon(props) {
   return jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -6854,6 +7205,9 @@ const ApplyGlobalStyles = () => {
   });
 };
 
+/**
+ * @deprecated Use `TypeaheadCombobox` instead.
+ */
 const AutoComplete = /* #__PURE__ */(() => {
   const AutoComplete = _ref => {
     let {
@@ -6991,14 +7345,14 @@ const genSkeletonAnimatedColor = function (theme) {
   }, process.env.NODE_ENV === "production" ? "" : ";label:genSkeletonAnimatedColor;");
 };
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$u() { 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__$t() { 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__$u
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$t
 };
 const GenericSkeleton = _ref => {
   let {
@@ -7028,14 +7382,14 @@ const GenericSkeleton = _ref => {
   });
 };
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$t() { 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__$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)."; }
 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__$t
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$s
 };
 const paragraphFillStyles = process.env.NODE_ENV === "production" ? {
   name: "10nptxl",
@@ -7043,7 +7397,7 @@ 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__$t
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$s
 };
 const ParagraphSkeleton = _ref => {
   let {
@@ -7080,14 +7434,14 @@ const ParagraphSkeleton = _ref => {
   });
 };
 
-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)."; }
+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)."; }
 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__$s
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$r
 };
 const titleFillStyles = process.env.NODE_ENV === "production" ? {
   name: "9fmdbb",
@@ -7095,7 +7449,7 @@ 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__$s
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$r
 };
 const TitleSkeleton = _ref => {
   let {
@@ -7128,7 +7482,7 @@ const TitleSkeleton = _ref => {
   });
 };
 
-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)."; }
+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)."; }
 // 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.
@@ -7151,7 +7505,7 @@ const repeatingElementsStyles = {
   } : {
     name: "10gwa9a-cell",
     styles: "display:inline-grid;position:relative;flex:1;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__$r
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$q
   },
   header: process.env.NODE_ENV === "production" ? {
     name: "ik7qgz",
@@ -7159,7 +7513,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__$r
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$q
   },
   row: process.env.NODE_ENV === "production" ? {
     name: "ndcf6g",
@@ -7167,7 +7521,7 @@ const repeatingElementsStyles = {
   } : {
     name: "8dtpje-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-isHeader:first-of-type > *{border-top:1px solid;border-color:var(--table-separator-color);};label:row;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$r
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$q
   }
 };
 
@@ -7192,7 +7546,7 @@ const tableStyles = {
   } : {
     name: "1csnd2v-table",
     styles: ".table-isScrollable &{flex:1;overflow:auto;};label:table;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$r
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$q
   },
   headerButtonTarget: process.env.NODE_ENV === "production" ? {
     name: "sezlox",
@@ -7200,7 +7554,7 @@ 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__$r
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$q
   },
   sortHeaderIconOnRight: process.env.NODE_ENV === "production" ? {
     name: "1hdiaor",
@@ -7208,7 +7562,7 @@ const tableStyles = {
   } : {
     name: "evh3p3-sortHeaderIconOnRight",
     styles: "margin-left:var(--table-spacing-xs);label:sortHeaderIconOnRight;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$r
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$q
   },
   sortHeaderIconOnLeft: process.env.NODE_ENV === "production" ? {
     name: "d4plmt",
@@ -7216,7 +7570,7 @@ const tableStyles = {
   } : {
     name: "1gr7edl-sortHeaderIconOnLeft",
     styles: "margin-right:var(--table-spacing-xs);label:sortHeaderIconOnLeft;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$r
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$q
   },
   checkboxCell: process.env.NODE_ENV === "production" ? {
     name: "4cdr0s",
@@ -7224,7 +7578,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__$r
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$q
   },
   resizeHandleContainer: /*#__PURE__*/css({
     position: 'absolute',
@@ -7245,7 +7599,7 @@ const tableStyles = {
   } : {
     name: "1ot7jju-resizeHandle",
     styles: "width:1px;background:var(--table-resize-handle-color);label:resizeHandle;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$r
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$q
   },
   paginationContainer: process.env.NODE_ENV === "production" ? {
     name: "ehlmid",
@@ -7253,7 +7607,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__$r
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$q
   }
 };
 var tableStyles$1 = tableStyles;
@@ -7304,7 +7658,6 @@ const Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
       // See: https://emotion.sh/docs/best-practices#advanced-css-variables-with-style
       style: {
         ...style,
-        ['--table-background-color']: theme.colors.backgroundPrimary,
         ['--table-header-active-color']: theme.colors.actionDefaultTextPress,
         ['colorScheme']: theme.isDarkMode ? 'dark' : undefined,
         ['--table-header-background-color']: theme.colors.backgroundPrimary,
@@ -7440,7 +7793,7 @@ const TableRow = /*#__PURE__*/forwardRef(function TableRow(_ref, ref) {
   });
 });
 
-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)."; }
+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 TableRowActionStyles = {
   container: process.env.NODE_ENV === "production" ? {
     name: "gk361n",
@@ -7448,7 +7801,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__$q
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$p
   }
 };
 const TableRowAction = /*#__PURE__*/forwardRef(function TableRowAction(_ref, ref) {
@@ -7484,7 +7837,7 @@ const TableRowAction = /*#__PURE__*/forwardRef(function TableRowAction(_ref, ref
 /** @deprecated Use `TableRowAction` instead */
 const TableRowMenuContainer = TableRowAction;
 
-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)."; }
+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)."; }
 const TableSkeletonStyles = {
   container: process.env.NODE_ENV === "production" ? {
     name: "6kz1wu",
@@ -7492,7 +7845,7 @@ const TableSkeletonStyles = {
   } : {
     name: "1we0er9-container",
     styles: "display:flex;flex-direction:column;align-items:flex-start;label:container;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$p
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$o
   },
   cell: process.env.NODE_ENV === "production" ? {
     name: "1t820zr",
@@ -7500,7 +7853,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__$p
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__$o
   }
 };
 const TableSkeleton = _ref => {
@@ -7723,7 +8076,7 @@ function getCheckboxEmotionStyles(clsPrefix, theme) {
   const hoverSelector = `${classInput}:hover + ${classInner}`;
   const pressSelector = `${classInput}:active + ${classInner}`;
   const styles = {
-    ...(useNewCheckboxStyles && {
+    ...(useNewCheckboxStyles ? {
       [`.${clsPrefix}`]: {
         top: 'unset',
         lineHeight: theme.typography.lineHeightBase
@@ -7732,7 +8085,7 @@ function getCheckboxEmotionStyles(clsPrefix, theme) {
         alignItems: 'center',
         lineHeight: theme.typography.lineHeightBase
       }
-    }),
+    } : {}),
     // Top level styles are for the unchecked state
     [classInner]: {
       borderColor: theme.colors.actionDefaultBorderDefault
@@ -7881,12 +8234,12 @@ const getWrapperStyle = _ref => {
   const styles = {
     height: theme.typography.lineHeightBase,
     lineHeight: theme.typography.lineHeightBase,
-    ...(useNewCheckboxStyles && {
+    ...(useNewCheckboxStyles ? {
       [`&& + .${clsPrefix}-hint, && + .${clsPrefix}-form-message`]: {
         paddingLeft: theme.spacing.lg,
         marginTop: 0
       }
-    }),
+    } : {}),
     ...wrapperStyle
   };
   return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getWrapperStyle;");
@@ -7971,172 +8324,972 @@ const Checkbox = CheckboxNamespace;
 // since these will be exposed in the library's exports.
 const __INTERNAL_DO_NOT_USE__Group = CheckboxGroup;
 
-function getEmotionStyles(clsPrefix, theme) {
-  const classFocused = `.${clsPrefix}-focused`;
-  const classActiveBar = `.${clsPrefix}-active-bar`;
-  const classSeparator = `.${clsPrefix}-separator`;
-  const classSuffix = `.${clsPrefix}-suffix`;
-  const styles = {
-    height: 32,
-    borderRadius: theme.borders.borderRadiusMd,
-    borderColor: theme.colors.border,
-    color: theme.colors.textPrimary,
-    transition: 'border 0s, box-shadow 0s',
-    [`&${classFocused},:hover`]: {
-      borderColor: theme.colors.actionDefaultBorderHover
-    },
-    '&:active': {
-      borderColor: theme.colors.actionDefaultBorderPress
-    },
-    [`&${classFocused}`]: {
-      boxShadow: `none !important`,
-      outline: `${theme.colors.actionDefaultBorderFocus} solid 2px !important`,
-      borderColor: 'transparent !important'
-    },
-    [`& ${classActiveBar}`]: {
-      background: `${theme.colors.actionDefaultBorderPress} !important`
-    },
-    [`& input::placeholder, & ${classSeparator}, & ${classSuffix}`]: {
-      color: theme.colors.textPrimary
-    }
-  };
-  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getEmotionStyles;");
-}
-const getDropdownStyles$1 = theme => {
-  return {
-    zIndex: theme.options.zIndexBase + 50
-  };
-};
-function useDatePickerStyles() {
-  const {
-    theme,
-    getPrefixedClassName
-  } = useDesignSystemTheme();
-  const clsPrefix = getPrefixedClassName('picker');
-  return getEmotionStyles(clsPrefix, theme);
-}
-const DuboisDatePicker = /*#__PURE__*/forwardRef((props, ref) => {
-  const styles = useDatePickerStyles();
+/**
+ * If the tooltip is not displaying for you, it might be because the child does not accept the onMouseEnter, onMouseLeave, onPointerEnter,
+ * onPointerLeave, onFocus, and onClick props. You can add these props to your child component, or wrap it in a `<span>` tag.
+ *
+ * See go/dubois.
+ */
+const Tooltip = _ref => {
+  let {
+    children,
+    title,
+    placement = 'top',
+    dataTestId,
+    dangerouslySetAntdProps,
+    silenceScreenReader = false,
+    useAsLabel = false,
+    ...props
+  } = _ref;
   const {
     theme
   } = useDesignSystemTheme();
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(DatePicker, {
-      css: styles,
-      ref: ref,
-      ...props,
-      popupStyle: {
-        ...getDropdownStyles$1(theme),
-        ...(props.popupStyle || {})
-      }
-    })
+  const id = useUniqueId('dubois-tooltip-component-');
+  if (!title) {
+    return jsx(React__default.Fragment, {
+      children: children
+    });
+  }
+  const titleProps = silenceScreenReader ? {} : {
+    'aria-live': 'polite',
+    'aria-relevant': 'additions'
+  };
+  if (dataTestId) {
+    // TODO FEINF-1337 - this should turn into data-testid
+    titleProps['data-test-id'] = dataTestId;
+  }
+  const liveTitle = title && /*#__PURE__*/React__default.isValidElement(title) ? /*#__PURE__*/React__default.cloneElement(title, titleProps) : jsx("span", {
+    ...titleProps,
+    children: title
   });
-});
-const RangePicker = /*#__PURE__*/forwardRef((props, ref) => {
-  const styles = useDatePickerStyles();
-  const {
-    theme
-  } = useDesignSystemTheme();
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(DatePicker.RangePicker, {
-      css: styles,
-      ...props,
-      ref: ref,
-      popupStyle: {
-        ...getDropdownStyles$1(theme),
-        ...(props.popupStyle || {})
-      }
-    })
+  const ariaProps = {
+    [useAsLabel ? 'aria-labelledby' : 'aria-describedby']: id,
+    'aria-hidden': false
+  };
+  const childWithProps = /*#__PURE__*/React__default.isValidElement(children) ? /*#__PURE__*/React__default.cloneElement(children, {
+    ...ariaProps,
+    ...children.props
+  }) : _isNil(children) ? children : jsx("span", {
+    ...ariaProps,
+    children: children
   });
-});
-const TimePicker = /*#__PURE__*/forwardRef((props, ref) => {
-  const styles = useDatePickerStyles();
   const {
-    theme
-  } = useDesignSystemTheme();
+    overlayInnerStyle,
+    overlayStyle,
+    ...delegatedDangerouslySetAntdProps
+  } = dangerouslySetAntdProps || {};
   return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(DatePicker.TimePicker, {
-      css: styles,
+    children: jsx(Tooltip$1, {
+      id: id,
+      title: liveTitle,
+      placement: placement
+      // Always trigger on hover and focus
+      ,
+      trigger: ['hover', 'focus'],
+      overlayInnerStyle: {
+        backgroundColor: '#2F3941',
+        lineHeight: '22px',
+        padding: '4px 8px',
+        boxShadow: theme.general.shadowLow,
+        ...overlayInnerStyle,
+        ...getDarkModePortalStyles(theme)
+      },
+      overlayStyle: {
+        zIndex: theme.options.zIndexBase + 70,
+        ...overlayStyle
+      },
+      css: /*#__PURE__*/css({
+        ...getAnimationCss(theme.options.enableAnimation)
+      }, process.env.NODE_ENV === "production" ? "" : ";label:Tooltip;"),
+      ...delegatedDangerouslySetAntdProps,
       ...props,
-      ref: ref,
-      popupStyle: {
-        ...getDropdownStyles$1(theme),
-        ...(props.popupStyle || {})
-      }
+      children: childWithProps
     })
   });
-});
-const QuarterPicker = /*#__PURE__*/forwardRef((props, ref) => {
-  const styles = useDatePickerStyles();
+};
+
+const InfoTooltip = _ref => {
+  let {
+    title,
+    tooltipProps,
+    iconTitle,
+    isKeyboardFocusable = true,
+    ...iconProps
+  } = _ref;
   const {
     theme
   } = useDesignSystemTheme();
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(DatePicker.QuarterPicker, {
-      css: styles,
-      ...props,
-      ref: ref,
-      popupStyle: {
-        ...getDropdownStyles$1(theme),
-        ...(props.popupStyle || {})
-      }
+  return jsx(Tooltip, {
+    title: title,
+    ...tooltipProps,
+    children: jsx("span", {
+      style: {
+        display: 'inline-flex'
+      },
+      tabIndex: isKeyboardFocusable ? 0 : -1,
+      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 WeekPicker = /*#__PURE__*/forwardRef((props, ref) => {
-  const styles = useDatePickerStyles();
+};
+
+const Root$5 = DropdownMenu$1.Root; // Behavioral component only
+
+const Content$5 = /*#__PURE__*/forwardRef(function Content(_ref, ref) {
+  let {
+    children,
+    minWidth = 220,
+    isInsideModal,
+    onEscapeKeyDown,
+    onKeyDown,
+    ...props
+  } = _ref;
   const {
-    theme
-  } = useDesignSystemTheme();
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(DatePicker.WeekPicker, {
-      css: styles,
-      ...props,
+    getPopupContainer
+  } = useDesignSystemContext();
+  return jsx(DropdownMenu$1.Portal, {
+    container: getPopupContainer && getPopupContainer(),
+    children: jsx(DropdownMenu$1.Content, {
       ref: ref,
-      popupStyle: {
-        ...getDropdownStyles$1(theme),
-        ...(props.popupStyle || {})
-      }
-    })
-  });
-});
-const MonthPicker = /*#__PURE__*/forwardRef((props, ref) => {
-  const styles = useDatePickerStyles();
-  const {
-    theme
-  } = useDesignSystemTheme();
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(DatePicker.MonthPicker, {
-      css: styles,
+      loop: true,
+      css: [contentStyles$1, {
+        minWidth
+      }, process.env.NODE_ENV === "production" ? "" : ";label:Content;"],
+      sideOffset: 4,
+      align: "start",
+      onKeyDown: e => {
+        // This is a workaround for Radix's DropdownMenu.Content not receiving Escape key events
+        // when nested inside a modal. We need to stop propagation of the event so that the modal
+        // doesn't close when the DropdownMenu should.
+        if (e.key === 'Escape') {
+          if (isInsideModal) {
+            e.stopPropagation();
+          }
+          onEscapeKeyDown === null || onEscapeKeyDown === void 0 || onEscapeKeyDown(e.nativeEvent);
+        }
+        onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
+      },
       ...props,
-      ref: ref,
-      popupStyle: {
-        ...getDropdownStyles$1(theme),
-        ...(props.popupStyle || {})
-      }
+      children: children
     })
   });
 });
-const YearPicker = /*#__PURE__*/forwardRef((props, ref) => {
-  const styles = useDatePickerStyles();
+const SubContent$1 = /*#__PURE__*/forwardRef(function Content(_ref2, ref) {
+  let {
+    children,
+    minWidth = 220,
+    ...props
+  } = _ref2;
   const {
-    theme
-  } = useDesignSystemTheme();
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(DatePicker.YearPicker, {
-      css: styles,
-      ...props,
+    getPopupContainer
+  } = useDesignSystemContext();
+  return jsx(DropdownMenu$1.Portal, {
+    container: getPopupContainer && getPopupContainer(),
+    children: jsx(DropdownMenu$1.SubContent, {
       ref: ref,
-      popupStyle: {
-        ...getDropdownStyles$1(theme),
-        ...(props.popupStyle || {})
-      }
+      loop: true,
+      css: [contentStyles$1, {
+        minWidth
+      }, process.env.NODE_ENV === "production" ? "" : ";label:SubContent;"],
+      sideOffset: -2,
+      alignOffset: -5,
+      ...props,
+      children: children
     })
   });
 });
-
-/**
- * `LegacyDatePicker` was added as a temporary solution pending an
+const Trigger$3 = /*#__PURE__*/forwardRef(function Trigger(_ref3, ref) {
+  let {
+    children,
+    ...props
+  } = _ref3;
+  return jsx(DropdownMenu$1.Trigger, {
+    ref: ref,
+    ...props,
+    children: children
+  });
+});
+const Item$1 = /*#__PURE__*/forwardRef(function Item(_ref4, ref) {
+  let {
+    children,
+    disabledReason,
+    danger,
+    onClick,
+    ...props
+  } = _ref4;
+  const itemRef = useRef(null);
+  useImperativeHandle(ref, () => itemRef.current);
+  return jsx(DropdownMenu$1.Item, {
+    css: theme => [dropdownItemStyles, danger && dangerItemStyles(theme)],
+    ref: itemRef,
+    onClick: e => {
+      if (props.disabled) {
+        e.preventDefault();
+      } else {
+        onClick === null || onClick === void 0 || onClick(e);
+      }
+    },
+    ...props,
+    children: getNewChildren(children, props, disabledReason, itemRef)
+  });
+});
+const Label$2 = /*#__PURE__*/forwardRef(function Label(_ref5, ref) {
+  let {
+    children,
+    ...props
+  } = _ref5;
+  return jsx(DropdownMenu$1.Label, {
+    ref: ref,
+    css: [dropdownItemStyles, theme => ({
+      color: theme.colors.textSecondary,
+      '&:hover': {
+        cursor: 'default'
+      }
+    }), process.env.NODE_ENV === "production" ? "" : ";label:Label;"],
+    ...props,
+    children: children
+  });
+});
+const Separator$2 = /*#__PURE__*/forwardRef(function Separator(_ref6, ref) {
+  let {
+    children,
+    ...props
+  } = _ref6;
+  return jsx(DropdownMenu$1.Separator, {
+    ref: ref,
+    css: dropdownSeparatorStyles,
+    ...props,
+    children: children
+  });
+});
+const SubTrigger$1 = /*#__PURE__*/forwardRef(function TriggerItem(_ref7, ref) {
+  let {
+    children,
+    disabledReason,
+    ...props
+  } = _ref7;
+  const subTriggerRef = useRef(null);
+  useImperativeHandle(ref, () => subTriggerRef.current);
+  return jsxs(DropdownMenu$1.SubTrigger, {
+    ref: subTriggerRef,
+    css: [dropdownItemStyles, theme => ({
+      '&[data-state="open"]': {
+        backgroundColor: theme.colors.actionTertiaryBackgroundHover
+      }
+    }), process.env.NODE_ENV === "production" ? "" : ";label:SubTrigger;"],
+    ...props,
+    children: [getNewChildren(children, props, disabledReason, subTriggerRef), jsx(HintColumn, {
+      css: theme => ({
+        margin: CONSTANTS$1.subMenuIconMargin(theme),
+        display: 'flex',
+        alignSelf: 'stretch',
+        alignItems: 'center'
+      }),
+      children: jsx(ChevronRightIcon, {
+        css: theme => ({
+          fontSize: CONSTANTS$1.subMenuIconSize(theme)
+        })
+      })
+    })]
+  });
+});
+
+/**
+ * Deprecated. Use `SubTrigger` instead.
+ * @deprecated
+ */
+const TriggerItem = SubTrigger$1;
+const CheckboxItem$1 = /*#__PURE__*/forwardRef(function CheckboxItem(_ref8, ref) {
+  let {
+    children,
+    disabledReason,
+    ...props
+  } = _ref8;
+  const checkboxItemRef = useRef(null);
+  useImperativeHandle(ref, () => checkboxItemRef.current);
+  return jsx(DropdownMenu$1.CheckboxItem, {
+    ref: checkboxItemRef,
+    css: theme => [dropdownItemStyles, checkboxItemStyles(theme)],
+    ...props,
+    children: getNewChildren(children, props, disabledReason, checkboxItemRef)
+  });
+});
+const ItemIndicator$1 = /*#__PURE__*/forwardRef(function ItemIndicator(_ref9, ref) {
+  let {
+    children,
+    ...props
+  } = _ref9;
+  return jsx(DropdownMenu$1.ItemIndicator, {
+    ref: ref,
+    css: theme => ({
+      marginLeft: -(CONSTANTS$1.checkboxIconWidth(theme) + CONSTANTS$1.checkboxPaddingRight(theme)),
+      position: 'absolute',
+      fontSize: theme.general.iconFontSize
+    }),
+    ...props,
+    children: children !== null && children !== void 0 ? children : jsx(CheckIcon, {
+      css: theme => ({
+        color: theme.colors.textSecondary
+      })
+    })
+  });
+});
+const Arrow$2 = /*#__PURE__*/forwardRef(function Arrow(_ref10, ref) {
+  let {
+    children,
+    ...props
+  } = _ref10;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(DropdownMenu$1.Arrow, {
+    css: /*#__PURE__*/css({
+      fill: theme.colors.backgroundPrimary,
+      stroke: theme.colors.borderDecorative,
+      strokeDashoffset: -CONSTANTS$1.arrowBottomLength(),
+      strokeDasharray: CONSTANTS$1.arrowBottomLength() + 2 * CONSTANTS$1.arrowSide(),
+      strokeWidth: CONSTANTS$1.arrowStrokeWidth(),
+      // TODO: This is a temporary fix for the alignment of the Arrow;
+      // Radix has changed the implementation for v1.0.0 (uses floating-ui)
+      // which has new behaviors for alignment that we don't want. Generally
+      // we need to fix the arrow to always be aligned to the left of the menu (with
+      // offset equal to border radius)
+      position: 'relative',
+      top: -1
+    }, process.env.NODE_ENV === "production" ? "" : ";label:Arrow;"),
+    ref: ref,
+    width: 12,
+    height: 6,
+    ...props,
+    children: children
+  });
+});
+const RadioItem$1 = /*#__PURE__*/forwardRef(function RadioItem(_ref11, ref) {
+  let {
+    children,
+    disabledReason,
+    ...props
+  } = _ref11;
+  const radioItemRef = useRef(null);
+  useImperativeHandle(ref, () => radioItemRef.current);
+  return jsx(DropdownMenu$1.RadioItem, {
+    ref: radioItemRef,
+    css: theme => [dropdownItemStyles, checkboxItemStyles(theme)],
+    ...props,
+    children: getNewChildren(children, props, disabledReason, radioItemRef)
+  });
+});
+
+// UNWRAPPED RADIX-UI-COMPONENTS
+const Group$2 = DropdownMenu$1.Group;
+const RadioGroup$1 = DropdownMenu$1.RadioGroup;
+const Sub$1 = DropdownMenu$1.Sub;
+
+// EXTRA COMPONENTS
+const HintColumn = /*#__PURE__*/forwardRef(function HintColumn(_ref12, ref) {
+  let {
+    children,
+    ...props
+  } = _ref12;
+  return jsx("div", {
+    ref: ref,
+    css: [metaTextStyles, "margin-left:auto;" + (process.env.NODE_ENV === "production" ? "" : ";label:HintColumn;")],
+    ...props,
+    children: children
+  });
+});
+const HintRow$1 = /*#__PURE__*/forwardRef(function HintRow(_ref13, ref) {
+  let {
+    children,
+    ...props
+  } = _ref13;
+  return jsx("div", {
+    ref: ref,
+    css: [metaTextStyles, "min-width:100%;" + (process.env.NODE_ENV === "production" ? "" : ";label:HintRow;")],
+    ...props,
+    children: children
+  });
+});
+const IconWrapper = /*#__PURE__*/forwardRef(function IconWrapper(_ref14, ref) {
+  let {
+    children,
+    ...props
+  } = _ref14;
+  return jsx("div", {
+    ref: ref,
+    css: theme => ({
+      fontSize: 16,
+      color: theme.colors.textSecondary,
+      paddingRight: theme.spacing.sm
+    }),
+    ...props,
+    children: children
+  });
+});
+const getNewChildren = (children, props, disabledReason, ref) => {
+  const childCount = Children.count(children);
+  const tooltip = jsx(Tooltip, {
+    title: disabledReason,
+    placement: "right",
+    dangerouslySetAntdProps: {
+      getPopupContainer: () => ref.current || document.body
+    },
+    children: jsx("span", {
+      css: theme => infoIconStyles(theme),
+      children: jsx(InfoIcon$1, {
+        role: "presentation",
+        alt: "Disabled state reason",
+        "aria-hidden": "false"
+      })
+    })
+  });
+  if (childCount === 1) {
+    return getChild(children, Boolean(props['disabled']), disabledReason, tooltip, 0, childCount);
+  }
+  return Children.map(children, (child, idx) => {
+    return getChild(child, Boolean(props['disabled']), disabledReason, tooltip, idx, childCount);
+  });
+};
+const getChild = (child, isDisabled, disabledReason, tooltip, index, siblingCount) => {
+  const HintColumnType = jsx(HintColumn, {}).type;
+  const isHintColumnType = Boolean(child && typeof child !== 'string' && typeof child !== 'number' && typeof child !== 'boolean' && 'type' in child && (child === null || child === void 0 ? void 0 : child.type) === HintColumnType);
+  if (isDisabled && disabledReason && child && isHintColumnType) {
+    return jsxs(Fragment, {
+      children: [tooltip, child]
+    });
+  } else if (index === siblingCount - 1 && isDisabled && disabledReason) {
+    return jsxs(Fragment, {
+      children: [child, tooltip]
+    });
+  }
+  return child;
+};
+
+// CONSTANTS
+const CONSTANTS$1 = {
+  itemPaddingVertical(theme) {
+    // The number from the mocks is the midpoint between constants
+    return 0.5 * theme.spacing.xs + 0.5 * theme.spacing.sm;
+  },
+  itemPaddingHorizontal(theme) {
+    return theme.spacing.sm;
+  },
+  checkboxIconWidth(theme) {
+    return theme.general.iconFontSize;
+  },
+  checkboxPaddingLeft(theme) {
+    return theme.spacing.sm + theme.spacing.xs;
+  },
+  checkboxPaddingRight(theme) {
+    return theme.spacing.sm;
+  },
+  subMenuIconMargin(theme) {
+    // Negative margin so the icons can be larger without increasing the overall item height
+    const iconMarginVertical = this.itemPaddingVertical(theme) / 2;
+    const iconMarginRight = -this.itemPaddingVertical(theme) + theme.spacing.sm * 1.5;
+    return `${-iconMarginVertical}px ${-iconMarginRight}px ${-iconMarginVertical}px auto`;
+  },
+  subMenuIconSize(theme) {
+    return theme.spacing.lg;
+  },
+  arrowBottomLength() {
+    // The built in arrow is a polygon: 0,0 30,0 15,10
+    return 30;
+  },
+  arrowHeight() {
+    return 10;
+  },
+  arrowSide() {
+    return 2 * (this.arrowHeight() ** 2 * 2) ** 0.5;
+  },
+  arrowStrokeWidth() {
+    // This is eyeballed b/c relative to the svg viewbox coordinate system
+    return 2;
+  }
+};
+const dropdownContentStyles = theme => ({
+  backgroundColor: theme.colors.backgroundPrimary,
+  color: theme.colors.textPrimary,
+  lineHeight: theme.typography.lineHeightBase,
+  border: `1px solid ${theme.colors.borderDecorative}`,
+  borderRadius: theme.borders.borderRadiusMd,
+  padding: `${theme.spacing.xs}px 0`,
+  boxShadow: theme.general.shadowLow,
+  userSelect: 'none',
+  ...getDarkModePortalStyles(theme),
+  // Ant Design uses 1000s for their zIndex space; this ensures Radix works with that, but
+  // we'll likely need to be sure that all Radix components are using the same zIndex going forward.
+  //
+  // Additionally, there is an issue where macOS overlay scrollbars in Chrome and Safari (sometimes!)
+  // overlap other elements with higher zIndex, because the scrollbars themselves have zIndex 9999,
+  // so we have to use a higher value than that: https://github.com/databricks/universe/pull/232825
+  zIndex: 10000,
+  a: importantify({
+    color: theme.colors.textPrimary,
+    '&:hover, &:focus': {
+      color: theme.colors.textPrimary,
+      textDecoration: 'none'
+    }
+  })
+});
+const contentStyles$1 = theme => ({
+  ...dropdownContentStyles(theme)
+});
+const dropdownItemStyles = theme => ({
+  padding: `${CONSTANTS$1.itemPaddingVertical(theme)}px ${CONSTANTS$1.itemPaddingHorizontal(theme)}px`,
+  display: 'flex',
+  flexWrap: 'wrap',
+  alignItems: 'center',
+  outline: 'unset',
+  '&:hover': {
+    cursor: 'pointer'
+  },
+  '&:focus': {
+    backgroundColor: theme.colors.actionTertiaryBackgroundHover
+  },
+  '&[data-disabled]': {
+    pointerEvents: 'none',
+    color: theme.colors.actionDisabledText
+  }
+});
+const dangerItemStyles = theme => ({
+  color: theme.colors.textValidationDanger,
+  '&:hover, &:focus': {
+    backgroundColor: theme.colors.actionDangerDefaultBackgroundHover
+  }
+});
+const infoIconStyles = theme => ({
+  display: 'inline-flex',
+  paddingLeft: theme.spacing.xs,
+  color: theme.colors.textSecondary,
+  pointerEvents: 'all'
+});
+const checkboxItemStyles = theme => ({
+  position: 'relative',
+  paddingLeft: CONSTANTS$1.checkboxIconWidth(theme) + CONSTANTS$1.checkboxPaddingLeft(theme) + CONSTANTS$1.checkboxPaddingRight(theme)
+});
+const metaTextStyles = theme => ({
+  color: theme.colors.textSecondary,
+  fontSize: theme.typography.fontSizeSm,
+  '[data-disabled] &': {
+    color: theme.colors.actionDisabledText
+  }
+});
+const dropdownSeparatorStyles = theme => ({
+  height: 1,
+  margin: `${theme.spacing.xs}px ${theme.spacing.sm}px`,
+  backgroundColor: theme.colors.borderDecorative
+});
+
+var DropdownMenu = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Arrow: Arrow$2,
+  CheckboxItem: CheckboxItem$1,
+  Content: Content$5,
+  Group: Group$2,
+  HintColumn: HintColumn,
+  HintRow: HintRow$1,
+  IconWrapper: IconWrapper,
+  Item: Item$1,
+  ItemIndicator: ItemIndicator$1,
+  Label: Label$2,
+  RadioGroup: RadioGroup$1,
+  RadioItem: RadioItem$1,
+  Root: Root$5,
+  Separator: Separator$2,
+  Sub: Sub$1,
+  SubContent: SubContent$1,
+  SubTrigger: SubTrigger$1,
+  Trigger: Trigger$3,
+  TriggerItem: TriggerItem,
+  dropdownContentStyles: dropdownContentStyles,
+  dropdownItemStyles: dropdownItemStyles,
+  dropdownSeparatorStyles: dropdownSeparatorStyles
+});
+
+const Root$4 = ContextMenu$2;
+const Trigger$2 = ContextMenuTrigger;
+const ItemIndicator = ContextMenuItemIndicator;
+const Group$1 = ContextMenuGroup;
+const RadioGroup = ContextMenuRadioGroup;
+const Arrow$1 = ContextMenuArrow;
+const Sub = ContextMenuSub;
+const SubTrigger = _ref => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(ContextMenuSubTrigger, {
+    ...props,
+    css: dropdownItemStyles(theme),
+    children: children
+  });
+};
+const Content$4 = _ref2 => {
+  let {
+    children,
+    minWidth,
+    ...childrenProps
+  } = _ref2;
+  const {
+    getPopupContainer
+  } = useDesignSystemContext();
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(ContextMenuPortal, {
+    container: getPopupContainer && getPopupContainer(),
+    children: jsx(ContextMenuContent, {
+      ...childrenProps,
+      css: [dropdownContentStyles(theme), {
+        minWidth
+      }, process.env.NODE_ENV === "production" ? "" : ";label:Content;"],
+      children: children
+    })
+  });
+};
+const SubContent = _ref3 => {
+  let {
+    children,
+    minWidth,
+    ...childrenProps
+  } = _ref3;
+  const {
+    getPopupContainer
+  } = useDesignSystemContext();
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(ContextMenuPortal, {
+    container: getPopupContainer && getPopupContainer(),
+    children: jsx(ContextMenuSubContent, {
+      ...childrenProps,
+      css: [dropdownContentStyles(theme), {
+        minWidth
+      }, process.env.NODE_ENV === "production" ? "" : ";label:SubContent;"],
+      children: children
+    })
+  });
+};
+const Item = _ref4 => {
+  let {
+    children,
+    ...props
+  } = _ref4;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(ContextMenuItem, {
+    ...props,
+    css: dropdownItemStyles(theme),
+    children: children
+  });
+};
+const CheckboxItem = _ref5 => {
+  let {
+    children,
+    ...props
+  } = _ref5;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsxs(ContextMenuCheckboxItem, {
+    ...props,
+    css: dropdownItemStyles(theme),
+    children: [jsx(ContextMenuItemIndicator, {
+      css: itemIndicatorStyles(theme),
+      children: jsx(CheckIcon, {})
+    }), !props.checked && jsx("div", {
+      style: {
+        width: theme.general.iconFontSize + theme.spacing.xs
+      }
+    }), children]
+  });
+};
+const RadioItem = _ref6 => {
+  let {
+    children,
+    ...props
+  } = _ref6;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsxs(ContextMenuRadioItem, {
+    ...props,
+    css: [dropdownItemStyles(theme), {
+      '&[data-state="unchecked"]': {
+        paddingLeft: theme.general.iconFontSize + theme.spacing.xs + theme.spacing.sm
+      }
+    }, process.env.NODE_ENV === "production" ? "" : ";label:RadioItem;"],
+    children: [jsx(ContextMenuItemIndicator, {
+      css: itemIndicatorStyles(theme),
+      children: jsx(CheckIcon, {})
+    }), children]
+  });
+};
+const Label$1 = _ref7 => {
+  let {
+    children,
+    ...props
+  } = _ref7;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(ContextMenuLabel, {
+    ...props,
+    css: /*#__PURE__*/css({
+      color: theme.colors.textSecondary,
+      padding: `${theme.spacing.sm - 2}px ${theme.spacing.sm}px`
+    }, process.env.NODE_ENV === "production" ? "" : ";label:Label;"),
+    children: children
+  });
+};
+const Hint$1 = _ref8 => {
+  let {
+    children
+  } = _ref8;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx("span", {
+    css: /*#__PURE__*/css({
+      display: 'inline-flex',
+      marginLeft: 'auto',
+      paddingLeft: theme.spacing.sm
+    }, process.env.NODE_ENV === "production" ? "" : ";label:Hint;"),
+    children: children
+  });
+};
+const Separator$1 = () => {
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(ContextMenuSeparator, {
+    css: dropdownSeparatorStyles(theme)
+  });
+};
+const itemIndicatorStyles = theme => /*#__PURE__*/css({
+  display: 'inline-flex',
+  paddingRight: theme.spacing.xs
+}, process.env.NODE_ENV === "production" ? "" : ";label:itemIndicatorStyles;");
+const ContextMenu = {
+  Root: Root$4,
+  Trigger: Trigger$2,
+  Label: Label$1,
+  Item,
+  Group: Group$1,
+  RadioGroup,
+  CheckboxItem,
+  RadioItem,
+  Arrow: Arrow$1,
+  Separator: Separator$1,
+  Sub,
+  SubTrigger,
+  SubContent,
+  Content: Content$4,
+  Hint: Hint$1
+};
+
+var ContextMenu$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Arrow: Arrow$1,
+  CheckboxItem: CheckboxItem,
+  Content: Content$4,
+  ContextMenu: ContextMenu,
+  Group: Group$1,
+  Hint: Hint$1,
+  Item: Item,
+  ItemIndicator: ItemIndicator,
+  Label: Label$1,
+  RadioGroup: RadioGroup,
+  RadioItem: RadioItem,
+  Root: Root$4,
+  Separator: Separator$1,
+  Sub: Sub,
+  SubContent: SubContent,
+  SubTrigger: SubTrigger,
+  Trigger: Trigger$2,
+  itemIndicatorStyles: itemIndicatorStyles
+});
+
+function getEmotionStyles(clsPrefix, theme) {
+  const classFocused = `.${clsPrefix}-focused`;
+  const classActiveBar = `.${clsPrefix}-active-bar`;
+  const classSeparator = `.${clsPrefix}-separator`;
+  const classSuffix = `.${clsPrefix}-suffix`;
+  const styles = {
+    height: 32,
+    borderRadius: theme.borders.borderRadiusMd,
+    borderColor: theme.colors.border,
+    color: theme.colors.textPrimary,
+    transition: 'border 0s, box-shadow 0s',
+    [`&${classFocused},:hover`]: {
+      borderColor: theme.colors.actionDefaultBorderHover
+    },
+    '&:active': {
+      borderColor: theme.colors.actionDefaultBorderPress
+    },
+    [`&${classFocused}`]: {
+      boxShadow: `none !important`,
+      outline: `${theme.colors.actionDefaultBorderFocus} solid 2px !important`,
+      outlineOffset: '-2px !important',
+      borderColor: 'transparent !important'
+    },
+    [`& ${classActiveBar}`]: {
+      background: `${theme.colors.actionDefaultBorderPress} !important`
+    },
+    [`& input::placeholder, & ${classSeparator}, & ${classSuffix}`]: {
+      color: theme.colors.textPrimary
+    }
+  };
+  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getEmotionStyles;");
+}
+const getDropdownStyles$1 = theme => {
+  return {
+    zIndex: theme.options.zIndexBase + 50
+  };
+};
+function useDatePickerStyles() {
+  const {
+    theme,
+    getPrefixedClassName
+  } = useDesignSystemTheme();
+  const clsPrefix = getPrefixedClassName('picker');
+  return getEmotionStyles(clsPrefix, theme);
+}
+const DuboisDatePicker = /*#__PURE__*/forwardRef((props, ref) => {
+  const styles = useDatePickerStyles();
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(DatePicker, {
+      css: styles,
+      ref: ref,
+      ...props,
+      popupStyle: {
+        ...getDropdownStyles$1(theme),
+        ...(props.popupStyle || {})
+      }
+    })
+  });
+});
+const RangePicker = /*#__PURE__*/forwardRef((props, ref) => {
+  const styles = useDatePickerStyles();
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(DatePicker.RangePicker, {
+      css: styles,
+      ...props,
+      ref: ref,
+      popupStyle: {
+        ...getDropdownStyles$1(theme),
+        ...(props.popupStyle || {})
+      }
+    })
+  });
+});
+const TimePicker = /*#__PURE__*/forwardRef((props, ref) => {
+  const styles = useDatePickerStyles();
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(DatePicker.TimePicker, {
+      css: styles,
+      ...props,
+      ref: ref,
+      popupStyle: {
+        ...getDropdownStyles$1(theme),
+        ...(props.popupStyle || {})
+      }
+    })
+  });
+});
+const QuarterPicker = /*#__PURE__*/forwardRef((props, ref) => {
+  const styles = useDatePickerStyles();
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(DatePicker.QuarterPicker, {
+      css: styles,
+      ...props,
+      ref: ref,
+      popupStyle: {
+        ...getDropdownStyles$1(theme),
+        ...(props.popupStyle || {})
+      }
+    })
+  });
+});
+const WeekPicker = /*#__PURE__*/forwardRef((props, ref) => {
+  const styles = useDatePickerStyles();
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(DatePicker.WeekPicker, {
+      css: styles,
+      ...props,
+      ref: ref,
+      popupStyle: {
+        ...getDropdownStyles$1(theme),
+        ...(props.popupStyle || {})
+      }
+    })
+  });
+});
+const MonthPicker = /*#__PURE__*/forwardRef((props, ref) => {
+  const styles = useDatePickerStyles();
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(DatePicker.MonthPicker, {
+      css: styles,
+      ...props,
+      ref: ref,
+      popupStyle: {
+        ...getDropdownStyles$1(theme),
+        ...(props.popupStyle || {})
+      }
+    })
+  });
+});
+const YearPicker = /*#__PURE__*/forwardRef((props, ref) => {
+  const styles = useDatePickerStyles();
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(DatePicker.YearPicker, {
+      css: styles,
+      ...props,
+      ref: ref,
+      popupStyle: {
+        ...getDropdownStyles$1(theme),
+        ...(props.popupStyle || {})
+      }
+    })
+  });
+});
+
+/**
+ * `LegacyDatePicker` was added as a temporary solution pending an
  * official Du Bois replacement. Use with caution.
  * @deprecated
  */
@@ -8396,23 +9549,170 @@ const SectionHeader = _ref => {
     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 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 getDialogComboboxOptionLabelWidth = (theme, width) => {
+  const paddingLeft = theme.spacing.xs + theme.spacing.sm;
+  const iconWidth = theme.spacing.md;
+  const labelMarginLeft = theme.spacing.sm;
+  if (typeof width === 'string') {
+    return `calc(${width} - ${paddingLeft + iconWidth + labelMarginLeft}px)`;
+  }
+  return width - paddingLeft + iconWidth + labelMarginLeft;
+};
+function isOptionDisabled(option) {
+  return option.hasAttribute('disabled') && option.getAttribute('disabled') !== 'false';
+}
+function highlightFirstNonDisabledOption(firstOptionItem) {
+  let startAt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'start';
+  let previousSelection = arguments.length > 2 ? arguments[2] : undefined;
+  if (isOptionDisabled(firstOptionItem)) {
+    const firstHighlightableOption = findClosestOptionSibling(firstOptionItem, startAt === 'end' ? 'previous' : 'next');
+    if (firstHighlightableOption) {
+      highlightOption(firstHighlightableOption, previousSelection);
+    }
+  } else {
+    highlightOption(firstOptionItem, previousSelection);
+  }
+}
+function findClosestOptionSibling(element, direction) {
+  const nextSibling = direction === 'previous' ? element.previousElementSibling : element.nextElementSibling;
+  if ((nextSibling === null || nextSibling === void 0 ? void 0 : nextSibling.getAttribute('role')) === 'option') {
+    if (isOptionDisabled(nextSibling)) {
+      return findClosestOptionSibling(nextSibling, direction);
+    }
+    return nextSibling;
+  } else if (nextSibling) {
+    let nextOptionSibling = nextSibling;
+    while (nextOptionSibling && (nextOptionSibling.getAttribute('role') !== 'option' || isOptionDisabled(nextOptionSibling))) {
+      nextOptionSibling = direction === 'previous' ? nextOptionSibling.previousElementSibling : nextOptionSibling.nextElementSibling;
+    }
+    return nextOptionSibling;
+  }
+  return null;
+}
+const highlightOption = function (currentSelection, prevSelection) {
+  var _currentSelection$scr;
+  let focus = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  if (prevSelection) {
+    prevSelection.setAttribute('tabIndex', '-1');
+    prevSelection.setAttribute('data-highlighted', 'false');
+  }
+  if (focus) {
+    currentSelection.focus();
+  }
+  currentSelection.setAttribute('tabIndex', '0');
+  currentSelection.setAttribute('data-highlighted', 'true');
+  (_currentSelection$scr = currentSelection.scrollIntoView) === null || _currentSelection$scr === void 0 || _currentSelection$scr.call(currentSelection, {
+    block: 'center'
+  });
+};
+const findHighlightedOption = options => {
+  var _options$find;
+  return (_options$find = options.find(option => option.getAttribute('data-highlighted') === 'true')) !== null && _options$find !== void 0 ? _options$find : undefined;
+};
+const getContentOptions = element => {
+  var _element$closest;
+  const options = (_element$closest = element.closest('[data-combobox-option-list="true"]')) === null || _element$closest === void 0 ? void 0 : _element$closest.querySelectorAll('[role="option"]');
+  return options ? Array.from(options) : undefined;
+};
+const getKeyboardNavigationFunctions = (handleSelect, _ref) => {
+  let {
+    onKeyDown,
+    onMouseEnter,
+    onDefaultKeyDown
+  } = _ref;
+  return {
+    onKeyDown: e => {
+      onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault();
+          const nextSibling = findClosestOptionSibling(e.currentTarget, 'next');
+          if (nextSibling) {
+            highlightOption(nextSibling, e.currentTarget);
+          } else {
+            var _getContentOptions;
+            const firstOption = (_getContentOptions = getContentOptions(e.currentTarget)) === null || _getContentOptions === void 0 ? void 0 : _getContentOptions[0];
+            if (firstOption) {
+              highlightFirstNonDisabledOption(firstOption, 'start', e.currentTarget);
+            }
+          }
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          const previousSibling = findClosestOptionSibling(e.currentTarget, 'previous');
+          if (previousSibling) {
+            highlightOption(previousSibling, e.currentTarget);
+          } else {
+            var _getContentOptions2;
+            const lastOption = (_getContentOptions2 = getContentOptions(e.currentTarget)) === null || _getContentOptions2 === void 0 ? void 0 : _getContentOptions2.slice(-1)[0];
+            if (lastOption) {
+              highlightFirstNonDisabledOption(lastOption, 'end', e.currentTarget);
+            }
+          }
+          break;
+        case 'Enter':
+          e.preventDefault();
+          handleSelect(e);
+          break;
+        default:
+          onDefaultKeyDown === null || onDefaultKeyDown === void 0 || onDefaultKeyDown(e);
+          break;
+      }
+    },
+    onMouseEnter: e => {
+      onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter(e);
+      resetTabIndexToFocusedElement(e.currentTarget);
+    }
+  };
+};
+const resetTabIndexToFocusedElement = elem => {
+  var _elem$closest;
+  (_elem$closest = elem.closest('[role="list"]')) === null || _elem$closest === void 0 || _elem$closest.querySelectorAll('[role="option"]').forEach(el => {
+    el.setAttribute('tabIndex', '-1');
+  });
+  elem.setAttribute('tabIndex', '0');
+  elem.focus();
+};
+const dialogComboboxLookAheadKeyDown = (e, setLookAhead, lookAhead) => {
+  var _e$currentTarget$pare, _e$currentTarget$pare2;
+  if (e.key === 'Escape' || e.key === 'Tab' || e.key === 'Enter') {
+    return;
+  }
+  e.preventDefault();
+  const siblings = Array.from((_e$currentTarget$pare = (_e$currentTarget$pare2 = e.currentTarget.parentElement) === null || _e$currentTarget$pare2 === void 0 ? void 0 : _e$currentTarget$pare2.children) !== null && _e$currentTarget$pare !== void 0 ? _e$currentTarget$pare : []);
+  // Look for the first sibling that starts with the pressed key + recently pressed keys (lookAhead, cleared after 1.5 seconds of inactivity)
+  const nextSiblingIndex = siblings.findIndex(sibling => {
+    var _sibling$textContent$, _sibling$textContent;
+    const siblingLabel = (_sibling$textContent$ = (_sibling$textContent = sibling.textContent) === null || _sibling$textContent === void 0 ? void 0 : _sibling$textContent.toLowerCase()) !== null && _sibling$textContent$ !== void 0 ? _sibling$textContent$ : '';
+    return siblingLabel.startsWith(lookAhead + e.key);
   });
+  if (nextSiblingIndex !== -1) {
+    const nextSibling = siblings[nextSiblingIndex];
+    nextSibling.focus();
+    if (setLookAhead) {
+      setLookAhead(lookAhead + e.key);
+    }
+    resetTabIndexToFocusedElement(nextSibling);
+  }
 };
 
 const getComboboxContentWrapperStyles = (theme, _ref) => {
@@ -8470,6 +9770,34 @@ const getComboboxOptionItemWrapperStyles = theme => {
     }
   }), process.env.NODE_ENV === "production" ? "" : ";label:getComboboxOptionItemWrapperStyles;");
 };
+const getComboboxOptionLabelStyles = _ref2 => {
+  let {
+    theme,
+    dangerouslyHideCheck,
+    textOverflowMode,
+    contentWidth,
+    hasHintColumn
+  } = _ref2;
+  return /*#__PURE__*/css({
+    marginLeft: !dangerouslyHideCheck ? theme.spacing.sm : 0,
+    fontSize: theme.typography.fontSizeBase,
+    fontStyle: 'normal',
+    fontWeight: 400,
+    cursor: 'pointer',
+    overflow: 'hidden',
+    wordBreak: 'break-word',
+    ...(textOverflowMode === 'ellipsis' && {
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }),
+    ...(contentWidth ? {
+      width: getDialogComboboxOptionLabelWidth(theme, contentWidth)
+    } : {}),
+    ...(hasHintColumn && {
+      display: 'flex'
+    })
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getComboboxOptionLabelStyles;");
+};
 const getInfoIconStyles = theme => {
   return /*#__PURE__*/css({
     paddingLeft: theme.spacing.xs,
@@ -8496,9 +9824,9 @@ const getCheckboxStyles = (theme, textOverflowMode) => {
         alignSelf: 'flex-start',
         display: 'inline-flex',
         alignItems: 'center',
-        ...(useNewCheckboxStyles && {
+        ...(useNewCheckboxStyles ? {
           paddingTop: theme.spacing.xs / 2
-        })
+        } : {})
       },
       '& > span:last-of-type': {
         paddingRight: 0,
@@ -8519,18 +9847,52 @@ const getFooterStyles = theme => {
     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
+    bottom: 0,
+    boxSizing: 'border-box',
+    '&:has(> .combobox-footer-add-button)': {
+      padding: `${theme.spacing.sm}px 0 ${theme.spacing.sm}px 0`,
+      '& > :not(.combobox-footer-add-button)': {
+        marginLeft: `${theme.spacing.lg / 2}px`,
+        marginRight: `${theme.spacing.lg / 2}px`
+      },
+      '& > .combobox-footer-add-button': {
+        justifyContent: 'flex-start !important'
+      }
+    }
   }, process.env.NODE_ENV === "production" ? "" : ";label:getFooterStyles;");
 };
+const getSelectItemWithHintColumnStyles = function () {
+  let hintColumnWidthPercent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 50;
+  return /*#__PURE__*/css({
+    flexGrow: 1,
+    display: 'inline-grid',
+    gridTemplateColumns: `${100 - hintColumnWidthPercent}% ${hintColumnWidthPercent}%`
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getSelectItemWithHintColumnStyles;");
+};
+const getHintColumnStyles = (theme, disabled, textOverflowMode) => {
+  return /*#__PURE__*/css({
+    color: theme.colors.textSecondary,
+    fontSize: theme.typography.fontSizeSm,
+    textAlign: 'right',
+    ...(disabled && {
+      color: theme.colors.actionDisabledText
+    }),
+    ...(textOverflowMode === 'ellipsis' && {
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden'
+    })
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getHintColumnStyles;");
+};
 
-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)."; }
+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$g = 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__$o
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$n
 };
 const DialogComboboxContent = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
   let {
@@ -8572,6 +9934,7 @@ const DialogComboboxContent = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
   }
   const contentRef = useRef(null);
   useImperativeHandle(forwardedRef, () => contentRef.current);
+  const realContentWidth = matchTriggerWidth ? 'var(--radix-popover-trigger-width)' : width;
   useEffect(() => {
     if (rememberLastScrollPosition) {
       if (!isOpen && contentRef.current) {
@@ -8596,10 +9959,10 @@ const DialogComboboxContent = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
     return;
   }, [isOpen, rememberLastScrollPosition, lastScrollPosition]);
   useEffect(() => {
-    if (contentWidth !== width) {
-      setContentWidth(width);
+    if (contentWidth !== realContentWidth) {
+      setContentWidth(realContentWidth);
     }
-  }, [width, contentWidth, setContentWidth]);
+  }, [realContentWidth, contentWidth, setContentWidth]);
   useEffect(() => {
     if (textOverflowMode !== contextTextOverflowMode) {
       setTextOverflowMode(textOverflowMode ? textOverflowMode : 'multiline');
@@ -8617,7 +9980,7 @@ const DialogComboboxContent = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
         maxWidth,
         minHeight,
         minWidth,
-        width: matchTriggerWidth ? 'var(--radix-popover-trigger-width)' : width
+        width: realContentWidth
       }),
       align: align,
       side: side,
@@ -8695,187 +10058,41 @@ const DialogComboboxHintRow = _ref => {
   } = useDesignSystemTheme();
   return jsx("div", {
     css: /*#__PURE__*/css({
+      minWidth: '100%',
       color: theme.colors.textSecondary,
-      fontSize: theme.typography.fontSizeSm,
-      '[data-disabled] &': {
-        color: theme.colors.actionDisabledText
-      }
-    }, process.env.NODE_ENV === "production" ? "" : ";label:DialogComboboxHintRow;"),
-    children: children
-  });
-};
-
-const DialogComboboxOptionListContext = /*#__PURE__*/createContext({
-  isInsideDialogComboboxOptionList: false,
-  lookAhead: '',
-  setLookAhead: () => {}
-});
-const DialogComboboxOptionListContextProvider = _ref => {
-  let {
-    children,
-    value
-  } = _ref;
-  return jsx(DialogComboboxOptionListContext.Provider, {
-    value: value,
-    children: children
-  });
-};
-
-const getDialogComboboxOptionLabelWidth = (theme, width) => {
-  const paddingLeft = theme.spacing.xs + theme.spacing.sm;
-  const iconWidth = theme.spacing.md;
-  const labelMarginLeft = theme.spacing.sm;
-  if (typeof width === 'string') {
-    return `calc(${width} - ${paddingLeft + iconWidth + labelMarginLeft} px)`;
-  }
-  return width - paddingLeft + iconWidth + labelMarginLeft;
-};
-function isOptionDisabled(option) {
-  return option.hasAttribute('disabled') && option.getAttribute('disabled') !== 'false';
-}
-function highlightFirstNonDisabledOption(firstOptionItem) {
-  let startAt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'start';
-  let previousSelection = arguments.length > 2 ? arguments[2] : undefined;
-  if (isOptionDisabled(firstOptionItem)) {
-    const firstHighlightableOption = findClosestOptionSibling(firstOptionItem, startAt === 'end' ? 'previous' : 'next');
-    if (firstHighlightableOption) {
-      highlightOption(firstHighlightableOption, previousSelection);
-    }
-  } else {
-    highlightOption(firstOptionItem, previousSelection);
-  }
-}
-function findClosestOptionSibling(element, direction) {
-  const nextSibling = direction === 'previous' ? element.previousElementSibling : element.nextElementSibling;
-  if ((nextSibling === null || nextSibling === void 0 ? void 0 : nextSibling.getAttribute('role')) === 'option') {
-    if (isOptionDisabled(nextSibling)) {
-      return findClosestOptionSibling(nextSibling, direction);
-    }
-    return nextSibling;
-  } else if (nextSibling) {
-    let nextOptionSibling = nextSibling;
-    while (nextOptionSibling && nextOptionSibling.getAttribute('role') !== 'option' || isOptionDisabled(nextOptionSibling)) {
-      nextOptionSibling = direction === 'previous' ? nextOptionSibling.previousElementSibling : nextOptionSibling.nextElementSibling;
-    }
-    return nextOptionSibling;
-  }
-  return null;
-}
-const highlightOption = function (currentSelection, prevSelection) {
-  var _currentSelection$scr;
-  let focus = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-  if (prevSelection) {
-    prevSelection.setAttribute('tabIndex', '-1');
-    prevSelection.setAttribute('data-highlighted', 'false');
-  }
-  if (focus) {
-    currentSelection.focus();
-  }
-  currentSelection.setAttribute('tabIndex', '0');
-  currentSelection.setAttribute('data-highlighted', 'true');
-  (_currentSelection$scr = currentSelection.scrollIntoView) === null || _currentSelection$scr === void 0 || _currentSelection$scr.call(currentSelection, {
-    block: 'center'
-  });
-};
-const findHighlightedOption = options => {
-  var _options$find;
-  return (_options$find = options.find(option => option.getAttribute('data-highlighted') === 'true')) !== null && _options$find !== void 0 ? _options$find : undefined;
-};
-const getContentOptions = element => {
-  var _element$closest;
-  const options = (_element$closest = element.closest('[data-combobox-option-list="true"]')) === null || _element$closest === void 0 ? void 0 : _element$closest.querySelectorAll('[role="option"]');
-  return options ? Array.from(options) : undefined;
-};
-const getKeyboardNavigationFunctions = (handleSelect, _ref) => {
-  let {
-    onKeyDown,
-    onMouseEnter,
-    onDefaultKeyDown
-  } = _ref;
-  return {
-    onKeyDown: e => {
-      onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
-      switch (e.key) {
-        case 'ArrowDown':
-          e.preventDefault();
-          const nextSibling = findClosestOptionSibling(e.currentTarget, 'next');
-          if (nextSibling) {
-            highlightOption(nextSibling, e.currentTarget);
-          } else {
-            var _getContentOptions;
-            const firstOption = (_getContentOptions = getContentOptions(e.currentTarget)) === null || _getContentOptions === void 0 ? void 0 : _getContentOptions[0];
-            if (firstOption) {
-              highlightFirstNonDisabledOption(firstOption, 'start', e.currentTarget);
-            }
-          }
-          break;
-        case 'ArrowUp':
-          e.preventDefault();
-          const previousSibling = findClosestOptionSibling(e.currentTarget, 'previous');
-          if (previousSibling) {
-            highlightOption(previousSibling, e.currentTarget);
-          } else {
-            var _getContentOptions2;
-            const lastOption = (_getContentOptions2 = getContentOptions(e.currentTarget)) === null || _getContentOptions2 === void 0 ? void 0 : _getContentOptions2.slice(-1)[0];
-            if (lastOption) {
-              highlightFirstNonDisabledOption(lastOption, 'end', e.currentTarget);
-            }
-          }
-          break;
-        case 'Enter':
-          e.preventDefault();
-          handleSelect(e);
-          break;
-        default:
-          onDefaultKeyDown === null || onDefaultKeyDown === void 0 || onDefaultKeyDown(e);
-          break;
-      }
-    },
-    onMouseEnter: e => {
-      onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter(e);
-      resetTabIndexToFocusedElement(e.currentTarget);
-    }
-  };
-};
-const resetTabIndexToFocusedElement = elem => {
-  var _elem$closest;
-  (_elem$closest = elem.closest('[role="list"]')) === null || _elem$closest === void 0 || _elem$closest.querySelectorAll('[role="option"]').forEach(el => {
-    el.setAttribute('tabIndex', '-1');
-  });
-  elem.setAttribute('tabIndex', '0');
-  elem.focus();
-};
-const dialogComboboxLookAheadKeyDown = (e, setLookAhead, lookAhead) => {
-  var _e$currentTarget$pare, _e$currentTarget$pare2;
-  if (e.key === 'Escape' || e.key === 'Tab' || e.key === 'Enter') {
-    return;
-  }
-  e.preventDefault();
-  const siblings = Array.from((_e$currentTarget$pare = (_e$currentTarget$pare2 = e.currentTarget.parentElement) === null || _e$currentTarget$pare2 === void 0 ? void 0 : _e$currentTarget$pare2.children) !== null && _e$currentTarget$pare !== void 0 ? _e$currentTarget$pare : []);
-  // Look for the first sibling that starts with the pressed key + recently pressed keys (lookAhead, cleared after 1.5 seconds of inactivity)
-  const nextSiblingIndex = siblings.findIndex(sibling => {
-    var _sibling$textContent$, _sibling$textContent;
-    const siblingLabel = (_sibling$textContent$ = (_sibling$textContent = sibling.textContent) === null || _sibling$textContent === void 0 ? void 0 : _sibling$textContent.toLowerCase()) !== null && _sibling$textContent$ !== void 0 ? _sibling$textContent$ : '';
-    return siblingLabel.startsWith(lookAhead + e.key);
+      fontSize: theme.typography.fontSizeSm,
+      '[data-disabled] &': {
+        color: theme.colors.actionDisabledText
+      }
+    }, process.env.NODE_ENV === "production" ? "" : ";label:DialogComboboxHintRow;"),
+    children: children
   });
-  if (nextSiblingIndex !== -1) {
-    const nextSibling = siblings[nextSiblingIndex];
-    nextSibling.focus();
-    if (setLookAhead) {
-      setLookAhead(lookAhead + e.key);
-    }
-    resetTabIndexToFocusedElement(nextSibling);
-  }
 };
 
-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)."; }
+const DialogComboboxOptionListContext = /*#__PURE__*/createContext({
+  isInsideDialogComboboxOptionList: false,
+  lookAhead: '',
+  setLookAhead: () => {}
+});
+const DialogComboboxOptionListContextProvider = _ref => {
+  let {
+    children,
+    value
+  } = _ref;
+  return jsx(DialogComboboxOptionListContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+
+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)."; }
 var _ref2$f = 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__$n
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$m
 };
 const DialogComboboxOptionList = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
   let {
@@ -8966,47 +10183,14 @@ const useDialogComboboxOptionListContext = () => {
   return useContext(DialogComboboxOptionListContext);
 };
 
-const InfoTooltip = _ref => {
-  let {
-    title,
-    tooltipProps,
-    iconTitle,
-    isKeyboardFocusable = true,
-    ...iconProps
-  } = _ref;
-  const {
-    theme
-  } = useDesignSystemTheme();
-  return jsx(Tooltip, {
-    title: title,
-    ...tooltipProps,
-    children: jsx("span", {
-      style: {
-        display: 'inline-flex'
-      },
-      tabIndex: isKeyboardFocusable ? 0 : -1,
-      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
-      })
-    })
-  });
-};
-
-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)."; }
+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$e = process.env.NODE_ENV === "production" ? {
   name: "zjik7",
   styles: "display:flex"
 } : {
   name: "tiu4as-content",
   styles: "display:flex;label:content;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$m
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$l
 };
 const DuboisDialogComboboxOptionListCheckboxItem = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -9051,7 +10235,7 @@ const DuboisDialogComboboxOptionListCheckboxItem = /*#__PURE__*/forwardRef((_ref
           placement: "right",
           children: jsx("span", {
             css: getInfoIconStyles(theme),
-            children: jsx(InfoIcon, {
+            children: jsx(InfoIcon$1, {
               "aria-label": "Disabled status information",
               "aria-hidden": "false"
             })
@@ -9096,7 +10280,9 @@ const DuboisDialogComboboxOptionListCheckboxItem = /*#__PURE__*/forwardRef((_ref
         e.stopPropagation();
         handleSelect(e);
       },
-      children: content
+      children: jsx("div", {
+        children: content
+      })
     })
   });
 });
@@ -9105,7 +10291,7 @@ DuboisDialogComboboxOptionListCheckboxItem.defaultProps = {
 };
 const DialogComboboxOptionListCheckboxItem = DuboisDialogComboboxOptionListCheckboxItem;
 
-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)."; }
+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 extractTextContent = node => {
   if (typeof node === 'string' || typeof node === 'number') {
     return node.toString();
@@ -9138,7 +10324,7 @@ var _ref2$d = process.env.NODE_ENV === "production" ? {
 } : {
   name: "csdki6-DialogComboboxOptionListSearch",
   styles: "width:100%;label:DialogComboboxOptionListSearch;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$l
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$k
 };
 const DialogComboboxOptionListSearch = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
   var _filteredChildren, _filteredChildren2;
@@ -9148,6 +10334,8 @@ const DialogComboboxOptionListSearch = /*#__PURE__*/forwardRef((_ref, forwardedR
     virtualized,
     children,
     hasWrapper,
+    controlledValue,
+    setControlledValue,
     ...restProps
   } = _ref;
   const {
@@ -9164,10 +10352,11 @@ const DialogComboboxOptionListSearch = /*#__PURE__*/forwardRef((_ref, forwardedR
     if (!virtualized) {
       setSearchValue(event.target.value.toLowerCase());
     }
+    setControlledValue === null || setControlledValue === void 0 || setControlledValue(event.target.value);
     onSearch === null || onSearch === void 0 || onSearch(event.target.value);
   };
   let filteredChildren = children;
-  if (searchValue && !virtualized) {
+  if (searchValue && !virtualized && controlledValue === undefined) {
     filteredChildren = filterChildren(hasWrapper ? children.props.children : children, searchValue);
     if (hasWrapper) {
       filteredChildren = /*#__PURE__*/React__default.cloneElement(children, {}, filteredChildren);
@@ -9256,7 +10445,7 @@ const DialogComboboxOptionListSearch = /*#__PURE__*/forwardRef((_ref, forwardedR
           handleOnKeyDown(event);
           (_restProps$onKeyDown = restProps.onKeyDown) === null || _restProps$onKeyDown === void 0 || _restProps$onKeyDown.call(restProps, event);
         },
-        value: searchValue,
+        value: controlledValue !== null && controlledValue !== void 0 ? controlledValue : searchValue,
         ...restProps
       })
     }), virtualized ? children : (hasWrapper && (_filteredChildren = filteredChildren) !== null && _filteredChildren !== void 0 && (_filteredChildren = _filteredChildren.props.children) !== null && _filteredChildren !== void 0 && _filteredChildren.length || !hasWrapper && (_filteredChildren2 = filteredChildren) !== null && _filteredChildren2 !== void 0 && _filteredChildren2.length) && childrenIsNotEmpty ? jsx("div", {
@@ -9286,14 +10475,14 @@ const useSelectContext = () => {
   return useContext(SelectContext);
 };
 
-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)."; }
+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$c = process.env.NODE_ENV === "production" ? {
   name: "zjik7",
   styles: "display:flex"
 } : {
   name: "tiu4as-content",
   styles: "display:flex;label:content;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$k
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$j
 };
 var _ref3$6 = process.env.NODE_ENV === "production" ? {
   name: "kjj0ot",
@@ -9301,7 +10490,7 @@ var _ref3$6 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "15osdio-DuboisDialogComboboxOptionListSelectItem",
   styles: "padding-top:2px;label:DuboisDialogComboboxOptionListSelectItem;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$k
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$j
 };
 const DuboisDialogComboboxOptionListSelectItem = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -9309,8 +10498,12 @@ const DuboisDialogComboboxOptionListSelectItem = /*#__PURE__*/forwardRef((_ref,
     checked,
     disabledReason,
     onChange,
+    hintColumn,
+    hintColumnWidthPercent = 50,
     children,
     _TYPE,
+    icon,
+    dangerouslyHideCheck,
     ...props
   } = _ref;
   const {
@@ -9388,7 +10581,7 @@ const DuboisDialogComboboxOptionListSelectItem = /*#__PURE__*/forwardRef((_ref,
         placement: "right",
         children: jsx("span", {
           css: getInfoIconStyles(theme),
-          children: jsx(InfoIcon, {
+          children: jsx(InfoIcon$1, {
             "aria-label": "Disabled status information",
             "aria-hidden": "false"
           })
@@ -9420,31 +10613,36 @@ const DuboisDialogComboboxOptionListSelectItem = /*#__PURE__*/forwardRef((_ref,
     }),
     role: "option",
     "aria-selected": checked,
-    children: [checked ? jsx(CheckIcon, {
+    children: [!dangerouslyHideCheck && (checked ? jsx(CheckIcon, {
       css: _ref3$6
     }) : jsx("div", {
       style: {
         width: 16,
         flexShrink: 0
       }
-    }), jsx("label", {
-      style: {
-        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'
-        }),
-        ...(contentWidth ? {
-          width: getDialogComboboxOptionLabelWidth(theme, contentWidth)
-        } : {})
-      },
-      children: content
+    })), jsxs("label", {
+      css: getComboboxOptionLabelStyles({
+        theme,
+        dangerouslyHideCheck,
+        textOverflowMode,
+        contentWidth,
+        hasHintColumn: Boolean(hintColumn)
+      }),
+      children: [icon && jsx("span", {
+        style: {
+          position: 'relative',
+          top: 1,
+          marginRight: theme.spacing.sm,
+          color: theme.colors.textSecondary
+        },
+        children: icon
+      }), hintColumn ? jsxs("span", {
+        css: getSelectItemWithHintColumnStyles(hintColumnWidthPercent),
+        children: [content, jsx("span", {
+          css: getHintColumnStyles(theme, Boolean(props.disabled), textOverflowMode),
+          children: hintColumn
+        })]
+      }) : content]
     })]
   });
 });
@@ -9453,14 +10651,14 @@ DuboisDialogComboboxOptionListSelectItem.defaultProps = {
 };
 const DialogComboboxOptionListSelectItem = DuboisDialogComboboxOptionListSelectItem;
 
-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)."; }
+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$b = 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__$j
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$i
 };
 const DialogComboboxOptionControlledList = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
   let {
@@ -9914,6 +11112,7 @@ const DialogComboboxTrigger = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
       title: customSelectContent !== null && customSelectContent !== void 0 ? customSelectContent : displayedValues,
       children: triggerContent
     }) : triggerContent, removable && jsx(Button, {
+      componentId: "codegen_design-system_src_design-system_dialogcombobox_dialogcomboboxtrigger.tsx_355",
       "aria-label": `Remove ${label}`,
       onClick: handleRemove,
       dangerouslySetForceIconStyles: true,
@@ -9924,6 +11123,18 @@ const DialogComboboxTrigger = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
     })]
   });
 });
+/**
+ * A custom button trigger that can be wrapped around any button.
+ */
+const DialogComboboxCustomButtonTriggerWrapper = _ref2 => {
+  let {
+    children
+  } = _ref2;
+  return jsx(Popover$1.Trigger, {
+    asChild: true,
+    children: children
+  });
+};
 
 const Spacer = _ref => {
   let {
@@ -9951,7 +11162,7 @@ const Spacer = _ref => {
   });
 };
 
-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 _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 DEFAULT_WIDTH$1 = 320;
 const MIN_WIDTH = 320;
 const MAX_WIDTH = '90vw';
@@ -9964,7 +11175,7 @@ var _ref2$a = process.env.NODE_ENV === "production" ? {
 } : {
   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__$i
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$h
 };
 const Content$3 = _ref => {
   let {
@@ -10100,6 +11311,7 @@ const Content$3 = _ref => {
               marginLeft: theme.spacing.xs
             }, process.env.NODE_ENV === "production" ? "" : ";label:Content;"),
             children: jsx(Button, {
+              componentId: "codegen_design-system_src_design-system_drawer_drawer.tsx_219",
               "aria-label": "Close",
               icon: jsx(CloseIcon, {})
             })
@@ -10181,7 +11393,7 @@ const Dropdown = _ref => {
   });
 };
 
-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__$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 {
   Title: Title$1,
   Paragraph
@@ -10229,7 +11441,7 @@ var _ref$5 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "11tid6c-Empty",
   styles: "display:flex;justify-content:center;label:Empty;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$h
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$g
 };
 const Empty = props => {
   const {
@@ -10379,7 +11591,7 @@ const getMessageStyles = (clsPrefix, theme) => {
 const VALIDATION_STATE_ICONS = {
   error: DangerIcon,
   success: CheckCircleIcon$1,
-  warning: WarningIcon$1
+  warning: WarningIcon
 };
 function FormMessage(_ref) {
   let {
@@ -10435,7 +11647,7 @@ const Hint = props => {
   });
 };
 
-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)."; }
+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 getLabelStyles$1 = (classNamePrefix, theme, _ref) => {
   let {
     inline
@@ -10459,15 +11671,16 @@ var _ref2$9 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "53ggpt-Label",
   styles: "display:flex;align-items:center;label:Label;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$g
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$f
 };
 const Label = props => {
   const {
     children,
     className,
     inline,
+    required,
     ...restProps
-  } = props;
+  } = props; // Destructure the new prop
   const {
     classNamePrefix,
     theme
@@ -10478,9 +11691,12 @@ const Label = props => {
     }),
     className: classnames(`${classNamePrefix}-label`, className),
     ...restProps,
-    children: jsx("span", {
+    children: jsxs("span", {
       css: _ref2$9,
-      children: children
+      children: [children, required && jsx("span", {
+        "aria-hidden": "true",
+        children: "*"
+      })]
     })
   });
 };
@@ -10601,7 +11817,7 @@ const getCommonRadioGroupStyles = _ref2 => {
     '& > label': {
       ...(useNewStyles && {
         [`&.${classNamePrefix}-radio-wrapper-disabled > span`]: {
-          color: theme.colors.textPrimary
+          color: theme.colors.actionDisabledText
         }
       })
     },
@@ -10895,7 +12111,8 @@ function getSelectEmotionStyles(_ref) {
     },
     // Note: This supports search, which we don't support. The styles here support legacy usages.
     [classSearchClear]: {
-      right: 24
+      right: 24,
+      backgroundColor: 'transparent'
     },
     [`&${classFocused}`]: {
       [classSelector]: {
@@ -11075,7 +12292,6 @@ function getSelectEmotionStyles(_ref) {
 }
 function getDropdownStyles(clsPrefix, theme) {
   let useNewDropdownStyle = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  let maxHeight = arguments.length > 3 ? arguments[3] : undefined;
   const classItem = `.${clsPrefix}-item-option`;
   const classItemActive = `.${clsPrefix}-item-option-active`;
   const classItemSelected = `.${clsPrefix}-item-option-selected`;
@@ -11135,9 +12351,6 @@ function getDropdownStyles(clsPrefix, theme) {
         left: -CONTENT_LEFT_PADDING / 2
       })
     },
-    '.rc-virtual-list-holder': {
-      maxHeight
-    },
     ...getAnimationCss(theme.options.enableAnimation),
     ...getDarkModePortalStyles(theme)
   };
@@ -11252,7 +12465,8 @@ function DuboisSelect(_ref2, ref) {
             }),
             children: "No results found"
           }),
-          dropdownClassName: css$1([getDropdownStyles(clsPrefix, theme, useNewSelectStyles, MAX_HEIGHT), dropdownClassName]),
+          dropdownClassName: css$1([getDropdownStyles(clsPrefix, theme, useNewSelectStyles), dropdownClassName]),
+          listHeight: MAX_HEIGHT,
           maxTagPlaceholder: items => `+ ${items.length} more`,
           mode: mode,
           options: options,
@@ -11344,67 +12558,256 @@ const SelectV2 = props => {
       isSelect: true,
       placeholder
     },
-    children: jsx(DialogCombobox, {
-      value: value ? [value] : [],
-      ...restProps,
-      children: children
-    })
-  });
+    children: jsx(DialogCombobox, {
+      value: value ? [value] : [],
+      ...restProps,
+      children: children
+    })
+  });
+};
+
+const SelectV2Content = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    minWidth = 150,
+    ...restProps
+  } = _ref;
+  return jsx(DialogComboboxContent, {
+    minWidth: minWidth,
+    ...restProps,
+    ref: ref,
+    children: jsx(DialogComboboxOptionList, {
+      children: children
+    })
+  });
+});
+
+const SelectV2Option = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    value
+  } = useDialogComboboxContext();
+  return jsx(DialogComboboxOptionListSelectItem, {
+    checked: value && value[0] === props.value,
+    ...props,
+    ref: ref
+  });
+});
+
+const SelectV2OptionGroup = props => {
+  const {
+    name,
+    children,
+    ...restProps
+  } = props;
+  return jsxs(Fragment, {
+    children: [jsx(DialogComboboxSectionHeader, {
+      ...restProps,
+      children: name
+    }), children]
+  });
+};
+
+const SelectV2Trigger = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    ...restProps
+  } = props;
+  return jsx(DialogComboboxTrigger, {
+    allowClear: false,
+    ...restProps,
+    ref: ref,
+    children: children
+  });
+});
+
+const getSwitchWithLabelStyles = _ref => {
+  let {
+    clsPrefix,
+    theme
+  } = _ref;
+  // Default value
+  const SWITCH_WIDTH = 28;
+  const styles = {
+    display: 'flex',
+    alignItems: 'center',
+    // Switch is Off
+    [`&.${clsPrefix}-switch`]: {
+      backgroundColor: theme.colors.backgroundPrimary,
+      border: `1px solid ${theme.colors.actionDefaultBorderDefault}`,
+      [`.${clsPrefix}-switch-handle:before`]: {
+        boxShadow: `0px 0px 0px 1px ${theme.colors.actionDefaultBorderDefault}`,
+        transition: 'none'
+      },
+      [`&:hover:not(.${clsPrefix}-switch-disabled)`]: {
+        backgroundColor: theme.colors.actionDefaultBackgroundHover,
+        border: `1px solid ${theme.colors.actionPrimaryBackgroundHover}`,
+        [`.${clsPrefix}-switch-handle:before`]: {
+          boxShadow: `0px 0px 0px 1px ${theme.colors.actionPrimaryBackgroundHover}`
+        }
+      },
+      [`&:active:not(.${clsPrefix}-switch-disabled)`]: {
+        backgroundColor: theme.colors.actionDefaultBackgroundPress,
+        border: `1px solid ${theme.colors.actionPrimaryBackgroundPress}`,
+        [`.${clsPrefix}-switch-handle:before`]: {
+          boxShadow: `0px 0px 0px 1px ${theme.colors.actionPrimaryBackgroundHover}`
+        }
+      },
+      [`&.${clsPrefix}-switch-disabled`]: {
+        backgroundColor: theme.colors.actionDisabledBackground,
+        border: `1px solid ${theme.colors.actionDisabledBorder}`,
+        [`.${clsPrefix}-switch-handle:before`]: {
+          boxShadow: `0px 0px 0px 1px ${theme.colors.actionDisabledBorder}`
+        }
+      },
+      [`&:focus-visible`]: {
+        border: `1px solid ${theme.colors.actionPrimaryBackgroundDefault}`,
+        boxShadow: 'none',
+        outlineStyle: 'solid',
+        outlineWidth: '1px',
+        outlineColor: theme.colors.actionDefaultBorderFocus,
+        [`.${clsPrefix}-switch-handle:before`]: {
+          boxShadow: `0px 0px 0px 1px ${theme.colors.actionPrimaryBackgroundDefault}`
+        }
+      },
+      [`&:focus`]: {
+        boxShadow: 'none'
+      }
+    },
+    // Switch is On
+    [`&.${clsPrefix}-switch-checked`]: {
+      backgroundColor: theme.colors.actionPrimaryBackgroundDefault,
+      border: `1px solid ${theme.colors.actionPrimaryBackgroundDefault}`,
+      [`&:hover:not(.${clsPrefix}-switch-disabled)`]: {
+        backgroundColor: theme.colors.actionPrimaryBackgroundHover,
+        border: `1px solid ${theme.colors.actionPrimaryBackgroundDefault}`
+      },
+      [`&:active:not(.${clsPrefix}-switch-disabled)`]: {
+        backgroundColor: theme.colors.actionPrimaryBackgroundPress
+      },
+      [`.${clsPrefix}-switch-handle:before`]: {
+        boxShadow: `0px 0px 0px 1px ${theme.colors.actionPrimaryBackgroundDefault}`
+      },
+      [`&.${clsPrefix}-switch-disabled`]: {
+        backgroundColor: theme.colors.actionDisabledText,
+        border: `1px solid ${theme.colors.actionDisabledText}`,
+        [`.${clsPrefix}-switch-handle:before`]: {
+          boxShadow: `0px 0px 0px 1px ${theme.colors.actionDisabledText}`
+        }
+      },
+      [`&:focus-visible`]: {
+        outlineOffset: '1px'
+      }
+    },
+    [`.${clsPrefix}-switch-handle:before`]: {
+      backgroundColor: theme.colors.backgroundPrimary
+    },
+    [`&& + .${clsPrefix}-hint, && + .${clsPrefix}-form-message`]: {
+      paddingLeft: theme.spacing.sm + SWITCH_WIDTH
+    },
+    [`&& + .${clsPrefix}-form-message`]: {
+      marginTop: 0
+    },
+    [`.${clsPrefix}-click-animating-node`]: {
+      animation: 'none'
+    },
+    opacity: 1
+  };
+  const importantStyles = importantify(styles);
+  return /*#__PURE__*/css(importantStyles, process.env.NODE_ENV === "production" ? "" : ";label:getSwitchWithLabelStyles;");
 };
-
-const SelectV2Content = /*#__PURE__*/forwardRef((_ref, ref) => {
+const Switch = _ref2 => {
+  var _props$id;
   let {
-    children,
-    minWidth = 150,
-    ...restProps
-  } = _ref;
-  return jsx(DialogComboboxContent, {
-    minWidth: minWidth,
-    ...restProps,
-    ref: ref,
-    children: jsx(DialogComboboxOptionList, {
-      children: children
-    })
-  });
-});
-
-const SelectV2Option = /*#__PURE__*/forwardRef((props, ref) => {
+    dangerouslySetAntdProps,
+    label,
+    labelProps,
+    activeLabel,
+    inactiveLabel,
+    disabledLabel,
+    ...props
+  } = _ref2;
   const {
-    value
-  } = useDialogComboboxContext();
-  return jsx(DialogComboboxOptionListSelectItem, {
-    checked: value && value[0] === props.value,
+    theme,
+    classNamePrefix
+  } = useDesignSystemTheme();
+  const duboisId = useUniqueId('dubois-switch');
+  const uniqueId = (_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : duboisId;
+  const [isChecked, setIsChecked] = useState(props.checked || props.defaultChecked);
+  const handleToggle = (newState, event) => {
+    if (props.onChange) {
+      props.onChange(newState, event);
+    } else {
+      setIsChecked(newState);
+    }
+  };
+  useEffect(() => {
+    setIsChecked(props.checked);
+  }, [props.checked]);
+  const hasNewLabels = activeLabel && inactiveLabel && disabledLabel;
+  const stateMessage = isChecked ? activeLabel : inactiveLabel;
+
+  // AntDSwitch's interface does not include `id` even though it passes it through and works as expected
+  // We are using this to bypass that check
+  const idPropObj = {
+    id: uniqueId
+  };
+  const switchComponent = jsx(Switch$1, {
     ...props,
-    ref: ref
+    ...dangerouslySetAntdProps,
+    onChange: handleToggle,
+    ...idPropObj,
+    css: /*#__PURE__*/css({
+      ... /*#__PURE__*/css(getAnimationCss(theme.options.enableAnimation), process.env.NODE_ENV === "production" ? "" : ";label:switchComponent;"),
+      ...getSwitchWithLabelStyles({
+        clsPrefix: classNamePrefix,
+        theme
+      })
+    }, process.env.NODE_ENV === "production" ? "" : ";label:switchComponent;")
   });
-});
-
-const SelectV2OptionGroup = props => {
-  const {
-    name,
-    children,
-    ...restProps
-  } = props;
-  return jsxs(Fragment, {
-    children: [jsx(DialogComboboxSectionHeader, {
-      ...restProps,
-      children: name
-    }), children]
+  const labelComponent = jsx(Label, {
+    inline: true,
+    ...labelProps,
+    htmlFor: uniqueId,
+    style: {
+      ...(hasNewLabels && {
+        marginRight: theme.spacing.sm
+      })
+    },
+    children: label
   });
-};
-
-const SelectV2Trigger = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    children,
-    ...restProps
-  } = props;
-  return jsx(DialogComboboxTrigger, {
-    allowClear: false,
-    ...restProps,
-    ref: ref,
-    children: children
+  return label ? jsx(DesignSystemAntDConfigProvider, {
+    children: jsx("div", {
+      css: getSwitchWithLabelStyles({
+        clsPrefix: classNamePrefix,
+        theme
+      }),
+      children: hasNewLabels ? jsxs(Fragment, {
+        children: [labelComponent, jsx("span", {
+          style: {
+            marginLeft: 'auto',
+            marginRight: theme.spacing.sm
+          },
+          children: `${stateMessage}${props.disabled ? ` (${disabledLabel})` : ''}`
+        }), switchComponent]
+      }) : jsxs(Fragment, {
+        children: [switchComponent, labelComponent]
+      })
+    })
+  }) : jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(Switch$1, {
+      ...props,
+      ...dangerouslySetAntdProps,
+      ...idPropObj,
+      css: /*#__PURE__*/css({
+        ... /*#__PURE__*/css(getAnimationCss(theme.options.enableAnimation), process.env.NODE_ENV === "production" ? "" : ";label:Switch;"),
+        ...getSwitchWithLabelStyles({
+          clsPrefix: classNamePrefix,
+          theme
+        })
+      }, process.env.NODE_ENV === "production" ? "" : ";label:Switch;")
+    })
   });
-});
+};
 
 const typeaheadComboboxContextDefaults = {
   isInsideTypeaheadCombobox: false,
@@ -11427,14 +12830,14 @@ const TypeaheadComboboxContextProvider = _ref => {
   });
 };
 
-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)."; }
+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)."; }
 var _ref2$8 = process.env.NODE_ENV === "production" ? {
   name: "18nns55",
   styles: "display:inline-block;width:100%"
 } : {
   name: "19m0398-TypeaheadComboboxRoot",
   styles: "display:inline-block;width:100%;label:TypeaheadComboboxRoot;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$f
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$e
 };
 const TypeaheadComboboxRoot = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -11494,16 +12897,17 @@ function useComboboxState(_ref) {
   }
   const comboboxState = useCombobox({
     onIsOpenChange: onIsOpenChange,
-    onInputValueChange: props.multiSelect ? _ref2 => {
+    onInputValueChange: _ref2 => {
       let {
         inputValue
       } = _ref2;
-      return inputValue !== undefined && props.setInputValue(inputValue);
-    } : _ref3 => {
-      let {
-        inputValue
-      } = _ref3;
-      props.setItems(getFilteredItems(inputValue));
+      if (inputValue !== undefined) {
+        var _props$setInputValue;
+        (_props$setInputValue = props.setInputValue) === null || _props$setInputValue === void 0 || _props$setInputValue.call(props, inputValue);
+      }
+      if (!props.multiSelect) {
+        props.setItems(getFilteredItems(inputValue));
+      }
     },
     items: items,
     itemToString(item) {
@@ -11551,42 +12955,46 @@ function useComboboxState(_ref) {
           return changes;
       }
     },
-    onStateChange: props.multiSelect ? _ref4 => {
-      let {
+    onStateChange: args => {
+      var _props$onStateChange;
+      const {
         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('');
-            formOnBlur === null || formOnBlur === void 0 || formOnBlur([...props.selectedItems, newSelectedItem]);
-          }
-          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));
+      } = args;
+      (_props$onStateChange = props.onStateChange) === null || _props$onStateChange === void 0 || _props$onStateChange.call(props, args);
+      if (props.multiSelect) {
+        switch (type) {
+          case useCombobox.stateChangeTypes.InputKeyDownEnter:
+          case useCombobox.stateChangeTypes.ItemClick:
+          case useCombobox.stateChangeTypes.InputBlur:
+            if (newSelectedItem) {
+              props.setSelectedItems([...props.selectedItems, newSelectedItem]);
+              props.setInputValue('');
+              formOnBlur === null || formOnBlur === void 0 || formOnBlur([...props.selectedItems, newSelectedItem]);
+            }
+            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) {
+    onStateChange(_ref3) {
       let {
         selectedItems: newSelectedItems,
         type
-      } = _ref5;
+      } = _ref3;
       switch (type) {
         case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace:
         case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete:
@@ -11603,14 +13011,14 @@ const useTypeaheadComboboxContext = () => {
   return useContext(TypeaheadComboboxContext);
 };
 
-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__$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)."; }
 var _ref$4 = 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__$e
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$d
 };
 const getTypeaheadComboboxMenuStyles = () => {
   return _ref$4;
@@ -11707,7 +13115,7 @@ const TypeaheadComboboxMenu = /*#__PURE__*/forwardRef((_ref2, ref) => {
   }), getPopupContainer ? getPopupContainer() : document.body);
 });
 
-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__$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)."; }
 const getMenuItemStyles = (theme, isHighlighted, disabled) => {
   return /*#__PURE__*/css({
     ...(disabled && {
@@ -11740,7 +13148,7 @@ var _ref2$7 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "1uez6s6-TypeaheadComboboxMenuItem",
   styles: "padding-top:2px;label:TypeaheadComboboxMenuItem;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$d
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$c
 };
 var _ref3$5 = process.env.NODE_ENV === "production" ? {
   name: "zjik7",
@@ -11748,7 +13156,7 @@ var _ref3$5 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "1p9uv37-TypeaheadComboboxMenuItem",
   styles: "display:flex;label:TypeaheadComboboxMenuItem;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$d
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$c
 };
 const TypeaheadComboboxMenuItem = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -11829,14 +13237,14 @@ TypeaheadComboboxMenuItem.defaultProps = {
   _TYPE: 'TypeaheadComboboxMenuItem'
 };
 
-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__$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)."; }
 var _ref2$6 = process.env.NODE_ENV === "production" ? {
   name: "zjik7",
   styles: "display:flex"
 } : {
   name: "1pneh3l-TypeaheadComboboxCheckboxItem",
   styles: "display:flex;label:TypeaheadComboboxCheckboxItem;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$c
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$b
 };
 const TypeaheadComboboxCheckboxItem = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -11963,14 +13371,14 @@ const TypeaheadComboboxToggleButton = /*#__PURE__*/React__default.forwardRef((_r
   });
 });
 
-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 _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)."; }
 var _ref2$5 = 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__$b
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$a
 };
 const TypeaheadComboboxControls = _ref => {
   let {
@@ -11999,14 +13407,14 @@ const TypeaheadComboboxControls = _ref => {
   });
 };
 
-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__$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)."; }
 var _ref$3 = process.env.NODE_ENV === "production" ? {
   name: "5ob2ly",
   styles: "display:flex;position:relative"
 } : {
   name: "9x5b62-getContainerStyles",
   styles: "display:flex;position:relative;label:getContainerStyles;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$a
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$9
 };
 const getContainerStyles$1 = () => {
   return _ref$3;
@@ -12100,7 +13508,7 @@ const TypeaheadComboboxInput = /*#__PURE__*/forwardRef((_ref2, ref) => {
   });
 });
 
-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__$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 getSelectedItemStyles = theme => {
   return /*#__PURE__*/css({
     backgroundColor: theme.colors.tagDefault,
@@ -12144,7 +13552,7 @@ var _ref2$4 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "d61dng-TypeaheadComboboxSelectedItem",
   styles: "margin-right:2px;label:TypeaheadComboboxSelectedItem;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$9
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$8
 };
 const TypeaheadComboboxSelectedItem = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -12199,7 +13607,7 @@ const CountBadge = _ref => {
   });
 };
 
-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__$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 getContainerStyles = (theme, validationState, width, maxHeight) => {
   const validationColor = getValidationStateColor(theme, validationState);
   return /*#__PURE__*/css({
@@ -12260,7 +13668,7 @@ var _ref2$3 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "azzs2i-getContentWrapperStyles",
   styles: "display:flex;flex:auto;flex-wrap:wrap;max-width:100%;position:relative;label:getContentWrapperStyles;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$8
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$7
 };
 const getContentWrapperStyles = () => {
   return _ref2$3;
@@ -12271,7 +13679,7 @@ var _ref$2 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "10x8s5t-getInputWrapperStyles",
   styles: "display:inline-flex;position:relative;max-width:100%;align-self:auto;flex:none;label:getInputWrapperStyles;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$8
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$7
 };
 const getInputWrapperStyles = () => {
   return _ref$2;
@@ -12302,7 +13710,7 @@ var _ref4$2 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "1noplic-content",
   styles: "visibility:hidden;white-space:pre;position:absolute;label:content;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$8
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$7
 };
 const TypeaheadComboboxMultiSelectInput = /*#__PURE__*/forwardRef((_ref3, ref) => {
   var _measureRef$current, _itemsRef$current, _containerRef$current, _innerRef$current2;
@@ -12494,7 +13902,54 @@ const DuboisTypeaheadComboboxFooter = _ref => {
 DuboisTypeaheadComboboxFooter.defaultProps = {
   _TYPE: 'TypeaheadComboboxFooter'
 };
-const TypeaheadComboboxFooter = DuboisTypeaheadComboboxFooter;
+const TypeaheadComboboxFooter = DuboisTypeaheadComboboxFooter;
+
+const TypeaheadComboboxAddButton = _ref => {
+  let {
+    children,
+    ...restProps
+  } = _ref;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const {
+    isInsideTypeaheadCombobox
+  } = useTypeaheadComboboxContext();
+  if (!isInsideTypeaheadCombobox) {
+    throw new Error('`TypeaheadComboboxAddButton` must be used within `TypeaheadCombobox`');
+  }
+  return jsx(Button, {
+    ...restProps,
+    type: "tertiary",
+    onClick: event => {
+      var _restProps$onClick;
+      event.stopPropagation();
+      (_restProps$onClick = restProps.onClick) === null || _restProps$onClick === void 0 || _restProps$onClick.call(restProps, event);
+    },
+    onMouseUp: event => {
+      var _restProps$onMouseUp;
+      event.stopPropagation();
+      (_restProps$onMouseUp = restProps.onMouseUp) === null || _restProps$onMouseUp === void 0 || _restProps$onMouseUp.call(restProps, event);
+    },
+    className: "combobox-footer-add-button",
+    css: /*#__PURE__*/css({
+      ...getComboboxOptionItemWrapperStyles(theme),
+      ... /*#__PURE__*/css(importantify({
+        width: '100%',
+        padding: 0,
+        display: 'flex',
+        alignItems: 'center',
+        borderRadius: 0,
+        '&:focus': {
+          background: theme.colors.actionTertiaryBackgroundHover,
+          outline: 'none'
+        }
+      }), process.env.NODE_ENV === "production" ? "" : ";label:TypeaheadComboboxAddButton;")
+    }, process.env.NODE_ENV === "production" ? "" : ";label:TypeaheadComboboxAddButton;"),
+    icon: jsx(PlusIcon$1, {}),
+    children: children
+  });
+};
 
 function RHFControlledInput(_ref) {
   let {
@@ -12612,13 +14067,17 @@ function RHFControlledSelectV2(_ref5) {
 
     // Find the appropriate label for the selected value
     if (!(options !== null && options !== void 0 && options.length) && children) {
-      var _props;
       const renderedChildren = children({
         onChange: handleOnChange
       });
-      const child = Children.toArray(renderedChildren.props.children).find(child => /*#__PURE__*/React__default.isValidElement(child) && child.props.value === field.value);
-      if (child && ((_props = child.props) === null || _props === void 0 ? void 0 : _props.children) !== field.value) {
-        setSelectedValueLabel(child.props.children);
+      const child = (Array.isArray(renderedChildren) ? renderedChildren : Children.toArray(renderedChildren.props.children)).find(child => /*#__PURE__*/React__default.isValidElement(child) && child.props.value === field.value);
+      if (child) {
+        var _props;
+        if (((_props = child.props) === null || _props === void 0 ? void 0 : _props.children) !== field.value) {
+          setSelectedValueLabel(child.props.children);
+        } else {
+          setSelectedValueLabel(field.value);
+        }
       }
     } else if (options !== null && options !== void 0 && options.length) {
       const option = options.find(option => option.value === field.value);
@@ -12638,7 +14097,6 @@ function RHFControlledSelectV2(_ref5) {
     }), jsx(SelectV2Content, {
       ...contentProps,
       side: "bottom",
-      width: width,
       children: options && options.length > 0 ? options.map(option => createElement(SelectV2Option, {
         ...optionProps,
         key: option.value,
@@ -12946,6 +14404,26 @@ function RHFControlledRadioGroup(_ref11) {
     ...field
   });
 }
+function RHFControlledSwitch(_ref12) {
+  let {
+    name,
+    control,
+    rules,
+    ...restProps
+  } = _ref12;
+  const {
+    field
+  } = useController({
+    name: name,
+    control: control,
+    rules: rules
+  });
+  return jsx(Switch, {
+    ...restProps,
+    ...field,
+    checked: field.value
+  });
+}
 const RHFControlledComponents = {
   Input: RHFControlledInput,
   Password: RHFControlledPasswordInput,
@@ -12957,7 +14435,8 @@ const RHFControlledComponents = {
   CheckboxGroup: RHFControlledCheckboxGroup,
   RadioGroup: RHFControlledRadioGroup,
   TypeaheadCombobox: RHFControlledTypeaheadCombobox,
-  MultiSelectTypeaheadCombobox: RHFControlledMultiSelectTypeaheadCombobox
+  MultiSelectTypeaheadCombobox: RHFControlledMultiSelectTypeaheadCombobox,
+  Switch: RHFControlledSwitch
 };
 
 const getHorizontalInputStyles = (theme, labelColWidth, inputColWidth) => {
@@ -13038,7 +14517,7 @@ const Space = _ref => {
   });
 };
 
-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__$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)."; }
 const getHeaderStyles = (clsPrefix, theme) => {
   const breadcrumbClass = `.${clsPrefix}-breadcrumb`;
   const styles = {
@@ -13054,7 +14533,7 @@ var _ref$1 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "n13uil-titleAddOnsWrapper",
   styles: "display:inline-flex;vertical-align:middle;align-items:center;label:titleAddOnsWrapper;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$7
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
 };
 var _ref2$2 = process.env.NODE_ENV === "production" ? {
   name: "1q4vxyr",
@@ -13062,7 +14541,7 @@ var _ref2$2 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "ozrfom-buttonContainer",
   styles: "margin-left:8px;label:buttonContainer;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$7
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
 };
 var _ref3$4 = process.env.NODE_ENV === "production" ? {
   name: "s079uh",
@@ -13070,7 +14549,7 @@ var _ref3$4 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "1ky5whb-titleIfOtherElementsPresent",
   styles: "margin-top:2px;label:titleIfOtherElementsPresent;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$7
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
 };
 var _ref4$1 = process.env.NODE_ENV === "production" ? {
   name: "fuxm9z",
@@ -13078,7 +14557,7 @@ var _ref4$1 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "h5m2l9-title",
   styles: "margin-top:0;margin-bottom:0 !important;align-self:stretch;label:title;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$7
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
 };
 const Header$1 = _ref5 => {
   let {
@@ -13094,6 +14573,7 @@ const Header$1 = _ref5 => {
     classNamePrefix: clsPrefix,
     theme
   } = useDesignSystemTheme();
+  const useReflowWrapStyles = safex('databricks.fe.wexp.enableReflowWrapStyles', false);
   const buttonsArray = Array.isArray(buttons) ? buttons : buttons ? [buttons] : [];
 
   // TODO: Move to getHeaderStyles for consistency, followup ticket: https://databricks.atlassian.net/browse/FEINF-1222
@@ -13102,6 +14582,9 @@ const Header$1 = _ref5 => {
       display: 'flex',
       alignItems: 'flex-start',
       justifyContent: 'space-between',
+      ...(useReflowWrapStyles ? {
+        flexWrap: 'wrap'
+      } : {}),
       // Buttons have 32px height while Title level 2 elements used by this component have a height of 28px
       // These paddings enforce height to be the same without buttons too
       ...(buttonsArray.length === 0 && {
@@ -13138,6 +14621,11 @@ const Header$1 = _ref5 => {
       }), buttons && jsx("div", {
         css: styles.buttonContainer,
         children: jsx(Space, {
+          ...(useReflowWrapStyles ? {
+            dangerouslySetAntdProps: {
+              wrap: true
+            }
+          } : {}),
           size: 8,
           children: buttonsArray.filter(Boolean).map((button, i) => {
             const defaultKey = `dubois-header-button-${i}`;
@@ -13406,7 +14894,7 @@ const LegacySkeleton = /* #__PURE__ */(() => {
   return LegacySkeleton;
 })();
 
-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__$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 getPaginationEmotionStyles(clsPrefix, theme) {
   const classRoot = `.${clsPrefix}-pagination`;
   const classItem = `.${clsPrefix}-pagination-item`;
@@ -13521,25 +15009,48 @@ const Pagination = function Pagination(_ref) {
     numTotal,
     onChange,
     style,
+    hideOnSinglePage,
     dangerouslySetAntdProps
   } = _ref;
   const {
     classNamePrefix,
     theme
   } = useDesignSystemTheme();
+  const {
+    pageSizeSelectAriaLabel,
+    pageQuickJumperAriaLabel,
+    ...restDangerouslySetAntdProps
+  } = dangerouslySetAntdProps !== null && dangerouslySetAntdProps !== void 0 ? dangerouslySetAntdProps : {};
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref && ref.current) {
+      const selectDropdown = ref.current.querySelector(`.${classNamePrefix}-select-selection-search-input`);
+      if (selectDropdown) {
+        selectDropdown.setAttribute('aria-label', pageSizeSelectAriaLabel !== null && pageSizeSelectAriaLabel !== void 0 ? pageSizeSelectAriaLabel : 'Select page size');
+      }
+      const pageQuickJumper = ref.current.querySelector(`.${classNamePrefix}-pagination-options-quick-jumper > input`);
+      if (pageQuickJumper) {
+        pageQuickJumper.setAttribute('aria-label', pageQuickJumperAriaLabel !== null && pageQuickJumperAriaLabel !== void 0 ? pageQuickJumperAriaLabel : 'Go to page');
+      }
+    }
+  }, [pageQuickJumperAriaLabel, pageSizeSelectAriaLabel, classNamePrefix]);
   return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(Pagination$1, {
-      css: getPaginationEmotionStyles(classNamePrefix, theme),
-      current: currentPageIndex,
-      pageSize: pageSize,
-      responsive: false,
-      total: numTotal,
-      onChange: onChange,
-      showSizeChanger: false,
-      showQuickJumper: false,
-      size: "small",
-      style: style,
-      ...dangerouslySetAntdProps
+    children: jsx("div", {
+      ref: ref,
+      children: jsx(Pagination$1, {
+        css: getPaginationEmotionStyles(classNamePrefix, theme),
+        current: currentPageIndex,
+        pageSize: pageSize,
+        responsive: false,
+        total: numTotal,
+        onChange: onChange,
+        showSizeChanger: false,
+        showQuickJumper: false,
+        size: "small",
+        style: style,
+        hideOnSinglePage: hideOnSinglePage,
+        ...restDangerouslySetAntdProps
+      })
     })
   });
 };
@@ -13549,7 +15060,7 @@ var _ref3$3 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "1am9qog-CursorPagination",
   styles: "width:120px;label:CursorPagination;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
 };
 const CursorPagination = function CursorPagination(_ref2) {
   let {
@@ -13563,7 +15074,8 @@ const CursorPagination = function CursorPagination(_ref2) {
       options: pageSizeOptions,
       default: defaultPageSize,
       getOptionText: getPageSizeOptionText,
-      onChange: onPageSizeChange
+      onChange: onPageSizeChange,
+      ariaLabel = 'Select page size'
     } = {}
   } = _ref2;
   const {
@@ -13582,18 +15094,21 @@ const CursorPagination = function CursorPagination(_ref2) {
       }
     }, process.env.NODE_ENV === "production" ? "" : ";label:CursorPagination;"),
     children: [jsx(Button, {
+      componentId: "codegen_design-system_src_design-system_pagination_index.tsx_237",
       icon: jsx(ChevronLeftIcon, {}),
       disabled: !hasPreviousPage,
       onClick: onPreviousPage,
       type: "tertiary",
       children: previousPageText
     }), jsx(Button, {
+      componentId: "codegen_design-system_src_design-system_pagination_index.tsx_240",
       endIcon: jsx(ChevronRightIcon, {}),
       disabled: !hasNextPage,
       onClick: onNextPage,
       type: "tertiary",
       children: nextPageText
     }), pageSizeOptions && jsx(Select, {
+      "aria-label": ariaLabel,
       value: String(pageSizeValue),
       css: _ref3$3,
       onChange: pageSize => {
@@ -13738,7 +15253,7 @@ const Menu = /* #__PURE__ */(() => {
   return Menu;
 })();
 
-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__$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)."; }
 const SIZE_PRESETS = {
   normal: 640,
   wide: 880
@@ -13885,12 +15400,14 @@ function DefaultFooter(_ref) {
   };
   return jsxs(Fragment, {
     children: [cancelText && jsx(Button, {
+      componentId: "codegen_design-system_src_design-system_modal_modal.tsx_260",
       onClick: handleCancel,
       autoFocus: autoFocusButton === 'cancel',
       dangerouslyUseFocusPseudoClass: true,
       ...cancelButtonProps,
       children: cancelText
     }), okText && jsx(Button, {
+      componentId: "codegen_design-system_src_design-system_modal_modal.tsx_271",
       loading: confirmLoading,
       onClick: handleOk,
       type: "primary",
@@ -13969,7 +15486,7 @@ var _ref3$2 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "1jkwrsj-titleComp",
   styles: "position:relative;display:inline-flex;align-items:center;label:titleComp;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$4
 };
 var _ref4 = process.env.NODE_ENV === "production" ? {
   name: "1o6wc9k",
@@ -13977,7 +15494,7 @@ var _ref4 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "i303lp-titleComp",
   styles: "padding-left:6px;label:titleComp;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$5
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$4
 };
 function DangerModal(props) {
   const {
@@ -14013,10 +15530,12 @@ function DangerModal(props) {
   return jsx(Modal, {
     title: titleComp,
     footer: [jsx(Button, {
+      componentId: "codegen_design-system_src_design-system_modal_modal.tsx_386",
       onClick: onCancel,
       ...cancelButtonProps,
       children: cancelText || 'Cancel'
     }, "cancel"), jsx(Button, {
+      componentId: "codegen_design-system_src_design-system_modal_modal.tsx_395",
       type: "primary",
       danger: true,
       onClick: onOk,
@@ -14134,6 +15653,7 @@ const Root$1 = /*#__PURE__*/forwardRef(function (_ref, ref) {
 // TODO: Support light and dark mode
 
 const getViewportStyle = theme => {
+  const enableReflowWrapStyles = safex('databricks.fe.wexp.enableReflowWrapStyles', false);
   return {
     position: 'fixed',
     top: 0,
@@ -14145,7 +15665,10 @@ const getViewportStyle = theme => {
     width: 440,
     listStyle: 'none',
     zIndex: theme.options.zIndexBase + 100,
-    outline: 'none'
+    outline: 'none',
+    ...(enableReflowWrapStyles ? {
+      maxWidth: `calc(100% - ${theme.spacing.lg}px)`
+    } : {})
   };
 };
 const getTitleStyles = theme => {
@@ -14228,6 +15751,7 @@ const Close$1 = /*#__PURE__*/forwardRef(function (props, ref) {
         ...restProps,
         asChild: true,
         children: jsx(Button, {
+          componentId: "codegen_design-system_src_design-system_notification_notification.tsx_224",
           icon: jsx(CloseIcon, {}),
           "aria-label": (_ref4 = closeLabel !== null && closeLabel !== void 0 ? closeLabel : restProps['aria-label']) !== null && _ref4 !== void 0 ? _ref4 : 'Close notification'
         })
@@ -14406,7 +15930,8 @@ const InfoPopover = _ref => {
     popoverProps,
     iconTitle,
     iconProps,
-    isKeyboardFocusable = true
+    isKeyboardFocusable = true,
+    ariaLabel = 'More details'
   } = _ref;
   const {
     theme
@@ -14432,6 +15957,7 @@ const InfoPopover = _ref => {
         ,
         tabIndex: isKeyboardFocusable ? 0 : -1,
         onKeyDown: handleKeyDown,
+        "aria-label": ariaLabel,
         children: jsx(InfoCircleOutlined, {
           "aria-hidden": "false",
           title: iconTitle,
@@ -14455,7 +15981,7 @@ const colorMap = {
   default: 'tagDefault',
   brown: 'tagBrown',
   coral: 'tagCoral',
-  charcoal: 'tagCharcoal',
+  charcoal: 'grey600',
   indigo: 'tagIndigo',
   lemon: 'tagLemon',
   lime: 'tagLime',
@@ -14593,14 +16119,14 @@ function Tag(props) {
   });
 }
 
-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__$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$1 = process.env.NODE_ENV === "production" ? {
   name: "1amee4m",
   styles: "line-height:0"
 } : {
   name: "c77cjr-trigger",
   styles: "line-height:0;label:trigger;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$4
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$3
 };
 var _ref3$1 = process.env.NODE_ENV === "production" ? {
   name: "srf7qm",
@@ -14608,7 +16134,7 @@ var _ref3$1 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "qnr75h-trigger",
   styles: "border:none;padding:0;background:transparent;label:trigger;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$4
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$3
 };
 const Overflow = _ref => {
   let {
@@ -14713,9 +16239,16 @@ const PageWrapper = _ref => {
 
 const SMALL_BUTTON_HEIGHT = 24;
 function getSegmentedControlGroupEmotionStyles(clsPrefix) {
+  let spaced = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  const classGroup = `.${clsPrefix}-radio-group`;
   const classSmallGroup = `.${clsPrefix}-radio-group-small`;
   const classButtonWrapper = `.${clsPrefix}-radio-button-wrapper`;
   const styles = {
+    [`&${classGroup}`]: spaced ? {
+      display: 'flex',
+      gap: 8,
+      flexWrap: 'wrap'
+    } : {},
     [`&${classSmallGroup} ${classButtonWrapper}`]: {
       padding: '0 12px'
     }
@@ -14724,6 +16257,7 @@ function getSegmentedControlGroupEmotionStyles(clsPrefix) {
   return /*#__PURE__*/css(importantStyles, process.env.NODE_ENV === "production" ? "" : ";label:getSegmentedControlGroupEmotionStyles;");
 }
 function getSegmentedControlButtonEmotionStyles(clsPrefix, theme, size) {
+  let spaced = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   const classWrapperChecked = `.${clsPrefix}-radio-button-wrapper-checked`;
   const classWrapper = `.${clsPrefix}-radio-button-wrapper`;
   const classWrapperDisabled = `.${clsPrefix}-radio-button-wrapper-disabled`;
@@ -14738,7 +16272,9 @@ function getSegmentedControlButtonEmotionStyles(clsPrefix, theme, size) {
     backgroundColor: theme.colors.actionDefaultBackgroundDefault,
     borderColor: theme.colors.actionDefaultBorderDefault,
     color: theme.colors.actionDefaultTextDefault,
+    // This handles the left border of the button when they're adjacent
     '::before': {
+      display: spaced ? 'none' : 'block',
       backgroundColor: theme.colors.actionDefaultBorderDefault
     },
     '&:hover': {
@@ -14791,6 +16327,10 @@ function getSegmentedControlButtonEmotionStyles(clsPrefix, theme, size) {
       padding: size === 'middle' ? '0 16px' : '0 8px',
       display: 'inline-flex',
       verticalAlign: 'middle',
+      ...(spaced ? {
+        borderWidth: 1,
+        borderRadius: theme.general.borderRadiusBase
+      } : {}),
       '&:focus-within': {
         outlineStyle: 'solid',
         outlineWidth: '2px',
@@ -14809,7 +16349,8 @@ function getSegmentedControlButtonEmotionStyles(clsPrefix, theme, size) {
   return /*#__PURE__*/css(importantStyles, process.env.NODE_ENV === "production" ? "" : ";label:getSegmentedControlButtonEmotionStyles;");
 }
 const SegmentedControlGroupContext = /*#__PURE__*/createContext({
-  size: 'middle'
+  size: 'middle',
+  spaced: false
 });
 const SegmentedControlButton = /*#__PURE__*/forwardRef(function SegmentedControlButton(_ref, ref) {
   let {
@@ -14821,11 +16362,12 @@ const SegmentedControlButton = /*#__PURE__*/forwardRef(function SegmentedControl
     theme
   } = useDesignSystemTheme();
   const {
-    size
+    size,
+    spaced
   } = useContext(SegmentedControlGroupContext);
   return jsx(DesignSystemAntDConfigProvider, {
     children: jsx(Radio$1.Button, {
-      css: getSegmentedControlButtonEmotionStyles(classNamePrefix, theme, size),
+      css: getSegmentedControlButtonEmotionStyles(classNamePrefix, theme, size, spaced),
       ...props,
       ...dangerouslySetAntdProps,
       ref: ref
@@ -14836,6 +16378,7 @@ const SegmentedControlGroup = /*#__PURE__*/forwardRef(function SegmentedControlG
   let {
     dangerouslySetAntdProps,
     size = 'middle',
+    spaced = false,
     ...props
   } = _ref2;
   const {
@@ -14844,11 +16387,12 @@ const SegmentedControlGroup = /*#__PURE__*/forwardRef(function SegmentedControlG
   return jsx(DesignSystemAntDConfigProvider, {
     children: jsx(SegmentedControlGroupContext.Provider, {
       value: {
-        size
+        size,
+        spaced
       },
       children: jsx(Radio$1.Group, {
         ...props,
-        css: getSegmentedControlGroupEmotionStyles(classNamePrefix),
+        css: getSegmentedControlGroupEmotionStyles(classNamePrefix, spaced),
         ...dangerouslySetAntdProps,
         ref: ref
       })
@@ -14856,7 +16400,7 @@ const SegmentedControlGroup = /*#__PURE__*/forwardRef(function SegmentedControlG
   });
 });
 
-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__$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)."; }
 const DEFAULT_WIDTH = 200;
 const ContentContextDefaults = {
   openPanelId: undefined,
@@ -14938,7 +16482,7 @@ function Content(_ref3) {
   } = _ref3;
   const openAnimation = keyframes`
   from { width: 50px }
-  to   { width: ${width}px }`;
+  to   { width: ${width || DEFAULT_WIDTH}px }`;
   const showAnimation = keyframes`
   from { opacity: 0 }
   80%  { opacity: 0 }
@@ -15092,7 +16636,7 @@ var _ref8 = 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__$3
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
 };
 function PanelHeader(_ref7) {
   let {
@@ -15124,6 +16668,7 @@ function PanelHeader(_ref7) {
       })
     }), contentContext.closable ? jsx("div", {
       children: jsx(Button, {
+        componentId: "codegen_design-system_src_design-system_sidebar_sidebar.tsx_427",
         size: "small",
         icon: jsx(CloseIcon, {}),
         "aria-label": "Close",
@@ -15303,6 +16848,7 @@ const DropdownButton = props => {
     dropdownProps.placement = 'bottomRight';
   }
   const leftButton = jsxs(Button, {
+    componentId: "codegen_design-system_src_design-system_splitbutton_dropdown_dropdownbutton.tsx_148",
     type: type,
     danger: danger,
     disabled: disabled,
@@ -15316,6 +16862,7 @@ const DropdownButton = props => {
     children: [leftButtonIcon && !children ? leftButtonIcon : undefined, children]
   });
   const rightButton = jsx(Button, {
+    componentId: "codegen_design-system_src_design-system_splitbutton_dropdown_dropdownbutton.tsx_166",
     type: type,
     danger: danger,
     disabled: disabled,
@@ -15330,9 +16877,9 @@ const DropdownButton = props => {
       ...dropdownProps,
       overlay: overlay,
       children: rightButtonToRender
-    }) : jsxs(Root$4, {
+    }) : jsxs(Root$5, {
       ...dropdownMenuRootProps,
-      children: [jsx(Trigger$2, {
+      children: [jsx(Trigger$3, {
         disabled: disabled,
         asChild: true,
         children: rightButtonToRender
@@ -15343,7 +16890,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__$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 BUTTON_HORIZONTAL_PADDING = 12;
 function getSplitButtonEmotionStyles(classNamePrefix, theme) {
   const classDefault = `.${classNamePrefix}-btn`;
@@ -15409,276 +16956,98 @@ 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" ? {
-  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
-};
-const SplitButton = props => {
-  const {
-    theme,
-    classNamePrefix
-  } = useDesignSystemTheme();
-  const {
-    children,
-    icon,
-    deprecatedMenu,
-    type,
-    loading,
-    loadingButtonStyles,
-    placement,
-    dangerouslySetAntdProps,
-    ...dropdownButtonProps
-  } = props;
-
-  // Size of button when loading only icon is shown
-  const LOADING_BUTTON_SIZE = theme.general.iconFontSize + 2 * BUTTON_HORIZONTAL_PADDING + 2 * theme.general.borderWidth;
-  const [width, setWidth] = useState(LOADING_BUTTON_SIZE);
-
-  // Set the width to the button's width in regular state to later use when in loading state
-  // We do this to have just a loading icon in loading state at the normal width to avoid flicker and width changes in page
-  const ref = useCallback(node => {
-    if (node && !loading) {
-      setWidth(node.getBoundingClientRect().width);
-    }
-  }, [loading]);
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx("div", {
-      ref: ref,
-      css: _ref,
-      children: loading ? jsx(Button, {
-        type: type === 'default' ? undefined : type,
-        style: {
-          width: width,
-          fontSize: theme.general.iconFontSize,
-          ...loadingButtonStyles
-        },
-        loading: true,
-        htmlType: props.htmlType,
-        title: props.title,
-        className: props.className,
-        children: children
-      }) : jsx(DropdownButton, {
-        ...dropdownButtonProps,
-        overlay: deprecatedMenu,
-        trigger: ['click'],
-        css: getSplitButtonEmotionStyles(classNamePrefix, theme),
-        icon: jsx(ChevronDownIcon$1, {
-          css: /*#__PURE__*/css({
-            fontSize: theme.general.iconSize
-          }, process.env.NODE_ENV === "production" ? "" : ";label:SplitButton;"),
-          "aria-hidden": "true"
-        }),
-        placement: placement || 'bottomRight',
-        type: type === 'default' ? undefined : type,
-        leftButtonIcon: icon,
-        ...dangerouslySetAntdProps,
-        children: children
-      })
-    })
-  });
-};
-
-const Steps = /* #__PURE__ */(() => {
-  function Steps(_ref) {
-    let {
-      dangerouslySetAntdProps,
-      ...props
-    } = _ref;
-    return jsx(DesignSystemAntDConfigProvider, {
-      children: jsx(Steps$1, {
-        ...props,
-        ...dangerouslySetAntdProps
-      })
-    });
-  }
-  Steps.Step = Steps$1.Step;
-  return Steps;
-})();
-
-const getSwitchWithLabelStyles = _ref => {
-  let {
-    clsPrefix,
-    theme
-  } = _ref;
-  // Default value
-  const SWITCH_WIDTH = 28;
-  const styles = {
-    display: 'flex',
-    alignItems: 'center',
-    // Switch is Off
-    [`&.${clsPrefix}-switch`]: {
-      backgroundColor: theme.colors.backgroundPrimary,
-      border: `1px solid ${theme.colors.actionDefaultBorderDefault}`,
-      [`.${clsPrefix}-switch-handle:before`]: {
-        boxShadow: `0px 0px 0px 1px ${theme.colors.actionDefaultBorderDefault}`,
-        transition: 'none'
-      },
-      [`&:hover:not(.${clsPrefix}-switch-disabled)`]: {
-        backgroundColor: theme.colors.actionDefaultBackgroundHover,
-        border: `1px solid ${theme.colors.actionPrimaryBackgroundHover}`,
-        [`.${clsPrefix}-switch-handle:before`]: {
-          boxShadow: `0px 0px 0px 1px ${theme.colors.actionPrimaryBackgroundHover}`
-        }
-      },
-      [`&:active:not(.${clsPrefix}-switch-disabled)`]: {
-        backgroundColor: theme.colors.actionDefaultBackgroundPress,
-        border: `1px solid ${theme.colors.actionPrimaryBackgroundPress}`,
-        [`.${clsPrefix}-switch-handle:before`]: {
-          boxShadow: `0px 0px 0px 1px ${theme.colors.actionPrimaryBackgroundHover}`
-        }
-      },
-      [`&:focus-visible`]: {
-        border: `1px solid ${theme.colors.actionPrimaryBackgroundDefault}`,
-        boxShadow: 'none',
-        outlineStyle: 'solid',
-        outlineWidth: '1px',
-        outlineOffset: '1px',
-        outlineColor: theme.colors.actionDefaultBorderFocus,
-        [`.${clsPrefix}-switch-handle:before`]: {
-          boxShadow: `0px 0px 0px 1px ${theme.colors.actionPrimaryBackgroundDefault}`
-        }
-      },
-      [`&:focus`]: {
-        boxShadow: 'none'
-      }
-    },
-    // Switch is On
-    [`&.${clsPrefix}-switch-checked`]: {
-      backgroundColor: theme.colors.actionPrimaryBackgroundDefault,
-      border: `1px solid ${theme.colors.actionPrimaryBackgroundDefault}`,
-      [`&:hover:not(.${clsPrefix}-switch-disabled)`]: {
-        backgroundColor: theme.colors.actionPrimaryBackgroundHover,
-        border: `1px solid ${theme.colors.actionPrimaryBackgroundDefault}`
-      },
-      [`&:active:not(.${clsPrefix}-switch-disabled)`]: {
-        backgroundColor: theme.colors.actionPrimaryBackgroundPress
-      },
-      [`.${clsPrefix}-switch-handle:before`]: {
-        boxShadow: `0px 0px 0px 1px ${theme.colors.actionPrimaryBackgroundDefault}`
-      },
-      [`&.${clsPrefix}-switch-disabled`]: {
-        backgroundColor: theme.colors.actionDisabledBackground,
-        border: `1px solid ${theme.colors.actionDisabledBackground}`,
-        [`.${clsPrefix}-switch-handle:before`]: {
-          boxShadow: `0px 0px 0px 1px ${theme.colors.actionDisabledBackground}`
-        }
-      }
-    },
-    [`.${clsPrefix}-switch-handle:before`]: {
-      backgroundColor: theme.colors.backgroundPrimary
-    },
-    [`&& + .${clsPrefix}-hint, && + .${clsPrefix}-form-message`]: {
-      paddingLeft: theme.spacing.sm + SWITCH_WIDTH
-    },
-    [`&& + .${clsPrefix}-form-message`]: {
-      marginTop: 0
-    },
-    [`.${clsPrefix}-click-animating-node`]: {
-      animation: 'none'
-    }
-  };
-  const importantStyles = importantify(styles);
-  return /*#__PURE__*/css(importantStyles, process.env.NODE_ENV === "production" ? "" : ";label:getSwitchWithLabelStyles;");
-};
-const Switch = _ref2 => {
-  var _props$id;
-  let {
-    dangerouslySetAntdProps,
-    label,
-    labelProps,
-    activeLabel,
-    inactiveLabel,
-    disabledLabel,
-    ...props
-  } = _ref2;
+var _ref = 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__$1
+};
+const SplitButton = props => {
   const {
     theme,
     classNamePrefix
   } = useDesignSystemTheme();
-  const duboisId = useUniqueId('dubois-switch');
-  const uniqueId = (_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : duboisId;
-  const [isChecked, setIsChecked] = useState(props.checked || props.defaultChecked);
-  const handleToggle = (newState, event) => {
-    if (props.onChange) {
-      props.onChange(newState, event);
-    } else {
-      setIsChecked(newState);
-    }
-  };
-  useEffect(() => {
-    setIsChecked(props.checked);
-  }, [props.checked]);
-  const hasNewLabels = activeLabel && inactiveLabel && disabledLabel;
-  const stateMessage = isChecked ? activeLabel : inactiveLabel;
+  const {
+    children,
+    icon,
+    deprecatedMenu,
+    type,
+    loading,
+    loadingButtonStyles,
+    placement,
+    dangerouslySetAntdProps,
+    ...dropdownButtonProps
+  } = props;
 
-  // AntDSwitch's interface does not include `id` even though it passes it through and works as expected
-  // We are using this to bypass that check
-  const idPropObj = {
-    id: uniqueId
-  };
-  const switchComponent = jsx(Switch$1, {
-    ...props,
-    ...dangerouslySetAntdProps,
-    onChange: handleToggle,
-    ...idPropObj,
-    css: /*#__PURE__*/css({
-      ... /*#__PURE__*/css(getAnimationCss(theme.options.enableAnimation), process.env.NODE_ENV === "production" ? "" : ";label:switchComponent;"),
-      ...getSwitchWithLabelStyles({
-        clsPrefix: classNamePrefix,
-        theme
-      })
-    }, process.env.NODE_ENV === "production" ? "" : ";label:switchComponent;")
-  });
-  const labelComponent = jsx(Label, {
-    inline: true,
-    ...labelProps,
-    htmlFor: uniqueId,
-    style: {
-      ...(hasNewLabels && {
-        marginRight: theme.spacing.sm
-      })
-    },
-    children: label
-  });
-  return label ? jsx(DesignSystemAntDConfigProvider, {
+  // Size of button when loading only icon is shown
+  const LOADING_BUTTON_SIZE = theme.general.iconFontSize + 2 * BUTTON_HORIZONTAL_PADDING + 2 * theme.general.borderWidth;
+  const [width, setWidth] = useState(LOADING_BUTTON_SIZE);
+
+  // Set the width to the button's width in regular state to later use when in loading state
+  // We do this to have just a loading icon in loading state at the normal width to avoid flicker and width changes in page
+  const ref = useCallback(node => {
+    if (node && !loading) {
+      setWidth(node.getBoundingClientRect().width);
+    }
+  }, [loading]);
+  return jsx(DesignSystemAntDConfigProvider, {
     children: jsx("div", {
-      css: getSwitchWithLabelStyles({
-        clsPrefix: classNamePrefix,
-        theme
-      }),
-      children: hasNewLabels ? jsxs(Fragment, {
-        children: [labelComponent, jsx("span", {
-          style: {
-            marginLeft: 'auto',
-            marginRight: theme.spacing.sm
-          },
-          children: `${stateMessage}${props.disabled ? ` (${disabledLabel})` : ''}`
-        }), switchComponent]
-      }) : jsxs(Fragment, {
-        children: [switchComponent, labelComponent]
+      ref: ref,
+      css: _ref,
+      children: loading ? jsx(Button, {
+        componentId: "codegen_design-system_src_design-system_splitbutton_splitbutton.tsx_163",
+        type: type === 'default' ? undefined : type,
+        style: {
+          width: width,
+          fontSize: theme.general.iconFontSize,
+          ...loadingButtonStyles
+        },
+        loading: true,
+        htmlType: props.htmlType,
+        title: props.title,
+        className: props.className,
+        children: children
+      }) : jsx(DropdownButton, {
+        ...dropdownButtonProps,
+        overlay: deprecatedMenu,
+        trigger: ['click'],
+        css: getSplitButtonEmotionStyles(classNamePrefix, theme),
+        icon: jsx(ChevronDownIcon$1, {
+          css: /*#__PURE__*/css({
+            fontSize: theme.general.iconSize
+          }, process.env.NODE_ENV === "production" ? "" : ";label:SplitButton;"),
+          "aria-hidden": "true"
+        }),
+        placement: placement || 'bottomRight',
+        type: type === 'default' ? undefined : type,
+        leftButtonIcon: icon,
+        ...dangerouslySetAntdProps,
+        children: children
       })
     })
-  }) : jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(Switch$1, {
-      ...props,
-      ...dangerouslySetAntdProps,
-      ...idPropObj,
-      css: /*#__PURE__*/css({
-        ... /*#__PURE__*/css(getAnimationCss(theme.options.enableAnimation), process.env.NODE_ENV === "production" ? "" : ";label:Switch;"),
-        ...getSwitchWithLabelStyles({
-          clsPrefix: classNamePrefix,
-          theme
-        })
-      }, process.env.NODE_ENV === "production" ? "" : ";label:Switch;")
-    })
   });
 };
 
-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 Steps = /* #__PURE__ */(() => {
+  function Steps(_ref) {
+    let {
+      dangerouslySetAntdProps,
+      ...props
+    } = _ref;
+    return jsx(DesignSystemAntDConfigProvider, {
+      children: jsx(Steps$1, {
+        ...props,
+        ...dangerouslySetAntdProps
+      })
+    });
+  }
+  Steps.Step = Steps$1.Step;
+  return Steps;
+})();
+
+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 getTableFilterInputStyles = (theme, defaultWidth) => {
   return /*#__PURE__*/css({
     [theme.responsive.mediaQueries.sm]: {
@@ -15698,7 +17067,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "3ktoz7-component",
   styles: "display:flex;width:100%;label:component;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var _ref3 = process.env.NODE_ENV === "production" ? {
   name: "82a6rk",
@@ -15706,13 +17075,14 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "18ug1j7-component",
   styles: "flex:1;label:component;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 const TableFilterInput = /*#__PURE__*/forwardRef(function SearchInput(_ref, ref) {
   let {
     onSubmit,
     showSearchButton,
     className,
+    containerProps,
     searchButtonProps,
     ...inputProps
   } = _ref;
@@ -15737,6 +17107,7 @@ const TableFilterInput = /*#__PURE__*/forwardRef(function SearchInput(_ref, ref)
         ref: ref,
         css: _ref3
       }), jsx(Button, {
+        componentId: "codegen_design-system_src_design-system_tableui_tablefilterinput.tsx_65",
         htmlType: "submit",
         "aria-label": "Search",
         ...searchButtonProps,
@@ -15744,56 +17115,22 @@ const TableFilterInput = /*#__PURE__*/forwardRef(function SearchInput(_ref, ref)
       })]
     });
   }
-  const commonProps = {
+  return jsx("div", {
     style: {
       height: theme.general.heightSm
     },
-    css: getTableFilterInputStyles(theme, DEFAULT_WIDTH)
-  };
-  if (onSubmit) {
-    return jsx("form", {
-      ...commonProps,
+    css: getTableFilterInputStyles(theme, DEFAULT_WIDTH),
+    ...containerProps,
+    children: onSubmit ? jsx("form", {
       onSubmit: e => {
         e.preventDefault();
         onSubmit();
       },
       children: component
-    });
-  } else {
-    return jsx("div", {
-      ...commonProps,
-      children: component
-    });
-  }
+    }) : 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)."; }
-const tableFilterLayoutStyles = {
-  layout: process.env.NODE_ENV === "production" ? {
-    name: "1yb0qmd",
-    styles: "display:flex;flex-direction:row;justify-content:space-between;margin-bottom:var(--table-filter-layout-group-margin)"
-  } : {
-    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__
-  },
-  filters: process.env.NODE_ENV === "production" ? {
-    name: "2pdmyz",
-    styles: "display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;gap:var(--table-filter-layout-item-gap);flex:1"
-  } : {
-    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__
-  },
-  filterActions: process.env.NODE_ENV === "production" ? {
-    name: "1ol8kzq",
-    styles: "display:flex;gap:var(--table-filter-layout-item-gap);margin-left:var(--table-filter-layout-group-margin)"
-  } : {
-    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__
-  }
-};
 const TableFilterLayout = /*#__PURE__*/forwardRef(function TableFilterLayout(_ref, ref) {
   let {
     children,
@@ -15802,9 +17139,44 @@ const TableFilterLayout = /*#__PURE__*/forwardRef(function TableFilterLayout(_re
     actions,
     ...rest
   } = _ref;
+  const useReflowWrapStyles = safex('databricks.fe.wexp.enableReflowWrapStyles', false);
   const {
     theme
   } = useDesignSystemTheme();
+  const tableFilterLayoutStyles = {
+    layout: /*#__PURE__*/css({
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      marginBottom: 'var(--table-filter-layout-group-margin)',
+      ...(useReflowWrapStyles ? {
+        columnGap: 'var(--table-filter-layout-group-margin)',
+        rowGap: 'var(--table-filter-layout-item-gap)',
+        flexWrap: 'wrap'
+      } : {})
+    }, process.env.NODE_ENV === "production" ? "" : ";label:layout;"),
+    filters: /*#__PURE__*/css({
+      display: 'flex',
+      flexWrap: 'wrap',
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 'var(--table-filter-layout-item-gap)',
+      ...(useReflowWrapStyles ? {
+        marginRight: 'var(--table-filter-layout-group-margin)'
+      } : {}),
+      flex: 1
+    }, process.env.NODE_ENV === "production" ? "" : ";label:filters;"),
+    filterActions: /*#__PURE__*/css({
+      display: 'flex',
+      ...(useReflowWrapStyles ? {
+        flexWrap: 'wrap'
+      } : {}),
+      gap: 'var(--table-filter-layout-item-gap)',
+      ...(!useReflowWrapStyles ? {
+        marginLeft: 'var(--table-filter-layout-group-margin)'
+      } : {})
+    }, process.env.NODE_ENV === "production" ? "" : ";label:filterActions;")
+  };
   return jsxs("div", {
     ...rest,
     ref: ref,
@@ -16403,6 +17775,7 @@ function getTreeEmotionStyles(clsPrefix, theme, size, useNewTree) {
   const classNodeActive = `.${clsPrefix}-tree-treenode-active`;
   const classNodeDisabled = `.${clsPrefix}-tree-treenode-disabled`;
   const classContent = `.${clsPrefix}-tree-node-content-wrapper`;
+  const classContentTitle = `.${clsPrefix}-tree-title`;
   const classSelected = `.${clsPrefix}-tree-node-selected`;
   const classSwitcher = `.${clsPrefix}-tree-switcher`;
   const classSwitcherNoop = `.${clsPrefix}-tree-switcher-noop`;
@@ -16413,13 +17786,21 @@ function getTreeEmotionStyles(clsPrefix, theme, size, useNewTree) {
   const classTreeList = `.${clsPrefix}-tree-list`;
   const classScrollbar = `.${clsPrefix}-tree-list-scrollbar`;
   const classScrollbarThumb = `.${clsPrefix}-tree-list-scrollbar-thumb`;
+  const classIcon = `.${clsPrefix}-tree-iconEle`;
+  const classAntMotion = `.${clsPrefix}-tree-treenode-motion, .ant-motion-collapse-appear, .ant-motion-collapse-appear-active, .ant-motion-collapse`;
   const NODE_SIZE = sizeMap[size].nodeSize;
   const ICON_FONT_SIZE = useNewTree ? 16 : 24;
   const BORDER_WIDTH = 4;
+  const baselineAligned = {
+    alignSelf: 'baseline',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  };
   const styles = {
     // Basic node
     [classNode]: {
-      height: NODE_SIZE,
+      minHeight: NODE_SIZE,
       width: '100%',
       padding: 0,
       paddingLeft: BORDER_WIDTH,
@@ -16497,6 +17878,12 @@ function getTreeEmotionStyles(clsPrefix, theme, size, useNewTree) {
         backgroundColor: 'transparent'
       }
     },
+    [classContentTitle]: {
+      lineHeight: theme.typography.lineHeightBase,
+      padding: `${(NODE_SIZE - parseInt(theme.typography.lineHeightBase, 10)) / 2}px 0`,
+      // The content inside 'classContent' is wrapped in the title class, which is the actual interactive element.
+      width: '100%'
+    },
     // TODO(FEINF-1595): Temporary style for now
     ...(useNewTree && {
       [`${classSwitcherNoop} + ${classContent}, ${classSwitcherNoop} + ${classCheckbox}`]: {
@@ -16539,13 +17926,25 @@ function getTreeEmotionStyles(clsPrefix, theme, size, useNewTree) {
       outlineStyle: 'solid'
     },
     [classCheckbox]: {
-      marginTop: 0,
+      marginTop: size === 'default' ? theme.spacing.sm : theme.spacing.xs,
       marginBottom: 0,
-      marginRight: theme.spacing.sm
+      marginRight: size === 'default' ? theme.spacing.sm : theme.spacing.xs,
+      ...baselineAligned
     },
     [classScrollbarThumb]: {
       background: chroma(theme.isDarkMode ? '#ffffff' : '#000000').alpha(0.5).hex()
     },
+    [`${classIcon}:has(*)`]: {
+      ...baselineAligned,
+      height: NODE_SIZE,
+      color: theme.colors.textSecondary,
+      marginRight: size === 'default' ? theme.spacing.sm : theme.spacing.xs
+    },
+    // Needed to avoid flickering when has icon and expanding
+    [classAntMotion]: {
+      ...getAnimationCss(theme.options.enableAnimation),
+      visibility: 'hidden'
+    },
     // Vertical line
     ...(useNewTree && {
       [classIndent]: {
@@ -16629,5 +18028,257 @@ const Tree = /*#__PURE__*/forwardRef(function Tree(_ref, ref) {
   });
 });
 
-export { AccessibleContainer, Accordion, AccordionPanel, Alert, AlignCenterIcon$1 as AlignCenterIcon, AlignLeftIcon$1 as AlignLeftIcon, AlignRightIcon$1 as AlignRightIcon, AppIcon$1 as AppIcon, ApplyDesignSystemContextOverrides, ApplyGlobalStyles, ArrowDownIcon$1 as ArrowDownIcon, ArrowInIcon$1 as ArrowInIcon, ArrowLeftIcon$1 as ArrowLeftIcon, ArrowRightIcon$1 as ArrowRightIcon, ArrowUpIcon$1 as ArrowUpIcon, ArrowsUpDownIcon$1 as ArrowsUpDownIcon, AssistantIcon$1 as AssistantIcon, AutoComplete, BadgeCodeIcon$1 as BadgeCodeIcon, BadgeCodeOffIcon$1 as BadgeCodeOffIcon, BarChartIcon$1 as BarChartIcon, BarGroupedIcon$1 as BarGroupedIcon, BarStackedIcon$1 as BarStackedIcon, BeakerIcon$1 as BeakerIcon, BinaryIcon$1 as BinaryIcon, BoldIcon$1 as BoldIcon, BookIcon$1 as BookIcon, BookmarkFillIcon$1 as BookmarkFillIcon, BookmarkIcon$1 as BookmarkIcon, BooksIcon$1 as BooksIcon, BracketsCurlyIcon$1 as BracketsCurlyIcon, BracketsSquareIcon$1 as BracketsSquareIcon, BracketsXIcon$1 as BracketsXIcon, BranchIcon$1 as BranchIcon, Breadcrumb, BriefcaseFillIcon$1 as BriefcaseFillIcon, BriefcaseIcon$1 as BriefcaseIcon, Button, CalendarClockIcon$1 as CalendarClockIcon, CalendarEventIcon$1 as CalendarEventIcon, CalendarIcon$1 as CalendarIcon, Card, CaretDownSquareIcon$1 as CaretDownSquareIcon, CaretUpSquareIcon$1 as CaretUpSquareIcon, CatalogCloudIcon$1 as CatalogCloudIcon, CatalogIcon$1 as CatalogIcon, CatalogOffIcon$1 as CatalogOffIcon, ChartLineIcon$1 as ChartLineIcon, CheckCircleBadgeIcon$1 as CheckCircleBadgeIcon, CheckCircleFillIcon$1 as CheckCircleFillIcon, CheckCircleIcon$1 as CheckCircleIcon, CheckIcon, CheckLineIcon$1 as CheckLineIcon, Checkbox, CheckboxIcon$1 as CheckboxIcon, ChecklistIcon$1 as ChecklistIcon, ChevronDoubleDownIcon$1 as ChevronDoubleDownIcon, ChevronDoubleLeftIcon$1 as ChevronDoubleLeftIcon, ChevronDoubleRightIcon$1 as ChevronDoubleRightIcon, ChevronDoubleUpIcon$1 as ChevronDoubleUpIcon, ChevronDownIcon$1 as ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon$1 as ChevronUpIcon, CircleIcon$1 as CircleIcon, ClipboardIcon$1 as ClipboardIcon, ClockIcon$1 as ClockIcon, ClockKeyIcon$1 as ClockKeyIcon, CloseIcon, CloudDownloadIcon$1 as CloudDownloadIcon, CloudIcon$1 as CloudIcon, CloudKeyIcon$1 as CloudKeyIcon, CloudModelIcon$1 as CloudModelIcon, CloudOffIcon$1 as CloudOffIcon, CloudUploadIcon$1 as CloudUploadIcon, CodeIcon$1 as CodeIcon, Col, ColorFillIcon$1 as ColorFillIcon, ColumnIcon$1 as ColumnIcon, ColumnsIcon$1 as ColumnsIcon, ConnectIcon$1 as ConnectIcon, Content, CopyIcon$1 as CopyIcon, CursorPagination, CursorTypeIcon$1 as CursorTypeIcon, DIcon$1 as DIcon, DU_BOIS_ENABLE_ANIMATION_CLASSNAME, DagIcon$1 as DagIcon, DangerFillIcon$1 as DangerFillIcon, DangerIcon, DangerModal, DashIcon$1 as DashIcon, DashboardIcon$1 as DashboardIcon, DataIcon$1 as DataIcon, DatabaseIcon$1 as DatabaseIcon, DecimalIcon$1 as DecimalIcon, DesignSystemAntDConfigProvider, DialogCombobox, DialogComboboxContent, DialogComboboxCountBadge, EmptyResults as DialogComboboxEmpty, DialogComboboxFooter, DialogComboboxHintRow, DialogComboboxOptionControlledList, DialogComboboxOptionList, DialogComboboxOptionListCheckboxItem, DialogComboboxOptionListSearch, DialogComboboxOptionListSelectItem, DialogComboboxSectionHeader, DialogComboboxSeparator, DialogComboboxTrigger, DotsCircleIcon$1 as DotsCircleIcon, DownloadIcon$1 as DownloadIcon, DragIcon$1 as DragIcon, Drawer, Dropdown, DuboisDatePicker, Empty, ExpandLessIcon$1 as ExpandLessIcon, ExpandMoreIcon$1 as ExpandMoreIcon, FileCodeIcon$1 as FileCodeIcon, FileDocumentIcon$1 as FileDocumentIcon, FileIcon$1 as FileIcon, FileImageIcon$1 as FileImageIcon, FileModelIcon$1 as FileModelIcon, FilterIcon$1 as FilterIcon, FloatIcon$1 as FloatIcon, FolderBranchIcon$1 as FolderBranchIcon, FolderCloudFilledIcon$1 as FolderCloudFilledIcon, FolderCloudIcon$1 as FolderCloudIcon, FolderFillIcon$1 as FolderFillIcon, FolderIcon$1 as FolderIcon, FontIcon$1 as FontIcon, ForkIcon$1 as ForkIcon, Form, FormDubois, FormUI, FullscreenExitIcon$1 as FullscreenExitIcon, FullscreenIcon$1 as FullscreenIcon, FunctionIcon$1 as FunctionIcon, GearFillIcon$1 as GearFillIcon, GearIcon$1 as GearIcon, GenericSkeleton, GiftIcon$1 as GiftIcon, GitCommitIcon$1 as GitCommitIcon, GlobeIcon$1 as GlobeIcon, GridDashIcon$1 as GridDashIcon, GridIcon$1 as GridIcon, H1Icon$1 as H1Icon, H2Icon$1 as H2Icon, H3Icon$1 as H3Icon, Header$1 as Header, HistoryIcon$1 as HistoryIcon, HomeIcon$1 as HomeIcon, Icon, ImageIcon$1 as ImageIcon, IndentDecreaseIcon$1 as IndentDecreaseIcon, IndentIncreaseIcon$1 as IndentIncreaseIcon, InfinityIcon$1 as InfinityIcon, InfoFillIcon$1 as InfoFillIcon, InfoIcon, InfoPopover, InfoTooltip, IngestionIcon$1 as IngestionIcon, Input, ItalicIcon$1 as ItalicIcon, KeyIcon$1 as KeyIcon, KeyboardIcon$1 as KeyboardIcon, LayerGraphIcon$1 as LayerGraphIcon, LayerIcon$1 as LayerIcon, Layout, LegacyDatePicker, LegacyPopover, LegacySkeleton, LegacyTable, LettersIcon$1 as LettersIcon, LibrariesIcon$1 as LibrariesIcon, LightningIcon$1 as LightningIcon, LinkIcon$1 as LinkIcon, LinkOffIcon$1 as LinkOffIcon, ListBorderIcon$1 as ListBorderIcon, ListIcon$1 as ListIcon, LoadingIcon, LoadingState, LockFillIcon$1 as LockFillIcon, LockIcon$1 as LockIcon, LockUnlockedIcon$1 as LockUnlockedIcon, MIcon$1 as MIcon, MailIcon$1 as MailIcon, Menu, MenuIcon$1 as MenuIcon, MinusBoxIcon$1 as MinusBoxIcon, MinusCircleFillIcon$1 as MinusCircleFillIcon, MinusCircleIcon$1 as MinusCircleIcon, Modal, ModelsIcon$1 as ModelsIcon, Nav, NavButton, NoIcon$1 as NoIcon, NotebookIcon$1 as NotebookIcon, Notification, NotificationIcon$1 as NotificationIcon, NotificationOffIcon$1 as NotificationOffIcon, NumbersIcon$1 as NumbersIcon, OfficeIcon$1 as OfficeIcon, OptGroup, Option, Overflow, OverflowIcon$1 as OverflowIcon, PageBottomIcon$1 as PageBottomIcon, PageFirstIcon$1 as PageFirstIcon, PageLastIcon$1 as PageLastIcon, PageTopIcon$1 as PageTopIcon, PageWrapper, Pagination, Panel, PanelBody, PanelHeader, PanelHeaderButtons, PanelHeaderTitle, ParagraphSkeleton, PencilIcon$1 as PencilIcon, PinCancelIcon$1 as PinCancelIcon, PinFillIcon$1 as PinFillIcon, PinIcon$1 as PinIcon, PipelineIcon$1 as PipelineIcon, PlayCircleFillIcon$1 as PlayCircleFillIcon, PlayCircleIcon$1 as PlayCircleIcon, PlayIcon$1 as PlayIcon, PlugIcon$1 as PlugIcon, PlusCircleFillIcon$1 as PlusCircleFillIcon, PlusCircleIcon$1 as PlusCircleIcon, PlusIcon$1 as PlusIcon, PlusSquareIcon$1 as PlusSquareIcon, Popover, QueryEditorIcon$1 as QueryEditorIcon, QueryIcon$1 as QueryIcon, QuestionMarkFillIcon$1 as QuestionMarkFillIcon, QuestionMarkIcon$1 as QuestionMarkIcon, QuestionMarkSpeechBubbleIcon$1 as QuestionMarkSpeechBubbleIcon, RHFControlledComponents, ROW_GUTTER_SIZE, Radio, ReaderModeIcon$1 as ReaderModeIcon, RedoIcon$1 as RedoIcon, RefreshIcon$1 as RefreshIcon, RestoreAntDDefaultClsPrefix, RobotIcon$1 as RobotIcon, Row, SaveIcon$1 as SaveIcon, SchoolIcon$1 as SchoolIcon, SearchIcon$1 as SearchIcon, SecurityIcon$1 as SecurityIcon, SegmentedControlButton, SegmentedControlGroup, Select, SelectOptGroup, SelectOption, SelectV2, SelectV2Content, SelectV2Option, SelectV2OptionGroup, SelectV2Trigger, SendIcon$1 as SendIcon, ShareIcon$1 as ShareIcon, Sidebar, SidebarAutoIcon$1 as SidebarAutoIcon, SidebarCollapseIcon$1 as SidebarCollapseIcon, SidebarExpandIcon$1 as SidebarExpandIcon, SidebarIcon$1 as SidebarIcon, SlidersIcon$1 as SlidersIcon, SortAlphabeticalAscendingIcon$1 as SortAlphabeticalAscendingIcon, SortAlphabeticalDescendingIcon$1 as SortAlphabeticalDescendingIcon, SortAlphabeticalLeftIcon$1 as SortAlphabeticalLeftIcon, SortAlphabeticalRightIcon$1 as SortAlphabeticalRightIcon, SortAscendingIcon$1 as SortAscendingIcon, SortDescendingIcon$1 as SortDescendingIcon, SortUnsortedIcon$1 as SortUnsortedIcon, Space, Spacer, SpeechBubbleIcon$1 as SpeechBubbleIcon, SpeechBubblePlusIcon$1 as SpeechBubblePlusIcon, SpeechBubbleQuestionMarkIcon$1 as SpeechBubbleQuestionMarkIcon, Spinner, SplitButton, StarFillIcon$1 as StarFillIcon, StarIcon$1 as StarIcon, Steps, StopCircleFillIcon$1 as StopCircleFillIcon, StopCircleIcon$1 as StopCircleIcon, StopIcon$1 as StopIcon, StorefrontIcon$1 as StorefrontIcon, StreamIcon$1 as StreamIcon, Switch, SyncIcon$1 as SyncIcon, TabPane, Table, TableCell, TableContext, TableFilterInput, TableFilterLayout, TableGlassesIcon$1 as TableGlassesIcon, TableHeader, TableIcon$1 as TableIcon, TableLightningIcon$1 as TableLightningIcon, TableRow, TableRowAction, TableRowActionHeader, TableRowContext, TableRowMenuContainer, TableRowSelectCell, TableSkeleton, TableSkeletonRows, TableStreamIcon$1 as TableStreamIcon, TableVectorIcon$1 as TableVectorIcon, TableViewIcon$1 as TableViewIcon, Tabs, Tag, TargetIcon$1 as TargetIcon, TextBoxIcon$1 as TextBoxIcon, ThumbsDownIcon$1 as ThumbsDownIcon, ThumbsUpIcon$1 as ThumbsUpIcon, TitleSkeleton, ToggleButton, Tooltip, TrashIcon$1 as TrashIcon, Tree, TreeIcon$1 as TreeIcon, TypeaheadComboboxCheckboxItem, TypeaheadComboboxFooter, TypeaheadComboboxInput, TypeaheadComboboxMenu, TypeaheadComboboxMenuItem, TypeaheadComboboxMultiSelectInput, TypeaheadComboboxRoot, TypeaheadComboboxSectionHeader, TypeaheadComboboxSelectedItem, TypeaheadComboboxSeparator, TypeaheadComboboxToggleButton, Typography, UnderlineIcon$1 as UnderlineIcon, UndoIcon$1 as UndoIcon, UploadIcon$1 as UploadIcon, UsbIcon$1 as UsbIcon, UserBadgeIcon$1 as UserBadgeIcon, UserCircleIcon$1 as UserCircleIcon, UserGroupIcon$1 as UserGroupIcon, UserIcon$1 as UserIcon, VectorTableIcon$1 as VectorTableIcon, VisibleIcon$1 as VisibleIcon, VisibleOffIcon$1 as VisibleOffIcon, WarningFillIcon$1 as WarningFillIcon, WarningIcon$1 as WarningIcon, WorkflowsIcon$1 as WorkflowsIcon, WorkspacesIcon$1 as WorkspacesIcon, XCircleFillIcon$1 as XCircleFillIcon, XCircleIcon$1 as XCircleIcon, ZoomInIcon$1 as ZoomInIcon, ZoomMarqueeSelection$1 as ZoomMarqueeSelection, ZoomOutIcon$1 as 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, getDarkModePortalStyles, getDialogComboboxOptionLabelWidth, getGlobalStyles, getKeyboardNavigationFunctions, getPaginationEmotionStyles, getRadioStyles, getShadowScrollStyles, getTabEmotionStyles, getValidationStateColor, getWrapperStyle, highlightFirstNonDisabledOption, highlightOption, importantify, isOptionDisabled, resetTabIndexToFocusedElement, useComboboxState, useDesignSystemFlags, useDesignSystemTheme, useLegacyNotification, useMultipleSelectionState, useThemedStyles, useTypeaheadComboboxContext, visuallyHidden, withNotifications };
+function WizardFooter(props) {
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx("div", {
+    css: /*#__PURE__*/css({
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'flex-end',
+      columnGap: theme.spacing.sm,
+      paddingTop: theme.spacing.md,
+      borderTop: `1px solid ${theme.colors.border}`
+    }, process.env.NODE_ENV === "production" ? "" : ";label:WizardFooter;"),
+    children: getWizardFooterButtons(props)
+  });
+}
+function getWizardFooterButtons(_ref) {
+  let {
+    goToNextStepOrDone,
+    isLastStep,
+    currentStepIndex,
+    goToPreviousStep,
+    busyValidatingNextStep,
+    nextButtonDisabled,
+    nextButtonLoading,
+    nextButtonContentOverride,
+    previousButtonContentOverride,
+    previousStepButtonHidden,
+    previousButtonDisabled,
+    previousButtonLoading,
+    cancelButtonContent,
+    cancelStepButtonHidden,
+    nextButtonContent,
+    previousButtonContent,
+    doneButtonContent,
+    extraFooterButtons,
+    onCancel
+  } = _ref;
+  return _compact([!cancelStepButtonHidden && jsx(Button, {
+    onClick: onCancel,
+    type: "tertiary",
+    componentId: "codegen_dubois_src_wizard_wizardfooter_cancel",
+    children: cancelButtonContent
+  }, "cancel"), extraFooterButtons && extraFooterButtons.map((buttonProps, index) => createElement(Button, {
+    ...buttonProps,
+    type: undefined,
+    key: `extra-${index}`
+  })), currentStepIndex > 0 && !previousStepButtonHidden && jsx(Button, {
+    onClick: goToPreviousStep,
+    disabled: previousButtonDisabled,
+    loading: previousButtonLoading,
+    componentId: "codegen_dubois_src_wizard_wizardfooter_previous",
+    children: previousButtonContentOverride ? previousButtonContentOverride : previousButtonContent
+  }, "previous"), jsx(Button, {
+    onClick: goToNextStepOrDone,
+    disabled: nextButtonDisabled,
+    loading: nextButtonLoading || busyValidatingNextStep,
+    type: "primary",
+    componentId: "codegen_dubois_src_wizard_wizardfooter_next",
+    children: nextButtonContentOverride ? nextButtonContentOverride : isLastStep ? doneButtonContent : nextButtonContent
+  }, "next")]);
+}
+
+function WizardStepsContent(_ref) {
+  let {
+    steps: wizardSteps,
+    currentStepIndex,
+    localizeStepNumber
+  } = _ref;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const stepperSteps = useMemo(() => wizardSteps.map(wizardStep => _pick(wizardStep, ['title', 'description', 'status'])), [wizardSteps]);
+  return jsxs(Fragment, {
+    children: [jsx(Stepper, {
+      currentStepIndex: currentStepIndex,
+      direction: "horizontal",
+      localizeStepNumber: localizeStepNumber,
+      steps: stepperSteps,
+      responsive: false
+    }), jsx("div", {
+      css: /*#__PURE__*/css({
+        marginTop: theme.spacing.md
+      }, process.env.NODE_ENV === "production" ? "" : ";label:WizardStepsContent;"),
+      children: wizardSteps[currentStepIndex].content
+    })]
+  });
+}
+
+function useWizardCurrentStep(_ref) {
+  let {
+    initialStep,
+    totalSteps,
+    onValidateStepChange,
+    onStepChanged
+  } = _ref;
+  const [busyValidatingNextStep, setBusyValidatingNextStep] = useState(false);
+  const [currentStepIndex, setCurrentStepIndex] = useState(initialStep !== null && initialStep !== void 0 ? initialStep : 0);
+  const isLastStep = useMemo(() => currentStepIndex === totalSteps - 1, [currentStepIndex, totalSteps]);
+  const onStepsChange = useCallback(async function (step) {
+    let completed = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (!completed && step === currentStepIndex) return;
+    setCurrentStepIndex(step);
+    onStepChanged({
+      step,
+      completed
+    });
+  }, [currentStepIndex, onStepChanged]);
+  const goToNextStepOrDone = useCallback(async () => {
+    if (onValidateStepChange) {
+      setBusyValidatingNextStep(true);
+      try {
+        const approvedStepChange = await onValidateStepChange(currentStepIndex);
+        if (!approvedStepChange) {
+          return;
+        }
+      } finally {
+        setBusyValidatingNextStep(false);
+      }
+    }
+    onStepsChange(Math.min(currentStepIndex + 1, totalSteps - 1), isLastStep);
+  }, [currentStepIndex, isLastStep, onStepsChange, onValidateStepChange, totalSteps]);
+  const goToPreviousStep = useCallback(() => {
+    if (currentStepIndex > 0) {
+      onStepsChange(currentStepIndex - 1);
+    }
+  }, [currentStepIndex, onStepsChange]);
+  const goToStep = useCallback(step => {
+    if (step > -1 && step < totalSteps) {
+      onStepsChange(step);
+    }
+  }, [onStepsChange, totalSteps]);
+  return {
+    currentStepIndex,
+    busyValidatingNextStep,
+    isLastStep,
+    onStepsChange,
+    goToNextStepOrDone,
+    goToPreviousStep,
+    goToStep
+  };
+}
+
+function Wizard(_ref) {
+  let {
+    steps,
+    onStepChanged,
+    onValidateStepChange,
+    initialStep,
+    ...props
+  } = _ref;
+  const currentStepProps = useWizardCurrentStep({
+    initialStep,
+    totalSteps: steps.length,
+    onStepChanged,
+    onValidateStepChange
+  });
+  return jsx(WizardControlled, {
+    ...currentStepProps,
+    initialStep: initialStep,
+    steps: steps,
+    onStepChanged: onStepChanged,
+    ...props
+  });
+}
+function WizardControlled(_ref2) {
+  let {
+    initialStep = 0,
+    steps,
+    width = '100%',
+    currentStepIndex,
+    localizeStepNumber,
+    onStepsChange,
+    isLastStep,
+    ...footerProps
+  } = _ref2;
+  if (steps.length === 0 || !_isUndefined(initialStep) && (initialStep < 0 || initialStep >= steps.length)) {
+    return null;
+  }
+  return jsxs("div", {
+    css: /*#__PURE__*/css({
+      width,
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'flex-start'
+    }, process.env.NODE_ENV === "production" ? "" : ";label:WizardControlled;"),
+    children: [jsx(WizardStepsContent, {
+      steps: steps,
+      currentStepIndex: currentStepIndex,
+      localizeStepNumber: localizeStepNumber
+    }), jsx(Spacer, {
+      size: "lg"
+    }), jsx(WizardFooter, {
+      currentStepIndex: currentStepIndex,
+      isLastStep: isLastStep,
+      ...steps[currentStepIndex],
+      ...footerProps
+    })]
+  });
+}
+
+function WizardModal(_ref) {
+  let {
+    onStepChanged,
+    onCancel,
+    initialStep,
+    steps,
+    onModalClose,
+    localizeStepNumber,
+    cancelButtonContent,
+    nextButtonContent,
+    previousButtonContent,
+    doneButtonContent,
+    ...modalProps
+  } = _ref;
+  const {
+    onStepsChange,
+    currentStepIndex,
+    isLastStep,
+    ...footerActions
+  } = useWizardCurrentStep({
+    initialStep,
+    totalSteps: steps.length,
+    onStepChanged
+  });
+  if (steps.length === 0 || !_isUndefined(initialStep) && (initialStep < 0 || initialStep >= steps.length)) {
+    return null;
+  }
+  const footerButtons = getWizardFooterButtons({
+    onCancel,
+    isLastStep,
+    currentStepIndex,
+    doneButtonContent,
+    previousButtonContent,
+    nextButtonContent,
+    cancelButtonContent,
+    ...footerActions,
+    ...steps[currentStepIndex]
+  });
+  return jsx(Modal, {
+    ...modalProps,
+    onCancel: onModalClose,
+    size: "wide",
+    footer: footerButtons,
+    children: jsx(WizardStepsContent, {
+      steps: steps,
+      currentStepIndex: currentStepIndex,
+      localizeStepNumber: localizeStepNumber
+    })
+  });
+}
+
+export { AccessibleContainer, Accordion, AccordionPanel, Alert, AlignCenterIcon$1 as AlignCenterIcon, AlignLeftIcon$1 as AlignLeftIcon, AlignRightIcon$1 as AlignRightIcon, AppIcon$1 as AppIcon, ApplyDesignSystemContextOverrides, ApplyGlobalStyles, ArrowDownIcon$1 as ArrowDownIcon, ArrowInIcon$1 as ArrowInIcon, ArrowLeftIcon$1 as ArrowLeftIcon, ArrowRightIcon$1 as ArrowRightIcon, ArrowUpIcon$1 as ArrowUpIcon, ArrowsUpDownIcon$1 as ArrowsUpDownIcon, AssistantIcon$1 as AssistantIcon, AutoComplete, BadgeCodeIcon$1 as BadgeCodeIcon, BadgeCodeOffIcon$1 as BadgeCodeOffIcon, BarChartIcon$1 as BarChartIcon, BarGroupedIcon$1 as BarGroupedIcon, BarStackedIcon$1 as BarStackedIcon, BarStackedPercentageIcon$1 as BarStackedPercentageIcon, BeakerIcon$1 as BeakerIcon, BinaryIcon$1 as BinaryIcon, BoldIcon$1 as BoldIcon, BookIcon$1 as BookIcon, BookmarkFillIcon$1 as BookmarkFillIcon, BookmarkIcon$1 as BookmarkIcon, BooksIcon$1 as BooksIcon, BracketsCurlyIcon$1 as BracketsCurlyIcon, BracketsSquareIcon$1 as BracketsSquareIcon, BracketsXIcon$1 as BracketsXIcon, BranchIcon$1 as BranchIcon, Breadcrumb, BriefcaseFillIcon$1 as BriefcaseFillIcon, BriefcaseIcon$1 as BriefcaseIcon, Button, CalendarClockIcon$1 as CalendarClockIcon, CalendarEventIcon$1 as CalendarEventIcon, CalendarIcon$1 as CalendarIcon, Card, CaretDownSquareIcon$1 as CaretDownSquareIcon, CaretUpSquareIcon$1 as CaretUpSquareIcon, CatalogCloudIcon$1 as CatalogCloudIcon, CatalogIcon$1 as CatalogIcon, CatalogOffIcon$1 as CatalogOffIcon, ChartLineIcon$1 as ChartLineIcon, CheckCircleBadgeIcon$1 as CheckCircleBadgeIcon, CheckCircleFillIcon$1 as CheckCircleFillIcon, CheckCircleIcon$1 as CheckCircleIcon, CheckIcon, CheckLineIcon$1 as CheckLineIcon, Checkbox, CheckboxIcon$1 as CheckboxIcon, ChecklistIcon$1 as ChecklistIcon, ChevronDoubleDownIcon$1 as ChevronDoubleDownIcon, ChevronDoubleLeftIcon$1 as ChevronDoubleLeftIcon, ChevronDoubleRightIcon$1 as ChevronDoubleRightIcon, ChevronDoubleUpIcon$1 as ChevronDoubleUpIcon, ChevronDownIcon$1 as ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon$1 as ChevronUpIcon, CircleIcon$1 as CircleIcon, ClipboardIcon$1 as ClipboardIcon, ClockIcon$1 as ClockIcon, ClockKeyIcon$1 as ClockKeyIcon, CloseIcon, CloudDownloadIcon$1 as CloudDownloadIcon, CloudIcon$1 as CloudIcon, CloudKeyIcon$1 as CloudKeyIcon, CloudModelIcon$1 as CloudModelIcon, CloudOffIcon$1 as CloudOffIcon, CloudUploadIcon$1 as CloudUploadIcon, CodeIcon$1 as CodeIcon, Col, ColorFillIcon$1 as ColorFillIcon, ColumnIcon$1 as ColumnIcon, ColumnsIcon$1 as ColumnsIcon, ConnectIcon$1 as ConnectIcon, Content, ContextMenu$1 as ContextMenu, CopyIcon$1 as CopyIcon, CursorPagination, CursorTypeIcon$1 as CursorTypeIcon, DIcon$1 as DIcon, DU_BOIS_ENABLE_ANIMATION_CLASSNAME, DagIcon$1 as DagIcon, DangerFillIcon$1 as DangerFillIcon, DangerIcon, DangerModal, DashIcon$1 as DashIcon, DashboardIcon$1 as DashboardIcon, DataIcon$1 as DataIcon, DatabaseIcon$1 as DatabaseIcon, DecimalIcon$1 as DecimalIcon, DesignSystemAntDConfigProvider, DialogCombobox, DialogComboboxContent, DialogComboboxCountBadge, DialogComboboxCustomButtonTriggerWrapper, EmptyResults as DialogComboboxEmpty, DialogComboboxFooter, DialogComboboxHintRow, DialogComboboxOptionControlledList, DialogComboboxOptionList, DialogComboboxOptionListCheckboxItem, DialogComboboxOptionListSearch, DialogComboboxOptionListSelectItem, DialogComboboxSectionHeader, DialogComboboxSeparator, DialogComboboxTrigger, DotsCircleIcon$1 as DotsCircleIcon, DownloadIcon$1 as DownloadIcon, DragIcon$1 as DragIcon, Drawer, Dropdown, DropdownMenu, DuboisDatePicker, Empty, ErdIcon$1 as ErdIcon, ExpandLessIcon$1 as ExpandLessIcon, ExpandMoreIcon$1 as ExpandMoreIcon, FileCodeIcon$1 as FileCodeIcon, FileDocumentIcon$1 as FileDocumentIcon, FileIcon$1 as FileIcon, FileImageIcon$1 as FileImageIcon, FileModelIcon$1 as FileModelIcon, FilterIcon$1 as FilterIcon, FloatIcon$1 as FloatIcon, FolderBranchIcon$1 as FolderBranchIcon, FolderCloudFilledIcon$1 as FolderCloudFilledIcon, FolderCloudIcon$1 as FolderCloudIcon, FolderFillIcon$1 as FolderFillIcon, FolderIcon$1 as FolderIcon, FontIcon$1 as FontIcon, ForkIcon$1 as ForkIcon, Form, FormDubois, FormUI, FullscreenExitIcon$1 as FullscreenExitIcon, FullscreenIcon$1 as FullscreenIcon, FunctionIcon$1 as FunctionIcon, GearFillIcon$1 as GearFillIcon, GearIcon$1 as GearIcon, GenericSkeleton, GiftIcon$1 as GiftIcon, GitCommitIcon$1 as GitCommitIcon, GlobeIcon$1 as GlobeIcon, GridDashIcon$1 as GridDashIcon, GridIcon$1 as GridIcon, H1Icon$1 as H1Icon, H2Icon$1 as H2Icon, H3Icon$1 as H3Icon, Header$1 as Header, HistoryIcon$1 as HistoryIcon, HomeIcon$1 as HomeIcon, Icon, ImageIcon$1 as ImageIcon, IndentDecreaseIcon$1 as IndentDecreaseIcon, IndentIncreaseIcon$1 as IndentIncreaseIcon, InfinityIcon$1 as InfinityIcon, InfoFillIcon$1 as InfoFillIcon, InfoIcon$1 as InfoIcon, InfoPopover, InfoTooltip, IngestionIcon$1 as IngestionIcon, Input, ItalicIcon$1 as ItalicIcon, KeyIcon$1 as KeyIcon, KeyboardIcon$1 as KeyboardIcon, LayerGraphIcon$1 as LayerGraphIcon, LayerIcon$1 as LayerIcon, Layout, LegacyDatePicker, LegacyPopover, LegacySkeleton, LegacyTable, LettersIcon$1 as LettersIcon, LibrariesIcon$1 as LibrariesIcon, LightningIcon$1 as LightningIcon, LinkIcon$1 as LinkIcon, LinkOffIcon$1 as LinkOffIcon, ListBorderIcon$1 as ListBorderIcon, ListClearIcon$1 as ListClearIcon, ListIcon$1 as ListIcon, LoadingIcon, LoadingState, LockFillIcon$1 as LockFillIcon, LockIcon$1 as LockIcon, LockUnlockedIcon$1 as LockUnlockedIcon, MIcon$1 as MIcon, MailIcon$1 as MailIcon, Menu, MenuIcon$1 as MenuIcon, MinusBoxIcon$1 as MinusBoxIcon, MinusCircleFillIcon$1 as MinusCircleFillIcon, MinusCircleIcon$1 as MinusCircleIcon, Modal, ModelsIcon$1 as ModelsIcon, Nav, NavButton, NoIcon$1 as NoIcon, NotebookIcon$1 as NotebookIcon, Notification, NotificationIcon$1 as NotificationIcon, NotificationOffIcon$1 as NotificationOffIcon, NumbersIcon$1 as NumbersIcon, OfficeIcon$1 as OfficeIcon, OptGroup, Option, Overflow, OverflowIcon$1 as OverflowIcon, PageBottomIcon$1 as PageBottomIcon, PageFirstIcon$1 as PageFirstIcon, PageLastIcon$1 as PageLastIcon, PageTopIcon$1 as PageTopIcon, PageWrapper, Pagination, Panel, PanelBody, PanelHeader, PanelHeaderButtons, PanelHeaderTitle, ParagraphSkeleton, PauseIcon$1 as PauseIcon, PencilIcon$1 as PencilIcon, PinCancelIcon$1 as PinCancelIcon, PinFillIcon$1 as PinFillIcon, PinIcon$1 as PinIcon, PipelineIcon$1 as PipelineIcon, PlayCircleFillIcon$1 as PlayCircleFillIcon, PlayCircleIcon$1 as PlayCircleIcon, PlayIcon$1 as PlayIcon, PlugIcon$1 as PlugIcon, PlusCircleFillIcon$1 as PlusCircleFillIcon, PlusCircleIcon$1 as PlusCircleIcon, PlusIcon$1 as PlusIcon, PlusSquareIcon$1 as PlusSquareIcon, Popover, QueryEditorIcon$1 as QueryEditorIcon, QueryIcon$1 as QueryIcon, QuestionMarkFillIcon$1 as QuestionMarkFillIcon, QuestionMarkIcon$1 as QuestionMarkIcon, QuestionMarkSpeechBubbleIcon$1 as QuestionMarkSpeechBubbleIcon, RHFControlledComponents, ROW_GUTTER_SIZE, Radio, ReaderModeIcon$1 as ReaderModeIcon, RedoIcon$1 as RedoIcon, RefreshIcon$1 as RefreshIcon, RestoreAntDDefaultClsPrefix, RobotIcon$1 as RobotIcon, Row, SaveIcon$1 as SaveIcon, SchoolIcon$1 as SchoolIcon, SearchIcon$1 as SearchIcon, SecurityIcon$1 as SecurityIcon, SegmentedControlButton, SegmentedControlGroup, Select, SelectOptGroup, SelectOption, SelectV2, SelectV2Content, SelectV2Option, SelectV2OptionGroup, SelectV2Trigger, SendIcon$1 as SendIcon, ShareIcon$1 as ShareIcon, Sidebar, SidebarAutoIcon$1 as SidebarAutoIcon, SidebarCollapseIcon$1 as SidebarCollapseIcon, SidebarExpandIcon$1 as SidebarExpandIcon, SidebarIcon$1 as SidebarIcon, SlidersIcon$1 as SlidersIcon, SortAlphabeticalAscendingIcon$1 as SortAlphabeticalAscendingIcon, SortAlphabeticalDescendingIcon$1 as SortAlphabeticalDescendingIcon, SortAlphabeticalLeftIcon$1 as SortAlphabeticalLeftIcon, SortAlphabeticalRightIcon$1 as SortAlphabeticalRightIcon, SortAscendingIcon$1 as SortAscendingIcon, SortDescendingIcon$1 as SortDescendingIcon, SortUnsortedIcon$1 as SortUnsortedIcon, Space, Spacer, SparkleIcon$1 as SparkleIcon, SpeechBubbleIcon$1 as SpeechBubbleIcon, SpeechBubblePlusIcon$1 as SpeechBubblePlusIcon, SpeechBubbleQuestionMarkIcon$1 as SpeechBubbleQuestionMarkIcon, Spinner, SplitButton, StarFillIcon$1 as StarFillIcon, StarIcon$1 as StarIcon, StepIntoIcon$1 as StepIntoIcon, StepOutIcon$1 as StepOutIcon, StepOverIcon$1 as StepOverIcon, Steps, StopCircleFillIcon$1 as StopCircleFillIcon, StopCircleIcon$1 as StopCircleIcon, StopIcon$1 as StopIcon, StorefrontIcon$1 as StorefrontIcon, StreamIcon$1 as StreamIcon, Switch, SyncIcon$1 as SyncIcon, TabPane, Table, TableCell, TableContext, TableFilterInput, TableFilterLayout, TableGlassesIcon$1 as TableGlassesIcon, TableHeader, TableIcon$1 as TableIcon, TableLightningIcon$1 as TableLightningIcon, TableOnlineViewIcon$1 as TableOnlineViewIcon, TableRow, TableRowAction, TableRowActionHeader, TableRowContext, TableRowMenuContainer, TableRowSelectCell, TableSkeleton, TableSkeletonRows, TableStreamIcon$1 as TableStreamIcon, TableVectorIcon$1 as TableVectorIcon, TableViewIcon$1 as TableViewIcon, Tabs, Tag, TargetIcon$1 as TargetIcon, TextBoxIcon$1 as TextBoxIcon, ThumbsDownIcon$1 as ThumbsDownIcon, ThumbsUpIcon$1 as ThumbsUpIcon, TitleSkeleton, ToggleButton, Tooltip, TrashIcon$1 as TrashIcon, Tree, TreeIcon$1 as TreeIcon, TypeaheadComboboxAddButton, TypeaheadComboboxCheckboxItem, TypeaheadComboboxFooter, TypeaheadComboboxInput, TypeaheadComboboxMenu, TypeaheadComboboxMenuItem, TypeaheadComboboxMultiSelectInput, TypeaheadComboboxRoot, TypeaheadComboboxSectionHeader, TypeaheadComboboxSelectedItem, TypeaheadComboboxSeparator, TypeaheadComboboxToggleButton, Typography, UnderlineIcon$1 as UnderlineIcon, UndoIcon$1 as UndoIcon, UploadIcon$1 as UploadIcon, UsbIcon$1 as UsbIcon, UserBadgeIcon$1 as UserBadgeIcon, UserCircleIcon$1 as UserCircleIcon, UserGroupIcon$1 as UserGroupIcon, UserIcon$1 as UserIcon, VectorTableIcon$1 as VectorTableIcon, VisibleIcon$1 as VisibleIcon, VisibleOffIcon$1 as VisibleOffIcon, WarningFillIcon$1 as WarningFillIcon, WarningIcon, Wizard, WizardControlled, WizardModal, WorkflowsIcon$1 as WorkflowsIcon, WorkspacesIcon$1 as WorkspacesIcon, XCircleFillIcon$1 as XCircleFillIcon, XCircleIcon$1 as XCircleIcon, ZoomInIcon$1 as ZoomInIcon, ZoomMarqueeSelection$1 as ZoomMarqueeSelection, ZoomOutIcon$1 as 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, getComboboxOptionItemWrapperStyles, getComboboxOptionLabelStyles, getContentOptions, getDarkModePortalStyles, getDialogComboboxOptionLabelWidth, getGlobalStyles, getKeyboardNavigationFunctions, getPaginationEmotionStyles, getRadioStyles, getShadowScrollStyles, getTabEmotionStyles, getValidationStateColor, getWrapperStyle, highlightFirstNonDisabledOption, highlightOption, importantify, isOptionDisabled, resetTabIndexToFocusedElement, useComboboxState, useDesignSystemFlags, useDesignSystemTheme, useLegacyNotification, useMultipleSelectionState, useThemedStyles, useTypeaheadComboboxContext, useWizardCurrentStep, visuallyHidden, withNotifications };
 //# sourceMappingURL=index.js.map