@databricks/design-system 1.4.1 → 1.5.1

package/dist/index.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import React__default, { createContext, useRef, useState, useEffect, useLayoutEffect as useLayoutEffect$1, Component, useMemo as useMemo$1, useCallback, forwardRef, useImperativeHandle, useContext, isValidElement as isValidElement$1, cloneElement as cloneElement$1 } from 'react';
 import AntDIcon from '@ant-design/icons';
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
-import { useTheme, ThemeProvider, css as css$1, keyframes, ClassNames } from '@emotion/react';
+import { useTheme, ThemeProvider, css as css$1, ClassNames, keyframes } from '@emotion/react';
 import classNames from 'classnames';
 import chroma from 'chroma-js';
 import _extends$1 from '@babel/runtime/helpers/esm/extends';
@@ -11319,11 +11319,11 @@ var Option$2 = function Option() {
 Option$2.isSelectOption = true;
 
 /** This is a placeholder, not real render in dom */
-var OptGroup = function OptGroup() {
+var OptGroup$1 = function OptGroup() {
   return null;
 };
 
-OptGroup.isSelectOptGroup = true;
+OptGroup$1.isSelectOptGroup = true;
 
 function convertNodeToOption(node) {
   var key = node.key,
@@ -17073,7 +17073,7 @@ var Select$2 = /*#__PURE__*/function (_React$Component) {
 }(React.Component);
 
 Select$2.Option = Option$2;
-Select$2.OptGroup = OptGroup;
+Select$2.OptGroup = OptGroup$1;
 
 function getIcons(_ref) {
   var suffixIcon = _ref.suffixIcon,
@@ -17300,7 +17300,7 @@ var SelectRef = /*#__PURE__*/React.forwardRef(InternalSelect);
 var Select$1 = SelectRef;
 Select$1.SECRET_COMBOBOX_MODE_DO_NOT_USE = SECRET_COMBOBOX_MODE_DO_NOT_USE;
 Select$1.Option = Option$2;
-Select$1.OptGroup = OptGroup;
+Select$1.OptGroup = OptGroup$1;
 var AntDSelect = Select$1;
 
 var isValidElement = React.isValidElement;
@@ -37737,7 +37737,7 @@ Spin.defaultProps = {
   size: 'default',
   wrapperClassName: ''
 };
-var AntDSpin = Spin;
+var Spin$1 = Spin;
 
 var Pager = function Pager(props) {
   var _classNames;
@@ -46135,7 +46135,7 @@ function Table$1(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: wrapperClassNames,
     style: style
-  }, /*#__PURE__*/React.createElement(AntDSpin, _extends$1({
+  }, /*#__PURE__*/React.createElement(Spin$1, _extends$1({
     spinning: false
   }, spinProps), topPaginationNode, /*#__PURE__*/React.createElement(Table$2, _extends$1({}, tableProps, {
     columns: mergedColumns,
@@ -49694,6 +49694,15 @@ const spacing = {
   btnPaddingHorizontalBase: DEFAULT_SPACING_UNIT * 2,
   btnPaddingHorizontalLg: DEFAULT_SPACING_UNIT * 2,
   btnPaddingHorizontalSm: DEFAULT_SPACING_UNIT * 2,
+  // Input
+  inputPaddingHorizontal: DEFAULT_SPACING_UNIT * 1.5,
+  inputPaddingHorizontalBase: DEFAULT_SPACING_UNIT * 1.5,
+  inputPaddingHorizontalSm: DEFAULT_SPACING_UNIT * 1.5,
+  inputPaddingHorizontalLg: DEFAULT_SPACING_UNIT * 1.5,
+  inputPaddingVertical: spacing.xs + 1,
+  inputPaddingVerticalBase: spacing.xs + 1,
+  inputPaddingVerticalSm: spacing.xs + 1,
+  inputPaddingVerticalLg: spacing.xs + 1,
   // Modal
   modalPadding: MODAL_PADDING,
   modalLessPadding: MODAL_PADDING - 20,
@@ -49811,6 +49820,7 @@ const DuboisContextDefaults = {
   flags: {}
 };
 const DesignSystemContext = /*#__PURE__*/createContext(DuboisContextDefaults);
+const DU_BOIS_ENABLE_ANIMATION_CLASSNAME = 'du-bois-enable-animation';
 function getAnimationCss(enableAnimation) {
   const disableAnimationCss = {
     animationDuration: '0s !important',
@@ -49821,7 +49831,7 @@ function getAnimationCss(enableAnimation) {
     '&::before': disableAnimationCss,
     '&::after': disableAnimationCss,
     // Also apply to all child elements with a class that starts with our prefix
-    '[class*=du-bois]': { ...disableAnimationCss,
+    ["[class*=du-bois]:not(.".concat(DU_BOIS_ENABLE_ANIMATION_CLASSNAME, ", .").concat(DU_BOIS_ENABLE_ANIMATION_CLASSNAME, " *)")]: { ...disableAnimationCss,
       // Also target any pseudo-elements associated with those elements, since these can also be animated.
       '&::before': disableAnimationCss,
       '&::after': disableAnimationCss
@@ -54220,6 +54230,36 @@ function getTypographyColor(theme, key, fallbackColor) {
 
   return fallbackColor !== null && fallbackColor !== void 0 ? fallbackColor : theme.colors.textPrimary;
 }
+/**
+ * Returns validation color based on state, has default validation colors if params are not provided
+ * @param theme
+ * @param validationState
+ * @param errorColor
+ * @param warningColor
+ * @param successColor
+ */
+
+function getValidationStateColor(theme, validationState) {
+  let {
+    errorColor,
+    warningColor,
+    successColor
+  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
+  switch (validationState) {
+    case 'error':
+      return errorColor || theme.colors.actionDangerPrimaryBackgroundDefault;
+
+    case 'warning':
+      return warningColor || theme.colors.textValidationWarning;
+
+    case 'success':
+      return successColor || theme.colors.textValidationSuccess;
+
+    default:
+      return undefined;
+  }
+}
 
 function getDefaultStyles(theme) {
   return {
@@ -54257,7 +54297,7 @@ function getPrimaryStyles(theme) {
     }
   };
 }
-function getLinkStyles(theme) {
+function getLinkStyles$1(theme) {
   return {
     backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
     borderColor: theme.colors.actionTertiaryBackgroundDefault,
@@ -54334,6 +54374,23 @@ function getDisabledStyles(theme) {
     }
   };
 }
+function getDisabledTertiaryStyles(theme) {
+  return {
+    backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
+    borderColor: 'transparent',
+    color: theme.colors.actionDisabledText,
+    '&:hover': {
+      backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
+      borderColor: 'transparent',
+      color: theme.colors.actionDisabledText
+    },
+    '&:active': {
+      backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
+      borderColor: 'transparent',
+      color: theme.colors.actionDisabledText
+    }
+  };
+}
 
 function getEndIconClsName(theme) {
   return "".concat(theme.general.iconfontCssPrefix, "-btn-end-icon");
@@ -54346,9 +54403,11 @@ const getButtonEmotionStyles = _ref => {
     loading,
     withIcon,
     onlyIcon,
+    isAnchor,
     enableAnimation,
     size,
-    type
+    type,
+    isFlex
   } = _ref;
   const clsIcon = ".".concat(theme.general.iconfontCssPrefix);
   const clsEndIcon = ".".concat(getEndIconClsName(theme));
@@ -54372,25 +54431,30 @@ const getButtonEmotionStyles = _ref => {
   };
   const iconCss = {
     fontSize: theme.general.buttonInnerHeight - 4,
-    // verticalAlign used by AntD to move icon and label to center
-    // TODO(schs): Try to move buttons to flexbox to solve this. Main problem is that flex-inline and inline-block
-    //  behave differently (vertically align of multiple buttons is off). See https://codepen.io/qfactor/pen/JXVzBe
-    verticalAlign: -5,
-    lineHeight: 0,
-    ...(onlyIcon && {
-      verticalAlign: -3
-    }),
-    // verticalAlign used by AntD to move icon and label to center
-    // TODO(schs): Try to move buttons to flexbox to solve this. Main problem is that flex-inline and inline-block
-    //  behave differently (vertically align of multiple buttons is off). See https://codepen.io/qfactor/pen/JXVzBe
-    // Need to make sure not to apply this to regular buttons as it will offset the icons
-    ...(!onlyIcon && {
-      verticalAlign: -4
+    ...(!isFlex && {
+      // verticalAlign used by AntD to move icon and label to center
+      // TODO(schs): Try to move buttons to flexbox to solve this. Main problem is that flex-inline and inline-block
+      //  behave differently (vertically align of multiple buttons is off). See https://codepen.io/qfactor/pen/JXVzBe
+      verticalAlign: -5,
+      ...(onlyIcon && {
+        verticalAlign: -3
+      }),
+      // verticalAlign used by AntD to move icon and label to center
+      // TODO(schs): Try to move buttons to flexbox to solve this. Main problem is that flex-inline and inline-block
+      //  behave differently (vertically align of multiple buttons is off). See https://codepen.io/qfactor/pen/JXVzBe
+      // Need to make sure not to apply this to regular buttons as it will offset the icons
+      ...(!onlyIcon && {
+        verticalAlign: -4
+      })
     }),
+    lineHeight: 0,
     ...(size === 'small' && {
       lineHeight: theme.typography.lineHeightSm,
       ...(onlyIcon && {
-        fontSize: 16
+        fontSize: 16,
+        ...(isFlex && {
+          height: 16
+        })
       })
     })
   };
@@ -54402,6 +54466,12 @@ const getButtonEmotionStyles = _ref => {
     lineHeight: theme.typography.lineHeightBase,
     boxShadow: 'none',
     height: theme.general.heightSm,
+    ...(isFlex && {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      verticalAlign: 'middle'
+    }),
     ...(!onlyIcon && {
       '&&': {
         padding: '4px 12px',
@@ -54432,7 +54502,7 @@ const getButtonEmotionStyles = _ref => {
     ...getDefaultStyles(theme),
     ["&".concat(classPrimary)]: { ...getPrimaryStyles(theme)
     },
-    ["&".concat(classLink)]: { ...getLinkStyles(theme),
+    ["&".concat(classLink)]: { ...getLinkStyles$1(theme),
       ...(type === 'link' && {
         padding: 'unset',
         height: 'auto',
@@ -54467,8 +54537,10 @@ const getButtonEmotionStyles = _ref => {
           // This would break vertical centering of loading circle when onlyIcon is true
           position: 'absolute'
         }),
-        // Normally we'd do `transform: translateX(-50%)` but `antd` crushes that with injected inline `style`.
-        left: 'calc(50% - 7px)',
+        ...(!isFlex && {
+          // Normally we'd do `transform: translateX(-50%)` but `antd` crushes that with injected inline `style`.
+          left: 'calc(50% - 7px)'
+        }),
         // Re-enable animation for the loading spinner, since it can be disabled by the global animation CSS.
         svg: {
           animationDuration: '1s !important'
@@ -54504,10 +54576,16 @@ const getButtonEmotionStyles = _ref => {
     },
     ["&".concat(clsIconOnly)]: {
       border: 'none',
-      //
       ["&:enabled:not(".concat(classLink, ")")]: { ...tertiaryColors,
         color: theme.colors.textSecondary
       },
+      ...(isAnchor && {
+        lineHeight: "".concat(theme.general.heightSm, "px"),
+        ...getLinkStyles$1(theme),
+        '&:disabled': {
+          color: theme.colors.actionDisabledText
+        }
+      }),
       '&[disabled]:hover': {
         backgroundColor: 'transparent'
       }
@@ -54522,9 +54600,11 @@ const getButtonEmotionStyles = _ref => {
     ...getAnimationCss(enableAnimation)
   }; // Moved outside main style object because state & selector matching in the already existing object keys can create bugs and unwanted overwrites
 
-  const typeStyles = {
-    ["&:enabled:not(".concat(clsIconOnly, ")")]: { ...(type === 'tertiary' && tertiaryColors)
-    }
+  const typeStyles = { ...(type === 'tertiary' && {
+      ["&:enabled:not(".concat(clsIconOnly, ")")]: tertiaryColors,
+      ["&".concat(classLink, "[disabled]")]: { ...getDisabledTertiaryStyles(theme)
+      }
+    })
   };
   const importantStyles = importantify(styles);
   const importantTypeStyles = importantify(typeStyles);
@@ -54544,6 +54624,9 @@ _ref2, ref) {
     theme,
     classNamePrefix
   } = useDesignSystemTheme();
+  const {
+    USE_FLEX_BUTTON: isFlex
+  } = useDesignSystemFlags();
   const clsEndIcon = getEndIconClsName(theme);
   return jsx(Button$3, { ...props,
     css: getButtonEmotionStyles({
@@ -54552,10 +54635,12 @@ _ref2, ref) {
       loading: Boolean(props.loading),
       withIcon: Boolean(props.icon),
       onlyIcon: Boolean((props.icon || endIcon) && !children),
+      isAnchor: Boolean(props.href && !type),
       danger: Boolean(props.danger),
       enableAnimation: theme.options.enableAnimation,
       size: size || 'middle',
-      type
+      type,
+      isFlex
     }),
     href: props.disabled ? undefined : props.href,
     ...dangerouslySetAntdProps,
@@ -54563,10 +54648,19 @@ _ref2, ref) {
     type: type === 'tertiary' ? 'link' : type,
     children: children && jsxs("span", {
       style: {
-        visibility: props !== null && props !== void 0 && props.loading ? 'hidden' : 'visible'
+        visibility: props !== null && props !== void 0 && props.loading ? 'hidden' : 'visible',
+        ...(isFlex && {
+          display: 'inline-flex',
+          alignItems: 'center'
+        })
       },
       children: [children, endIcon && jsx("span", {
         className: clsEndIcon,
+        style: { ...(isFlex && {
+            display: 'inline-flex',
+            alignItems: 'center'
+          })
+        },
         children: endIcon
       })]
     })
@@ -55044,6 +55138,9 @@ const LegacyDatePicker = Object.assign(DuboisDatePicker, {
   YearPicker
 });
 
+/**
+ * @deprecated Use `DropdownMenu` instead.
+ */
 const Dropdown = _ref => {
   let {
     dangerouslySetAntdProps,
@@ -55071,60 +55168,61 @@ const Content$1 = /*#__PURE__*/forwardRef(function Content(_ref, ref) {
     minWidth = 220,
     ...props
   } = _ref;
-  return jsx(DropdownMenu$1.Content, {
-    ref: ref,
-    css: theme => ({
-      backgroundColor: theme.colors.backgroundPrimary,
-      minWidth: minWidth,
-      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: "0px 4px 16px 0px rgba(205, 218, 229, 1)",
-      userSelect: 'none',
-      '@media (prefers-reduced-motion: no-preference)': {
-        animationDuration: '400ms',
-        animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
-        animationFillMode: 'forwards',
-        willChange: 'transform, opacity',
-        '&[data-state="open"]': {
-          '&[data-side="top"]': {
-            animationName: slideDownAndFade
-          },
-          '&[data-side="right"]': {
-            animationName: slideLeftAndFade
-          },
-          '&[data-side="bottom"]': {
-            animationName: slideUpAndFade
-          },
-          '&[data-side="left"]': {
-            animationName: slideRightAndFade
-          }
-        }
-      }
-    }),
-    sideOffset: 4,
-    ...props,
-    children: children
+  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,
+      ...props,
+      children: children
+    })
   });
 });
-const Trigger = /*#__PURE__*/forwardRef(function Trigger(_ref2, ref) {
+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(_ref3, ref) {
+const Item = /*#__PURE__*/forwardRef(function Item(_ref4, ref) {
   let {
     children,
     ...props
-  } = _ref3;
+  } = _ref4;
   return jsx(DropdownMenu$1.Item, {
     css: itemStyles,
     ref: ref,
@@ -55132,11 +55230,11 @@ const Item = /*#__PURE__*/forwardRef(function Item(_ref3, ref) {
     children: children
   });
 });
-const Label = /*#__PURE__*/forwardRef(function Label(_ref4, ref) {
+const Label = /*#__PURE__*/forwardRef(function Label(_ref5, ref) {
   let {
     children,
     ...props
-  } = _ref4;
+  } = _ref5;
   return jsx(DropdownMenu$1.Label, {
     ref: ref,
     css: [itemStyles, theme => ({
@@ -55146,11 +55244,11 @@ const Label = /*#__PURE__*/forwardRef(function Label(_ref4, ref) {
     children: children
   });
 });
-const Separator = /*#__PURE__*/forwardRef(function Separator(_ref5, ref) {
+const Separator = /*#__PURE__*/forwardRef(function Separator(_ref6, ref) {
   let {
     children,
     ...props
-  } = _ref5;
+  } = _ref6;
   return jsx(DropdownMenu$1.Separator, {
     ref: ref,
     css: theme => ({
@@ -55162,18 +55260,18 @@ const Separator = /*#__PURE__*/forwardRef(function Separator(_ref5, ref) {
     children: children
   });
 });
-const TriggerItem = /*#__PURE__*/forwardRef(function TriggerItem(_ref6, ref) {
+const SubTrigger = /*#__PURE__*/forwardRef(function TriggerItem(_ref7, ref) {
   let {
     children,
     ...props
-  } = _ref6;
-  return jsxs(DropdownMenu$1.TriggerItem, {
+  } = _ref7;
+  return jsxs(DropdownMenu$1.SubTrigger, {
     ref: ref,
     css: [itemStyles, theme => ({
       '&[data-state="open"]': {
         backgroundColor: theme.colors.actionTertiaryBackgroundHover
       }
-    }), process.env.NODE_ENV === "production" ? "" : ";label:TriggerItem;"],
+    }), process.env.NODE_ENV === "production" ? "" : ";label:SubTrigger;"],
     ...props,
     children: [children, jsx(HintColumn, {
       css: theme => ({
@@ -55190,11 +55288,17 @@ const TriggerItem = /*#__PURE__*/forwardRef(function TriggerItem(_ref6, ref) {
     })]
   });
 });
-const CheckboxItem = /*#__PURE__*/forwardRef(function CheckboxItem(_ref7, ref) {
+/**
+ * Deprecated. Use `SubTrigger` instead.
+ * @deprecated
+ */
+
+const TriggerItem = SubTrigger;
+const CheckboxItem = /*#__PURE__*/forwardRef(function CheckboxItem(_ref8, ref) {
   let {
     children,
     ...props
-  } = _ref7;
+  } = _ref8;
   return jsx(DropdownMenu$1.CheckboxItem, {
     ref: ref,
     css: [itemStyles, checkboxItemStyles, process.env.NODE_ENV === "production" ? "" : ";label:CheckboxItem;"],
@@ -55202,11 +55306,11 @@ const CheckboxItem = /*#__PURE__*/forwardRef(function CheckboxItem(_ref7, ref) {
     children: children
   });
 });
-const ItemIndicator = /*#__PURE__*/forwardRef(function ItemIndicator(_ref8, ref) {
+const ItemIndicator = /*#__PURE__*/forwardRef(function ItemIndicator(_ref9, ref) {
   let {
     children,
     ...props
-  } = _ref8;
+  } = _ref9;
   return jsx(DropdownMenu$1.ItemIndicator, {
     ref: ref,
     css: theme => ({
@@ -55222,11 +55326,11 @@ const ItemIndicator = /*#__PURE__*/forwardRef(function ItemIndicator(_ref8, ref)
     })
   });
 });
-const Arrow = /*#__PURE__*/forwardRef(function Arrow(_ref9, ref) {
+const Arrow = /*#__PURE__*/forwardRef(function Arrow(_ref10, ref) {
   let {
     children,
     ...props
-  } = _ref9;
+  } = _ref10;
   const {
     theme
   } = useDesignSystemTheme();
@@ -55236,21 +55340,27 @@ const Arrow = /*#__PURE__*/forwardRef(function Arrow(_ref9, ref) {
       stroke: theme.colors.borderDecorative,
       strokeDashoffset: -CONSTANTS.arrowBottomLength(),
       strokeDasharray: CONSTANTS.arrowBottomLength() + 2 * CONSTANTS.arrowSide(),
-      strokeWidth: CONSTANTS.arrowStrokeWidth()
+      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,
-    offset: theme.borders.borderRadiusMd,
     ...props,
     children: children
   });
 });
-const RadioItem = /*#__PURE__*/forwardRef(function RadioItem(_ref10, ref) {
+const RadioItem = /*#__PURE__*/forwardRef(function RadioItem(_ref11, ref) {
   let {
     children,
     ...props
-  } = _ref10;
+  } = _ref11;
   return jsx(DropdownMenu$1.RadioItem, {
     ref: ref,
     css: [itemStyles, checkboxItemStyles, process.env.NODE_ENV === "production" ? "" : ";label:RadioItem;"],
@@ -55260,13 +55370,14 @@ const RadioItem = /*#__PURE__*/forwardRef(function RadioItem(_ref10, ref) {
 }); // UNWRAPPED RADIX-UI-COMPONENTS
 
 const Group = DropdownMenu$1.Group;
-const RadioGroup = DropdownMenu$1.RadioGroup; // EXTRA COMPONENTS
+const RadioGroup = DropdownMenu$1.RadioGroup;
+const Sub = DropdownMenu$1.Sub; // EXTRA COMPONENTS
 
-const HintColumn = /*#__PURE__*/forwardRef(function HintColumn(_ref11, ref) {
+const HintColumn = /*#__PURE__*/forwardRef(function HintColumn(_ref12, ref) {
   let {
     children,
     ...props
-  } = _ref11;
+  } = _ref12;
   return jsx("div", {
     ref: ref,
     css: [metaTextStyles, "margin-left:auto;" + (process.env.NODE_ENV === "production" ? "" : ";label:HintColumn;")],
@@ -55274,11 +55385,11 @@ const HintColumn = /*#__PURE__*/forwardRef(function HintColumn(_ref11, ref) {
     children: children
   });
 });
-const HintRow = /*#__PURE__*/forwardRef(function HintRow(_ref12, ref) {
+const HintRow = /*#__PURE__*/forwardRef(function HintRow(_ref13, ref) {
   let {
     children,
     ...props
-  } = _ref12;
+  } = _ref13;
   return jsx("div", {
     ref: ref,
     css: [metaTextStyles, "min-width:100%;" + (process.env.NODE_ENV === "production" ? "" : ";label:HintRow;")],
@@ -55286,11 +55397,11 @@ const HintRow = /*#__PURE__*/forwardRef(function HintRow(_ref12, ref) {
     children: children
   });
 });
-const IconWrapper = /*#__PURE__*/forwardRef(function IconWrapper(_ref13, ref) {
+const IconWrapper = /*#__PURE__*/forwardRef(function IconWrapper(_ref14, ref) {
   let {
     children,
     ...props
-  } = _ref13;
+  } = _ref14;
   return jsx("div", {
     ref: ref,
     css: theme => ({
@@ -55355,6 +55466,29 @@ const CONSTANTS = {
   }
 
 };
+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,
+    cursor: 'default',
+    '&: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"),
@@ -55381,58 +55515,18 @@ const metaTextStyles = theme => ({
   '[data-disabled] &': {
     color: theme.colors.actionDisabledText
   }
-}); // ANIMATIONS
-
-
-const slideUpAndFade = keyframes({
-  '0%': {
-    opacity: 0,
-    transform: 'translateY(2px)'
-  },
-  '100%': {
-    opacity: 1,
-    transform: 'translateY(0)'
-  }
-});
-const slideRightAndFade = keyframes({
-  '0%': {
-    opacity: 0,
-    transform: 'translateX(-2px)'
-  },
-  '100%': {
-    opacity: 1,
-    transform: 'translateX(0)'
-  }
-});
-const slideDownAndFade = keyframes({
-  '0%': {
-    opacity: 0,
-    transform: 'translateY(-2px)'
-  },
-  '100%': {
-    opacity: 1,
-    transform: 'translateY(0)'
-  }
-});
-const slideLeftAndFade = keyframes({
-  '0%': {
-    opacity: 0,
-    transform: 'translateX(2px)'
-  },
-  '100%': {
-    opacity: 1,
-    transform: 'translateX(0)'
-  }
 });
 
 var DropdownMenu = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Root: Root,
   Content: Content$1,
+  SubContent: SubContent,
   Trigger: Trigger,
   Item: Item,
   Label: Label,
   Separator: Separator,
+  SubTrigger: SubTrigger,
   TriggerItem: TriggerItem,
   CheckboxItem: CheckboxItem,
   ItemIndicator: ItemIndicator,
@@ -55440,9 +55534,11 @@ var DropdownMenu = /*#__PURE__*/Object.freeze({
   RadioItem: RadioItem,
   Group: Group,
   RadioGroup: RadioGroup,
+  Sub: Sub,
   HintColumn: HintColumn,
   HintRow: HintRow,
-  IconWrapper: IconWrapper
+  IconWrapper: IconWrapper,
+  dropdownContentStyles: dropdownContentStyles
 });
 
 const getFormItemEmotionStyles = _ref => {
@@ -55723,34 +55819,25 @@ const Header$1 = props => {
   });
 };
 
-const getStateClass = function (classNamePrefix, validationState) {
-  let className = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
-  let stateClass = '';
-
-  if (validationState) {
-    stateClass = "".concat(classNamePrefix, "-input-").concat(validationState);
-  }
-
-  return "".concat(stateClass, " ").concat(className).trim();
-};
-
-const getInputEmotionStyles = (clsPrefix, theme) => {
+const getInputEmotionStyles = (clsPrefix, theme, _ref) => {
+  let {
+    validationState
+  } = _ref;
   const affixClass = ".".concat(clsPrefix, "-input-affix-wrapper");
   const affixClassFocused = ".".concat(clsPrefix, "-input-affix-wrapper-focused");
-  const errorClass = ".".concat(clsPrefix, "-input-error");
-  const successClass = ".".concat(clsPrefix, "-input-success");
-  const warningClass = ".".concat(clsPrefix, "-input-warning");
+  const validationColor = getValidationStateColor(theme, validationState);
   const styles = {
     '&&': {
       lineHeight: theme.typography.lineHeightBase,
-      paddingTop: 5,
-      paddingBottom: 5,
       minHeight: theme.general.heightSm,
+      ...(validationState && {
+        borderColor: validationColor
+      }),
       '&:hover': {
-        borderColor: theme.colors.actionPrimaryBackgroundHover
+        borderColor: validationState ? validationColor : theme.colors.actionPrimaryBackgroundHover
       },
       '&:focus': {
-        outlineColor: theme.colors.actionPrimaryBackgroundDefault,
+        outlineColor: validationState ? validationColor : theme.colors.actionPrimaryBackgroundDefault,
         outlineWidth: 2,
         outlineOffset: -2,
         outlineStyle: 'solid',
@@ -55785,107 +55872,74 @@ const getInputEmotionStyles = (clsPrefix, theme) => {
         borderColor: 'transparent'
       }
     },
-    ["&".concat(warningClass)]: {
-      borderColor: theme.colors.textValidationWarning,
-      '&:hover': {
-        borderColor: theme.colors.textValidationWarning
-      },
-      '&:focus': {
-        outlineColor: theme.colors.textValidationWarning,
-        outlineOffset: -2
-      }
-    },
-    ["&".concat(successClass)]: {
-      borderColor: theme.colors.textValidationSuccess,
-      '&:hover': {
-        borderColor: theme.colors.textValidationSuccess
-      },
-      '&:focus': {
-        outlineColor: theme.colors.textValidationSuccess,
-        outlineOffset: -2
-      }
-    },
-    ["&".concat(errorClass)]: {
-      borderColor: theme.colors.actionDangerPrimaryBackgroundDefault,
-      '&:hover': {
-        borderColor: theme.colors.actionDangerPrimaryBackgroundDefault
-      },
-      '&:focus': {
-        outlineColor: theme.colors.actionDangerPrimaryBackgroundDefault,
-        outlineOffset: -2
-      }
-    },
     ...getAnimationCss(theme.options.enableAnimation)
   };
   return /*#__PURE__*/css$1(importantify(styles), process.env.NODE_ENV === "production" ? "" : ";label:getInputEmotionStyles;");
 };
 
-const TextArea = /*#__PURE__*/forwardRef(function TextArea(_ref, ref) {
+const TextArea = /*#__PURE__*/forwardRef(function TextArea(_ref2, ref) {
   let {
-    className,
     validationState,
     autoComplete = 'off',
     dangerouslySetAntdProps,
     dangerouslyAppendEmotionCSS,
     ...props
-  } = _ref;
+  } = _ref2;
   const {
     classNamePrefix,
     theme
   } = useDesignSystemTheme();
-  const wrapperClass = getStateClass(classNamePrefix, validationState, className);
   return jsx(Input$2.TextArea, {
-    className: wrapperClass,
     ref: ref,
     autoComplete: autoComplete,
-    css: [getInputEmotionStyles(classNamePrefix, theme), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:TextArea;"],
+    css: [getInputEmotionStyles(classNamePrefix, theme, {
+      validationState
+    }), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:TextArea;"],
     ...props,
     ...dangerouslySetAntdProps
   });
 });
-const Password = /*#__PURE__*/forwardRef(function Password(_ref2, ref) {
+const Password = /*#__PURE__*/forwardRef(function Password(_ref3, ref) {
   let {
-    className,
     validationState,
     autoComplete = 'off',
     dangerouslySetAntdProps,
     dangerouslyAppendEmotionCSS,
     ...props
-  } = _ref2;
+  } = _ref3;
   const {
     classNamePrefix,
     theme
   } = useDesignSystemTheme();
-  const wrapperClass = getStateClass(classNamePrefix, validationState, className);
   return jsx(Input$2.Password, {
-    className: wrapperClass,
     visibilityToggle: false,
     ref: ref,
     autoComplete: autoComplete,
-    css: [getInputEmotionStyles(classNamePrefix, theme), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Password;"],
+    css: [getInputEmotionStyles(classNamePrefix, theme, {
+      validationState
+    }), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Password;"],
     ...props,
     ...dangerouslySetAntdProps
   });
 });
-const DuboisInput = /*#__PURE__*/forwardRef(function Input(_ref3, ref) {
+const DuboisInput = /*#__PURE__*/forwardRef(function Input(_ref4, ref) {
   let {
-    className,
     validationState,
     autoComplete = 'off',
     dangerouslySetAntdProps,
     dangerouslyAppendEmotionCSS,
     ...props
-  } = _ref3;
+  } = _ref4;
   const {
     classNamePrefix,
     theme
   } = useDesignSystemTheme();
-  const wrapperClass = getStateClass(classNamePrefix, validationState, className);
   return jsx(Input$2, {
-    className: wrapperClass,
     autoComplete: autoComplete,
     ref: ref,
-    css: [getInputEmotionStyles(classNamePrefix, theme), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:DuboisInput;"],
+    css: [getInputEmotionStyles(classNamePrefix, theme, {
+      validationState
+    }), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:DuboisInput;"],
     ...props,
     ...dangerouslySetAntdProps
   });
@@ -55922,6 +55976,9 @@ Layout.Footer = Footer;
 Layout.Sider = Sider;
 Layout.Content = Content;
 
+/**
+ * @deprecated Use `DropdownMenu` instead.
+ */
 const Menu = _ref => {
   let {
     dangerouslySetAntdProps,
@@ -55951,6 +56008,7 @@ Menu.SubMenu = function SubMenu(_ref2) {
         popupClassName: css({
           zIndex: theme.options.zIndexBase + 50
         }),
+        popupOffset: [-6, -10],
         ...props,
         ...dangerouslySetAntdProps
       });
@@ -56750,7 +56808,8 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__$3() { return "You have tried to string
 function getSelectEmotionStyles(_ref) {
   let {
     clsPrefix,
-    theme
+    theme,
+    validationState
   } = _ref;
   const classFocused = ".".concat(clsPrefix, "-focused");
   const classOpen = ".".concat(clsPrefix, "-open");
@@ -56771,6 +56830,7 @@ function getSelectEmotionStyles(_ref) {
   const classSearchClear = ".".concat(clsPrefix, "-clear");
   const classAllowClear = ".".concat(clsPrefix, "-allow-clear");
   const classSearchInput = ".".concat(clsPrefix, "-selection-search-input");
+  const validationColor = getValidationStateColor(theme, validationState);
   const styles = {
     '&:hover': {
       [classSelector]: {
@@ -56978,6 +57038,18 @@ function getSelectEmotionStyles(_ref) {
         backgroundColor: theme.colors.tagPress
       }
     },
+    ...(validationState && {
+      ["& > ".concat(classSelector)]: {
+        borderColor: validationColor,
+        '&:hover': {
+          borderColor: validationColor
+        }
+      },
+      ["&".concat(classFocused, " > ").concat(classSelector)]: {
+        outlineColor: validationColor,
+        outlineOffset: -2
+      }
+    }),
     ...getAnimationCss(theme.options.enableAnimation)
   };
   const importantStyles = importantify(styles);
@@ -56985,18 +57057,32 @@ function getSelectEmotionStyles(_ref) {
 }
 
 function getDropdownStyles(clsPrefix, theme) {
+  let useNewDropdownStyle = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   const classItem = ".".concat(clsPrefix, "-item-option");
   const classItemActive = ".".concat(clsPrefix, "-item-option-active");
   const classItemSelected = ".".concat(clsPrefix, "-item-option-selected");
   const classItemState = ".".concat(clsPrefix, "-item-option-state");
-  const styles = {
-    borderColor: theme.colors.borderDecorative,
-    borderWidth: 1,
-    borderStyle: 'solid',
-    zIndex: theme.options.zIndexBase + 50,
+  const classItemContent = ".".concat(clsPrefix, "-item-option-content");
+  const CONTENT_LEFT_PADDING = 28;
+  const styles = { ...(useNewDropdownStyle ? dropdownContentStyles(theme) : {
+      borderColor: theme.colors.borderDecorative,
+      borderWidth: 1,
+      borderStyle: 'solid',
+      zIndex: theme.options.zIndexBase + 50
+    }),
     [classItem]: {
-      height: theme.general.heightSm
+      height: theme.general.heightSm,
+      ...(useNewDropdownStyle && {
+        padding: '4px 8px',
+        alignItems: 'center',
+        lineHeight: theme.typography.lineHeightBase
+      })
     },
+    ...(useNewDropdownStyle && {
+      [classItemContent]: {
+        paddingLeft: CONTENT_LEFT_PADDING
+      }
+    }),
     [classItemActive]: {
       backgroundColor: theme.colors.actionTertiaryBackgroundHover,
       height: theme.general.heightSm,
@@ -57012,13 +57098,19 @@ function getDropdownStyles(clsPrefix, theme) {
       }
     },
     [classItemState]: {
-      color: theme.colors.textSecondary
+      color: theme.colors.textSecondary,
+      ...(useNewDropdownStyle && {
+        position: 'absolute'
+      })
     },
     [".".concat(clsPrefix, "-loading-options")]: {
       pointerEvents: 'none',
       margin: '0 auto',
       height: theme.general.heightSm,
-      display: 'block'
+      display: 'block',
+      ...(useNewDropdownStyle && {
+        left: -CONTENT_LEFT_PADDING / 2
+      })
     },
     ...getAnimationCss(theme.options.enableAnimation)
   };
@@ -57049,8 +57141,12 @@ var _ref4 = process.env.NODE_ENV === "production" ? {
 function DuboisSelect(_ref2, ref) {
   let {
     children,
+    validationState,
     loading,
     mode,
+    options,
+    notFoundContent,
+    optionFilterProp,
     dangerouslySetAntdProps,
     virtual,
     ...restProps
@@ -57059,6 +57155,9 @@ function DuboisSelect(_ref2, ref) {
     theme,
     getPrefixedClassName
   } = useDesignSystemTheme();
+  const {
+    USE_NEW_SELECT_DROPDOWN_STYLES
+  } = useDesignSystemFlags();
   const clsPrefix = getPrefixedClassName('select');
   return jsx(ClassNames, {
     children: _ref3 => {
@@ -57068,7 +57167,8 @@ function DuboisSelect(_ref2, ref) {
       return jsx(AntDSelect, {
         css: getSelectEmotionStyles({
           clsPrefix,
-          theme
+          theme,
+          validationState
         }),
         removeIcon: jsx(CloseIcon, {
           css: _ref4
@@ -57089,22 +57189,23 @@ function DuboisSelect(_ref2, ref) {
         }),
         showArrow: true,
         dropdownMatchSelectWidth: true,
-        notFoundContent: jsx("div", {
+        notFoundContent: notFoundContent !== null && notFoundContent !== void 0 ? notFoundContent : jsx("div", {
           css: /*#__PURE__*/css$1({
             color: theme.colors.textSecondary,
             textAlign: 'center'
           }),
           children: "No results found"
         }),
-        dropdownClassName: css(getDropdownStyles(clsPrefix, theme)),
+        dropdownClassName: css(getDropdownStyles(clsPrefix, theme, USE_NEW_SELECT_DROPDOWN_STYLES)),
         maxTagPlaceholder: items => "+ ".concat(items.length, " more"),
         mode: mode,
+        options: options,
         loading: loading,
         filterOption: true // This is needed to avoid ghost scrollbar that generates error when clicked on exactly 8 elements
         // Because by default AntD uses true for virtual, we want to replicate the same even if there are no children
         ,
-        virtual: virtual || !children || Array.isArray(children) && children.length !== scrollbarVisibleItemsCount,
-        optionFilterProp: 'children',
+        virtual: virtual || children && Array.isArray(children) && children.length !== scrollbarVisibleItemsCount || options && options.length !== scrollbarVisibleItemsCount || !children && !options,
+        optionFilterProp: optionFilterProp !== null && optionFilterProp !== void 0 ? optionFilterProp : 'children',
         ...restProps,
         ...dangerouslySetAntdProps,
         children: loading && mode !== 'tags' ? jsxs(Fragment, {
@@ -57124,22 +57225,29 @@ function DuboisSelect(_ref2, ref) {
   });
 }
 
-const Option = /*#__PURE__*/forwardRef(function Option(_ref5, ref) {
-  let {
+const Option = /*#__PURE__*/forwardRef(function Option(props, ref) {
+  const {
     dangerouslySetAntdProps,
-    ...props
-  } = _ref5;
-  return jsx(AntDSelect.Option, { ...props,
+    ...restProps
+  } = props;
+  return jsx(AntDSelect.Option, { ...restProps,
     ref: ref,
     ...dangerouslySetAntdProps
   });
-});
-const SelectNamespace = Object.assign(DuboisRefForwardedSelect, {
-  Option,
-  OptGroup: AntDSelect.OptGroup
-});
-const Select = SelectNamespace;
-const __INTERNAL_DO_NOT_USE__Option = Option;
+}); // Needed for rc-select to not throw warning about our component not being Select.Option
+
+Option.isSelectOption = true;
+const OptGroup = /*#__PURE__*/forwardRef(function OptGroup(props, ref) {
+  return jsx(AntDSelect.OptGroup, { ...props,
+    isSelectOptGroup: true,
+    ref: ref
+  });
+}); // Needed for antd to work properly and for rc-select to not throw warning about our component not being Select.OptGroup
+
+OptGroup.isSelectOptGroup = true;
+DuboisRefForwardedSelect.Option = Option;
+DuboisRefForwardedSelect.OptGroup = OptGroup;
+const Select = DuboisRefForwardedSelect;
 
 const Skeleton = _ref => {
   let {
@@ -57176,25 +57284,53 @@ const Spacer = _ref => {
   });
 };
 
-const loadingIcon = jsx(LoadingIcon, {
-  spin: true
+const rotate = keyframes({
+  '0%': {
+    transform: 'rotate(0deg) translate3d(0, 0, 0)'
+  },
+  '100%': {
+    transform: 'rotate(360deg) translate3d(0, 0, 0)'
+  }
 });
 
+const cssSpinner = function (theme) {
+  let frameRate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 60;
+  let delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  const styles = {
+    animation: "".concat(rotate, " 1s steps(").concat(frameRate, ", end) infinite"),
+    color: theme.colors.textSecondary,
+    animationDelay: "".concat(delay, "s")
+  };
+  return /*#__PURE__*/css$1(importantify(styles), process.env.NODE_ENV === "production" ? "" : ";label:cssSpinner;");
+};
+
 const Spinner = _ref => {
   let {
-    dangerouslySetAntdProps,
+    frameRate,
+    size = 'default',
+    delay,
+    className: propClass,
     ...props
   } = _ref;
   const {
+    classNamePrefix,
     theme
-  } = useDesignSystemTheme();
-  return jsx(AntDSpin, { ...props,
-    css: /*#__PURE__*/css$1({
-      color: theme.colors.textSecondary
-    }, process.env.NODE_ENV === "production" ? "" : ";label:Spinner;"),
-    indicator: loadingIcon,
-    ...dangerouslySetAntdProps
-  });
+  } = useDesignSystemTheme(); // We use Antd classes to keep styling unchanged
+  // TODO(FEINF-1407): We want to move away from Antd classes and use Emotion for styling in the future
+
+  const sizeSuffix = size === 'small' ? '-sm' : size === 'large' ? '-lg' : '';
+  const sizeClass = sizeSuffix ? "".concat(classNamePrefix, "-spin").concat(sizeSuffix) : '';
+  const wrapperClass = "".concat(propClass || '', " ").concat(classNamePrefix, "-spin ").concat(sizeClass, " ").concat(classNamePrefix, "-spin-spinning ").concat(DU_BOIS_ENABLE_ANIMATION_CLASSNAME).trim();
+  const className = "".concat(classNamePrefix, "-spin-dot ").concat(DU_BOIS_ENABLE_ANIMATION_CLASSNAME).trim();
+  return (// className has to follow {...props}, otherwise is `css` prop is passed down it will overwrite our className
+    jsx("div", { ...props,
+      className: wrapperClass,
+      children: jsx(LoadingIcon, {
+        css: cssSpinner(theme, frameRate, delay),
+        className: className
+      })
+    })
+  );
 };
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__$2() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
@@ -57697,13 +57833,14 @@ function Tag(props) {
     color,
     children,
     closable,
-    onClose
+    onClose,
+    ...attributes
   } = props;
   const isClickable = Boolean(props.onClick);
   const styles = getTagEmotionStyles(theme, color, isClickable);
   return jsx("div", {
     role: "status",
-    ...props,
+    ...attributes,
     css: styles.tag,
     children: jsxs("div", {
       css: styles.content,
@@ -57891,6 +58028,9 @@ function getTreeEmotionStyles(clsPrefix, theme) {
           backgroundColor: 'transparent'
         }
       },
+      [classContent]: {
+        cursor: 'default'
+      },
       // Unselectable nodes don't have any background, so the switcher looks better with rounded corners.
       [classSwitcher]: {
         borderRadius: theme.borders.borderRadiusMd
@@ -58022,6 +58162,26 @@ function Tree(_ref) {
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
+const getLinkStyles = theme => {
+  const styles = {
+    '&&': {
+      color: theme.colors.actionTertiaryTextDefault,
+      '&:hover': {
+        color: theme.colors.actionTertiaryTextHover,
+        textDecoration: 'underline'
+      },
+      '&:active': {
+        color: theme.colors.actionTertiaryTextPress,
+        textDecoration: 'underline'
+      },
+      '&:focus': {
+        outline: 'auto'
+      }
+    }
+  };
+  return /*#__PURE__*/css$1(styles, process.env.NODE_ENV === "production" ? "" : ";label:getLinkStyles;");
+};
+
 var _ref2 = process.env.NODE_ENV === "production" ? {
   name: "mgrjgu",
   styles: "margin-left:2px"
@@ -58041,8 +58201,13 @@ function Link(_ref) {
     openInNewTab,
     ...restProps
   } = props;
+  const {
+    theme
+  } = useDesignSystemTheme();
   const openInNewTabProps = getOpenInNewTabProps(openInNewTab);
-  return jsxs(AntDTypography.Link, { ...restProps,
+  return jsxs(AntDTypography.Link, {
+    css: getLinkStyles(theme),
+    ...restProps,
     ...openInNewTabProps,
     ...dangerouslySetAntdProps,
     children: [children, openInNewTab ? jsx(NewWindowIcon, {
@@ -58212,5 +58377,5 @@ Typography.Title = Title;
 Typography.Paragraph = Paragraph;
 Typography.Link = Link;
 
-export { AIcon, Alert, AlignCenterIcon, AlignLeftIcon, AlignRightIcon, ApplyDesignSystemFlags, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowsUpDownIcon, AutoComplete, BarChartIcon, BeakerIcon, BookIcon, BookmarkBorderIcon, BookmarkFillIcon, Breadcrumb, BriefcaseFillIcon, BriefcaseIcon, Button, CalendarEventIcon, CalendarIcon, CaretDownSquareIcon, CaretUpSquareIcon, CheckCircleBorderIcon, CheckCircleFillIcon, CheckIcon, CheckLineIcon, Checkbox, ChecklistIcon, ChevronDoubleDownIcon, ChevronDoubleLeftIcon, ChevronDoubleRightIcon, ChevronDoubleUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardIcon, Clock1Icon, ClockIcon, CloseIcon, CloudDownloadIcon, CloudIcon, CloudOffIcon, CloudUploadIcon, ClusterIcon, ClustersIcon, CodeIcon, Col, Collapse, CollapsePanel, CopyIcon, DIcon, DangerModal, DashIcon, DashboardIcon, DataIcon, DatabaseIcon, DesignSystemContext, DesignSystemProvider, DownloadIcon, DragIcon, Dropdown, DropdownMenu, DuboisDatePicker, ErrorBorderIcon, ErrorFillIcon, ExpandLessIcon, ExpandMoreIcon, ExperimentIcon, FeatureStoreIcon, FileCodeIcon, FileDocumentIcon, FileIcon, FileImageIcon, FileModelIcon, FilterIcon, Folder1Icon, FolderIcon, ForkIcon, Form, FormDubois, FullscreenExitIcon, FullscreenIcon, Gear1Icon, GearIcon, GridDashIcon, GridIcon, H1Icon, H2Icon, H3Icon, Header$1 as Header, HistoryIcon, HomeIcon, Icon, ImageIcon, IndentDecreaseIcon, IndentIncreaseIcon, InfinityIcon, InfoBorderIcon, InfoFillIcon, Input, KeyboardIcon, LayerIcon, Layout, LegacyDatePicker, LifesaverIcon, LightningIcon, LinkIcon, LinkRemoveIcon, ListBorderIcon, ListIcon, LoadingIcon, LockBorderIcon, LockFillIcon, LockUnlockedIcon, MIcon, Menu, MinusBoxIcon, MinusCircleBorderIcon, MinusCircleFillIcon, Modal, ModelsIcon, NewWindowIcon, NoIcon, NotebookIcon, NotificationIcon, NotificationsIcon, OfficeIcon, Option, OverflowIcon, PageBottomIcon, PageFirstIcon, PageLastIcon, PageTopIcon, PageWrapper, Pagination, PencilIcon, PinBorderIcon, PinCancelIcon, PinFillIcon, PinXIcon, PlayCircleBorderIcon, PlayCircleFillIcon, PlayIcon, PlusCircleBorderIcon, PlusCircleFillIcon, PlusIcon, PlusSquareIcon, Popover, QueryEditorIcon, QueryIcon, QueryListViewIcon, QueryNavIcon, QuestionMarkBorderIcon, QuestionMarkFillIcon, ROW_GUTTER_SIZE, Radio, ReaderModeIcon, ReposIcon, Row, SchoolIcon, Search1Icon, SearchIcon, SecurityIcon, SegmentedControlButton, SegmentedControlGroup, Select, ShareIcon, SidebarAutoIcon, SidebarCollapseIcon, SidebarExpandIcon, SidebarIcon, Skeleton, Space, Spacer, SpeechBubbleIcon, SpeechBubblePlusIcon, Spinner, SplitButton, StarBorderIcon, StarFillIcon, StopCircleBorderIcon, StopCricleFillIcon, StopIcon, StreamIcon, Switch, SyncIcon, TabPane, Table, TableIcon, Tabs, Tag, Tooltip, TrashIcon, Tree, TreeIcon, Typography, UploadIcon, UsbIcon, UserBadgeIcon, UserCircleIcon, UserGroupIcon, UserIcon, VideosIcon, Visible, VisibleOff, WarningBorderIcon, WarningFillIcon, WithDesignSystemThemeHoc, XCircleBorderIcon, XCircleFillIcon, ZoomInIcon, ZoomOutIcon, __INTERNAL_DO_NOT_USE__FormItem, __INTERNAL_DO_NOT_USE__Group, __INTERNAL_DO_NOT_USE__HorizontalGroup, __INTERNAL_DO_NOT_USE__Option, __INTERNAL_DO_NOT_USE__Password, __INTERNAL_DO_NOT_USE__TextArea, __INTERNAL_DO_NOT_USE__VerticalGroup, getAnimationCss, getButtonEmotionStyles, getPaginationEmotionStyles, getTabEmotionStyles, useDesignSystemFlags, useDesignSystemTheme, useNotification, useThemedStyles };
+export { AIcon, Alert, AlignCenterIcon, AlignLeftIcon, AlignRightIcon, ApplyDesignSystemFlags, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowsUpDownIcon, AutoComplete, BarChartIcon, BeakerIcon, BookIcon, BookmarkBorderIcon, BookmarkFillIcon, Breadcrumb, BriefcaseFillIcon, BriefcaseIcon, Button, CalendarEventIcon, CalendarIcon, CaretDownSquareIcon, CaretUpSquareIcon, CheckCircleBorderIcon, CheckCircleFillIcon, CheckIcon, CheckLineIcon, Checkbox, ChecklistIcon, ChevronDoubleDownIcon, ChevronDoubleLeftIcon, ChevronDoubleRightIcon, ChevronDoubleUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardIcon, Clock1Icon, ClockIcon, CloseIcon, CloudDownloadIcon, CloudIcon, CloudOffIcon, CloudUploadIcon, ClusterIcon, ClustersIcon, CodeIcon, Col, Collapse, CollapsePanel, CopyIcon, DIcon, DU_BOIS_ENABLE_ANIMATION_CLASSNAME, DangerModal, DashIcon, DashboardIcon, DataIcon, DatabaseIcon, DesignSystemContext, DesignSystemProvider, DownloadIcon, DragIcon, Dropdown, DropdownMenu, DuboisDatePicker, ErrorBorderIcon, ErrorFillIcon, ExpandLessIcon, ExpandMoreIcon, ExperimentIcon, FeatureStoreIcon, FileCodeIcon, FileDocumentIcon, FileIcon, FileImageIcon, FileModelIcon, FilterIcon, Folder1Icon, FolderIcon, ForkIcon, Form, FormDubois, FullscreenExitIcon, FullscreenIcon, Gear1Icon, GearIcon, GridDashIcon, GridIcon, H1Icon, H2Icon, H3Icon, Header$1 as Header, HistoryIcon, HomeIcon, Icon, ImageIcon, IndentDecreaseIcon, IndentIncreaseIcon, InfinityIcon, InfoBorderIcon, InfoFillIcon, Input, KeyboardIcon, LayerIcon, Layout, LegacyDatePicker, LifesaverIcon, LightningIcon, LinkIcon, LinkRemoveIcon, ListBorderIcon, ListIcon, LoadingIcon, LockBorderIcon, LockFillIcon, LockUnlockedIcon, MIcon, Menu, MinusBoxIcon, MinusCircleBorderIcon, MinusCircleFillIcon, Modal, ModelsIcon, NewWindowIcon, NoIcon, NotebookIcon, NotificationIcon, NotificationsIcon, OfficeIcon, OptGroup, Option, OverflowIcon, PageBottomIcon, PageFirstIcon, PageLastIcon, PageTopIcon, PageWrapper, Pagination, PencilIcon, PinBorderIcon, PinCancelIcon, PinFillIcon, PinXIcon, PlayCircleBorderIcon, PlayCircleFillIcon, PlayIcon, PlusCircleBorderIcon, PlusCircleFillIcon, PlusIcon, PlusSquareIcon, Popover, QueryEditorIcon, QueryIcon, QueryListViewIcon, QueryNavIcon, QuestionMarkBorderIcon, QuestionMarkFillIcon, ROW_GUTTER_SIZE, Radio, ReaderModeIcon, ReposIcon, Row, SchoolIcon, Search1Icon, SearchIcon, SecurityIcon, SegmentedControlButton, SegmentedControlGroup, Select, ShareIcon, SidebarAutoIcon, SidebarCollapseIcon, SidebarExpandIcon, SidebarIcon, Skeleton, Space, Spacer, SpeechBubbleIcon, SpeechBubblePlusIcon, Spinner, SplitButton, StarBorderIcon, StarFillIcon, StopCircleBorderIcon, StopCricleFillIcon, StopIcon, StreamIcon, Switch, SyncIcon, TabPane, Table, TableIcon, Tabs, Tag, Tooltip, TrashIcon, Tree, TreeIcon, Typography, UploadIcon, UsbIcon, UserBadgeIcon, UserCircleIcon, UserGroupIcon, UserIcon, VideosIcon, Visible, VisibleOff, WarningBorderIcon, WarningFillIcon, WithDesignSystemThemeHoc, XCircleBorderIcon, XCircleFillIcon, ZoomInIcon, ZoomOutIcon, __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, getTabEmotionStyles, useDesignSystemFlags, useDesignSystemTheme, useNotification, useThemedStyles };
 //# sourceMappingURL=index.js.map