@databricks/design-system 1.7.0 → 1.9.0

package/dist/index.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import React__default, { createContext, useMemo, useEffect, useContext, useRef, forwardRef, useImperativeHandle, Children, useCallback, useState } from 'react';
 import AntDIcon from '@ant-design/icons';
-import { useTheme, ThemeProvider, css, ClassNames, keyframes } from '@emotion/react';
+import { useTheme, ThemeProvider, css, keyframes, ClassNames } from '@emotion/react';
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import chroma from 'chroma-js';
-import { notification, ConfigProvider, Collapse, Alert as Alert$1, AutoComplete as AutoComplete$1, Breadcrumb as Breadcrumb$1, Button as Button$1, Checkbox as Checkbox$1, DatePicker, Dropdown as Dropdown$1, Tooltip as Tooltip$1, Typography as Typography$1, Form as Form$1, Input as Input$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, Menu as Menu$1, Modal as Modal$1, Pagination as Pagination$1, Popover as Popover$1, Skeleton as Skeleton$1, Table as Table$1, Tabs as Tabs$1, Tree as Tree$1 } from 'antd';
+import { notification, ConfigProvider, Collapse, Alert as Alert$1, AutoComplete as AutoComplete$1, Breadcrumb as Breadcrumb$1, Button as Button$1, Checkbox as Checkbox$1, DatePicker, Typography as Typography$1, Dropdown as Dropdown$1, Tooltip as Tooltip$1, Form as Form$1, Input as Input$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, Menu as Menu$1, Modal as Modal$1, Pagination as Pagination$1, Popover as Popover$2, Skeleton as Skeleton$1, Table as Table$1, Tabs as Tabs$1, Tree as Tree$1 } from 'antd';
 import classnames from 'classnames';
 import _isNil from 'lodash/isNil';
 import _endsWith from 'lodash/endsWith';
@@ -13,8 +13,10 @@ import _isNumber from 'lodash/isNumber';
 import _isString from 'lodash/isString';
 import _mapValues from 'lodash/mapValues';
 import unitless from '@emotion/unitless';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as DropdownMenu$1 from '@radix-ui/react-dropdown-menu';
 import { useController } from 'react-hook-form';
+import * as Popover$1 from '@radix-ui/react-popover';
 import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
 import { ResizableBox } from 'react-resizable';
 
@@ -268,6 +270,7 @@ function getSemanticColors(theme) {
   }
 }
 
+// TODO (FEINF-1674): Remove when removing USE_NEW_RADIO_STYLES
 /*
 Colors that need to be replaced by semantic colors.
  */
@@ -536,12 +539,43 @@ const DesignSystemProvider = _ref => {
     })
   });
 };
-const ApplyDesignSystemFlags = _ref2 => {
+const ApplyDesignSystemContextOverrides = _ref2 => {
   let {
+    theme,
+    enableAnimation,
+    zIndexBase,
+    getPopupContainer,
     flags,
     children
   } = _ref2;
   const parentDesignSystemProviderProps = useContext(DesignSystemProviderPropsContext);
+  if (parentDesignSystemProviderProps === null) {
+    throw new Error("ApplyDesignSystemContextOverrides cannot be used standalone - DesignSystemProvider must exist in the React context");
+  }
+  const newProps = useMemo(() => ({
+    ...parentDesignSystemProviderProps,
+    theme: theme !== null && theme !== void 0 ? theme : parentDesignSystemProviderProps.theme,
+    enableAnimation: enableAnimation !== null && enableAnimation !== void 0 ? enableAnimation : parentDesignSystemProviderProps.enableAnimation,
+    zIndexBase: zIndexBase !== null && zIndexBase !== void 0 ? zIndexBase : parentDesignSystemProviderProps.zIndexBase,
+    getPopupContainer: getPopupContainer !== null && getPopupContainer !== void 0 ? getPopupContainer : parentDesignSystemProviderProps.getPopupContainer,
+    flags: {
+      ...parentDesignSystemProviderProps.flags,
+      ...flags
+    }
+  }), [parentDesignSystemProviderProps, theme, enableAnimation, zIndexBase, getPopupContainer, flags]);
+  return jsx(DesignSystemProvider, {
+    ...newProps,
+    children: children
+  });
+};
+
+// This is a more-specific version of `ApplyDesignSystemContextOverrides` that only allows overriding the flags.
+const ApplyDesignSystemFlags = _ref3 => {
+  let {
+    flags,
+    children
+  } = _ref3;
+  const parentDesignSystemProviderProps = useContext(DesignSystemProviderPropsContext);
   if (parentDesignSystemProviderProps === null) {
     throw new Error("ApplyDesignSystemFlags cannot be used standalone - DesignSystemProvider must exist in the React context");
   }
@@ -557,10 +591,10 @@ const ApplyDesignSystemFlags = _ref2 => {
     children: children
   });
 };
-const DesignSystemAntDConfigProvider = _ref3 => {
+const DesignSystemAntDConfigProvider = _ref4 => {
   let {
     children
-  } = _ref3;
+  } = _ref4;
   const antdContext = useAntDConfigProviderContext();
   return jsx(ConfigProvider, {
     ...antdContext,
@@ -581,10 +615,10 @@ const useAntDConfigProviderContext = () => {
  * Since all Design System's components have are wrapped with DesignSystemAntDConfigProvider,
  * this won't affect their own prefixCls, but just allow nested antd components to keep their ant prefix.
  */
-const RestoreAntDDefaultClsPrefix = _ref4 => {
+const RestoreAntDDefaultClsPrefix = _ref5 => {
   let {
     children
-  } = _ref4;
+  } = _ref5;
   return jsx(ConfigProvider, {
     prefixCls: "ant",
     children: children
@@ -8776,6 +8810,27 @@ function UnderlineIcon(props) {
   });
 }
 
+function SvgVariableIcon(props) {
+  return jsx("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: jsx("path", {
+      d: "M3.73 13.2h.4v-1.109h-.257c-.78 0-1.084-.345-1.084-1.228v-1.74c0-.858-.507-1.347-1.472-1.448v-.173c.965-.108 1.472-.596 1.472-1.455v-1.71c0-.883.304-1.228 1.084-1.228h.257V2h-.4c-1.638 0-2.353.662-2.353 2.158v1.46c0 .906-.37 1.234-1.377 1.234v1.466c1.013.006 1.377.334 1.377 1.234v1.472c0 1.502.715 2.176 2.353 2.176zM4.994 11.036H6.59L7.92 8.771h.1l1.336 2.265h1.668L8.897 7.74 11 4.521H9.374l-1.288 2.26h-.1L6.691 4.52H4.976l2.127 3.285-2.11 3.23zM12.27 13.2c1.638 0 2.354-.674 2.354-2.176V9.552c0-.9.363-1.228 1.376-1.234V6.852c-1.007 0-1.377-.328-1.377-1.234v-1.46C14.623 2.662 13.909 2 12.27 2h-.4v1.109h.257c.786 0 1.09.345 1.09 1.228v1.71c0 .859.5 1.347 1.466 1.455v.173c-.965.1-1.466.59-1.466 1.448v1.74c0 .883-.31 1.228-1.09 1.228h-.257V13.2h.4z",
+      fill: "currentColor"
+    })
+  });
+}
+function VariableIcon(props) {
+  return jsx(Icon, {
+    ...props,
+    component: SvgVariableIcon
+  });
+}
+
 function SvgWorkspacesIcon(props) {
   return jsxs("svg", {
     width: "1em",
@@ -10048,841 +10103,1039 @@ const LegacyDatePicker = /* #__PURE__ */Object.assign(DuboisDatePicker, {
   YearPicker
 });
 
-/**
- * @deprecated Use `DropdownMenu` instead.
- */
-const Dropdown = _ref => {
+const Spacer = _ref => {
   let {
-    dangerouslySetAntdProps,
+    size = 'md',
     ...props
   } = _ref;
   const {
     theme
   } = useDesignSystemTheme();
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(Dropdown$1, {
-      mouseLeaveDelay: 0.25,
-      ...props,
-      overlayStyle: {
-        zIndex: theme.options.zIndexBase + 50,
-        ...props.overlayStyle
-      },
-      ...dangerouslySetAntdProps
-    })
+  const spacingValues = {
+    xs: theme.spacing.xs,
+    sm: theme.spacing.sm,
+    md: theme.spacing.md,
+    lg: theme.spacing.lg
+  };
+  return jsx("div", {
+    css: /*#__PURE__*/css({
+      height: spacingValues[size]
+    }, process.env.NODE_ENV === "production" ? "" : ";label:Spacer;"),
+    ...props
   });
 };
 
-const Tooltip = _ref => {
+const getLinkStyles = (theme, clsPrefix, useNewIcons) => {
+  const classTypography = ".".concat(clsPrefix, "-typography");
+  const styles = {
+    ["&".concat(classTypography, ", &").concat(classTypography, ":focus")]: {
+      color: theme.colors.actionTertiaryTextDefault
+    },
+    ["&".concat(classTypography, ":hover, &").concat(classTypography, ":hover .anticon")]: {
+      color: theme.colors.actionTertiaryTextHover,
+      textDecoration: 'underline'
+    },
+    ["&".concat(classTypography, ":active, &").concat(classTypography, ":active .anticon")]: {
+      color: theme.colors.actionTertiaryTextPress,
+      textDecoration: 'underline'
+    },
+    ["&".concat(classTypography, ":focus-visible")]: {
+      textDecoration: 'underline'
+    },
+    ...(useNewIcons && {
+      '.anticon': {
+        fontSize: 12
+      }
+    })
+  };
+  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getLinkStyles;");
+};
+const getEllipsisNewTabLinkStyles = () => {
+  const styles = {
+    paddingRight: 'calc(2px + 1em)',
+    // 1em for icon
+    position: 'relative'
+  };
+  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getEllipsisNewTabLinkStyles;");
+};
+const getIconStyles = theme => {
+  const styles = {
+    marginLeft: 2,
+    color: theme.colors.actionTertiaryTextDefault
+  };
+  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getIconStyles;");
+};
+const getEllipsisIconStyles = useNewIcons => {
+  const styles = {
+    position: 'absolute',
+    right: 0,
+    bottom: 0,
+    top: 0,
+    display: 'flex',
+    alignItems: 'center',
+    ...(useNewIcons && {
+      fontSize: 12
+    })
+  };
+  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getEllipsisIconStyles;");
+};
+function Link(_ref) {
   let {
-    children,
-    title,
-    placement = 'top',
-    dataTestId,
     dangerouslySetAntdProps,
     ...props
   } = _ref;
   const {
-    theme
+    children,
+    openInNewTab,
+    ...restProps
+  } = props;
+  const {
+    theme,
+    classNamePrefix
   } = useDesignSystemTheme();
-  if (!title) {
-    return jsx(React__default.Fragment, {
-      children: children
-    });
-  }
+  const {
+    USE_NEW_ICONS: useNewIcons
+  } = useDesignSystemFlags();
+  const newTabProps = {
+    rel: 'noopener noreferrer',
+    target: '_blank'
+  };
+  const linkProps = openInNewTab ? {
+    ...restProps,
+    ...newTabProps
+  } : {
+    ...restProps
+  };
+  const linkStyles = props.ellipsis && openInNewTab ? [getLinkStyles(theme, classNamePrefix, useNewIcons), getEllipsisNewTabLinkStyles()] : getLinkStyles(theme, classNamePrefix, useNewIcons);
+  const iconStyles = props.ellipsis ? [getIconStyles(theme), getEllipsisIconStyles()] : getIconStyles(theme);
   return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(Tooltip$1
-    // eslint-disable-next-line react/forbid-dom-props -- FEINF-1337 - this should turn into data-testid
-    , {
-      title: jsx("span", {
-        "data-test-id": dataTestId,
-        children: title
-      }),
-      placement: placement
-      // Always trigger on hover and focus
-      ,
-      trigger: ['hover', 'focus'],
-      overlayInnerStyle: {
-        backgroundColor: '#2F3941',
-        lineHeight: '22px',
-        padding: '4px 8px'
-      },
-      overlayStyle: {
-        zIndex: theme.options.zIndexBase + 70
-      },
-      css: getAnimationCss(theme.options.enableAnimation),
+    children: jsxs(Typography$1.Link, {
+      css: linkStyles,
+      ...linkProps,
       ...dangerouslySetAntdProps,
-      ...props,
-      children: children
+      children: [children, openInNewTab ? jsx(NewWindowIcon, {
+        css: iconStyles,
+        ...newTabProps
+      }) : null]
     })
   });
-};
-
-const Root = DropdownMenu$1.Root; // Behavioral component only
+}
 
-const Content$2 = /*#__PURE__*/forwardRef(function Content(_ref, ref) {
-  let {
-    children,
-    minWidth = 220,
+const {
+  Paragraph: AntDParagraph
+} = Typography$1;
+function getParagraphEmotionStyles(theme, props) {
+  return /*#__PURE__*/css({
+    '&&': {
+      fontSize: theme.typography.fontSizeBase,
+      lineHeight: theme.typography.lineHeightBase,
+      color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
+    }
+  }, props.disabled && {
+    '&&': {
+      color: theme.colors.actionDisabledText
+    }
+  }, props.withoutMargins && {
+    '&&': {
+      marginTop: 0,
+      marginBottom: 0
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getParagraphEmotionStyles;");
+}
+function Paragraph$1(userProps) {
+  const {
+    dangerouslySetAntdProps,
+    withoutMargins,
+    color,
     ...props
-  } = _ref;
+  } = userProps;
   const {
-    getPopupContainer
-  } = useDesignSystemContext();
-  return jsx(DropdownMenu$1.Portal, {
-    container: getPopupContainer && getPopupContainer(),
-    children: jsx(DropdownMenu$1.Content, {
-      ref: ref,
-      css: [contentStyles, {
-        minWidth
-      }, process.env.NODE_ENV === "production" ? "" : ";label:Content;"],
-      sideOffset: 4,
-      align: "start",
+    theme
+  } = useDesignSystemTheme();
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(AntDParagraph, {
       ...props,
-      children: children
+      className: props.className,
+      css: getParagraphEmotionStyles(theme, userProps),
+      ...dangerouslySetAntdProps
     })
   });
-});
-const SubContent = /*#__PURE__*/forwardRef(function Content(_ref2, ref) {
-  let {
-    children,
-    minWidth = 220,
-    ...props
-  } = _ref2;
-  const {
-    getPopupContainer
-  } = useDesignSystemContext();
-  return jsx(DropdownMenu$1.Portal, {
-    container: getPopupContainer && getPopupContainer(),
-    children: jsx(DropdownMenu$1.SubContent, {
-      ref: ref,
-      css: [contentStyles, {
-        minWidth
-      }, process.env.NODE_ENV === "production" ? "" : ";label:SubContent;"],
-      sideOffset: -2,
-      alignOffset: -5,
-      ...props,
-      children: children
-    })
-  });
-});
-const Trigger = /*#__PURE__*/forwardRef(function Trigger(_ref3, ref) {
-  let {
-    children,
-    ...props
-  } = _ref3;
-  return jsx(DropdownMenu$1.Trigger, {
-    ref: ref,
-    ...props,
-    children: children
-  });
-});
-const Item = /*#__PURE__*/forwardRef(function Item(_ref4, ref) {
-  let {
-    children,
-    disabledReason,
-    danger,
-    ...props
-  } = _ref4;
-  const itemRef = useRef(null);
-  useImperativeHandle(ref, () => itemRef.current);
-  return jsx(DropdownMenu$1.Item, {
-    css: theme => [itemStyles, danger && dangerItemStyles(theme)],
-    ref: itemRef,
-    ...props,
-    children: getNewChildren(children, props, disabledReason, itemRef)
-  });
-});
-const Label$1 = /*#__PURE__*/forwardRef(function Label(_ref5, ref) {
-  let {
-    children,
-    ...props
-  } = _ref5;
-  return jsx(DropdownMenu$1.Label, {
-    ref: ref,
-    css: [itemStyles, theme => ({
-      color: theme.colors.textSecondary,
-      '&:hover': {
-        cursor: 'default'
-      }
-    }), process.env.NODE_ENV === "production" ? "" : ";label:Label;"],
-    ...props,
-    children: children
-  });
-});
-const Separator = /*#__PURE__*/forwardRef(function Separator(_ref6, ref) {
-  let {
-    children,
-    ...props
-  } = _ref6;
-  return jsx(DropdownMenu$1.Separator, {
-    ref: ref,
-    css: theme => ({
-      height: 1,
-      margin: "".concat(theme.spacing.xs, "px ").concat(theme.spacing.sm, "px"),
-      backgroundColor: theme.colors.borderDecorative
-    }),
-    ...props,
-    children: children
-  });
-});
-const SubTrigger = /*#__PURE__*/forwardRef(function TriggerItem(_ref7, ref) {
-  let {
-    children,
-    disabledReason,
-    ...props
-  } = _ref7;
-  const subTriggerRef = useRef(null);
-  useImperativeHandle(ref, () => subTriggerRef.current);
-  return jsxs(DropdownMenu$1.SubTrigger, {
-    ref: subTriggerRef,
-    css: [itemStyles, theme => ({
-      '&[data-state="open"]': {
-        backgroundColor: theme.colors.actionTertiaryBackgroundHover
-      }
-    }), process.env.NODE_ENV === "production" ? "" : ";label:SubTrigger;"],
-    ...props,
-    children: [getNewChildren(children, props, disabledReason, subTriggerRef), jsx(HintColumn, {
-      css: theme => ({
-        margin: CONSTANTS.subMenuIconMargin(theme),
-        display: 'flex',
-        alignSelf: 'stretch',
-        alignItems: 'center'
-      }),
-      children: jsx(ChevronRightIcon, {
-        css: theme => ({
-          fontSize: CONSTANTS.subMenuIconSize(theme)
-        })
-      })
-    })]
-  });
-});
+}
 
-/**
- * Deprecated. Use `SubTrigger` instead.
- * @deprecated
- */
-const TriggerItem = SubTrigger;
-const CheckboxItem = /*#__PURE__*/forwardRef(function CheckboxItem(_ref8, ref) {
-  let {
-    children,
-    disabledReason,
-    ...props
-  } = _ref8;
-  const flags = useDesignSystemFlags();
-  const checkboxItemRef = useRef(null);
-  useImperativeHandle(ref, () => checkboxItemRef.current);
-  return jsx(DropdownMenu$1.CheckboxItem, {
-    ref: checkboxItemRef,
-    css: theme => [itemStyles, checkboxItemStyles(theme, flags)],
-    ...props,
-    children: getNewChildren(children, props, disabledReason, checkboxItemRef)
-  });
-});
-const ItemIndicator = /*#__PURE__*/forwardRef(function ItemIndicator(_ref9, ref) {
-  let {
-    children,
-    ...props
-  } = _ref9;
-  const flags = useDesignSystemFlags();
-  return jsx(DropdownMenu$1.ItemIndicator, {
-    ref: ref,
-    css: theme => ({
-      marginLeft: -(CONSTANTS.checkboxIconWidth(theme, flags) + CONSTANTS.checkboxPaddingRight(theme, flags)),
-      position: 'absolute',
-      ...(!flags.USE_NEW_ICONS && {
-        fontSize: 24
-      })
-    }),
-    ...props,
-    children: children !== null && children !== void 0 ? children : jsx(CheckIcon, {
-      css: theme => ({
-        color: theme.colors.textSecondary
-      })
-    })
-  });
-});
-const Arrow = /*#__PURE__*/forwardRef(function Arrow(_ref10, ref) {
-  let {
-    children,
+const {
+  Text: AntDText
+} = Typography$1;
+function getTextEmotionStyles(theme, props) {
+  return /*#__PURE__*/css({
+    '&&': {
+      fontSize: theme.typography.fontSizeBase,
+      lineHeight: theme.typography.lineHeightBase,
+      color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
+    }
+  }, props.disabled && {
+    '&&': {
+      color: theme.colors.actionDisabledText
+    }
+  }, props.hint && {
+    '&&': {
+      fontSize: theme.typography.fontSizeSm,
+      lineHeight: theme.typography.lineHeightSm
+    }
+  }, props.bold && {
+    '&&': {
+      fontSize: theme.typography.fontSizeBase,
+      fontWeight: theme.typography.typographyBoldFontWeight,
+      lineHeight: theme.typography.lineHeightBase
+    }
+  }, props.code && {
+    '&& > code': {
+      fontSize: theme.typography.fontSizeBase,
+      lineHeight: theme.typography.lineHeightBase,
+      fontWeight: theme.typography.typographyBoldFontWeight,
+      background: theme.colors.typographyCodeBg,
+      fontFamily: 'monospace',
+      borderRadius: theme.borders.borderRadiusMd,
+      padding: '2px 4px',
+      border: 'unset',
+      margin: 0
+    }
+  }, props.size && {
+    '&&': (() => {
+      switch (props.size) {
+        case 'xxl':
+          return {
+            fontSize: theme.typography.fontSizeXxl,
+            lineHeight: theme.typography.lineHeightXxl
+          };
+        case 'xl':
+          return {
+            fontSize: theme.typography.fontSizeXl,
+            lineHeight: theme.typography.lineHeightXl
+          };
+        case 'lg':
+          return {
+            fontSize: theme.typography.fontSizeLg,
+            lineHeight: theme.typography.lineHeightLg
+          };
+        case 'sm':
+          return {
+            fontSize: theme.typography.fontSizeSm,
+            lineHeight: theme.typography.lineHeightSm
+          };
+        default:
+          return {
+            fontSize: theme.typography.fontSizeMd,
+            lineHeight: theme.typography.lineHeightMd
+          };
+      }
+    })()
+  }, props.withoutMargins && {
+    '&&': {
+      marginTop: 0,
+      marginBottom: 0
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getTextEmotionStyles;");
+}
+function Text(userProps) {
+  // Omit props that are not supported by `antd`
+  const {
+    dangerouslySetAntdProps,
+    bold,
+    hint,
+    withoutMargins,
+    color,
     ...props
-  } = _ref10;
+  } = userProps;
   const {
     theme
   } = useDesignSystemTheme();
-  return jsx(DropdownMenu$1.Arrow, {
-    css: /*#__PURE__*/css({
-      fill: theme.colors.backgroundPrimary,
-      stroke: theme.colors.borderDecorative,
-      strokeDashoffset: -CONSTANTS.arrowBottomLength(),
-      strokeDasharray: CONSTANTS.arrowBottomLength() + 2 * CONSTANTS.arrowSide(),
-      strokeWidth: CONSTANTS.arrowStrokeWidth(),
-      // TODO: This is a temporary fix for the alignment of the Arrow;
-      // Radix has changed the implementation for v1.0.0 (uses floating-ui)
-      // which has new behaviors for alignment that we don't want. Generally
-      // we need to fix the arrow to always be aligned to the left of the menu (with
-      // offset equal to border radius)
-      position: 'relative',
-      top: -1
-    }, process.env.NODE_ENV === "production" ? "" : ";label:Arrow;"),
-    ref: ref,
-    width: 12,
-    height: 6,
-    ...props,
-    children: children
-  });
-});
-const RadioItem = /*#__PURE__*/forwardRef(function RadioItem(_ref11, ref) {
-  let {
-    children,
-    disabledReason,
-    ...props
-  } = _ref11;
-  const flags = useDesignSystemFlags();
-  const radioItemRef = useRef(null);
-  useImperativeHandle(ref, () => radioItemRef.current);
-  return jsx(DropdownMenu$1.RadioItem, {
-    ref: radioItemRef,
-    css: theme => [itemStyles, checkboxItemStyles(theme, flags)],
-    ...props,
-    children: getNewChildren(children, props, disabledReason, radioItemRef)
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(AntDText, {
+      ...props,
+      className: props.className,
+      css: getTextEmotionStyles(theme, userProps),
+      ...dangerouslySetAntdProps
+    })
   });
-});
-
-// UNWRAPPED RADIX-UI-COMPONENTS
-const Group$1 = DropdownMenu$1.Group;
-const RadioGroup = DropdownMenu$1.RadioGroup;
-const Sub = DropdownMenu$1.Sub;
+}
 
-// EXTRA COMPONENTS
-const HintColumn = /*#__PURE__*/forwardRef(function HintColumn(_ref12, ref) {
-  let {
-    children,
-    ...props
-  } = _ref12;
-  return jsx("div", {
-    ref: ref,
-    css: [metaTextStyles, "margin-left:auto;" + (process.env.NODE_ENV === "production" ? "" : ";label:HintColumn;")],
-    ...props,
-    children: children
-  });
-});
-const HintRow = /*#__PURE__*/forwardRef(function HintRow(_ref13, ref) {
-  let {
-    children,
-    ...props
-  } = _ref13;
-  return jsx("div", {
-    ref: ref,
-    css: [metaTextStyles, "min-width:100%;" + (process.env.NODE_ENV === "production" ? "" : ";label:HintRow;")],
-    ...props,
-    children: children
-  });
-});
-const IconWrapper = /*#__PURE__*/forwardRef(function IconWrapper(_ref14, ref) {
-  let {
-    children,
-    ...props
-  } = _ref14;
-  return jsx("div", {
-    ref: ref,
-    css: theme => ({
-      fontSize: 16,
-      color: theme.colors.textSecondary,
-      paddingRight: 4
-    }),
-    ...props,
-    children: children
-  });
-});
-const getNewChildren = (children, props, disabledReason, ref) => {
-  const childCount = Children.count(children);
-  const tooltip = jsx(Tooltip, {
-    title: disabledReason,
-    placement: "right",
-    dangerouslySetAntdProps: {
-      getPopupContainer: () => ref.current || document.body
-    },
-    children: jsx("span", {
-      css: theme => infoIconStyles(theme),
-      children: jsx(InfoBorderIcon, {})
+const {
+  Title: AntDTitle
+} = Typography$1;
+function getLevelStyles(theme, props) {
+  switch (props.level) {
+    case 1:
+      return /*#__PURE__*/css({
+        '&&': {
+          fontSize: theme.typography.fontSizeXxl,
+          lineHeight: theme.typography.lineHeightXxl,
+          fontWeight: theme.typography.typographyBoldFontWeight
+        }
+      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
+    case 2:
+      return /*#__PURE__*/css({
+        '&&': {
+          fontSize: theme.typography.fontSizeXl,
+          lineHeight: theme.typography.lineHeightXl,
+          fontWeight: theme.typography.typographyBoldFontWeight
+        }
+      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
+    case 3:
+      return /*#__PURE__*/css({
+        '&&': {
+          fontSize: theme.typography.fontSizeLg,
+          lineHeight: theme.typography.lineHeightLg,
+          fontWeight: theme.typography.typographyBoldFontWeight
+        }
+      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
+    case 4:
+    default:
+      return /*#__PURE__*/css({
+        '&&': {
+          fontSize: theme.typography.fontSizeMd,
+          lineHeight: theme.typography.lineHeightMd,
+          fontWeight: theme.typography.typographyBoldFontWeight
+        }
+      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
+  }
+}
+function getTitleEmotionStyles(theme, props) {
+  return /*#__PURE__*/css(getLevelStyles(theme, props), {
+    '&&': {
+      color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
+    }
+  }, props.withoutMargins && {
+    '&&': {
+      marginTop: '0 !important',
+      // override general styling
+      marginBottom: '0 !important' // override general styling
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getTitleEmotionStyles;");
+}
+function Title$1(userProps) {
+  const {
+    dangerouslySetAntdProps,
+    withoutMargins,
+    color,
+    ...props
+  } = userProps;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(AntDTitle, {
+      ...props,
+      className: props.className,
+      css: getTitleEmotionStyles(theme, userProps),
+      ...dangerouslySetAntdProps
     })
   });
-  if (childCount === 1) {
-    return getChild(children, !!props['disabled'], disabledReason, tooltip, 0, childCount);
-  }
-  return Children.map(children, (child, idx) => {
-    return getChild(child, !!props['disabled'], disabledReason, tooltip, idx, childCount);
-  });
-};
-const getChild = (child, isDisabled, disabledReason, tooltip, index, siblingCount) => {
-  const HintColumnType = jsx(HintColumn, {}).type;
-  const isHintColumnType = !!(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]
+}
+
+const Typography = /* #__PURE__ */(() => {
+  function Typography(_ref) {
+    let {
+      dangerouslySetAntdProps,
+      ...props
+    } = _ref;
+    return jsx(DesignSystemAntDConfigProvider, {
+      children: jsx(Typography$1, {
+        ...props,
+        ...dangerouslySetAntdProps
+      })
     });
   }
-  return child;
-};
+  Typography.Text = Text;
+  Typography.Title = Title$1;
+  Typography.Paragraph = Paragraph$1;
+  Typography.Link = Link;
+  return Typography;
+})();
 
-// CONSTANTS
-const CONSTANTS = {
-  itemPaddingVertical(theme) {
-    // The number from the mocks is the midpoint between constants
-    return 0.5 * theme.spacing.xs + 0.5 * theme.spacing.sm;
-  },
-  itemPaddingHorizontal(theme) {
-    return theme.spacing.sm;
-  },
-  checkboxIconWidth(theme, flags) {
-    return flags.USE_NEW_ICONS ? theme.general.iconFontSizeNew : theme.spacing.lg;
-  },
-  checkboxPaddingLeft(theme) {
-    return theme.spacing.sm;
-  },
-  checkboxPaddingRight(theme, flags) {
-    return flags.USE_NEW_ICONS ? theme.spacing.sm : theme.spacing.xs;
-  },
-  subMenuIconMargin(theme) {
-    // Negative margin so the icons can be larger without increasing the overall item height
-    const iconMarginVertical = this.itemPaddingVertical(theme) / 2;
-    const iconMarginRight = -this.itemPaddingVertical(theme) + theme.spacing.sm * 1.5;
-    return "".concat(-iconMarginVertical, "px ").concat(-iconMarginRight, "px ").concat(-iconMarginVertical, "px auto");
-  },
-  subMenuIconSize(theme) {
-    return theme.spacing.lg;
-  },
-  arrowBottomLength() {
-    // The built in arrow is a polygon: 0,0 30,0 15,10
-    return 30;
-  },
-  arrowHeight() {
-    return 10;
-  },
-  arrowSide() {
-    return 2 * (this.arrowHeight() ** 2 * 2) ** 0.5;
-  },
-  arrowStrokeWidth() {
-    // This is eyeballed b/c relative to the svg viewbox coordinate system
-    return 2;
-  }
+function _EMOTION_STRINGIFIED_CSS_ERROR__$6() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const DEFAULT_WIDTH$1 = 320;
+const MIN_WIDTH = 320;
+const MAX_WIDTH = '90vw';
+const DEFAULT_POSITION = 'right';
+const ZINDEX_OVERLAY = 10;
+const ZINDEX_CONTENT = ZINDEX_OVERLAY + 10;
+var _ref2$2 = process.env.NODE_ENV === "production" ? {
+  name: "1tflovp",
+  styles: "flex-grow:1;margin-bottom:0;margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis"
+} : {
+  name: "1bqm4qg-Content",
+  styles: "flex-grow:1;margin-bottom:0;margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;label:Content;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
 };
-const dropdownContentStyles = theme => ({
-  backgroundColor: theme.colors.backgroundPrimary,
-  color: theme.colors.textPrimary,
-  lineHeight: theme.typography.lineHeightBase,
-  border: "1px solid ".concat(theme.colors.borderDecorative),
-  borderRadius: theme.borders.borderRadiusMd,
-  padding: "".concat(theme.spacing.xs, "px 0"),
-  boxShadow: theme.themeName !== 'dark' ? "0px 4px 16px 0px rgba(205, 218, 229, 1)" : undefined,
-  userSelect: 'none',
-  // Ant Design uses 1000s for their zIndex space; this ensures Radix works with that, but
-  // we'll likely need to be sure that all Radix components are using the same zIndex going forward.
-  zIndex: 2000,
-  a: importantify({
-    color: theme.colors.textPrimary,
-    '&:hover, &:focus': {
-      color: theme.colors.textPrimary
-    }
-  })
-});
-const contentStyles = theme => ({
-  ...dropdownContentStyles(theme)
-});
-const itemStyles = theme => ({
-  padding: "".concat(CONSTANTS.itemPaddingVertical(theme), "px ").concat(CONSTANTS.itemPaddingHorizontal(theme), "px"),
-  display: 'flex',
-  flexWrap: 'wrap',
-  alignItems: 'center',
-  outline: 'unset',
-  '&:hover': {
-    cursor: 'pointer'
-  },
-  '&:focus': {
-    backgroundColor: theme.colors.actionTertiaryBackgroundHover
-  },
-  '&[data-disabled]': {
-    pointerEvents: 'none',
-    color: theme.colors.actionDisabledText
-  }
-});
-const dangerItemStyles = theme => ({
-  color: theme.colors.textValidationDanger,
-  '&:hover, &:focus': {
-    backgroundColor: theme.colors.actionDangerDefaultBackgroundHover
-  }
-});
-const infoIconStyles = theme => ({
-  display: 'inline-flex',
-  paddingLeft: theme.spacing.xs,
-  color: theme.colors.textSecondary,
-  pointerEvents: 'all'
-});
-const checkboxItemStyles = (theme, flags) => ({
-  paddingLeft: CONSTANTS.checkboxIconWidth(theme, flags) + CONSTANTS.checkboxPaddingLeft(theme) + CONSTANTS.checkboxPaddingRight(theme, flags)
-});
-const metaTextStyles = theme => ({
-  color: theme.colors.textSecondary,
-  fontSize: theme.typography.fontSizeSm,
-  '[data-disabled] &': {
-    color: theme.colors.actionDisabledText
-  }
-});
-
-var DropdownMenu = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  Root: Root,
-  Content: Content$2,
-  SubContent: SubContent,
-  Trigger: Trigger,
-  Item: Item,
-  Label: Label$1,
-  Separator: Separator,
-  SubTrigger: SubTrigger,
-  TriggerItem: TriggerItem,
-  CheckboxItem: CheckboxItem,
-  ItemIndicator: ItemIndicator,
-  Arrow: Arrow,
-  RadioItem: RadioItem,
-  Group: Group$1,
-  RadioGroup: RadioGroup,
-  Sub: Sub,
-  HintColumn: HintColumn,
-  HintRow: HintRow,
-  IconWrapper: IconWrapper,
-  dropdownContentStyles: dropdownContentStyles
-});
+const Content$4 = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    children,
+    footer,
+    title,
+    width,
+    position: positionOverride,
+    useCustomScrollBehavior
+  } = _ref;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const rightContentPadding = theme.spacing.lg; // matches left/top/bottom padding
 
-const getLinkStyles = (theme, clsPrefix, useNewIcons) => {
-  const classTypography = ".".concat(clsPrefix, "-typography");
-  const styles = {
-    ["&".concat(classTypography, ", &").concat(classTypography, ":focus")]: {
-      color: theme.colors.actionTertiaryTextDefault
-    },
-    ["&".concat(classTypography, ":hover, &").concat(classTypography, ":hover .anticon")]: {
-      color: theme.colors.actionTertiaryTextHover,
-      textDecoration: 'underline'
-    },
-    ["&".concat(classTypography, ":active, &").concat(classTypography, ":active .anticon")]: {
-      color: theme.colors.actionTertiaryTextPress,
-      textDecoration: 'underline'
+  const position = positionOverride !== null && positionOverride !== void 0 ? positionOverride : DEFAULT_POSITION;
+  const overlayShow = position === 'right' ? keyframes({
+    '0%': {
+      transform: 'translate(100%, 0)'
     },
-    ["&".concat(classTypography, ":focus-visible")]: {
-      textDecoration: 'underline'
+    '100%': {
+      transform: 'translate(0, 0)'
+    }
+  }) : keyframes({
+    '0%': {
+      transform: 'translate(-100%, 0)'
     },
-    ...(useNewIcons && {
-      '.anticon': {
-        fontSize: 12
-      }
-    })
-  };
-  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getLinkStyles;");
-};
-const getEllipsisNewTabLinkStyles = () => {
-  const styles = {
-    paddingRight: 'calc(2px + 1em)',
-    // 1em for icon
-    position: 'relative'
-  };
-  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getEllipsisNewTabLinkStyles;");
-};
-const getIconStyles = theme => {
-  const styles = {
-    marginLeft: 2,
-    color: theme.colors.actionTertiaryTextDefault
-  };
-  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getIconStyles;");
-};
-const getEllipsisIconStyles = useNewIcons => {
-  const styles = {
-    position: 'absolute',
-    right: 0,
-    bottom: 0,
+    '100%': {
+      transform: 'translate(0, 0)'
+    }
+  });
+  const dialogPrimitiveContentStyle = /*#__PURE__*/css({
+    color: theme.colors.textPrimary,
+    backgroundColor: theme.colors.backgroundPrimary,
+    boxShadow: 'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
+    position: 'fixed',
     top: 0,
-    display: 'flex',
-    alignItems: 'center',
-    ...(useNewIcons && {
-      fontSize: 12
-    })
-  };
-  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getEllipsisIconStyles;");
-};
-function Link(_ref) {
+    left: position === 'left' ? 0 : undefined,
+    right: position === 'right' ? 0 : undefined,
+    boxSizing: 'border-box',
+    width: width !== null && width !== void 0 ? width : DEFAULT_WIDTH$1,
+    minWidth: MIN_WIDTH,
+    maxWidth: MAX_WIDTH,
+    zIndex: theme.options.zIndexBase + ZINDEX_CONTENT,
+    height: '100vh',
+    // in order to have specific content in the drawer scroll with fixed title
+    // hide overflow here and remove padding on the right side; content will be responsible for setting right padding
+    // so that the scrollbar will appear in the padding right gutter
+    paddingTop: theme.spacing.md,
+    paddingLeft: theme.spacing.lg,
+    paddingBottom: 0,
+    paddingRight: 0,
+    overflow: 'hidden',
+    '&:focus': {
+      outline: 'none'
+    },
+    '@media (prefers-reduced-motion: no-preference)': {
+      animation: "".concat(overlayShow, " 350ms cubic-bezier(0.16, 1, 0.3, 1)")
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:dialogPrimitiveContentStyle;");
+  return jsxs(Fragment, {
+    children: [jsx(DialogPrimitive.Overlay, {
+      css: /*#__PURE__*/css({
+        backgroundColor: theme.colors.overlayOverlay,
+        position: 'fixed',
+        inset: 0,
+        // needed so that it covers the PersonaNavSidebar
+        zIndex: theme.options.zIndexBase + ZINDEX_OVERLAY
+      }, process.env.NODE_ENV === "production" ? "" : ";label:Content;")
+    }), jsxs(DialogPrimitive.DialogContent, {
+      css: dialogPrimitiveContentStyle,
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'flex-start'
+      },
+      ref: ref,
+      children: [jsxs("div", {
+        css: /*#__PURE__*/css({
+          flexGrow: 0,
+          flexShrink: 1,
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          paddingRight: rightContentPadding,
+          marginBottom: theme.spacing.sm
+        }, process.env.NODE_ENV === "production" ? "" : ";label:Content;"),
+        children: [jsx(DialogPrimitive.Title, {
+          title: typeof title === 'string' ? title : undefined,
+          asChild: typeof title === 'string',
+          css: _ref2$2,
+          children: typeof title === 'string' ? jsx(Typography.Title, {
+            level: 2,
+            withoutMargins: true,
+            ellipsis: true,
+            children: title
+          }) : title
+        }), jsx(DialogPrimitive.Close, {
+          asChild: true,
+          css: /*#__PURE__*/css({
+            flexShrink: 1,
+            marginLeft: theme.spacing.xs
+          }, process.env.NODE_ENV === "production" ? "" : ";label:Content;"),
+          children: jsx(Button, {
+            "aria-label": "Close",
+            icon: jsx(CloseIcon, {})
+          })
+        })]
+      }), jsxs("div", {
+        css: /*#__PURE__*/css({
+          paddingRight: useCustomScrollBehavior ? 0 : rightContentPadding,
+          overflowY: useCustomScrollBehavior ? 'hidden' : 'auto',
+          ...(theme.themeName === 'default' && !useCustomScrollBehavior ? {
+            // Achieves an inner shadow on the content, but only when there is more left to scroll. When the content fits
+            // in the container without scrolling, no shadow will be shown.
+            // Taken from: https://css-tricks.com/scroll-shadows-with-javascript/
+            background: "linear-gradient(\n                    white 30%,\n                    rgba(255, 255, 255, 0)\n                  ) center top,\n  \n                  linear-gradient(\n                    rgba(255, 255, 255, 0),\n                    white 70%\n                  ) center bottom,\n      \n                  radial-gradient(\n                    farthest-side at 50% 0,\n                    rgba(0, 0, 0, 0.2),\n                    rgba(0, 0, 0, 0)\n                  ) center top,\n      \n                  radial-gradient(\n                    farthest-side at 50% 100%,\n                    rgba(0, 0, 0, 0.2),\n                    rgba(0, 0, 0, 0)\n                  ) center bottom",
+            backgroundRepeat: 'no-repeat',
+            backgroundSize: '100% 40px, 100% 40px, 100% 14px, 100% 14px',
+            backgroundAttachment: 'local, local, scroll, scroll'
+          } : {})
+        }, process.env.NODE_ENV === "production" ? "" : ";label:Content;"),
+        children: [children, !footer && jsx(Spacer, {
+          size: "lg"
+        })]
+      }), footer && jsx("div", {
+        style: {
+          paddingTop: theme.spacing.md,
+          paddingRight: rightContentPadding,
+          paddingBottom: theme.spacing.lg,
+          flexGrow: 0,
+          flexShrink: 1
+        },
+        children: footer
+      })]
+    })]
+  });
+});
+function Root$2(props) {
+  return jsx(DialogPrimitive.Root, {
+    ...props
+  });
+}
+function Trigger$2(props) {
+  return jsx(DialogPrimitive.Trigger, {
+    asChild: true,
+    ...props
+  });
+}
+
+var Drawer = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Content: Content$4,
+  Root: Root$2,
+  Trigger: Trigger$2
+});
+
+/**
+ * @deprecated Use `DropdownMenu` instead.
+ */
+const Dropdown = _ref => {
   let {
     dangerouslySetAntdProps,
     ...props
   } = _ref;
   const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(Dropdown$1, {
+      mouseLeaveDelay: 0.25,
+      ...props,
+      overlayStyle: {
+        zIndex: theme.options.zIndexBase + 50,
+        ...props.overlayStyle
+      },
+      ...dangerouslySetAntdProps
+    })
+  });
+};
+
+const Tooltip = _ref => {
+  let {
     children,
-    openInNewTab,
-    ...restProps
-  } = props;
+    title,
+    placement = 'top',
+    dataTestId,
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref;
   const {
-    theme,
-    classNamePrefix
+    theme
   } = useDesignSystemTheme();
-  const {
-    USE_NEW_ICONS: useNewIcons
-  } = useDesignSystemFlags();
-  const newTabProps = {
-    rel: 'noopener noreferrer',
-    target: '_blank'
-  };
-  const linkProps = openInNewTab ? {
-    ...restProps,
-    ...newTabProps
-  } : {
-    ...restProps
-  };
-  const linkStyles = props.ellipsis && openInNewTab ? [getLinkStyles(theme, classNamePrefix, useNewIcons), getEllipsisNewTabLinkStyles()] : getLinkStyles(theme, classNamePrefix, useNewIcons);
-  const iconStyles = props.ellipsis ? [getIconStyles(theme), getEllipsisIconStyles()] : getIconStyles(theme);
+  if (!title) {
+    return jsx(React__default.Fragment, {
+      children: children
+    });
+  }
   return jsx(DesignSystemAntDConfigProvider, {
-    children: jsxs(Typography$1.Link, {
-      css: linkStyles,
-      ...linkProps,
+    children: jsx(Tooltip$1
+    // eslint-disable-next-line react/forbid-dom-props -- FEINF-1337 - this should turn into data-testid
+    , {
+      title: jsx("span", {
+        "data-test-id": dataTestId,
+        children: title
+      }),
+      placement: placement
+      // Always trigger on hover and focus
+      ,
+      trigger: ['hover', 'focus'],
+      overlayInnerStyle: {
+        backgroundColor: '#2F3941',
+        lineHeight: '22px',
+        padding: '4px 8px'
+      },
+      overlayStyle: {
+        zIndex: theme.options.zIndexBase + 70
+      },
+      css: getAnimationCss(theme.options.enableAnimation),
       ...dangerouslySetAntdProps,
-      children: [children, openInNewTab ? jsx(NewWindowIcon, {
-        css: iconStyles,
-        ...newTabProps
-      }) : null]
+      ...props,
+      children: children
+    })
+  });
+};
+
+const Root$1 = DropdownMenu$1.Root; // Behavioral component only
+
+const Content$3 = /*#__PURE__*/forwardRef(function Content(_ref, ref) {
+  let {
+    children,
+    minWidth = 220,
+    ...props
+  } = _ref;
+  const {
+    getPopupContainer
+  } = useDesignSystemContext();
+  return jsx(DropdownMenu$1.Portal, {
+    container: getPopupContainer && getPopupContainer(),
+    children: jsx(DropdownMenu$1.Content, {
+      ref: ref,
+      css: [contentStyles$1, {
+        minWidth
+      }, process.env.NODE_ENV === "production" ? "" : ";label:Content;"],
+      sideOffset: 4,
+      align: "start",
+      ...props,
+      children: children
     })
   });
-}
-
-const {
-  Paragraph: AntDParagraph
-} = Typography$1;
-function getParagraphEmotionStyles(theme, props) {
-  return /*#__PURE__*/css({
-    '&&': {
-      fontSize: theme.typography.fontSizeBase,
-      lineHeight: theme.typography.lineHeightBase,
-      color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
-    }
-  }, props.disabled && {
-    '&&': {
-      color: theme.colors.actionDisabledText
-    }
-  }, props.withoutMargins && {
-    '&&': {
-      marginTop: 0,
-      marginBottom: 0
-    }
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getParagraphEmotionStyles;");
-}
-function Paragraph$1(userProps) {
-  const {
-    dangerouslySetAntdProps,
-    withoutMargins,
-    color,
+});
+const SubContent = /*#__PURE__*/forwardRef(function Content(_ref2, ref) {
+  let {
+    children,
+    minWidth = 220,
+    ...props
+  } = _ref2;
+  const {
+    getPopupContainer
+  } = useDesignSystemContext();
+  return jsx(DropdownMenu$1.Portal, {
+    container: getPopupContainer && getPopupContainer(),
+    children: jsx(DropdownMenu$1.SubContent, {
+      ref: ref,
+      css: [contentStyles$1, {
+        minWidth
+      }, process.env.NODE_ENV === "production" ? "" : ";label:SubContent;"],
+      sideOffset: -2,
+      alignOffset: -5,
+      ...props,
+      children: children
+    })
+  });
+});
+const Trigger$1 = /*#__PURE__*/forwardRef(function Trigger(_ref3, ref) {
+  let {
+    children,
+    ...props
+  } = _ref3;
+  return jsx(DropdownMenu$1.Trigger, {
+    ref: ref,
+    ...props,
+    children: children
+  });
+});
+const Item = /*#__PURE__*/forwardRef(function Item(_ref4, ref) {
+  let {
+    children,
+    disabledReason,
+    danger,
+    ...props
+  } = _ref4;
+  const itemRef = useRef(null);
+  useImperativeHandle(ref, () => itemRef.current);
+  return jsx(DropdownMenu$1.Item, {
+    css: theme => [itemStyles, danger && dangerItemStyles(theme)],
+    ref: itemRef,
+    ...props,
+    children: getNewChildren(children, props, disabledReason, itemRef)
+  });
+});
+const Label$1 = /*#__PURE__*/forwardRef(function Label(_ref5, ref) {
+  let {
+    children,
+    ...props
+  } = _ref5;
+  return jsx(DropdownMenu$1.Label, {
+    ref: ref,
+    css: [itemStyles, theme => ({
+      color: theme.colors.textSecondary,
+      '&:hover': {
+        cursor: 'default'
+      }
+    }), process.env.NODE_ENV === "production" ? "" : ";label:Label;"],
+    ...props,
+    children: children
+  });
+});
+const Separator = /*#__PURE__*/forwardRef(function Separator(_ref6, ref) {
+  let {
+    children,
+    ...props
+  } = _ref6;
+  return jsx(DropdownMenu$1.Separator, {
+    ref: ref,
+    css: theme => ({
+      height: 1,
+      margin: "".concat(theme.spacing.xs, "px ").concat(theme.spacing.sm, "px"),
+      backgroundColor: theme.colors.borderDecorative
+    }),
+    ...props,
+    children: children
+  });
+});
+const SubTrigger = /*#__PURE__*/forwardRef(function TriggerItem(_ref7, ref) {
+  let {
+    children,
+    disabledReason,
+    ...props
+  } = _ref7;
+  const subTriggerRef = useRef(null);
+  useImperativeHandle(ref, () => subTriggerRef.current);
+  return jsxs(DropdownMenu$1.SubTrigger, {
+    ref: subTriggerRef,
+    css: [itemStyles, theme => ({
+      '&[data-state="open"]': {
+        backgroundColor: theme.colors.actionTertiaryBackgroundHover
+      }
+    }), process.env.NODE_ENV === "production" ? "" : ";label:SubTrigger;"],
+    ...props,
+    children: [getNewChildren(children, props, disabledReason, subTriggerRef), jsx(HintColumn, {
+      css: theme => ({
+        margin: CONSTANTS$1.subMenuIconMargin(theme),
+        display: 'flex',
+        alignSelf: 'stretch',
+        alignItems: 'center'
+      }),
+      children: jsx(ChevronRightIcon, {
+        css: theme => ({
+          fontSize: CONSTANTS$1.subMenuIconSize(theme)
+        })
+      })
+    })]
+  });
+});
+
+/**
+ * Deprecated. Use `SubTrigger` instead.
+ * @deprecated
+ */
+const TriggerItem = SubTrigger;
+const CheckboxItem = /*#__PURE__*/forwardRef(function CheckboxItem(_ref8, ref) {
+  let {
+    children,
+    disabledReason,
+    ...props
+  } = _ref8;
+  const flags = useDesignSystemFlags();
+  const checkboxItemRef = useRef(null);
+  useImperativeHandle(ref, () => checkboxItemRef.current);
+  return jsx(DropdownMenu$1.CheckboxItem, {
+    ref: checkboxItemRef,
+    css: theme => [itemStyles, checkboxItemStyles(theme, flags)],
+    ...props,
+    children: getNewChildren(children, props, disabledReason, checkboxItemRef)
+  });
+});
+const ItemIndicator = /*#__PURE__*/forwardRef(function ItemIndicator(_ref9, ref) {
+  let {
+    children,
     ...props
-  } = userProps;
-  const {
-    theme
-  } = useDesignSystemTheme();
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(AntDParagraph, {
-      ...props,
-      className: props.className,
-      css: getParagraphEmotionStyles(theme, userProps),
-      ...dangerouslySetAntdProps
+  } = _ref9;
+  const flags = useDesignSystemFlags();
+  return jsx(DropdownMenu$1.ItemIndicator, {
+    ref: ref,
+    css: theme => ({
+      marginLeft: -(CONSTANTS$1.checkboxIconWidth(theme, flags) + CONSTANTS$1.checkboxPaddingRight(theme, flags)),
+      position: 'absolute',
+      ...(!flags.USE_NEW_ICONS && {
+        fontSize: 24
+      })
+    }),
+    ...props,
+    children: children !== null && children !== void 0 ? children : jsx(CheckIcon, {
+      css: theme => ({
+        color: theme.colors.textSecondary
+      })
     })
   });
-}
-
-const {
-  Text: AntDText
-} = Typography$1;
-function getTextEmotionStyles(theme, props) {
-  return /*#__PURE__*/css({
-    '&&': {
-      fontSize: theme.typography.fontSizeBase,
-      lineHeight: theme.typography.lineHeightBase,
-      color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
-    }
-  }, props.disabled && {
-    '&&': {
-      color: theme.colors.actionDisabledText
-    }
-  }, props.hint && {
-    '&&': {
-      fontSize: theme.typography.fontSizeSm,
-      lineHeight: theme.typography.lineHeightSm
-    }
-  }, props.bold && {
-    '&&': {
-      fontSize: theme.typography.fontSizeBase,
-      fontWeight: theme.typography.typographyBoldFontWeight,
-      lineHeight: theme.typography.lineHeightBase
-    }
-  }, props.code && {
-    '&& > code': {
-      fontSize: theme.typography.fontSizeBase,
-      lineHeight: theme.typography.lineHeightBase,
-      fontWeight: theme.typography.typographyBoldFontWeight,
-      background: theme.colors.typographyCodeBg,
-      fontFamily: 'monospace',
-      borderRadius: theme.borders.borderRadiusMd,
-      padding: '2px 4px',
-      border: 'unset',
-      margin: 0
-    }
-  }, props.size && {
-    '&&': (() => {
-      switch (props.size) {
-        case 'xxl':
-          return {
-            fontSize: theme.typography.fontSizeXxl,
-            lineHeight: theme.typography.lineHeightXxl
-          };
-        case 'xl':
-          return {
-            fontSize: theme.typography.fontSizeXl,
-            lineHeight: theme.typography.lineHeightXl
-          };
-        case 'lg':
-          return {
-            fontSize: theme.typography.fontSizeLg,
-            lineHeight: theme.typography.lineHeightLg
-          };
-        case 'sm':
-          return {
-            fontSize: theme.typography.fontSizeSm,
-            lineHeight: theme.typography.lineHeightSm
-          };
-        default:
-          return {
-            fontSize: theme.typography.fontSizeMd,
-            lineHeight: theme.typography.lineHeightMd
-          };
-      }
-    })()
-  }, props.withoutMargins && {
-    '&&': {
-      marginTop: 0,
-      marginBottom: 0
-    }
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getTextEmotionStyles;");
-}
-function Text(userProps) {
-  // Omit props that are not supported by `antd`
-  const {
-    dangerouslySetAntdProps,
-    bold,
-    hint,
-    withoutMargins,
-    color,
+});
+const Arrow$1 = /*#__PURE__*/forwardRef(function Arrow(_ref10, ref) {
+  let {
+    children,
     ...props
-  } = userProps;
+  } = _ref10;
   const {
     theme
   } = useDesignSystemTheme();
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(AntDText, {
-      ...props,
-      className: props.className,
-      css: getTextEmotionStyles(theme, userProps),
-      ...dangerouslySetAntdProps
-    })
+  return jsx(DropdownMenu$1.Arrow, {
+    css: /*#__PURE__*/css({
+      fill: theme.colors.backgroundPrimary,
+      stroke: theme.colors.borderDecorative,
+      strokeDashoffset: -CONSTANTS$1.arrowBottomLength(),
+      strokeDasharray: CONSTANTS$1.arrowBottomLength() + 2 * CONSTANTS$1.arrowSide(),
+      strokeWidth: CONSTANTS$1.arrowStrokeWidth(),
+      // TODO: This is a temporary fix for the alignment of the Arrow;
+      // Radix has changed the implementation for v1.0.0 (uses floating-ui)
+      // which has new behaviors for alignment that we don't want. Generally
+      // we need to fix the arrow to always be aligned to the left of the menu (with
+      // offset equal to border radius)
+      position: 'relative',
+      top: -1
+    }, process.env.NODE_ENV === "production" ? "" : ";label:Arrow;"),
+    ref: ref,
+    width: 12,
+    height: 6,
+    ...props,
+    children: children
   });
-}
+});
+const RadioItem = /*#__PURE__*/forwardRef(function RadioItem(_ref11, ref) {
+  let {
+    children,
+    disabledReason,
+    ...props
+  } = _ref11;
+  const flags = useDesignSystemFlags();
+  const radioItemRef = useRef(null);
+  useImperativeHandle(ref, () => radioItemRef.current);
+  return jsx(DropdownMenu$1.RadioItem, {
+    ref: radioItemRef,
+    css: theme => [itemStyles, checkboxItemStyles(theme, flags)],
+    ...props,
+    children: getNewChildren(children, props, disabledReason, radioItemRef)
+  });
+});
 
-const {
-  Title: AntDTitle
-} = Typography$1;
-function getLevelStyles(theme, props) {
-  switch (props.level) {
-    case 1:
-      return /*#__PURE__*/css({
-        '&&': {
-          fontSize: theme.typography.fontSizeXxl,
-          lineHeight: theme.typography.lineHeightXxl,
-          fontWeight: theme.typography.typographyBoldFontWeight
-        }
-      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
-    case 2:
-      return /*#__PURE__*/css({
-        '&&': {
-          fontSize: theme.typography.fontSizeXl,
-          lineHeight: theme.typography.lineHeightXl,
-          fontWeight: theme.typography.typographyBoldFontWeight
-        }
-      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
-    case 3:
-      return /*#__PURE__*/css({
-        '&&': {
-          fontSize: theme.typography.fontSizeLg,
-          lineHeight: theme.typography.lineHeightLg,
-          fontWeight: theme.typography.typographyBoldFontWeight
-        }
-      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
-    case 4:
-    default:
-      return /*#__PURE__*/css({
-        '&&': {
-          fontSize: theme.typography.fontSizeMd,
-          lineHeight: theme.typography.lineHeightMd,
-          fontWeight: theme.typography.typographyBoldFontWeight
-        }
-      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
-  }
-}
-function getTitleEmotionStyles(theme, props) {
-  return /*#__PURE__*/css(getLevelStyles(theme, props), {
-    '&&': {
-      color: getTypographyColor(theme, props.color, theme.colors.textPrimary)
-    }
-  }, props.withoutMargins && {
-    '&&': {
-      marginTop: '0 !important',
-      // override general styling
-      marginBottom: '0 !important' // override general styling
-    }
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getTitleEmotionStyles;");
-}
-function Title$1(userProps) {
-  const {
-    dangerouslySetAntdProps,
-    withoutMargins,
-    color,
+// UNWRAPPED RADIX-UI-COMPONENTS
+const Group$2 = DropdownMenu$1.Group;
+const RadioGroup = DropdownMenu$1.RadioGroup;
+const Sub = DropdownMenu$1.Sub;
+
+// EXTRA COMPONENTS
+const HintColumn = /*#__PURE__*/forwardRef(function HintColumn(_ref12, ref) {
+  let {
+    children,
     ...props
-  } = userProps;
-  const {
-    theme
-  } = useDesignSystemTheme();
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(AntDTitle, {
-      ...props,
-      className: props.className,
-      css: getTitleEmotionStyles(theme, userProps),
-      ...dangerouslySetAntdProps
+  } = _ref12;
+  return jsx("div", {
+    ref: ref,
+    css: [metaTextStyles, "margin-left:auto;" + (process.env.NODE_ENV === "production" ? "" : ";label:HintColumn;")],
+    ...props,
+    children: children
+  });
+});
+const HintRow = /*#__PURE__*/forwardRef(function HintRow(_ref13, ref) {
+  let {
+    children,
+    ...props
+  } = _ref13;
+  return jsx("div", {
+    ref: ref,
+    css: [metaTextStyles, "min-width:100%;" + (process.env.NODE_ENV === "production" ? "" : ";label:HintRow;")],
+    ...props,
+    children: children
+  });
+});
+const IconWrapper = /*#__PURE__*/forwardRef(function IconWrapper(_ref14, ref) {
+  let {
+    children,
+    ...props
+  } = _ref14;
+  return jsx("div", {
+    ref: ref,
+    css: theme => ({
+      fontSize: 16,
+      color: theme.colors.textSecondary,
+      paddingRight: 4
+    }),
+    ...props,
+    children: children
+  });
+});
+const getNewChildren = (children, props, disabledReason, ref) => {
+  const childCount = Children.count(children);
+  const tooltip = jsx(Tooltip, {
+    title: disabledReason,
+    placement: "right",
+    dangerouslySetAntdProps: {
+      getPopupContainer: () => ref.current || document.body
+    },
+    children: jsx("span", {
+      css: theme => infoIconStyles(theme),
+      children: jsx(InfoBorderIcon, {})
     })
   });
-}
-
-const Typography = /* #__PURE__ */(() => {
-  function Typography(_ref) {
-    let {
-      dangerouslySetAntdProps,
-      ...props
-    } = _ref;
-    return jsx(DesignSystemAntDConfigProvider, {
-      children: jsx(Typography$1, {
-        ...props,
-        ...dangerouslySetAntdProps
-      })
+  if (childCount === 1) {
+    return getChild(children, !!props['disabled'], disabledReason, tooltip, 0, childCount);
+  }
+  return Children.map(children, (child, idx) => {
+    return getChild(child, !!props['disabled'], disabledReason, tooltip, idx, childCount);
+  });
+};
+const getChild = (child, isDisabled, disabledReason, tooltip, index, siblingCount) => {
+  const HintColumnType = jsx(HintColumn, {}).type;
+  const isHintColumnType = !!(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]
     });
   }
-  Typography.Text = Text;
-  Typography.Title = Title$1;
-  Typography.Paragraph = Paragraph$1;
-  Typography.Link = Link;
-  return Typography;
-})();
+  return child;
+};
+
+// CONSTANTS
+const CONSTANTS$1 = {
+  itemPaddingVertical(theme) {
+    // The number from the mocks is the midpoint between constants
+    return 0.5 * theme.spacing.xs + 0.5 * theme.spacing.sm;
+  },
+  itemPaddingHorizontal(theme) {
+    return theme.spacing.sm;
+  },
+  checkboxIconWidth(theme, flags) {
+    return flags.USE_NEW_ICONS ? theme.general.iconFontSizeNew : theme.spacing.lg;
+  },
+  checkboxPaddingLeft(theme) {
+    return theme.spacing.sm;
+  },
+  checkboxPaddingRight(theme, flags) {
+    return flags.USE_NEW_ICONS ? theme.spacing.sm : theme.spacing.xs;
+  },
+  subMenuIconMargin(theme) {
+    // Negative margin so the icons can be larger without increasing the overall item height
+    const iconMarginVertical = this.itemPaddingVertical(theme) / 2;
+    const iconMarginRight = -this.itemPaddingVertical(theme) + theme.spacing.sm * 1.5;
+    return "".concat(-iconMarginVertical, "px ").concat(-iconMarginRight, "px ").concat(-iconMarginVertical, "px auto");
+  },
+  subMenuIconSize(theme) {
+    return theme.spacing.lg;
+  },
+  arrowBottomLength() {
+    // The built in arrow is a polygon: 0,0 30,0 15,10
+    return 30;
+  },
+  arrowHeight() {
+    return 10;
+  },
+  arrowSide() {
+    return 2 * (this.arrowHeight() ** 2 * 2) ** 0.5;
+  },
+  arrowStrokeWidth() {
+    // This is eyeballed b/c relative to the svg viewbox coordinate system
+    return 2;
+  }
+};
+const dropdownContentStyles = theme => ({
+  backgroundColor: theme.colors.backgroundPrimary,
+  color: theme.colors.textPrimary,
+  lineHeight: theme.typography.lineHeightBase,
+  border: "1px solid ".concat(theme.colors.borderDecorative),
+  borderRadius: theme.borders.borderRadiusMd,
+  padding: "".concat(theme.spacing.xs, "px 0"),
+  boxShadow: theme.themeName !== 'dark' ? "0px 4px 16px 0px rgba(205, 218, 229, 1)" : undefined,
+  userSelect: 'none',
+  // Ant Design uses 1000s for their zIndex space; this ensures Radix works with that, but
+  // we'll likely need to be sure that all Radix components are using the same zIndex going forward.
+  //
+  // Additionally, there is an issue where macOS overlay scrollbars in Chrome and Safari (sometimes!)
+  // overlap other elements with higher zIndex, because the scrollbars themselves have zIndex 9999,
+  // so we have to use a higher value than that: https://github.com/databricks/universe/pull/232825
+  zIndex: 10000,
+  a: importantify({
+    color: theme.colors.textPrimary,
+    '&:hover, &:focus': {
+      color: theme.colors.textPrimary
+    }
+  })
+});
+const contentStyles$1 = theme => ({
+  ...dropdownContentStyles(theme)
+});
+const itemStyles = theme => ({
+  padding: "".concat(CONSTANTS$1.itemPaddingVertical(theme), "px ").concat(CONSTANTS$1.itemPaddingHorizontal(theme), "px"),
+  display: 'flex',
+  flexWrap: 'wrap',
+  alignItems: 'center',
+  outline: 'unset',
+  '&:hover': {
+    cursor: 'pointer'
+  },
+  '&:focus': {
+    backgroundColor: theme.colors.actionTertiaryBackgroundHover
+  },
+  '&[data-disabled]': {
+    pointerEvents: 'none',
+    color: theme.colors.actionDisabledText
+  }
+});
+const dangerItemStyles = theme => ({
+  color: theme.colors.textValidationDanger,
+  '&:hover, &:focus': {
+    backgroundColor: theme.colors.actionDangerDefaultBackgroundHover
+  }
+});
+const infoIconStyles = theme => ({
+  display: 'inline-flex',
+  paddingLeft: theme.spacing.xs,
+  color: theme.colors.textSecondary,
+  pointerEvents: 'all'
+});
+const checkboxItemStyles = (theme, flags) => ({
+  paddingLeft: CONSTANTS$1.checkboxIconWidth(theme, flags) + CONSTANTS$1.checkboxPaddingLeft(theme) + CONSTANTS$1.checkboxPaddingRight(theme, flags)
+});
+const metaTextStyles = theme => ({
+  color: theme.colors.textSecondary,
+  fontSize: theme.typography.fontSizeSm,
+  '[data-disabled] &': {
+    color: theme.colors.actionDisabledText
+  }
+});
+
+var DropdownMenu = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Root: Root$1,
+  Content: Content$3,
+  SubContent: SubContent,
+  Trigger: Trigger$1,
+  Item: Item,
+  Label: Label$1,
+  Separator: Separator,
+  SubTrigger: SubTrigger,
+  TriggerItem: TriggerItem,
+  CheckboxItem: CheckboxItem,
+  ItemIndicator: ItemIndicator,
+  Arrow: Arrow$1,
+  RadioItem: RadioItem,
+  Group: Group$2,
+  RadioGroup: RadioGroup,
+  Sub: Sub,
+  HintColumn: HintColumn,
+  HintRow: HintRow,
+  IconWrapper: IconWrapper,
+  dropdownContentStyles: dropdownContentStyles
+});
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__$5() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const {
@@ -10896,6 +11149,7 @@ function getEmptyStyles(theme) {
     alignItems: 'center',
     textAlign: 'center',
     maxWidth: 600,
+    wordBreak: 'break-word',
     // Set size of image to 64px
     '> :first-child': {
       fontSize: 64,
@@ -10942,9 +11196,11 @@ const Empty = props => {
     description,
     image = jsx(GridDashIcon, {}),
     button,
-    dangerouslyAppendEmotionCSS
+    dangerouslyAppendEmotionCSS,
+    ...dataProps
   } = props;
   return jsx("div", {
+    ...dataProps,
     css: _ref$3,
     children: jsxs("div", {
       css: [getEmptyStyles(theme), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Empty;"],
@@ -11354,7 +11610,7 @@ const DuboisInput = /*#__PURE__*/forwardRef(function Input(_ref4, ref) {
     })
   });
 });
-const Group = _ref5 => {
+const Group$1 = _ref5 => {
   let {
     dangerouslySetAntdProps,
     dangerouslyAppendEmotionCSS,
@@ -11378,7 +11634,7 @@ const Group = _ref5 => {
 const InputNamespace = /* #__PURE__ */Object.assign(DuboisInput, {
   TextArea,
   Password,
-  Group
+  Group: Group$1
 });
 const Input = InputNamespace;
 
@@ -11387,67 +11643,24 @@ const Input = InputNamespace;
 // since these will be exposed in the library's exports.
 const __INTERNAL_DO_NOT_USE__TextArea = TextArea;
 const __INTERNAL_DO_NOT_USE__Password = Password;
-const __INTERNAL_DO_NOT_USE_DEDUPE__Group = Group;
+const __INTERNAL_DO_NOT_USE_DEDUPE__Group = Group$1;
 
-const verticalGroupEmotionStyles = _ref => {
+const getRadioInputStyles = _ref => {
   let {
-    theme,
     clsPrefix,
-    isBold
-  } = _ref;
-  return /*#__PURE__*/css(importantify({
-    display: 'flex',
-    flexDirection: 'column',
-    flexWrap: 'wrap',
-    '& > label': {
-      fontWeight: isBold ? theme.typography.typographyBoldFontWeight : 'normal'
-      // TODO(FEINF-1496): Uncomment, removed for now to avoid impacting app with V2 changes
-      // paddingBottom: theme.spacing.sm,
-    },
-
-    ["& > label + .".concat(clsPrefix, "-hint")]: {
-      // TODO(FEINF-1496): Uncomment, removed for now to avoid impacting app with V2 changes
-      // marginTop: `-${theme.spacing.sm}px`,
-      marginBottom: theme.spacing.sm,
-      paddingLeft: theme.spacing.lg
-    }
-  }), process.env.NODE_ENV === "production" ? "" : ";label:verticalGroupEmotionStyles;");
-};
-const radioOverrideEmotionStyles = _ref2 => {
-  let {
     theme,
-    clsPrefix,
-    classNamePrefix,
-    isBold
-  } = _ref2;
-  return /*#__PURE__*/css({
-    '&&': {
-      display: 'grid',
-      gridTemplateRows: '[label] auto [hint] auto',
-      gridAutoColumns: 'max-content',
-      // TODO(FEINF-1496): Uncomment, removed for now to avoid impacting app with V2 changes
-      // gridColumnGap: theme.spacing.md,
-      gridColumnGap: theme.spacing.sm
-    },
-    '& > label': {
-      fontWeight: isBold ? theme.typography.typographyBoldFontWeight : 'normal',
-      gridRow: 'label / label',
-      marginRight: 0
-    },
-    ["& > label + .".concat(classNamePrefix, "-hint")]: {
-      display: 'inline-block',
-      gridRow: 'hint / hint',
-      paddingLeft: theme.spacing.lg
-    },
+    useNewStyles
+  } = _ref;
+  return {
     [".".concat(clsPrefix)]: {
       alignSelf: 'start',
       // Unchecked Styles
       ["> .".concat(clsPrefix, "-input + .").concat(clsPrefix, "-inner")]: {
         width: theme.spacing.md,
         height: theme.spacing.md,
-        background: theme.colors.radioDefaultBackground,
+        background: useNewStyles ? theme.colors.actionDefaultBackgroundDefault : theme.colors.radioDefaultBackground,
         borderStyle: 'solid',
-        borderColor: theme.colors.radioDefaultBorder,
+        borderColor: useNewStyles ? theme.colors.actionDefaultBorderDefault : theme.colors.radioDefaultBorder,
         boxShadow: 'unset',
         transform: 'unset',
         // This prevents an awkward jitter on the border
@@ -11461,21 +11674,27 @@ const radioOverrideEmotionStyles = _ref2 => {
       },
       // Hover
       ["&:not(.".concat(clsPrefix, "-disabled) > .").concat(clsPrefix, "-input:hover + .").concat(clsPrefix, "-inner")]: {
-        borderColor: theme.colors.radioInteractiveHover,
-        background: theme.colors.radioInteractiveHoverSecondary
+        borderColor: useNewStyles ? theme.colors.actionPrimaryBackgroundHover : theme.colors.radioInteractiveHover,
+        background: useNewStyles ? theme.colors.actionDefaultBackgroundHover : theme.colors.radioInteractiveHoverSecondary
       },
       // Focus
       ["&:not(.".concat(clsPrefix, "-disabled)> .").concat(clsPrefix, "-input:focus + .").concat(clsPrefix, "-inner")]: {
-        borderColor: theme.colors.primary
+        borderColor: useNewStyles ? theme.colors.actionPrimaryBackgroundDefault : theme.colors.primary
       },
       // Active
       ["&:not(.".concat(clsPrefix, "-disabled)> .").concat(clsPrefix, "-input:active + .").concat(clsPrefix, "-inner")]: {
-        borderColor: theme.colors.radioInteractivePress,
-        background: theme.colors.radioInteractivePressSecondary
+        borderColor: useNewStyles ? theme.colors.actionPrimaryBackgroundPress : theme.colors.radioInteractivePress,
+        background: useNewStyles ? theme.colors.actionDefaultBackgroundPress : theme.colors.radioInteractivePressSecondary
       },
       // Disabled
       ["&.".concat(clsPrefix, "-disabled > .").concat(clsPrefix, "-input + .").concat(clsPrefix, "-inner")]: {
-        borderColor: "".concat(theme.colors.radioDisabled, "!important") // Ant uses !important
+        ...(useNewStyles ? {
+          border: "none !important",
+          // Ant uses !important
+          background: theme.colors.actionDisabledBackground
+        } : {
+          borderColor: "".concat(theme.colors.radioDisabled, "!important") // Ant uses !important
+        })
       },
 
       // Checked Styles
@@ -11484,69 +11703,163 @@ const radioOverrideEmotionStyles = _ref2 => {
           border: 'unset'
         },
         ["> .".concat(clsPrefix, "-input + .").concat(clsPrefix, "-inner")]: {
-          background: theme.colors.primary,
+          background: useNewStyles ? theme.colors.actionPrimaryBackgroundDefault : theme.colors.primary,
           borderColor: theme.colors.primary,
           '&:after': {
             content: "\"\"",
             borderRadius: theme.spacing.xs,
-            backgroundColor: theme.colors.radioDefaultBackground,
+            backgroundColor: useNewStyles ? theme.colors.white : theme.colors.radioDefaultBackground,
             width: theme.spacing.xs,
             height: theme.spacing.xs
           }
         },
         // Hover
         ["&:not(.".concat(clsPrefix, "-disabled) > .").concat(clsPrefix, "-input:hover + .").concat(clsPrefix, "-inner")]: {
-          background: theme.colors.radioInteractiveHover,
-          borderColor: theme.colors.radioInteractiveHover
+          background: useNewStyles ? theme.colors.actionPrimaryBackgroundHover : theme.colors.radioInteractiveHover,
+          borderColor: useNewStyles ? theme.colors.actionPrimaryBackgroundPress : theme.colors.radioInteractiveHover
         },
         // Focus
         ["&:not(.".concat(clsPrefix, "-disabled) > .").concat(clsPrefix, "-input:focus-visible + .").concat(clsPrefix, "-inner")]: {
-          background: theme.colors.primary,
-          borderColor: theme.colors.primary,
-          boxShadow: "0 0 0 1px ".concat(theme.colors.radioDefaultBackground, ", 0 0 0 3px ").concat(theme.colors.primary)
+          background: useNewStyles ? theme.colors.actionDefaultBackgroundPress : theme.colors.primary,
+          borderColor: useNewStyles ? theme.colors.actionDefaultBorderFocus : theme.colors.primary,
+          boxShadow: "0 0 0 1px ".concat(useNewStyles ? theme.colors.actionDefaultBackgroundDefault : theme.colors.radioDefaultBackground, ", 0 0 0 3px ").concat(theme.colors.primary)
         },
         // Active
         ["&:not(.".concat(clsPrefix, "-disabled) > .").concat(clsPrefix, "-input:active + .").concat(clsPrefix, "-inner")]: {
-          background: theme.colors.radioInteractivePress,
-          borderColor: theme.colors.radioInteractivePress
+          background: useNewStyles ? theme.colors.actionDefaultBackgroundPress : theme.colors.radioInteractivePress,
+          borderColor: useNewStyles ? theme.colors.actionDefaultBorderPress : theme.colors.radioInteractivePress
         },
         // Disabled
         ["&.".concat(clsPrefix, "-disabled > .").concat(clsPrefix, "-input + .").concat(clsPrefix, "-inner")]: {
-          background: "".concat(theme.colors.radioDisabled),
-          border: "2px solid ".concat(theme.colors.radioDisabled, "!important") // !important inherited from ant
+          background: useNewStyles ? theme.colors.actionDisabledBackground : theme.colors.radioDisabled,
+          border: useNewStyles ? 'none !important' : "2px solid ".concat(theme.colors.radioDisabled, "!important") // !important inherited from ant
+        }
+      }
+    }
+  };
+};
+
+const getCommonRadioGroupStyles = _ref2 => {
+  let {
+    theme,
+    clsPrefix,
+    classNamePrefix,
+    useNewStyles
+  } = _ref2;
+  return /*#__PURE__*/css({
+    '& > label': {
+      ...(useNewStyles && {
+        ["&.".concat(classNamePrefix, "-radio-wrapper-disabled > span")]: {
+          color: theme.colors.textPrimary
         }
-      }
+      })
     },
-
+    ["& > label + .".concat(classNamePrefix, "-hint")]: {
+      paddingLeft: theme.spacing.lg
+    },
+    ...getRadioInputStyles({
+      theme,
+      clsPrefix,
+      useNewStyles
+    }),
     ...getAnimationCss(theme.options.enableAnimation)
-  }, process.env.NODE_ENV === "production" ? "" : ";label:radioOverrideEmotionStyles;");
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getCommonRadioGroupStyles;");
 };
-const getRadioStyles = _ref3 => {
+const getHorizontalRadioGroupStyles = _ref3 => {
   let {
     theme,
-    isBold
+    classNamePrefix,
+    useNewStyles
   } = _ref3;
-  const styles = {
+  return /*#__PURE__*/css({
     '&&': {
-      fontWeight: isBold ? theme.typography.typographyBoldFontWeight : 'normal'
+      display: 'grid',
+      gridTemplateRows: '[label] auto [hint] auto',
+      gridAutoColumns: 'max-content',
+      gridColumnGap: useNewStyles ? theme.spacing.md : theme.spacing.sm
+    },
+    '& > label': {
+      gridRow: 'label / label',
+      marginRight: 0
+    },
+    ["& > label + .".concat(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',
+      ...(useNewStyles && {
+        paddingBottom: theme.spacing.sm
+      })
+    },
+    ["& > label:last-of-type"]: {
+      paddingBottom: 0
+    },
+    ["& > label + .".concat(classNamePrefix, "-hint")]: {
+      marginBottom: theme.spacing.sm,
+      paddingLeft: theme.spacing.lg,
+      ...(useNewStyles && {
+        marginTop: "-".concat(theme.spacing.sm, "px")
+      })
+    },
+    ["& > label:last-of-type + .".concat(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(importantify(styles), process.env.NODE_ENV === "production" ? "" : ";label:getRadioStyles;");
+  return /*#__PURE__*/css({
+    ...getRadioInputStyles({
+      theme,
+      clsPrefix,
+      useNewStyles
+    }),
+    ...styles
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getRadioStyles;");
 };
-const DuboisRadio = /*#__PURE__*/forwardRef(function Radio(_ref4, ref) {
+const DuboisRadio = /*#__PURE__*/forwardRef(function Radio(_ref6, ref) {
   let {
     dangerouslySetAntdProps,
-    isBold = false,
     ...props
-  } = _ref4;
+  } = _ref6;
   const {
-    theme
+    theme,
+    getPrefixedClassName
   } = useDesignSystemTheme();
+  const {
+    USE_NEW_RADIO_STYLES
+  } = useDesignSystemFlags();
+  const clsPrefix = getPrefixedClassName('radio');
   return jsx(DesignSystemAntDConfigProvider, {
     children: jsx(Radio$1, {
       css: getRadioStyles({
         theme,
-        isBold
+        clsPrefix,
+        useNewStyles: USE_NEW_RADIO_STYLES
       }),
       ...props,
       ...dangerouslySetAntdProps,
@@ -11554,59 +11867,80 @@ const DuboisRadio = /*#__PURE__*/forwardRef(function Radio(_ref4, ref) {
     })
   });
 });
-const StyledRadioGroup = /*#__PURE__*/forwardRef(function StyledRadioGroup(_ref5, ref) {
+const StyledRadioGroup = /*#__PURE__*/forwardRef(function StyledRadioGroup(_ref7, ref) {
   let {
     dangerouslySetAntdProps,
-    isBold = false,
     ...props
-  } = _ref5;
+  } = _ref7;
   const {
     theme,
     getPrefixedClassName,
     classNamePrefix
   } = useDesignSystemTheme();
+  const {
+    USE_NEW_RADIO_STYLES
+  } = useDesignSystemFlags();
   const clsPrefix = getPrefixedClassName('radio');
   return jsx(DesignSystemAntDConfigProvider, {
     children: jsx(Radio$1.Group, {
       ...props,
-      css: radioOverrideEmotionStyles({
+      css: getCommonRadioGroupStyles({
         theme,
         clsPrefix,
         classNamePrefix,
-        isBold
+        useNewStyles: USE_NEW_RADIO_STYLES
       }),
       ...dangerouslySetAntdProps,
       ref: ref
     })
   });
 });
-const VerticalGroup = /*#__PURE__*/forwardRef(function VerticalGroup(_ref6, ref) {
+const HorizontalGroup = /*#__PURE__*/forwardRef(function HorizontalGroup(_ref8, ref) {
   let {
     dangerouslySetAntdProps,
-    isBold = false,
     ...props
-  } = _ref6;
+  } = _ref8;
   const {
     theme,
     classNamePrefix
   } = useDesignSystemTheme();
+  const {
+    USE_NEW_RADIO_STYLES
+  } = useDesignSystemFlags();
   return jsx(StyledRadioGroup, {
-    css: verticalGroupEmotionStyles({
+    css: getHorizontalRadioGroupStyles({
       theme,
-      clsPrefix: classNamePrefix,
-      isBold
+      classNamePrefix,
+      useNewStyles: USE_NEW_RADIO_STYLES
     }),
     ...props,
     ref: ref,
     ...dangerouslySetAntdProps
   });
 });
-const HorizontalGroup = /*#__PURE__*/forwardRef(function HorizontalGroup(_ref7, ref) {
+const Group = /*#__PURE__*/forwardRef(function HorizontalGroup(_ref9, ref) {
   let {
     dangerouslySetAntdProps,
+    layout = 'vertical',
     ...props
-  } = _ref7;
+  } = _ref9;
+  const {
+    theme,
+    classNamePrefix
+  } = useDesignSystemTheme();
+  const {
+    USE_NEW_RADIO_STYLES
+  } = useDesignSystemFlags();
   return jsx(StyledRadioGroup, {
+    css: layout === 'horizontal' ? getHorizontalRadioGroupStyles({
+      theme,
+      classNamePrefix,
+      useNewStyles: USE_NEW_RADIO_STYLES
+    }) : getVerticalRadioGroupStyles({
+      theme,
+      classNamePrefix,
+      useNewStyles: USE_NEW_RADIO_STYLES
+    }),
     ...props,
     ref: ref,
     ...dangerouslySetAntdProps
@@ -11615,7 +11949,7 @@ const HorizontalGroup = /*#__PURE__*/forwardRef(function HorizontalGroup(_ref7,
 
 // Note: We are overriding ant's default "Group" with our own.
 const RadioNamespace = /* #__PURE__ */Object.assign(DuboisRadio, {
-  Group: VerticalGroup,
+  Group,
   HorizontalGroup
 });
 const Radio = RadioNamespace;
@@ -11625,7 +11959,7 @@ const Radio = RadioNamespace;
 // 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 = VerticalGroup;
+const __INTERNAL_DO_NOT_USE__VerticalGroup = Group;
 const __INTERNAL_DO_NOT_USE__HorizontalGroup = HorizontalGroup;
 
 function getSelectEmotionStyles(_ref) {
@@ -11717,6 +12051,7 @@ function getSelectEmotionStyles(_ref) {
       [classSelector]: {
         outlineColor: theme.colors.actionPrimaryBackgroundDefault,
         outlineWidth: 2,
+        outlineOffset: -2,
         outlineStyle: 'solid',
         borderColor: 'transparent',
         boxShadow: 'none'
@@ -11984,6 +12319,7 @@ function DuboisSelect(_ref2, ref) {
     optionFilterProp,
     dangerouslySetAntdProps,
     virtual,
+    dropdownClassName,
     ...restProps
   } = _ref2;
   const {
@@ -12035,7 +12371,7 @@ function DuboisSelect(_ref2, ref) {
             }),
             children: "No results found"
           }),
-          dropdownClassName: css$1(getDropdownStyles(clsPrefix, theme, USE_NEW_SELECT_DROPDOWN_STYLES, useNewIcons)),
+          dropdownClassName: css$1([getDropdownStyles(clsPrefix, theme, USE_NEW_SELECT_DROPDOWN_STYLES, useNewIcons), dropdownClassName]),
           maxTagPlaceholder: items => "+ ".concat(items.length, " more"),
           mode: mode,
           options: options,
@@ -12251,7 +12587,7 @@ function RHFControlledInput(_ref) {
     defaultValue: restProps.defaultValue
   });
 }
-function RHFControlledSelect(_ref2) {
+function RHFControlledPasswordInput(_ref2) {
   let {
     name,
     control,
@@ -12265,6 +12601,48 @@ function RHFControlledSelect(_ref2) {
     control: control,
     rules: rules
   });
+  return jsx(Input.Password, {
+    ...restProps,
+    ...field,
+    value: field.value,
+    defaultValue: restProps.defaultValue
+  });
+}
+function RHFControlledTextArea(_ref3) {
+  let {
+    name,
+    control,
+    rules,
+    ...restProps
+  } = _ref3;
+  const {
+    field
+  } = useController({
+    name: name,
+    control: control,
+    rules: rules
+  });
+  return jsx(Input.TextArea, {
+    ...restProps,
+    ...field,
+    value: field.value,
+    defaultValue: restProps.defaultValue
+  });
+}
+function RHFControlledSelect(_ref4) {
+  let {
+    name,
+    control,
+    rules,
+    ...restProps
+  } = _ref4;
+  const {
+    field
+  } = useController({
+    name: name,
+    control: control,
+    rules: rules
+  });
   return jsx(Select, {
     ...restProps,
     ...field,
@@ -12272,13 +12650,13 @@ function RHFControlledSelect(_ref2) {
     defaultValue: field.value
   });
 }
-function RHFControlledCheckboxGroup(_ref3) {
+function RHFControlledCheckboxGroup(_ref5) {
   let {
     name,
     control,
     rules,
     ...restProps
-  } = _ref3;
+  } = _ref5;
   const {
     field
   } = useController({
@@ -12292,13 +12670,13 @@ function RHFControlledCheckboxGroup(_ref3) {
     value: field.value
   });
 }
-function RHFControlledRadioGroup(_ref4) {
+function RHFControlledRadioGroup(_ref6) {
   let {
     name,
     control,
     rules,
     ...restProps
-  } = _ref4;
+  } = _ref6;
   const {
     field
   } = useController({
@@ -12311,13 +12689,13 @@ function RHFControlledRadioGroup(_ref4) {
     ...field
   });
 }
-function RHFControlledSwitch(_ref5) {
+function RHFControlledSwitch(_ref7) {
   let {
     name,
     control,
     rules,
     ...restProps
-  } = _ref5;
+  } = _ref7;
   const {
     field: {
       value,
@@ -12336,6 +12714,8 @@ function RHFControlledSwitch(_ref5) {
 }
 const RHFControlledComponents = {
   Input: RHFControlledInput,
+  Password: RHFControlledPasswordInput,
+  TextArea: RHFControlledTextArea,
   Select: RHFControlledSelect,
   CheckboxGroup: RHFControlledCheckboxGroup,
   RadioGroup: RHFControlledRadioGroup,
@@ -12486,7 +12866,7 @@ const {
   Header,
   Footer,
   Sider,
-  Content: Content$1
+  Content: Content$2
 } = Layout$1;
 const Layout = /* #__PURE__ */(() => {
   const Layout = _ref => {
@@ -12554,7 +12934,7 @@ const Layout = /* #__PURE__ */(() => {
       ...props
     } = _ref5;
     return jsx(DesignSystemAntDConfigProvider, {
-      children: jsx(Content$1, {
+      children: jsx(Content$2, {
         ...props,
         children: jsx(RestoreAntDDefaultClsPrefix, {
           children: children
@@ -12666,7 +13046,8 @@ const getModalEmotionStyles = args => {
       lineHeight: 'normal',
       display: 'flex',
       alignItems: 'center',
-      justifyContent: 'center'
+      justifyContent: 'center',
+      color: theme.colors.textSecondary
     },
     [classNameClose]: {
       height: BUTTON_SIZE,
@@ -13136,7 +13517,7 @@ const Popover = _ref => {
     theme
   } = useDesignSystemTheme();
   return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(Popover$1, {
+    children: jsx(Popover$2, {
       zIndex: theme.options.zIndexBase + 30,
       ...props,
       content: jsx(RestoreAntDDefaultClsPrefix, {
@@ -13146,6 +13527,125 @@ const Popover = _ref => {
   });
 };
 
+const Root = Popover$1.Root; // Behavioral component only
+
+const Content$1 = /*#__PURE__*/forwardRef(function Content(_ref, ref) {
+  let {
+    children,
+    minWidth = 220,
+    ...props
+  } = _ref;
+  const {
+    getPopupContainer
+  } = useDesignSystemContext();
+  return jsx(Popover$1.Portal, {
+    container: getPopupContainer && getPopupContainer(),
+    children: jsx(Popover$1.Content, {
+      ref: ref,
+      css: [contentStyles, {
+        minWidth
+      }, process.env.NODE_ENV === "production" ? "" : ";label:Content;"],
+      sideOffset: 4,
+      ...props,
+      children: children
+    })
+  });
+});
+const Trigger = /*#__PURE__*/forwardRef(function Trigger(_ref2, ref) {
+  let {
+    children,
+    ...props
+  } = _ref2;
+  return jsx(Popover$1.Trigger, {
+    ref: ref,
+    ...props,
+    children: children
+  });
+});
+const Arrow = /*#__PURE__*/forwardRef(function Arrow(_ref3, ref) {
+  let {
+    children,
+    ...props
+  } = _ref3;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsx(Popover$1.Arrow, {
+    css: /*#__PURE__*/css({
+      fill: theme.colors.backgroundPrimary,
+      stroke: theme.colors.borderDecorative,
+      strokeDashoffset: -CONSTANTS.arrowBottomLength(),
+      strokeDasharray: CONSTANTS.arrowBottomLength() + 2 * CONSTANTS.arrowSide(),
+      strokeWidth: CONSTANTS.arrowStrokeWidth(),
+      // TODO: This is a temporary fix for the alignment of the Arrow;
+      // Radix has changed the implementation for v1.0.0 (uses floating-ui)
+      // which has new behaviors for alignment that we don't want. Generally
+      // we need to fix the arrow to always be aligned to the left of the menu (with
+      // offset equal to border radius)
+      position: 'relative',
+      top: -1
+    }, process.env.NODE_ENV === "production" ? "" : ";label:Arrow;"),
+    ref: ref,
+    width: 12,
+    height: 6,
+    ...props,
+    children: children
+  });
+});
+
+// CONSTANTS
+const CONSTANTS = {
+  arrowBottomLength() {
+    // The built in arrow is a polygon: 0,0 30,0 15,10
+    return 30;
+  },
+  arrowHeight() {
+    return 10;
+  },
+  arrowSide() {
+    return 2 * (this.arrowHeight() ** 2 * 2) ** 0.5;
+  },
+  arrowStrokeWidth() {
+    // This is eyeballed b/c relative to the svg viewbox coordinate system
+    return 2;
+  }
+};
+const popoverContentStyles = theme => ({
+  backgroundColor: theme.colors.backgroundPrimary,
+  color: theme.colors.textPrimary,
+  lineHeight: theme.typography.lineHeightBase,
+  border: "1px solid ".concat(theme.colors.borderDecorative),
+  borderRadius: theme.borders.borderRadiusMd,
+  padding: "".concat(theme.spacing.sm, "px"),
+  boxShadow: theme.themeName !== 'dark' ? "0px 4px 16px 0px rgba(205, 218, 229, 1)" : undefined,
+  userSelect: 'none',
+  zIndex: theme.options.zIndexBase + 30,
+  a: importantify({
+    color: theme.colors.textPrimary,
+    cursor: 'default',
+    '&:hover, &:focus': {
+      color: theme.colors.textPrimary
+    }
+  }),
+  '&:focus-visible': {
+    outlineStyle: 'solid',
+    outlineWidth: '2px',
+    outlineOffset: '1px',
+    outlineColor: theme.colors.primary
+  }
+});
+const contentStyles = theme => ({
+  ...popoverContentStyles(theme)
+});
+
+var PopoverV2 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Root: Root,
+  Content: Content$1,
+  Trigger: Trigger,
+  Arrow: Arrow
+});
+
 function getSegmentedControlGroupEmotionStyles(clsPrefix) {
   const classSmallGroup = ".".concat(clsPrefix, "-radio-group-small");
   const classButtonWrapper = ".".concat(clsPrefix, "-radio-button-wrapper");
@@ -13580,28 +14080,6 @@ const Skeleton = /* #__PURE__ */(() => {
   return Skeleton;
 })();
 
-const Spacer = _ref => {
-  let {
-    size = 'md',
-    ...props
-  } = _ref;
-  const {
-    theme
-  } = useDesignSystemTheme();
-  const spacingValues = {
-    xs: theme.spacing.xs,
-    sm: theme.spacing.sm,
-    md: theme.spacing.md,
-    lg: theme.spacing.lg
-  };
-  return jsx("div", {
-    css: /*#__PURE__*/css({
-      height: spacingValues[size]
-    }, process.env.NODE_ENV === "production" ? "" : ";label:Spacer;"),
-    ...props
-  });
-};
-
 const rotate = keyframes({
   '0%': {
     transform: 'rotate(0deg) translate3d(0, 0, 0)'
@@ -13747,9 +14225,9 @@ const DropdownButton = props => {
       ...dropdownProps,
       overlay: overlay,
       children: rightButtonToRender
-    }) : jsxs(Root, {
+    }) : jsxs(Root$1, {
       ...props.dropdownMenuRootProps,
-      children: [jsx(Trigger, {
+      children: [jsx(Trigger$1, {
         disabled: disabled,
         asChild: true,
         children: rightButtonToRender
@@ -14605,5 +15083,5 @@ const Tree = /*#__PURE__*/forwardRef(function Tree(_ref, ref) {
   });
 });
 
-export { Accordion, AccordionPanel, Alert, AlignCenterIcon, AlignLeftIcon, AlignRightIcon, AppIcon, ApplyDesignSystemFlags, ArrayIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowsUpDownIcon, AutoComplete, BarChartIcon, BeakerIcon, BinaryIcon, BoldIcon, BookIcon, BookmarkBorderIcon, BookmarkFillIcon, BracketsIcon, Breadcrumb, BriefcaseFillIcon, BriefcaseIcon, Button, CalendarEventIcon, CalendarIcon, CaretDownSquareIcon, CaretUpSquareIcon, CatalogIcon, ChartLineIcon, CheckCircleBorderIcon, CheckCircleFillIcon, CheckIcon, CheckLineIcon, Checkbox, ChecklistIcon, ChevronDoubleDownIcon, ChevronDoubleLeftIcon, ChevronDoubleRightIcon, ChevronDoubleUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDownloadIcon, CloudIcon, CloudKeyIcon, CloudOffIcon, CloudUploadIcon, ClusterIcon, ClustersIcon, CodeIcon, Col, ColorFillIcon, ConnectIcon, Content, CopyIcon, DIcon, DU_BOIS_ENABLE_ANIMATION_CLASSNAME, DangerModal, DashIcon, DashboardIcon, DataIcon, DataMarketplace, DatabaseIcon, DesignSystemAntDConfigProvider, DesignSystemContext, DesignSystemProvider, DownloadIcon, DragIcon, Dropdown, DropdownMenu, DuboisDatePicker, Empty, ErrorBorderIcon, ErrorFillIcon, ExpandLessIcon, ExpandMoreIcon, ExperimentIcon, FileCodeIcon, FileDocumentIcon, FileIcon, FileImageIcon, FileModelIcon, FilterIcon, Folder1Icon, FolderIcon, FontIcon, ForkIcon, Form, FormDubois, FormUI, FullscreenExitIcon, FullscreenIcon, Gear1Icon, GearIcon, GiftIcon, GridDashIcon, GridIcon, H1Icon, H2Icon, H3Icon, Header$1 as Header, HistoryIcon, HomeIcon, Icon, ImageIcon, IndentDecreaseIcon, IndentIncreaseIcon, InfinityIcon, InfoBorderIcon, InfoFillIcon, Input, ItalicIcon, KeyboardIcon, LayerIcon, Layout, LegacyDatePicker, LifesaverIcon, LightningIcon, LinkIcon, LinkRemoveIcon, ListBorderIcon, ListIcon, LoadingIcon, LockBorderIcon, LockFillIcon, LockUnlockedIcon, MIcon, Menu, MenuIcon, MinusBoxIcon, MinusCircleBorderIcon, MinusCircleFillIcon, Modal, ModelsIcon, Nav, NavButton, NewWindowIcon, NoIcon, NotebookIcon, NotificationIcon, NotificationsOffIcon, OfficeIcon, OptGroup, Option, OverflowIcon, PageBottomIcon, PageFirstIcon, PageLastIcon, PageTopIcon, PageWrapper, Pagination, Panel, PanelBody, PanelHeader, PanelHeaderButtons, PanelHeaderTitle, PencilIcon, PinBorderIcon, PinCancelIcon, PinFillIcon, PlayCircleBorderIcon, PlayCircleFillIcon, PlayIcon, PlugIcon, PlusCircleBorderIcon, PlusCircleFillIcon, PlusIcon, PlusSquareIcon, Popover, QueryEditorIcon, QueryIcon, QueryListViewIcon, QueryNavIcon, QuestionMarkBorderIcon, QuestionMarkFillIcon, RHFControlledComponents, ROW_GUTTER_SIZE, Radio, ReaderModeIcon, Redo, RedoIcon, Refresh, RefreshIcon, ReposIcon, RestoreAntDDefaultClsPrefix, Row, SaveIcon, SchoolIcon, Search1Icon, SearchIcon, SecurityIcon, SegmentedControlButton, SegmentedControlGroup, Select, ShareIcon, Sidebar, SidebarAutoIcon, SidebarCollapseIcon, SidebarExpandIcon, SidebarIcon, Skeleton, SlidersIcon, SortAscendingIcon, SortDescendingIcon, SortUnsortedIcon, Space, Spacer, SpeechBubbleIcon, SpeechBubblePlusIcon, Spinner, SplitButton, StarBorderIcon, StarFillIcon, StopCircleBorderIcon, StopCricleFillIcon, StopIcon, StreamIcon, Switch, SyncIcon, TabPane, Table, TableIcon, Tabs, Tag, Tooltip, TrashIcon, Tree, TreeIcon, Typography, UnderlineIcon, Undo, UploadIcon, UsbIcon, UserBadgeIcon, UserCircleIcon, UserGroupIcon, UserIcon, Visible, VisibleOff, WarningBorderIcon, WarningFillIcon, WithDesignSystemThemeHoc, WorkspacesIcon, XCircleBorderIcon, XCircleFillIcon, ZoomInIcon, ZoomOutIcon, __INTERNAL_DO_NOT_USE_DEDUPE__Group, __INTERNAL_DO_NOT_USE__FormItem, __INTERNAL_DO_NOT_USE__Group, __INTERNAL_DO_NOT_USE__HorizontalGroup, __INTERNAL_DO_NOT_USE__Password, __INTERNAL_DO_NOT_USE__TextArea, __INTERNAL_DO_NOT_USE__VerticalGroup, getAnimationCss, getButtonEmotionStyles, getPaginationEmotionStyles, getRadioStyles, getTabEmotionStyles, getWrapperStyle, useAntDConfigProviderContext, useDesignSystemFlags, useDesignSystemTheme, useNotification, useThemedStyles, withNotifications };
+export { Accordion, AccordionPanel, Alert, AlignCenterIcon, AlignLeftIcon, AlignRightIcon, AppIcon, ApplyDesignSystemContextOverrides, ApplyDesignSystemFlags, ArrayIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowsUpDownIcon, AutoComplete, BarChartIcon, BeakerIcon, BinaryIcon, BoldIcon, BookIcon, BookmarkBorderIcon, BookmarkFillIcon, BracketsIcon, Breadcrumb, BriefcaseFillIcon, BriefcaseIcon, Button, CalendarEventIcon, CalendarIcon, CaretDownSquareIcon, CaretUpSquareIcon, CatalogIcon, ChartLineIcon, CheckCircleBorderIcon, CheckCircleFillIcon, CheckIcon, CheckLineIcon, Checkbox, ChecklistIcon, ChevronDoubleDownIcon, ChevronDoubleLeftIcon, ChevronDoubleRightIcon, ChevronDoubleUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDownloadIcon, CloudIcon, CloudKeyIcon, CloudOffIcon, CloudUploadIcon, ClusterIcon, ClustersIcon, CodeIcon, Col, ColorFillIcon, ConnectIcon, Content, CopyIcon, DIcon, DU_BOIS_ENABLE_ANIMATION_CLASSNAME, DangerModal, DashIcon, DashboardIcon, DataIcon, DataMarketplace, DatabaseIcon, DesignSystemAntDConfigProvider, DesignSystemContext, DesignSystemProvider, DownloadIcon, DragIcon, Drawer, Dropdown, DropdownMenu, DuboisDatePicker, Empty, ErrorBorderIcon, ErrorFillIcon, ExpandLessIcon, ExpandMoreIcon, ExperimentIcon, FileCodeIcon, FileDocumentIcon, FileIcon, FileImageIcon, FileModelIcon, FilterIcon, Folder1Icon, FolderIcon, FontIcon, ForkIcon, Form, FormDubois, FormUI, FullscreenExitIcon, FullscreenIcon, Gear1Icon, GearIcon, GiftIcon, GridDashIcon, GridIcon, H1Icon, H2Icon, H3Icon, Header$1 as Header, HistoryIcon, HomeIcon, Icon, ImageIcon, IndentDecreaseIcon, IndentIncreaseIcon, InfinityIcon, InfoBorderIcon, InfoFillIcon, Input, ItalicIcon, KeyboardIcon, LayerIcon, Layout, LegacyDatePicker, LifesaverIcon, LightningIcon, LinkIcon, LinkRemoveIcon, ListBorderIcon, ListIcon, LoadingIcon, LockBorderIcon, LockFillIcon, LockUnlockedIcon, MIcon, Menu, MenuIcon, MinusBoxIcon, MinusCircleBorderIcon, MinusCircleFillIcon, Modal, ModelsIcon, Nav, NavButton, NewWindowIcon, NoIcon, NotebookIcon, NotificationIcon, NotificationsOffIcon, OfficeIcon, OptGroup, Option, OverflowIcon, PageBottomIcon, PageFirstIcon, PageLastIcon, PageTopIcon, PageWrapper, Pagination, Panel, PanelBody, PanelHeader, PanelHeaderButtons, PanelHeaderTitle, PencilIcon, PinBorderIcon, PinCancelIcon, PinFillIcon, PlayCircleBorderIcon, PlayCircleFillIcon, PlayIcon, PlugIcon, PlusCircleBorderIcon, PlusCircleFillIcon, PlusIcon, PlusSquareIcon, Popover, PopoverV2, QueryEditorIcon, QueryIcon, QueryListViewIcon, QueryNavIcon, QuestionMarkBorderIcon, QuestionMarkFillIcon, RHFControlledComponents, ROW_GUTTER_SIZE, Radio, ReaderModeIcon, Redo, RedoIcon, Refresh, RefreshIcon, ReposIcon, RestoreAntDDefaultClsPrefix, Row, SaveIcon, SchoolIcon, Search1Icon, SearchIcon, SecurityIcon, SegmentedControlButton, SegmentedControlGroup, Select, ShareIcon, Sidebar, SidebarAutoIcon, SidebarCollapseIcon, SidebarExpandIcon, SidebarIcon, Skeleton, SlidersIcon, SortAscendingIcon, SortDescendingIcon, SortUnsortedIcon, Space, Spacer, SpeechBubbleIcon, SpeechBubblePlusIcon, Spinner, SplitButton, StarBorderIcon, StarFillIcon, StopCircleBorderIcon, StopCricleFillIcon, StopIcon, StreamIcon, Switch, SyncIcon, TabPane, Table, TableIcon, Tabs, Tag, Tooltip, TrashIcon, Tree, TreeIcon, Typography, UnderlineIcon, Undo, UploadIcon, UsbIcon, UserBadgeIcon, UserCircleIcon, UserGroupIcon, UserIcon, VariableIcon, Visible, VisibleOff, WarningBorderIcon, WarningFillIcon, WithDesignSystemThemeHoc, WorkspacesIcon, XCircleBorderIcon, XCircleFillIcon, ZoomInIcon, ZoomOutIcon, __INTERNAL_DO_NOT_USE_DEDUPE__Group, __INTERNAL_DO_NOT_USE__FormItem, __INTERNAL_DO_NOT_USE__Group, __INTERNAL_DO_NOT_USE__HorizontalGroup, __INTERNAL_DO_NOT_USE__Password, __INTERNAL_DO_NOT_USE__TextArea, __INTERNAL_DO_NOT_USE__VerticalGroup, getAnimationCss, getButtonEmotionStyles, getPaginationEmotionStyles, getRadioStyles, getTabEmotionStyles, getWrapperStyle, useAntDConfigProviderContext, useDesignSystemFlags, useDesignSystemTheme, useNotification, useThemedStyles, withNotifications };
 //# sourceMappingURL=index.js.map