@databricks/design-system 1.12.13 → 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, W as WarningIcon, m as LoadingIcon, n as dropdownContentStyles, o as useUniqueId, p as Title$2, q as AccessibleContainer, r as ChevronLeftIcon, t as DU_BOIS_ENABLE_ANIMATION_CLASSNAME, w as lightColorList, x as Root$4, y as Trigger$2, z as getDefaultStyles, E as getPrimaryStyles, F as getDisabledStyles, G as useDesignSystemFlags } from './DropdownMenu-dbeef1b7.js';
-export { V as ApplyDesignSystemFlags, a7 as ColorVars, _ as CursorIcon, P as DesignSystemContext, N as DesignSystemEventProvider, K as DesignSystemEventProviderAnalyticsEventTypes, J as DesignSystemEventProviderComponentTypes, U as DesignSystemProvider, O as DesignSystemThemeContext, Q as DesignSystemThemeProvider, Y as DropdownMenu, $ as FaceFrownIcon, a0 as FaceNeutralIcon, a1 as FaceSmileIcon, a4 as LoadingStateContext, a2 as MegaphoneIcon, a3 as NewWindowIcon, Z as WithDesignSystemThemeHoc, a6 as getBottomOnlyShadowScrollStyles, H as getButtonEmotionStyles, a5 as getTypographyColor, X as useAntDConfigProviderContext, M as useDesignSystemEventComponentCallbacks } from './DropdownMenu-dbeef1b7.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, 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 { 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';
@@ -3348,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",
@@ -7173,6 +7205,9 @@ const ApplyGlobalStyles = () => {
   });
 };
 
+/**
+ * @deprecated Use `TypeaheadCombobox` instead.
+ */
 const AutoComplete = /* #__PURE__ */(() => {
   const AutoComplete = _ref => {
     let {
@@ -7310,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 {
@@ -7347,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",
@@ -7362,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 {
@@ -7399,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",
@@ -7414,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 {
@@ -7447,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.
@@ -7470,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",
@@ -7478,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",
@@ -7486,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
   }
 };
 
@@ -7511,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",
@@ -7519,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",
@@ -7527,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",
@@ -7535,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",
@@ -7543,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',
@@ -7564,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",
@@ -7572,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;
@@ -7758,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",
@@ -7766,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) {
@@ -7802,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",
@@ -7810,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",
@@ -7818,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 => {
@@ -8041,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
@@ -8050,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
@@ -8199,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;");
@@ -8289,140 +8324,940 @@ 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 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 RangePicker = /*#__PURE__*/forwardRef((props, ref) => {
-  const styles = useDatePickerStyles();
   const {
-    theme
-  } = useDesignSystemTheme();
+    overlayInnerStyle,
+    overlayStyle,
+    ...delegatedDangerouslySetAntdProps
+  } = dangerouslySetAntdProps || {};
   return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(DatePicker.RangePicker, {
-      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 TimePicker = /*#__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.TimePicker, {
-      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 QuarterPicker = /*#__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.QuarterPicker, {
-      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 || {})
-      }
+      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,
+      children: children
     })
   });
 });
-const WeekPicker = /*#__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.WeekPicker, {
-      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
     })
   });
 });
-const MonthPicker = /*#__PURE__*/forwardRef((props, ref) => {
-  const styles = useDatePickerStyles();
-  const {
-    theme
-  } = useDesignSystemTheme();
+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,
@@ -8733,6 +9568,153 @@ const Separator = props => {
   });
 };
 
+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) => {
   let {
     maxHeight = '100vh',
@@ -8788,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,
@@ -8814,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,
@@ -8838,7 +9848,17 @@ const getFooterStyles = theme => {
     padding: `${theme.spacing.sm}px ${theme.spacing.lg / 2}px ${theme.spacing.sm}px ${theme.spacing.lg / 2}px`,
     position: 'sticky',
     bottom: 0,
-    boxSizing: 'border-box'
+    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 () {
@@ -8865,14 +9885,14 @@ const getHintColumnStyles = (theme, disabled, textOverflowMode) => {
   }, 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 {
@@ -9065,161 +10085,14 @@ const DialogComboboxOptionListContextProvider = _ref => {
   });
 };
 
-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);
-  }
-};
-
-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)."; }
+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 {
@@ -9310,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 {
@@ -9395,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"
             })
@@ -9451,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();
@@ -9484,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;
@@ -9494,6 +10334,8 @@ const DialogComboboxOptionListSearch = /*#__PURE__*/forwardRef((_ref, forwardedR
     virtualized,
     children,
     hasWrapper,
+    controlledValue,
+    setControlledValue,
     ...restProps
   } = _ref;
   const {
@@ -9510,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);
@@ -9602,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", {
@@ -9632,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",
@@ -9647,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 {
@@ -9738,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"
           })
@@ -9778,25 +10621,13 @@ const DuboisDialogComboboxOptionListSelectItem = /*#__PURE__*/forwardRef((_ref,
         flexShrink: 0
       }
     })), jsxs("label", {
-      style: {
-        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)
-        } : {}),
-        ...(hintColumn && {
-          display: 'flex'
-        })
-      },
+      css: getComboboxOptionLabelStyles({
+        theme,
+        dangerouslyHideCheck,
+        textOverflowMode,
+        contentWidth,
+        hasHintColumn: Boolean(hintColumn)
+      }),
       children: [icon && jsx("span", {
         style: {
           position: 'relative',
@@ -9820,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 {
@@ -10281,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,
@@ -10330,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';
@@ -10343,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 {
@@ -10479,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, {})
             })
@@ -10560,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
@@ -10608,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 {
@@ -10814,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
@@ -10838,7 +11671,7 @@ 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 {
@@ -10984,7 +11817,7 @@ const getCommonRadioGroupStyles = _ref2 => {
     '& > label': {
       ...(useNewStyles && {
         [`&.${classNamePrefix}-radio-wrapper-disabled > span`]: {
-          color: theme.colors.textPrimary
+          color: theme.colors.actionDisabledText
         }
       })
     },
@@ -11278,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]: {
@@ -11818,12 +12652,18 @@ const getSwitchWithLabelStyles = _ref => {
           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',
-        outlineOffset: '1px',
         outlineColor: theme.colors.actionDefaultBorderFocus,
         [`.${clsPrefix}-switch-handle:before`]: {
           boxShadow: `0px 0px 0px 1px ${theme.colors.actionPrimaryBackgroundDefault}`
@@ -11848,11 +12688,14 @@ const getSwitchWithLabelStyles = _ref => {
         boxShadow: `0px 0px 0px 1px ${theme.colors.actionPrimaryBackgroundDefault}`
       },
       [`&.${clsPrefix}-switch-disabled`]: {
-        backgroundColor: theme.colors.actionDisabledBackground,
-        border: `1px solid ${theme.colors.actionDisabledBackground}`,
+        backgroundColor: theme.colors.actionDisabledText,
+        border: `1px solid ${theme.colors.actionDisabledText}`,
         [`.${clsPrefix}-switch-handle:before`]: {
-          boxShadow: `0px 0px 0px 1px ${theme.colors.actionDisabledBackground}`
+          boxShadow: `0px 0px 0px 1px ${theme.colors.actionDisabledText}`
         }
+      },
+      [`&:focus-visible`]: {
+        outlineOffset: '1px'
       }
     },
     [`.${clsPrefix}-switch-handle:before`]: {
@@ -11866,7 +12709,8 @@ const getSwitchWithLabelStyles = _ref => {
     },
     [`.${clsPrefix}-click-animating-node`]: {
       animation: 'none'
-    }
+    },
+    opacity: 1
   };
   const importantStyles = importantify(styles);
   return /*#__PURE__*/css(importantStyles, process.env.NODE_ENV === "production" ? "" : ";label:getSwitchWithLabelStyles;");
@@ -11986,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 {
@@ -12053,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) {
@@ -12110,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:
@@ -12162,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;
@@ -12266,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 && {
@@ -12299,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",
@@ -12307,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 {
@@ -12388,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 {
@@ -12522,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 {
@@ -12558,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;
@@ -12659,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,
@@ -12703,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 {
@@ -12758,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({
@@ -12819,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;
@@ -12830,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;
@@ -12861,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;
@@ -13055,6 +13904,53 @@ DuboisTypeaheadComboboxFooter.defaultProps = {
 };
 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 {
     name,
@@ -13171,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);
@@ -13197,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,
@@ -13618,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 = {
@@ -13634,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",
@@ -13642,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",
@@ -13650,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",
@@ -13658,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 {
@@ -13674,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
@@ -13682,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 && {
@@ -13718,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}`;
@@ -13986,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`;
@@ -14108,20 +15016,41 @@ const Pagination = function Pagination(_ref) {
     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,
-      hideOnSinglePage: hideOnSinglePage,
-      ...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
+      })
     })
   });
 };
@@ -14131,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 {
@@ -14145,7 +15074,8 @@ const CursorPagination = function CursorPagination(_ref2) {
       options: pageSizeOptions,
       default: defaultPageSize,
       getOptionText: getPageSizeOptionText,
-      onChange: onPageSizeChange
+      onChange: onPageSizeChange,
+      ariaLabel = 'Select page size'
     } = {}
   } = _ref2;
   const {
@@ -14164,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 => {
@@ -14320,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
@@ -14467,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",
@@ -14551,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",
@@ -14559,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 {
@@ -14595,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,
@@ -14716,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,
@@ -14727,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 => {
@@ -14810,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'
         })
@@ -14988,7 +15930,8 @@ const InfoPopover = _ref => {
     popoverProps,
     iconTitle,
     iconProps,
-    isKeyboardFocusable = true
+    isKeyboardFocusable = true,
+    ariaLabel = 'More details'
   } = _ref;
   const {
     theme
@@ -15014,6 +15957,7 @@ const InfoPopover = _ref => {
         ,
         tabIndex: isKeyboardFocusable ? 0 : -1,
         onKeyDown: handleKeyDown,
+        "aria-label": ariaLabel,
         children: jsx(InfoCircleOutlined, {
           "aria-hidden": "false",
           title: iconTitle,
@@ -15175,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",
@@ -15190,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 {
@@ -15456,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,
@@ -15538,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 }
@@ -15692,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 {
@@ -15724,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",
@@ -15903,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,
@@ -15916,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,
@@ -15930,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
@@ -15943,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`;
@@ -16015,7 +16962,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 } : {
   name: "1kplxg4-SplitButton",
   styles: "display:inline-flex;position:relative;vertical-align:middle;label:SplitButton;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
 };
 const SplitButton = props => {
   const {
@@ -16050,6 +16997,7 @@ const SplitButton = props => {
       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,
@@ -16099,7 +17047,7 @@ const Steps = /* #__PURE__ */(() => {
   return Steps;
 })();
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$1() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { 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]: {
@@ -16119,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",
@@ -16127,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;
@@ -16158,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,
@@ -16165,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,
@@ -16223,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,
@@ -16835,9 +17786,17 @@ 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]: {
@@ -16967,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]: {
@@ -17057,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, 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, 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, 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, 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, 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, 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, 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