@databricks/design-system 1.12.14 → 1.12.15

package/dist/index.js

@@ -1,7 +1,7 @@
-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 { u as useDesignSystemTheme, I as Icon, D as DesignSystemAntDConfigProvider, R as RestoreAntDDefaultClsPrefix, g as getAnimationCss, C as CloseIcon, a as getDarkModePortalStyles, T as Typography, b as ChevronRightIcon, L as LoadingState, v as visuallyHidden, s as safex, i as importantify, c as useUniqueId, d as useDesignSystemContext, e as CheckIcon, S as Spinner, B as Button, f as Input, 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 useDesignSystemEventComponentCallbacks, q as DesignSystemEventProviderComponentTypes, r as DesignSystemEventProviderAnalyticsEventTypes, t as useNotifyOnFirstView, w as DU_BOIS_ENABLE_ANIMATION_CLASSNAME, x as lightColorList, y as getDefaultStyles, z as getPrimaryStyles, E as getDisabledStyles, F as useDesignSystemFlags, G as Stepper } from './Stepper-a0fb4d9b.js';
+export { P as ApplyDesignSystemFlags, a4 as ColorVars, V as CursorIcon, M as DesignSystemContext, J as DesignSystemEventProvider, O as DesignSystemProvider, K as DesignSystemThemeContext, N as DesignSystemThemeProvider, X as FaceFrownIcon, Y as FaceNeutralIcon, Z as FaceSmileIcon, a1 as LoadingStateContext, _ as MegaphoneIcon, $ as NewWindowIcon, U as WithDesignSystemThemeHoc, a3 as getBottomOnlyShadowScrollStyles, H as getButtonEmotionStyles, a0 as getInputStyles, a2 as getTypographyColor, Q as useAntDConfigProviderContext } from './Stepper-a0fb4d9b.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, 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 { 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, Select as Select$1, Radio as Radio$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';
@@ -767,7 +767,6 @@ function SvgBracketsXIcon(props) {
       })]
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "BracketsXIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
           d: "M0 0h16v16H0z"
@@ -2138,7 +2137,6 @@ function SvgDotsCircleIcon(props) {
       })]
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "DotsCircleIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
           d: "M0 0h16v16H0z"
@@ -2625,7 +2623,6 @@ function SvgFolderCloudFilledIcon(props) {
       })]
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "FolderCloudFilledIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
           d: "M0 0h16v16H0z"
@@ -2664,7 +2661,6 @@ function SvgFolderCloudIcon(props) {
       })]
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "FolderCloudIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
           d: "M0 0h16v16H0z"
@@ -2751,7 +2747,6 @@ function SvgFontIcon(props) {
       })
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "FontIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
           d: "M0 0h16v16H0z"
@@ -2862,7 +2857,6 @@ function SvgFunctionIcon(props) {
       })
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "FunctionIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
           d: "M16 0H0v16h16z"
@@ -2927,7 +2921,6 @@ function SvgGearIcon(props) {
       })]
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "GearIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
           d: "M0 0h16v16H0z"
@@ -3016,7 +3009,6 @@ function SvgGlobeIcon(props) {
       })
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "GlobeIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
           d: "M0 16h16V0H0z"
@@ -3175,7 +3167,6 @@ function SvgHistoryIcon(props) {
       })]
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "HistoryIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
           d: "M0 0h16v16H0z"
@@ -4030,7 +4021,6 @@ function SvgModelsIcon(props) {
       })
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "ModelsIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
           d: "M0 0h16v16H0z"
@@ -4750,7 +4740,6 @@ function SvgQueryIcon(props) {
       })]
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "QueryIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
           d: "M0 0h16v16H0z"
@@ -4900,7 +4889,6 @@ function SvgRedoIcon(props) {
       })
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "RedoIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
           d: "M0 16h16V0H0z"
@@ -4971,6 +4959,42 @@ const RobotIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
 RobotIcon.displayName = 'RobotIcon';
 var RobotIcon$1 = RobotIcon;
 
+function SvgRunningIcon(props) {
+  return jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 16 16",
+    ...props,
+    children: [jsx("g", {
+      clipPath: "url(#RunningIcon_svg__a)",
+      children: jsx("path", {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M8 14.5A6.5 6.5 0 0 0 14.5 8H16a8 8 0 0 1-8 8v-1.5ZM0 8a8 8 0 0 1 8-8v1.5A6.5 6.5 0 0 0 1.5 8H0Z",
+        clipRule: "evenodd"
+      })
+    }), jsx("defs", {
+      children: jsx("clipPath", {
+        children: jsx("path", {
+          fill: "#fff",
+          d: "M0 0h16v16H0z"
+        })
+      })
+    })]
+  });
+}
+const RunningIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return jsx(Icon, {
+    ref: forwardedRef,
+    ...props,
+    component: SvgRunningIcon
+  });
+});
+RunningIcon.displayName = 'RunningIcon';
+var RunningIcon$1 = RunningIcon;
+
 function SvgSaveIcon(props) {
   return jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -5000,6 +5024,32 @@ const SaveIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
 SaveIcon.displayName = 'SaveIcon';
 var SaveIcon$1 = SaveIcon;
 
+function SvgSchemaIcon(props) {
+  return jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 16 16",
+    ...props,
+    children: jsx("path", {
+      fill: "#5F7281",
+      fillRule: "evenodd",
+      d: "M2.75 0A.75.75 0 0 0 2 .75v3a.75.75 0 0 0 .75.75h1v7a2.75 2.75 0 0 0 2.75 2.75H7v1c0 .414.336.75.75.75h5.5a.75.75 0 0 0 .75-.75v-3a.75.75 0 0 0-.75-.75h-5.5a.75.75 0 0 0-.75.75v.5h-.5c-.69 0-1.25-.56-1.25-1.25V8.45c.375.192.8.3 1.25.3H7v.75c0 .414.336.75.75.75h5.5A.75.75 0 0 0 14 9.5v-3a.75.75 0 0 0-.75-.75h-5.5A.75.75 0 0 0 7 6.5v.75h-.5c-.69 0-1.25-.56-1.25-1.25V4.5h8a.75.75 0 0 0 .75-.75v-3a.75.75 0 0 0-.75-.75H2.75Zm.75 3V1.5h9V3h-9Zm5 10v1.5h4V13h-4Zm0-4.25v-1.5h4v1.5h-4Z",
+      clipRule: "evenodd"
+    })
+  });
+}
+const SchemaIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return jsx(Icon, {
+    ref: forwardedRef,
+    ...props,
+    component: SvgSchemaIcon
+  });
+});
+SchemaIcon.displayName = 'SchemaIcon';
+var SchemaIcon$1 = SchemaIcon;
+
 function SvgSchoolIcon(props) {
   return jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -5044,7 +5094,6 @@ function SvgSearchIcon(props) {
       })
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "SearchIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
           d: "M0 0h16v16H0z"
@@ -5301,7 +5350,6 @@ function SvgSortAlphabeticalAscendingIcon(props) {
       })]
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "SortAlphabeticalAscendingIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
           d: "M0 0h16v16H0z"
@@ -5340,7 +5388,6 @@ function SvgSortAlphabeticalDescendingIcon(props) {
       })]
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "SortAlphabeticalDescendingIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
           d: "M0 0h16v16H0z"
@@ -5381,7 +5428,6 @@ function SvgSortAlphabeticalLeftIcon(props) {
       })]
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "SortAlphabeticalLeftIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
           d: "M0 0h16v16H0z"
@@ -5422,7 +5468,6 @@ function SvgSortAlphabeticalRightIcon(props) {
       })]
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "SortAlphabeticalRightIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
           d: "M0 0h16v16H0z"
@@ -5515,7 +5560,7 @@ const SortUnsortedIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
 SortUnsortedIcon.displayName = 'SortUnsortedIcon';
 var SortUnsortedIcon$1 = SortUnsortedIcon;
 
-function SvgSparkleIcon(props) {
+function SvgSparkleIcon$1(props) {
   return jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
@@ -5533,7 +5578,7 @@ const SparkleIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   return jsx(Icon, {
     ref: forwardedRef,
     ...props,
-    component: SvgSparkleIcon
+    component: SvgSparkleIcon$1
   });
 });
 SparkleIcon.displayName = 'SparkleIcon';
@@ -6136,7 +6181,6 @@ function SvgTableViewIcon(props) {
       })]
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "TableViewIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
           d: "M0 0h16v16H0z"
@@ -6155,6 +6199,29 @@ const TableViewIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
 TableViewIcon.displayName = 'TableViewIcon';
 var TableViewIcon$1 = TableViewIcon;
 
+function SvgTagIcon(props) {
+  return jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 -960 960 960",
+    ...props,
+    children: jsx("path", {
+      fill: "currentColor",
+      d: "M570-104q-23 23-57 23t-57-23L104-456q-11-11-17.5-26T80-514v-286q0-33 23.5-56.5T160-880h286q17 0 32 6.5t26 17.5l352 353q23 23 23 56.5T856-390L570-104Zm-57-56 286-286-353-354H160v286l353 354ZM260-640q25 0 42.5-17.5T320-700q0-25-17.5-42.5T260-760q-25 0-42.5 17.5T200-700q0 25 17.5 42.5T260-640ZM160-800Z"
+    })
+  });
+}
+const TagIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return jsx(Icon, {
+    ref: forwardedRef,
+    ...props,
+    component: SvgTagIcon
+  });
+});
+TagIcon.displayName = 'TagIcon';
+var TagIcon$1 = TagIcon;
+
 function SvgTargetIcon(props) {
   return jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -6223,7 +6290,6 @@ function SvgThumbsDownIcon(props) {
       })
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "ThumbsDownIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
           d: "M0 0h16v16H0z"
@@ -6260,7 +6326,6 @@ function SvgThumbsUpIcon(props) {
       })
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "ThumbsUpIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
           d: "M0 0h16v16H0z"
@@ -6373,7 +6438,6 @@ function SvgUndoIcon(props) {
       })
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "UndoIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
           d: "M16 16H0V0h16z"
@@ -6528,7 +6592,7 @@ const UserGroupIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
 UserGroupIcon.displayName = 'UserGroupIcon';
 var UserGroupIcon$1 = UserGroupIcon;
 
-function SvgUserIcon(props) {
+function SvgUserIcon$1(props) {
   return jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
@@ -6548,7 +6612,7 @@ const UserIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   return jsx(Icon, {
     ref: forwardedRef,
     ...props,
-    component: SvgUserIcon
+    component: SvgUserIcon$1
   });
 });
 UserIcon.displayName = 'UserIcon';
@@ -6629,7 +6693,6 @@ function SvgVisibleIcon(props) {
       })]
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "VisibleIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
           d: "M0 0h16v16H0z"
@@ -6670,7 +6733,6 @@ function SvgVisibleOffIcon(props) {
       })]
     }), jsx("defs", {
       children: jsx("clipPath", {
-        id: "VisibleOffIcon_svg__a",
         children: jsx("path", {
           fill: "#fff",
           d: "M0 0h16v16H0z"
@@ -7233,6 +7295,190 @@ const AutoComplete = /* #__PURE__ */(() => {
   return AutoComplete;
 })();
 
+function SvgDatabricksIcon(props) {
+  return jsxs("svg", {
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [jsx("rect", {
+      width: "24",
+      height: "24",
+      fill: "#FF3621"
+    }), jsx("path", {
+      d: "m18.8 10.515-6.8228 3.945-7.3059-4.215-0.35138 0.195v3.06l7.6573 4.41 6.8228-3.93v1.62l-6.8228 3.945-7.3059-4.215-0.35138 0.195v0.525l7.6573 4.41 7.6427-4.41v-3.06l-0.3514-0.195-7.2913 4.2-6.8374-3.93v-1.62l6.8374 3.93 7.6427-4.41v-3.015l-0.3807-0.225-7.262 4.185-6.486-3.72 6.486-3.735 5.3294 3.075 0.4685-0.27v-0.375l-5.7979-3.345-7.6573 4.41v0.48l7.6573 4.41 6.8228-3.945v1.62z",
+      fill: "#fff"
+    })]
+  });
+}
+
+function SvgSparkleIcon(props) {
+  return jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: [jsx("path", {
+      fill: "#5F7281",
+      d: "M0 4a4 4 0 0 1 4-4h16a4 4 0 0 1 4 4v16a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4Z"
+    }), jsx("path", {
+      fill: "#E8ECF0",
+      d: "M12 5c.42 0 .782.3.86.713l.308 1.631a4.375 4.375 0 0 0 3.488 3.488l1.631.308a.875.875 0 0 1 0 1.72l-1.631.308a4.375 4.375 0 0 0-3.488 3.488l-.308 1.631a.875.875 0 0 1-1.72 0l-.308-1.631a4.375 4.375 0 0 0-3.488-3.488l-1.631-.308a.875.875 0 0 1 0-1.72l1.631-.308a4.375 4.375 0 0 0 3.488-3.488l.308-1.631A.875.875 0 0 1 12 5Zm0 4.296A6.13 6.13 0 0 1 9.296 12 6.131 6.131 0 0 1 12 14.704 6.131 6.131 0 0 1 14.704 12 6.131 6.131 0 0 1 12 9.296Z"
+    })]
+  });
+}
+
+function SvgUserIcon(props) {
+  return jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "22",
+    fill: "none",
+    viewBox: "0 0 24 22",
+    ...props,
+    children: jsx("path", {
+      fill: "#5F7281",
+      d: "M12 1.5a4.875 4.875 0 1 0 0 9.75 4.875 4.875 0 0 0 0-9.75Zm0 12c-4.15 0-7.85 1.927-10.253 4.93-.16.2-.247.448-.247.704v2.241c0 .621.504 1.125 1.125 1.125h18.75c.621 0 1.125-.504 1.125-1.125v-2.241c0-.256-.087-.504-.247-.703A13.103 13.103 0 0 0 12 13.5Z"
+    })
+  });
+}
+
+function getAvatarEmotionStyles(theme) {
+  return {
+    abbr: {
+      color: theme.colors.textSecondary,
+      textDecoration: 'none'
+    },
+    container: {
+      alignItems: 'center',
+      display: 'flex',
+      gap: theme.spacing.sm
+    },
+    default: {
+      height: theme.spacing.lg,
+      width: theme.spacing.lg
+    },
+    icon: {
+      alignItems: 'center',
+      backgroundColor: theme.colors.tagDefault,
+      display: 'flex',
+      justifyContent: 'center'
+    },
+    img: {
+      objectFit: 'cover',
+      objectPosition: 'center'
+    },
+    system: {
+      borderRadius: theme.borders.borderRadiusMd,
+      overflow: 'hidden'
+    },
+    user: {
+      borderRadius: '100%',
+      overflow: 'hidden'
+    },
+    userIcon: {
+      alignItems: 'flex-end'
+    }
+  };
+}
+function AvatarImg(props) {
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const styles = getAvatarEmotionStyles(theme);
+  switch (props.type) {
+    case 'entity':
+      if ('src' in props && props.src) {
+        return jsx("img", {
+          css: [styles.default, styles.img, styles.system, process.env.NODE_ENV === "production" ? "" : ";label:AvatarImg;"],
+          src: props.src,
+          alt: props.label
+        });
+      } else if ('icon' in props && props.icon) {
+        return jsx("div", {
+          css: [styles.default, styles.system, styles.icon, process.env.NODE_ENV === "production" ? "" : ";label:AvatarImg;"],
+          role: "img",
+          "aria-label": props.label,
+          children: props.icon
+        });
+      }
+      return jsx("div", {
+        css: [styles.default, styles.system, styles.icon, process.env.NODE_ENV === "production" ? "" : ";label:AvatarImg;"],
+        role: "img",
+        "aria-label": props.label,
+        children: jsx(SvgSparkleIcon, {})
+      });
+    case 'user':
+      if ('label' in props && props.label.trim()) {
+        if (props.src) {
+          return jsx("img", {
+            css: [styles.default, styles.img, styles.user, process.env.NODE_ENV === "production" ? "" : ";label:AvatarImg;"],
+            src: props.src,
+            alt: props.label
+          });
+        } else if (props.icon) {
+          return jsx("div", {
+            css: [styles.default, styles.user, styles.icon, process.env.NODE_ENV === "production" ? "" : ";label:AvatarImg;"],
+            role: "img",
+            "aria-label": props.label,
+            children: props.icon
+          });
+        }
+        // display first initial of name when no image / icon is provided
+        return jsx("div", {
+          css: [styles.default, styles.user, styles.icon, process.env.NODE_ENV === "production" ? "" : ";label:AvatarImg;"],
+          children: jsx("abbr", {
+            css: styles.abbr,
+            title: props.label.substring(0, 1),
+            children: props.label.substring(0, 1)
+          })
+        });
+      }
+
+      // default to user icon when no user info is provided
+      return jsx("div", {
+        css: [styles.default, styles.user, styles.icon, styles.userIcon, process.env.NODE_ENV === "production" ? "" : ";label:AvatarImg;"],
+        role: "img",
+        "aria-label": "user",
+        children: jsx(SvgUserIcon, {})
+      });
+  }
+}
+function Avatar(props) {
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const styles = getAvatarEmotionStyles(theme);
+  if ('displayLabel' in props && props.displayLabel) {
+    return jsxs("div", {
+      css: styles.container,
+      children: [jsx(AvatarImg, {
+        ...props
+      }), jsxs("div", {
+        children: [jsx(Typography.Text, {
+          bold: !Boolean(props.caption),
+          children: props.label
+        }), Boolean(props.caption) && jsx(Typography.Hint, {
+          children: props.caption
+        })]
+      })]
+    });
+  }
+  return jsx(AvatarImg, {
+    ...props
+  });
+}
+function DBAssistantAvatar(props) {
+  return jsx(Avatar, {
+    type: "entity",
+    label: "Assistant",
+    caption: props.caption,
+    displayLabel: props.displayLabel,
+    icon: jsx(SvgDatabricksIcon, {})
+  });
+}
+
 const Breadcrumb = /* #__PURE__ */(() => {
   const Breadcrumb = _ref => {
     let {
@@ -7634,6 +7880,7 @@ const Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
   } = useDesignSystemTheme();
   const [shouldBeFocusable, setShouldBeFocusable] = useState(false);
   const tableContentRef = useRef(null);
+  const useReflowWrapStyles = safex('databricks.fe.wexp.enableReflowWrapStyles', false);
   useImperativeHandle(ref, () => tableContentRef.current);
   useEffect(() => {
     const ref = tableContentRef.current;
@@ -7671,7 +7918,9 @@ const Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
         ['--table-spacing-sm']: `${theme.spacing.sm}px`,
         ['--table-spacing-xs']: `${theme.spacing.xs}px`
       },
-      css: tableStyles$1.tableWrapper,
+      css: [tableStyles$1.tableWrapper, /*#__PURE__*/css(useReflowWrapStyles && {
+        minHeight: !empty && pagination ? 150 : 100
+      }, process.env.NODE_ENV === "production" ? "" : ";label:Table;"), process.env.NODE_ENV === "production" ? "" : ";label:Table;"],
       className: classnames({
         'table-isScrollable': scrollable,
         'table-isGrid': grid
@@ -8280,7 +8529,7 @@ const DuboisCheckbox = /*#__PURE__*/forwardRef(function Checkbox(_ref2, ref) {
         indeterminate: isChecked === null
         // Individual checkboxes don't depend on isHorizontal flag, orientation and spacing is handled by end users
         ,
-        css: /*#__PURE__*/css(importantify(getCheckboxEmotionStyles(clsPrefix, theme, false)), process.env.NODE_ENV === "production" ? "" : ";label:DuboisCheckbox;"),
+        css: /*#__PURE__*/css(importantify(getCheckboxEmotionStyles(clsPrefix, theme, false)), process.env.NODE_ENV === "production" ? "" : ";label:Checkbox;"),
         style: style,
         "aria-checked": isChecked === null ? 'mixed' : isChecked,
         ...restProps,
@@ -8355,8 +8604,7 @@ const Tooltip = _ref => {
     'aria-relevant': 'additions'
   };
   if (dataTestId) {
-    // TODO FEINF-1337 - this should turn into data-testid
-    titleProps['data-test-id'] = dataTestId;
+    titleProps['data-testid'] = dataTestId;
   }
   const liveTitle = title && /*#__PURE__*/React__default.isValidElement(title) ? /*#__PURE__*/React__default.cloneElement(title, titleProps) : jsx("span", {
     ...titleProps,
@@ -8441,6 +8689,56 @@ const InfoTooltip = _ref => {
   });
 };
 
+const infoIconStyles = theme => ({
+  display: 'inline-flex',
+  paddingLeft: theme.spacing.xs,
+  color: theme.colors.textSecondary,
+  pointerEvents: 'all'
+});
+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),
+      onClick: e => {
+        if (props.disabled) {
+          e.stopPropagation();
+        }
+      },
+      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;
+};
+
 const Root$5 = DropdownMenu$1.Root; // Behavioral component only
 
 const Content$5 = /*#__PURE__*/forwardRef(function Content(_ref, ref) {
@@ -8491,14 +8789,69 @@ const SubContent$1 = /*#__PURE__*/forwardRef(function Content(_ref2, ref) {
   const {
     getPopupContainer
   } = useDesignSystemContext();
+  const [contentFitsInViewport, setContentFitsInViewport] = React__default.useState(true);
+  const [dataSide, setDataSide] = React__default.useState(null);
+  const {
+    isOpen
+  } = useSubContext();
+  const useResponsiveDropdownPosition = safex('databricks.fe.designsystem.useResponsiveDropdownPosition', false);
+  const elemRef = useRef(null);
+  useImperativeHandle(ref, () => elemRef.current);
+  const checkAvailableWidth = useCallback(() => {
+    if (useResponsiveDropdownPosition) {
+      if (elemRef.current) {
+        const elemStyle = getComputedStyle(elemRef.current);
+        const availableWidth = parseFloat(elemStyle.getPropertyValue('--radix-dropdown-menu-content-available-width'));
+        const elemWidth = elemRef.current.offsetWidth;
+        const openOnSide = elemRef.current.getAttribute('data-side');
+        if (openOnSide === 'left' || openOnSide === 'right') {
+          setDataSide(openOnSide);
+        } else {
+          setDataSide(null);
+        }
+        if (availableWidth < elemWidth) {
+          setContentFitsInViewport(false);
+        } else {
+          setContentFitsInViewport(true);
+        }
+      }
+    }
+  }, [useResponsiveDropdownPosition]);
+  useEffect(() => {
+    if (useResponsiveDropdownPosition) {
+      window.addEventListener('resize', checkAvailableWidth);
+      checkAvailableWidth();
+      return () => {
+        window.removeEventListener('resize', checkAvailableWidth);
+      };
+    }
+    return;
+  }, [useResponsiveDropdownPosition, checkAvailableWidth]);
+  useEffect(() => {
+    if (useResponsiveDropdownPosition) {
+      if (isOpen) {
+        setTimeout(() => {
+          checkAvailableWidth();
+        }, 25);
+      }
+    }
+  }, [isOpen, useResponsiveDropdownPosition, checkAvailableWidth]);
+  let transformCalc = `calc(var(--radix-dropdown-menu-content-available-width) + var(--radix-dropdown-menu-trigger-width) * -1)`;
+  if (dataSide === 'left') {
+    transformCalc = `calc(var(--radix-dropdown-menu-trigger-width) - var(--radix-dropdown-menu-content-available-width))`;
+  }
+  const responsiveCss = `  
+    transform-origin: var(--radix-dropdown-menu-content-transform-origin) !important;
+    transform: translateX(${transformCalc}) !important;
+`;
   return jsx(DropdownMenu$1.Portal, {
     container: getPopupContainer && getPopupContainer(),
     children: jsx(DropdownMenu$1.SubContent, {
-      ref: ref,
+      ref: elemRef,
       loop: true,
       css: [contentStyles$1, {
         minWidth
-      }, process.env.NODE_ENV === "production" ? "" : ";label:SubContent;"],
+      }, useResponsiveDropdownPosition ? contentFitsInViewport ? '' : responsiveCss : '', process.env.NODE_ENV === "production" ? "" : ";label:Content;"],
       sideOffset: -2,
       alignOffset: -5,
       ...props,
@@ -8584,7 +8937,7 @@ const SubTrigger$1 = /*#__PURE__*/forwardRef(function TriggerItem(_ref7, ref) {
       '&[data-state="open"]': {
         backgroundColor: theme.colors.actionTertiaryBackgroundHover
       }
-    }), process.env.NODE_ENV === "production" ? "" : ";label:SubTrigger;"],
+    }), process.env.NODE_ENV === "production" ? "" : ";label:TriggerItem;"],
     ...props,
     children: [getNewChildren(children, props, disabledReason, subTriggerRef), jsx(HintColumn, {
       css: theme => ({
@@ -8687,18 +9040,44 @@ const RadioItem$1 = /*#__PURE__*/forwardRef(function RadioItem(_ref11, ref) {
     children: getNewChildren(children, props, disabledReason, radioItemRef)
   });
 });
+const SubContext = /*#__PURE__*/createContext({
+  isOpen: false
+});
+const useSubContext = () => React__default.useContext(SubContext);
+const Sub$1 = _ref12 => {
+  var _props$defaultOpen;
+  let {
+    children,
+    onOpenChange,
+    ...props
+  } = _ref12;
+  const [isOpen, setIsOpen] = React__default.useState((_props$defaultOpen = props.defaultOpen) !== null && _props$defaultOpen !== void 0 ? _props$defaultOpen : false);
+  const handleOpenChange = isOpen => {
+    onOpenChange === null || onOpenChange === void 0 || onOpenChange(isOpen);
+    setIsOpen(isOpen);
+  };
+  return jsx(DropdownMenu$1.Sub, {
+    onOpenChange: handleOpenChange,
+    ...props,
+    children: jsx(SubContext.Provider, {
+      value: {
+        isOpen
+      },
+      children: children
+    })
+  });
+};
 
 // 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) {
+const HintColumn = /*#__PURE__*/forwardRef(function HintColumn(_ref13, ref) {
   let {
     children,
     ...props
-  } = _ref12;
+  } = _ref13;
   return jsx("div", {
     ref: ref,
     css: [metaTextStyles, "margin-left:auto;" + (process.env.NODE_ENV === "production" ? "" : ";label:HintColumn;")],
@@ -8706,11 +9085,11 @@ const HintColumn = /*#__PURE__*/forwardRef(function HintColumn(_ref12, ref) {
     children: children
   });
 });
-const HintRow$1 = /*#__PURE__*/forwardRef(function HintRow(_ref13, ref) {
+const HintRow$1 = /*#__PURE__*/forwardRef(function HintRow(_ref14, ref) {
   let {
     children,
     ...props
-  } = _ref13;
+  } = _ref14;
   return jsx("div", {
     ref: ref,
     css: [metaTextStyles, "min-width:100%;" + (process.env.NODE_ENV === "production" ? "" : ";label:HintRow;")],
@@ -8718,11 +9097,11 @@ const HintRow$1 = /*#__PURE__*/forwardRef(function HintRow(_ref13, ref) {
     children: children
   });
 });
-const IconWrapper = /*#__PURE__*/forwardRef(function IconWrapper(_ref14, ref) {
+const IconWrapper = /*#__PURE__*/forwardRef(function IconWrapper(_ref15, ref) {
   let {
     children,
     ...props
-  } = _ref14;
+  } = _ref15;
   return jsx("div", {
     ref: ref,
     css: theme => ({
@@ -8734,44 +9113,6 @@ const IconWrapper = /*#__PURE__*/forwardRef(function IconWrapper(_ref14, ref) {
     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 = {
@@ -8866,12 +9207,6 @@ const dangerItemStyles = theme => ({
     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)
@@ -8925,15 +9260,21 @@ const Sub = ContextMenuSub;
 const SubTrigger = _ref => {
   let {
     children,
+    disabledReason,
+    withChevron,
     ...props
   } = _ref;
   const {
     theme
   } = useDesignSystemTheme();
-  return jsx(ContextMenuSubTrigger, {
+  const ref = useRef(null);
+  return jsxs(ContextMenuSubTrigger, {
     ...props,
     css: dropdownItemStyles(theme),
-    children: children
+    ref: ref,
+    children: [getNewChildren(children, props, disabledReason, ref), withChevron && jsx(ContextMenu.Hint, {
+      children: jsx(ChevronRightIcon, {})
+    })]
   });
 };
 const Content$4 = _ref2 => {
@@ -8985,28 +9326,34 @@ const SubContent = _ref3 => {
 const Item = _ref4 => {
   let {
     children,
+    disabledReason,
     ...props
   } = _ref4;
   const {
     theme
   } = useDesignSystemTheme();
+  const ref = useRef(null);
   return jsx(ContextMenuItem, {
     ...props,
     css: dropdownItemStyles(theme),
-    children: children
+    ref: ref,
+    children: getNewChildren(children, props, disabledReason, ref)
   });
 };
 const CheckboxItem = _ref5 => {
   let {
     children,
+    disabledReason,
     ...props
   } = _ref5;
   const {
     theme
   } = useDesignSystemTheme();
+  const ref = useRef(null);
   return jsxs(ContextMenuCheckboxItem, {
     ...props,
     css: dropdownItemStyles(theme),
+    ref: ref,
     children: [jsx(ContextMenuItemIndicator, {
       css: itemIndicatorStyles(theme),
       children: jsx(CheckIcon, {})
@@ -9014,17 +9361,19 @@ const CheckboxItem = _ref5 => {
       style: {
         width: theme.general.iconFontSize + theme.spacing.xs
       }
-    }), children]
+    }), getNewChildren(children, props, disabledReason, ref)]
   });
 };
 const RadioItem = _ref6 => {
   let {
     children,
+    disabledReason,
     ...props
   } = _ref6;
   const {
     theme
   } = useDesignSystemTheme();
+  const ref = useRef(null);
   return jsxs(ContextMenuRadioItem, {
     ...props,
     css: [dropdownItemStyles(theme), {
@@ -9032,10 +9381,11 @@ const RadioItem = _ref6 => {
         paddingLeft: theme.general.iconFontSize + theme.spacing.xs + theme.spacing.sm
       }
     }, process.env.NODE_ENV === "production" ? "" : ";label:RadioItem;"],
+    ref: ref,
     children: [jsx(ContextMenuItemIndicator, {
       css: itemIndicatorStyles(theme),
       children: jsx(CheckIcon, {})
-    }), children]
+    }), getNewChildren(children, props, disabledReason, ref)]
   });
 };
 const Label$1 = _ref7 => {
@@ -9168,20 +9518,48 @@ function useDatePickerStyles() {
   const clsPrefix = getPrefixedClassName('picker');
   return getEmotionStyles(clsPrefix, theme);
 }
+const AccessibilityWrapper = _ref => {
+  let {
+    children,
+    ariaLive = 'assertive',
+    ...restProps
+  } = _ref;
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current) {
+      const inputs = ref.current.querySelectorAll('.du-bois-light-picker-input > input');
+      inputs.forEach(input => input.setAttribute('aria-live', ariaLive));
+    }
+  }, [ref, ariaLive]);
+  return jsx("div", {
+    ...restProps,
+    ref: ref,
+    children: children
+  });
+};
 const DuboisDatePicker = /*#__PURE__*/forwardRef((props, ref) => {
   const styles = useDatePickerStyles();
   const {
     theme
   } = useDesignSystemTheme();
+  const {
+    ariaLive,
+    wrapperDivProps,
+    ...restProps
+  } = props;
   return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(DatePicker, {
-      css: styles,
-      ref: ref,
-      ...props,
-      popupStyle: {
-        ...getDropdownStyles$1(theme),
-        ...(props.popupStyle || {})
-      }
+    children: jsx(AccessibilityWrapper, {
+      ...wrapperDivProps,
+      ariaLive: ariaLive,
+      children: jsx(DatePicker, {
+        css: styles,
+        ref: ref,
+        ...restProps,
+        popupStyle: {
+          ...getDropdownStyles$1(theme),
+          ...(props.popupStyle || {})
+        }
+      })
     })
   });
 });
@@ -9190,15 +9568,24 @@ const RangePicker = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     theme
   } = useDesignSystemTheme();
+  const {
+    ariaLive,
+    wrapperDivProps,
+    ...restProps
+  } = props;
   return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(DatePicker.RangePicker, {
-      css: styles,
-      ...props,
-      ref: ref,
-      popupStyle: {
-        ...getDropdownStyles$1(theme),
-        ...(props.popupStyle || {})
-      }
+    children: jsx(AccessibilityWrapper, {
+      ...wrapperDivProps,
+      ariaLive: ariaLive,
+      children: jsx(DatePicker.RangePicker, {
+        css: styles,
+        ...restProps,
+        ref: ref,
+        popupStyle: {
+          ...getDropdownStyles$1(theme),
+          ...(props.popupStyle || {})
+        }
+      })
     })
   });
 });
@@ -9207,15 +9594,24 @@ const TimePicker = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     theme
   } = useDesignSystemTheme();
+  const {
+    ariaLive,
+    wrapperDivProps,
+    ...restProps
+  } = props;
   return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(DatePicker.TimePicker, {
-      css: styles,
-      ...props,
-      ref: ref,
-      popupStyle: {
-        ...getDropdownStyles$1(theme),
-        ...(props.popupStyle || {})
-      }
+    children: jsx(AccessibilityWrapper, {
+      ...wrapperDivProps,
+      ariaLive: ariaLive,
+      children: jsx(DatePicker.TimePicker, {
+        css: styles,
+        ...restProps,
+        ref: ref,
+        popupStyle: {
+          ...getDropdownStyles$1(theme),
+          ...(props.popupStyle || {})
+        }
+      })
     })
   });
 });
@@ -9224,15 +9620,24 @@ const QuarterPicker = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     theme
   } = useDesignSystemTheme();
+  const {
+    ariaLive,
+    wrapperDivProps,
+    ...restProps
+  } = props;
   return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(DatePicker.QuarterPicker, {
-      css: styles,
-      ...props,
-      ref: ref,
-      popupStyle: {
-        ...getDropdownStyles$1(theme),
-        ...(props.popupStyle || {})
-      }
+    children: jsx(AccessibilityWrapper, {
+      ...wrapperDivProps,
+      ariaLive: ariaLive,
+      children: jsx(DatePicker.QuarterPicker, {
+        css: styles,
+        ...restProps,
+        ref: ref,
+        popupStyle: {
+          ...getDropdownStyles$1(theme),
+          ...(props.popupStyle || {})
+        }
+      })
     })
   });
 });
@@ -9241,15 +9646,24 @@ const WeekPicker = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     theme
   } = useDesignSystemTheme();
+  const {
+    ariaLive,
+    wrapperDivProps,
+    ...restProps
+  } = props;
   return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(DatePicker.WeekPicker, {
-      css: styles,
-      ...props,
-      ref: ref,
-      popupStyle: {
-        ...getDropdownStyles$1(theme),
-        ...(props.popupStyle || {})
-      }
+    children: jsx(AccessibilityWrapper, {
+      ...wrapperDivProps,
+      ariaLive: ariaLive,
+      children: jsx(DatePicker.WeekPicker, {
+        css: styles,
+        ...restProps,
+        ref: ref,
+        popupStyle: {
+          ...getDropdownStyles$1(theme),
+          ...(props.popupStyle || {})
+        }
+      })
     })
   });
 });
@@ -9258,15 +9672,24 @@ const MonthPicker = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     theme
   } = useDesignSystemTheme();
+  const {
+    ariaLive,
+    wrapperDivProps,
+    ...restProps
+  } = props;
   return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(DatePicker.MonthPicker, {
-      css: styles,
-      ...props,
-      ref: ref,
-      popupStyle: {
-        ...getDropdownStyles$1(theme),
-        ...(props.popupStyle || {})
-      }
+    children: jsx(AccessibilityWrapper, {
+      ...wrapperDivProps,
+      ariaLive: ariaLive,
+      children: jsx(DatePicker.MonthPicker, {
+        css: styles,
+        ...restProps,
+        ref: ref,
+        popupStyle: {
+          ...getDropdownStyles$1(theme),
+          ...(props.popupStyle || {})
+        }
+      })
     })
   });
 });
@@ -9275,15 +9698,24 @@ const YearPicker = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     theme
   } = useDesignSystemTheme();
+  const {
+    ariaLive,
+    wrapperDivProps,
+    ...restProps
+  } = props;
   return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(DatePicker.YearPicker, {
-      css: styles,
-      ...props,
-      ref: ref,
-      popupStyle: {
-        ...getDropdownStyles$1(theme),
-        ...(props.popupStyle || {})
-      }
+    children: jsx(AccessibilityWrapper, {
+      ...wrapperDivProps,
+      ariaLive: ariaLive,
+      children: jsx(DatePicker.YearPicker, {
+        css: styles,
+        ...restProps,
+        ref: ref,
+        popupStyle: {
+          ...getDropdownStyles$1(theme),
+          ...(props.popupStyle || {})
+        }
+      })
     })
   });
 });
@@ -9608,6 +10040,13 @@ function findClosestOptionSibling(element, direction) {
   }
   return null;
 }
+const resetAllHighlightedOptions = currentSelection => {
+  const options = getContentOptions(currentSelection);
+  options === null || options === void 0 || options.forEach(option => {
+    option.setAttribute('tabIndex', '-1');
+    option.setAttribute('data-highlighted', 'false');
+  });
+};
 const highlightOption = function (currentSelection, prevSelection) {
   var _currentSelection$scr;
   let focus = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
@@ -9685,10 +10124,7 @@ const getKeyboardNavigationFunctions = (handleSelect, _ref) => {
   };
 };
 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');
-  });
+  resetAllHighlightedOptions(elem);
   elem.setAttribute('tabIndex', '0');
   elem.focus();
 };
@@ -9885,7 +10321,46 @@ const getHintColumnStyles = (theme, disabled, textOverflowMode) => {
   }, process.env.NODE_ENV === "production" ? "" : ";label:getHintColumnStyles;");
 };
 
+const DialogComboboxAddButton = _ref => {
+  let {
+    children,
+    ...restProps
+  } = _ref;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const {
+    isInsideDialogCombobox
+  } = useDialogComboboxContext();
+  if (!isInsideDialogCombobox) {
+    throw new Error('`DialogComboboxAddButton` must be used within `DialogCombobox`');
+  }
+  return jsx(Button, {
+    componentId: "codegen_design-system_src_design-system_dialogcombobox_dialogcomboboxaddbutton.tsx_19",
+    ...restProps,
+    type: "tertiary",
+    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:DialogComboboxAddButton;")
+    }, process.env.NODE_ENV === "production" ? "" : ";label:DialogComboboxAddButton;"),
+    icon: jsx(PlusIcon$1, {}),
+    children: children
+  });
+};
+
 function _EMOTION_STRINGIFIED_CSS_ERROR__$n() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const defaultMaxHeight = 'var(--radix-popover-content-available-height)';
 var _ref2$g = process.env.NODE_ENV === "production" ? {
   name: "1ij1o5n",
   styles: "display:flex;flex-direction:column;align-items:flex-start;justify-content:center"
@@ -9901,7 +10376,7 @@ const DialogComboboxContent = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
     loadingDescription = 'DialogComboboxContent',
     matchTriggerWidth,
     textOverflowMode,
-    maxHeight = 'var(--radix-popover-content-available-height)',
+    maxHeight,
     maxWidth,
     minHeight,
     minWidth = 240,
@@ -9976,7 +10451,7 @@ const DialogComboboxContent = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
       role: "listbox",
       "aria-multiselectable": multiSelect,
       css: getComboboxContentWrapperStyles(theme, {
-        maxHeight,
+        maxHeight: maxHeight ? `min(${maxHeight}px, ${defaultMaxHeight})` : defaultMaxHeight,
         maxWidth,
         minHeight,
         minWidth,
@@ -11435,7 +11910,7 @@ function getEmptyDescriptionStyles(theme, clsPrefix) {
   };
   return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getEmptyDescriptionStyles;");
 }
-var _ref$5 = process.env.NODE_ENV === "production" ? {
+var _ref$6 = process.env.NODE_ENV === "production" ? {
   name: "zl1inp",
   styles: "display:flex;justify-content:center"
 } : {
@@ -11458,7 +11933,7 @@ const Empty = props => {
   } = props;
   return jsx("div", {
     ...dataProps,
-    css: _ref$5,
+    css: _ref$6,
     children: jsxs("div", {
       css: [getEmptyStyles(theme), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Empty;"],
       children: [image, title && jsx(Title$1, {
@@ -11701,852 +12176,838 @@ const Label = props => {
   });
 };
 
-const getRadioInputStyles = _ref => {
+function getSelectEmotionStyles(_ref) {
   let {
     clsPrefix,
     theme,
-    useNewStyles
+    validationState
   } = _ref;
-  return {
-    [`.${clsPrefix}`]: {
-      alignSelf: 'start',
-      // Unchecked Styles
-      [`> .${clsPrefix}-input + .${clsPrefix}-inner`]: {
-        width: theme.spacing.md,
-        height: theme.spacing.md,
-        background: useNewStyles ? theme.colors.actionDefaultBackgroundDefault : theme.colors.radioDefaultBackground,
-        borderStyle: 'solid',
-        borderColor: useNewStyles ? theme.colors.actionDefaultBorderDefault : theme.colors.radioDefaultBorder,
-        boxShadow: 'unset',
-        transform: 'unset',
-        // This prevents an awkward jitter on the border
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        borderRadius: '50%',
-        '&:after': {
-          all: 'unset'
-        }
-      },
-      // Hover
-      [`&:not(.${clsPrefix}-disabled) > .${clsPrefix}-input:hover + .${clsPrefix}-inner`]: {
-        borderColor: useNewStyles ? theme.colors.actionPrimaryBackgroundHover : theme.colors.radioInteractiveHover,
-        background: useNewStyles ? theme.colors.actionDefaultBackgroundHover : theme.colors.radioInteractiveHoverSecondary
-      },
-      // Focus
-      [`&:not(.${clsPrefix}-disabled)> .${clsPrefix}-input:focus + .${clsPrefix}-inner`]: {
-        borderColor: useNewStyles ? theme.colors.actionPrimaryBackgroundDefault : theme.colors.primary
-      },
-      // Active
-      [`&:not(.${clsPrefix}-disabled)> .${clsPrefix}-input:active + .${clsPrefix}-inner`]: {
-        borderColor: useNewStyles ? theme.colors.actionPrimaryBackgroundPress : theme.colors.radioInteractivePress,
-        background: useNewStyles ? theme.colors.actionDefaultBackgroundPress : theme.colors.radioInteractivePressSecondary
-      },
-      // Disabled
-      [`&.${clsPrefix}-disabled > .${clsPrefix}-input + .${clsPrefix}-inner`]: {
-        ...(useNewStyles ? {
-          border: `none !important`,
-          // Ant uses !important
-          background: theme.colors.actionDisabledBackground
-        } : {
-          borderColor: `${theme.colors.radioDisabled}!important` // Ant uses !important
-        }),
-
-        '@media (forced-colors: active)': {
-          borderColor: 'GrayText !important'
-        }
+  const classFocused = `.${clsPrefix}-focused`;
+  const classOpen = `.${clsPrefix}-open`;
+  const classSingle = `.${clsPrefix}-single`;
+  const classSelector = `.${clsPrefix}-selector`;
+  const classDisabled = `.${clsPrefix}-disabled`;
+  const classMultiple = `.${clsPrefix}-multiple`;
+  const classItem = `.${clsPrefix}-selection-item`;
+  const classItemOverflowContainer = `.${clsPrefix}-selection-overflow`;
+  const classItemOverflowItem = `.${clsPrefix}-selection-overflow-item`;
+  const classItemOverflowSuffix = `.${clsPrefix}-selection-overflow-item-suffix`;
+  const classArrow = `.${clsPrefix}-arrow`;
+  const classArrowLoading = `.${clsPrefix}-arrow-loading`;
+  const classPlaceholder = `.${clsPrefix}-selection-placeholder`;
+  const classCloseButton = `.${clsPrefix}-selection-item-remove`;
+  const classSearch = `.${clsPrefix}-selection-search`;
+  const classShowSearch = `.${clsPrefix}-show-search`;
+  const classSearchClear = `.${clsPrefix}-clear`;
+  const classAllowClear = `.${clsPrefix}-allow-clear`;
+  const classSearchInput = `.${clsPrefix}-selection-search-input`;
+  const validationColor = getValidationStateColor(theme, validationState);
+  const styles = {
+    '&:hover': {
+      [classSelector]: {
+        borderColor: theme.colors.actionDefaultBorderHover
+      }
+    },
+    [classSelector]: {
+      paddingLeft: 12,
+      // Only the select _item_ is clickable, so we need to have zero padding here, and add it on the item itself,
+      // to make sure the whole select is clickable.
+      paddingRight: 0,
+      color: theme.colors.textPrimary,
+      backgroundColor: 'transparent',
+      height: theme.general.heightSm,
+      '::after': {
+        lineHeight: theme.typography.lineHeightBase
       },
-      // Checked Styles
-      [`&.${clsPrefix}-checked`]: {
-        '&:after': {
-          border: 'unset'
-        },
-        [`> .${clsPrefix}-input + .${clsPrefix}-inner`]: {
-          background: useNewStyles ? theme.colors.actionPrimaryBackgroundDefault : theme.colors.primary,
-          borderColor: theme.colors.primary,
-          '&:after': {
-            content: `""`,
-            borderRadius: theme.spacing.xs,
-            backgroundColor: useNewStyles ? theme.colors.white : theme.colors.radioDefaultBackground,
-            width: theme.spacing.xs,
-            height: theme.spacing.xs
-          },
-          '@media (forced-colors: active)': {
-            borderColor: 'Highlight !important',
-            backgroundColor: 'Highlight !important'
-          }
-        },
-        // Hover
-        [`&:not(.${clsPrefix}-disabled) > .${clsPrefix}-input:hover + .${clsPrefix}-inner`]: {
-          background: useNewStyles ? theme.colors.actionPrimaryBackgroundHover : theme.colors.radioInteractiveHover,
-          borderColor: useNewStyles ? theme.colors.actionPrimaryBackgroundPress : theme.colors.radioInteractiveHover
-        },
-        // Focus
-        [`&:not(.${clsPrefix}-disabled) > .${clsPrefix}-input:focus-visible + .${clsPrefix}-inner`]: {
-          background: useNewStyles ? theme.colors.actionDefaultBackgroundPress : theme.colors.primary,
-          borderColor: useNewStyles ? theme.colors.actionDefaultBorderFocus : theme.colors.primary,
-          boxShadow: `0 0 0 1px ${useNewStyles ? theme.colors.actionDefaultBackgroundDefault : theme.colors.radioDefaultBackground}, 0 0 0 3px ${theme.colors.primary}`
-        },
-        // Active
-        [`&:not(.${clsPrefix}-disabled) > .${clsPrefix}-input:active + .${clsPrefix}-inner`]: {
-          background: useNewStyles ? theme.colors.actionDefaultBackgroundPress : theme.colors.radioInteractivePress,
-          borderColor: useNewStyles ? theme.colors.actionDefaultBorderPress : theme.colors.radioInteractivePress
-        },
-        // Disabled
-        [`&.${clsPrefix}-disabled > .${clsPrefix}-input + .${clsPrefix}-inner`]: {
-          background: useNewStyles ? theme.colors.actionDisabledBackground : theme.colors.radioDisabled,
-          border: useNewStyles ? 'none !important' : `2px solid ${theme.colors.radioDisabled}!important`,
-          // !important inherited from ant
-          '@media (forced-colors: active)': {
-            borderColor: 'GrayText !important',
-            backgroundColor: 'GrayText !important'
-          }
-        }
+      '::before': {
+        lineHeight: theme.typography.lineHeightBase
       }
-    }
-  };
-};
-const getCommonRadioGroupStyles = _ref2 => {
-  let {
-    theme,
-    clsPrefix,
-    classNamePrefix,
-    useNewStyles
-  } = _ref2;
-  return /*#__PURE__*/css({
-    '& > label': {
-      ...(useNewStyles && {
-        [`&.${classNamePrefix}-radio-wrapper-disabled > span`]: {
-          color: theme.colors.actionDisabledText
+    },
+    [classSingle]: {
+      [`&${classSelector}`]: {
+        height: theme.general.heightSm
+      }
+    },
+    [classItem]: {
+      color: theme.colors.textPrimary,
+      paddingRight: 32,
+      lineHeight: theme.typography.lineHeightBase,
+      paddingTop: 5,
+      paddingBottom: 5
+    },
+    // Note: This supports search, which we don't support. The styles here support legacy usages.
+    [classSearch]: {
+      right: 24,
+      left: 8,
+      marginInlineStart: 4,
+      [classSearchInput]: {
+        color: theme.colors.actionDefaultTextDefault,
+        height: 24
+      }
+    },
+    [`&${classSingle}`]: {
+      [classSearchInput]: {
+        height: theme.general.heightSm
+      }
+    },
+    // Note: This supports search, which we don't support. The styles here support legacy usages.
+    [`&${classShowSearch}${classOpen}${classSingle}`]: {
+      [classItem]: {
+        color: theme.colors.actionDisabledText
+      }
+    },
+    // Note: This supports search, which we don't support. The styles here support legacy usages.
+    [classSearchClear]: {
+      right: 24,
+      backgroundColor: 'transparent'
+    },
+    [`&${classFocused}`]: {
+      [classSelector]: {
+        outlineColor: theme.colors.actionPrimaryBackgroundDefault,
+        outlineWidth: 2,
+        outlineOffset: -2,
+        outlineStyle: 'solid',
+        borderColor: 'transparent',
+        boxShadow: 'none'
+      }
+    },
+    [`&${classDisabled}`]: {
+      [classSelector]: {
+        backgroundColor: theme.colors.actionDisabledBackground,
+        color: theme.colors.actionDisabledText,
+        border: 'transparent'
+      },
+      [classItem]: {
+        color: theme.colors.actionDisabledText
+      },
+      [classArrow]: {
+        color: theme.colors.actionDisabledText
+      }
+    },
+    [classArrow]: {
+      height: theme.general.iconFontSize,
+      width: theme.general.iconFontSize,
+      top: (theme.general.heightSm - theme.general.iconFontSize) / 2,
+      marginTop: 0,
+      color: theme.colors.textSecondary,
+      fontSize: theme.general.iconFontSize,
+      '.anticon': {
+        // For some reason ant sets this to 'auto'. Need to set it back to 'none' to allow the element below to receive
+        // the click event.
+        pointerEvents: 'none'
+      },
+      [`&${classArrowLoading}`]: {
+        top: (theme.general.heightSm - theme.general.iconFontSize) / 2,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: theme.general.iconFontSize
+      }
+    },
+    [classPlaceholder]: {
+      color: theme.colors.textPlaceholder,
+      right: 'auto',
+      left: 'auto',
+      width: '100%',
+      paddingRight: 32,
+      lineHeight: theme.typography.lineHeightBase,
+      alignSelf: 'center'
+    },
+    [`&${classMultiple}`]: {
+      [classSelector]: {
+        paddingTop: 3,
+        paddingBottom: 3,
+        paddingLeft: 8,
+        paddingRight: 30,
+        minHeight: theme.general.heightSm,
+        height: 'auto',
+        '&::after': {
+          margin: 0
         }
-      })
+      },
+      [classItem]: {
+        backgroundColor: theme.colors.tagDefault,
+        color: theme.colors.textPrimary,
+        border: 'none',
+        height: 20,
+        lineHeight: theme.typography.lineHeightBase,
+        fontSize: theme.typography.fontSizeBase,
+        marginInlineEnd: 4,
+        marginTop: 2,
+        marginBottom: 2,
+        paddingRight: 0,
+        paddingTop: 0,
+        paddingBottom: 0
+      },
+      [classItemOverflowContainer]: {
+        minHeight: 24
+      },
+      [classItemOverflowItem]: {
+        alignSelf: 'auto',
+        height: 24,
+        lineHeight: theme.typography.lineHeightBase
+      },
+      [classSearch]: {
+        marginTop: 0,
+        left: 0,
+        right: 0
+      },
+      [`&${classDisabled}`]: {
+        [classItem]: {
+          paddingRight: 2
+        }
+      },
+      [classArrow]: {
+        top: (theme.general.heightSm - theme.general.iconFontSize) / 2
+      },
+      [`&${classAllowClear}`]: {
+        [classSearchClear]: {
+          top: (theme.general.heightSm - theme.general.iconFontSize + 4) / 2
+        }
+      },
+      [classPlaceholder]: {
+        // Compensate for the caret placeholder width
+        paddingLeft: 4,
+        color: theme.colors.textPlaceholder
+      },
+      [`&:not(${classFocused})`]: {
+        [classItemOverflowSuffix]: {
+          // Do not keep the caret's placeholder at full height when not focused,
+          // because it introduces a new line even when not focused. Using display: none would break the caret
+          height: 0
+        }
+      }
     },
-    [`& > label + .${classNamePrefix}-hint`]: {
-      paddingLeft: theme.spacing.lg
+    [`&${classMultiple}${classDisabled}`]: {
+      [classItem]: {
+        color: theme.colors.actionDisabledText
+      }
     },
-    ...getRadioInputStyles({
-      theme,
-      clsPrefix,
-      useNewStyles
+    [`&${classAllowClear}`]: {
+      [classItem]: {
+        paddingRight: 0
+      },
+      [classSelector]: {
+        paddingRight: 52
+      },
+      [classSearchClear]: {
+        top: (theme.general.heightSm - theme.general.iconFontSize + 4) / 2,
+        opacity: 100,
+        width: theme.general.iconFontSize,
+        height: theme.general.iconFontSize,
+        marginTop: 0
+      }
+    },
+    [classCloseButton]: {
+      color: theme.colors.textPrimary,
+      borderTopRightRadius: theme.borders.borderRadiusMd,
+      borderBottomRightRadius: theme.borders.borderRadiusMd,
+      height: theme.general.iconFontSize,
+      width: theme.general.iconFontSize,
+      lineHeight: theme.typography.lineHeightBase,
+      paddingInlineEnd: 0,
+      marginInlineEnd: 0,
+      '& > .anticon': {
+        height: theme.general.iconFontSize - 4,
+        fontSize: theme.general.iconFontSize - 4
+      },
+      '&:hover': {
+        color: theme.colors.actionTertiaryTextHover,
+        backgroundColor: theme.colors.tagHover
+      },
+      '&:active': {
+        color: theme.colors.actionTertiaryTextPress,
+        backgroundColor: theme.colors.tagPress
+      }
+    },
+    ...(validationState && {
+      [`& > ${classSelector}`]: {
+        borderColor: validationColor,
+        '&:hover': {
+          borderColor: validationColor
+        }
+      },
+      [`&${classFocused} > ${classSelector}`]: {
+        outlineColor: validationColor,
+        outlineOffset: -2
+      }
     }),
     ...getAnimationCss(theme.options.enableAnimation)
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getCommonRadioGroupStyles;");
-};
-const getHorizontalRadioGroupStyles = _ref3 => {
-  let {
-    theme,
-    classNamePrefix,
-    useNewStyles
-  } = _ref3;
-  return /*#__PURE__*/css({
-    '&&': {
-      display: 'grid',
-      gridTemplateRows: '[label] auto [hint] auto',
-      gridAutoColumns: 'max-content',
-      gridColumnGap: useNewStyles ? theme.spacing.md : theme.spacing.sm
+  };
+  const importantStyles = importantify(styles);
+  return /*#__PURE__*/css(importantStyles, process.env.NODE_ENV === "production" ? "" : ";label:getSelectEmotionStyles;");
+}
+function getDropdownStyles(clsPrefix, theme) {
+  const classItem = `.${clsPrefix}-item-option`;
+  const classItemActive = `.${clsPrefix}-item-option-active`;
+  const classItemSelected = `.${clsPrefix}-item-option-selected`;
+  const classItemState = `.${clsPrefix}-item-option-state`;
+  const styles = {
+    borderColor: theme.colors.borderDecorative,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    zIndex: theme.options.zIndexBase + 50,
+    boxShadow: theme.general.shadowLow,
+    [classItem]: {
+      height: theme.general.heightSm
     },
-    '& > label': {
-      gridRow: 'label / label',
-      marginRight: 0
+    [classItemActive]: {
+      backgroundColor: theme.colors.actionTertiaryBackgroundHover,
+      height: theme.general.heightSm,
+      '&:hover': {
+        backgroundColor: theme.colors.actionTertiaryBackgroundHover
+      }
     },
-    [`& > label + .${classNamePrefix}-hint`]: {
-      display: 'inline-block',
-      gridRow: 'hint / hint'
-    }
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getHorizontalRadioGroupStyles;");
-};
-const getVerticalRadioGroupStyles = _ref4 => {
-  let {
-    theme,
-    classNamePrefix,
-    useNewStyles
-  } = _ref4;
-  return /*#__PURE__*/css({
-    display: 'flex',
-    flexDirection: 'column',
-    flexWrap: 'wrap',
-    '& > label': {
+    [classItemSelected]: {
+      backgroundColor: theme.colors.actionTertiaryBackgroundHover,
       fontWeight: 'normal',
-      ...(useNewStyles && {
-        paddingBottom: theme.spacing.sm
-      })
+      '&:hover': {
+        backgroundColor: theme.colors.actionTertiaryBackgroundHover
+      }
     },
-    [`& > label:last-of-type`]: {
-      paddingBottom: 0
+    [classItemState]: {
+      color: theme.colors.textSecondary,
+      '& > span': {
+        verticalAlign: 'middle'
+      }
     },
-    [`& > label + .${classNamePrefix}-hint`]: {
-      marginBottom: theme.spacing.sm,
-      paddingLeft: theme.spacing.lg,
-      ...(useNewStyles && {
-        marginTop: `-${theme.spacing.sm}px`
-      })
+    [`.${clsPrefix}-loading-options`]: {
+      pointerEvents: 'none',
+      margin: '0 auto',
+      height: theme.general.heightSm,
+      display: 'block'
     },
-    [`& > label:last-of-type + .${classNamePrefix}-hint`]: {
-      ...(useNewStyles && {
-        marginTop: 0
-      })
-    }
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getVerticalRadioGroupStyles;");
-};
-const getRadioStyles = _ref5 => {
-  let {
-    theme,
-    clsPrefix,
-    useNewStyles
-  } = _ref5;
-  // Default as bold for standalone radios
-  const fontWeight = 'normal';
-  const styles = {
-    fontWeight
+    ...getAnimationCss(theme.options.enableAnimation),
+    ...getDarkModePortalStyles(theme)
   };
+  const importantStyles = importantify(styles);
+  return /*#__PURE__*/css(importantStyles, process.env.NODE_ENV === "production" ? "" : ";label:getDropdownStyles;");
+}
+function getLoadingIconStyles(theme) {
   return /*#__PURE__*/css({
-    ...getRadioInputStyles({
-      theme,
-      clsPrefix,
-      useNewStyles
-    }),
-    ...styles
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getRadioStyles;");
-};
-const DuboisRadio = /*#__PURE__*/forwardRef(function Radio(_ref6, ref) {
+    fontSize: 20,
+    color: theme.colors.textSecondary,
+    lineHeight: '20px'
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getLoadingIconStyles;");
+}
+const scrollbarVisibleItemsCount = 8;
+const getIconSizeStyle = (theme, newIconDefault) => importantify({
+  fontSize: newIconDefault !== null && newIconDefault !== void 0 ? newIconDefault : theme.general.iconFontSize
+});
+function DuboisSelect(_ref2, ref) {
   let {
     children,
+    validationState,
+    loading,
+    loadingDescription = 'Select',
+    mode,
+    options,
+    notFoundContent,
+    optionFilterProp,
     dangerouslySetAntdProps,
-    ...props
-  } = _ref6;
+    virtual,
+    dropdownClassName,
+    id,
+    onDropdownVisibleChange,
+    maxHeight,
+    ...restProps
+  } = _ref2;
   const {
     theme,
     getPrefixedClassName
   } = useDesignSystemTheme();
-  const useNewStyles = safex('databricks.fe.designsystem.enableNewRadioStyles', false);
-  const clsPrefix = getPrefixedClassName('radio');
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(Radio$1, {
-      css: getRadioStyles({
-        theme,
-        clsPrefix,
-        useNewStyles
-      }),
-      ...props,
-      ...dangerouslySetAntdProps,
-      ref: ref,
-      children: jsx(RestoreAntDDefaultClsPrefix, {
-        children: children
-      })
-    })
+  const clsPrefix = getPrefixedClassName('select');
+  const [isOpen, setIsOpen] = useState(false);
+  const [uniqueId, setUniqueId] = useState('');
+
+  // Antd's default is 256, to show half an extra item when scrolling we add 0.5 height extra
+  // Reducing to 5.5 as it's default with other components is not an option here because it would break existing usages relying on 8 items being shown by default
+  const MAX_HEIGHT = maxHeight !== null && maxHeight !== void 0 ? maxHeight : theme.general.heightSm * 8.5;
+  useEffect(() => {
+    setUniqueId(id || _uniqueId('dubois-select-'));
+  }, [id]);
+  useEffect(() => {
+    var _document$getElementB;
+    // Ant doesn't populate aria-expanded on init (only on user interaction) so we need to do it ourselves
+    // in order to pass accessibility tests (Microsoft Accessibility Insights). See: JOBS-11125
+    (_document$getElementB = document.getElementById(uniqueId)) === null || _document$getElementB === void 0 || _document$getElementB.setAttribute('aria-expanded', 'false');
+  }, [uniqueId]);
+  return jsx(ClassNames, {
+    children: _ref3 => {
+      let {
+        css: css$1
+      } = _ref3;
+      return jsxs(DesignSystemAntDConfigProvider, {
+        children: [loading && jsx(LoadingState, {
+          description: loadingDescription
+        }), jsx(Select$1, {
+          onDropdownVisibleChange: visible => {
+            onDropdownVisibleChange === null || onDropdownVisibleChange === void 0 || onDropdownVisibleChange(visible);
+            setIsOpen(visible);
+          }
+          // unset aria-owns, aria-controls, and aria-activedescendant if the dropdown is closed;
+          // ant always sets these even if the dropdown isn't present in the DOM yet.
+          // This was flagged by Microsoft Accessibility Insights. See: JOBS-11125
+          ,
+          ...(!isOpen ? {
+            'aria-owns': undefined,
+            'aria-controls': undefined,
+            'aria-activedescendant': undefined
+          } : {}),
+          id: uniqueId,
+          css: getSelectEmotionStyles({
+            clsPrefix,
+            theme,
+            validationState
+          }),
+          removeIcon: jsx(CloseIcon, {
+            "aria-hidden": "false",
+            css: getIconSizeStyle(theme)
+          }),
+          clearIcon: jsx(XCircleFillIcon$1, {
+            "aria-hidden": "false",
+            css: getIconSizeStyle(theme, 12),
+            "aria-label": "close-circle"
+          }),
+          ref: ref,
+          suffixIcon: loading && mode === 'tags' ? jsx(LoadingIcon, {
+            spin: true,
+            "aria-label": "loading",
+            "aria-hidden": "false",
+            css: getIconSizeStyle(theme, 12)
+          }) : jsx(ChevronDownIcon$1, {
+            css: getIconSizeStyle(theme)
+          }),
+          menuItemSelectedIcon: jsx(CheckIcon, {
+            css: getIconSizeStyle(theme)
+          }),
+          showArrow: true,
+          dropdownMatchSelectWidth: true,
+          notFoundContent: notFoundContent !== null && notFoundContent !== void 0 ? notFoundContent : jsx("div", {
+            css: /*#__PURE__*/css({
+              color: theme.colors.textSecondary,
+              textAlign: 'center'
+            }, process.env.NODE_ENV === "production" ? "" : ";label:DuboisSelect;"),
+            children: "No results found"
+          }),
+          dropdownClassName: css$1([getDropdownStyles(clsPrefix, theme), dropdownClassName]),
+          listHeight: MAX_HEIGHT,
+          maxTagPlaceholder: items => `+ ${items.length} more`,
+          mode: mode,
+          options: options,
+          loading: loading,
+          filterOption: true
+          // NOTE(FEINF-1102): This is needed to avoid ghost scrollbar that generates error when clicked on exactly 8 elements
+          // Because by default AntD uses true for virtual, we want to replicate the same even if there are no children
+          ,
+          virtual: virtual !== null && virtual !== void 0 ? virtual : children && Array.isArray(children) && children.length !== scrollbarVisibleItemsCount || options && options.length !== scrollbarVisibleItemsCount || !children && !options,
+          optionFilterProp: optionFilterProp !== null && optionFilterProp !== void 0 ? optionFilterProp : 'children',
+          ...restProps,
+          ...dangerouslySetAntdProps,
+          children: loading && mode !== 'tags' ? jsxs(Fragment, {
+            children: [children, jsx(LegacyOption, {
+              disabled: true,
+              value: "select-loading-options",
+              className: `${clsPrefix}-loading-options`,
+              children: jsx(LoadingIcon, {
+                "aria-hidden": "false",
+                spin: true,
+                css: getLoadingIconStyles(theme),
+                "aria-label": "loading"
+              })
+            })]
+          }) : children
+        })]
+      });
+    }
   });
-});
-const StyledRadioGroup = /*#__PURE__*/forwardRef(function StyledRadioGroup(_ref7, ref) {
-  let {
-    children,
-    dangerouslySetAntdProps,
-    ...props
-  } = _ref7;
+}
+
+/** @deprecated Use `LegacySelectOptionProps` */
+
+const LegacySelectOption = /*#__PURE__*/forwardRef(function Option(props, ref) {
   const {
-    theme,
-    getPrefixedClassName,
-    classNamePrefix
-  } = useDesignSystemTheme();
-  const useNewStyles = safex('databricks.fe.designsystem.enableNewRadioStyles', false);
-  const clsPrefix = getPrefixedClassName('radio');
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(Radio$1.Group, {
-      ...props,
-      css: getCommonRadioGroupStyles({
-        theme,
-        clsPrefix,
-        classNamePrefix,
-        useNewStyles
-      }),
-      ...dangerouslySetAntdProps,
-      ref: ref,
-      children: jsx(RestoreAntDDefaultClsPrefix, {
-        children: children
-      })
-    })
-  });
-});
-const HorizontalGroup = /*#__PURE__*/forwardRef(function HorizontalGroup(_ref8, ref) {
-  let {
     dangerouslySetAntdProps,
-    ...props
-  } = _ref8;
-  const {
-    theme,
-    classNamePrefix
-  } = useDesignSystemTheme();
-  const useNewStyles = safex('databricks.fe.designsystem.enableNewRadioStyles', false);
-  return jsx(StyledRadioGroup, {
-    css: getHorizontalRadioGroupStyles({
-      theme,
-      classNamePrefix,
-      useNewStyles
-    }),
-    ...props,
+    ...restProps
+  } = props;
+  return jsx(Select$1.Option, {
+    ...restProps,
     ref: ref,
     ...dangerouslySetAntdProps
   });
 });
-const Group = /*#__PURE__*/forwardRef(function HorizontalGroup(_ref9, ref) {
-  let {
-    dangerouslySetAntdProps,
-    layout = 'vertical',
-    ...props
-  } = _ref9;
-  const {
-    theme,
-    classNamePrefix
-  } = useDesignSystemTheme();
-  const useNewStyles = safex('databricks.fe.designsystem.enableNewRadioStyles', false);
-  return jsx(StyledRadioGroup, {
-    css: layout === 'horizontal' ? getHorizontalRadioGroupStyles({
-      theme,
-      classNamePrefix,
-      useNewStyles
-    }) : getVerticalRadioGroupStyles({
-      theme,
-      classNamePrefix,
-      useNewStyles
-    }),
-    ...props,
-    ref: ref,
-    ...dangerouslySetAntdProps
+
+// Needed for rc-select to not throw warning about our component not being Select.Option
+LegacySelectOption.isSelectOption = true;
+
+/**
+ * @deprecated use LegacySelect.Option instead
+ */
+const LegacyOption = LegacySelectOption;
+
+/** @deprecated Use `LegacySelectOptGroupProps` */
+
+const LegacySelectOptGroup = /* #__PURE__ */(() => {
+  const OptGroup = /*#__PURE__*/forwardRef(function OptGroup(props, ref) {
+    return jsx(Select$1.OptGroup, {
+      ...props,
+      isSelectOptGroup: true,
+      ref: ref
+    });
   });
-});
+  // Needed for antd to work properly and for rc-select to not throw warning about our component not being Select.OptGroup
+  OptGroup.isSelectOptGroup = true;
+  return OptGroup;
+})();
 
-// Note: We are overriding ant's default "Group" with our own.
-const RadioNamespace = /* #__PURE__ */Object.assign(DuboisRadio, {
-  Group,
-  HorizontalGroup
-});
-const Radio = RadioNamespace;
+/**
+ * @deprecated use LegacySelect.OptGroup instead
+ */
+const LegacyOptGroup = LegacySelectOptGroup;
 
-// TODO: I'm doing this to support storybook's docgen;
-// We should remove this once we have a better storybook integration,
-// since these will be exposed in the library's exports.
-// We should ideally be using __Group instead of __VerticalGroup, but that exists under Checkbox too and conflicts, therefore
-// we show a wrong component name in "Show code" in docs, fix included in story to replace this with correct name
-const __INTERNAL_DO_NOT_USE__VerticalGroup = Group;
-const __INTERNAL_DO_NOT_USE__HorizontalGroup = HorizontalGroup;
+/**
+ * @deprecated Use Select, TypeaheadCombobox, or DialogCombobox depending on your use-case. See http://go/deprecate-ant-select for more information
+ */
+const LegacySelect = /* #__PURE__ */(() => {
+  const DuboisRefForwardedSelect = /*#__PURE__*/forwardRef(DuboisSelect);
+  DuboisRefForwardedSelect.Option = LegacySelectOption;
+  DuboisRefForwardedSelect.OptGroup = LegacySelectOptGroup;
+  return DuboisRefForwardedSelect;
+})();
 
-function getSelectEmotionStyles(_ref) {
+const getRadioInputStyles = _ref => {
   let {
     clsPrefix,
     theme,
-    validationState
+    useNewStyles
   } = _ref;
-  const classFocused = `.${clsPrefix}-focused`;
-  const classOpen = `.${clsPrefix}-open`;
-  const classSingle = `.${clsPrefix}-single`;
-  const classSelector = `.${clsPrefix}-selector`;
-  const classDisabled = `.${clsPrefix}-disabled`;
-  const classMultiple = `.${clsPrefix}-multiple`;
-  const classItem = `.${clsPrefix}-selection-item`;
-  const classItemOverflowContainer = `.${clsPrefix}-selection-overflow`;
-  const classItemOverflowItem = `.${clsPrefix}-selection-overflow-item`;
-  const classItemOverflowSuffix = `.${clsPrefix}-selection-overflow-item-suffix`;
-  const classArrow = `.${clsPrefix}-arrow`;
-  const classArrowLoading = `.${clsPrefix}-arrow-loading`;
-  const classPlaceholder = `.${clsPrefix}-selection-placeholder`;
-  const classCloseButton = `.${clsPrefix}-selection-item-remove`;
-  const classSearch = `.${clsPrefix}-selection-search`;
-  const classShowSearch = `.${clsPrefix}-show-search`;
-  const classSearchClear = `.${clsPrefix}-clear`;
-  const classAllowClear = `.${clsPrefix}-allow-clear`;
-  const classSearchInput = `.${clsPrefix}-selection-search-input`;
-  const validationColor = getValidationStateColor(theme, validationState);
-  const styles = {
-    '&:hover': {
-      [classSelector]: {
-        borderColor: theme.colors.actionDefaultBorderHover
-      }
-    },
-    [classSelector]: {
-      paddingLeft: 12,
-      // Only the select _item_ is clickable, so we need to have zero padding here, and add it on the item itself,
-      // to make sure the whole select is clickable.
-      paddingRight: 0,
-      color: theme.colors.textPrimary,
-      backgroundColor: 'transparent',
-      height: theme.general.heightSm,
-      '::after': {
-        lineHeight: theme.typography.lineHeightBase
-      },
-      '::before': {
-        lineHeight: theme.typography.lineHeightBase
-      }
-    },
-    [classSingle]: {
-      [`&${classSelector}`]: {
-        height: theme.general.heightSm
-      }
-    },
-    [classItem]: {
-      color: theme.colors.textPrimary,
-      paddingRight: 32,
-      lineHeight: theme.typography.lineHeightBase,
-      paddingTop: 5,
-      paddingBottom: 5
-    },
-    // Note: This supports search, which we don't support. The styles here support legacy usages.
-    [classSearch]: {
-      right: 24,
-      left: 8,
-      marginInlineStart: 4,
-      [classSearchInput]: {
-        color: theme.colors.actionDefaultTextDefault,
-        height: 24
-      }
-    },
-    [`&${classSingle}`]: {
-      [classSearchInput]: {
-        height: theme.general.heightSm
-      }
-    },
-    // Note: This supports search, which we don't support. The styles here support legacy usages.
-    [`&${classShowSearch}${classOpen}${classSingle}`]: {
-      [classItem]: {
-        color: theme.colors.actionDisabledText
-      }
-    },
-    // Note: This supports search, which we don't support. The styles here support legacy usages.
-    [classSearchClear]: {
-      right: 24,
-      backgroundColor: 'transparent'
-    },
-    [`&${classFocused}`]: {
-      [classSelector]: {
-        outlineColor: theme.colors.actionPrimaryBackgroundDefault,
-        outlineWidth: 2,
-        outlineOffset: -2,
-        outlineStyle: 'solid',
-        borderColor: 'transparent',
-        boxShadow: 'none'
-      }
-    },
-    [`&${classDisabled}`]: {
-      [classSelector]: {
-        backgroundColor: theme.colors.actionDisabledBackground,
-        color: theme.colors.actionDisabledText,
-        border: 'transparent'
-      },
-      [classItem]: {
-        color: theme.colors.actionDisabledText
-      },
-      [classArrow]: {
-        color: theme.colors.actionDisabledText
-      }
-    },
-    [classArrow]: {
-      height: theme.general.iconFontSize,
-      width: theme.general.iconFontSize,
-      top: (theme.general.heightSm - theme.general.iconFontSize) / 2,
-      marginTop: 0,
-      color: theme.colors.textSecondary,
-      fontSize: theme.general.iconFontSize,
-      '.anticon': {
-        // For some reason ant sets this to 'auto'. Need to set it back to 'none' to allow the element below to receive
-        // the click event.
-        pointerEvents: 'none'
-      },
-      [`&${classArrowLoading}`]: {
-        top: (theme.general.heightSm - theme.general.iconFontSize) / 2,
+  return {
+    [`.${clsPrefix}`]: {
+      alignSelf: 'start',
+      // Unchecked Styles
+      [`> .${clsPrefix}-input + .${clsPrefix}-inner`]: {
+        width: theme.spacing.md,
+        height: theme.spacing.md,
+        background: useNewStyles ? theme.colors.actionDefaultBackgroundDefault : theme.colors.radioDefaultBackground,
+        borderStyle: 'solid',
+        borderColor: useNewStyles ? theme.colors.actionDefaultBorderDefault : theme.colors.radioDefaultBorder,
+        boxShadow: 'unset',
+        transform: 'unset',
+        // This prevents an awkward jitter on the border
         display: 'flex',
-        alignItems: 'center',
         justifyContent: 'center',
-        fontSize: theme.general.iconFontSize
-      }
-    },
-    [classPlaceholder]: {
-      color: theme.colors.textPlaceholder,
-      right: 'auto',
-      left: 'auto',
-      width: '100%',
-      paddingRight: 32,
-      lineHeight: theme.typography.lineHeightBase,
-      alignSelf: 'center'
-    },
-    [`&${classMultiple}`]: {
-      [classSelector]: {
-        paddingTop: 3,
-        paddingBottom: 3,
-        paddingLeft: 8,
-        paddingRight: 30,
-        minHeight: theme.general.heightSm,
-        height: 'auto',
-        '&::after': {
-          margin: 0
-        }
-      },
-      [classItem]: {
-        backgroundColor: theme.colors.tagDefault,
-        color: theme.colors.textPrimary,
-        border: 'none',
-        height: 20,
-        lineHeight: theme.typography.lineHeightBase,
-        fontSize: theme.typography.fontSizeBase,
-        marginInlineEnd: 4,
-        marginTop: 2,
-        marginBottom: 2,
-        paddingRight: 0,
-        paddingTop: 0,
-        paddingBottom: 0
-      },
-      [classItemOverflowContainer]: {
-        minHeight: 24
-      },
-      [classItemOverflowItem]: {
-        alignSelf: 'auto',
-        height: 24,
-        lineHeight: theme.typography.lineHeightBase
-      },
-      [classSearch]: {
-        marginTop: 0,
-        left: 0,
-        right: 0
-      },
-      [`&${classDisabled}`]: {
-        [classItem]: {
-          paddingRight: 2
-        }
-      },
-      [classArrow]: {
-        top: (theme.general.heightSm - theme.general.iconFontSize) / 2
-      },
-      [`&${classAllowClear}`]: {
-        [classSearchClear]: {
-          top: (theme.general.heightSm - theme.general.iconFontSize + 4) / 2
-        }
-      },
-      [classPlaceholder]: {
-        // Compensate for the caret placeholder width
-        paddingLeft: 4,
-        color: theme.colors.textPlaceholder
-      },
-      [`&:not(${classFocused})`]: {
-        [classItemOverflowSuffix]: {
-          // Do not keep the caret's placeholder at full height when not focused,
-          // because it introduces a new line even when not focused. Using display: none would break the caret
-          height: 0
-        }
-      }
-    },
-    [`&${classMultiple}${classDisabled}`]: {
-      [classItem]: {
-        color: theme.colors.actionDisabledText
-      }
-    },
-    [`&${classAllowClear}`]: {
-      [classItem]: {
-        paddingRight: 0
+        alignItems: 'center',
+        borderRadius: '50%',
+        '&:after': {
+          all: 'unset'
+        }
       },
-      [classSelector]: {
-        paddingRight: 52
+      // Hover
+      [`&:not(.${clsPrefix}-disabled) > .${clsPrefix}-input:hover + .${clsPrefix}-inner`]: {
+        borderColor: useNewStyles ? theme.colors.actionPrimaryBackgroundHover : theme.colors.radioInteractiveHover,
+        background: useNewStyles ? theme.colors.actionDefaultBackgroundHover : theme.colors.radioInteractiveHoverSecondary
       },
-      [classSearchClear]: {
-        top: (theme.general.heightSm - theme.general.iconFontSize + 4) / 2,
-        opacity: 100,
-        width: theme.general.iconFontSize,
-        height: theme.general.iconFontSize,
-        marginTop: 0
-      }
-    },
-    [classCloseButton]: {
-      color: theme.colors.textPrimary,
-      borderTopRightRadius: theme.borders.borderRadiusMd,
-      borderBottomRightRadius: theme.borders.borderRadiusMd,
-      height: theme.general.iconFontSize,
-      width: theme.general.iconFontSize,
-      lineHeight: theme.typography.lineHeightBase,
-      paddingInlineEnd: 0,
-      marginInlineEnd: 0,
-      '& > .anticon': {
-        height: theme.general.iconFontSize - 4,
-        fontSize: theme.general.iconFontSize - 4
+      // Focus
+      [`&:not(.${clsPrefix}-disabled)> .${clsPrefix}-input:focus + .${clsPrefix}-inner`]: {
+        borderColor: useNewStyles ? theme.colors.actionPrimaryBackgroundDefault : theme.colors.primary
       },
-      '&:hover': {
-        color: theme.colors.actionTertiaryTextHover,
-        backgroundColor: theme.colors.tagHover
+      // Active
+      [`&:not(.${clsPrefix}-disabled)> .${clsPrefix}-input:active + .${clsPrefix}-inner`]: {
+        borderColor: useNewStyles ? theme.colors.actionPrimaryBackgroundPress : theme.colors.radioInteractivePress,
+        background: useNewStyles ? theme.colors.actionDefaultBackgroundPress : theme.colors.radioInteractivePressSecondary
       },
-      '&:active': {
-        color: theme.colors.actionTertiaryTextPress,
-        backgroundColor: theme.colors.tagPress
-      }
-    },
-    ...(validationState && {
-      [`& > ${classSelector}`]: {
-        borderColor: validationColor,
-        '&:hover': {
-          borderColor: validationColor
+      // Disabled
+      [`&.${clsPrefix}-disabled > .${clsPrefix}-input + .${clsPrefix}-inner`]: {
+        ...(useNewStyles ? {
+          border: `none !important`,
+          // Ant uses !important
+          background: theme.colors.actionDisabledBackground
+        } : {
+          borderColor: `${theme.colors.radioDisabled}!important` // Ant uses !important
+        }),
+
+        '@media (forced-colors: active)': {
+          borderColor: 'GrayText !important'
         }
       },
-      [`&${classFocused} > ${classSelector}`]: {
-        outlineColor: validationColor,
-        outlineOffset: -2
+      // Checked Styles
+      [`&.${clsPrefix}-checked`]: {
+        '&:after': {
+          border: 'unset'
+        },
+        [`> .${clsPrefix}-input + .${clsPrefix}-inner`]: {
+          background: useNewStyles ? theme.colors.actionPrimaryBackgroundDefault : theme.colors.primary,
+          borderColor: theme.colors.primary,
+          '&:after': {
+            content: `""`,
+            borderRadius: theme.spacing.xs,
+            backgroundColor: useNewStyles ? theme.colors.white : theme.colors.radioDefaultBackground,
+            width: theme.spacing.xs,
+            height: theme.spacing.xs
+          },
+          '@media (forced-colors: active)': {
+            borderColor: 'Highlight !important',
+            backgroundColor: 'Highlight !important'
+          }
+        },
+        // Hover
+        [`&:not(.${clsPrefix}-disabled) > .${clsPrefix}-input:hover + .${clsPrefix}-inner`]: {
+          background: useNewStyles ? theme.colors.actionPrimaryBackgroundHover : theme.colors.radioInteractiveHover,
+          borderColor: useNewStyles ? theme.colors.actionPrimaryBackgroundPress : theme.colors.radioInteractiveHover
+        },
+        // Focus
+        [`&:not(.${clsPrefix}-disabled) > .${clsPrefix}-input:focus-visible + .${clsPrefix}-inner`]: {
+          background: useNewStyles ? theme.colors.actionDefaultBackgroundPress : theme.colors.primary,
+          borderColor: useNewStyles ? theme.colors.actionDefaultBorderFocus : theme.colors.primary,
+          boxShadow: `0 0 0 1px ${useNewStyles ? theme.colors.actionDefaultBackgroundDefault : theme.colors.radioDefaultBackground}, 0 0 0 3px ${theme.colors.primary}`
+        },
+        // Active
+        [`&:not(.${clsPrefix}-disabled) > .${clsPrefix}-input:active + .${clsPrefix}-inner`]: {
+          background: useNewStyles ? theme.colors.actionDefaultBackgroundPress : theme.colors.radioInteractivePress,
+          borderColor: useNewStyles ? theme.colors.actionDefaultBorderPress : theme.colors.radioInteractivePress
+        },
+        // Disabled
+        [`&.${clsPrefix}-disabled > .${clsPrefix}-input + .${clsPrefix}-inner`]: {
+          background: useNewStyles ? theme.colors.actionDisabledBackground : theme.colors.radioDisabled,
+          border: useNewStyles ? 'none !important' : `2px solid ${theme.colors.radioDisabled}!important`,
+          // !important inherited from ant
+          '@media (forced-colors: active)': {
+            borderColor: 'GrayText !important',
+            backgroundColor: 'GrayText !important'
+          }
+        }
       }
-    }),
-    ...getAnimationCss(theme.options.enableAnimation)
+    }
   };
-  const importantStyles = importantify(styles);
-  return /*#__PURE__*/css(importantStyles, process.env.NODE_ENV === "production" ? "" : ";label:getSelectEmotionStyles;");
-}
-function getDropdownStyles(clsPrefix, theme) {
-  let useNewDropdownStyle = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  const classItem = `.${clsPrefix}-item-option`;
-  const classItemActive = `.${clsPrefix}-item-option-active`;
-  const classItemSelected = `.${clsPrefix}-item-option-selected`;
-  const classItemState = `.${clsPrefix}-item-option-state`;
-  const classItemContent = `.${clsPrefix}-item-option-content`;
-  const CONTENT_LEFT_PADDING = 28;
-  const styles = {
-    ...(useNewDropdownStyle ? dropdownContentStyles(theme) : {
-      borderColor: theme.colors.borderDecorative,
-      borderWidth: 1,
-      borderStyle: 'solid',
-      zIndex: theme.options.zIndexBase + 50,
-      boxShadow: theme.general.shadowLow
-    }),
-    [classItem]: {
-      height: theme.general.heightSm,
-      ...(useNewDropdownStyle && {
-        padding: '4px 8px',
-        alignItems: 'center',
-        lineHeight: theme.typography.lineHeightBase
+};
+const getCommonRadioGroupStyles = _ref2 => {
+  let {
+    theme,
+    clsPrefix,
+    classNamePrefix,
+    useNewStyles
+  } = _ref2;
+  return /*#__PURE__*/css({
+    '& > label': {
+      ...(useNewStyles && {
+        [`&.${classNamePrefix}-radio-wrapper-disabled > span`]: {
+          color: theme.colors.actionDisabledText
+        }
       })
     },
-    ...(useNewDropdownStyle && {
-      [classItemContent]: {
-        paddingLeft: CONTENT_LEFT_PADDING
-      }
+    [`& > label + .${classNamePrefix}-hint`]: {
+      paddingLeft: theme.spacing.lg
+    },
+    ...getRadioInputStyles({
+      theme,
+      clsPrefix,
+      useNewStyles
     }),
-    [classItemActive]: {
-      backgroundColor: theme.colors.actionTertiaryBackgroundHover,
-      height: theme.general.heightSm,
-      '&:hover': {
-        backgroundColor: theme.colors.actionTertiaryBackgroundHover
-      }
+    ...getAnimationCss(theme.options.enableAnimation)
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getCommonRadioGroupStyles;");
+};
+const getHorizontalRadioGroupStyles = _ref3 => {
+  let {
+    theme,
+    classNamePrefix,
+    useNewStyles
+  } = _ref3;
+  return /*#__PURE__*/css({
+    '&&': {
+      display: 'grid',
+      gridTemplateRows: '[label] auto [hint] auto',
+      gridAutoColumns: 'max-content',
+      gridColumnGap: useNewStyles ? theme.spacing.md : theme.spacing.sm
     },
-    [classItemSelected]: {
-      backgroundColor: theme.colors.actionTertiaryBackgroundHover,
+    '& > label': {
+      gridRow: 'label / label',
+      marginRight: 0
+    },
+    [`& > label + .${classNamePrefix}-hint`]: {
+      display: 'inline-block',
+      gridRow: 'hint / hint'
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getHorizontalRadioGroupStyles;");
+};
+const getVerticalRadioGroupStyles = _ref4 => {
+  let {
+    theme,
+    classNamePrefix,
+    useNewStyles
+  } = _ref4;
+  return /*#__PURE__*/css({
+    display: 'flex',
+    flexDirection: 'column',
+    flexWrap: 'wrap',
+    '& > label': {
       fontWeight: 'normal',
-      '&:hover': {
-        backgroundColor: theme.colors.actionTertiaryBackgroundHover
-      }
+      ...(useNewStyles && {
+        paddingBottom: theme.spacing.sm
+      })
     },
-    [classItemState]: {
-      color: theme.colors.textSecondary,
-      ...(useNewDropdownStyle && {
-        position: 'absolute'
+    [`& > label:last-of-type`]: {
+      paddingBottom: 0
+    },
+    [`& > label + .${classNamePrefix}-hint`]: {
+      marginBottom: theme.spacing.sm,
+      paddingLeft: theme.spacing.lg,
+      ...(useNewStyles && {
+        marginTop: `-${theme.spacing.sm}px`
+      })
+    },
+    [`& > label:last-of-type + .${classNamePrefix}-hint`]: {
+      ...(useNewStyles && {
+        marginTop: 0
+      })
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getVerticalRadioGroupStyles;");
+};
+const getRadioStyles = _ref5 => {
+  let {
+    theme,
+    clsPrefix,
+    useNewStyles
+  } = _ref5;
+  // Default as bold for standalone radios
+  const fontWeight = 'normal';
+  const styles = {
+    fontWeight
+  };
+  return /*#__PURE__*/css({
+    ...getRadioInputStyles({
+      theme,
+      clsPrefix,
+      useNewStyles
+    }),
+    ...styles
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getRadioStyles;");
+};
+const DuboisRadio = /*#__PURE__*/forwardRef(function Radio(_ref6, ref) {
+  let {
+    children,
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref6;
+  const {
+    theme,
+    getPrefixedClassName
+  } = useDesignSystemTheme();
+  const useNewStyles = safex('databricks.fe.designsystem.enableNewRadioStyles', false);
+  const clsPrefix = getPrefixedClassName('radio');
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(Radio$1, {
+      css: getRadioStyles({
+        theme,
+        clsPrefix,
+        useNewStyles
       }),
-      '& > span': {
-        verticalAlign: 'middle'
-      }
-    },
-    [`.${clsPrefix}-loading-options`]: {
-      pointerEvents: 'none',
-      margin: '0 auto',
-      height: theme.general.heightSm,
-      display: 'block',
-      ...(useNewDropdownStyle && {
-        left: -CONTENT_LEFT_PADDING / 2
+      ...props,
+      ...dangerouslySetAntdProps,
+      ref: ref,
+      children: jsx(RestoreAntDDefaultClsPrefix, {
+        children: children
       })
-    },
-    ...getAnimationCss(theme.options.enableAnimation),
-    ...getDarkModePortalStyles(theme)
-  };
-  const importantStyles = importantify(styles);
-  return /*#__PURE__*/css(importantStyles, process.env.NODE_ENV === "production" ? "" : ";label:getDropdownStyles;");
-}
-function getLoadingIconStyles(theme) {
-  return /*#__PURE__*/css({
-    fontSize: 20,
-    color: theme.colors.textSecondary,
-    lineHeight: '20px'
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getLoadingIconStyles;");
-}
-const scrollbarVisibleItemsCount = 8;
-const getIconSizeStyle = (theme, newIconDefault) => importantify({
-  fontSize: newIconDefault !== null && newIconDefault !== void 0 ? newIconDefault : theme.general.iconFontSize
+    })
+  });
 });
-function DuboisSelect(_ref2, ref) {
+const StyledRadioGroup = /*#__PURE__*/forwardRef(function StyledRadioGroup(_ref7, ref) {
   let {
     children,
-    validationState,
-    loading,
-    loadingDescription = 'Select',
-    mode,
-    options,
-    notFoundContent,
-    optionFilterProp,
     dangerouslySetAntdProps,
-    virtual,
-    dropdownClassName,
-    id,
-    onDropdownVisibleChange,
-    maxHeight,
-    ...restProps
-  } = _ref2;
+    ...props
+  } = _ref7;
   const {
     theme,
-    getPrefixedClassName
+    getPrefixedClassName,
+    classNamePrefix
   } = useDesignSystemTheme();
-  const useNewSelectStyles = safex('databricks.fe.designsystem.useNewSelectStyles', false);
-  const clsPrefix = getPrefixedClassName('select');
-  const [isOpen, setIsOpen] = useState(false);
-  const [uniqueId, setUniqueId] = useState('');
-
-  // Antd's default is 256, to show half an extra item when scrolling we add 0.5 height extra
-  // Reducing to 5.5 as it's default with other components is not an option here because it would break existing usages relying on 8 items being shown by default
-  const MAX_HEIGHT = maxHeight !== null && maxHeight !== void 0 ? maxHeight : theme.general.heightSm * 8.5;
-  useEffect(() => {
-    setUniqueId(id || _uniqueId('dubois-select-'));
-  }, [id]);
-  useEffect(() => {
-    var _document$getElementB;
-    // Ant doesn't populate aria-expanded on init (only on user interaction) so we need to do it ourselves
-    // in order to pass accessibility tests (Microsoft Accessibility Insights). See: JOBS-11125
-    (_document$getElementB = document.getElementById(uniqueId)) === null || _document$getElementB === void 0 || _document$getElementB.setAttribute('aria-expanded', 'false');
-  }, [uniqueId]);
-  return jsx(ClassNames, {
-    children: _ref3 => {
-      let {
-        css: css$1
-      } = _ref3;
-      return jsxs(DesignSystemAntDConfigProvider, {
-        children: [loading && jsx(LoadingState, {
-          description: loadingDescription
-        }), jsx(Select$1, {
-          onDropdownVisibleChange: visible => {
-            onDropdownVisibleChange === null || onDropdownVisibleChange === void 0 || onDropdownVisibleChange(visible);
-            setIsOpen(visible);
-          }
-          // unset aria-owns, aria-controls, and aria-activedescendant if the dropdown is closed;
-          // ant always sets these even if the dropdown isn't present in the DOM yet.
-          // This was flagged by Microsoft Accessibility Insights. See: JOBS-11125
-          ,
-          ...(!isOpen ? {
-            'aria-owns': undefined,
-            'aria-controls': undefined,
-            'aria-activedescendant': undefined
-          } : {}),
-          id: uniqueId,
-          css: getSelectEmotionStyles({
-            clsPrefix,
-            theme,
-            validationState
-          }),
-          removeIcon: jsx(CloseIcon, {
-            "aria-hidden": "false",
-            css: getIconSizeStyle(theme)
-          }),
-          clearIcon: jsx(XCircleFillIcon$1, {
-            "aria-hidden": "false",
-            css: getIconSizeStyle(theme, 12),
-            "aria-label": "close-circle"
-          }),
-          ref: ref,
-          suffixIcon: loading && mode === 'tags' ? jsx(LoadingIcon, {
-            spin: true,
-            "aria-label": "loading",
-            "aria-hidden": "false",
-            css: getIconSizeStyle(theme, 12)
-          }) : jsx(ChevronDownIcon$1, {
-            css: getIconSizeStyle(theme)
-          }),
-          menuItemSelectedIcon: jsx(CheckIcon, {
-            css: getIconSizeStyle(theme)
-          }),
-          showArrow: true,
-          dropdownMatchSelectWidth: true,
-          notFoundContent: notFoundContent !== null && notFoundContent !== void 0 ? notFoundContent : jsx("div", {
-            css: /*#__PURE__*/css({
-              color: theme.colors.textSecondary,
-              textAlign: 'center'
-            }),
-            children: "No results found"
-          }),
-          dropdownClassName: css$1([getDropdownStyles(clsPrefix, theme, useNewSelectStyles), dropdownClassName]),
-          listHeight: MAX_HEIGHT,
-          maxTagPlaceholder: items => `+ ${items.length} more`,
-          mode: mode,
-          options: options,
-          loading: loading,
-          filterOption: true
-          // NOTE(FEINF-1102): This is needed to avoid ghost scrollbar that generates error when clicked on exactly 8 elements
-          // Because by default AntD uses true for virtual, we want to replicate the same even if there are no children
-          ,
-          virtual: virtual !== null && virtual !== void 0 ? virtual : children && Array.isArray(children) && children.length !== scrollbarVisibleItemsCount || options && options.length !== scrollbarVisibleItemsCount || !children && !options,
-          optionFilterProp: optionFilterProp !== null && optionFilterProp !== void 0 ? optionFilterProp : 'children',
-          ...restProps,
-          ...dangerouslySetAntdProps,
-          children: loading && mode !== 'tags' ? jsxs(Fragment, {
-            children: [children, jsx(Option, {
-              disabled: true,
-              value: "select-loading-options",
-              className: `${clsPrefix}-loading-options`,
-              children: jsx(LoadingIcon, {
-                "aria-hidden": "false",
-                spin: true,
-                css: getLoadingIconStyles(theme),
-                "aria-label": "loading"
-              })
-            })]
-          }) : children
-        })]
-      });
-    }
+  const useNewStyles = safex('databricks.fe.designsystem.enableNewRadioStyles', false);
+  const clsPrefix = getPrefixedClassName('radio');
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(Radio$1.Group, {
+      ...props,
+      css: getCommonRadioGroupStyles({
+        theme,
+        clsPrefix,
+        classNamePrefix,
+        useNewStyles
+      }),
+      ...dangerouslySetAntdProps,
+      ref: ref,
+      children: jsx(RestoreAntDDefaultClsPrefix, {
+        children: children
+      })
+    })
   });
-}
-
-/** @deprecated Use `SelectOptionProps` */
-
-const SelectOption = /*#__PURE__*/forwardRef(function Option(props, ref) {
+});
+const HorizontalGroup = /*#__PURE__*/forwardRef(function HorizontalGroup(_ref8, ref) {
+  let {
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref8;
   const {
+    theme,
+    classNamePrefix
+  } = useDesignSystemTheme();
+  const useNewStyles = safex('databricks.fe.designsystem.enableNewRadioStyles', false);
+  return jsx(StyledRadioGroup, {
+    css: getHorizontalRadioGroupStyles({
+      theme,
+      classNamePrefix,
+      useNewStyles
+    }),
+    ...props,
+    ref: ref,
+    ...dangerouslySetAntdProps
+  });
+});
+const Group = /*#__PURE__*/forwardRef(function HorizontalGroup(_ref9, ref) {
+  let {
     dangerouslySetAntdProps,
-    ...restProps
-  } = props;
-  return jsx(Select$1.Option, {
-    ...restProps,
+    layout = 'vertical',
+    ...props
+  } = _ref9;
+  const {
+    theme,
+    classNamePrefix
+  } = useDesignSystemTheme();
+  const useNewStyles = safex('databricks.fe.designsystem.enableNewRadioStyles', false);
+  return jsx(StyledRadioGroup, {
+    css: layout === 'horizontal' ? getHorizontalRadioGroupStyles({
+      theme,
+      classNamePrefix,
+      useNewStyles
+    }) : getVerticalRadioGroupStyles({
+      theme,
+      classNamePrefix,
+      useNewStyles
+    }),
+    ...props,
     ref: ref,
     ...dangerouslySetAntdProps
   });
 });
 
-// Needed for rc-select to not throw warning about our component not being Select.Option
-SelectOption.isSelectOption = true;
-
-/**
- * @deprecated use Select.Option instead
- */
-const Option = SelectOption;
-
-/** @deprecated Use `SelectOptGroupProps` */
+// Note: We are overriding ant's default "Group" with our own.
+const RadioNamespace = /* #__PURE__ */Object.assign(DuboisRadio, {
+  Group,
+  HorizontalGroup
+});
+const Radio = RadioNamespace;
 
-const SelectOptGroup = /* #__PURE__ */(() => {
-  const OptGroup = /*#__PURE__*/forwardRef(function OptGroup(props, ref) {
-    return jsx(Select$1.OptGroup, {
-      ...props,
-      isSelectOptGroup: true,
-      ref: ref
-    });
-  });
-  // Needed for antd to work properly and for rc-select to not throw warning about our component not being Select.OptGroup
-  OptGroup.isSelectOptGroup = true;
-  return OptGroup;
-})();
+// TODO: I'm doing this to support storybook's docgen;
+// We should remove this once we have a better storybook integration,
+// since these will be exposed in the library's exports.
+// We should ideally be using __Group instead of __VerticalGroup, but that exists under Checkbox too and conflicts, therefore
+// we show a wrong component name in "Show code" in docs, fix included in story to replace this with correct name
+const __INTERNAL_DO_NOT_USE__VerticalGroup = Group;
+const __INTERNAL_DO_NOT_USE__HorizontalGroup = HorizontalGroup;
 
 /**
- * @deprecated use Select.OptGroup instead
- */
-const OptGroup = SelectOptGroup;
-const Select = /* #__PURE__ */(() => {
-  const DuboisRefForwardedSelect = /*#__PURE__*/forwardRef(DuboisSelect);
-  DuboisRefForwardedSelect.Option = SelectOption;
-  DuboisRefForwardedSelect.OptGroup = SelectOptGroup;
-  return DuboisRefForwardedSelect;
-})();
-
-const SelectV2 = props => {
+ * Please use `SimpleSelect` unless you have a specific use-case for this primitive.
+ * Ask in #dubois if you have questions!
+ */
+const Select = props => {
   const {
     children,
     placeholder,
@@ -12566,7 +13027,11 @@ const SelectV2 = props => {
   });
 };
 
-const SelectV2Content = /*#__PURE__*/forwardRef((_ref, ref) => {
+/**
+ * Please use `SimpleSelect` unless you have a specific use-case for this primitive.
+ * Ask in #dubois if you have questions!
+ */
+const SelectContent = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
     minWidth = 150,
@@ -12582,7 +13047,11 @@ const SelectV2Content = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
 });
 
-const SelectV2Option = /*#__PURE__*/forwardRef((props, ref) => {
+/**
+ * Please use `SimpleSelect` unless you have a specific use-case for this primitive.
+ * Ask in #dubois if you have questions!
+ */
+const SelectOption = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     value
   } = useDialogComboboxContext();
@@ -12593,7 +13062,11 @@ const SelectV2Option = /*#__PURE__*/forwardRef((props, ref) => {
   });
 });
 
-const SelectV2OptionGroup = props => {
+/**
+ * Please use `SimpleSelect` unless you have a specific use-case for this primitive.
+ * Ask in #dubois if you have questions!
+ */
+const SelectOptionGroup = props => {
   const {
     name,
     children,
@@ -12607,7 +13080,11 @@ const SelectV2OptionGroup = props => {
   });
 };
 
-const SelectV2Trigger = /*#__PURE__*/forwardRef((props, ref) => {
+/**
+ * Please use `SimpleSelect` unless you have a specific use-case for this primitive.
+ * Ask in #dubois if you have questions!
+ */
+const SelectTrigger = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     children,
     ...restProps
@@ -12620,6 +13097,161 @@ const SelectV2Trigger = /*#__PURE__*/forwardRef((props, ref) => {
   });
 });
 
+const SimpleSelectContext = /*#__PURE__*/createContext(undefined);
+
+// This is modelled to match the behavior of native select elements;
+// this allows SimpleSelect to be compatible natively with React Hook Form.
+const getSelectedOption = (children, value) => {
+  const childArray = React__default.Children.toArray(children);
+  for (const child of childArray) {
+    if ( /*#__PURE__*/React__default.isValidElement(child)) {
+      if (child.type === SimpleSelectOption && child.props.value === value) {
+        return child;
+      }
+      if (child.props.children) {
+        const nestedOption = getSelectedOption(child.props.children, value);
+        if (nestedOption) {
+          return nestedOption;
+        }
+      }
+    }
+  }
+  return undefined;
+};
+const getSelectedOptionLabel = (children, value) => {
+  const selectedOption = getSelectedOption(children, value);
+  if ( /*#__PURE__*/React__default.isValidElement(selectedOption)) {
+    return selectedOption.props.children;
+  }
+  return '';
+};
+
+/**
+ * This is the future `Select` component which simplifies the API of the current Select primitives.
+ * It is temporarily named `SimpleSelect` pending cleanup.
+ */
+const SimpleSelect = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var _innerRef$current3;
+  let {
+    name,
+    label,
+    placeholder,
+    children,
+    contentProps,
+    onChange,
+    id,
+    value,
+    validationState,
+    ...rest
+  } = _ref;
+  const innerRef = useRef(null);
+  useImperativeHandle(ref, () => innerRef.current, []);
+  const [defaultLabel] = useState(() => {
+    if (value) {
+      return getSelectedOptionLabel(children, value);
+    }
+    return '';
+  });
+  const [selectedValue, setSelectedValue] = useState(value);
+  const [selectedLabel, setSelectedLabel] = useState(defaultLabel);
+  const handleChange = newValue => {
+    setSelectedValue(newValue);
+    setSelectedLabel(getSelectedOptionLabel(children, newValue));
+  };
+
+  // This handles direct manipulation of the value of the combobox, i.e. by RHF.
+  useEffect(() => {
+    var _innerRef$current, _innerRef$current2;
+    setSelectedValue((_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.value);
+    if ((_innerRef$current2 = innerRef.current) !== null && _innerRef$current2 !== void 0 && _innerRef$current2.value) {
+      setSelectedLabel(getSelectedOptionLabel(children, innerRef.current.value));
+    }
+  }, [(_innerRef$current3 = innerRef.current) === null || _innerRef$current3 === void 0 ? void 0 : _innerRef$current3.value, children]);
+
+  // This needs to be as an effect of the selectedValue changing,
+  // as libraries using onChange may wish to look at the element directly with ref (i.e. RHF).
+  useEffect(() => {
+    if (onChange) {
+      const event = {
+        target: {
+          name: name || id,
+          type: 'select',
+          value: selectedValue || ''
+        },
+        type: 'change'
+      };
+      onChange(event);
+    }
+  }, [selectedValue, name, id, onChange]);
+  return jsx(SimpleSelectContext.Provider, {
+    value: {
+      value: selectedValue,
+      onChange: handleChange
+    },
+    children: jsxs(Select, {
+      value: selectedValue,
+      placeholder: placeholder,
+      label: label,
+      children: [jsx(SelectTrigger, {
+        ...rest,
+        id: id,
+        ref: innerRef,
+        value: selectedValue,
+        validationState: validationState,
+        onClear: () => {
+          handleChange('');
+        },
+        children: selectedLabel || placeholder
+      }), jsx(SelectContent, {
+        ...contentProps,
+        children: children
+      })]
+    })
+  });
+});
+const SimpleSelectOption = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    value,
+    children,
+    ...rest
+  } = _ref2;
+  const context = useContext(SimpleSelectContext);
+  if (!context) {
+    throw new Error('SimpleSelectOption must be used within a SimpleSelect');
+  }
+  const {
+    onChange
+  } = context;
+  return jsx(SelectOption, {
+    ...rest,
+    ref: ref,
+    value: value,
+    onChange: _ref3 => {
+      let {
+        value
+      } = _ref3;
+      onChange(value);
+    },
+    children: children
+  });
+});
+const SimpleSelectOptionGroup = _ref4 => {
+  let {
+    children,
+    label,
+    ...props
+  } = _ref4;
+  const context = useContext(SimpleSelectContext);
+  if (!context) {
+    throw new Error('SimpleSelectOptionGroup must be used within a SimpleSelect');
+  }
+  return jsx(SelectOptionGroup, {
+    ...props,
+    name: label,
+    children: children
+  });
+};
+
 const getSwitchWithLabelStyles = _ref => {
   let {
     clsPrefix,
@@ -12983,7 +13615,9 @@ function useComboboxState(_ref) {
           props.setSelectedItems(props.selectedItems.filter(item => item !== newSelectedItem));
         }
       }
-    }
+    },
+    initialInputValue: props.initialInputValue,
+    initialSelectedItem: props.initialSelectedItem
   });
   return comboboxState;
 }
@@ -13012,7 +13646,7 @@ const useTypeaheadComboboxContext = () => {
 };
 
 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" ? {
+var _ref$5 = process.env.NODE_ENV === "production" ? {
   name: "xv0ss6",
   styles: "padding:0;margin:0;display:flex;flex-direction:column;align-items:flex-start;position:absolute"
 } : {
@@ -13021,7 +13655,7 @@ var _ref$4 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__$d
 };
 const getTypeaheadComboboxMenuStyles = () => {
-  return _ref$4;
+  return _ref$5;
 };
 const TypeaheadComboboxMenu = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
@@ -13384,6 +14018,7 @@ const TypeaheadComboboxControls = _ref => {
   let {
     getDownshiftToggleButtonProps,
     showClearSelectionButton,
+    showComboboxToggleButton = true,
     handleClear,
     disabled
   } = _ref;
@@ -13400,7 +14035,7 @@ const TypeaheadComboboxControls = _ref => {
     children: [showClearSelectionButton && jsx(ClearSelectionButton, {
       onClick: handleClear,
       css: _ref2$5
-    }), jsx(TypeaheadComboboxToggleButton, {
+    }), showComboboxToggleButton && jsx(TypeaheadComboboxToggleButton, {
       ...getDownshiftToggleButtonProps(),
       disabled: disabled
     })]
@@ -13408,7 +14043,7 @@ const TypeaheadComboboxControls = _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)."; }
-var _ref$3 = process.env.NODE_ENV === "production" ? {
+var _ref$4 = process.env.NODE_ENV === "production" ? {
   name: "5ob2ly",
   styles: "display:flex;position:relative"
 } : {
@@ -13417,10 +14052,10 @@ var _ref$3 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__$9
 };
 const getContainerStyles$1 = () => {
-  return _ref$3;
+  return _ref$4;
 };
-const getInputStyles$1 = theme => /*#__PURE__*/css({
-  paddingRight: 52,
+const getInputStyles$1 = (theme, showComboboxToggleButton) => /*#__PURE__*/css({
+  paddingRight: showComboboxToggleButton ? 52 : 26,
   width: '100%',
   minWidth: 72,
   '&:disabled': {
@@ -13436,6 +14071,7 @@ const TypeaheadComboboxInput = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     comboboxState,
     allowClear = true,
+    showComboboxToggleButton = true,
     formOnChange,
     onClick,
     ...restProps
@@ -13497,11 +14133,12 @@ const TypeaheadComboboxInput = /*#__PURE__*/forwardRef((_ref2, ref) => {
       ref: mergedRef,
       ...downshiftProps,
       onClick: handleClick,
-      css: getInputStyles$1(theme),
+      css: getInputStyles$1(theme, showComboboxToggleButton),
       ...restProps
     }), jsx(TypeaheadComboboxControls, {
       getDownshiftToggleButtonProps: getToggleButtonProps,
       showClearSelectionButton: allowClear && Boolean(inputValue) && !restProps.disabled,
+      showComboboxToggleButton: showComboboxToggleButton,
       handleClear: handleClear,
       disabled: restProps.disabled
     })]
@@ -13673,7 +14310,7 @@ var _ref2$3 = process.env.NODE_ENV === "production" ? {
 const getContentWrapperStyles = () => {
   return _ref2$3;
 };
-var _ref$2 = process.env.NODE_ENV === "production" ? {
+var _ref$3 = process.env.NODE_ENV === "production" ? {
   name: "qngrd1",
   styles: "display:inline-flex;position:relative;max-width:100%;align-self:auto;flex:none"
 } : {
@@ -13682,7 +14319,7 @@ var _ref$2 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__$7
 };
 const getInputWrapperStyles = () => {
-  return _ref$2;
+  return _ref$3;
 };
 const getInputStyles = theme => {
   return /*#__PURE__*/css({
@@ -14014,7 +14651,10 @@ function RHFControlledTextArea(_ref3) {
     defaultValue: restProps.defaultValue
   });
 }
-function RHFControlledSelect(_ref4) {
+/**
+ * @deprecated Use `RHFControlledSelect` instead.
+ */
+function RHFControlledLegacySelect(_ref4) {
   let {
     name,
     control,
@@ -14028,14 +14668,18 @@ function RHFControlledSelect(_ref4) {
     control: control,
     rules: rules
   });
-  return jsx(Select, {
+  return jsx(LegacySelect, {
     ...restProps,
     ...field,
     value: field.value,
     defaultValue: field.value
   });
 }
-function RHFControlledSelectV2(_ref5) {
+/**
+ * @deprecated This component is no longer necessary as `SimpleSelect` can be used uncontrolled by RHF.
+ * Please consult the Forms Guide on go/dubois.
+ */
+function RHFControlledSelect(_ref5) {
   let {
     name,
     control,
@@ -14085,25 +14729,25 @@ function RHFControlledSelectV2(_ref5) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [field.value]);
-  return jsxs(SelectV2, {
+  return jsxs(Select, {
     ...restProps,
     value: field.value,
-    children: [jsx(SelectV2Trigger, {
+    children: [jsx(SelectTrigger, {
       ...triggerProps,
       width: width,
       onBlur: field.onBlur,
       validationState: validationState,
       children: selectedValueLabel
-    }), jsx(SelectV2Content, {
+    }), jsx(SelectContent, {
       ...contentProps,
       side: "bottom",
-      children: options && options.length > 0 ? options.map(option => createElement(SelectV2Option, {
+      children: options && options.length > 0 ? options.map(option => createElement(SelectOption, {
         ...optionProps,
         key: option.value,
         value: option.value,
         onChange: handleOnChange
-      }, option.label)) : // SelectV2Option out of the box gives users control over state and in this case RHF is controlling state
-      // We expose onChange through a children renderer function to let users pass this down to SelectV2Option
+      }, option.label)) : // SelectOption out of the box gives users control over state and in this case RHF is controlling state
+      // We expose onChange through a children renderer function to let users pass this down to SelectOption
       children === null || children === void 0 ? void 0 : children({
         onChange: handleOnChange
       })
@@ -14428,8 +15072,8 @@ const RHFControlledComponents = {
   Input: RHFControlledInput,
   Password: RHFControlledPasswordInput,
   TextArea: RHFControlledTextArea,
+  LegacySelect: RHFControlledLegacySelect,
   Select: RHFControlledSelect,
-  SelectV2: RHFControlledSelectV2,
   DialogCombobox: RHFControlledDialogCombobox,
   Checkbox: RHFControlledCheckbox,
   CheckboxGroup: RHFControlledCheckboxGroup,
@@ -14527,7 +15171,7 @@ const getHeaderStyles = (clsPrefix, theme) => {
   };
   return /*#__PURE__*/css(importantify(styles), process.env.NODE_ENV === "production" ? "" : ";label:getHeaderStyles;");
 };
-var _ref$1 = process.env.NODE_ENV === "production" ? {
+var _ref$2 = process.env.NODE_ENV === "production" ? {
   name: "eh0igi",
   styles: "display:inline-flex;vertical-align:middle;align-items:center"
 } : {
@@ -14599,7 +15243,7 @@ const Header$1 = _ref5 => {
     // TODO: Look into a more emotion-idomatic way of doing this.
     titleIfOtherElementsPresent: _ref3$4,
     buttonContainer: _ref2$2,
-    titleAddOnsWrapper: _ref$1
+    titleAddOnsWrapper: _ref$2
   };
   return jsxs("div", {
     css: [getHeaderStyles(clsPrefix, theme), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Header;"],
@@ -15107,7 +15751,7 @@ const CursorPagination = function CursorPagination(_ref2) {
       onClick: onNextPage,
       type: "tertiary",
       children: nextPageText
-    }), pageSizeOptions && jsx(Select, {
+    }), pageSizeOptions && jsx(LegacySelect, {
       "aria-label": ariaLabel,
       value: String(pageSizeValue),
       css: _ref3$3,
@@ -15116,7 +15760,7 @@ const CursorPagination = function CursorPagination(_ref2) {
         onPageSizeChange === null || onPageSizeChange === void 0 || onPageSizeChange(updatedPageSize);
         setPageSizeValue(updatedPageSize);
       },
-      children: pageSizeOptions.map(pageSize => jsx(Select.Option, {
+      children: pageSizeOptions.map(pageSize => jsx(LegacySelect.Option, {
         value: String(pageSize),
         children: (getPageSizeOptionText || getPageSizeOptionTextDefault)(pageSize)
       }, pageSize))
@@ -15377,12 +16021,16 @@ const getModalEmotionStyles = args => {
     ...getAnimationCss(theme.options.enableAnimation)
   }, process.env.NODE_ENV === "production" ? "" : ";label:getModalEmotionStyles;");
 };
+function closeButtonComponentId(componentId) {
+  return componentId ? `${componentId}.footer.cancel` : 'codegen_design-system_src_design-system_modal_modal.tsx_260';
+}
 
 /**
  * Render default footer with our buttons. Copied from AntD.
  */
 function DefaultFooter(_ref) {
   let {
+    componentId,
     onOk,
     onCancel,
     confirmLoading,
@@ -15400,14 +16048,14 @@ function DefaultFooter(_ref) {
   };
   return jsxs(Fragment, {
     children: [cancelText && jsx(Button, {
-      componentId: "codegen_design-system_src_design-system_modal_modal.tsx_260",
+      componentId: closeButtonComponentId(componentId),
       onClick: handleCancel,
       autoFocus: autoFocusButton === 'cancel',
       dangerouslyUseFocusPseudoClass: true,
       ...cancelButtonProps,
       children: cancelText
     }), okText && jsx(Button, {
-      componentId: "codegen_design-system_src_design-system_modal_modal.tsx_271",
+      componentId: componentId ? `${componentId}.footer.ok` : 'codegen_design-system_src_design-system_modal_modal.tsx_271',
       loading: confirmLoading,
       onClick: handleOk,
       type: "primary",
@@ -15420,6 +16068,8 @@ function DefaultFooter(_ref) {
 }
 function Modal(_ref2) {
   let {
+    componentId,
+    analyticsEvents,
     okButtonProps,
     cancelButtonProps,
     dangerouslySetAntdProps,
@@ -15436,6 +16086,29 @@ function Modal(_ref2) {
     theme,
     classNamePrefix
   } = useDesignSystemTheme();
+  const eventContext = useDesignSystemEventComponentCallbacks({
+    componentType: DesignSystemEventProviderComponentTypes.Modal,
+    componentId,
+    analyticsEvents: analyticsEvents !== null && analyticsEvents !== void 0 ? analyticsEvents : [DesignSystemEventProviderAnalyticsEventTypes.OnView]
+  });
+  const {
+    elementRef
+  } = useNotifyOnFirstView({
+    onView: eventContext.onView
+  });
+
+  // Need to simulate the close button being closed if the user clicks outside of the modal or clicks on the dismiss button
+  // This should only be applied to the modal prop and not to the footer component
+  const closeButtonEventContext = useDesignSystemEventComponentCallbacks({
+    componentType: DesignSystemEventProviderComponentTypes.Button,
+    componentId: closeButtonComponentId(componentId),
+    analyticsEvents: [DesignSystemEventProviderAnalyticsEventTypes.OnClick]
+  });
+  const onCancelWrapper = e => {
+    var _props$onCancel;
+    closeButtonEventContext.onClick();
+    (_props$onCancel = props.onCancel) === null || _props$onCancel === void 0 || _props$onCancel.call(props, e);
+  };
   return jsx(DesignSystemAntDConfigProvider, {
     children: jsx(Modal$1, {
       css: getModalEmotionStyles({
@@ -15458,6 +16131,7 @@ function Modal(_ref2) {
       }),
       footer: jsx(RestoreAntDDefaultClsPrefix, {
         children: footer === undefined ? jsx(DefaultFooter, {
+          componentId: componentId,
           onOk: props.onOk,
           onCancel: props.onCancel,
           confirmLoading: props.confirmLoading,
@@ -15469,10 +16143,13 @@ function Modal(_ref2) {
         }) : footer
       }),
       width: size ? SIZE_PRESETS[size] : undefined,
-      closeIcon: jsx(CloseIcon, {}),
+      closeIcon: jsx(CloseIcon, {
+        ref: elementRef
+      }),
       centered: true,
       zIndex: theme.options.zIndexBase,
       ...props,
+      onCancel: onCancelWrapper,
       ...dangerouslySetAntdProps,
       children: jsx(RestoreAntDDefaultClsPrefix, {
         children: children
@@ -15528,14 +16205,16 @@ function DangerModal(props) {
     })]
   });
   return jsx(Modal, {
+    componentId: props.componentId,
+    analyticsEvents: props.analyticsEvents,
     title: titleComp,
     footer: [jsx(Button, {
-      componentId: "codegen_design-system_src_design-system_modal_modal.tsx_386",
+      componentId: props.componentId ? `${props.componentId}.danger.footer.cancel` : '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",
+      componentId: props.componentId ? `${props.componentId}.danger.footer.ok` : 'codegen_design-system_src_design-system_modal_modal.tsx_395',
       type: "primary",
       danger: true,
       onClick: onOk,
@@ -16400,6 +17079,85 @@ const SegmentedControlGroup = /*#__PURE__*/forwardRef(function SegmentedControlG
   });
 });
 
+/**
+ * Copied from usehooks-ts.
+ * Custom hook for using either `useLayoutEffect` or `useEffect` based on the environment (client-side or server-side).
+ *
+ * [Documentation](https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect)
+ *
+ * Example:
+ * ```
+ * useIsomorphicLayoutEffect(() => {
+ * // Code to be executed during the layout phase on the client side
+ * }, [dependency1, dependency2]);
+ * ```
+ */
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+const IS_SERVER = typeof window === 'undefined';
+/**
+ * Copied from usehooks-ts.
+ * Custom hook for tracking the state of a media query. Returns The current state of the media query (true if the query matches, false otherwise).
+ *
+ * [Documentation](https://usehooks-ts.com/react-hook/use-media-query)
+ *
+ * [MDN Match Media](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)
+ *
+ * Example:
+ *
+ * `const isSmallScreen = useMediaQuery('(max-width: 600px)');`
+ *
+ * Use `isSmallScreen` to conditionally apply styles or logic based on the screen size.
+ */
+function useMediaQuery(_ref) {
+  var _options$defaultValue, _options$initializeWi;
+  let {
+    query,
+    options
+  } = _ref;
+  // TODO: Refactor this code after the deprecated signature has been removed.
+  const defaultValue = typeof options === 'boolean' ? options : (_options$defaultValue = options === null || options === void 0 ? void 0 : options.defaultValue) !== null && _options$defaultValue !== void 0 ? _options$defaultValue : false;
+  const initializeWithValue = typeof options === 'boolean' ? undefined : (_options$initializeWi = options === null || options === void 0 ? void 0 : options.initializeWithValue) !== null && _options$initializeWi !== void 0 ? _options$initializeWi : undefined;
+  const [matches, setMatches] = useState(() => {
+    if (initializeWithValue) {
+      return getMatches(query);
+    }
+    return defaultValue;
+  });
+  const getMatches = query => {
+    if (IS_SERVER) {
+      return defaultValue;
+    }
+    return window.matchMedia(query).matches;
+  };
+
+  /** Handles the change event of the media query. */
+  function handleChange() {
+    setMatches(getMatches(query));
+  }
+  useIsomorphicLayoutEffect(() => {
+    const matchMedia = window.matchMedia(query);
+
+    // Triggered at the first client-side load and if query changes
+    handleChange();
+
+    // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
+    if (matchMedia.addListener) {
+      matchMedia.addListener(handleChange);
+    } else {
+      matchMedia.addEventListener('change', handleChange);
+    }
+    return () => {
+      if (matchMedia.removeListener) {
+        matchMedia.removeListener(handleChange);
+      } else {
+        matchMedia.removeEventListener('change', handleChange);
+      }
+    };
+  }, [query]);
+  return matches;
+}
+
 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 = {
@@ -16413,11 +17171,11 @@ const SidebarContextDefaults = {
 };
 const ContentContext = /*#__PURE__*/createContext(ContentContextDefaults);
 const SidebarContext = /*#__PURE__*/createContext(SidebarContextDefaults);
-function Nav(_ref) {
+function Nav(_ref2) {
   let {
     children,
     dangerouslyAppendEmotionCSS
-  } = _ref;
+  } = _ref2;
   const {
     theme
   } = useDesignSystemTheme();
@@ -16431,7 +17189,7 @@ function Nav(_ref) {
     children: children
   });
 }
-function NavButton(_ref2) {
+function NavButton(_ref3) {
   let {
     active,
     disabled,
@@ -16441,7 +17199,7 @@ function NavButton(_ref2) {
     dangerouslyAppendEmotionCSS,
     'aria-label': ariaLabel,
     ...restProps
-  } = _ref2;
+  } = _ref3;
   const {
     theme
   } = useDesignSystemTheme();
@@ -16465,11 +17223,104 @@ function NavButton(_ref2) {
     })
   });
 }
-function Content(_ref3) {
+const TOGGLE_BUTTON_Z_INDEX = 100;
+const COMPACT_CONTENT_Z_INDEX = 50;
+const ToggleButton$1 = _ref4 => {
+  let {
+    isExpanded,
+    position,
+    toggleIsExpanded
+  } = _ref4;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const positionStyle = useMemo(() => {
+    if (position === 'right') {
+      return isExpanded ? {
+        right: DEFAULT_WIDTH,
+        transform: 'translateX(+50%)'
+      } : {
+        left: 0,
+        transform: 'translateX(-50%)'
+      };
+    } else {
+      return isExpanded ? {
+        left: DEFAULT_WIDTH,
+        transform: 'translateX(-50%)'
+      } : {
+        right: 0,
+        transform: 'translateX(+50%)'
+      };
+    }
+  }, [isExpanded, position]);
+  const ToggleIcon = useMemo(() => {
+    if (position === 'right') {
+      return isExpanded ? ChevronRightIcon : ChevronLeftIcon;
+    } else {
+      return isExpanded ? ChevronLeftIcon : ChevronRightIcon;
+    }
+  }, [isExpanded, position]);
+  return jsxs("div", {
+    css: /*#__PURE__*/css({
+      position: 'absolute',
+      top: 0,
+      height: 46,
+      display: 'flex',
+      alignItems: 'center',
+      zIndex: TOGGLE_BUTTON_Z_INDEX,
+      ...positionStyle
+    }, process.env.NODE_ENV === "production" ? "" : ";label:ToggleButton;"),
+    children: [jsx("div", {
+      css: /*#__PURE__*/css({
+        borderRadius: '100%',
+        width: theme.spacing.lg,
+        height: theme.spacing.lg,
+        backgroundColor: theme.colors.backgroundPrimary,
+        position: 'absolute'
+      }, process.env.NODE_ENV === "production" ? "" : ";label:ToggleButton;")
+    }), jsx(Button, {
+      componentId: "sidebar-toggle",
+      css: /*#__PURE__*/css({
+        borderRadius: '100%',
+        '&&': {
+          padding: '0px !important',
+          width: `${theme.spacing.lg}px !important`
+        }
+      }, process.env.NODE_ENV === "production" ? "" : ";label:ToggleButton;"),
+      onClick: toggleIsExpanded,
+      size: "small",
+      "aria-label": isExpanded ? 'hide sidebar' : 'expand sidebar',
+      "aria-expanded": isExpanded,
+      children: jsx(ToggleIcon, {})
+    })]
+  });
+};
+const getContentAnimation = width => {
+  const showAnimation = keyframes`
+  from { opacity: 0 }
+  80%  { opacity: 0 }
+  to   { opacity: 1 }`;
+  const openAnimation = keyframes`
+  from { width: 50px }
+  to   { width: ${width}px }`;
+  return {
+    open: `${openAnimation} .2s cubic-bezier(0, 0, 0.2, 1)`,
+    show: `${showAnimation} .25s linear`
+  };
+};
+var _ref$1 = process.env.NODE_ENV === "production" ? {
+  name: "1h0bf8r",
+  styles: "body, :host{user-select:none;}"
+} : {
+  name: "15c18a5-Content",
+  styles: "body, :host{user-select:none;};label:Content;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
+};
+function Content(_ref5) {
   let {
     disableResize,
     openPanelId,
-    closable,
+    closable = true,
     onClose,
     onResizeStart,
     onResizeStop,
@@ -16478,18 +17329,23 @@ function Content(_ref3) {
     maxWidth,
     destroyInactivePanels = false,
     children,
-    dangerouslyAppendEmotionCSS
-  } = _ref3;
-  const openAnimation = keyframes`
-  from { width: 50px }
-  to   { width: ${width || DEFAULT_WIDTH}px }`;
-  const showAnimation = keyframes`
-  from { opacity: 0 }
-  80%  { opacity: 0 }
-  to   { opacity: 1 }`;
+    dangerouslyAppendEmotionCSS,
+    enableCompact,
+    resizeBoxStyle
+  } = _ref5;
   const {
     theme
   } = useDesignSystemTheme();
+  const isCompact = useMediaQuery({
+    query: `not (min-width: ${theme.responsive.breakpoints.sm}px)`
+  }) && enableCompact;
+  const defaultAnimation = useMemo(() => getContentAnimation(isCompact ? DEFAULT_WIDTH : width || DEFAULT_WIDTH), [isCompact, width]);
+  // specifically for non closable panel in compact mode
+  const [isExpanded, setIsExpanded] = useState(true);
+  // hide the panel in compact mode when the panel is not closable and collapsed
+  const isNotExpandedStyle = /*#__PURE__*/css(isCompact && !closable && !isExpanded && {
+    display: 'none'
+  }, process.env.NODE_ENV === "production" ? "" : ";label:isNotExpandedStyle;");
   const sidebarContext = useContext(SidebarContext);
   const onCloseRef = useRef(onClose);
   const resizeHandleStyle = sidebarContext.position === 'right' ? {
@@ -16499,10 +17355,21 @@ function Content(_ref3) {
   };
   const [dragging, setDragging] = useState(false);
   const isPanelClosed = openPanelId == null;
-  const [animation, setAnimation] = useState(isPanelClosed ? {
-    open: `${openAnimation} .2s cubic-bezier(0, 0, 0.2, 1)`,
-    show: `${showAnimation} .25s linear`
-  } : undefined);
+  const [animation, setAnimation] = useState(isPanelClosed ? defaultAnimation : undefined);
+  const compactStyle = /*#__PURE__*/css(isCompact && {
+    position: 'absolute',
+    zIndex: COMPACT_CONTENT_Z_INDEX,
+    left: sidebarContext.position === 'left' && closable ? '100%' : undefined,
+    right: sidebarContext.position === 'right' && closable ? '100%' : undefined,
+    backgroundColor: theme.colors.backgroundPrimary,
+    borderBottom: `1px solid ${theme.colors.border}`,
+    borderTop: `1px solid ${theme.colors.border}`,
+    borderRight: sidebarContext.position === 'left' ? `1px solid ${theme.colors.border}` : undefined,
+    borderLeft: sidebarContext.position === 'right' ? `1px solid ${theme.colors.border}` : undefined,
+    width: DEFAULT_WIDTH,
+    // shift to the top due to border
+    top: -1
+  }, process.env.NODE_ENV === "production" ? "" : ";label:compactStyle;");
   const hiddenPanelStyle = /*#__PURE__*/css(isPanelClosed && {
     display: 'none'
   }, process.env.NODE_ENV === "production" ? "" : ";label:hiddenPanelStyle;");
@@ -16524,93 +17391,116 @@ function Content(_ref3) {
   useEffect(() => {
     onCloseRef.current = onClose;
   }, [onClose]);
+
+  // For non closable panel, reset expanded state to true so that the panel stays open
+  // the next time the screen goes into compact mode.
+  useEffect(() => {
+    if (!closable && enableCompact && !isCompact) {
+      setIsExpanded(true);
+    }
+  }, [isCompact, closable, defaultAnimation, enableCompact]);
   const value = useMemo(() => ({
     openPanelId,
-    closable: closable === undefined ? true : closable,
+    closable,
     destroyInactivePanels,
     setIsClosed: () => {
       var _onCloseRef$current;
       (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 || _onCloseRef$current.call(onCloseRef);
       if (!animation) {
-        setAnimation({
-          open: `${openAnimation} .2s cubic-bezier(0, 0, 0.2, 1)`,
-          show: `${showAnimation} .25s linear`
-        });
+        setAnimation(defaultAnimation);
       }
     }
-  }), [openPanelId, closable, openAnimation, showAnimation, animation, destroyInactivePanels]);
+  }), [openPanelId, closable, defaultAnimation, animation, destroyInactivePanels]);
   return jsx(ContentContext.Provider, {
     value: value,
-    children: disableResize ? jsx("div", {
-      css: [/*#__PURE__*/css(containerStyle, {
-        width: width || '100%',
-        height: '100%',
-        overflow: 'hidden'
-      }, process.env.NODE_ENV === "production" ? "" : ";label:Content;"), dangerouslyAppendEmotionCSS, hiddenPanelStyle, process.env.NODE_ENV === "production" ? "" : ";label:Content;"],
-      "aria-hidden": isPanelClosed,
-      children: jsx("div", {
-        css: /*#__PURE__*/css({
-          opacity: 1,
+    children: disableResize || isCompact ? jsxs(Fragment, {
+      children: [jsx("div", {
+        css: [/*#__PURE__*/css({
+          width: width || '100%',
           height: '100%',
-          animation: animation === null || animation === void 0 ? void 0 : animation.show,
-          direction: 'ltr'
-        }, process.env.NODE_ENV === "production" ? "" : ";label:Content;"),
-        children: children
-      })
-    }) : jsx(ResizableBox, {
-      width: width || DEFAULT_WIDTH,
-      height: undefined,
-      axis: "x",
-      resizeHandles: sidebarContext.position === 'right' ? ['w'] : ['e'],
-      minConstraints: [minWidth !== null && minWidth !== void 0 ? minWidth : DEFAULT_WIDTH, 150],
-      maxConstraints: [maxWidth !== null && maxWidth !== void 0 ? maxWidth : 800, 150],
-      onResizeStart: (_, _ref4) => {
-        let {
-          size
-        } = _ref4;
-        onResizeStart === null || onResizeStart === void 0 || onResizeStart(size.width);
-        setDragging(true);
-      },
-      onResizeStop: (_, _ref5) => {
-        let {
-          size
-        } = _ref5;
-        onResizeStop === null || onResizeStop === void 0 || onResizeStop(size.width);
-        setDragging(false);
-      },
-      handle: jsx("div", {
+          overflow: 'hidden'
+        }, containerStyle, compactStyle, process.env.NODE_ENV === "production" ? "" : ";label:Content;"), dangerouslyAppendEmotionCSS, hiddenPanelStyle, isNotExpandedStyle, process.env.NODE_ENV === "production" ? "" : ";label:Content;"],
+        "aria-hidden": isPanelClosed,
+        children: jsx("div", {
+          css: /*#__PURE__*/css({
+            opacity: 1,
+            height: '100%',
+            animation: animation === null || animation === void 0 ? void 0 : animation.show,
+            direction: 'ltr'
+          }, process.env.NODE_ENV === "production" ? "" : ";label:Content;"),
+          children: children
+        })
+      }), !closable && isCompact && jsx("div", {
         css: /*#__PURE__*/css({
-          width: 10,
-          height: '100%',
-          position: 'absolute',
-          top: 0,
-          cursor: sidebarContext.position === 'right' ? 'w-resize' : 'e-resize',
-          '&:hover': highlightedBorderStyle,
-          ...resizeHandleStyle
-        }, dragging && highlightedBorderStyle, process.env.NODE_ENV === "production" ? "" : ";label:Content;")
-      }),
-      css: [containerStyle, hiddenPanelStyle, process.env.NODE_ENV === "production" ? "" : ";label:Content;"],
-      "aria-hidden": isPanelClosed,
-      children: jsx("div", {
-        css: [{
-          opacity: 1,
-          animation: animation === null || animation === void 0 ? void 0 : animation.show,
-          direction: 'ltr',
-          height: '100%'
-        }, dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Content;"],
-        children: children
-      })
+          width: !isExpanded ? theme.spacing.md : undefined,
+          marginRight: isExpanded ? theme.spacing.md : undefined,
+          position: 'relative'
+        }, process.env.NODE_ENV === "production" ? "" : ";label:Content;"),
+        children: jsx(ToggleButton$1, {
+          isExpanded: isExpanded,
+          position: sidebarContext.position || 'left',
+          toggleIsExpanded: () => setIsExpanded(prev => !prev)
+        })
+      })]
+    }) : jsxs(Fragment, {
+      children: [dragging && jsx(Global, {
+        styles: _ref$1
+      }), jsx(ResizableBox, {
+        style: resizeBoxStyle,
+        width: width || DEFAULT_WIDTH,
+        height: undefined,
+        axis: "x",
+        resizeHandles: sidebarContext.position === 'right' ? ['w'] : ['e'],
+        minConstraints: [minWidth !== null && minWidth !== void 0 ? minWidth : DEFAULT_WIDTH, 150],
+        maxConstraints: [maxWidth !== null && maxWidth !== void 0 ? maxWidth : 800, 150],
+        onResizeStart: (_, _ref6) => {
+          let {
+            size
+          } = _ref6;
+          onResizeStart === null || onResizeStart === void 0 || onResizeStart(size.width);
+          setDragging(true);
+        },
+        onResizeStop: (_, _ref7) => {
+          let {
+            size
+          } = _ref7;
+          onResizeStop === null || onResizeStop === void 0 || onResizeStop(size.width);
+          setDragging(false);
+        },
+        handle: jsx("div", {
+          css: /*#__PURE__*/css({
+            width: 10,
+            height: '100%',
+            position: 'absolute',
+            top: 0,
+            cursor: sidebarContext.position === 'right' ? 'w-resize' : 'e-resize',
+            '&:hover': highlightedBorderStyle,
+            ...resizeHandleStyle
+          }, dragging && highlightedBorderStyle, process.env.NODE_ENV === "production" ? "" : ";label:Content;")
+        }),
+        css: [containerStyle, hiddenPanelStyle, process.env.NODE_ENV === "production" ? "" : ";label:Content;"],
+        "aria-hidden": isPanelClosed,
+        children: jsx("div", {
+          css: [{
+            opacity: 1,
+            animation: animation === null || animation === void 0 ? void 0 : animation.show,
+            direction: 'ltr',
+            height: '100%'
+          }, dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Content;"],
+          children: children
+        })
+      })]
     })
   });
 }
-function Panel(_ref6) {
+function Panel(_ref8) {
   let {
     panelId,
     children,
     forceRender = false,
     dangerouslyAppendEmotionCSS,
     ...delegated
-  } = _ref6;
+  } = _ref8;
   const {
     openPanelId,
     destroyInactivePanels
@@ -16630,7 +17520,7 @@ function Panel(_ref6) {
     children: children
   });
 }
-var _ref8 = process.env.NODE_ENV === "production" ? {
+var _ref10 = process.env.NODE_ENV === "production" ? {
   name: "1066lcq",
   styles: "display:flex;justify-content:space-between;align-items:center"
 } : {
@@ -16638,11 +17528,11 @@ var _ref8 = process.env.NODE_ENV === "production" ? {
   styles: "display:flex;justify-content:space-between;align-items:center;label:PanelHeader;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
 };
-function PanelHeader(_ref7) {
+function PanelHeader(_ref9) {
   let {
     children,
     dangerouslyAppendEmotionCSS
-  } = _ref7;
+  } = _ref9;
   const {
     theme
   } = useDesignSystemTheme();
@@ -16663,7 +17553,7 @@ function PanelHeader(_ref7) {
         width: contentContext.closable ? `calc(100% - ${theme.spacing.lg}px)` : '100%'
       }, process.env.NODE_ENV === "production" ? "" : ";label:PanelHeader;"),
       children: jsx("div", {
-        css: _ref8,
+        css: _ref10,
         children: children
       })
     }), contentContext.closable ? jsx("div", {
@@ -16679,22 +17569,22 @@ function PanelHeader(_ref7) {
     }) : null]
   });
 }
-function PanelHeaderTitle(_ref9) {
+function PanelHeaderTitle(_ref11) {
   let {
     title,
     dangerouslyAppendEmotionCSS
-  } = _ref9;
+  } = _ref11;
   return jsx("div", {
     title: title,
     css: ["align-self:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;", dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:PanelHeaderTitle;"],
     children: title
   });
 }
-function PanelHeaderButtons(_ref10) {
+function PanelHeaderButtons(_ref12) {
   let {
     children,
     dangerouslyAppendEmotionCSS
-  } = _ref10;
+  } = _ref12;
   const {
     theme
   } = useDesignSystemTheme();
@@ -16708,11 +17598,11 @@ function PanelHeaderButtons(_ref10) {
     children: children
   });
 }
-function PanelBody(_ref11) {
+function PanelBody(_ref13) {
   let {
     children,
     dangerouslyAppendEmotionCSS
-  } = _ref11;
+  } = _ref13;
   const {
     theme
   } = useDesignSystemTheme();
@@ -16745,12 +17635,12 @@ function PanelBody(_ref11) {
   });
 }
 const Sidebar = /* #__PURE__ */(() => {
-  function Sidebar(_ref12) {
+  function Sidebar(_ref14) {
     let {
       position,
       children,
       dangerouslyAppendEmotionCSS
-    } = _ref12;
+    } = _ref14;
     const {
       theme
     } = useDesignSystemTheme();
@@ -16770,7 +17660,8 @@ const Sidebar = /* #__PURE__ */(() => {
           borderStyle: 'solid',
           borderColor: theme.colors.borderDecorative,
           borderWidth: theme.general.borderWidth,
-          boxSizing: 'content-box'
+          boxSizing: 'content-box',
+          position: 'relative'
         }, dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Sidebar;"],
         children: children
       })
@@ -18039,12 +18930,14 @@ function WizardFooter(props) {
       justifyContent: 'flex-end',
       columnGap: theme.spacing.sm,
       paddingTop: theme.spacing.md,
+      paddingBottom: theme.spacing.md,
       borderTop: `1px solid ${theme.colors.border}`
     }, process.env.NODE_ENV === "production" ? "" : ";label:WizardFooter;"),
     children: getWizardFooterButtons(props)
   });
 }
 function getWizardFooterButtons(_ref) {
+  var _extraFooterButtonsRi;
   let {
     goToNextStepOrDone,
     isLastStep,
@@ -18063,7 +18956,8 @@ function getWizardFooterButtons(_ref) {
     nextButtonContent,
     previousButtonContent,
     doneButtonContent,
-    extraFooterButtons,
+    extraFooterButtonsLeft,
+    extraFooterButtonsRight,
     onCancel
   } = _ref;
   return _compact([!cancelStepButtonHidden && jsx(Button, {
@@ -18071,10 +18965,10 @@ function getWizardFooterButtons(_ref) {
     type: "tertiary",
     componentId: "codegen_dubois_src_wizard_wizardfooter_cancel",
     children: cancelButtonContent
-  }, "cancel"), extraFooterButtons && extraFooterButtons.map((buttonProps, index) => createElement(Button, {
+  }, "cancel"), extraFooterButtonsLeft && extraFooterButtonsLeft.map((buttonProps, index) => createElement(Button, {
     ...buttonProps,
     type: undefined,
-    key: `extra-${index}`
+    key: `extra-left-${index}`
   })), currentStepIndex > 0 && !previousStepButtonHidden && jsx(Button, {
     onClick: goToPreviousStep,
     disabled: previousButtonDisabled,
@@ -18085,16 +18979,21 @@ function getWizardFooterButtons(_ref) {
     onClick: goToNextStepOrDone,
     disabled: nextButtonDisabled,
     loading: nextButtonLoading || busyValidatingNextStep,
-    type: "primary",
+    type: ((_extraFooterButtonsRi = extraFooterButtonsRight === null || extraFooterButtonsRight === void 0 ? void 0 : extraFooterButtonsRight.length) !== null && _extraFooterButtonsRi !== void 0 ? _extraFooterButtonsRi : 0) > 0 ? undefined : 'primary',
     componentId: "codegen_dubois_src_wizard_wizardfooter_next",
     children: nextButtonContentOverride ? nextButtonContentOverride : isLastStep ? doneButtonContent : nextButtonContent
-  }, "next")]);
+  }, "next"), extraFooterButtonsRight && extraFooterButtonsRight.map((buttonProps, index) => createElement(Button, {
+    ...buttonProps,
+    type: index === extraFooterButtonsRight.length - 1 ? 'primary' : undefined,
+    key: `extra-right-${index}`
+  }))]);
 }
 
 function WizardStepsContent(_ref) {
   let {
     steps: wizardSteps,
     currentStepIndex,
+    expandContentToFullHeight,
     localizeStepNumber
   } = _ref;
   const {
@@ -18110,7 +19009,10 @@ function WizardStepsContent(_ref) {
       responsive: false
     }), jsx("div", {
       css: /*#__PURE__*/css({
-        marginTop: theme.spacing.md
+        marginTop: theme.spacing.md,
+        flexGrow: expandContentToFullHeight ? 1 : undefined,
+        overflowY: 'auto',
+        ...getShadowScrollStyles(theme)
       }, process.env.NODE_ENV === "production" ? "" : ";label:WizardStepsContent;"),
       children: wizardSteps[currentStepIndex].content
     })]
@@ -18198,10 +19100,12 @@ function WizardControlled(_ref2) {
     initialStep = 0,
     steps,
     width = '100%',
+    height = '100%',
     currentStepIndex,
     localizeStepNumber,
     onStepsChange,
     isLastStep,
+    expandContentToFullHeight = true,
     ...footerProps
   } = _ref2;
   if (steps.length === 0 || !_isUndefined(initialStep) && (initialStep < 0 || initialStep >= steps.length)) {
@@ -18210,6 +19114,7 @@ function WizardControlled(_ref2) {
   return jsxs("div", {
     css: /*#__PURE__*/css({
       width,
+      height,
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'flex-start'
@@ -18217,7 +19122,8 @@ function WizardControlled(_ref2) {
     children: [jsx(WizardStepsContent, {
       steps: steps,
       currentStepIndex: currentStepIndex,
-      localizeStepNumber: localizeStepNumber
+      localizeStepNumber: localizeStepNumber,
+      expandContentToFullHeight: expandContentToFullHeight
     }), jsx(Spacer, {
       size: "lg"
     }), jsx(WizardFooter, {
@@ -18275,10 +19181,11 @@ function WizardModal(_ref) {
     children: jsx(WizardStepsContent, {
       steps: steps,
       currentStepIndex: currentStepIndex,
-      localizeStepNumber: localizeStepNumber
+      localizeStepNumber: localizeStepNumber,
+      expandContentToFullHeight: false
     })
   });
 }
 
-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 };
+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, Avatar, 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, DBAssistantAvatar, 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, DesignSystemEventProviderAnalyticsEventTypes, DesignSystemEventProviderComponentTypes, DialogCombobox, DialogComboboxAddButton, 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, LegacyOptGroup, LegacyOption, LegacyPopover, LegacySelect, LegacySelectOptGroup, LegacySelectOption, 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, 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, RunningIcon$1 as RunningIcon, SaveIcon$1 as SaveIcon, SchemaIcon$1 as SchemaIcon, SchoolIcon$1 as SchoolIcon, SearchIcon$1 as SearchIcon, SecurityIcon$1 as SecurityIcon, SegmentedControlButton, SegmentedControlGroup, Select, SelectContent, SelectOption, SelectOptionGroup, SelectTrigger, 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, SimpleSelect, SimpleSelectOption, SimpleSelectOptionGroup, 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, TagIcon$1 as TagIcon, 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, useDesignSystemEventComponentCallbacks, useDesignSystemFlags, useDesignSystemTheme, useLegacyNotification, useMultipleSelectionState, useNotifyOnFirstView, useThemedStyles, useTypeaheadComboboxContext, useWizardCurrentStep, visuallyHidden, withNotifications };
 //# sourceMappingURL=index.js.map