@databricks/design-system 1.3.0 → 1.4.1

package/dist/index.js

@@ -16703,7 +16703,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();
@@ -49394,9 +49394,565 @@ Typography$1.Title = Title$2;
 Typography$1.Paragraph = Paragraph$2;
 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: chroma(colorPalettePrimary.red600).alpha(0).hex(),
+  actionDangerDefaultBackgroundHover: chroma(colorPalettePrimary.red600).alpha(0.08).hex(),
+  actionDangerDefaultBackgroundPress: chroma(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: chroma(colorPalettePrimary.blue800).alpha(0).hex(),
+  actionDefaultBackgroundHover: chroma(colorPalettePrimary.blue600).alpha(0.08).hex(),
+  actionDefaultBackgroundPress: chroma(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: chroma(colorPalettePrimary.blue600).alpha(0).hex(),
+  actionTertiaryBackgroundHover: chroma(colorPalettePrimary.blue600).alpha(0.08).hex(),
+  actionTertiaryBackgroundPress: chroma(colorPalettePrimary.blue600).alpha(0.16).hex(),
+  actionTertiaryTextDefault: colorPalettePrimary.blue600,
+  actionTertiaryTextHover: colorPalettePrimary.blue700,
+  actionTertiaryTextPress: colorPalettePrimary.blue800,
+  backgroundDanger: chroma(colorPalettePrimary.red100).alpha(0.08).hex(),
+  backgroundSecondary: colorPalettePrimary.grey100,
+  backgroundWarning: chroma(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: chroma(colorPalettePrimary.grey100).alpha(0.72).hex(),
+  // Tags
+  tagDefault: chroma(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: chroma(colorPalettePrimary.blue400).alpha(0.08).hex(),
+  tagPress: chroma(colorPalettePrimary.blue400).alpha(0.16).hex(),
+  tagIconHover: chroma(colorPalettePrimary.white).alpha(0.8).hex(),
+  tagIconPress: chroma(colorPalettePrimary.white).alpha(0.76).hex(),
+  // Typography
+  typographyCodeBg: chroma(colorPalettePrimary.grey600).alpha(0.08).hex(),
+  tooltipBackgroundTooltip: colorPalettePrimary.grey800,
+  ...unstableColors
+};
+const darkColorList = {
+  actionDangerPrimaryBackgroundDefault: chroma(colorPalettePrimary.red400).alpha(0.84).hex(),
+  actionDangerPrimaryBackgroundHover: chroma(colorPalettePrimary.red400).alpha(0.72).hex(),
+  actionDangerPrimaryBackgroundPress: chroma(colorPalettePrimary.red400).alpha(0.6).hex(),
+  actionDangerDefaultBackgroundDefault: chroma(colorPalettePrimary.red400).alpha(0).hex(),
+  actionDangerDefaultBackgroundHover: chroma(colorPalettePrimary.red400).alpha(0.08).hex(),
+  actionDangerDefaultBackgroundPress: chroma(colorPalettePrimary.red400).alpha(0.16).hex(),
+  actionDangerDefaultBorderDefault: colorPalettePrimary.red400,
+  actionDangerDefaultBorderHover: chroma(colorPalettePrimary.red400).alpha(0.72).hex(),
+  actionDangerDefaultBorderPress: chroma(colorPalettePrimary.red400).alpha(0.6).hex(),
+  actionDangerDefaultTextDefault: colorPalettePrimary.red400,
+  actionDangerDefaultTextHover: chroma(colorPalettePrimary.red400).alpha(0.72).hex(),
+  actionDangerDefaultTextPress: chroma(colorPalettePrimary.red400).alpha(0.6).hex(),
+  actionDefaultBackgroundDefault: chroma(colorPalettePrimary.blue400).alpha(0).hex(),
+  actionDefaultBackgroundHover: chroma(colorPalettePrimary.blue400).alpha(0.08).hex(),
+  actionDefaultBackgroundPress: chroma(colorPalettePrimary.blue400).alpha(0.16).hex(),
+  actionDefaultBorderDefault: chroma(colorPalettePrimary.white).alpha(0.6).hex(),
+  actionDefaultBorderFocus: chroma(colorPalettePrimary.blue400).alpha(0.84).hex(),
+  actionDefaultBorderHover: chroma(colorPalettePrimary.blue400).alpha(0.8).hex(),
+  actionDefaultBorderPress: chroma(colorPalettePrimary.blue400).alpha(0.76).hex(),
+  actionDefaultTextDefault: chroma(colorPalettePrimary.white).alpha(0.84).hex(),
+  actionDefaultTextHover: chroma(colorPalettePrimary.blue400).alpha(0.8).hex(),
+  actionDefaultTextPress: chroma(colorPalettePrimary.blue400).alpha(0.76).hex(),
+  actionDisabledBackground: chroma(colorPalettePrimary.white).alpha(0.24).hex(),
+  actionDisabledText: chroma(colorPalettePrimary.white).alpha(0.4).hex(),
+  actionPrimaryBackgroundDefault: chroma(colorPalettePrimary.blue400).alpha(0.84).hex(),
+  actionPrimaryBackgroundHover: chroma(colorPalettePrimary.blue400).alpha(0.8).hex(),
+  actionPrimaryBackgroundPress: chroma(colorPalettePrimary.blue400).alpha(0.76).hex(),
+  actionPrimaryTextDefault: colorPalettePrimary.grey800,
+  actionPrimaryTextHover: colorPalettePrimary.grey800,
+  actionPrimaryTextPress: colorPalettePrimary.grey800,
+  actionTertiaryBackgroundDefault: chroma(colorPalettePrimary.blue400).alpha(0).hex(),
+  actionTertiaryBackgroundHover: chroma(colorPalettePrimary.blue400).alpha(0.08).hex(),
+  actionTertiaryBackgroundPress: chroma(colorPalettePrimary.blue400).alpha(0.16).hex(),
+  actionTertiaryTextDefault: chroma(colorPalettePrimary.blue400).alpha(0.84).hex(),
+  actionTertiaryTextHover: chroma(colorPalettePrimary.blue400).alpha(0.8).hex(),
+  actionTertiaryTextPress: chroma(colorPalettePrimary.blue400).alpha(0.76).hex(),
+  backgroundPrimary: colorPalettePrimary.grey800,
+  backgroundSecondary: chroma(colorPalettePrimary.white).alpha(0.04).hex(),
+  border: chroma(colorPalettePrimary.white).alpha(0.48).hex(),
+  borderDecorative: chroma(colorPalettePrimary.white).alpha(0.24).hex(),
+  textPrimary: chroma(colorPalettePrimary.white).alpha(0.84).hex(),
+  textSecondary: chroma(colorPalettePrimary.white).alpha(0.6).hex(),
+  textPlaceholder: chroma(colorPalettePrimary.grey400).alpha(0.84).hex(),
+  textValidationDanger: chroma(colorPalettePrimary.red400).alpha(0.84).hex(),
+  textValidationSuccess: chroma(colorPalettePrimary.green400).alpha(0.84).hex(),
+  textValidationWarning: chroma(colorPalettePrimary.yellow400).alpha(0.84).hex(),
+  overlayOverlay: chroma(colorPalettePrimary.grey800).alpha(0.72).hex(),
+  // Tags
+  tagDefault: chroma(colorPalettePrimary.white).alpha(0.16).hex(),
+  tagBrown: chroma(colorPaletteSecondary.brown).alpha(0.84).hex(),
+  tagCoral: chroma(colorPaletteSecondary.coral).alpha(0.84).hex(),
+  tagCharcoal: chroma(colorPalettePrimary.grey600).alpha(0.84).hex(),
+  tagIndigo: chroma(colorPaletteSecondary.indigo).alpha(0.84).hex(),
+  tagLemon: chroma(colorPaletteSecondary.lemon).alpha(0.84).hex(),
+  tagLime: chroma(colorPaletteSecondary.lime).alpha(0.84).hex(),
+  tagPink: chroma(colorPaletteSecondary.pink).alpha(0.84).hex(),
+  tagPurple: chroma(colorPaletteSecondary.purple).alpha(0.84).hex(),
+  tagTeal: chroma(colorPaletteSecondary.teal).alpha(0.84).hex(),
+  tagTurquoise: chroma(colorPaletteSecondary.turquoise).alpha(0.84).hex(),
+  tagText: chroma(colorPalettePrimary.white).alpha(0.84).hex(),
+  tagHover: chroma(colorPalettePrimary.blue400).alpha(0.08).hex(),
+  tagPress: chroma(colorPalettePrimary.blue400).alpha(0.16).hex(),
+  tagIconHover: chroma(colorPalettePrimary.white).alpha(0.8).hex(),
+  tagIconPress: chroma(colorPalettePrimary.white).alpha(0.76).hex(),
+  // Typography
+  typographyCodeBg: chroma(colorPalettePrimary.white).alpha(0.16).hex(),
+  tooltipBackgroundTooltip: chroma(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 = 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 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__*/createContext(DuboisContextDefaults);
+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 = useMemo$1(() => getTheme(themeName || 'default', {
+    enableAnimation,
+    zIndexBase
+  }), // TODO: revisit this
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [themeName, zIndexBase]);
+  const providerPropsContext = useMemo$1(() => ({
+    theme: themeName,
+    enableAnimation,
+    zIndexBase,
+    getPopupContainer,
+    flags
+  }), [themeName, enableAnimation, zIndexBase, getPopupContainer, flags]);
+  const classNamePrefix = getClassNamePrefix(theme);
+  const value = useMemo$1(() => {
+    return {
+      enableAnimation,
+      theme: theme.themeName,
+      getPrefixCls: suffix => getPrefixedClassNameFromTheme(theme, suffix),
+      getPopupContainer,
+      flags
+    };
+  }, [enableAnimation, theme, getPopupContainer, flags]);
+  useEffect(() => {
+    return () => {
+      // when the design system context is unmounted, make sure the notification cache is also cleaned up
+      antDNotification.destroy();
+    };
+  }, []);
+  return jsx(DesignSystemProviderPropsContext.Provider, {
+    value: providerPropsContext,
+    children: jsx(ThemeProvider, {
+      theme: theme,
+      children: jsx(ConfigProvider$1, {
+        prefixCls: classNamePrefix,
+        getPopupContainer: getPopupContainer,
+        children: jsx(DesignSystemContext.Provider, {
+          value: value,
+          children: children
+        })
+      })
+    })
+  });
+};
+const ApplyDesignSystemFlags = _ref2 => {
+  let {
+    flags,
+    children
+  } = _ref2;
+  const parentDesignSystemProviderProps = useContext(DesignSystemProviderPropsContext);
+
+  if (parentDesignSystemProviderProps === null) {
+    throw new Error("ApplyDesignSystemFlags cannot be used standalone - DesignSystemProvider must exist in the React context");
+  }
+
+  const newProps = useMemo$1(() => ({ ...parentDesignSystemProviderProps,
+    flags: { ...parentDesignSystemProviderProps.flags,
+      ...flags
+    }
+  }), [parentDesignSystemProviderProps, flags]);
+  return jsx(DesignSystemProvider, { ...newProps,
+    children: children
+  });
+};
+
+function useDesignSystemContext() {
+  return 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 = useRef(styleFactory);
+  return useMemo$1(() => styleFactoryRef.current(theme), [theme]);
+};
+
 const Icon = props => {
   const {
     component: Component,
+    dangerouslySetAntdProps,
     ...otherProps
   } = props;
   const MemoizedComponent = useMemo$1(() => Component ? _ref => {
@@ -49415,7 +49971,8 @@ const Icon = props => {
   return jsx(AntDIcon, {
     style: {},
     component: MemoizedComponent,
-    ...otherProps
+    ...otherProps,
+    ...dangerouslySetAntdProps
   });
 };
 
@@ -51341,6 +51898,29 @@ function IndentIncreaseIcon(props) {
   });
 }
 
+function SvgInfinityIcon(props) {
+  return jsx("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: jsx("path", {
+      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 jsx(Icon, { ...props,
+    component: SvgInfinityIcon
+  });
+}
+
 function SvgInfoBorderIcon(props) {
   return jsx("svg", {
     width: "1em",
@@ -53180,6 +53760,80 @@ function VideosIcon(props) {
   });
 }
 
+function SvgVisible(props) {
+  return jsxs("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [jsxs("g", {
+      clipPath: "url(#Visible_svg__clip0_12466_34543)",
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      fill: "currentColor",
+      children: [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"
+      }), 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"
+      })]
+    }), jsx("defs", {
+      children: jsx("clipPath", {
+        id: "Visible_svg__clip0_12466_34543",
+        children: jsx("path", {
+          fill: "#fff",
+          d: "M0 0h16v16H0z"
+        })
+      })
+    })]
+  });
+}
+
+function Visible(props) {
+  return jsx(Icon, { ...props,
+    component: SvgVisible
+  });
+}
+
+function SvgVisibleOff(props) {
+  return jsxs("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [jsxs("g", {
+      clipPath: "url(#VisibleOff_svg__clip0_12466_34549)",
+      fill: "currentColor",
+      children: [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"
+      }), 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"
+      }), jsx("path", {
+        d: "M11 8c0 .14-.01.277-.028.411L7.59 5.028A3 3 0 0111 8z"
+      })]
+    }), jsx("defs", {
+      children: jsx("clipPath", {
+        id: "VisibleOff_svg__clip0_12466_34549",
+        children: jsx("path", {
+          fill: "#fff",
+          d: "M0 0h16v16H0z"
+        })
+      })
+    })]
+  });
+}
+
+function VisibleOff(props) {
+  return jsx(Icon, { ...props,
+    component: SvgVisibleOff
+  });
+}
+
 function SvgWarningBorderIcon(props) {
   return jsx("svg", {
     width: "1em",
@@ -53332,509 +53986,6 @@ function SeverityIcon(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: chroma(colorPalettePrimary.blue800).alpha(0).hex(),
-  actionDefaultBackgroundHover: chroma(colorPalettePrimary.blue800).alpha(0.08).hex(),
-  actionDefaultBackgroundPress: chroma(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: chroma(colorPalettePrimary.blue600).alpha(0).hex(),
-  actionTertiaryBackgroundHover: chroma(colorPalettePrimary.blue600).alpha(0.08).hex(),
-  actionTertiaryBackgroundPress: chroma(colorPalettePrimary.blue600).alpha(0.16).hex(),
-  actionTertiaryTextDefault: colorPalettePrimary.blue600,
-  actionTertiaryTextHover: colorPalettePrimary.blue700,
-  actionTertiaryTextPress: colorPalettePrimary.blue800,
-  backgroundDanger: chroma(colorPalettePrimary.red100).alpha(0.08).hex(),
-  backgroundSecondary: colorPalettePrimary.grey100,
-  backgroundWarning: chroma(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: chroma(colorPalettePrimary.grey100).alpha(0.72).hex(),
-  // Tags
-  tagDefault: chroma(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: chroma(colorPalettePrimary.blue400).alpha(0.08).hex(),
-  tagPress: chroma(colorPalettePrimary.blue400).alpha(0.16).hex(),
-  tagIconHover: chroma(colorPalettePrimary.white).alpha(0.8).hex(),
-  tagIconPress: chroma(colorPalettePrimary.white).alpha(0.76).hex(),
-  // Typography
-  typographyCodeBg: chroma(colorPalettePrimary.grey600).alpha(0.08).hex(),
-  tooltipBackgroundTooltip: colorPalettePrimary.grey800,
-  ...unstableColors
-};
-const darkColorList = {
-  actionDangerBackgroundDefault: chroma(colorPalettePrimary.red400).alpha(0.84).hex(),
-  actionDangerBackgroundHover: chroma(colorPalettePrimary.red400).alpha(0.7).hex(),
-  actionDangerBackgroundPress: chroma(colorPalettePrimary.red400).alpha(0.6).hex(),
-  actionDefaultBackgroundDefault: chroma(colorPalettePrimary.blue400).alpha(0).hex(),
-  actionDefaultBackgroundHover: chroma(colorPalettePrimary.blue400).alpha(0.08).hex(),
-  actionDefaultBackgroundPress: chroma(colorPalettePrimary.blue400).alpha(0.16).hex(),
-  actionDefaultBorderDefault: chroma(colorPalettePrimary.white).alpha(0.6).hex(),
-  actionDefaultBorderFocus: chroma(colorPalettePrimary.blue400).alpha(0.84).hex(),
-  actionDefaultBorderHover: chroma(colorPalettePrimary.blue400).alpha(0.8).hex(),
-  actionDefaultBorderPress: chroma(colorPalettePrimary.blue400).alpha(0.76).hex(),
-  actionDefaultTextDefault: chroma(colorPalettePrimary.white).alpha(0.84).hex(),
-  actionDefaultTextHover: chroma(colorPalettePrimary.blue400).alpha(0.8).hex(),
-  actionDefaultTextPress: chroma(colorPalettePrimary.blue400).alpha(0.76).hex(),
-  actionDisabledBackground: chroma(colorPalettePrimary.white).alpha(0.24).hex(),
-  actionDisabledText: chroma(colorPalettePrimary.white).alpha(0.4).hex(),
-  actionPrimaryBackgroundDefault: chroma(colorPalettePrimary.blue400).alpha(0.84).hex(),
-  actionPrimaryBackgroundHover: chroma(colorPalettePrimary.blue400).alpha(0.8).hex(),
-  actionPrimaryBackgroundPress: chroma(colorPalettePrimary.blue400).alpha(0.76).hex(),
-  actionPrimaryTextDefault: colorPalettePrimary.grey800,
-  actionPrimaryTextHover: colorPalettePrimary.grey800,
-  actionPrimaryTextPress: colorPalettePrimary.grey800,
-  actionTertiaryBackgroundDefault: chroma(colorPalettePrimary.blue400).alpha(0).hex(),
-  actionTertiaryBackgroundHover: chroma(colorPalettePrimary.blue400).alpha(0.08).hex(),
-  actionTertiaryBackgroundPress: chroma(colorPalettePrimary.blue400).alpha(0.16).hex(),
-  actionTertiaryTextDefault: chroma(colorPalettePrimary.blue400).alpha(0.84).hex(),
-  actionTertiaryTextHover: chroma(colorPalettePrimary.blue400).alpha(0.8).hex(),
-  actionTertiaryTextPress: chroma(colorPalettePrimary.blue400).alpha(0.76).hex(),
-  backgroundPrimary: colorPalettePrimary.grey800,
-  backgroundSecondary: chroma(colorPalettePrimary.white).alpha(0.04).hex(),
-  border: chroma(colorPalettePrimary.white).alpha(0.48).hex(),
-  borderDecorative: chroma(colorPalettePrimary.white).alpha(0.24).hex(),
-  textPrimary: chroma(colorPalettePrimary.white).alpha(0.84).hex(),
-  textSecondary: chroma(colorPalettePrimary.white).alpha(0.6).hex(),
-  textPlaceholder: chroma(colorPalettePrimary.grey400).alpha(0.84).hex(),
-  textValidationDanger: chroma(colorPalettePrimary.red400).alpha(0.84).hex(),
-  textValidationSuccess: chroma(colorPalettePrimary.green400).alpha(0.84).hex(),
-  textValidationWarning: chroma(colorPalettePrimary.yellow400).alpha(0.84).hex(),
-  overlayOverlay: chroma(colorPalettePrimary.grey800).alpha(0.72).hex(),
-  // Tags
-  tagDefault: chroma(colorPalettePrimary.white).alpha(0.16).hex(),
-  tagBrown: chroma(colorPaletteSecondary.brown).alpha(0.84).hex(),
-  tagCoral: chroma(colorPaletteSecondary.coral).alpha(0.84).hex(),
-  tagCharcoal: chroma(colorPalettePrimary.grey600).alpha(0.84).hex(),
-  tagIndigo: chroma(colorPaletteSecondary.indigo).alpha(0.84).hex(),
-  tagLemon: chroma(colorPaletteSecondary.lemon).alpha(0.84).hex(),
-  tagLime: chroma(colorPaletteSecondary.lime).alpha(0.84).hex(),
-  tagPink: chroma(colorPaletteSecondary.pink).alpha(0.84).hex(),
-  tagPurple: chroma(colorPaletteSecondary.purple).alpha(0.84).hex(),
-  tagTeal: chroma(colorPaletteSecondary.teal).alpha(0.84).hex(),
-  tagTurquoise: chroma(colorPaletteSecondary.turquoise).alpha(0.84).hex(),
-  tagText: chroma(colorPalettePrimary.white).alpha(0.84).hex(),
-  tagHover: chroma(colorPalettePrimary.blue400).alpha(0.08).hex(),
-  tagPress: chroma(colorPalettePrimary.blue400).alpha(0.16).hex(),
-  tagIconHover: chroma(colorPalettePrimary.white).alpha(0.8).hex(),
-  tagIconPress: chroma(colorPalettePrimary.white).alpha(0.76).hex(),
-  // Typography
-  typographyCodeBg: chroma(colorPalettePrimary.white).alpha(0.16).hex(),
-  tooltipBackgroundTooltip: chroma(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 = 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 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 = useRef(styleFactory);
-  return useMemo$1(() => styleFactoryRef.current(theme), [theme]);
-};
-
-const DuboisContextDefaults = {
-  enableAnimation: false,
-  theme: 'default',
-  // Prefer to use useDesignSystemTheme.getPrefixedClassName instead
-  getPrefixCls: suffix => suffix ? "du-bois-".concat(suffix) : 'du-bois'
-};
-const DesignSystemContext = /*#__PURE__*/createContext(DuboisContextDefaults);
-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 = useMemo$1(() => getTheme(themeName || 'default', {
-    enableAnimation,
-    zIndexBase,
-    isCompact: true
-  }), // TODO: revisit this
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [themeName, zIndexBase]);
-  const providerPropsContext = useMemo$1(() => ({
-    theme: themeName,
-    enableAnimation,
-    zIndexBase,
-    isCompact: true,
-    getPopupContainer
-  }), [themeName, enableAnimation, zIndexBase, getPopupContainer]);
-  const classNamePrefix = getClassNamePrefix(theme);
-  const value = useMemo$1(() => {
-    return {
-      enableAnimation,
-      theme: theme.themeName,
-      getPrefixCls: suffix => getPrefixedClassNameFromTheme(theme, suffix),
-      getPopupContainer
-    };
-  }, [enableAnimation, theme, getPopupContainer]);
-  useEffect(() => {
-    return () => {
-      // when the design system context is unmounted, make sure the notification cache is also cleaned up
-      antDNotification.destroy();
-    };
-  }, []);
-  return jsx(DesignSystemProviderPropsContext.Provider, {
-    value: providerPropsContext,
-    children: jsx(ThemeProvider, {
-      theme: theme,
-      children: jsx(ConfigProvider$1, {
-        prefixCls: classNamePrefix,
-        getPopupContainer: getPopupContainer,
-        children: jsx(DesignSystemContext.Provider, {
-          value: value,
-          children: children
-        })
-      })
-    })
-  });
-};
-
 const Alert = _ref => {
   let {
     dangerouslySetAntdProps,
@@ -53877,16 +54028,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]: {
@@ -53900,24 +54054,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]: {
@@ -53942,16 +54099,28 @@ 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 /*#__PURE__*/css$1(styles, process.env.NODE_ENV === "production" ? "" : ";label:getAlertEmotionStyles;");
 };
 
-const AutoComplete = props => {
+const AutoComplete = _ref => {
+  let {
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref;
   const {
     theme
   } = useDesignSystemTheme();
   return jsx(AntDAutoComplete, { ...props,
+    ...dangerouslySetAntdProps,
     css: /*#__PURE__*/css$1(getAnimationCss(theme.options.enableAnimation), process.env.NODE_ENV === "production" ? "" : ";label:AutoComplete;")
   });
 };
@@ -53960,6 +54129,7 @@ AutoComplete.Option = AntDAutoComplete.Option;
 const Breadcrumb = _ref => {
   let {
     dangerouslySetAntdProps,
+    includeTrailingCaret = true,
     ...props
   } = _ref;
   const {
@@ -53984,11 +54154,14 @@ const Breadcrumb = _ref => {
       }
     }
   }, process.env.NODE_ENV === "production" ? "" : ";label:styles;");
-  return jsx(Breadcrumb$2, {
+  return jsxs(Breadcrumb$2, {
     separator: jsx(ChevronRightIcon, {}),
     ...props,
     ...dangerouslySetAntdProps,
-    css: /*#__PURE__*/css$1(getAnimationCss(theme.options.enableAnimation), styles, process.env.NODE_ENV === "production" ? "" : ";label:Breadcrumb;")
+    css: /*#__PURE__*/css$1(getAnimationCss(theme.options.enableAnimation), styles, process.env.NODE_ENV === "production" ? "" : ";label:Breadcrumb;"),
+    children: [props.children, includeTrailingCaret && props.children && jsx(Breadcrumb.Item, {
+      children: " "
+    })]
   });
 };
 Breadcrumb.Item = Breadcrumb$2.Item;
@@ -54007,7 +54180,6 @@ const ColorVars = {
  * Recursively appends `!important` to all CSS properties in an Emotion `CSSObject`.
  * Used to ensure that we always override Ant styles, without worrying about selector precedence.
  */
-
 function importantify(obj) {
   return _mapValues(obj, (value, key) => {
     if (_isString(value) || _isNumber(value) || _isBoolean(value)) {
@@ -54107,41 +54279,41 @@ 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
     }
   };
 }
@@ -54163,6 +54335,10 @@ function getDisabledStyles(theme) {
   };
 }
 
+function getEndIconClsName(theme) {
+  return "".concat(theme.general.iconfontCssPrefix, "-btn-end-icon");
+}
+
 const getButtonEmotionStyles = _ref => {
   let {
     theme,
@@ -54175,30 +54351,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 && {
@@ -54273,39 +54488,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'
       }
@@ -54318,9 +54520,15 @@ 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);
-  return /*#__PURE__*/css$1(importantStyles, process.env.NODE_ENV === "production" ? "" : ";label:getButtonEmotionStyles;");
+  const importantTypeStyles = importantify(typeStyles);
+  return /*#__PURE__*/css$1(importantStyles, importantTypeStyles, process.env.NODE_ENV === "production" ? "" : ";label:getButtonEmotionStyles;");
 };
 const Button = /*#__PURE__*/forwardRef(function Button( // Keep size out of props passed to AntD to make deprecation and eventual removal have 0 impact
 _ref2, ref) {
@@ -54329,19 +54537,21 @@ _ref2, ref) {
     children,
     size,
     type,
+    endIcon,
     ...props
   } = _ref2;
   const {
     theme,
     classNamePrefix
   } = useDesignSystemTheme();
+  const clsEndIcon = getEndIconClsName(theme);
   return 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',
@@ -54351,8 +54561,14 @@ _ref2, ref) {
     ...dangerouslySetAntdProps,
     ref: ref,
     type: type === 'tertiary' ? 'link' : type,
-    children: children && jsx("span", {
-      children: children
+    children: children && jsxs("span", {
+      style: {
+        visibility: props !== null && props !== void 0 && props.loading ? 'hidden' : 'visible'
+      },
+      children: [children, endIcon && jsx("span", {
+        className: clsEndIcon,
+        children: endIcon
+      })]
     })
   });
 }); // This is needed for other Ant components that wrap Button, such as Tooltip, to correctly
@@ -54368,6 +54584,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);
@@ -54434,59 +54651,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__*/forwardRef(function Checkbox(_ref, ref) {
   let {
     isChecked,
     onChange,
     children,
-    isDisabled = false
+    isDisabled = false,
+    style,
+    wrapperStyle,
+    dangerouslySetAntdProps,
+    ...restProps
   } = _ref;
   const {
     theme,
@@ -54495,6 +54717,7 @@ const DuboisCheckbox = /*#__PURE__*/forwardRef(function Checkbox(_ref, ref) {
   const clsPrefix = getPrefixedClassName('checkbox');
   return (// Antd checkboxes are inline, so we add this div to make ours block-level
     jsx("div", {
+      style: wrapperStyle,
       children: jsx(AntDCheckbox, {
         checked: isChecked === null ? undefined : isChecked,
         ref: ref,
@@ -54504,6 +54727,10 @@ const DuboisCheckbox = /*#__PURE__*/forwardRef(function Checkbox(_ref, ref) {
         disabled: isDisabled,
         indeterminate: isChecked === null,
         css: /*#__PURE__*/css$1(importantify(getCheckboxEmotionStyles(clsPrefix, theme)), process.env.NODE_ENV === "production" ? "" : ";label:DuboisCheckbox;"),
+        style: style,
+        "aria-checked": isChecked === null ? 'mixed' : isChecked,
+        ...restProps,
+        ...dangerouslySetAntdProps,
         children: children
       })
     })
@@ -54563,10 +54790,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,
@@ -54591,12 +54814,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 /*#__PURE__*/css$1(styles, process.env.NODE_ENV === "production" ? "" : ";label:getCollapseEmotionStyles;");
@@ -54614,7 +54835,7 @@ const Collapse = _ref => {
   } = useDesignSystemTheme();
   const clsPrefix = getPrefixedClassName('collapse');
   return jsx(Collapse$2, {
-    expandIcon: ChevronDownIcon,
+    expandIcon: () => jsx(ChevronDownIcon, {}),
     expandIconPosition: "right",
     ...props,
     ...dangerouslySetAntdProps,
@@ -54640,7 +54861,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,
@@ -54823,7 +55044,11 @@ const LegacyDatePicker = Object.assign(DuboisDatePicker, {
   YearPicker
 });
 
-const Dropdown = props => {
+const Dropdown = _ref => {
+  let {
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref;
   const {
     theme
   } = useDesignSystemTheme();
@@ -54833,7 +55058,8 @@ const Dropdown = props => {
     overlayStyle: {
       zIndex: theme.options.zIndexBase + 50,
       ...props.overlayStyle
-    }
+    },
+    ...dangerouslySetAntdProps
   });
 };
 
@@ -54842,13 +55068,14 @@ const Root = DropdownMenu$1.Root; // Behavioral component only
 const Content$1 = /*#__PURE__*/forwardRef(function Content(_ref, ref) {
   let {
     children,
+    minWidth = 220,
     ...props
   } = _ref;
   return 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),
@@ -55236,7 +55463,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'
@@ -55255,12 +55482,17 @@ const FormDubois = /*#__PURE__*/forwardRef(function Form(_ref2, ref) {
     requiredMark: props.requiredMark || false
   };
   return jsx(AntDForm, { ...mergedProps,
+    colon: false,
     ref: ref,
     ...dangerouslySetAntdProps
   });
 });
 
-const FormItem = props => {
+const FormItem = _ref3 => {
+  let {
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref3;
   const {
     theme,
     classNamePrefix
@@ -55269,7 +55501,8 @@ const FormItem = props => {
     css: getFormItemEmotionStyles({
       theme,
       clsPrefix: classNamePrefix
-    })
+    }),
+    ...dangerouslySetAntdProps
   });
 };
 
@@ -55284,8 +55517,13 @@ const Form = FormNamespace; // TODO: I'm doing this to support storybook's docge
 
 const __INTERNAL_DO_NOT_USE__FormItem = FormItem;
 
-const Col = props => {
-  return jsx(Col$2, { ...props
+const Col = _ref => {
+  let {
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref;
+  return jsx(Col$2, { ...props,
+    ...dangerouslySetAntdProps
   });
 };
 
@@ -55298,8 +55536,13 @@ Row.defaultProps = {
   gutter: ROW_GUTTER_SIZE
 };
 
-const Space = props => {
-  return jsx(AntDSpace, { ...props
+const Space = _ref => {
+  let {
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref;
+  return jsx(AntDSpace, { ...props,
+    ...dangerouslySetAntdProps
   });
 };
 
@@ -55312,7 +55555,6 @@ function getLevelStyles(theme, props) {
     case 1:
       return /*#__PURE__*/css$1({
         '&&': {
-          // TODO:FEINF-697 Move from XXL to XL
           fontSize: theme.typography.fontSizeXxl,
           lineHeight: theme.typography.lineHeightXxl,
           fontWeight: theme.typography.typographyBoldFontWeight
@@ -55322,7 +55564,6 @@ function getLevelStyles(theme, props) {
     case 2:
       return /*#__PURE__*/css$1({
         '&&': {
-          // 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
@@ -55330,6 +55571,15 @@ function getLevelStyles(theme, props) {
       }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
 
     case 3:
+      return /*#__PURE__*/css$1({
+        '&&': {
+          fontSize: theme.typography.fontSizeLg,
+          lineHeight: theme.typography.lineHeightLg,
+          fontWeight: theme.typography.typographyBoldFontWeight
+        }
+      }, process.env.NODE_ENV === "production" ? "" : ";label:getLevelStyles;");
+
+    case 4:
     default:
       return /*#__PURE__*/css$1({
         '&&': {
@@ -55377,16 +55627,15 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__$7() { return "You have tried to string
 
 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__*/css$1(importantify(styles), process.env.NODE_ENV === "production" ? "" : ";label:getHeaderStyles;");
 };
 
-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"
 } : {
@@ -55395,7 +55644,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"
 } : {
@@ -55405,6 +55654,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"
 } : {
@@ -55413,7 +55671,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"
 } : {
@@ -55429,23 +55687,16 @@ 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__*/css$1({
       marginBottom: 2,
-      ...(theme.options.isCompact && {
-        lineHeight: theme.typography.lineHeightBase
-      })
+      lineHeight: theme.typography.lineHeightBase
     }, 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__*/css$1({
-      marginTop: 6,
-      ...(theme.options.isCompact && {
-        marginTop: 2
-      })
-    }, process.env.NODE_ENV === "production" ? "" : ";label:titleIfOtherElementsPresent;"),
-    buttonContainer: _ref2$2,
-    titleAddOnsWrapper: _ref$3
+    titleIfOtherElementsPresent: _ref3$1,
+    buttonContainer: _ref2$3,
+    titleAddOnsWrapper: _ref$2
   };
   return jsxs("div", {
     css: [getHeaderStyles(clsPrefix, theme), props.dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Header;"],
@@ -55472,21 +55723,36 @@ const Header$1 = props => {
   });
 };
 
+const getStateClass = function (classNamePrefix, validationState) {
+  let className = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  let stateClass = '';
+
+  if (validationState) {
+    stateClass = "".concat(classNamePrefix, "-input-").concat(validationState);
+  }
+
+  return "".concat(stateClass, " ").concat(className).trim();
+};
+
 const getInputEmotionStyles = (clsPrefix, theme) => {
   const 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'
@@ -55498,9 +55764,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
       },
@@ -55513,11 +55779,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 /*#__PURE__*/css$1(importantify(styles), process.env.NODE_ENV === "production" ? "" : ";label:getInputEmotionStyles;");
@@ -55525,6 +55822,9 @@ const getInputEmotionStyles = (clsPrefix, theme) => {
 
 const TextArea = /*#__PURE__*/forwardRef(function TextArea(_ref, ref) {
   let {
+    className,
+    validationState,
+    autoComplete = 'off',
     dangerouslySetAntdProps,
     dangerouslyAppendEmotionCSS,
     ...props
@@ -55533,14 +55833,21 @@ const TextArea = /*#__PURE__*/forwardRef(function TextArea(_ref, ref) {
     classNamePrefix,
     theme
   } = useDesignSystemTheme();
-  return jsx(Input$2.TextArea, { ...props,
-    ...dangerouslySetAntdProps,
+  const wrapperClass = getStateClass(classNamePrefix, validationState, className);
+  return 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__*/forwardRef(function Password(_ref2, ref) {
   let {
+    className,
+    validationState,
+    autoComplete = 'off',
     dangerouslySetAntdProps,
     dangerouslyAppendEmotionCSS,
     ...props
@@ -55549,16 +55856,22 @@ const Password = /*#__PURE__*/forwardRef(function Password(_ref2, ref) {
     classNamePrefix,
     theme
   } = useDesignSystemTheme();
+  const wrapperClass = getStateClass(classNamePrefix, validationState, className);
   return 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__*/forwardRef(function Input(_ref3, ref) {
   let {
+    className,
+    validationState,
+    autoComplete = 'off',
     dangerouslySetAntdProps,
     dangerouslyAppendEmotionCSS,
     ...props
@@ -55567,10 +55880,14 @@ const DuboisInput = /*#__PURE__*/forwardRef(function Input(_ref3, ref) {
     classNamePrefix,
     theme
   } = useDesignSystemTheme();
-  return jsx(Input$2, { ...props,
-    ...dangerouslySetAntdProps,
+  const wrapperClass = getStateClass(classNamePrefix, validationState, className);
+  return jsx(Input$2, {
+    className: wrapperClass,
+    autoComplete: autoComplete,
     ref: ref,
-    css: [getInputEmotionStyles(classNamePrefix, theme), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:DuboisInput;"]
+    css: [getInputEmotionStyles(classNamePrefix, theme), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:DuboisInput;"],
+    ...props,
+    ...dangerouslySetAntdProps
   });
 }); // Properly creates the namespace and dot-notation components with correct types.
 
@@ -55591,8 +55908,13 @@ const {
   Sider,
   Content
 } = AntDLayout;
-const Layout = props => {
-  return jsx(AntDLayout, { ...props
+const Layout = _ref => {
+  let {
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref;
+  return jsx(AntDLayout, { ...props,
+    ...dangerouslySetAntdProps
   });
 };
 Layout.Header = Header;
@@ -55600,27 +55922,37 @@ Layout.Footer = Footer;
 Layout.Sider = Sider;
 Layout.Content = Content;
 
-const Menu = props => {
-  return jsx(AntDMenu, { ...props
+const Menu = _ref => {
+  let {
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref;
+  return jsx(AntDMenu, { ...props,
+    ...dangerouslySetAntdProps
   });
 };
 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 jsx(ClassNames, {
-    children: _ref => {
+    children: _ref3 => {
       let {
         css
-      } = _ref;
+      } = _ref3;
       return jsx(AntDMenu.SubMenu, {
         popupClassName: css({
           zIndex: theme.options.zIndexBase + 50
         }),
-        ...props
+        ...props,
+        ...dangerouslySetAntdProps
       });
     }
   });
@@ -55648,25 +55980,29 @@ 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__*/css$1({
     [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
@@ -55686,7 +56022,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,
@@ -55712,29 +56048,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.
@@ -55744,7 +56077,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;");
 };
 
@@ -55818,7 +56152,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"
 } : {
@@ -55836,15 +56170,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
@@ -55855,13 +56180,14 @@ 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 iconSize = 20;
 
-  const titleComp = theme.options.isCompact ? jsxs("div", {
-    css: _ref2$1,
+  const titleComp = jsxs("div", {
+    css: _ref2$2,
     children: [jsx(ErrorBorderIcon, {
       css: /*#__PURE__*/css$1({
         color: theme.colors.textValidationDanger,
@@ -55873,31 +56199,19 @@ function DangerModal(props) {
       css: _ref3,
       children: title
     })]
-  }) : jsxs("div", {
-    css: _ref4$1,
-    children: [jsx(ErrorBorderIcon, {
-      css: /*#__PURE__*/css$1({
-        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;")
-    }), jsx("div", {
-      children: title
-    })]
   });
+
   return jsx(Modal, {
     title: titleComp,
     footer: [jsx(Button, {
       onClick: onCancel,
+      ...cancelButtonProps,
       children: cancelText || 'Cancel'
     }, "cancel"), jsx(Button, {
       type: "primary",
       danger: true,
       onClick: onOk,
+      ...okButtonProps,
       children: okText || 'Delete'
     }, "discard")],
     onOk: onOk,
@@ -55906,14 +56220,10 @@ function DangerModal(props) {
   });
 }
 
-function useDesignSystemContext() {
-  return 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
@@ -55929,10 +56239,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 = jsx(SeverityIcon, {
@@ -55945,8 +56252,8 @@ function useNotification() {
         fontSize: theme.general.iconSize
       }, process.env.NODE_ENV === "production" ? "" : ";label:mergedArgs-closeIcon;")
     });
-    notificationApi.open(mergedArgs);
-  }, [notificationApi, getContainer, theme, clsPrefix]);
+    notificationInstance.open(mergedArgs);
+  }, [notificationInstance, getContainer, theme, clsPrefix]);
   const wrappedNotificationAPI = useMemo$1(() => {
     const error = args => open({ ...args,
       type: 'error'
@@ -55964,8 +56271,11 @@ function useNotification() {
       type: 'success'
     });
 
+    const close = key => antDNotification.close(key);
+
     return {
       open,
+      close,
       error,
       warning,
       info,
@@ -55981,7 +56291,7 @@ const defaultProps = {
 
 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"
 } : {
@@ -55992,10 +56302,12 @@ var _ref$2 = process.env.NODE_ENV === "production" ? {
 
 const PageWrapper = _ref2 => {
   let {
-    children
+    children,
+    ...props
   } = _ref2;
   return jsx("div", {
-    css: _ref$2,
+    css: _ref$1,
+    ...props,
     children: children
   });
 };
@@ -56126,12 +56438,16 @@ const Pagination = function Pagination(_ref) {
     onChange: onChange,
     showSizeChanger: false,
     showQuickJumper: true,
-    size: theme.options.isCompact ? 'small' : 'default',
+    size: 'small',
     ...dangerouslySetAntdProps
   });
 };
 
-const Popover = props => {
+const Popover = _ref => {
+  let {
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref;
   const {
     theme
   } = useDesignSystemTheme();
@@ -56240,12 +56556,21 @@ const radioOverrideEmotionStyles = _ref => {
   }, process.env.NODE_ENV === "production" ? "" : ";label:radioOverrideEmotionStyles;");
 };
 
-const DuboisRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
+const DuboisRadio = /*#__PURE__*/forwardRef(function Radio(_ref2, ref) {
+  let {
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref2;
   return jsx(Radio$2, { ...props,
+    ...dangerouslySetAntdProps,
     ref: ref
   });
 });
-const StyledRadioGroup = /*#__PURE__*/forwardRef(function StyledRadioGroup(props, ref) {
+const StyledRadioGroup = /*#__PURE__*/forwardRef(function StyledRadioGroup(_ref3, ref) {
+  let {
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref3;
   const {
     theme,
     getPrefixedClassName
@@ -56256,14 +56581,15 @@ const StyledRadioGroup = /*#__PURE__*/forwardRef(function StyledRadioGroup(props
       theme,
       clsPrefix
     }),
+    ...dangerouslySetAntdProps,
     ref: ref
   });
 });
-const VerticalGroup = /*#__PURE__*/forwardRef(function VerticalGroup(_ref2, ref) {
+const VerticalGroup = /*#__PURE__*/forwardRef(function VerticalGroup(_ref4, ref) {
   let {
     dangerouslySetAntdProps,
     ...props
-  } = _ref2;
+  } = _ref4;
   return jsx(StyledRadioGroup, {
     css: verticalGroupEmotionStyles,
     ...props,
@@ -56271,11 +56597,11 @@ const VerticalGroup = /*#__PURE__*/forwardRef(function VerticalGroup(_ref2, ref)
     ...dangerouslySetAntdProps
   });
 });
-const HorizontalGroup = /*#__PURE__*/forwardRef(function HorizontalGroup(_ref3, ref) {
+const HorizontalGroup = /*#__PURE__*/forwardRef(function HorizontalGroup(_ref5, ref) {
   let {
     dangerouslySetAntdProps,
     ...props
-  } = _ref3;
+  } = _ref5;
   return jsx(StyledRadioGroup, { ...props,
     ref: ref,
     ...dangerouslySetAntdProps
@@ -56349,6 +56675,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,
@@ -56372,20 +56703,22 @@ 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);
   return /*#__PURE__*/css$1(importantStyles, process.env.NODE_ENV === "production" ? "" : ";label:getSegmentedControlButtonEmotionStyles;");
 }
 
-const SegmentedControlButton = /*#__PURE__*/forwardRef(function SegmentedControlButton(props, ref) {
+const SegmentedControlButton = /*#__PURE__*/forwardRef(function SegmentedControlButton(_ref, ref) {
+  let {
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref;
   const {
     classNamePrefix,
     theme
@@ -56393,15 +56726,21 @@ const SegmentedControlButton = /*#__PURE__*/forwardRef(function SegmentedControl
   return jsx(Radio$2.Button, {
     css: getSegmentedControlButtonEmotionStyles(classNamePrefix, theme),
     ...props,
+    ...dangerouslySetAntdProps,
     ref: ref
   });
 });
-const SegmentedControlGroup = /*#__PURE__*/forwardRef(function SegmentedControlGroup(props, ref) {
+const SegmentedControlGroup = /*#__PURE__*/forwardRef(function SegmentedControlGroup(_ref2, ref) {
+  let {
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref2;
   const {
     classNamePrefix
   } = useDesignSystemTheme();
   return jsx(Radio$2.Group, { ...props,
     css: getSegmentedControlGroupEmotionStyles(classNamePrefix),
+    ...dangerouslySetAntdProps,
     ref: ref
   });
 });
@@ -56420,7 +56759,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");
@@ -56444,7 +56784,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
       },
@@ -56454,15 +56794,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]: {
@@ -56475,7 +56815,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.
@@ -56513,7 +56853,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': {
@@ -56522,7 +56862,7 @@ function getSelectEmotionStyles(_ref) {
         pointerEvents: 'none'
       },
       ["&".concat(classArrowLoading)]: {
-        top: theme.options.isCompact ? 4 : 8,
+        top: 4,
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
@@ -56543,7 +56883,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
@@ -56564,7 +56904,10 @@ function getSelectEmotionStyles(_ref) {
         paddingTop: 0,
         paddingBottom: 0
       },
-      [classItemOverflow]: {
+      [classItemOverflowContainer]: {
+        minHeight: 24
+      },
+      [classItemOverflowItem]: {
         alignSelf: 'auto',
         height: 24,
         lineHeight: theme.typography.lineHeightBase
@@ -56580,11 +56923,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]: {
@@ -56613,7 +56956,7 @@ function getSelectEmotionStyles(_ref) {
         paddingRight: 52
       },
       [classSearchClear]: {
-        top: theme.options.isCompact ? 16 : 20,
+        top: 16,
         opacity: 100
       }
     },
@@ -56781,19 +57124,30 @@ function DuboisSelect(_ref2, ref) {
   });
 }
 
-const Option = /*#__PURE__*/forwardRef(function Option(props, ref) {
+const Option = /*#__PURE__*/forwardRef(function Option(_ref5, ref) {
+  let {
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref5;
   return jsx(AntDSelect.Option, { ...props,
-    ref: ref
+    ref: ref,
+    ...dangerouslySetAntdProps
   });
 });
 const SelectNamespace = Object.assign(DuboisRefForwardedSelect, {
-  Option
+  Option,
+  OptGroup: AntDSelect.OptGroup
 });
 const Select = SelectNamespace;
 const __INTERNAL_DO_NOT_USE__Option = Option;
 
-const Skeleton = props => {
-  return jsx(Skeleton$2, { ...props
+const Skeleton = _ref => {
+  let {
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref;
+  return jsx(Skeleton$2, { ...props,
+    ...dangerouslySetAntdProps
   });
 };
 Skeleton.Button = Skeleton$2.Button;
@@ -56802,7 +57156,8 @@ Skeleton.Input = Skeleton$2.Input;
 
 const Spacer = _ref => {
   let {
-    size = 'medium'
+    size = 'medium',
+    ...props
   } = _ref;
   const {
     theme
@@ -56816,7 +57171,8 @@ const Spacer = _ref => {
   return jsx("div", {
     css: /*#__PURE__*/css$1({
       height: spacingValues[size]
-    }, process.env.NODE_ENV === "production" ? "" : ";label:Spacer;")
+    }, process.env.NODE_ENV === "production" ? "" : ";label:Spacer;"),
+    ...props
   });
 };
 
@@ -56842,6 +57198,7 @@ const Spinner = _ref => {
 };
 
 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");
@@ -56851,8 +57208,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',
@@ -56877,9 +57234,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]: {
@@ -56901,7 +57258,7 @@ function getSplitButtonEmotionStyles(classNamePrefix, theme) {
   return /*#__PURE__*/css$1(importantStyles, process.env.NODE_ENV === "production" ? "" : ";label:getSplitButtonEmotionStyles;");
 }
 
-var _ref$1 = process.env.NODE_ENV === "production" ? {
+var _ref = process.env.NODE_ENV === "production" ? {
   name: "jjj6u2",
   styles: "display:inline-flex;position:relative"
 } : {
@@ -56921,10 +57278,14 @@ const SplitButton = props => {
     menu,
     type,
     loading,
+    loadingButtonStyles,
+    placement,
     dangerouslySetAntdProps,
     ...dropdownButtonProps
-  } = props;
-  const [width, setWidth] = 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] = 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 = useCallback(node => {
@@ -56934,11 +57295,12 @@ const SplitButton = props => {
   }, [loading]);
   return jsx("div", {
     ref: ref,
-    css: _ref$1,
+    css: _ref,
     children: loading ? jsx(Button, {
       type: type === 'default' ? undefined : type,
       style: {
-        width: width
+        width: width,
+        ...loadingButtonStyles
       },
       children: jsx(LoadingIcon, {
         spin: true
@@ -56952,7 +57314,7 @@ const SplitButton = props => {
           fontSize: theme.general.iconSize
         }, process.env.NODE_ENV === "production" ? "" : ";label:SplitButton;")
       }),
-      placement: "bottomCenter",
+      placement: placement || 'bottomRight',
       type: type === 'default' ? undefined : type,
       ...dangerouslySetAntdProps,
       children: [icon, children]
@@ -57054,18 +57416,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]: {
@@ -57117,21 +57481,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,
@@ -57157,9 +57518,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,
@@ -57190,7 +57551,8 @@ const Tabs = _ref => {
     children,
     destroyInactiveTabPane = false,
     dangerouslySetAntdProps = {},
-    dangerouslyAppendEmotionCSS = {}
+    dangerouslyAppendEmotionCSS = {},
+    ...props
   } = _ref;
   const {
     theme,
@@ -57210,6 +57572,7 @@ const Tabs = _ref => {
     }),
     css: [getTabEmotionStyles(classNamePrefix, theme), importantify(dangerouslyAppendEmotionCSS), process.env.NODE_ENV === "production" ? "" : ";label:Tabs;"],
     ...dangerouslySetAntdProps,
+    ...props,
     children: children
   });
 };
@@ -57373,7 +57736,8 @@ const Tooltip = _ref => {
     title,
     placement = 'top',
     dataTestId,
-    dangerouslySetAntdProps
+    dangerouslySetAntdProps,
+    ...props
   } = _ref;
   const {
     theme
@@ -57385,7 +57749,8 @@ const Tooltip = _ref => {
     });
   }
 
-  return jsx(AntDTooltip, {
+  return jsx(AntDTooltip // eslint-disable-next-line react/forbid-dom-props -- FEINF-1337 - this should turn into data-testid
+  , {
     title: jsx("span", {
       "data-test-id": dataTestId,
       children: title
@@ -57401,7 +57766,9 @@ const Tooltip = _ref => {
     overlayStyle: {
       zIndex: theme.options.zIndexBase + 70
     },
+    css: getAnimationCss(theme.options.enableAnimation),
     ...dangerouslySetAntdProps,
+    ...props,
     children: children
   });
 };
@@ -57473,7 +57840,8 @@ function getTreeCheckboxEmotionStyles(clsPrefix, theme) {
     // Indeterminate and mouse pressed
     ["".concat(classIndeterminate, ":active > ").concat(classInner)]: {
       backgroundColor: theme.colors.actionPrimaryBackgroundPress
-    }
+    },
+    ...getAnimationCss(theme.options.enableAnimation)
   };
   return styles;
 }
@@ -57609,7 +57977,7 @@ function getTreeEmotionStyles(clsPrefix, theme) {
   return /*#__PURE__*/css$1(importantStyles, process.env.NODE_ENV === "production" ? "" : ";label:getTreeEmotionStyles;");
 }
 
-var _ref2 = process.env.NODE_ENV === "production" ? {
+var _ref2$1 = process.env.NODE_ENV === "production" ? {
   name: "1o12nta",
   styles: "font-size:24px!important"
 } : {
@@ -57626,7 +57994,8 @@ function Tree(_ref) {
     defaultCheckedKeys,
     disabled = false,
     mode = 'default',
-    dangerouslySetAntdProps
+    dangerouslySetAntdProps,
+    ...props
   } = _ref;
   const {
     theme,
@@ -57640,19 +58009,20 @@ function Tree(_ref) {
     disabled: disabled,
     css: getTreeEmotionStyles(classNamePrefix, theme),
     switcherIcon: jsx(ChevronDownIcon, {
-      css: _ref2
+      css: _ref2$1
     }),
     tabIndex: 0,
     selectable: mode === 'selectable' || mode === 'multiselectable',
     checkable: mode === 'checkable',
     multiple: mode === 'multiselectable',
-    ...dangerouslySetAntdProps
+    ...dangerouslySetAntdProps,
+    ...props
   });
 }
 
 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"
 } : {
@@ -57661,7 +58031,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,
@@ -57670,8 +58044,9 @@ function Link(props) {
   const openInNewTabProps = getOpenInNewTabProps(openInNewTab);
   return jsxs(AntDTypography.Link, { ...restProps,
     ...openInNewTabProps,
+    ...dangerouslySetAntdProps,
     children: [children, openInNewTab ? jsx(NewWindowIcon, {
-      css: _ref
+      css: _ref2
     }) : null]
   });
 }
@@ -57823,8 +58198,13 @@ function Text(userProps) {
   });
 }
 
-function Typography(props) {
-  return jsx(AntDTypography, { ...props
+function Typography(_ref) {
+  let {
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref;
+  return jsx(AntDTypography, { ...props,
+    ...dangerouslySetAntdProps
   });
 }
 Typography.Text = Text;
@@ -57832,5 +58212,5 @@ Typography.Title = Title;
 Typography.Paragraph = Paragraph;
 Typography.Link = Link;
 
-export { AIcon, Alert, AlignCenterIcon, AlignLeftIcon, AlignRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowsUpDownIcon, AutoComplete, BarChartIcon, BeakerIcon, BookIcon, BookmarkBorderIcon, BookmarkFillIcon, Breadcrumb, BriefcaseFillIcon, BriefcaseIcon, Button, CalendarEventIcon, CalendarIcon, CaretDownSquareIcon, CaretUpSquareIcon, CheckCircleBorderIcon, CheckCircleFillIcon, CheckIcon, CheckLineIcon, Checkbox, ChecklistIcon, ChevronDoubleDownIcon, ChevronDoubleLeftIcon, ChevronDoubleRightIcon, ChevronDoubleUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardIcon, Clock1Icon, ClockIcon, CloseIcon, CloudDownloadIcon, CloudIcon, CloudOffIcon, CloudUploadIcon, ClusterIcon, ClustersIcon, CodeIcon, Col, Collapse, CollapsePanel, CopyIcon, DIcon, DangerModal, DashIcon, DashboardIcon, DataIcon, DatabaseIcon, DesignSystemContext, DesignSystemProvider, DownloadIcon, DragIcon, Dropdown, DropdownMenu, DuboisDatePicker, ErrorBorderIcon, ErrorFillIcon, ExpandLessIcon, ExpandMoreIcon, ExperimentIcon, FeatureStoreIcon, FileCodeIcon, FileDocumentIcon, FileIcon, FileImageIcon, FileModelIcon, FilterIcon, Folder1Icon, FolderIcon, ForkIcon, Form, FormDubois, FullscreenExitIcon, FullscreenIcon, Gear1Icon, GearIcon, GridDashIcon, GridIcon, H1Icon, H2Icon, H3Icon, Header$1 as Header, HistoryIcon, HomeIcon, Icon, ImageIcon, IndentDecreaseIcon, IndentIncreaseIcon, InfoBorderIcon, InfoFillIcon, Input, KeyboardIcon, LayerIcon, Layout, LegacyDatePicker, LifesaverIcon, LightningIcon, LinkIcon, LinkRemoveIcon, ListBorderIcon, ListIcon, LoadingIcon, LockBorderIcon, LockFillIcon, LockUnlockedIcon, MIcon, Menu, MinusBoxIcon, MinusCircleBorderIcon, MinusCircleFillIcon, Modal, ModelsIcon, NewWindowIcon, NoIcon, NotebookIcon, NotificationIcon, NotificationsIcon, OfficeIcon, Option, OverflowIcon, PageBottomIcon, PageFirstIcon, PageLastIcon, PageTopIcon, PageWrapper, Pagination, PencilIcon, PinBorderIcon, PinCancelIcon, PinFillIcon, PinXIcon, PlayCircleBorderIcon, PlayCircleFillIcon, PlayIcon, PlusCircleBorderIcon, PlusCircleFillIcon, PlusIcon, PlusSquareIcon, Popover, QueryEditorIcon, QueryIcon, QueryListViewIcon, QueryNavIcon, QuestionMarkBorderIcon, QuestionMarkFillIcon, ROW_GUTTER_SIZE, Radio, ReaderModeIcon, ReposIcon, Row, SchoolIcon, Search1Icon, SearchIcon, SecurityIcon, SegmentedControlButton, SegmentedControlGroup, Select, ShareIcon, SidebarAutoIcon, SidebarCollapseIcon, SidebarExpandIcon, SidebarIcon, Skeleton, Space, Spacer, SpeechBubbleIcon, SpeechBubblePlusIcon, Spinner, SplitButton, StarBorderIcon, StarFillIcon, StopCircleBorderIcon, StopCricleFillIcon, StopIcon, StreamIcon, Switch, SyncIcon, TabPane, Table, TableIcon, Tabs, Tag, Tooltip, TrashIcon, Tree, TreeIcon, Typography, UploadIcon, UsbIcon, UserBadgeIcon, UserCircleIcon, UserGroupIcon, UserIcon, VideosIcon, WarningBorderIcon, WarningFillIcon, WithDesignSystemThemeHoc, XCircleBorderIcon, XCircleFillIcon, ZoomInIcon, ZoomOutIcon, __INTERNAL_DO_NOT_USE__FormItem, __INTERNAL_DO_NOT_USE__Group, __INTERNAL_DO_NOT_USE__HorizontalGroup, __INTERNAL_DO_NOT_USE__Option, __INTERNAL_DO_NOT_USE__Password, __INTERNAL_DO_NOT_USE__TextArea, __INTERNAL_DO_NOT_USE__VerticalGroup, getAnimationCss, getButtonEmotionStyles, getPaginationEmotionStyles, getTabEmotionStyles, useDesignSystemTheme, useNotification, useThemedStyles };
+export { AIcon, Alert, AlignCenterIcon, AlignLeftIcon, AlignRightIcon, ApplyDesignSystemFlags, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowsUpDownIcon, AutoComplete, BarChartIcon, BeakerIcon, BookIcon, BookmarkBorderIcon, BookmarkFillIcon, Breadcrumb, BriefcaseFillIcon, BriefcaseIcon, Button, CalendarEventIcon, CalendarIcon, CaretDownSquareIcon, CaretUpSquareIcon, CheckCircleBorderIcon, CheckCircleFillIcon, CheckIcon, CheckLineIcon, Checkbox, ChecklistIcon, ChevronDoubleDownIcon, ChevronDoubleLeftIcon, ChevronDoubleRightIcon, ChevronDoubleUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardIcon, Clock1Icon, ClockIcon, CloseIcon, CloudDownloadIcon, CloudIcon, CloudOffIcon, CloudUploadIcon, ClusterIcon, ClustersIcon, CodeIcon, Col, Collapse, CollapsePanel, CopyIcon, DIcon, DangerModal, DashIcon, DashboardIcon, DataIcon, DatabaseIcon, DesignSystemContext, DesignSystemProvider, DownloadIcon, DragIcon, Dropdown, DropdownMenu, DuboisDatePicker, ErrorBorderIcon, ErrorFillIcon, ExpandLessIcon, ExpandMoreIcon, ExperimentIcon, FeatureStoreIcon, FileCodeIcon, FileDocumentIcon, FileIcon, FileImageIcon, FileModelIcon, FilterIcon, Folder1Icon, FolderIcon, ForkIcon, Form, FormDubois, FullscreenExitIcon, FullscreenIcon, Gear1Icon, GearIcon, GridDashIcon, GridIcon, H1Icon, H2Icon, H3Icon, Header$1 as Header, HistoryIcon, HomeIcon, Icon, ImageIcon, IndentDecreaseIcon, IndentIncreaseIcon, InfinityIcon, InfoBorderIcon, InfoFillIcon, Input, KeyboardIcon, LayerIcon, Layout, LegacyDatePicker, LifesaverIcon, LightningIcon, LinkIcon, LinkRemoveIcon, ListBorderIcon, ListIcon, LoadingIcon, LockBorderIcon, LockFillIcon, LockUnlockedIcon, MIcon, Menu, MinusBoxIcon, MinusCircleBorderIcon, MinusCircleFillIcon, Modal, ModelsIcon, NewWindowIcon, NoIcon, NotebookIcon, NotificationIcon, NotificationsIcon, OfficeIcon, Option, OverflowIcon, PageBottomIcon, PageFirstIcon, PageLastIcon, PageTopIcon, PageWrapper, Pagination, PencilIcon, PinBorderIcon, PinCancelIcon, PinFillIcon, PinXIcon, PlayCircleBorderIcon, PlayCircleFillIcon, PlayIcon, PlusCircleBorderIcon, PlusCircleFillIcon, PlusIcon, PlusSquareIcon, Popover, QueryEditorIcon, QueryIcon, QueryListViewIcon, QueryNavIcon, QuestionMarkBorderIcon, QuestionMarkFillIcon, ROW_GUTTER_SIZE, Radio, ReaderModeIcon, ReposIcon, Row, SchoolIcon, Search1Icon, SearchIcon, SecurityIcon, SegmentedControlButton, SegmentedControlGroup, Select, ShareIcon, SidebarAutoIcon, SidebarCollapseIcon, SidebarExpandIcon, SidebarIcon, Skeleton, Space, Spacer, SpeechBubbleIcon, SpeechBubblePlusIcon, Spinner, SplitButton, StarBorderIcon, StarFillIcon, StopCircleBorderIcon, StopCricleFillIcon, StopIcon, StreamIcon, Switch, SyncIcon, TabPane, Table, TableIcon, Tabs, Tag, Tooltip, TrashIcon, Tree, TreeIcon, Typography, UploadIcon, UsbIcon, UserBadgeIcon, UserCircleIcon, UserGroupIcon, UserIcon, VideosIcon, Visible, VisibleOff, WarningBorderIcon, WarningFillIcon, WithDesignSystemThemeHoc, XCircleBorderIcon, XCircleFillIcon, ZoomInIcon, ZoomOutIcon, __INTERNAL_DO_NOT_USE__FormItem, __INTERNAL_DO_NOT_USE__Group, __INTERNAL_DO_NOT_USE__HorizontalGroup, __INTERNAL_DO_NOT_USE__Option, __INTERNAL_DO_NOT_USE__Password, __INTERNAL_DO_NOT_USE__TextArea, __INTERNAL_DO_NOT_USE__VerticalGroup, getAnimationCss, getButtonEmotionStyles, getPaginationEmotionStyles, getTabEmotionStyles, useDesignSystemFlags, useDesignSystemTheme, useNotification, useThemedStyles };
 //# sourceMappingURL=index.js.map