@databricks/design-system 1.3.0 → 1.4.1

package/dist/cjs/index.js

@@ -8,6 +8,7 @@ exports.Alert = void 0;
 exports.AlignCenterIcon = AlignCenterIcon;
 exports.AlignLeftIcon = AlignLeftIcon;
 exports.AlignRightIcon = AlignRightIcon;
+exports.ApplyDesignSystemFlags = void 0;
 exports.ArrowDownIcon = ArrowDownIcon;
 exports.ArrowLeftIcon = ArrowLeftIcon;
 exports.ArrowRightIcon = ArrowRightIcon;
@@ -97,6 +98,7 @@ exports.Icon = void 0;
 exports.ImageIcon = ImageIcon;
 exports.IndentDecreaseIcon = IndentDecreaseIcon;
 exports.IndentIncreaseIcon = IndentIncreaseIcon;
+exports.InfinityIcon = InfinityIcon;
 exports.InfoBorderIcon = InfoBorderIcon;
 exports.InfoFillIcon = InfoFillIcon;
 exports.Input = void 0;
@@ -194,6 +196,8 @@ exports.UserCircleIcon = UserCircleIcon;
 exports.UserGroupIcon = UserGroupIcon;
 exports.UserIcon = UserIcon;
 exports.VideosIcon = VideosIcon;
+exports.Visible = Visible;
+exports.VisibleOff = VisibleOff;
 exports.WarningBorderIcon = WarningBorderIcon;
 exports.WarningFillIcon = WarningFillIcon;
 exports.WithDesignSystemThemeHoc = WithDesignSystemThemeHoc;
@@ -206,6 +210,7 @@ exports.getAnimationCss = getAnimationCss;
 exports.getButtonEmotionStyles = void 0;
 exports.getPaginationEmotionStyles = getPaginationEmotionStyles;
 exports.getTabEmotionStyles = void 0;
+exports.useDesignSystemFlags = useDesignSystemFlags;
 exports.useDesignSystemTheme = useDesignSystemTheme;
 exports.useNotification = useNotification;
 exports.useThemedStyles = void 0;
@@ -17005,7 +17010,7 @@ function generateSelector(config) {
 
           cancelSetMockFocused();
 
-          if (!mobile && !popupElement.contains(document.activeElement)) {
+          if (!mobile && !popupElement.contains(target.getRootNode().activeElement)) {
             var _selectorRef$current3;
 
             (_selectorRef$current3 = selectorRef.current) === null || _selectorRef$current3 === void 0 ? void 0 : _selectorRef$current3.focus();
@@ -49671,11 +49676,576 @@ Typography$1.Text = Text$2;
 Typography$1.Link = Link$2;
 Typography$1.Title = Title$2;
 Typography$1.Paragraph = Paragraph$2;
-var AntDTypography = Typography$1;
+var AntDTypography = Typography$1; // Border variables
+
+const borders = {
+  borderRadiusMd: 4
+}; // eslint-disable-next-line import/no-anonymous-default-export
+
+var borders$1 = { ...borders
+}; // Exported from go/designsystem/colorsheet
+
+const colorPalettePrimary = {
+  primary: '#2272B4',
+  blue100: '#F0F8FF',
+  blue200: '#D7EDFE',
+  blue300: '#BAE1FC',
+  blue400: '#8ACAFF',
+  blue500: '#4299E0',
+  blue600: '#2272B4',
+  blue700: '#0E538B',
+  blue800: '#04355D',
+  green100: '#F3FCF6',
+  green200: '#D4F7DF',
+  green300: '#B1ECC5',
+  green400: '#8DDDA8',
+  green500: '#3CAA60',
+  green600: '#277C43',
+  green700: '#115026',
+  green800: '#093919',
+  white: '#FFFFFF',
+  grey100: '#F2F5F7',
+  grey200: '#E4ECF1',
+  grey300: '#CDDAE5',
+  grey400: '#BDCDDB',
+  grey500: '#8196A7',
+  grey600: '#5D7283',
+  grey700: '#44535F',
+  grey800: '#1F272D',
+  red100: '#FFF5F7',
+  red200: '#FDE2E8',
+  red300: '#FBD0D8',
+  red400: '#F792A6',
+  red500: '#E65B77',
+  red600: '#C82D4C',
+  red700: '#9E102C',
+  red800: '#630316',
+  yellow100: '#FFF9EB',
+  yellow200: '#FCEACA',
+  yellow300: '#F8D4A5',
+  yellow400: '#F2BE88',
+  yellow500: '#DE7921',
+  yellow600: '#BE501E',
+  yellow700: '#93320B',
+  yellow800: '#5F1B02'
+};
+const colorPaletteSecondary = {
+  brown: '#A6630C',
+  coral: '#C83243',
+  charcoal: '#5D7283',
+  indigo: '#434A93',
+  lemon: '#FACB66',
+  lime: '#308613',
+  pink: '#B45091',
+  purple: '#8A63BF',
+  teal: '#04867D',
+  turquoise: '#157CBC'
+}; // Colors taken from figma designs but not part of official list (yet)
+
+const unstableColors = {
+  textValidationInfo: '#64727D',
+  backgroundValidationDanger: colorPalettePrimary.red100,
+  backgroundValidationSuccess: colorPalettePrimary.blue100,
+  backgroundValidationWarning: colorPalettePrimary.yellow100,
+  borderValidationDanger: colorPalettePrimary.red300,
+  borderValidationSuccess: colorPalettePrimary.blue300,
+  borderValidationWarning: colorPalettePrimary.yellow300
+};
+const lightColorList = {
+  backgroundPrimary: colorPalettePrimary.white,
+  actionDangerPrimaryBackgroundDefault: colorPalettePrimary.red600,
+  actionDangerPrimaryBackgroundHover: colorPalettePrimary.red700,
+  actionDangerPrimaryBackgroundPress: colorPalettePrimary.red800,
+  actionDangerDefaultBackgroundDefault: (0, _chromaJs.default)(colorPalettePrimary.red600).alpha(0).hex(),
+  actionDangerDefaultBackgroundHover: (0, _chromaJs.default)(colorPalettePrimary.red600).alpha(0.08).hex(),
+  actionDangerDefaultBackgroundPress: (0, _chromaJs.default)(colorPalettePrimary.red600).alpha(0.16).hex(),
+  actionDangerDefaultBorderDefault: colorPalettePrimary.red600,
+  actionDangerDefaultBorderHover: colorPalettePrimary.red700,
+  actionDangerDefaultBorderPress: colorPalettePrimary.red800,
+  actionDangerDefaultTextDefault: colorPalettePrimary.red600,
+  actionDangerDefaultTextHover: colorPalettePrimary.red700,
+  actionDangerDefaultTextPress: colorPalettePrimary.red800,
+  actionDefaultBackgroundDefault: (0, _chromaJs.default)(colorPalettePrimary.blue800).alpha(0).hex(),
+  actionDefaultBackgroundHover: (0, _chromaJs.default)(colorPalettePrimary.blue600).alpha(0.08).hex(),
+  actionDefaultBackgroundPress: (0, _chromaJs.default)(colorPalettePrimary.blue600).alpha(0.16).hex(),
+  actionDefaultBorderDefault: colorPalettePrimary.grey300,
+  actionDefaultBorderFocus: colorPalettePrimary.blue600,
+  actionDefaultBorderHover: colorPalettePrimary.blue700,
+  actionDefaultBorderPress: colorPalettePrimary.blue800,
+  actionDefaultTextDefault: colorPalettePrimary.grey800,
+  actionDefaultTextHover: colorPalettePrimary.blue700,
+  actionDefaultTextPress: colorPalettePrimary.blue800,
+  actionDisabledBackground: colorPalettePrimary.grey200,
+  actionDisabledText: colorPalettePrimary.grey400,
+  actionPrimaryBackgroundDefault: colorPalettePrimary.blue600,
+  actionPrimaryBackgroundHover: colorPalettePrimary.blue700,
+  actionPrimaryBackgroundPress: colorPalettePrimary.blue800,
+  actionPrimaryTextDefault: colorPalettePrimary.white,
+  actionPrimaryTextHover: colorPalettePrimary.white,
+  actionPrimaryTextPress: colorPalettePrimary.white,
+  actionTertiaryBackgroundDefault: (0, _chromaJs.default)(colorPalettePrimary.blue600).alpha(0).hex(),
+  actionTertiaryBackgroundHover: (0, _chromaJs.default)(colorPalettePrimary.blue600).alpha(0.08).hex(),
+  actionTertiaryBackgroundPress: (0, _chromaJs.default)(colorPalettePrimary.blue600).alpha(0.16).hex(),
+  actionTertiaryTextDefault: colorPalettePrimary.blue600,
+  actionTertiaryTextHover: colorPalettePrimary.blue700,
+  actionTertiaryTextPress: colorPalettePrimary.blue800,
+  backgroundDanger: (0, _chromaJs.default)(colorPalettePrimary.red100).alpha(0.08).hex(),
+  backgroundSecondary: colorPalettePrimary.grey100,
+  backgroundWarning: (0, _chromaJs.default)(colorPalettePrimary.yellow100).alpha(0.08).hex(),
+  border: colorPalettePrimary.grey300,
+  borderDecorative: colorPalettePrimary.grey300,
+  textPrimary: colorPalettePrimary.grey800,
+  textSecondary: colorPalettePrimary.grey600,
+  textPlaceholder: colorPalettePrimary.grey400,
+  textValidationDanger: colorPalettePrimary.red600,
+  textValidationSuccess: colorPalettePrimary.green600,
+  textValidationWarning: colorPalettePrimary.yellow600,
+  overlayOverlay: (0, _chromaJs.default)(colorPalettePrimary.grey100).alpha(0.72).hex(),
+  // Tags
+  tagDefault: (0, _chromaJs.default)(colorPalettePrimary.grey600).alpha(0.08).hex(),
+  tagBrown: colorPaletteSecondary.brown,
+  tagCoral: colorPaletteSecondary.coral,
+  tagCharcoal: colorPalettePrimary.grey600,
+  tagIndigo: colorPaletteSecondary.indigo,
+  tagLemon: colorPaletteSecondary.lemon,
+  tagLime: colorPaletteSecondary.lime,
+  tagPink: colorPaletteSecondary.pink,
+  tagPurple: colorPaletteSecondary.purple,
+  tagTeal: colorPaletteSecondary.teal,
+  tagTurquoise: colorPaletteSecondary.turquoise,
+  tagText: colorPalettePrimary.white,
+  tagHover: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.08).hex(),
+  tagPress: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.16).hex(),
+  tagIconHover: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.8).hex(),
+  tagIconPress: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.76).hex(),
+  // Typography
+  typographyCodeBg: (0, _chromaJs.default)(colorPalettePrimary.grey600).alpha(0.08).hex(),
+  tooltipBackgroundTooltip: colorPalettePrimary.grey800,
+  ...unstableColors
+};
+const darkColorList = {
+  actionDangerPrimaryBackgroundDefault: (0, _chromaJs.default)(colorPalettePrimary.red400).alpha(0.84).hex(),
+  actionDangerPrimaryBackgroundHover: (0, _chromaJs.default)(colorPalettePrimary.red400).alpha(0.72).hex(),
+  actionDangerPrimaryBackgroundPress: (0, _chromaJs.default)(colorPalettePrimary.red400).alpha(0.6).hex(),
+  actionDangerDefaultBackgroundDefault: (0, _chromaJs.default)(colorPalettePrimary.red400).alpha(0).hex(),
+  actionDangerDefaultBackgroundHover: (0, _chromaJs.default)(colorPalettePrimary.red400).alpha(0.08).hex(),
+  actionDangerDefaultBackgroundPress: (0, _chromaJs.default)(colorPalettePrimary.red400).alpha(0.16).hex(),
+  actionDangerDefaultBorderDefault: colorPalettePrimary.red400,
+  actionDangerDefaultBorderHover: (0, _chromaJs.default)(colorPalettePrimary.red400).alpha(0.72).hex(),
+  actionDangerDefaultBorderPress: (0, _chromaJs.default)(colorPalettePrimary.red400).alpha(0.6).hex(),
+  actionDangerDefaultTextDefault: colorPalettePrimary.red400,
+  actionDangerDefaultTextHover: (0, _chromaJs.default)(colorPalettePrimary.red400).alpha(0.72).hex(),
+  actionDangerDefaultTextPress: (0, _chromaJs.default)(colorPalettePrimary.red400).alpha(0.6).hex(),
+  actionDefaultBackgroundDefault: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0).hex(),
+  actionDefaultBackgroundHover: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.08).hex(),
+  actionDefaultBackgroundPress: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.16).hex(),
+  actionDefaultBorderDefault: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.6).hex(),
+  actionDefaultBorderFocus: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.84).hex(),
+  actionDefaultBorderHover: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.8).hex(),
+  actionDefaultBorderPress: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.76).hex(),
+  actionDefaultTextDefault: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.84).hex(),
+  actionDefaultTextHover: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.8).hex(),
+  actionDefaultTextPress: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.76).hex(),
+  actionDisabledBackground: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.24).hex(),
+  actionDisabledText: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.4).hex(),
+  actionPrimaryBackgroundDefault: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.84).hex(),
+  actionPrimaryBackgroundHover: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.8).hex(),
+  actionPrimaryBackgroundPress: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.76).hex(),
+  actionPrimaryTextDefault: colorPalettePrimary.grey800,
+  actionPrimaryTextHover: colorPalettePrimary.grey800,
+  actionPrimaryTextPress: colorPalettePrimary.grey800,
+  actionTertiaryBackgroundDefault: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0).hex(),
+  actionTertiaryBackgroundHover: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.08).hex(),
+  actionTertiaryBackgroundPress: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.16).hex(),
+  actionTertiaryTextDefault: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.84).hex(),
+  actionTertiaryTextHover: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.8).hex(),
+  actionTertiaryTextPress: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.76).hex(),
+  backgroundPrimary: colorPalettePrimary.grey800,
+  backgroundSecondary: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.04).hex(),
+  border: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.48).hex(),
+  borderDecorative: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.24).hex(),
+  textPrimary: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.84).hex(),
+  textSecondary: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.6).hex(),
+  textPlaceholder: (0, _chromaJs.default)(colorPalettePrimary.grey400).alpha(0.84).hex(),
+  textValidationDanger: (0, _chromaJs.default)(colorPalettePrimary.red400).alpha(0.84).hex(),
+  textValidationSuccess: (0, _chromaJs.default)(colorPalettePrimary.green400).alpha(0.84).hex(),
+  textValidationWarning: (0, _chromaJs.default)(colorPalettePrimary.yellow400).alpha(0.84).hex(),
+  overlayOverlay: (0, _chromaJs.default)(colorPalettePrimary.grey800).alpha(0.72).hex(),
+  // Tags
+  tagDefault: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.16).hex(),
+  tagBrown: (0, _chromaJs.default)(colorPaletteSecondary.brown).alpha(0.84).hex(),
+  tagCoral: (0, _chromaJs.default)(colorPaletteSecondary.coral).alpha(0.84).hex(),
+  tagCharcoal: (0, _chromaJs.default)(colorPalettePrimary.grey600).alpha(0.84).hex(),
+  tagIndigo: (0, _chromaJs.default)(colorPaletteSecondary.indigo).alpha(0.84).hex(),
+  tagLemon: (0, _chromaJs.default)(colorPaletteSecondary.lemon).alpha(0.84).hex(),
+  tagLime: (0, _chromaJs.default)(colorPaletteSecondary.lime).alpha(0.84).hex(),
+  tagPink: (0, _chromaJs.default)(colorPaletteSecondary.pink).alpha(0.84).hex(),
+  tagPurple: (0, _chromaJs.default)(colorPaletteSecondary.purple).alpha(0.84).hex(),
+  tagTeal: (0, _chromaJs.default)(colorPaletteSecondary.teal).alpha(0.84).hex(),
+  tagTurquoise: (0, _chromaJs.default)(colorPaletteSecondary.turquoise).alpha(0.84).hex(),
+  tagText: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.84).hex(),
+  tagHover: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.08).hex(),
+  tagPress: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.16).hex(),
+  tagIconHover: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.8).hex(),
+  tagIconPress: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.76).hex(),
+  // Typography
+  typographyCodeBg: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.16).hex(),
+  tooltipBackgroundTooltip: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.6).hex(),
+  // Missing in list
+  backgroundDanger: 'rgba(200,45,76,0.08)',
+  backgroundWarning: 'rgba(222,121,33,0.08)',
+  // Missing in light list
+  // "background-validation-danger": "rgba(229,110,134,0)",
+  // "background-validation-warning": "rgba(252,234,202,0)",
+  ...unstableColors
+};
+const darkColors = { ...darkColorList,
+  ...colorPalettePrimary,
+  ...colorPaletteSecondary
+};
+const lightColors = { ...lightColorList,
+  ...colorPalettePrimary,
+  ...colorPaletteSecondary
+};
+
+function getSemanticColors(theme) {
+  switch (theme) {
+    case 'dark':
+      return { ...darkColors
+      };
+
+    default:
+      return { ...lightColors
+      };
+  }
+}
+/*
+Colors that need to be replaced by semantic colors.
+ */
+
+
+const deprecatedColors = {
+  // Radio Colors
+  radioInteractiveAvailable: colorPalettePrimary.primary,
+  radioInteractiveHover: '#186099',
+  radioInteractivePress: '#0D4F85',
+  radioDisabled: '#A2AEB8',
+  radioDefaultBorder: '#64727D',
+  radioDefaultBackground: '#FFFFFF',
+  radioInteractiveHoverSecondary: 'rgba(34, 115, 181, 0.08)',
+  // Fade of Interactive Available
+  radioInteractivePressSecondary: 'rgba(34, 115, 181, 0.16)' // Fade of Interactive Available
+
+};
+
+function getColors(theme) {
+  return { ...deprecatedColors,
+    ...getSemanticColors(theme)
+  };
+} // eslint-disable-next-line import/no-anonymous-default-export
+
+
+var antdVars = {
+  // IMPORTANT: Do not read this directly from components. Use `React.useContext`.
+  'ant-prefix': 'du-bois'
+};
+const DEFAULT_SPACING_UNIT = 8;
+const MODAL_PADDING = 40;
+const spacing = {
+  xs: DEFAULT_SPACING_UNIT / 2,
+  sm: DEFAULT_SPACING_UNIT,
+  md: DEFAULT_SPACING_UNIT * 2,
+  lg: DEFAULT_SPACING_UNIT * 3
+}; // Less variables that are used by AntD
+
+({
+  defaultPaddingLg: spacing.lg,
+  defaultPaddingMd: spacing.md,
+  defaultPaddingSm: spacing.sm,
+  defaultPaddingXs: spacing.sm,
+  defaultPaddingXss: spacing.xs,
+  paddingLg: spacing.md,
+  // TODO: Check if there is a better alternative with team
+  paddingMd: spacing.sm,
+  paddingSm: spacing.sm,
+  paddingXs: spacing.xs,
+  paddingXss: 0,
+  marginSm: 12,
+  marginLg: spacing.lg,
+  // Button
+  btnPaddingHorizontalBase: DEFAULT_SPACING_UNIT * 2,
+  btnPaddingHorizontalLg: DEFAULT_SPACING_UNIT * 2,
+  btnPaddingHorizontalSm: DEFAULT_SPACING_UNIT * 2,
+  // Modal
+  modalPadding: MODAL_PADDING,
+  modalLessPadding: MODAL_PADDING - 20,
+  modalHeaderPadding: "".concat(MODAL_PADDING, "px ").concat(MODAL_PADDING, "px ").concat(MODAL_PADDING - 20, "px"),
+  modalHeaderCloseSize: MODAL_PADDING * 2 + 22,
+  modalHeaderBorderWidth: 0,
+  modalBodyPadding: "0 ".concat(MODAL_PADDING, "px"),
+  modalFooterPaddingVertical: 0,
+  modalFooterPaddingHorizontal: 0,
+  modalFooterBorderWidth: 0,
+  // Switch
+  switchPadding: 0,
+  switchHeight: 16,
+  switchMinWidth: 28,
+  switchPinSize: 14
+});
+var spacing$1 = spacing;
+const heightBase = 40;
+const borderWidth = 1;
+const antdGeneralVariables = {
+  classnamePrefix: antdVars['ant-prefix'],
+  iconfontCssPrefix: 'anticon',
+  borderRadiusBase: 4,
+  borderWidth: borderWidth,
+  heightSm: 32,
+  heightBase: heightBase,
+  iconSize: 24,
+  // TODO: Update with icon overhaul to 16px
+  iconFontSize: 13,
+  buttonHeight: heightBase,
+  // Height available within button (for label and icon). Same for middle and small buttons.
+  buttonInnerHeight: heightBase - spacing$1.sm * 2 - borderWidth * 2
+};
+var generalVariables = antdGeneralVariables;
+const FONT_SIZE_BASE = 13; // Less variables that are used by AntD
+
+const antdTypography = {
+  fontSizeSm: 12,
+  fontSizeBase: FONT_SIZE_BASE,
+  fontSizeMd: FONT_SIZE_BASE,
+  fontSizeLg: 18,
+  fontSizeXl: 22,
+  fontSizeXxl: 32,
+  lineHeightSm: '16px',
+  lineHeightBase: '20px',
+  lineHeightMd: '20px',
+  lineHeightLg: '24px',
+  lineHeightXl: '28px',
+  lineHeightXxl: '40px',
+  typographyBoldFontWeight: 600
+}; // eslint-disable-next-line import/no-anonymous-default-export
+
+var typography = { ...antdTypography
+}; // eslint-disable-next-line import/no-named-as-default
+
+const defaultOptions = {
+  enableAnimation: false,
+  zIndexBase: 1000
+}; // Function to get variables for a certain theme.
+// End users should use useDesignSystemTheme instead.
+
+function getTheme(themeName) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultOptions;
+  return {
+    colors: getColors(themeName),
+    spacing: spacing$1,
+    general: generalVariables,
+    typography,
+    borders: borders$1,
+    themeName,
+    options
+  };
+}
+
+const themeNameToAntdName = {
+  dark: 'dark',
+  default: 'light'
+};
+
+function getClassNamePrefix(theme) {
+  const antdThemeName = themeNameToAntdName[theme.themeName];
+  return "".concat(theme.general.classnamePrefix, "-").concat(antdThemeName);
+}
+
+function getPrefixedClassNameFromTheme(theme, className) {
+  return [getClassNamePrefix(theme), className].filter(Boolean).join('-');
+}
+
+function useDesignSystemTheme() {
+  const emotionTheme = (0, _react2.useTheme)(); // Graceful fallback to default theme in case a test or developer forgot context.
+
+  const theme = emotionTheme && emotionTheme.general ? emotionTheme : getTheme('default');
+  return {
+    theme: theme,
+    classNamePrefix: getClassNamePrefix(theme),
+    getPrefixedClassName: className => getPrefixedClassNameFromTheme(theme, className)
+  };
+} // This is a simple typed HOC wrapper around the useDesignSystemTheme hook, for use in older react components.
+
+
+function WithDesignSystemThemeHoc(Component) {
+  return function WrappedWithDesignSystemTheme(props) {
+    const themeValues = useDesignSystemTheme();
+    return (0, _jsxRuntime.jsx)(Component, { ...props,
+      designSystemThemeApi: themeValues
+    });
+  };
+}
+
+const DuboisContextDefaults = {
+  enableAnimation: false,
+  theme: 'default',
+  // Prefer to use useDesignSystemTheme.getPrefixedClassName instead
+  getPrefixCls: suffix => suffix ? "du-bois-".concat(suffix) : 'du-bois',
+  flags: {}
+};
+const DesignSystemContext = /*#__PURE__*/(0, React.createContext)(DuboisContextDefaults);
+exports.DesignSystemContext = DesignSystemContext;
+
+function getAnimationCss(enableAnimation) {
+  const disableAnimationCss = {
+    animationDuration: '0s !important',
+    transition: 'none !important'
+  };
+  return enableAnimation ? {} : { // Apply to the current element
+    ...disableAnimationCss,
+    '&::before': disableAnimationCss,
+    '&::after': disableAnimationCss,
+    // Also apply to all child elements with a class that starts with our prefix
+    '[class*=du-bois]': { ...disableAnimationCss,
+      // Also target any pseudo-elements associated with those elements, since these can also be animated.
+      '&::before': disableAnimationCss,
+      '&::after': disableAnimationCss
+    }
+  };
+}
+
+const DesignSystemProviderPropsContext = /*#__PURE__*/React.default.createContext(null);
+
+const DesignSystemProvider = _ref => {
+  let {
+    children,
+    theme: themeName,
+    enableAnimation = false,
+    zIndexBase = 1000,
+    getPopupContainer,
+    flags = {}
+  } = _ref;
+  const theme = (0, React.useMemo)(() => getTheme(themeName || 'default', {
+    enableAnimation,
+    zIndexBase
+  }), // TODO: revisit this
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [themeName, zIndexBase]);
+  const providerPropsContext = (0, React.useMemo)(() => ({
+    theme: themeName,
+    enableAnimation,
+    zIndexBase,
+    getPopupContainer,
+    flags
+  }), [themeName, enableAnimation, zIndexBase, getPopupContainer, flags]);
+  const classNamePrefix = getClassNamePrefix(theme);
+  const value = (0, React.useMemo)(() => {
+    return {
+      enableAnimation,
+      theme: theme.themeName,
+      getPrefixCls: suffix => getPrefixedClassNameFromTheme(theme, suffix),
+      getPopupContainer,
+      flags
+    };
+  }, [enableAnimation, theme, getPopupContainer, flags]);
+  (0, React.useEffect)(() => {
+    return () => {
+      // when the design system context is unmounted, make sure the notification cache is also cleaned up
+      antDNotification.destroy();
+    };
+  }, []);
+  return (0, _jsxRuntime.jsx)(DesignSystemProviderPropsContext.Provider, {
+    value: providerPropsContext,
+    children: (0, _jsxRuntime.jsx)(_react2.ThemeProvider, {
+      theme: theme,
+      children: (0, _jsxRuntime.jsx)(ConfigProvider$1, {
+        prefixCls: classNamePrefix,
+        getPopupContainer: getPopupContainer,
+        children: (0, _jsxRuntime.jsx)(DesignSystemContext.Provider, {
+          value: value,
+          children: children
+        })
+      })
+    })
+  });
+};
+
+exports.DesignSystemProvider = DesignSystemProvider;
+
+const ApplyDesignSystemFlags = _ref2 => {
+  let {
+    flags,
+    children
+  } = _ref2;
+  const parentDesignSystemProviderProps = (0, React.useContext)(DesignSystemProviderPropsContext);
+
+  if (parentDesignSystemProviderProps === null) {
+    throw new Error("ApplyDesignSystemFlags cannot be used standalone - DesignSystemProvider must exist in the React context");
+  }
+
+  const newProps = (0, React.useMemo)(() => ({ ...parentDesignSystemProviderProps,
+    flags: { ...parentDesignSystemProviderProps.flags,
+      ...flags
+    }
+  }), [parentDesignSystemProviderProps, flags]);
+  return (0, _jsxRuntime.jsx)(DesignSystemProvider, { ...newProps,
+    children: children
+  });
+};
+
+exports.ApplyDesignSystemFlags = ApplyDesignSystemFlags;
+
+function useDesignSystemContext() {
+  return (0, React.useContext)(DesignSystemContext);
+}
+
+function useDesignSystemFlags() {
+  const context = useDesignSystemContext();
+  return context.flags;
+}
+/**
+ * A helper hook that allows quick creation of theme-dependent styles. 
+ * Results in more compact code than using useMemo and 
+ * useDesignSystemTheme separately.
+ * 
+ * @example 
+ * const styles = useThemedStyles((theme) => ({
+ *   overlay: {
+ *     backgroundColor: theme.colors.backgroundPrimary,
+ *     borderRadius: theme.borders.borderRadiusMd,
+ *   },
+ *   wrapper: {
+ *     display: 'flex',
+ *     gap: theme.spacing.md,
+ *   },
+ * }));
+
+ * <div css={styles.overlay}>...</div>
+ * 
+ * @param styleFactory Factory function that accepts theme object as a parameter and returns
+ *     the style object. **Note**: factory function body is being memoized internally and is intended
+ *     to be used only for simple style objects that depend solely on the theme. If you want to use
+ *     styles that change depending on external values (state, props etc.) you should use
+ *     `useDesignSystemTheme` directly with  your own reaction mechanism.
+ * @returns The constructed style object
+ */
+
+
+const useThemedStyles = styleFactory => {
+  const {
+    theme
+  } = useDesignSystemTheme(); // We can assume that the factory function won't change and we're
+  // observing theme changes only.
+
+  const styleFactoryRef = (0, React.useRef)(styleFactory);
+  return (0, React.useMemo)(() => styleFactoryRef.current(theme), [theme]);
+};
+
+exports.useThemedStyles = useThemedStyles;
 
 const Icon = props => {
   const {
     component: Component,
+    dangerouslySetAntdProps,
     ...otherProps
   } = props;
   const MemoizedComponent = (0, React.useMemo)(() => Component ? _ref => {
@@ -49694,7 +50264,8 @@ const Icon = props => {
   return (0, _jsxRuntime.jsx)(_icons.default, {
     style: {},
     component: MemoizedComponent,
-    ...otherProps
+    ...otherProps,
+    ...dangerouslySetAntdProps
   });
 };
 
@@ -51622,6 +52193,29 @@ function IndentIncreaseIcon(props) {
   });
 }
 
+function SvgInfinityIcon(props) {
+  return (0, _jsxRuntime.jsx)("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: (0, _jsxRuntime.jsx)("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M8 6.94l1.591-1.592a3.75 3.75 0 110 5.304L8 9.06l-1.591 1.59a3.75 3.75 0 110-5.303L8 6.94zm2.652-.531a2.25 2.25 0 110 3.182L9.06 8l1.59-1.591zM6.939 8L5.35 6.409a2.25 2.25 0 100 3.182l1.588-1.589L6.939 8z",
+      fill: "currentColor"
+    })
+  });
+}
+
+function InfinityIcon(props) {
+  return (0, _jsxRuntime.jsx)(Icon, { ...props,
+    component: SvgInfinityIcon
+  });
+}
+
 function SvgInfoBorderIcon(props) {
   return (0, _jsxRuntime.jsx)("svg", {
     width: "1em",
@@ -53461,6 +54055,80 @@ function VideosIcon(props) {
   });
 }
 
+function SvgVisible(props) {
+  return (0, _jsxRuntime.jsxs)("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [(0, _jsxRuntime.jsxs)("g", {
+      clipPath: "url(#Visible_svg__clip0_12466_34543)",
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      fill: "currentColor",
+      children: [(0, _jsxRuntime.jsx)("path", {
+        d: "M8 5a3 3 0 100 6 3 3 0 000-6zM6.5 8a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"
+      }), (0, _jsxRuntime.jsx)("path", {
+        d: "M8 2A8.389 8.389 0 00.028 7.777a.75.75 0 000 .466 8.389 8.389 0 0015.944 0 .749.749 0 000-.466A8.389 8.389 0 008 2zm0 10.52a6.888 6.888 0 01-6.465-4.51 6.888 6.888 0 0112.93 0A6.888 6.888 0 018 12.52z"
+      })]
+    }), (0, _jsxRuntime.jsx)("defs", {
+      children: (0, _jsxRuntime.jsx)("clipPath", {
+        id: "Visible_svg__clip0_12466_34543",
+        children: (0, _jsxRuntime.jsx)("path", {
+          fill: "#fff",
+          d: "M0 0h16v16H0z"
+        })
+      })
+    })]
+  });
+}
+
+function Visible(props) {
+  return (0, _jsxRuntime.jsx)(Icon, { ...props,
+    component: SvgVisible
+  });
+}
+
+function SvgVisibleOff(props) {
+  return (0, _jsxRuntime.jsxs)("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [(0, _jsxRuntime.jsxs)("g", {
+      clipPath: "url(#VisibleOff_svg__clip0_12466_34549)",
+      fill: "currentColor",
+      children: [(0, _jsxRuntime.jsx)("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M11.634 13.195l1.336 1.335 1.06-1.06-11.5-11.5-1.06 1.06 1.027 1.028a8.395 8.395 0 00-2.469 3.72.75.75 0 000 .465 8.389 8.389 0 0011.606 4.952zm-1.14-1.14l-1.301-1.301a3 3 0 01-3.946-3.946L3.56 5.121A6.898 6.898 0 001.535 8.01a6.888 6.888 0 008.96 4.045z"
+      }), (0, _jsxRuntime.jsx)("path", {
+        d: "M15.972 8.244a8.384 8.384 0 01-1.945 3.222l-1.061-1.06a6.886 6.886 0 001.499-2.396 6.888 6.888 0 00-8.187-4.293L5.082 2.522a8.389 8.389 0 0110.89 5.256c.05.15.05.314 0 .466z"
+      }), (0, _jsxRuntime.jsx)("path", {
+        d: "M11 8c0 .14-.01.277-.028.411L7.59 5.028A3 3 0 0111 8z"
+      })]
+    }), (0, _jsxRuntime.jsx)("defs", {
+      children: (0, _jsxRuntime.jsx)("clipPath", {
+        id: "VisibleOff_svg__clip0_12466_34549",
+        children: (0, _jsxRuntime.jsx)("path", {
+          fill: "#fff",
+          d: "M0 0h16v16H0z"
+        })
+      })
+    })]
+  });
+}
+
+function VisibleOff(props) {
+  return (0, _jsxRuntime.jsx)(Icon, { ...props,
+    component: SvgVisibleOff
+  });
+}
+
 function SvgWarningBorderIcon(props) {
   return (0, _jsxRuntime.jsx)("svg", {
     width: "1em",
@@ -53612,517 +54280,7 @@ function SeverityIcon(props) {
   const FilledIcon = filledIconsMap[props.severity];
   return (0, _jsxRuntime.jsx)(FilledIcon, { ...props
   });
-} // Exported from go/designsystem/colorsheet
-
-
-const colorPalettePrimary = {
-  primary: '#2272B4',
-  blue100: '#F0F8FF',
-  blue200: '#D7EDFE',
-  blue300: '#BADFFC',
-  blue400: '#8CCBFF',
-  blue500: '#439AE0',
-  blue600: '#2272B4',
-  blue700: '#0E538B',
-  blue800: '#04355D',
-  green100: '#F2FCF6',
-  green200: '#D4F7DF',
-  green300: '#B1ECC5',
-  green400: '#8DDDA8',
-  green500: '#3BA85F',
-  green600: '#277C43',
-  green700: '#115026',
-  green800: '#093A19',
-  white: '#FFFFFF',
-  grey100: '#F2F5F7',
-  grey200: '#E4EBF0',
-  grey300: '#CDDAE5',
-  grey400: '#BDCDDB',
-  grey500: '#8297A8',
-  grey600: '#5D7283',
-  grey700: '#44535F',
-  grey800: '#1F272D',
-  red100: '#FFF5F7',
-  red200: '#FDE2E8',
-  red300: '#FBD0D8',
-  red400: '#F7A6B6',
-  red500: '#E56E86',
-  red600: '#C72D4C',
-  red700: '#9E102C',
-  red800: '#630316',
-  yellow100: '#FFF9EB',
-  yellow200: '#FCEACA',
-  yellow300: '#F8D4A5',
-  yellow400: '#F2BE88',
-  yellow500: '#DE7A23',
-  yellow600: '#BF511E',
-  yellow700: '#93320B',
-  yellow800: '#611B02'
-};
-const colorPaletteSecondary = {
-  brown: '#A6630C',
-  coral: '#C83243',
-  charcoal: '#5D7283',
-  indigo: '#434A93',
-  lemon: '#FACB66',
-  lime: '#308813',
-  pink: '#B45091',
-  purple: '#8A63BF',
-  teal: '#035E58',
-  turquoise: '#147EB0'
-}; // Colors taken from figma designs but not part of official list (yet)
-
-const unstableColors = {
-  textValidationInfo: '#64727D',
-  backgroundValidationDanger: colorPalettePrimary.red100,
-  backgroundValidationSuccess: colorPalettePrimary.blue100,
-  backgroundValidationWarning: colorPalettePrimary.yellow100,
-  borderValidationDanger: colorPalettePrimary.red300,
-  borderValidationSuccess: colorPalettePrimary.blue300,
-  borderValidationWarning: colorPalettePrimary.yellow300
-};
-const lightColorList = {
-  backgroundPrimary: colorPalettePrimary.white,
-  actionDangerBackgroundDefault: colorPalettePrimary.red600,
-  actionDangerBackgroundHover: colorPalettePrimary.red700,
-  actionDangerBackgroundPress: colorPalettePrimary.red800,
-  actionDefaultBackgroundDefault: (0, _chromaJs.default)(colorPalettePrimary.blue800).alpha(0).hex(),
-  actionDefaultBackgroundHover: (0, _chromaJs.default)(colorPalettePrimary.blue800).alpha(0.08).hex(),
-  actionDefaultBackgroundPress: (0, _chromaJs.default)(colorPalettePrimary.blue800).alpha(0.16).hex(),
-  actionDefaultBorderDefault: colorPalettePrimary.grey300,
-  actionDefaultBorderFocus: colorPalettePrimary.blue600,
-  actionDefaultBorderHover: colorPalettePrimary.blue700,
-  actionDefaultBorderPress: colorPalettePrimary.blue800,
-  actionDefaultTextDefault: colorPalettePrimary.grey800,
-  actionDefaultTextHover: colorPalettePrimary.blue700,
-  actionDefaultTextPress: colorPalettePrimary.blue800,
-  actionDisabledBackground: colorPalettePrimary.grey200,
-  actionDisabledText: colorPalettePrimary.grey400,
-  actionPrimaryBackgroundDefault: colorPalettePrimary.blue600,
-  actionPrimaryBackgroundHover: colorPalettePrimary.blue700,
-  actionPrimaryBackgroundPress: colorPalettePrimary.blue800,
-  actionPrimaryTextDefault: colorPalettePrimary.white,
-  actionPrimaryTextHover: colorPalettePrimary.white,
-  actionPrimaryTextPress: colorPalettePrimary.white,
-  actionTertiaryBackgroundDefault: (0, _chromaJs.default)(colorPalettePrimary.blue600).alpha(0).hex(),
-  actionTertiaryBackgroundHover: (0, _chromaJs.default)(colorPalettePrimary.blue600).alpha(0.08).hex(),
-  actionTertiaryBackgroundPress: (0, _chromaJs.default)(colorPalettePrimary.blue600).alpha(0.16).hex(),
-  actionTertiaryTextDefault: colorPalettePrimary.blue600,
-  actionTertiaryTextHover: colorPalettePrimary.blue700,
-  actionTertiaryTextPress: colorPalettePrimary.blue800,
-  backgroundDanger: (0, _chromaJs.default)(colorPalettePrimary.red100).alpha(0.08).hex(),
-  backgroundSecondary: colorPalettePrimary.grey100,
-  backgroundWarning: (0, _chromaJs.default)(colorPalettePrimary.yellow100).alpha(0.08).hex(),
-  border: colorPalettePrimary.grey300,
-  borderDecorative: colorPalettePrimary.grey300,
-  textPrimary: colorPalettePrimary.grey800,
-  textSecondary: colorPalettePrimary.grey600,
-  textPlaceholder: colorPalettePrimary.grey400,
-  textValidationDanger: colorPalettePrimary.red600,
-  textValidationSuccess: colorPalettePrimary.green600,
-  textValidationWarning: colorPalettePrimary.yellow600,
-  overlayOverlay: (0, _chromaJs.default)(colorPalettePrimary.grey100).alpha(0.72).hex(),
-  // Tags
-  tagDefault: (0, _chromaJs.default)(colorPalettePrimary.grey600).alpha(0.08).hex(),
-  tagBrown: colorPaletteSecondary.brown,
-  tagCoral: colorPaletteSecondary.coral,
-  tagCharcoal: colorPalettePrimary.grey600,
-  tagIndigo: colorPaletteSecondary.indigo,
-  tagLemon: colorPaletteSecondary.lemon,
-  tagLime: colorPaletteSecondary.lime,
-  tagPink: colorPaletteSecondary.pink,
-  tagPurple: colorPaletteSecondary.purple,
-  tagTeal: colorPaletteSecondary.teal,
-  tagTurquoise: colorPaletteSecondary.turquoise,
-  tagText: colorPalettePrimary.white,
-  tagHover: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.08).hex(),
-  tagPress: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.16).hex(),
-  tagIconHover: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.8).hex(),
-  tagIconPress: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.76).hex(),
-  // Typography
-  typographyCodeBg: (0, _chromaJs.default)(colorPalettePrimary.grey600).alpha(0.08).hex(),
-  tooltipBackgroundTooltip: colorPalettePrimary.grey800,
-  ...unstableColors
-};
-const darkColorList = {
-  actionDangerBackgroundDefault: (0, _chromaJs.default)(colorPalettePrimary.red400).alpha(0.84).hex(),
-  actionDangerBackgroundHover: (0, _chromaJs.default)(colorPalettePrimary.red400).alpha(0.7).hex(),
-  actionDangerBackgroundPress: (0, _chromaJs.default)(colorPalettePrimary.red400).alpha(0.6).hex(),
-  actionDefaultBackgroundDefault: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0).hex(),
-  actionDefaultBackgroundHover: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.08).hex(),
-  actionDefaultBackgroundPress: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.16).hex(),
-  actionDefaultBorderDefault: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.6).hex(),
-  actionDefaultBorderFocus: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.84).hex(),
-  actionDefaultBorderHover: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.8).hex(),
-  actionDefaultBorderPress: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.76).hex(),
-  actionDefaultTextDefault: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.84).hex(),
-  actionDefaultTextHover: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.8).hex(),
-  actionDefaultTextPress: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.76).hex(),
-  actionDisabledBackground: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.24).hex(),
-  actionDisabledText: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.4).hex(),
-  actionPrimaryBackgroundDefault: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.84).hex(),
-  actionPrimaryBackgroundHover: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.8).hex(),
-  actionPrimaryBackgroundPress: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.76).hex(),
-  actionPrimaryTextDefault: colorPalettePrimary.grey800,
-  actionPrimaryTextHover: colorPalettePrimary.grey800,
-  actionPrimaryTextPress: colorPalettePrimary.grey800,
-  actionTertiaryBackgroundDefault: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0).hex(),
-  actionTertiaryBackgroundHover: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.08).hex(),
-  actionTertiaryBackgroundPress: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.16).hex(),
-  actionTertiaryTextDefault: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.84).hex(),
-  actionTertiaryTextHover: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.8).hex(),
-  actionTertiaryTextPress: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.76).hex(),
-  backgroundPrimary: colorPalettePrimary.grey800,
-  backgroundSecondary: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.04).hex(),
-  border: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.48).hex(),
-  borderDecorative: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.24).hex(),
-  textPrimary: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.84).hex(),
-  textSecondary: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.6).hex(),
-  textPlaceholder: (0, _chromaJs.default)(colorPalettePrimary.grey400).alpha(0.84).hex(),
-  textValidationDanger: (0, _chromaJs.default)(colorPalettePrimary.red400).alpha(0.84).hex(),
-  textValidationSuccess: (0, _chromaJs.default)(colorPalettePrimary.green400).alpha(0.84).hex(),
-  textValidationWarning: (0, _chromaJs.default)(colorPalettePrimary.yellow400).alpha(0.84).hex(),
-  overlayOverlay: (0, _chromaJs.default)(colorPalettePrimary.grey800).alpha(0.72).hex(),
-  // Tags
-  tagDefault: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.16).hex(),
-  tagBrown: (0, _chromaJs.default)(colorPaletteSecondary.brown).alpha(0.84).hex(),
-  tagCoral: (0, _chromaJs.default)(colorPaletteSecondary.coral).alpha(0.84).hex(),
-  tagCharcoal: (0, _chromaJs.default)(colorPalettePrimary.grey600).alpha(0.84).hex(),
-  tagIndigo: (0, _chromaJs.default)(colorPaletteSecondary.indigo).alpha(0.84).hex(),
-  tagLemon: (0, _chromaJs.default)(colorPaletteSecondary.lemon).alpha(0.84).hex(),
-  tagLime: (0, _chromaJs.default)(colorPaletteSecondary.lime).alpha(0.84).hex(),
-  tagPink: (0, _chromaJs.default)(colorPaletteSecondary.pink).alpha(0.84).hex(),
-  tagPurple: (0, _chromaJs.default)(colorPaletteSecondary.purple).alpha(0.84).hex(),
-  tagTeal: (0, _chromaJs.default)(colorPaletteSecondary.teal).alpha(0.84).hex(),
-  tagTurquoise: (0, _chromaJs.default)(colorPaletteSecondary.turquoise).alpha(0.84).hex(),
-  tagText: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.84).hex(),
-  tagHover: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.08).hex(),
-  tagPress: (0, _chromaJs.default)(colorPalettePrimary.blue400).alpha(0.16).hex(),
-  tagIconHover: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.8).hex(),
-  tagIconPress: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.76).hex(),
-  // Typography
-  typographyCodeBg: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.16).hex(),
-  tooltipBackgroundTooltip: (0, _chromaJs.default)(colorPalettePrimary.white).alpha(0.6).hex(),
-  // Missing in list
-  backgroundDanger: 'rgba(200,45,76,0.08)',
-  backgroundWarning: 'rgba(222,121,33,0.08)',
-  // Missing in light list
-  // "background-validation-danger": "rgba(229,110,134,0)",
-  // "background-validation-warning": "rgba(252,234,202,0)",
-  ...unstableColors
-};
-const darkColors = { ...darkColorList,
-  ...colorPalettePrimary,
-  ...colorPaletteSecondary
-};
-const lightColors = { ...lightColorList,
-  ...colorPalettePrimary,
-  ...colorPaletteSecondary
-};
-
-function getSemanticColors(theme) {
-  switch (theme) {
-    case 'dark':
-      return { ...darkColors
-      };
-
-    default:
-      return { ...lightColors
-      };
-  }
 }
-/*
-Colors that need to be replaced by semantic colors.
- */
-
-
-const deprecatedColors = {
-  // Radio Colors
-  radioInteractiveAvailable: colorPalettePrimary.primary,
-  radioInteractiveHover: '#186099',
-  radioInteractivePress: '#0D4F85',
-  radioDisabled: '#A2AEB8',
-  radioDefaultBorder: '#64727D',
-  radioDefaultBackground: '#FFFFFF',
-  radioInteractiveHoverSecondary: 'rgba(34, 115, 181, 0.08)',
-  // Fade of Interactive Available
-  radioInteractivePressSecondary: 'rgba(34, 115, 181, 0.16)' // Fade of Interactive Available
-
-};
-
-function getColors(theme) {
-  return { ...deprecatedColors,
-    ...getSemanticColors(theme)
-  };
-} // eslint-disable-next-line import/no-anonymous-default-export
-
-
-var antdVars = {
-  // IMPORTANT: Do not read this directly from components. Use `React.useContext`.
-  'ant-prefix': 'du-bois'
-};
-const DEFAULT_SPACING_UNIT = 8;
-const MODAL_PADDING = 40;
-const spacing = {
-  xs: DEFAULT_SPACING_UNIT / 2,
-  sm: DEFAULT_SPACING_UNIT,
-  md: DEFAULT_SPACING_UNIT * 2,
-  lg: DEFAULT_SPACING_UNIT * 3
-}; // Less variables that are used by AntD
-
-({
-  defaultPaddingLg: spacing.lg,
-  defaultPaddingMd: spacing.md,
-  defaultPaddingSm: spacing.sm,
-  defaultPaddingXs: spacing.sm,
-  defaultPaddingXss: spacing.xs,
-  paddingLg: spacing.md,
-  // TODO: Check if there is a better alternative with team
-  paddingMd: spacing.sm,
-  paddingSm: spacing.sm,
-  paddingXs: spacing.xs,
-  paddingXss: 0,
-  marginSm: 12,
-  marginLg: spacing.lg,
-  // Button
-  btnPaddingHorizontalBase: DEFAULT_SPACING_UNIT * 2,
-  btnPaddingHorizontalLg: DEFAULT_SPACING_UNIT * 2,
-  btnPaddingHorizontalSm: DEFAULT_SPACING_UNIT * 2,
-  // Modal
-  modalPadding: MODAL_PADDING,
-  modalLessPadding: MODAL_PADDING - 20,
-  modalHeaderPadding: "".concat(MODAL_PADDING, "px ").concat(MODAL_PADDING, "px ").concat(MODAL_PADDING - 20, "px"),
-  modalHeaderCloseSize: MODAL_PADDING * 2 + 22,
-  modalHeaderBorderWidth: 0,
-  modalBodyPadding: "0 ".concat(MODAL_PADDING, "px"),
-  modalFooterPaddingVertical: 0,
-  modalFooterPaddingHorizontal: 0,
-  modalFooterBorderWidth: 0,
-  // Switch
-  switchPadding: 0,
-  switchHeight: 16,
-  switchMinWidth: 28,
-  switchPinSize: 14
-});
-var spacing$1 = spacing;
-const heightBase = 40;
-const borderWidth = 1;
-const antdGeneralVariables = {
-  classnamePrefix: antdVars['ant-prefix'],
-  iconfontCssPrefix: 'anticon',
-  borderRadiusBase: 4,
-  borderWidth: borderWidth,
-  heightSm: 32,
-  heightBase: heightBase,
-  iconSize: 24,
-  buttonHeight: heightBase,
-  // Height available within button (for label and icon). Same for middle and small buttons.
-  buttonInnerHeight: heightBase - spacing$1.sm * 2 - borderWidth * 2
-};
-var generalVariables = antdGeneralVariables;
-const FONT_SIZE_BASE = 13; // Less variables that are used by AntD
-
-const antdTypography = {
-  fontSizeSm: 12,
-  fontSizeBase: FONT_SIZE_BASE,
-  fontSizeMd: FONT_SIZE_BASE,
-  fontSizeLg: 18,
-  fontSizeXl: 22,
-  fontSizeXxl: 32,
-  lineHeightSm: '16px',
-  lineHeightBase: '20px',
-  lineHeightMd: '20px',
-  lineHeightLg: '24px',
-  lineHeightXl: '28px',
-  lineHeightXxl: '40px',
-  typographyBoldFontWeight: 600
-}; // eslint-disable-next-line import/no-anonymous-default-export
-
-var typography = { ...antdTypography
-}; // Border variables
-
-const borders = {
-  borderRadiusMd: 4
-}; // eslint-disable-next-line import/no-anonymous-default-export
-
-var borders$1 = { ...borders
-};
-const defaultOptions = {
-  enableAnimation: false,
-  isCompact: false,
-  zIndexBase: 1000
-}; // Function to get variables for a certain theme.
-// End users should use useDesignSystemTheme instead.
-
-function getTheme(themeName) {
-  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultOptions;
-  return {
-    colors: getColors(themeName),
-    spacing: spacing$1,
-    general: generalVariables,
-    typography,
-    borders: borders$1,
-    themeName,
-    options
-  };
-}
-
-const themeNameToAntdName = {
-  dark: 'dark',
-  default: 'light'
-};
-
-function getClassNamePrefix(theme) {
-  const antdThemeName = themeNameToAntdName[theme.themeName];
-  return "".concat(theme.general.classnamePrefix, "-").concat(antdThemeName);
-}
-
-function getPrefixedClassNameFromTheme(theme, className) {
-  return [getClassNamePrefix(theme), className].filter(Boolean).join('-');
-}
-
-function useDesignSystemTheme() {
-  const emotionTheme = (0, _react2.useTheme)(); // Graceful fallback to default theme in case a test or developer forgot context.
-
-  const theme = emotionTheme && emotionTheme.general ? emotionTheme : getTheme('default');
-  return {
-    theme: theme,
-    classNamePrefix: getClassNamePrefix(theme),
-    getPrefixedClassName: className => getPrefixedClassNameFromTheme(theme, className)
-  };
-} // This is a simple typed HOC wrapper around the useDesignSystemTheme hook, for use in older react components.
-
-
-function WithDesignSystemThemeHoc(Component) {
-  return function WrappedWithDesignSystemTheme(props) {
-    const themeValues = useDesignSystemTheme();
-    return (0, _jsxRuntime.jsx)(Component, { ...props,
-      designSystemThemeApi: themeValues
-    });
-  };
-}
-/**
- * A helper hook that allows quick creation of theme-dependent styles. 
- * Results in more compact code than using useMemo and 
- * useDesignSystemTheme separately.
- * 
- * @example 
- * const styles = useThemedStyles((theme) => ({
- *   overlay: {
- *     backgroundColor: theme.colors.backgroundPrimary,
- *     borderRadius: theme.borders.borderRadiusMd,
- *   },
- *   wrapper: {
- *     display: 'flex',
- *     gap: theme.spacing.md,
- *   },
- * }));
-
- * <div css={styles.overlay}>...</div>
- * 
- * @param styleFactory Factory function that accepts theme object as a parameter and returns
- *     the style object. **Note**: factory function body is being memoized internally and is intended
- *     to be used only for simple style objects that depend solely on the theme. If you want to use
- *     styles that change depending on external values (state, props etc.) you should use
- *     `useDesignSystemTheme` directly with  your own reaction mechanism.
- * @returns The constructed style object
- */
-
-
-const useThemedStyles = styleFactory => {
-  const {
-    theme
-  } = useDesignSystemTheme(); // We can assume that the factory function won't change and we're
-  // observing theme changes only.
-
-  const styleFactoryRef = (0, React.useRef)(styleFactory);
-  return (0, React.useMemo)(() => styleFactoryRef.current(theme), [theme]);
-};
-
-exports.useThemedStyles = useThemedStyles;
-const DuboisContextDefaults = {
-  enableAnimation: false,
-  theme: 'default',
-  // Prefer to use useDesignSystemTheme.getPrefixedClassName instead
-  getPrefixCls: suffix => suffix ? "du-bois-".concat(suffix) : 'du-bois'
-};
-const DesignSystemContext = /*#__PURE__*/(0, React.createContext)(DuboisContextDefaults);
-exports.DesignSystemContext = DesignSystemContext;
-
-function getAnimationCss(enableAnimation) {
-  const disableAnimationCss = {
-    animationDuration: '0s !important',
-    transition: 'none !important'
-  };
-  return enableAnimation ? {} : { // Apply to the current element
-    ...disableAnimationCss,
-    '&::before': disableAnimationCss,
-    '&::after': disableAnimationCss,
-    // Also apply to all child elements with a class that starts with our prefix
-    '[class*=du-bois]': { ...disableAnimationCss,
-      // Also target any pseudo-elements associated with those elements, since these can also be animated.
-      '&::before': disableAnimationCss,
-      '&::after': disableAnimationCss
-    }
-  };
-}
-
-const DesignSystemProviderPropsContext = /*#__PURE__*/React.default.createContext(null);
-
-const DesignSystemProvider = _ref => {
-  let {
-    children,
-    theme: themeName,
-    enableAnimation = false,
-    zIndexBase = 1000,
-    getPopupContainer
-  } = _ref;
-  const theme = (0, React.useMemo)(() => getTheme(themeName || 'default', {
-    enableAnimation,
-    zIndexBase,
-    isCompact: true
-  }), // TODO: revisit this
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [themeName, zIndexBase]);
-  const providerPropsContext = (0, React.useMemo)(() => ({
-    theme: themeName,
-    enableAnimation,
-    zIndexBase,
-    isCompact: true,
-    getPopupContainer
-  }), [themeName, enableAnimation, zIndexBase, getPopupContainer]);
-  const classNamePrefix = getClassNamePrefix(theme);
-  const value = (0, React.useMemo)(() => {
-    return {
-      enableAnimation,
-      theme: theme.themeName,
-      getPrefixCls: suffix => getPrefixedClassNameFromTheme(theme, suffix),
-      getPopupContainer
-    };
-  }, [enableAnimation, theme, getPopupContainer]);
-  (0, React.useEffect)(() => {
-    return () => {
-      // when the design system context is unmounted, make sure the notification cache is also cleaned up
-      antDNotification.destroy();
-    };
-  }, []);
-  return (0, _jsxRuntime.jsx)(DesignSystemProviderPropsContext.Provider, {
-    value: providerPropsContext,
-    children: (0, _jsxRuntime.jsx)(_react2.ThemeProvider, {
-      theme: theme,
-      children: (0, _jsxRuntime.jsx)(ConfigProvider$1, {
-        prefixCls: classNamePrefix,
-        getPopupContainer: getPopupContainer,
-        children: (0, _jsxRuntime.jsx)(DesignSystemContext.Provider, {
-          value: value,
-          children: children
-        })
-      })
-    })
-  });
-};
-
-exports.DesignSystemProvider = DesignSystemProvider;
 
 const Alert = _ref => {
   let {
@@ -54172,16 +54330,19 @@ const getAlertEmotionStyles = (clsPrefix, theme, props) => {
   const classMessage = ".".concat(clsPrefix, "-message");
   const classWithDescription = ".".concat(clsPrefix, "-with-description");
   const classWithIcon = ".".concat(clsPrefix, "-icon");
-  const ALERT_ICON_HEIGHT = 25;
-  const ALERT_ICON_FONT_SIZE = 20;
+  const ALERT_ICON_HEIGHT = 16;
+  const ALERT_ICON_FONT_SIZE = 16;
   const styles = {
     // General
-    padding: theme.options.isCompact ? theme.spacing.sm : theme.spacing.md,
+    padding: theme.spacing.sm,
     ["".concat(classMessage, ", &").concat(classWithDescription, " ").concat(classMessage)]: {
       // TODO(giles): These three rules are all the same as the H3 styles. We can refactor them out into a shared object.
       fontSize: theme.typography.fontSizeBase,
       fontWeight: theme.typography.typographyBoldFontWeight,
-      lineHeight: "".concat(ALERT_ICON_HEIGHT, "px")
+      lineHeight: theme.typography.lineHeightBase
+    },
+    ["".concat(classDescription)]: {
+      lineHeight: theme.typography.lineHeightBase
     },
     // Icons
     [classCloseButton]: {
@@ -54195,24 +54356,27 @@ const getAlertEmotionStyles = (clsPrefix, theme, props) => {
       }
     },
     ["".concat(classCloseIcon, ", ").concat(classCloseButton)]: {
+      lineHeight: theme.typography.lineHeightBase,
       height: ALERT_ICON_HEIGHT,
       width: ALERT_ICON_HEIGHT,
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center'
     },
-    ...(theme.options.isCompact && {
-      [classWithIcon]: {
-        fontSize: 20,
-        paddingTop: 2
-      },
-      ["".concat(classCloseIcon, ", ").concat(classCloseButton, ", ").concat(classCloseText, " > span")]: {
-        height: 20,
-        width: 20,
-        fontSize: 20,
-        paddingTop: 2
+    [classWithIcon]: {
+      fontSize: ALERT_ICON_FONT_SIZE,
+      marginTop: 2
+    },
+    ["".concat(classCloseIcon, ", ").concat(classCloseButton, ", ").concat(classCloseText, " > span")]: {
+      lineHeight: theme.typography.lineHeightBase,
+      height: ALERT_ICON_HEIGHT,
+      width: ALERT_ICON_HEIGHT,
+      fontSize: ALERT_ICON_FONT_SIZE,
+      marginTop: 2,
+      '& > span': {
+        lineHeight: theme.typography.lineHeightBase
       }
-    }),
+    },
     // No description
     ...(!props.description && {
       [classMessage]: {
@@ -54237,6 +54401,13 @@ const getAlertEmotionStyles = (clsPrefix, theme, props) => {
       borderStyle: 'solid',
       borderWidth: "".concat(theme.general.borderWidth, "px 0")
     }),
+    // After closed
+    '&[data-show="false"]': {
+      borderWidth: 0,
+      padding: 0,
+      width: 0,
+      height: 0
+    },
     ...getAnimationCss(theme.options.enableAnimation)
   };
   return (
@@ -54247,11 +54418,16 @@ const getAlertEmotionStyles = (clsPrefix, theme, props) => {
   );
 };
 
-const AutoComplete = props => {
+const AutoComplete = _ref => {
+  let {
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref;
   const {
     theme
   } = useDesignSystemTheme();
   return (0, _jsxRuntime.jsx)(AntDAutoComplete, { ...props,
+    ...dangerouslySetAntdProps,
     css:
     /*#__PURE__*/
 
@@ -54266,6 +54442,7 @@ AutoComplete.Option = AntDAutoComplete.Option;
 const Breadcrumb = _ref => {
   let {
     dangerouslySetAntdProps,
+    includeTrailingCaret = true,
     ...props
   } = _ref;
   const {
@@ -54294,7 +54471,7 @@ const Breadcrumb = _ref => {
       }
     }
   }, process.env.NODE_ENV === "production" ? "" : ";label:styles;", process.env.NODE_ENV === "production" ? "" : ";label:styles;");
-  return (0, _jsxRuntime.jsx)(Breadcrumb$2, {
+  return (0, _jsxRuntime.jsxs)(Breadcrumb$2, {
     separator: (0, _jsxRuntime.jsx)(ChevronRightIcon, {}),
     ...props,
     ...dangerouslySetAntdProps,
@@ -54302,7 +54479,10 @@ const Breadcrumb = _ref => {
     /*#__PURE__*/
 
     /*#__PURE__*/
-    (0, _react2.css)(getAnimationCss(theme.options.enableAnimation), styles, process.env.NODE_ENV === "production" ? "" : ";label:Breadcrumb;", process.env.NODE_ENV === "production" ? "" : ";label:css;")
+    (0, _react2.css)(getAnimationCss(theme.options.enableAnimation), styles, process.env.NODE_ENV === "production" ? "" : ";label:Breadcrumb;", process.env.NODE_ENV === "production" ? "" : ";label:css;"),
+    children: [props.children, includeTrailingCaret && props.children && (0, _jsxRuntime.jsx)(Breadcrumb.Item, {
+      children: " "
+    })]
   });
 };
 
@@ -54425,42 +54605,42 @@ function getLinkStyles(theme) {
 
 function getPrimaryDangerStyles(theme) {
   return {
-    backgroundColor: theme.colors.actionDangerBackgroundDefault,
+    backgroundColor: theme.colors.actionDangerPrimaryBackgroundDefault,
     borderColor: 'transparent',
     color: theme.colors.white,
     '&:hover': {
-      backgroundColor: theme.colors.actionDangerBackgroundHover,
+      backgroundColor: theme.colors.actionDangerPrimaryBackgroundHover,
       borderColor: 'transparent',
       color: theme.colors.white
     },
     '&:active': {
-      backgroundColor: theme.colors.actionDangerBackgroundPress,
+      backgroundColor: theme.colors.actionDangerPrimaryBackgroundPress,
       borderColor: 'transparent',
       color: theme.colors.white
     },
     '&:focus-visible': {
-      outlineColor: theme.colors.actionDangerBackgroundDefault
+      outlineColor: theme.colors.actionDangerPrimaryBackgroundDefault
     }
   };
 }
 
 function getSecondaryDangerStyles(theme) {
   return {
-    backgroundColor: theme.colors.white,
-    borderColor: theme.colors.actionDangerBackgroundDefault,
-    color: theme.colors.textValidationDanger,
+    backgroundColor: theme.colors.actionDangerDefaultBackgroundDefault,
+    borderColor: theme.colors.actionDangerDefaultBorderDefault,
+    color: theme.colors.actionDangerDefaultTextDefault,
     '&:hover': {
-      backgroundColor: theme.colors.white,
-      borderColor: theme.colors.actionDangerBackgroundHover,
-      color: theme.colors.actionDangerBackgroundHover
+      backgroundColor: theme.colors.actionDangerDefaultBackgroundHover,
+      borderColor: theme.colors.actionDangerDefaultBorderHover,
+      color: theme.colors.actionDangerDefaultTextHover
     },
     '&:active': {
-      backgroundColor: theme.colors.white,
-      borderColor: theme.colors.actionDangerBackgroundPress,
-      color: theme.colors.actionDangerBackgroundPress
+      backgroundColor: theme.colors.actionDangerDefaultBackgroundPress,
+      borderColor: theme.colors.actionDangerDefaultBorderPress,
+      color: theme.colors.actionDangerDefaultTextPress
     },
     '&:focus-visible': {
-      outlineColor: theme.colors.actionDangerBackgroundDefault
+      outlineColor: theme.colors.actionDangerPrimaryBackgroundDefault
     }
   };
 }
@@ -54483,6 +54663,10 @@ function getDisabledStyles(theme) {
   };
 }
 
+function getEndIconClsName(theme) {
+  return "".concat(theme.general.iconfontCssPrefix, "-btn-end-icon");
+}
+
 const getButtonEmotionStyles = _ref => {
   let {
     theme,
@@ -54495,30 +54679,69 @@ const getButtonEmotionStyles = _ref => {
     type
   } = _ref;
   const clsIcon = ".".concat(theme.general.iconfontCssPrefix);
+  const clsEndIcon = ".".concat(getEndIconClsName(theme));
   const clsLoadingIcon = ".".concat(classNamePrefix, "-btn-loading-icon");
   const clsIconOnly = ".".concat(classNamePrefix, "-btn-icon-only");
   const classPrimary = ".".concat(classNamePrefix, "-btn-primary");
   const classLink = ".".concat(classNamePrefix, "-btn-link");
   const classDangerous = ".".concat(classNamePrefix, "-btn-dangerous");
   const SMALL_BUTTON_HEIGHT = 24;
+  const tertiaryColors = {
+    background: theme.colors.actionTertiaryBackgroundDefault,
+    color: theme.colors.actionTertiaryTextDefault,
+    '&:hover': {
+      background: theme.colors.actionTertiaryBackgroundHover,
+      color: theme.colors.actionTertiaryTextHover
+    },
+    '&:active': {
+      background: theme.colors.actionTertiaryBackgroundPress,
+      color: theme.colors.actionTertiaryTextPress
+    }
+  };
+  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
+    }),
+    ...(size === 'small' && {
+      lineHeight: theme.typography.lineHeightSm,
+      ...(onlyIcon && {
+        fontSize: 16
+      })
+    })
+  };
+  const inactiveIconCss = {
+    color: theme.colors.grey600
+  };
+  const endIconCssSelector = "span > ".concat(clsEndIcon, " > ").concat(clsIcon);
   const styles = {
     lineHeight: theme.typography.lineHeightBase,
     boxShadow: 'none',
+    height: theme.general.heightSm,
     ...(!onlyIcon && {
       '&&': {
-        padding: theme.options.isCompact || size === 'small' ? '4px 12px' : '8px 16px',
-        ...(size === 'ultrasmall' && {
+        padding: '4px 12px',
+        ...(size === 'small' && {
           padding: '0 8px'
         })
       }
     }),
-    ...((theme.options.isCompact || size === 'small') && {
-      height: theme.general.heightSm,
-      ...(onlyIcon && {
-        width: theme.general.heightSm
-      })
+    ...(onlyIcon && {
+      width: theme.general.heightSm
     }),
-    ...(size === 'ultrasmall' && {
+    ...(size === 'small' && {
       height: SMALL_BUTTON_HEIGHT,
       lineHeight: theme.typography.lineHeightBase,
       ...(onlyIcon && {
@@ -54593,39 +54816,26 @@ const getButtonEmotionStyles = _ref => {
     ["> ".concat(clsIcon, " + span, > span + ").concat(clsIcon)]: {
       marginRight: 0
     },
-    ["> ".concat(clsIcon)]: {
-      fontSize: theme.general.buttonInnerHeight,
-      // 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: theme.options.isCompact || size === 'small' ? -3 : -5
-      }),
-      ...((theme.options.isCompact || size === 'small') && {
-        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
-        // Need to make sure not to apply this to regular buttons as it will offset the icons
-        ...(!onlyIcon && {
-          verticalAlign: -4
-        })
-      }),
-      ...(size === 'ultrasmall' && {
-        lineHeight: theme.typography.lineHeightBase,
-        ...(onlyIcon && {
-          fontSize: 16
-        })
-      })
+    ["> ".concat(clsIcon)]: iconCss,
+    ["> ".concat(endIconCssSelector)]: { ...iconCss,
+      marginLeft: size === 'small' ? 8 : 12
     },
+    ...(!type && {
+      ["&:enabled:not(:hover):not(:active) > ".concat(clsIcon)]: inactiveIconCss
+    }),
+    ...(!type && {
+      ["&:enabled:not(:hover):not(:active) > ".concat(endIconCssSelector)]: inactiveIconCss
+    }),
     // Disable animations
     ["&[".concat(classNamePrefix, "-click-animating-without-extra-node='true']::after")]: {
       display: 'none'
     },
     ["&".concat(clsIconOnly)]: {
       border: 'none',
+      //
+      ["&:enabled:not(".concat(classLink, ")")]: { ...tertiaryColors,
+        color: theme.colors.textSecondary
+      },
       '&[disabled]:hover': {
         backgroundColor: 'transparent'
       }
@@ -54638,13 +54848,19 @@ 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 importantStyles = importantify(styles);
+  const importantTypeStyles = importantify(typeStyles);
   return (
     /*#__PURE__*/
 
     /*#__PURE__*/
-    (0, _react2.css)(importantStyles, process.env.NODE_ENV === "production" ? "" : ";label:getButtonEmotionStyles;", process.env.NODE_ENV === "production" ? "" : ";label:getButtonEmotionStyles;")
+    (0, _react2.css)(importantStyles, importantTypeStyles, process.env.NODE_ENV === "production" ? "" : ";label:getButtonEmotionStyles;", process.env.NODE_ENV === "production" ? "" : ";label:getButtonEmotionStyles;")
   );
 };
 
@@ -54656,19 +54872,21 @@ _ref2, ref) {
     children,
     size,
     type,
+    endIcon,
     ...props
   } = _ref2;
   const {
     theme,
     classNamePrefix
   } = useDesignSystemTheme();
+  const clsEndIcon = getEndIconClsName(theme);
   return (0, _jsxRuntime.jsx)(Button$3, { ...props,
     css: getButtonEmotionStyles({
       theme,
       classNamePrefix,
       loading: Boolean(props.loading),
       withIcon: Boolean(props.icon),
-      onlyIcon: Boolean(props.icon && !children),
+      onlyIcon: Boolean((props.icon || endIcon) && !children),
       danger: Boolean(props.danger),
       enableAnimation: theme.options.enableAnimation,
       size: size || 'middle',
@@ -54678,8 +54896,14 @@ _ref2, ref) {
     ...dangerouslySetAntdProps,
     ref: ref,
     type: type === 'tertiary' ? 'link' : type,
-    children: children && (0, _jsxRuntime.jsx)("span", {
-      children: children
+    children: children && (0, _jsxRuntime.jsxs)("span", {
+      style: {
+        visibility: props !== null && props !== void 0 && props.loading ? 'hidden' : 'visible'
+      },
+      children: [children, endIcon && (0, _jsxRuntime.jsx)("span", {
+        className: clsEndIcon,
+        children: endIcon
+      })]
     })
   });
 }); // This is needed for other Ant components that wrap Button, such as Tooltip, to correctly
@@ -54696,6 +54920,7 @@ function getCheckboxEmotionStyles(clsPrefix, theme) {
   const classIndeterminate = ".".concat(clsPrefix, "-indeterminate");
   const classChecked = ".".concat(clsPrefix, "-checked");
   const classDisabled = ".".concat(clsPrefix, "-disabled");
+  const classDisabledWrapper = ".".concat(clsPrefix, "-wrapper-disabled");
   const defaultSelector = "".concat(classInput, " + ").concat(classInner);
   const hoverSelector = "".concat(classInput, ":hover + ").concat(classInner);
   const pressSelector = "".concat(classInput, ":active + ").concat(classInner);
@@ -54762,59 +54987,64 @@ function getCheckboxEmotionStyles(clsPrefix, theme) {
       }
     },
     // Disabled state
-    [classDisabled]: {
-      // Disabled Checked
-      ["&".concat(classChecked)]: {
-        [classInner]: {
-          backgroundColor: theme.colors.actionDisabledBackground,
-          borderColor: theme.colors.actionDisabledBackground
+    ["&".concat(classDisabledWrapper)]: {
+      [classDisabled]: {
+        // Disabled Checked
+        ["&".concat(classChecked)]: {
+          [classInner]: {
+            backgroundColor: theme.colors.actionDisabledBackground,
+            borderColor: theme.colors.actionDisabledBackground
+          },
+          // Disabled checked hover
+          [hoverSelector]: {
+            backgroundColor: theme.colors.actionDisabledBackground,
+            borderColor: theme.colors.actionDisabledBackground
+          }
         },
-        // Disabled checked hover
-        [hoverSelector]: {
-          backgroundColor: theme.colors.actionDisabledBackground,
-          borderColor: theme.colors.actionDisabledBackground
-        }
-      },
-      // Disabled indeterminate
-      ["&".concat(classIndeterminate)]: {
+        // Disabled indeterminate
+        ["&".concat(classIndeterminate)]: {
+          [classInner]: {
+            backgroundColor: theme.colors.actionDisabledBackground,
+            borderColor: theme.colors.actionDisabledBackground
+          },
+          // Disabled indeterminate hover
+          [hoverSelector]: {
+            backgroundColor: theme.colors.actionDisabledBackground,
+            borderColor: theme.colors.actionDisabledBackground
+          }
+        },
+        // Disabled unchecked
         [classInner]: {
-          backgroundColor: theme.colors.actionDisabledBackground,
-          borderColor: theme.colors.actionDisabledBackground
+          backgroundColor: theme.colors.white,
+          borderColor: theme.colors.actionDisabledBackground,
+          // The after pseudo-element is used for the check image itself
+          '&:after': {
+            borderColor: theme.colors.white
+          }
         },
-        // Disabled indeterminate hover
+        // Disabled hover
         [hoverSelector]: {
-          backgroundColor: theme.colors.actionDisabledBackground,
+          backgroundColor: theme.colors.white,
           borderColor: theme.colors.actionDisabledBackground
         }
-      },
-      // Disabled unchecked
-      [classInner]: {
-        backgroundColor: theme.colors.white,
-        borderColor: theme.colors.actionDisabledBackground,
-        // The after pseudo-element is used for the check image itself
-        '&:after': {
-          borderColor: theme.colors.white
-        }
-      },
-      // Disabled hover
-      [hoverSelector]: {
-        backgroundColor: theme.colors.white,
-        borderColor: theme.colors.actionDisabledBackground
       }
     },
     // Animation
     ...getAnimationCss(theme.options.enableAnimation)
   };
   return styles;
-} // We should probably extend AntdCheckboxProps with Omit going forward and support dangerouslySetAntdProps
-
+}
 
 const DuboisCheckbox = /*#__PURE__*/(0, React.forwardRef)(function Checkbox(_ref, ref) {
   let {
     isChecked,
     onChange,
     children,
-    isDisabled = false
+    isDisabled = false,
+    style,
+    wrapperStyle,
+    dangerouslySetAntdProps,
+    ...restProps
   } = _ref;
   const {
     theme,
@@ -54823,6 +55053,7 @@ const DuboisCheckbox = /*#__PURE__*/(0, React.forwardRef)(function Checkbox(_ref
   const clsPrefix = getPrefixedClassName('checkbox');
   return (// Antd checkboxes are inline, so we add this div to make ours block-level
     (0, _jsxRuntime.jsx)("div", {
+      style: wrapperStyle,
       children: (0, _jsxRuntime.jsx)(AntDCheckbox, {
         checked: isChecked === null ? undefined : isChecked,
         ref: ref,
@@ -54836,6 +55067,10 @@ const DuboisCheckbox = /*#__PURE__*/(0, React.forwardRef)(function Checkbox(_ref
 
         /*#__PURE__*/
         (0, _react2.css)(importantify(getCheckboxEmotionStyles(clsPrefix, theme)), process.env.NODE_ENV === "production" ? "" : ";label:DuboisCheckbox;", process.env.NODE_ENV === "production" ? "" : ";label:css;"),
+        style: style,
+        "aria-checked": isChecked === null ? 'mixed' : isChecked,
+        ...restProps,
+        ...dangerouslySetAntdProps,
         children: children
       })
     })
@@ -54896,10 +55131,6 @@ function getCollapseEmotionStyles(clsPrefix, theme) {
         }
       }
     },
-    ["& > ".concat(classItem, " > ").concat(classHeader)]: {
-      padding: '10px 44px 10px 0',
-      lineHeight: theme.typography.lineHeightBase
-    },
     [classHeader]: {
       color: theme.colors.textPrimary,
       fontWeight: 600,
@@ -54924,12 +55155,10 @@ function getCollapseEmotionStyles(clsPrefix, theme) {
     [classContentBox]: {
       padding: '8px 16px 16px'
     },
-    ...(theme.options.isCompact && {
-      ["& > ".concat(classItem, " > ").concat(classHeader)]: {
-        padding: '6px 44px 6px 0',
-        lineHeight: theme.typography.lineHeightBase
-      }
-    }),
+    ["& > ".concat(classItem, " > ").concat(classHeader)]: {
+      padding: '6px 44px 6px 0',
+      lineHeight: theme.typography.lineHeightBase
+    },
     ...getAnimationCss(theme.options.enableAnimation)
   };
   return (
@@ -54952,7 +55181,7 @@ const Collapse = _ref => {
   } = useDesignSystemTheme();
   const clsPrefix = getPrefixedClassName('collapse');
   return (0, _jsxRuntime.jsx)(Collapse$2, {
-    expandIcon: ChevronDownIcon,
+    expandIcon: () => (0, _jsxRuntime.jsx)(ChevronDownIcon, {}),
     expandIconPosition: "right",
     ...props,
     ...dangerouslySetAntdProps,
@@ -54983,7 +55212,7 @@ function getEmotionStyles(clsPrefix, theme) {
   const classSeparator = ".".concat(clsPrefix, "-separator");
   const classSuffix = ".".concat(clsPrefix, "-suffix");
   const styles = {
-    height: theme.options.isCompact ? 32 : 40,
+    height: 32,
     borderRadius: theme.borders.borderRadiusMd,
     borderColor: theme.colors.border,
     color: theme.colors.textPrimary,
@@ -55174,7 +55403,11 @@ const LegacyDatePicker = Object.assign(DuboisDatePicker, {
 });
 exports.LegacyDatePicker = LegacyDatePicker;
 
-const Dropdown = props => {
+const Dropdown = _ref => {
+  let {
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref;
   const {
     theme
   } = useDesignSystemTheme();
@@ -55184,7 +55417,8 @@ const Dropdown = props => {
     overlayStyle: {
       zIndex: theme.options.zIndexBase + 50,
       ...props.overlayStyle
-    }
+    },
+    ...dangerouslySetAntdProps
   });
 };
 
@@ -55194,13 +55428,14 @@ const Root = DropdownMenu$1.Root; // Behavioral component only
 const Content$1 = /*#__PURE__*/(0, React.forwardRef)(function Content(_ref, ref) {
   let {
     children,
+    minWidth = 220,
     ...props
   } = _ref;
   return (0, _jsxRuntime.jsx)(DropdownMenu$1.Content, {
     ref: ref,
     css: theme => ({
       backgroundColor: theme.colors.backgroundPrimary,
-      minWidth: 220,
+      minWidth: minWidth,
       color: theme.colors.textPrimary,
       lineHeight: theme.typography.lineHeightBase,
       border: "1px solid ".concat(theme.colors.borderDecorative),
@@ -55596,7 +55831,7 @@ const getFormItemEmotionStyles = _ref => {
         margin: 0
       },
       [clsFormItemInputControl]: {
-        minHeight: theme.options.isCompact ? theme.general.heightSm : theme.general.heightBase
+        minHeight: theme.general.heightSm
       },
       ["".concat(clsFormItemInputControl, " input[disabled]")]: {
         border: 'none'
@@ -55616,13 +55851,18 @@ const FormDubois = /*#__PURE__*/(0, React.forwardRef)(function Form(_ref2, ref)
     requiredMark: props.requiredMark || false
   };
   return (0, _jsxRuntime.jsx)(AntDForm, { ...mergedProps,
+    colon: false,
     ref: ref,
     ...dangerouslySetAntdProps
   });
 });
 exports.FormDubois = FormDubois;
 
-const FormItem = props => {
+const FormItem = _ref3 => {
+  let {
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref3;
   const {
     theme,
     classNamePrefix
@@ -55631,7 +55871,8 @@ const FormItem = props => {
     css: getFormItemEmotionStyles({
       theme,
       clsPrefix: classNamePrefix
-    })
+    }),
+    ...dangerouslySetAntdProps
   });
 };
 
@@ -55648,8 +55889,13 @@ exports.Form = Form;
 const __INTERNAL_DO_NOT_USE__FormItem = FormItem;
 exports.__INTERNAL_DO_NOT_USE__FormItem = __INTERNAL_DO_NOT_USE__FormItem;
 
-const Col = props => {
-  return (0, _jsxRuntime.jsx)(Col$2, { ...props
+const Col = _ref => {
+  let {
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref;
+  return (0, _jsxRuntime.jsx)(Col$2, { ...props,
+    ...dangerouslySetAntdProps
   });
 };
 
@@ -55667,8 +55913,13 @@ Row.defaultProps = {
   gutter: ROW_GUTTER_SIZE
 };
 
-const Space = props => {
-  return (0, _jsxRuntime.jsx)(AntDSpace, { ...props
+const Space = _ref => {
+  let {
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref;
+  return (0, _jsxRuntime.jsx)(AntDSpace, { ...props,
+    ...dangerouslySetAntdProps
   });
 };
 
@@ -55686,7 +55937,6 @@ function getLevelStyles(theme, props) {
         /*#__PURE__*/
         (0, _react2.css)({
           '&&': {
-            // TODO:FEINF-697 Move from XXL to XL
             fontSize: theme.typography.fontSizeXxl,
             lineHeight: theme.typography.lineHeightXxl,
             fontWeight: theme.typography.typographyBoldFontWeight
@@ -55701,7 +55951,6 @@ function getLevelStyles(theme, props) {
         /*#__PURE__*/
         (0, _react2.css)({
           '&&': {
-            // TODO:FEINF-697 Move from XL to LG, consider moving some usages of level 2 up to level 1
             fontSize: theme.typography.fontSizeXl,
             lineHeight: theme.typography.lineHeightXl,
             fontWeight: theme.typography.typographyBoldFontWeight
@@ -55710,6 +55959,20 @@ function getLevelStyles(theme, props) {
       );
 
     case 3:
+      return (
+        /*#__PURE__*/
+
+        /*#__PURE__*/
+        (0, _react2.css)({
+          '&&': {
+            fontSize: theme.typography.fontSizeLg,
+            lineHeight: theme.typography.lineHeightLg,
+            fontWeight: theme.typography.typographyBoldFontWeight
+          }
+        }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;", process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;")
+      );
+
+    case 4:
     default:
       return (
         /*#__PURE__*/
@@ -55769,11 +56032,10 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__$7() {
 
 const getHeaderStyles = (clsPrefix, theme) => {
   const breadcrumbClass = ".".concat(clsPrefix, "-breadcrumb");
-  const styles = { ...(theme.options.isCompact && {
-      [breadcrumbClass]: {
-        lineHeight: theme.typography.lineHeightBase
-      }
-    })
+  const styles = {
+    [breadcrumbClass]: {
+      lineHeight: theme.typography.lineHeightBase
+    }
   };
   return (
     /*#__PURE__*/
@@ -55783,7 +56045,7 @@ const getHeaderStyles = (clsPrefix, theme) => {
   );
 };
 
-var _ref$3 = process.env.NODE_ENV === "production" ? {
+var _ref$2 = process.env.NODE_ENV === "production" ? {
   name: "5s4ezj",
   styles: "display:inline-flex;vertical-align:middle;align-items:center;margin-left:8px"
 } : {
@@ -55792,7 +56054,7 @@ var _ref$3 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__$7
 };
 
-var _ref2$2 = process.env.NODE_ENV === "production" ? {
+var _ref2$3 = process.env.NODE_ENV === "production" ? {
   name: "1q4vxyr",
   styles: "margin-left:8px"
 } : {
@@ -55802,6 +56064,15 @@ var _ref2$2 = process.env.NODE_ENV === "production" ? {
 };
 
 var _ref3$1 = process.env.NODE_ENV === "production" ? {
+  name: "s079uh",
+  styles: "margin-top:2px"
+} : {
+  name: "1ky5whb-titleIfOtherElementsPresent",
+  styles: "margin-top:2px;label:titleIfOtherElementsPresent;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$7
+};
+
+var _ref4$1 = process.env.NODE_ENV === "production" ? {
   name: "18hxk3h",
   styles: "margin-top:0;margin-bottom:0 !important"
 } : {
@@ -55810,7 +56081,7 @@ var _ref3$1 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__$7
 };
 
-var _ref4$2 = process.env.NODE_ENV === "production" ? {
+var _ref5 = process.env.NODE_ENV === "production" ? {
   name: "1cl2a0e",
   styles: "display:flex;align-items:flex-start;justify-content:space-between"
 } : {
@@ -55826,31 +56097,20 @@ const Header$1 = props => {
   } = useDesignSystemTheme(); // TODO: Move to getHeaderStyles for consistency, followup ticket: https://databricks.atlassian.net/browse/FEINF-1222
 
   const styles = {
-    titleWrapper: _ref4$2,
+    titleWrapper: _ref5,
     breadcrumbWrapper:
     /*#__PURE__*/
 
     /*#__PURE__*/
     (0, _react2.css)({
       marginBottom: 2,
-      ...(theme.options.isCompact && {
-        lineHeight: theme.typography.lineHeightBase
-      })
+      lineHeight: theme.typography.lineHeightBase
     }, process.env.NODE_ENV === "production" ? "" : ";label:breadcrumbWrapper;", process.env.NODE_ENV === "production" ? "" : ";label:breadcrumbWrapper;"),
-    title: _ref3$1,
+    title: _ref4$1,
     // TODO: Look into a more emotion-idomatic way of doing this.
-    titleIfOtherElementsPresent:
-    /*#__PURE__*/
-
-    /*#__PURE__*/
-    (0, _react2.css)({
-      marginTop: 6,
-      ...(theme.options.isCompact && {
-        marginTop: 2
-      })
-    }, process.env.NODE_ENV === "production" ? "" : ";label:titleIfOtherElementsPresent;", process.env.NODE_ENV === "production" ? "" : ";label:titleIfOtherElementsPresent;"),
-    buttonContainer: _ref2$2,
-    titleAddOnsWrapper: _ref$3
+    titleIfOtherElementsPresent: _ref3$1,
+    buttonContainer: _ref2$3,
+    titleAddOnsWrapper: _ref$2
   };
   return (0, _jsxRuntime.jsxs)("div", {
     css: [getHeaderStyles(clsPrefix, theme), props.dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Header;"],
@@ -55879,21 +56139,36 @@ const Header$1 = props => {
 
 exports.Header = Header$1;
 
+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 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 styles = {
     '&&': {
       lineHeight: theme.typography.lineHeightBase,
-      paddingTop: theme.options.isCompact ? 5 : 9,
-      paddingBottom: theme.options.isCompact ? 5 : 9,
-      minHeight: theme.options.isCompact ? theme.general.heightSm : theme.general.heightBase,
+      paddingTop: 5,
+      paddingBottom: 5,
+      minHeight: theme.general.heightSm,
       '&:hover': {
         borderColor: theme.colors.actionPrimaryBackgroundHover
       },
       '&:focus': {
         outlineColor: theme.colors.actionPrimaryBackgroundDefault,
         outlineWidth: 2,
+        outlineOffset: -2,
         outlineStyle: 'solid',
         boxShadow: 'none',
         borderColor: 'transparent'
@@ -55905,9 +56180,9 @@ const getInputEmotionStyles = (clsPrefix, theme) => {
     },
     ["&".concat(affixClass)]: {
       lineHeight: theme.typography.lineHeightBase,
-      paddingTop: theme.options.isCompact ? 5 : 9,
-      paddingBottom: theme.options.isCompact ? 5 : 9,
-      minHeight: theme.options.isCompact ? theme.general.heightSm : theme.general.heightBase,
+      paddingTop: 5,
+      paddingBottom: 5,
+      minHeight: theme.general.heightSm,
       '::before': {
         lineHeight: theme.typography.lineHeightBase
       },
@@ -55920,11 +56195,42 @@ const getInputEmotionStyles = (clsPrefix, theme) => {
       '&&, &:focus': {
         outlineColor: theme.colors.actionPrimaryBackgroundDefault,
         outlineWidth: 2,
+        outlineOffset: -2,
         outlineStyle: 'solid',
         boxShadow: 'none',
         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 (
@@ -55937,6 +56243,9 @@ const getInputEmotionStyles = (clsPrefix, theme) => {
 
 const TextArea = /*#__PURE__*/(0, React.forwardRef)(function TextArea(_ref, ref) {
   let {
+    className,
+    validationState,
+    autoComplete = 'off',
     dangerouslySetAntdProps,
     dangerouslyAppendEmotionCSS,
     ...props
@@ -55945,14 +56254,21 @@ const TextArea = /*#__PURE__*/(0, React.forwardRef)(function TextArea(_ref, ref)
     classNamePrefix,
     theme
   } = useDesignSystemTheme();
-  return (0, _jsxRuntime.jsx)(Input$2.TextArea, { ...props,
-    ...dangerouslySetAntdProps,
+  const wrapperClass = getStateClass(classNamePrefix, validationState, className);
+  return (0, _jsxRuntime.jsx)(Input$2.TextArea, {
+    className: wrapperClass,
     ref: ref,
-    css: [getInputEmotionStyles(classNamePrefix, theme), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:TextArea;"]
+    autoComplete: autoComplete,
+    css: [getInputEmotionStyles(classNamePrefix, theme), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:TextArea;"],
+    ...props,
+    ...dangerouslySetAntdProps
   });
 });
 const Password = /*#__PURE__*/(0, React.forwardRef)(function Password(_ref2, ref) {
   let {
+    className,
+    validationState,
+    autoComplete = 'off',
     dangerouslySetAntdProps,
     dangerouslyAppendEmotionCSS,
     ...props
@@ -55961,16 +56277,22 @@ const Password = /*#__PURE__*/(0, React.forwardRef)(function Password(_ref2, ref
     classNamePrefix,
     theme
   } = useDesignSystemTheme();
+  const wrapperClass = getStateClass(classNamePrefix, validationState, className);
   return (0, _jsxRuntime.jsx)(Input$2.Password, {
+    className: wrapperClass,
     visibilityToggle: false,
-    ...props,
     ref: ref,
-    ...dangerouslySetAntdProps,
-    css: [getInputEmotionStyles(classNamePrefix, theme), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Password;"]
+    autoComplete: autoComplete,
+    css: [getInputEmotionStyles(classNamePrefix, theme), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Password;"],
+    ...props,
+    ...dangerouslySetAntdProps
   });
 });
 const DuboisInput = /*#__PURE__*/(0, React.forwardRef)(function Input(_ref3, ref) {
   let {
+    className,
+    validationState,
+    autoComplete = 'off',
     dangerouslySetAntdProps,
     dangerouslyAppendEmotionCSS,
     ...props
@@ -55979,10 +56301,14 @@ const DuboisInput = /*#__PURE__*/(0, React.forwardRef)(function Input(_ref3, ref
     classNamePrefix,
     theme
   } = useDesignSystemTheme();
-  return (0, _jsxRuntime.jsx)(Input$2, { ...props,
-    ...dangerouslySetAntdProps,
+  const wrapperClass = getStateClass(classNamePrefix, validationState, className);
+  return (0, _jsxRuntime.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), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:DuboisInput;"],
+    ...props,
+    ...dangerouslySetAntdProps
   });
 }); // Properly creates the namespace and dot-notation components with correct types.
 
@@ -56006,8 +56332,13 @@ const {
   Content
 } = AntDLayout;
 
-const Layout = props => {
-  return (0, _jsxRuntime.jsx)(AntDLayout, { ...props
+const Layout = _ref => {
+  let {
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref;
+  return (0, _jsxRuntime.jsx)(AntDLayout, { ...props,
+    ...dangerouslySetAntdProps
   });
 };
 
@@ -56017,8 +56348,13 @@ Layout.Footer = Footer;
 Layout.Sider = Sider;
 Layout.Content = Content;
 
-const Menu = props => {
-  return (0, _jsxRuntime.jsx)(AntDMenu, { ...props
+const Menu = _ref => {
+  let {
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref;
+  return (0, _jsxRuntime.jsx)(AntDMenu, { ...props,
+    ...dangerouslySetAntdProps
   });
 };
 
@@ -56026,20 +56362,25 @@ exports.Menu = Menu;
 Menu.Item = AntDMenu.Item;
 Menu.ItemGroup = AntDMenu.ItemGroup;
 
-Menu.SubMenu = function SubMenu(props) {
+Menu.SubMenu = function SubMenu(_ref2) {
+  let {
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref2;
   const {
     theme
   } = useDesignSystemTheme();
   return (0, _jsxRuntime.jsx)(_react2.ClassNames, {
-    children: _ref => {
+    children: _ref3 => {
       let {
         css
-      } = _ref;
+      } = _ref3;
       return (0, _jsxRuntime.jsx)(AntDMenu.SubMenu, {
         popupClassName: css({
           zIndex: theme.options.zIndexBase + 50
         }),
-        ...props
+        ...props,
+        ...dangerouslySetAntdProps
       });
     }
   });
@@ -56070,29 +56411,33 @@ const getModalEmotionStyles = args => {
   const classNameFooter = ".".concat(clsPrefix, "-modal-footer");
   const classNameButton = ".".concat(clsPrefix, "-btn");
   const classNameDropdownTrigger = ".".concat(clsPrefix, "-dropdown-trigger");
-  const MODAL_PADDING$1 = theme.options.isCompact ? theme.spacing.lg : MODAL_PADDING;
-  const BUTTON_SIZE = theme.options.isCompact ? theme.general.heightSm : theme.general.heightBase;
+  const MODAL_PADDING = theme.spacing.lg;
+  const BUTTON_SIZE = theme.general.heightSm; // Needed for moving some of the padding from the header and footer to the content to avoid a scrollbar from appearing
+  // when the content has some interior components that reach the limits of the content div
+  // 8px is an arbitrary value, it still leaves enough padding for the header and footer too to avoid the same problem
+  // from occurring there too
+
+  const CONTENT_BUFFER = 8;
   const modalMaxHeight = '90vh';
-  const headerHeight = theme.options.isCompact ? 64 : 88;
-  const footerHeight = hasFooter ? theme.options.isCompact ? 52 : 60 : 0;
-  const contentBottomPadding = MODAL_PADDING$1;
-  const bodyMaxHeight = "calc(".concat(modalMaxHeight, " - ").concat(headerHeight, "px - ").concat(footerHeight, "px - ").concat(contentBottomPadding, "px)");
+  const headerHeight = 64;
+  const footerHeight = hasFooter ? 52 : 0;
+  const bodyMaxHeight = "calc(".concat(modalMaxHeight, " - ").concat(headerHeight, "px - ").concat(footerHeight, "px - ").concat(MODAL_PADDING, "px)");
   return (
     /*#__PURE__*/
 
     /*#__PURE__*/
     (0, _react2.css)({
       [classNameHeader]: {
-        paddingTop: theme.options.isCompact ? theme.spacing.md : MODAL_PADDING$1,
-        paddingLeft: theme.options.isCompact ? theme.spacing.lg : MODAL_PADDING$1,
-        paddingRight: theme.options.isCompact ? theme.spacing.md : MODAL_PADDING$1,
-        paddingBottom: theme.options.isCompact ? theme.spacing.md : MODAL_PADDING$1 / 2
+        paddingTop: theme.spacing.md,
+        paddingLeft: theme.spacing.lg,
+        paddingRight: theme.spacing.md,
+        paddingBottom: theme.spacing.md
       },
       [classNameFooter]: {
         height: footerHeight,
-        paddingTop: theme.options.isCompact ? theme.spacing.lg : MODAL_PADDING$1 / 2,
-        paddingLeft: MODAL_PADDING$1,
-        paddingRight: MODAL_PADDING$1,
+        paddingTop: theme.spacing.lg - CONTENT_BUFFER,
+        paddingLeft: MODAL_PADDING,
+        paddingRight: MODAL_PADDING,
         marginTop: 'auto',
         ["".concat(classNameButton, " + ").concat(classNameButton, ":not(").concat(classNameDropdownTrigger, ")")]: {
           marginLeft: theme.spacing.sm
@@ -56112,7 +56457,7 @@ const getModalEmotionStyles = args => {
         width: BUTTON_SIZE,
         // Note: Ant has the close button absolutely positioned, rather than in a flex container with the title.
         // This magic number is eyeballed to get the close X to align with the title text.
-        margin: theme.options.isCompact ? '16px 16px 0 0' : '34px 26px 0 0',
+        margin: '16px 16px 0 0',
         borderRadius: theme.borders.borderRadiusMd,
         backgroundColor: theme.colors.actionDefaultBackgroundDefault,
         borderColor: theme.colors.actionDefaultBackgroundDefault,
@@ -56138,29 +56483,26 @@ const getModalEmotionStyles = args => {
         fontSize: theme.typography.fontSizeXl,
         lineHeight: theme.typography.lineHeightXl,
         fontWeight: theme.typography.typographyBoldFontWeight,
-        paddingRight: MODAL_PADDING$1,
-        // Don't impact regular size
-        ...(theme.options.isCompact && {
-          minHeight: headerHeight / 2,
-          display: 'flex',
-          alignItems: 'center'
-        })
+        paddingRight: MODAL_PADDING,
+        minHeight: headerHeight / 2,
+        display: 'flex',
+        alignItems: 'center'
       },
       [classNameContent]: {
         maxHeight: modalMaxHeight,
         height: maxedOutHeight ? modalMaxHeight : '',
         overflow: 'hidden',
-        paddingBottom: contentBottomPadding,
+        paddingBottom: MODAL_PADDING,
         display: 'flex',
         flexDirection: 'column'
       },
       [classNameBody]: {
         overflowY: 'auto',
         maxHeight: bodyMaxHeight,
-        paddingLeft: MODAL_PADDING$1,
-        paddingRight: MODAL_PADDING$1,
-        paddingTop: theme.options.isCompact ? 0 : theme.spacing.xs,
-        paddingBottom: theme.options.isCompact ? 0 : theme.spacing.xs,
+        paddingLeft: MODAL_PADDING,
+        paddingRight: MODAL_PADDING,
+        paddingTop: CONTENT_BUFFER,
+        paddingBottom: CONTENT_BUFFER,
         ...(theme.themeName === 'default' ? {
           // 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.
@@ -56170,7 +56512,8 @@ const getModalEmotionStyles = args => {
           backgroundSize: '100% 40px, 100% 40px, 100% 14px, 100% 14px',
           backgroundAttachment: 'local, local, scroll, scroll'
         } : {})
-      }
+      },
+      ...getAnimationCss(theme.options.enableAnimation)
     }, process.env.NODE_ENV === "production" ? "" : ";label:getModalEmotionStyles;", process.env.NODE_ENV === "production" ? "" : ";label:getModalEmotionStyles;")
   );
 };
@@ -56246,7 +56589,7 @@ Modal.defaultProps = {
   verticalSizing: 'dynamic'
 };
 
-var _ref2$1 = process.env.NODE_ENV === "production" ? {
+var _ref2$2 = process.env.NODE_ENV === "production" ? {
   name: "b9hrb",
   styles: "position:relative;display:inline-flex;align-items:center"
 } : {
@@ -56264,15 +56607,6 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
 };
 
-var _ref4$1 = process.env.NODE_ENV === "production" ? {
-  name: "bjn8wh",
-  styles: "position:relative"
-} : {
-  name: "boqyz4-titleComp",
-  styles: "position:relative;label:titleComp;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$6
-};
-
 function DangerModal(props) {
   const {
     theme
@@ -56283,13 +56617,13 @@ function DangerModal(props) {
     onOk,
     cancelText,
     okText,
+    okButtonProps,
+    cancelButtonProps,
     ...restProps
   } = props;
-  const iconSize = theme.options.isCompact ? 20 : 24;
-  const iconMargin = 5; // Differentiate easily between non-compact and compact styling and not impact non-compact at all
-
-  const titleComp = theme.options.isCompact ? (0, _jsxRuntime.jsxs)("div", {
-    css: _ref2$1,
+  const iconSize = 20;
+  const titleComp = (0, _jsxRuntime.jsxs)("div", {
+    css: _ref2$2,
     children: [(0, _jsxRuntime.jsx)(ErrorBorderIcon, {
       css:
       /*#__PURE__*/
@@ -56305,51 +56639,30 @@ function DangerModal(props) {
       css: _ref3,
       children: title
     })]
-  }) : (0, _jsxRuntime.jsxs)("div", {
-    css: _ref4$1,
-    children: [(0, _jsxRuntime.jsx)(ErrorBorderIcon, {
-      css:
-      /*#__PURE__*/
-
-      /*#__PURE__*/
-      (0, _react2.css)({
-        color: theme.colors.textValidationDanger,
-        position: 'absolute',
-        top: 3,
-        // eyeballed value for alignment with text
-        left: -(iconSize + iconMargin),
-        height: iconSize,
-        width: iconSize
-      }, process.env.NODE_ENV === "production" ? "" : ";label:titleComp;", process.env.NODE_ENV === "production" ? "" : ";label:css;")
-    }), (0, _jsxRuntime.jsx)("div", {
-      children: title
-    })]
   });
   return (0, _jsxRuntime.jsx)(Modal, {
     title: titleComp,
     footer: [(0, _jsxRuntime.jsx)(Button, {
       onClick: onCancel,
+      ...cancelButtonProps,
       children: cancelText || 'Cancel'
     }, "cancel"), (0, _jsxRuntime.jsx)(Button, {
       type: "primary",
       danger: true,
       onClick: onOk,
+      ...okButtonProps,
       children: okText || 'Delete'
     }, "discard")],
     onOk: onOk,
     onCancel: onCancel,
     ...restProps
   });
-}
-
-function useDesignSystemContext() {
-  return (0, React.useContext)(DesignSystemContext);
 } // Note: AntD only exposes context to notifications via the `useNotification` hook, and we need context to apply themes
 // to AntD. As such you can currently only use notifications from within functional components.
 
 
 function useNotification() {
-  const [notificationApi, contextHolder] = antDNotification.useNotification();
+  const [notificationInstance, contextHolder] = antDNotification.useNotification();
   const {
     getPrefixedClassName,
     theme
@@ -56365,10 +56678,7 @@ function useNotification() {
       ...args,
       style: {
         zIndex: theme.options.zIndexBase + 30
-      },
-      ...(theme.options.isCompact && {
-        className: "".concat(clsPrefix, "-compact")
-      })
+      }
     };
     const iconClassName = "".concat(clsPrefix, "-notice-icon-").concat(mergedArgs.type);
     mergedArgs.icon = (0, _jsxRuntime.jsx)(SeverityIcon, {
@@ -56385,8 +56695,8 @@ function useNotification() {
         fontSize: theme.general.iconSize
       }, process.env.NODE_ENV === "production" ? "" : ";label:mergedArgs-closeIcon;", process.env.NODE_ENV === "production" ? "" : ";label:css;")
     });
-    notificationApi.open(mergedArgs);
-  }, [notificationApi, getContainer, theme, clsPrefix]);
+    notificationInstance.open(mergedArgs);
+  }, [notificationInstance, getContainer, theme, clsPrefix]);
   const wrappedNotificationAPI = (0, React.useMemo)(() => {
     const error = args => open({ ...args,
       type: 'error'
@@ -56404,8 +56714,11 @@ function useNotification() {
       type: 'success'
     });
 
+    const close = key => antDNotification.close(key);
+
     return {
       open,
+      close,
       error,
       warning,
       info,
@@ -56424,7 +56737,7 @@ 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).";
 }
 
-var _ref$2 = process.env.NODE_ENV === "production" ? {
+var _ref$1 = process.env.NODE_ENV === "production" ? {
   name: "1dw6hj0",
   styles: "padding-left:16px;padding-right:16px"
 } : {
@@ -56435,10 +56748,12 @@ var _ref$2 = process.env.NODE_ENV === "production" ? {
 
 const PageWrapper = _ref2 => {
   let {
-    children
+    children,
+    ...props
   } = _ref2;
   return (0, _jsxRuntime.jsx)("div", {
-    css: _ref$2,
+    css: _ref$1,
+    ...props,
     children: children
   });
 };
@@ -56577,14 +56892,18 @@ const Pagination = function Pagination(_ref) {
     onChange: onChange,
     showSizeChanger: false,
     showQuickJumper: true,
-    size: theme.options.isCompact ? 'small' : 'default',
+    size: 'small',
     ...dangerouslySetAntdProps
   });
 };
 
 exports.Pagination = Pagination;
 
-const Popover = props => {
+const Popover = _ref => {
+  let {
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref;
   const {
     theme
   } = useDesignSystemTheme();
@@ -56703,12 +57022,21 @@ const radioOverrideEmotionStyles = _ref => {
   );
 };
 
-const DuboisRadio = /*#__PURE__*/(0, React.forwardRef)(function Radio(props, ref) {
+const DuboisRadio = /*#__PURE__*/(0, React.forwardRef)(function Radio(_ref2, ref) {
+  let {
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref2;
   return (0, _jsxRuntime.jsx)(Radio$2, { ...props,
+    ...dangerouslySetAntdProps,
     ref: ref
   });
 });
-const StyledRadioGroup = /*#__PURE__*/(0, React.forwardRef)(function StyledRadioGroup(props, ref) {
+const StyledRadioGroup = /*#__PURE__*/(0, React.forwardRef)(function StyledRadioGroup(_ref3, ref) {
+  let {
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref3;
   const {
     theme,
     getPrefixedClassName
@@ -56719,14 +57047,15 @@ const StyledRadioGroup = /*#__PURE__*/(0, React.forwardRef)(function StyledRadio
       theme,
       clsPrefix
     }),
+    ...dangerouslySetAntdProps,
     ref: ref
   });
 });
-const VerticalGroup = /*#__PURE__*/(0, React.forwardRef)(function VerticalGroup(_ref2, ref) {
+const VerticalGroup = /*#__PURE__*/(0, React.forwardRef)(function VerticalGroup(_ref4, ref) {
   let {
     dangerouslySetAntdProps,
     ...props
-  } = _ref2;
+  } = _ref4;
   return (0, _jsxRuntime.jsx)(StyledRadioGroup, {
     css: verticalGroupEmotionStyles,
     ...props,
@@ -56734,11 +57063,11 @@ const VerticalGroup = /*#__PURE__*/(0, React.forwardRef)(function VerticalGroup(
     ...dangerouslySetAntdProps
   });
 });
-const HorizontalGroup = /*#__PURE__*/(0, React.forwardRef)(function HorizontalGroup(_ref3, ref) {
+const HorizontalGroup = /*#__PURE__*/(0, React.forwardRef)(function HorizontalGroup(_ref5, ref) {
   let {
     dangerouslySetAntdProps,
     ...props
-  } = _ref3;
+  } = _ref5;
   return (0, _jsxRuntime.jsx)(StyledRadioGroup, { ...props,
     ref: ref,
     ...dangerouslySetAntdProps
@@ -56820,6 +57149,11 @@ function getSegmentedControlButtonEmotionStyles(clsPrefix, theme) {
         backgroundColor: theme.colors.actionDefaultBorderPress
       }
     },
+    ["&".concat(classWrapperChecked, ":focus-within")]: {
+      '::before': {
+        width: 0
+      }
+    },
     ["&".concat(classWrapperDisabled)]: {
       color: theme.colors.actionDisabledText,
       backgroundColor: theme.colors.actionDisabledBackground,
@@ -56843,13 +57177,11 @@ function getSegmentedControlButtonEmotionStyles(clsPrefix, theme) {
         outlineColor: theme.colors.primary
       }
     },
-    ...(theme.options.isCompact && {
-      ["&".concat(classWrapper, ", ").concat(classButton)]: {
-        height: theme.general.heightSm,
-        lineHeight: theme.typography.lineHeightBase,
-        alignItems: 'center'
-      }
-    }),
+    ["&".concat(classWrapper, ", ").concat(classButton)]: {
+      height: theme.general.heightSm,
+      lineHeight: theme.typography.lineHeightBase,
+      alignItems: 'center'
+    },
     ...getAnimationCss(theme.options.enableAnimation)
   };
   const importantStyles = importantify(styles);
@@ -56861,7 +57193,11 @@ function getSegmentedControlButtonEmotionStyles(clsPrefix, theme) {
   );
 }
 
-const SegmentedControlButton = /*#__PURE__*/(0, React.forwardRef)(function SegmentedControlButton(props, ref) {
+const SegmentedControlButton = /*#__PURE__*/(0, React.forwardRef)(function SegmentedControlButton(_ref, ref) {
+  let {
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref;
   const {
     classNamePrefix,
     theme
@@ -56869,16 +57205,22 @@ const SegmentedControlButton = /*#__PURE__*/(0, React.forwardRef)(function Segme
   return (0, _jsxRuntime.jsx)(Radio$2.Button, {
     css: getSegmentedControlButtonEmotionStyles(classNamePrefix, theme),
     ...props,
+    ...dangerouslySetAntdProps,
     ref: ref
   });
 });
 exports.SegmentedControlButton = SegmentedControlButton;
-const SegmentedControlGroup = /*#__PURE__*/(0, React.forwardRef)(function SegmentedControlGroup(props, ref) {
+const SegmentedControlGroup = /*#__PURE__*/(0, React.forwardRef)(function SegmentedControlGroup(_ref2, ref) {
+  let {
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref2;
   const {
     classNamePrefix
   } = useDesignSystemTheme();
   return (0, _jsxRuntime.jsx)(Radio$2.Group, { ...props,
     css: getSegmentedControlGroupEmotionStyles(classNamePrefix),
+    ...dangerouslySetAntdProps,
     ref: ref
   });
 });
@@ -56900,7 +57242,8 @@ function getSelectEmotionStyles(_ref) {
   const classDisabled = ".".concat(clsPrefix, "-disabled");
   const classMultiple = ".".concat(clsPrefix, "-multiple");
   const classItem = ".".concat(clsPrefix, "-selection-item");
-  const classItemOverflow = ".".concat(clsPrefix, "-selection-overflow-item");
+  const classItemOverflowContainer = ".".concat(clsPrefix, "-selection-overflow");
+  const classItemOverflowItem = ".".concat(clsPrefix, "-selection-overflow-item");
   const classItemOverflowSuffix = ".".concat(clsPrefix, "-selection-overflow-item-suffix");
   const classArrow = ".".concat(clsPrefix, "-arrow");
   const classArrowLoading = ".".concat(clsPrefix, "-arrow-loading");
@@ -56924,7 +57267,7 @@ function getSelectEmotionStyles(_ref) {
       paddingRight: 0,
       color: theme.colors.textPrimary,
       backgroundColor: 'transparent',
-      height: theme.options.isCompact ? theme.general.heightSm : theme.general.heightBase,
+      height: theme.general.heightSm,
       '::after': {
         lineHeight: theme.typography.lineHeightBase
       },
@@ -56934,15 +57277,15 @@ function getSelectEmotionStyles(_ref) {
     },
     [classSingle]: {
       ["&".concat(classSelector)]: {
-        height: theme.options.isCompact ? theme.general.heightSm : theme.general.heightBase
+        height: theme.general.heightSm
       }
     },
     [classItem]: {
       color: theme.colors.textPrimary,
       paddingRight: 32,
       lineHeight: theme.typography.lineHeightBase,
-      paddingTop: theme.options.isCompact ? 5 : 10,
-      paddingBottom: theme.options.isCompact ? 5 : 10
+      paddingTop: 5,
+      paddingBottom: 5
     },
     // Note: This supports search, which we don't support. The styles here support legacy usages.
     [classSearch]: {
@@ -56955,7 +57298,7 @@ function getSelectEmotionStyles(_ref) {
     },
     ["&".concat(classSingle)]: {
       [classSearchInput]: {
-        height: theme.options.isCompact ? theme.general.heightSm : theme.general.heightBase
+        height: theme.general.heightSm
       }
     },
     // Note: This supports search, which we don't support. The styles here support legacy usages.
@@ -56993,7 +57336,7 @@ function getSelectEmotionStyles(_ref) {
     [classArrow]: {
       height: theme.general.iconSize,
       width: theme.general.iconSize,
-      top: theme.options.isCompact ? 4 : 8,
+      top: 4,
       marginTop: 0,
       color: theme.colors.textSecondary,
       '.anticon': {
@@ -57002,7 +57345,7 @@ function getSelectEmotionStyles(_ref) {
         pointerEvents: 'none'
       },
       ["&".concat(classArrowLoading)]: {
-        top: theme.options.isCompact ? 4 : 8,
+        top: 4,
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
@@ -57023,7 +57366,7 @@ function getSelectEmotionStyles(_ref) {
         paddingBottom: 3,
         paddingLeft: 8,
         paddingRight: 30,
-        minHeight: theme.options.isCompact ? theme.general.heightSm : theme.general.heightBase,
+        minHeight: theme.general.heightSm,
         height: 'auto',
         '&::after': {
           margin: 0
@@ -57044,7 +57387,10 @@ function getSelectEmotionStyles(_ref) {
         paddingTop: 0,
         paddingBottom: 0
       },
-      [classItemOverflow]: {
+      [classItemOverflowContainer]: {
+        minHeight: 24
+      },
+      [classItemOverflowItem]: {
         alignSelf: 'auto',
         height: 24,
         lineHeight: theme.typography.lineHeightBase
@@ -57060,11 +57406,11 @@ function getSelectEmotionStyles(_ref) {
         }
       },
       [classArrow]: {
-        top: theme.options.isCompact ? 5 : 8
+        top: 5
       },
       ["&".concat(classAllowClear)]: {
         [classSearchClear]: {
-          top: theme.options.isCompact ? 16 : 20
+          top: 16
         }
       },
       [classPlaceholder]: {
@@ -57093,7 +57439,7 @@ function getSelectEmotionStyles(_ref) {
         paddingRight: 52
       },
       [classSearchClear]: {
-        top: theme.options.isCompact ? 16 : 20,
+        top: 16,
         opacity: 100
       }
     },
@@ -57288,22 +57634,33 @@ function DuboisSelect(_ref2, ref) {
   });
 }
 
-const Option = /*#__PURE__*/(0, React.forwardRef)(function Option(props, ref) {
+const Option = /*#__PURE__*/(0, React.forwardRef)(function Option(_ref5, ref) {
+  let {
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref5;
   return (0, _jsxRuntime.jsx)(AntDSelect.Option, { ...props,
-    ref: ref
+    ref: ref,
+    ...dangerouslySetAntdProps
   });
 });
 exports.Option = Option;
 const SelectNamespace = Object.assign(DuboisRefForwardedSelect, {
-  Option
+  Option,
+  OptGroup: AntDSelect.OptGroup
 });
 const Select = SelectNamespace;
 exports.Select = Select;
 const __INTERNAL_DO_NOT_USE__Option = Option;
 exports.__INTERNAL_DO_NOT_USE__Option = __INTERNAL_DO_NOT_USE__Option;
 
-const Skeleton = props => {
-  return (0, _jsxRuntime.jsx)(Skeleton$2, { ...props
+const Skeleton = _ref => {
+  let {
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref;
+  return (0, _jsxRuntime.jsx)(Skeleton$2, { ...props,
+    ...dangerouslySetAntdProps
   });
 };
 
@@ -57314,7 +57671,8 @@ Skeleton.Input = Skeleton$2.Input;
 
 const Spacer = _ref => {
   let {
-    size = 'medium'
+    size = 'medium',
+    ...props
   } = _ref;
   const {
     theme
@@ -57332,7 +57690,8 @@ const Spacer = _ref => {
     /*#__PURE__*/
     (0, _react2.css)({
       height: spacingValues[size]
-    }, process.env.NODE_ENV === "production" ? "" : ";label:Spacer;", process.env.NODE_ENV === "production" ? "" : ";label:css;")
+    }, process.env.NODE_ENV === "production" ? "" : ";label:Spacer;", process.env.NODE_ENV === "production" ? "" : ";label:css;"),
+    ...props
   });
 };
 
@@ -57368,6 +57727,8 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__$2() {
   return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
 
+const BUTTON_HORIZONTAL_PADDING = 12;
+
 function getSplitButtonEmotionStyles(classNamePrefix, theme) {
   const classDefault = ".".concat(classNamePrefix, "-btn");
   const classPrimary = ".".concat(classNamePrefix, "-btn-primary");
@@ -57376,8 +57737,8 @@ function getSplitButtonEmotionStyles(classNamePrefix, theme) {
   const styles = {
     [classDefault]: { ...getDefaultStyles(theme),
       boxShadow: 'none',
-      height: theme.options.isCompact ? theme.general.heightSm : theme.general.heightBase,
-      padding: theme.options.isCompact ? '4px 12px' : '8px 16px',
+      height: theme.general.heightSm,
+      padding: "4px ".concat(BUTTON_HORIZONTAL_PADDING, "px"),
       '&:focus-visible': {
         outlineStyle: 'solid',
         outlineWidth: '2px',
@@ -57402,9 +57763,9 @@ function getSplitButtonEmotionStyles(classNamePrefix, theme) {
     },
     [classDropdownTrigger]: {
       // Needs to be 1px less than our standard 8px to allow for the off-by-one border handling in this component.
-      padding: theme.options.isCompact ? 3 : 7,
+      padding: 3,
       borderLeftColor: 'transparent',
-      width: theme.options.isCompact ? theme.general.heightSm : theme.general.heightBase
+      width: theme.general.heightSm
     },
     ["&".concat(classSmall)]: {
       [classDropdownTrigger]: {
@@ -57431,7 +57792,7 @@ function getSplitButtonEmotionStyles(classNamePrefix, theme) {
   );
 }
 
-var _ref$1 = process.env.NODE_ENV === "production" ? {
+var _ref = process.env.NODE_ENV === "production" ? {
   name: "jjj6u2",
   styles: "display:inline-flex;position:relative"
 } : {
@@ -57451,10 +57812,14 @@ const SplitButton = props => {
     menu,
     type,
     loading,
+    loadingButtonStyles,
+    placement,
     dangerouslySetAntdProps,
     ...dropdownButtonProps
-  } = props;
-  const [width, setWidth] = (0, React.useState)(0); // Set the width to the button's width in regular state to later use when in loading state
+  } = props; // Size of button when loading only icon is shown
+
+  const LOADING_BUTTON_SIZE = theme.general.iconFontSize + 2 * BUTTON_HORIZONTAL_PADDING + 2 * theme.general.borderWidth;
+  const [width, setWidth] = (0, React.useState)(LOADING_BUTTON_SIZE); // Set the width to the button's width in regular state to later use when in loading state
   // We do this to have just a loading icon in loading state at the normal width to avoid flicker and width changes in page
 
   const ref = (0, React.useCallback)(node => {
@@ -57464,11 +57829,12 @@ const SplitButton = props => {
   }, [loading]);
   return (0, _jsxRuntime.jsx)("div", {
     ref: ref,
-    css: _ref$1,
+    css: _ref,
     children: loading ? (0, _jsxRuntime.jsx)(Button, {
       type: type === 'default' ? undefined : type,
       style: {
-        width: width
+        width: width,
+        ...loadingButtonStyles
       },
       children: (0, _jsxRuntime.jsx)(LoadingIcon, {
         spin: true
@@ -57486,7 +57852,7 @@ const SplitButton = props => {
           fontSize: theme.general.iconSize
         }, process.env.NODE_ENV === "production" ? "" : ";label:SplitButton;", process.env.NODE_ENV === "production" ? "" : ";label:css;")
       }),
-      placement: "bottomCenter",
+      placement: placement || 'bottomRight',
       type: type === 'default' ? undefined : type,
       ...dangerouslySetAntdProps,
       children: [icon, children]
@@ -57607,18 +57973,20 @@ const getTabEmotionStyles = (clsPrefix, theme) => {
   const classUnderline = ".".concat(clsPrefix, "-tabs-ink-bar");
   const classClosable = ".".concat(clsPrefix, "-tabs-tab-with-remove");
   const classNav = ".".concat(clsPrefix, "-tabs-nav");
-  const classNavWrap = ".".concat(clsPrefix, "-tabs-nav-wrap");
   const classCloseButton = ".".concat(clsPrefix, "-tabs-tab-remove");
   const classAddButton = ".".concat(clsPrefix, "-tabs-nav-add");
   const styles = {
+    '&&': {
+      overflow: 'unset'
+    },
     [classTab]: {
       borderBottom: 'none',
       backgroundColor: 'transparent',
       border: 'none',
       paddingLeft: 0,
       paddingRight: 0,
-      paddingTop: theme.options.isCompact ? 6 : 10,
-      paddingBottom: theme.options.isCompact ? 6 : 10,
+      paddingTop: 6,
+      paddingBottom: 6,
       marginRight: 24
     },
     [classButton]: {
@@ -57670,21 +58038,18 @@ const getTabEmotionStyles = (clsPrefix, theme) => {
       background: 'none',
       paddingTop: 0,
       paddingBottom: 0,
-      height: theme.options.isCompact ? theme.general.heightSm : theme.general.heightBase
-    },
-    [classNavWrap]: {
-      overflow: 'visible'
+      height: theme.general.heightSm
     },
     [classNav]: {
-      height: theme.options.isCompact ? theme.general.heightSm : theme.general.heightBase,
+      height: theme.general.heightSm,
       '&::before': {
         borderColor: theme.colors.borderDecorative
       }
     },
     [classCloseButton]: {
-      height: theme.options.isCompact ? 24 : 32,
-      width: theme.options.isCompact ? 24 : 32,
-      padding: theme.options.isCompact ? 6 : theme.spacing.sm,
+      height: 24,
+      width: 24,
+      padding: 6,
       borderRadius: theme.borders.borderRadiusMd,
       marginTop: 0,
       marginRight: 0,
@@ -57710,9 +58075,9 @@ const getTabEmotionStyles = (clsPrefix, theme) => {
       border: 'none',
       borderRadius: theme.borders.borderRadiusMd,
       margin: 4,
-      height: theme.options.isCompact ? 24 : 32,
-      width: theme.options.isCompact ? 24 : 32,
-      padding: theme.options.isCompact ? 0 : '0 4px',
+      height: 24,
+      width: 24,
+      padding: 0,
       minWidth: 'auto',
       '&:hover': {
         backgroundColor: theme.colors.actionDefaultBackgroundHover,
@@ -57746,7 +58111,8 @@ const Tabs = _ref => {
     children,
     destroyInactiveTabPane = false,
     dangerouslySetAntdProps = {},
-    dangerouslyAppendEmotionCSS = {}
+    dangerouslyAppendEmotionCSS = {},
+    ...props
   } = _ref;
   const {
     theme,
@@ -57770,6 +58136,7 @@ const Tabs = _ref => {
     }),
     css: [getTabEmotionStyles(classNamePrefix, theme), importantify(dangerouslyAppendEmotionCSS), process.env.NODE_ENV === "production" ? "" : ";label:Tabs;"],
     ...dangerouslySetAntdProps,
+    ...props,
     children: children
   });
 };
@@ -57945,7 +58312,8 @@ const Tooltip = _ref => {
     title,
     placement = 'top',
     dataTestId,
-    dangerouslySetAntdProps
+    dangerouslySetAntdProps,
+    ...props
   } = _ref;
   const {
     theme
@@ -57957,7 +58325,8 @@ const Tooltip = _ref => {
     });
   }
 
-  return (0, _jsxRuntime.jsx)(AntDTooltip, {
+  return (0, _jsxRuntime.jsx)(AntDTooltip // eslint-disable-next-line react/forbid-dom-props -- FEINF-1337 - this should turn into data-testid
+  , {
     title: (0, _jsxRuntime.jsx)("span", {
       "data-test-id": dataTestId,
       children: title
@@ -57973,7 +58342,9 @@ const Tooltip = _ref => {
     overlayStyle: {
       zIndex: theme.options.zIndexBase + 70
     },
+    css: getAnimationCss(theme.options.enableAnimation),
     ...dangerouslySetAntdProps,
+    ...props,
     children: children
   });
 };
@@ -58050,7 +58421,8 @@ function getTreeCheckboxEmotionStyles(clsPrefix, theme) {
     // Indeterminate and mouse pressed
     ["".concat(classIndeterminate, ":active > ").concat(classInner)]: {
       backgroundColor: theme.colors.actionPrimaryBackgroundPress
-    }
+    },
+    ...getAnimationCss(theme.options.enableAnimation)
   };
   return styles;
 }
@@ -58191,7 +58563,7 @@ function getTreeEmotionStyles(clsPrefix, theme) {
   );
 }
 
-var _ref2 = process.env.NODE_ENV === "production" ? {
+var _ref2$1 = process.env.NODE_ENV === "production" ? {
   name: "1o12nta",
   styles: "font-size:24px!important"
 } : {
@@ -58208,7 +58580,8 @@ function Tree(_ref) {
     defaultCheckedKeys,
     disabled = false,
     mode = 'default',
-    dangerouslySetAntdProps
+    dangerouslySetAntdProps,
+    ...props
   } = _ref;
   const {
     theme,
@@ -58222,13 +58595,14 @@ function Tree(_ref) {
     disabled: disabled,
     css: getTreeEmotionStyles(classNamePrefix, theme),
     switcherIcon: (0, _jsxRuntime.jsx)(ChevronDownIcon, {
-      css: _ref2
+      css: _ref2$1
     }),
     tabIndex: 0,
     selectable: mode === 'selectable' || mode === 'multiselectable',
     checkable: mode === 'checkable',
     multiple: mode === 'multiselectable',
-    ...dangerouslySetAntdProps
+    ...dangerouslySetAntdProps,
+    ...props
   });
 }
 
@@ -58236,7 +58610,7 @@ 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).";
 }
 
-var _ref = process.env.NODE_ENV === "production" ? {
+var _ref2 = process.env.NODE_ENV === "production" ? {
   name: "mgrjgu",
   styles: "margin-left:2px"
 } : {
@@ -58245,7 +58619,11 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-function Link(props) {
+function Link(_ref) {
+  let {
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref;
   const {
     children,
     openInNewTab,
@@ -58254,8 +58632,9 @@ function Link(props) {
   const openInNewTabProps = getOpenInNewTabProps(openInNewTab);
   return (0, _jsxRuntime.jsxs)(AntDTypography.Link, { ...restProps,
     ...openInNewTabProps,
+    ...dangerouslySetAntdProps,
     children: [children, openInNewTab ? (0, _jsxRuntime.jsx)(NewWindowIcon, {
-      css: _ref
+      css: _ref2
     }) : null]
   });
 }
@@ -58417,8 +58796,13 @@ function Text(userProps) {
   });
 }
 
-function Typography(props) {
-  return (0, _jsxRuntime.jsx)(AntDTypography, { ...props
+function Typography(_ref) {
+  let {
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref;
+  return (0, _jsxRuntime.jsx)(AntDTypography, { ...props,
+    ...dangerouslySetAntdProps
   });
 }