@databricks/design-system 1.9.1 → 1.10.0

package/dist/{Typography-84a00e02.js → Spinner-140f57ac.js}

@@ -1,10 +1,8 @@
 import React__default, { createContext, useMemo, useEffect, useContext, forwardRef } from 'react';
 import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-import { useTheme, ThemeProvider, css } from '@emotion/react';
-import { notification, ConfigProvider, Checkbox as Checkbox$1, Typography as Typography$1 } from 'antd';
+import { useTheme, ThemeProvider, css, keyframes } from '@emotion/react';
+import { notification, ConfigProvider, Button as Button$1, Checkbox as Checkbox$1, Typography as Typography$1, Tooltip as Tooltip$1, Input as Input$1 } from 'antd';
 import classnames from 'classnames';
-import chroma from 'chroma-js';
-import AntDIcon from '@ant-design/icons';
 import _isNil from 'lodash/isNil';
 import _endsWith from 'lodash/endsWith';
 import _isBoolean from 'lodash/isBoolean';
@@ -12,6 +10,8 @@ import _isNumber from 'lodash/isNumber';
 import _isString from 'lodash/isString';
 import _mapValues from 'lodash/mapValues';
 import unitless from '@emotion/unitless';
+import chroma from 'chroma-js';
+import AntDIcon from '@ant-design/icons';
 
 // Border variables
 const borders = {
@@ -80,17 +80,6 @@ const colorPaletteSecondary = {
   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,
@@ -132,14 +121,20 @@ const lightColorList = {
   backgroundDanger: chroma(colorPalettePrimary.red100).alpha(0.08).hex(),
   backgroundSecondary: colorPalettePrimary.grey100,
   backgroundWarning: chroma(colorPalettePrimary.yellow100).alpha(0.08).hex(),
+  backgroundValidationDanger: colorPalettePrimary.red100,
+  backgroundValidationSuccess: colorPalettePrimary.blue100,
+  backgroundValidationWarning: colorPalettePrimary.yellow100,
   border: colorPalettePrimary.grey300,
   borderDecorative: colorPalettePrimary.grey300,
+  borderValidationDanger: colorPalettePrimary.red300,
+  borderValidationWarning: colorPalettePrimary.yellow300,
   textPrimary: colorPalettePrimary.grey800,
   textSecondary: colorPalettePrimary.grey600,
   textPlaceholder: colorPalettePrimary.grey400,
   textValidationDanger: colorPalettePrimary.red600,
   textValidationSuccess: colorPalettePrimary.green600,
   textValidationWarning: colorPalettePrimary.yellow600,
+  textValidationInfo: colorPalettePrimary.grey600,
   overlayOverlay: chroma(colorPalettePrimary.grey100).alpha(0.72).hex(),
   // Tags
   tagDefault: chroma(colorPalettePrimary.grey600).alpha(0.08).hex(),
@@ -161,10 +156,9 @@ const lightColorList = {
   // Typography
   typographyCodeBg: chroma(colorPalettePrimary.grey600).alpha(0.08).hex(),
   // Table
-  tableBorder: colorPalettePrimary.grey200,
+  tableSeparatorColor: colorPalettePrimary.grey200,
   tableRowHover: chroma(colorPalettePrimary.grey600).alpha(0.04).hex(),
-  tooltipBackgroundTooltip: colorPalettePrimary.grey800,
-  ...unstableColors
+  tooltipBackgroundTooltip: colorPalettePrimary.grey800
 };
 const darkColorList = {
   actionDangerPrimaryBackgroundDefault: chroma(colorPalettePrimary.red400).alpha(0.84).hex(),
@@ -204,15 +198,21 @@ const darkColorList = {
   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(),
+  backgroundSecondary: '#283035',
+  backgroundValidationDanger: 'transparent',
+  backgroundValidationSuccess: 'transparent',
+  backgroundValidationWarning: 'transparent',
   border: chroma(colorPalettePrimary.white).alpha(0.48).hex(),
   borderDecorative: chroma(colorPalettePrimary.white).alpha(0.24).hex(),
+  borderValidationDanger: colorPalettePrimary.red300,
+  borderValidationWarning: colorPalettePrimary.yellow300,
   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(),
+  textValidationInfo: chroma(colorPalettePrimary.white).alpha(0.6).hex(),
   overlayOverlay: chroma(colorPalettePrimary.grey800).alpha(0.72).hex(),
   // Tags
   tagDefault: chroma(colorPalettePrimary.white).alpha(0.16).hex(),
@@ -234,16 +234,12 @@ const darkColorList = {
   // Typography
   typographyCodeBg: chroma(colorPalettePrimary.white).alpha(0.16).hex(),
   // Table
-  tableBorder: chroma(colorPalettePrimary.white).alpha(0.24).hex(),
+  tableSeparatorColor: chroma(colorPalettePrimary.white).alpha(0.24).hex(),
   tableRowHover: 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
+  backgroundWarning: 'rgba(222,121,33,0.08)'
 };
 
 const darkColors = {
@@ -256,17 +252,8 @@ const lightColors = {
   ...colorPalettePrimary,
   ...colorPaletteSecondary
 };
-function getSemanticColors(theme) {
-  switch (theme) {
-    case 'dark':
-      return {
-        ...darkColors
-      };
-    default:
-      return {
-        ...lightColors
-      };
-  }
+function getSemanticColors(isDarkMode) {
+  return isDarkMode ? darkColors : lightColors;
 }
 
 // TODO (FEINF-1674): Remove when removing USE_NEW_RADIO_STYLES
@@ -286,10 +273,10 @@ const deprecatedColors = {
   radioInteractivePressSecondary: 'rgba(34, 115, 181, 0.16)' // Fade of Interactive Available
 };
 
-function getColors(theme) {
+function getColors(isDarkMode) {
   return {
     ...deprecatedColors,
-    ...getSemanticColors(theme)
+    ...getSemanticColors(isDarkMode)
   };
 }
 
@@ -371,6 +358,19 @@ const antdGeneralVariables = {
   // Height available within button (for label and icon). Same for middle and small buttons.
   buttonInnerHeight: heightBase - spacing$1.sm * 2 - borderWidth * 2
 };
+const getShadowVariables = isDarkMode => {
+  if (isDarkMode) {
+    return {
+      shadowLow: '0px 4px 16px rgba(0, 0, 0, 0.12)',
+      shadowHigh: '0px 8px 24px rgba(0, 0, 0, 0.2);'
+    };
+  } else {
+    return {
+      shadowLow: '0px 4px 16px rgba(31, 39, 45, 0.12)',
+      shadowHigh: '0px 8px 24px rgba(31, 39, 45, 0.2)'
+    };
+  }
+};
 var generalVariables = antdGeneralVariables;
 
 const FONT_SIZE_BASE = 13;
@@ -397,9 +397,6 @@ var typography = {
   ...antdTypography
 };
 
-// TODO(giles): fix this
-// eslint-disable-next-line import/no-named-as-default
-
 const defaultOptions = {
   enableAnimation: false,
   zIndexBase: 1000
@@ -407,25 +404,25 @@ const defaultOptions = {
 
 // Function to get variables for a certain theme.
 // End users should use useDesignSystemTheme instead.
-function getTheme(themeName) {
+function getTheme(isDarkMode) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultOptions;
   return {
-    colors: getColors(themeName),
+    colors: getColors(isDarkMode),
     spacing: spacing$1,
-    general: generalVariables,
+    general: {
+      ...generalVariables,
+      ...getShadowVariables(isDarkMode)
+    },
     typography,
     borders: borders$1,
-    themeName,
+    isDarkMode,
+    themeName: isDarkMode ? 'dark' : 'default',
     options
   };
 }
 
-const themeNameToAntdName = {
-  dark: 'dark',
-  default: 'light'
-};
 function getClassNamePrefix(theme) {
-  const antdThemeName = themeNameToAntdName[theme.themeName];
+  const antdThemeName = theme.isDarkMode ? 'dark' : 'light';
   return "".concat(theme.general.classnamePrefix, "-").concat(antdThemeName);
 }
 function getPrefixedClassNameFromTheme(theme, className) {
@@ -434,7 +431,7 @@ function getPrefixedClassNameFromTheme(theme, className) {
 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');
+  const theme = emotionTheme && emotionTheme.general ? emotionTheme : getTheme(false);
   return {
     theme: theme,
     classNamePrefix: getClassNamePrefix(theme),
@@ -454,6 +451,7 @@ function WithDesignSystemThemeHoc(Component) {
 
 const DuboisContextDefaults = {
   enableAnimation: false,
+  isDarkMode: false,
   theme: 'default',
   // Prefer to use useDesignSystemTheme.getPrefixedClassName instead
   getPrefixCls: suffix => suffix ? "du-bois-".concat(suffix) : 'du-bois',
@@ -485,36 +483,39 @@ const AntDConfigProviderPropsContext = /*#__PURE__*/React__default.createContext
 const DesignSystemProvider = _ref => {
   let {
     children,
+    isDarkMode = false,
     theme: themeName,
     enableAnimation = false,
     zIndexBase = 1000,
     getPopupContainer,
     flags = {}
   } = _ref;
-  const theme = useMemo(() => getTheme(themeName || 'default', {
+  const theme = useMemo(() => getTheme(isDarkMode, {
     enableAnimation,
     zIndexBase
   }),
   // TODO: revisit this
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  [themeName, zIndexBase]);
+  [themeName, isDarkMode, zIndexBase]);
   const providerPropsContext = useMemo(() => ({
+    isDarkMode,
     theme: themeName,
     enableAnimation,
     zIndexBase,
     getPopupContainer,
     flags
-  }), [themeName, enableAnimation, zIndexBase, getPopupContainer, flags]);
+  }), [themeName, isDarkMode, enableAnimation, zIndexBase, getPopupContainer, flags]);
   const classNamePrefix = getClassNamePrefix(theme);
   const value = useMemo(() => {
     return {
       enableAnimation,
+      isDarkMode,
       theme: theme.themeName,
       getPrefixCls: suffix => getPrefixedClassNameFromTheme(theme, suffix),
       getPopupContainer,
       flags
     };
-  }, [enableAnimation, theme, getPopupContainer, flags]);
+  }, [enableAnimation, theme, isDarkMode, getPopupContainer, flags]);
   useEffect(() => {
     return () => {
       // when the design system context is unmounted, make sure the notification cache is also cleaned up
@@ -540,6 +541,7 @@ const DesignSystemProvider = _ref => {
 };
 const ApplyDesignSystemContextOverrides = _ref2 => {
   let {
+    isDarkMode,
     theme,
     enableAnimation,
     zIndexBase,
@@ -553,6 +555,7 @@ const ApplyDesignSystemContextOverrides = _ref2 => {
   }
   const newProps = useMemo(() => ({
     ...parentDesignSystemProviderProps,
+    isDarkMode: isDarkMode !== null && isDarkMode !== void 0 ? isDarkMode : parentDesignSystemProviderProps.isDarkMode,
     theme: theme !== null && theme !== void 0 ? theme : parentDesignSystemProviderProps.theme,
     enableAnimation: enableAnimation !== null && enableAnimation !== void 0 ? enableAnimation : parentDesignSystemProviderProps.enableAnimation,
     zIndexBase: zIndexBase !== null && zIndexBase !== void 0 ? zIndexBase : parentDesignSystemProviderProps.zIndexBase,
@@ -561,7 +564,7 @@ const ApplyDesignSystemContextOverrides = _ref2 => {
       ...parentDesignSystemProviderProps.flags,
       ...flags
     }
-  }), [parentDesignSystemProviderProps, theme, enableAnimation, zIndexBase, getPopupContainer, flags]);
+  }), [parentDesignSystemProviderProps, isDarkMode, theme, enableAnimation, zIndexBase, getPopupContainer, flags]);
   return jsx(DesignSystemProvider, {
     ...newProps,
     children: children
@@ -694,6 +697,172 @@ const Icon = props => {
   });
 };
 
+function SvgCheckIconV1(props) {
+  return jsx("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: jsx("path", {
+      d: "M8.795 15.875l-3.47-3.47a.996.996 0 00-1.41 0 .996.996 0 000 1.41l4.18 4.18c.39.39 1.02.39 1.41 0l10.58-10.58a.996.996 0 10-1.41-1.41l-9.88 9.87z",
+      fill: "currentColor"
+    })
+  });
+}
+function SvgCheckIconV2(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: "M15.06 3.56l-9.53 9.531L1 8.561 2.06 7.5l3.47 3.47L14 2.5l1.06 1.06z",
+      fill: "currentColor"
+    })
+  });
+}
+function CheckIcon(props) {
+  const {
+    USE_NEW_ICONS
+  } = useDesignSystemFlags();
+  const component = USE_NEW_ICONS ? SvgCheckIconV2 : SvgCheckIconV1;
+  return jsx(Icon, {
+    ...props,
+    component: component
+  });
+}
+
+function SvgChevronDownIconV1(props) {
+  return jsx("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: jsx("path", {
+      d: "M15.875 9l-3.88 3.88L8.115 9a.996.996 0 10-1.41 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59a.996.996 0 000-1.41c-.39-.38-1.03-.39-1.42 0z",
+      fill: "currentColor"
+    })
+  });
+}
+function SvgChevronDownIconV2(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 8.917L10.947 6 12 7.042 8 11 4 7.042 5.053 6 8 8.917z",
+      fill: "currentColor"
+    })
+  });
+}
+function ChevronDownIcon(props) {
+  const {
+    USE_NEW_ICONS
+  } = useDesignSystemFlags();
+  const component = USE_NEW_ICONS ? SvgChevronDownIconV2 : SvgChevronDownIconV1;
+  return jsx(Icon, {
+    ...props,
+    component: component
+  });
+}
+
+function SvgCloseIconV1(props) {
+  return jsx("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: jsx("path", {
+      d: "M7.707 6.293a1 1 0 00-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 101.414 1.414L12 13.414l4.293 4.293a1 1 0 001.414-1.414L13.414 12l4.293-4.293a1 1 0 00-1.414-1.414L12 10.586 7.707 6.293z",
+      fill: "currentColor"
+    })
+  });
+}
+function SvgCloseIconV2(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: "M6.97 8.03L2 3.06 3.06 2l4.97 4.97L13 2l1.06 1.06-4.969 4.97 4.97 4.97L13 14.06 8.03 9.092l-4.97 4.97L2 13l4.97-4.97z",
+      fill: "currentColor"
+    })
+  });
+}
+function CloseIcon(props) {
+  const {
+    USE_NEW_ICONS
+  } = useDesignSystemFlags();
+  const component = USE_NEW_ICONS ? SvgCloseIconV2 : SvgCloseIconV1;
+  return jsx(Icon, {
+    ...props,
+    component: component
+  });
+}
+
+function SvgLoadingIconV1(props) {
+  return jsx("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M23.212 12a.788.788 0 01-.789-.788 9.57 9.57 0 00-.757-3.751 9.662 9.662 0 00-5.129-5.129 9.587 9.587 0 00-3.749-.755.788.788 0 010-1.577c1.513 0 2.983.296 4.365.882a11.128 11.128 0 013.562 2.403 11.157 11.157 0 013.283 7.927.785.785 0 01-.786.788z",
+      fill: "currentColor"
+    })
+  });
+}
+function SvgLoadingIconV2(props) {
+  return jsx("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M23.212 12a.788.788 0 01-.789-.788 9.57 9.57 0 00-.757-3.751 9.662 9.662 0 00-5.129-5.129 9.587 9.587 0 00-3.749-.755.788.788 0 010-1.577c1.513 0 2.983.296 4.365.882a11.128 11.128 0 013.562 2.403 11.157 11.157 0 013.283 7.927.785.785 0 01-.786.788z",
+      fill: "currentColor"
+    })
+  });
+}
+function LoadingIcon(props) {
+  const {
+    USE_NEW_ICONS
+  } = useDesignSystemFlags();
+  const component = USE_NEW_ICONS ? SvgLoadingIconV2 : SvgLoadingIconV1;
+  return jsx(Icon, {
+    ...props,
+    component: component
+  });
+}
+
 function SvgNewWindowIconV1(props) {
   return jsx("svg", {
     width: "1em",
@@ -738,6 +907,103 @@ function NewWindowIcon(props) {
   });
 }
 
+function SvgSearchIconV1(props) {
+  return jsx("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M15.187 14.472h.79l4.24 4.26c.41.41.41 1.08 0 1.49-.41.41-1.08.41-1.49 0l-4.25-4.25v-.79l-.27-.28a6.5 6.5 0 01-5.34 1.48c-2.78-.47-5-2.79-5.34-5.59a6.505 6.505 0 017.27-7.27c2.8.34 5.12 2.56 5.59 5.34a6.5 6.5 0 01-1.48 5.34l.28.27zm-9.71-4.5c0 2.49 2.01 4.5 4.5 4.5s4.5-2.01 4.5-4.5-2.01-4.5-4.5-4.5-4.5 2.01-4.5 4.5z",
+      fill: "currentColor"
+    })
+  });
+}
+function SvgSearchIconV2(props) {
+  return jsxs("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [jsx("g", {
+      clipPath: "url(#SearchIcon_svg__clip0_13123_34883)",
+      children: jsx("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M8 1a7 7 0 104.39 12.453l2.55 2.55 1.06-1.06-2.55-2.55A7 7 0 008 1zM2.5 8a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0z",
+        fill: "currentColor"
+      })
+    }), jsx("defs", {
+      children: jsx("clipPath", {
+        id: "SearchIcon_svg__clip0_13123_34883",
+        children: jsx("path", {
+          fill: "#fff",
+          d: "M0 0h16v16H0z"
+        })
+      })
+    })]
+  });
+}
+function SearchIcon(props) {
+  const {
+    USE_NEW_ICONS
+  } = useDesignSystemFlags();
+  const component = USE_NEW_ICONS ? SvgSearchIconV2 : SvgSearchIconV1;
+  return jsx(Icon, {
+    ...props,
+    component: component
+  });
+}
+
+function SvgXCircleFillIconV1(props) {
+  return jsx("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm11.414 0l2.122-2.121a1.003 1.003 0 000-1.415 1.003 1.003 0 00-1.415 0L12 10.586 9.879 8.464a1.003 1.003 0 00-1.415 0 1.003 1.003 0 000 1.415L10.586 12l-2.122 2.121a1.003 1.003 0 000 1.415 1.003 1.003 0 001.415 0L12 13.414l2.121 2.122a1.003 1.003 0 001.415 0 1.003 1.003 0 000-1.415L13.414 12z",
+      fill: "currentColor"
+    })
+  });
+}
+function SvgXCircleFillIconV2(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 16A8 8 0 108 0a8 8 0 000 16zm1.97-4.97L8 9.06l-1.97 1.97-1.06-1.06L6.94 8 4.97 6.03l1.06-1.06L8 6.94l1.97-1.97 1.06 1.06L9.06 8l1.97 1.97-1.06 1.06z",
+      fill: "currentColor"
+    })
+  });
+}
+function XCircleFillIcon(props) {
+  const {
+    USE_NEW_ICONS
+  } = useDesignSystemFlags();
+  const component = USE_NEW_ICONS ? SvgXCircleFillIconV2 : SvgXCircleFillIconV1;
+  return jsx(Icon, {
+    ...props,
+    component: component
+  });
+}
+
 function SvgSortAscendingIcon(props) {
   return jsx("svg", {
     width: "1em",
@@ -877,21 +1143,487 @@ function getValidationStateColor(theme, validationState) {
   }
 }
 
-function getCheckboxEmotionStyles(clsPrefix, theme) {
-  let isHorizontal = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  let useNewCheckboxStyles = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-  const classInput = ".".concat(clsPrefix, "-input");
-  const classInner = ".".concat(clsPrefix, "-inner");
-  const classIndeterminate = ".".concat(clsPrefix, "-indeterminate");
-  const classChecked = ".".concat(clsPrefix, "-checked");
-  const classDisabled = ".".concat(clsPrefix, "-disabled");
-  const classDisabledWrapper = ".".concat(clsPrefix, "-wrapper-disabled");
-  const classContainer = ".".concat(clsPrefix, "-group");
-  const classWrapper = ".".concat(clsPrefix, "-wrapper");
-  const defaultSelector = "".concat(classInput, " + ").concat(classInner);
-  const hoverSelector = "".concat(classInput, ":hover + ").concat(classInner);
-  const pressSelector = "".concat(classInput, ":active + ").concat(classInner);
-  const styles = {
+function getDefaultStyles(theme) {
+  return {
+    backgroundColor: theme.colors.actionDefaultBackgroundDefault,
+    borderColor: theme.colors.actionDefaultBorderDefault,
+    color: theme.colors.actionDefaultTextDefault,
+    lineHeight: theme.typography.lineHeightBase,
+    '&:hover': {
+      backgroundColor: theme.colors.actionDefaultBackgroundHover,
+      borderColor: theme.colors.actionDefaultBorderHover,
+      color: theme.colors.actionDefaultTextHover
+    },
+    '&:active': {
+      backgroundColor: theme.colors.actionDefaultBackgroundPress,
+      borderColor: theme.colors.actionDefaultBorderPress,
+      color: theme.colors.actionDefaultTextPress
+    }
+  };
+}
+function getPrimaryStyles(theme) {
+  return {
+    backgroundColor: theme.colors.actionPrimaryBackgroundDefault,
+    borderColor: 'transparent',
+    color: theme.colors.actionPrimaryTextDefault,
+    textShadow: 'none',
+    '&:hover': {
+      backgroundColor: theme.colors.actionPrimaryBackgroundHover,
+      borderColor: 'transparent',
+      color: theme.colors.actionPrimaryTextHover
+    },
+    '&:active': {
+      backgroundColor: theme.colors.actionPrimaryBackgroundPress,
+      borderColor: 'transparent',
+      color: theme.colors.actionPrimaryTextPress
+    }
+  };
+}
+function getLinkStyles$1(theme) {
+  return {
+    backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
+    borderColor: theme.colors.actionTertiaryBackgroundDefault,
+    color: theme.colors.actionTertiaryTextDefault,
+    '&:hover': {
+      backgroundColor: theme.colors.actionTertiaryBackgroundHover,
+      borderColor: 'transparent',
+      color: theme.colors.actionTertiaryTextHover
+    },
+    '&:active': {
+      backgroundColor: theme.colors.actionTertiaryBackgroundPress,
+      borderColor: 'transparent',
+      color: theme.colors.actionTertiaryTextPress
+    },
+    '&[disabled]:hover': {
+      background: 'none',
+      color: theme.colors.actionDisabledText
+    }
+  };
+}
+function getPrimaryDangerStyles(theme) {
+  return {
+    backgroundColor: theme.colors.actionDangerPrimaryBackgroundDefault,
+    borderColor: 'transparent',
+    color: theme.colors.white,
+    '&:hover': {
+      backgroundColor: theme.colors.actionDangerPrimaryBackgroundHover,
+      borderColor: 'transparent',
+      color: theme.colors.white
+    },
+    '&:active': {
+      backgroundColor: theme.colors.actionDangerPrimaryBackgroundPress,
+      borderColor: 'transparent',
+      color: theme.colors.white
+    },
+    '&:focus-visible': {
+      outlineColor: theme.colors.actionDangerPrimaryBackgroundDefault
+    }
+  };
+}
+function getSecondaryDangerStyles(theme) {
+  return {
+    backgroundColor: theme.colors.actionDangerDefaultBackgroundDefault,
+    borderColor: theme.colors.actionDangerDefaultBorderDefault,
+    color: theme.colors.actionDangerDefaultTextDefault,
+    '&:hover': {
+      backgroundColor: theme.colors.actionDangerDefaultBackgroundHover,
+      borderColor: theme.colors.actionDangerDefaultBorderHover,
+      color: theme.colors.actionDangerDefaultTextHover
+    },
+    '&:active': {
+      backgroundColor: theme.colors.actionDangerDefaultBackgroundPress,
+      borderColor: theme.colors.actionDangerDefaultBorderPress,
+      color: theme.colors.actionDangerDefaultTextPress
+    },
+    '&:focus-visible': {
+      outlineColor: theme.colors.actionDangerPrimaryBackgroundDefault
+    }
+  };
+}
+function getDisabledStyles(theme) {
+  return {
+    backgroundColor: theme.colors.actionDisabledBackground,
+    borderColor: 'transparent',
+    color: theme.colors.actionDisabledText,
+    '&:hover': {
+      backgroundColor: theme.colors.actionDisabledBackground,
+      borderColor: 'transparent',
+      color: theme.colors.actionDisabledText
+    },
+    '&:active': {
+      backgroundColor: theme.colors.actionDisabledBackground,
+      borderColor: 'transparent',
+      color: theme.colors.actionDisabledText
+    }
+  };
+}
+function getDisabledTertiaryStyles(theme) {
+  return {
+    backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
+    borderColor: 'transparent',
+    color: theme.colors.actionDisabledText,
+    '&:hover': {
+      backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
+      borderColor: 'transparent',
+      color: theme.colors.actionDisabledText
+    },
+    '&:active': {
+      backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
+      borderColor: 'transparent',
+      color: theme.colors.actionDisabledText
+    }
+  };
+}
+
+function getEndIconClsName(theme) {
+  return "".concat(theme.general.iconfontCssPrefix, "-btn-end-icon");
+}
+const getButtonEmotionStyles = _ref => {
+  let {
+    theme,
+    classNamePrefix,
+    loading,
+    withIcon,
+    onlyIcon,
+    isAnchor,
+    enableAnimation,
+    size,
+    type,
+    isFlex,
+    useNewIcons,
+    useFocusPseudoClass,
+    forceIconStyles
+  } = _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: useNewIcons ? theme.general.iconFontSizeNew : theme.general.buttonInnerHeight - 4,
+    ...(!isFlex && {
+      // verticalAlign used by AntD to move icon and label to center
+      // TODO(schs): Try to move buttons to flexbox to solve this. Main problem is that flex-inline and inline-block
+      //  behave differently (vertically align of multiple buttons is off). See https://codepen.io/qfactor/pen/JXVzBe
+      verticalAlign: useNewIcons ? -4 : -5,
+      ...(onlyIcon && {
+        verticalAlign: -3
+      }),
+      // verticalAlign used by AntD to move icon and label to center
+      // TODO(schs): Try to move buttons to flexbox to solve this. Main problem is that flex-inline and inline-block
+      //  behave differently (vertically align of multiple buttons is off). See https://codepen.io/qfactor/pen/JXVzBe
+      // Need to make sure not to apply this to regular buttons as it will offset the icons
+      ...(!onlyIcon && {
+        verticalAlign: useNewIcons ? -3 : -4
+      })
+    }),
+    lineHeight: 0,
+    ...(size === 'small' && {
+      lineHeight: theme.typography.lineHeightSm,
+      ...((onlyIcon || forceIconStyles) && {
+        fontSize: 16,
+        ...(isFlex && {
+          height: 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,
+    ...(isFlex && {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      verticalAlign: 'middle'
+    }),
+    ...(!onlyIcon && !forceIconStyles && {
+      '&&': {
+        padding: '4px 12px',
+        ...(size === 'small' && {
+          padding: '0 8px'
+        })
+      }
+    }),
+    ...((onlyIcon || forceIconStyles) && {
+      width: theme.general.heightSm
+    }),
+    ...(size === 'small' && {
+      height: SMALL_BUTTON_HEIGHT,
+      lineHeight: theme.typography.lineHeightBase,
+      ...((onlyIcon || forceIconStyles) && {
+        width: SMALL_BUTTON_HEIGHT,
+        paddingTop: 0,
+        paddingBottom: 0,
+        verticalAlign: 'middle'
+      })
+    }),
+    '&:focus-visible': {
+      outlineStyle: 'solid',
+      outlineWidth: '2px',
+      outlineOffset: '1px',
+      outlineColor: theme.themeName === 'dark' ? theme.colors.actionDefaultBorderFocus : theme.colors.primary
+    },
+    ...getDefaultStyles(theme),
+    ["&".concat(classPrimary)]: {
+      ...getPrimaryStyles(theme)
+    },
+    ["&".concat(classLink)]: {
+      ...getLinkStyles$1(theme),
+      ...(type === 'link' && {
+        padding: 'unset',
+        height: 'auto',
+        border: 'none',
+        boxShadow: 'none',
+        '&[disabled],&:hover': {
+          background: 'none'
+        }
+      })
+    },
+    ["&".concat(classDangerous).concat(classPrimary)]: {
+      ...getPrimaryDangerStyles(theme)
+    },
+    ["&".concat(classDangerous)]: {
+      ...getSecondaryDangerStyles(theme)
+    },
+    ["&[disabled], &".concat(classDangerous, ":disabled")]: {
+      ...getDisabledStyles(theme),
+      ...((onlyIcon || forceIconStyles) && {
+        backgroundColor: 'transparent',
+        '&:hover': {
+          backgroundColor: 'transparent'
+        },
+        '&:active': {
+          backgroundColor: 'transparent'
+        }
+      })
+    },
+    // Loading styles
+    ...(loading && {
+      '::before': {
+        opacity: 0
+      },
+      ["".concat(clsLoadingIcon)]: {
+        ...(onlyIcon ? {
+          // In case of only icon, the icon is already centered but vertically not aligned, this fixes that
+          verticalAlign: 'middle'
+        } : {
+          // Position loading indicator in center
+          // This would break vertical centering of loading circle when onlyIcon is true
+          position: 'absolute'
+        }),
+        ...(!isFlex && !forceIconStyles && {
+          // Normally we'd do `transform: translateX(-50%)` but `antd` crushes that with injected inline `style`.
+          left: 'calc(50% - 7px)'
+        }),
+        // Re-enable animation for the loading spinner, since it can be disabled by the global animation CSS.
+        svg: {
+          animationDuration: '1s !important'
+        }
+      },
+      ["> :not(".concat(clsLoadingIcon, ")")]: {
+        // Hide all content except loading icon
+        opacity: 0,
+        visibility: 'hidden',
+        // Add horizontal space for icon
+        ...(withIcon && {
+          paddingLeft: theme.spacing.sm * 2 + 14
+        })
+      }
+    }),
+    // Icon styles
+    ["> ".concat(clsIcon, " + span, > span + ").concat(clsIcon)]: {
+      marginRight: 0
+    },
+    ["> ".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
+      },
+      ...(isAnchor && {
+        lineHeight: "".concat(theme.general.heightSm, "px"),
+        ...getLinkStyles$1(theme),
+        '&:disabled': {
+          color: theme.colors.actionDisabledText
+        }
+      }),
+      '&[disabled]:hover': {
+        backgroundColor: 'transparent'
+      }
+    },
+    ["&:focus"]: {
+      ...(useFocusPseudoClass && {
+        outlineStyle: 'solid',
+        outlineWidth: '2px',
+        outlineOffset: '1px',
+        outlineColor: theme.themeName === 'dark' ? theme.colors.actionDefaultBorderFocus : theme.colors.primary
+      }),
+      ["".concat(clsLoadingIcon)]: {
+        ...(onlyIcon && {
+          // Mitigate wrong left offset for loading state with onlyIcon
+          left: 0
+        })
+      }
+    },
+    ...(forceIconStyles && {
+      padding: '0 6px',
+      lineHeight: theme.typography.lineHeightSm,
+      color: theme.colors.textSecondary,
+      '& > span': {
+        verticalAlign: -1,
+        height: theme.general.heightSm / 2,
+        width: theme.general.heightSm / 2
+      },
+      ["& > ".concat(clsLoadingIcon, " .anticon")]: {
+        // left: `calc(50% - 6px)!important`,
+        height: theme.general.heightSm / 2,
+        width: theme.general.heightSm / 2,
+        padding: 0
+      }
+    }),
+    ...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 = {
+    ...(type === 'tertiary' && {
+      ["&:enabled:not(".concat(clsIconOnly, ")")]: tertiaryColors,
+      ["&".concat(classLink, "[disabled]")]: {
+        ...getDisabledTertiaryStyles(theme)
+      }
+    })
+  };
+  const importantStyles = importantify(styles);
+  const importantTypeStyles = importantify(typeStyles);
+  return /*#__PURE__*/css(importantStyles, importantTypeStyles, process.env.NODE_ENV === "production" ? "" : ";label:getButtonEmotionStyles;");
+};
+const Button = /* #__PURE__ */(() => {
+  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) {
+    let {
+      dangerouslySetAntdProps,
+      children,
+      size,
+      type,
+      endIcon,
+      dangerouslySetForceIconStyles,
+      dangerouslyUseFocusPseudoClass,
+      ...props
+    } = _ref2;
+    const {
+      theme,
+      classNamePrefix
+    } = useDesignSystemTheme();
+    const {
+      USE_FLEX_BUTTON: isFlex,
+      USE_NEW_ICONS: useNewIcons
+    } = useDesignSystemFlags();
+    const clsEndIcon = getEndIconClsName(theme);
+    return jsx(DesignSystemAntDConfigProvider, {
+      children: jsx(Button$1, {
+        ...props,
+        css: getButtonEmotionStyles({
+          theme,
+          classNamePrefix,
+          loading: Boolean(props.loading),
+          withIcon: Boolean(props.icon),
+          onlyIcon: Boolean((props.icon || endIcon) && !children),
+          isAnchor: Boolean(props.href && !type),
+          danger: Boolean(props.danger),
+          enableAnimation: theme.options.enableAnimation,
+          size: size || 'middle',
+          type,
+          isFlex,
+          useNewIcons,
+          forceIconStyles: Boolean(dangerouslySetForceIconStyles),
+          useFocusPseudoClass: Boolean(dangerouslyUseFocusPseudoClass)
+        }),
+        href: props.disabled ? undefined : props.href,
+        ...dangerouslySetAntdProps,
+        ref: ref,
+        type: type === 'tertiary' ? 'link' : type,
+        children: children && jsxs("span", {
+          style: {
+            visibility: props !== null && props !== void 0 && props.loading ? 'hidden' : 'visible',
+            ...(isFlex && {
+              display: 'inline-flex',
+              alignItems: 'center'
+            })
+          },
+          children: [children, endIcon && jsx("span", {
+            className: clsEndIcon,
+            style: {
+              ...(isFlex && {
+                display: 'inline-flex',
+                alignItems: 'center'
+              })
+            },
+            children: endIcon
+          })]
+        })
+      })
+    });
+  });
+
+  // This is needed for other Ant components that wrap Button, such as Tooltip, to correctly
+  // identify it as an Ant button.
+  // This should be removed if the component is rewritten to no longer be a wrapper around Ant.
+  // See: https://github.com/ant-design/ant-design/blob/6dd39c1f89b4d6632e6ed022ff1bc275ca1e0f1f/components/button/button.tsx#L291
+  Button.__ANT_BUTTON = true;
+  return Button;
+})();
+
+function getCheckboxEmotionStyles(clsPrefix, theme) {
+  let isHorizontal = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  let useNewCheckboxStyles = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  const classInput = ".".concat(clsPrefix, "-input");
+  const classInner = ".".concat(clsPrefix, "-inner");
+  const classIndeterminate = ".".concat(clsPrefix, "-indeterminate");
+  const classChecked = ".".concat(clsPrefix, "-checked");
+  const classDisabled = ".".concat(clsPrefix, "-disabled");
+  const classDisabledWrapper = ".".concat(clsPrefix, "-wrapper-disabled");
+  const classContainer = ".".concat(clsPrefix, "-group");
+  const classWrapper = ".".concat(clsPrefix, "-wrapper");
+  const defaultSelector = "".concat(classInput, " + ").concat(classInner);
+  const hoverSelector = "".concat(classInput, ":hover + ").concat(classInner);
+  const pressSelector = "".concat(classInput, ":active + ").concat(classInner);
+  const styles = {
     ...(useNewCheckboxStyles && {
       [".".concat(clsPrefix)]: {
         top: 'unset',
@@ -1098,13 +1830,16 @@ const DuboisCheckbox = /*#__PURE__*/forwardRef(function Checkbox(_ref2, ref) {
         "aria-checked": isChecked === null ? 'mixed' : isChecked,
         ...restProps,
         ...dangerouslySetAntdProps,
-        children: children
+        children: jsx(RestoreAntDDefaultClsPrefix, {
+          children: children
+        })
       })
     })
   });
 });
 const CheckboxGroup = /*#__PURE__*/forwardRef(function CheckboxGroup(_ref3, ref) {
   let {
+    children,
     layout = 'vertical',
     ...props
   } = _ref3;
@@ -1120,7 +1855,10 @@ const CheckboxGroup = /*#__PURE__*/forwardRef(function CheckboxGroup(_ref3, ref)
     children: jsx(Checkbox$1.Group, {
       ref: ref,
       ...props,
-      css: getCheckboxEmotionStyles(clsPrefix, theme, layout === 'horizontal', USE_NEW_CHECKBOX_STYLES)
+      css: getCheckboxEmotionStyles(clsPrefix, theme, layout === 'horizontal', USE_NEW_CHECKBOX_STYLES),
+      children: jsx(RestoreAntDDefaultClsPrefix, {
+        children: children
+      })
     })
   });
 });
@@ -1461,5 +2199,327 @@ const Typography = /* #__PURE__ */(() => {
   return Typography;
 })();
 
-export { ApplyDesignSystemContextOverrides as A, Checkbox as C, DesignSystemAntDConfigProvider as D, Icon as I, NewWindowIcon as N, RestoreAntDDefaultClsPrefix as R, SortAscendingIcon as S, Typography as T, WithDesignSystemThemeHoc as W, __INTERNAL_DO_NOT_USE__Group as _, useDesignSystemFlags as a, useDesignSystemContext as b, getValidationStateColor as c, Title as d, DU_BOIS_ENABLE_ANIMATION_CLASSNAME as e, getWrapperStyle as f, getAnimationCss as g, DesignSystemContext as h, importantify as i, DesignSystemProvider as j, ApplyDesignSystemFlags as k, lightColorList as l, useAntDConfigProviderContext as m, SortDescendingIcon as n, SortUnsortedIcon as o, useDesignSystemTheme as u };
-//# sourceMappingURL=Typography-84a00e02.js.map
+const Tooltip = _ref => {
+  let {
+    children,
+    title,
+    placement = 'top',
+    dataTestId,
+    dangerouslySetAntdProps,
+    ...props
+  } = _ref;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  if (!title) {
+    return jsx(React__default.Fragment, {
+      children: children
+    });
+  }
+  const {
+    overlayInnerStyle,
+    overlayStyle,
+    ...delegatedDangerouslySetAntdProps
+  } = dangerouslySetAntdProps || {};
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(Tooltip$1
+    // eslint-disable-next-line react/forbid-dom-props -- FEINF-1337 - this should turn into data-testid
+    , {
+      title: jsx("span", {
+        "data-test-id": dataTestId,
+        children: title
+      }),
+      placement: placement
+      // Always trigger on hover and focus
+      ,
+      trigger: ['hover', 'focus'],
+      overlayInnerStyle: {
+        backgroundColor: '#2F3941',
+        lineHeight: '22px',
+        padding: '4px 8px',
+        boxShadow: theme.general.shadowLow,
+        ...overlayInnerStyle
+      },
+      overlayStyle: {
+        zIndex: theme.options.zIndexBase + 70,
+        ...overlayStyle
+      },
+      css: /*#__PURE__*/css({
+        ...getAnimationCss(theme.options.enableAnimation)
+      }, process.env.NODE_ENV === "production" ? "" : ";label:Tooltip;"),
+      ...delegatedDangerouslySetAntdProps,
+      ...props,
+      children: children
+    })
+  });
+};
+
+const getInputEmotionStyles = (clsPrefix, theme, _ref, useNewIcons, useTransparent) => {
+  let {
+    validationState
+  } = _ref;
+  const inputClass = ".".concat(clsPrefix, "-input");
+  const affixClass = ".".concat(clsPrefix, "-input-affix-wrapper");
+  const affixClassFocused = ".".concat(clsPrefix, "-input-affix-wrapper-focused");
+  const clearIcon = ".".concat(clsPrefix, "-input-clear-icon");
+  const prefixIcon = ".".concat(clsPrefix, "-input-prefix");
+  const suffixIcon = ".".concat(clsPrefix, "-input-suffix");
+  const validationColor = getValidationStateColor(theme, validationState);
+  const styles = {
+    '&&': {
+      lineHeight: theme.typography.lineHeightBase,
+      minHeight: theme.general.heightSm,
+      ...(validationState && {
+        borderColor: validationColor
+      }),
+      '&:hover': {
+        borderColor: validationState ? validationColor : theme.colors.actionPrimaryBackgroundHover
+      },
+      '&:focus': {
+        outlineColor: validationState ? validationColor : theme.colors.actionPrimaryBackgroundDefault,
+        outlineWidth: 2,
+        outlineOffset: -2,
+        outlineStyle: 'solid',
+        boxShadow: 'none',
+        borderColor: 'transparent'
+      },
+      '&:disabled': {
+        backgroundColor: theme.colors.actionDisabledBackground,
+        color: theme.colors.actionDisabledText
+      }
+    },
+    ["&".concat(inputClass, ", ").concat(inputClass)]: {
+      ...(useTransparent && {
+        backgroundColor: 'transparent'
+      })
+    },
+    ["&".concat(affixClass)]: {
+      ...(useTransparent && {
+        backgroundColor: 'transparent'
+      }),
+      lineHeight: theme.typography.lineHeightBase,
+      paddingTop: 5,
+      paddingBottom: 5,
+      minHeight: theme.general.heightSm,
+      '::before': {
+        lineHeight: theme.typography.lineHeightBase
+      },
+      '&:hover': {
+        borderColor: theme.colors.actionPrimaryBackgroundHover
+      },
+      ["input.".concat(clsPrefix, "-input")]: {
+        borderRadius: 0
+      }
+    },
+    ["&".concat(affixClassFocused)]: {
+      boxShadow: 'none',
+      '&&, &:focus': {
+        outlineColor: theme.colors.actionPrimaryBackgroundDefault,
+        outlineWidth: 2,
+        outlineOffset: -2,
+        outlineStyle: 'solid',
+        boxShadow: 'none',
+        borderColor: 'transparent'
+      }
+    },
+    ...(useNewIcons && {
+      [clearIcon]: {
+        fontSize: theme.general.iconFontSizeNew
+      },
+      [prefixIcon]: {
+        marginRight: theme.spacing.sm
+      },
+      [suffixIcon]: {
+        marginLeft: theme.spacing.sm
+      }
+    }),
+    ...getAnimationCss(theme.options.enableAnimation)
+  };
+  return /*#__PURE__*/css(importantify(styles), process.env.NODE_ENV === "production" ? "" : ";label:getInputEmotionStyles;");
+};
+const getInputGroupStyling = clsPrefix => {
+  const inputClass = ".".concat(clsPrefix, "-input");
+  const buttonClass = ".".concat(clsPrefix, "-btn");
+  return /*#__PURE__*/css({
+    ["& > ".concat(inputClass)]: {
+      '&:disabled': {
+        border: 'none'
+      }
+    },
+    ["& > ".concat(buttonClass, " > span")]: {
+      verticalAlign: 'middle'
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getInputGroupStyling;");
+};
+const TextArea = /*#__PURE__*/forwardRef(function TextArea(_ref2, ref) {
+  let {
+    validationState,
+    autoComplete = 'off',
+    dangerouslySetAntdProps,
+    dangerouslyAppendEmotionCSS,
+    ...props
+  } = _ref2;
+  const {
+    classNamePrefix,
+    theme
+  } = useDesignSystemTheme();
+  const {
+    USE_NEW_ICONS: useNewIcons,
+    USE_TRANSPARENT_INPUT: useTransparent
+  } = useDesignSystemFlags();
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(Input$1.TextArea, {
+      ref: ref,
+      autoComplete: autoComplete,
+      css: [getInputEmotionStyles(classNamePrefix, theme, {
+        validationState
+      }, useNewIcons, useTransparent), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:TextArea;"],
+      ...props,
+      ...dangerouslySetAntdProps
+    })
+  });
+});
+const Password = /*#__PURE__*/forwardRef(function Password(_ref3, ref) {
+  let {
+    validationState,
+    autoComplete = 'off',
+    dangerouslySetAntdProps,
+    dangerouslyAppendEmotionCSS,
+    ...props
+  } = _ref3;
+  const {
+    classNamePrefix,
+    theme
+  } = useDesignSystemTheme();
+  const {
+    USE_NEW_ICONS: useNewIcons,
+    USE_TRANSPARENT_INPUT: useTransparent
+  } = useDesignSystemFlags();
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(Input$1.Password, {
+      visibilityToggle: false,
+      ref: ref,
+      autoComplete: autoComplete,
+      css: [getInputEmotionStyles(classNamePrefix, theme, {
+        validationState
+      }, useNewIcons, useTransparent), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Password;"],
+      ...props,
+      ...dangerouslySetAntdProps
+    })
+  });
+});
+const DuboisInput = /*#__PURE__*/forwardRef(function Input(_ref4, ref) {
+  let {
+    validationState,
+    autoComplete = 'off',
+    dangerouslySetAntdProps,
+    dangerouslyAppendEmotionCSS,
+    ...props
+  } = _ref4;
+  const {
+    classNamePrefix,
+    theme
+  } = useDesignSystemTheme();
+  const {
+    USE_NEW_ICONS: useNewIcons,
+    USE_TRANSPARENT_INPUT: useTransparent
+  } = useDesignSystemFlags();
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(Input$1, {
+      autoComplete: autoComplete,
+      ref: ref,
+      css: [getInputEmotionStyles(classNamePrefix, theme, {
+        validationState
+      }, useNewIcons, useTransparent), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:DuboisInput;"],
+      ...props,
+      ...dangerouslySetAntdProps
+    })
+  });
+});
+const Group = _ref5 => {
+  let {
+    dangerouslySetAntdProps,
+    dangerouslyAppendEmotionCSS,
+    compact = true,
+    ...props
+  } = _ref5;
+  const {
+    classNamePrefix
+  } = useDesignSystemTheme();
+  return jsx(DesignSystemAntDConfigProvider, {
+    children: jsx(Input$1.Group, {
+      css: [getInputGroupStyling(classNamePrefix), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Group;"],
+      compact: compact,
+      ...props,
+      ...dangerouslySetAntdProps
+    })
+  });
+};
+
+// Properly creates the namespace and dot-notation components with correct types.
+const InputNamespace = /* #__PURE__ */Object.assign(DuboisInput, {
+  TextArea,
+  Password,
+  Group
+});
+const Input = InputNamespace;
+
+// TODO: I'm doing this to support storybook's docgen;
+// We should remove this once we have a better storybook integration,
+// since these will be exposed in the library's exports.
+const __INTERNAL_DO_NOT_USE__TextArea = TextArea;
+const __INTERNAL_DO_NOT_USE__Password = Password;
+const __INTERNAL_DO_NOT_USE_DEDUPE__Group = Group;
+
+const rotate = keyframes({
+  '0%': {
+    transform: 'rotate(0deg) translate3d(0, 0, 0)'
+  },
+  '100%': {
+    transform: 'rotate(360deg) translate3d(0, 0, 0)'
+  }
+});
+const cssSpinner = function (theme) {
+  let frameRate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 60;
+  let delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  const styles = {
+    animation: "".concat(rotate, " 1s steps(").concat(frameRate, ", end) infinite"),
+    color: theme.colors.textSecondary,
+    animationDelay: "".concat(delay, "s")
+  };
+  return /*#__PURE__*/css(importantify(styles), process.env.NODE_ENV === "production" ? "" : ";label:cssSpinner;");
+};
+const Spinner = _ref => {
+  let {
+    frameRate,
+    size = 'default',
+    delay,
+    className: propClass,
+    ...props
+  } = _ref;
+  const {
+    classNamePrefix,
+    theme
+  } = useDesignSystemTheme();
+
+  // We use Antd classes to keep styling unchanged
+  // TODO(FEINF-1407): We want to move away from Antd classes and use Emotion for styling in the future
+  const sizeSuffix = size === 'small' ? '-sm' : size === 'large' ? '-lg' : '';
+  const sizeClass = sizeSuffix ? "".concat(classNamePrefix, "-spin").concat(sizeSuffix) : '';
+  const wrapperClass = "".concat(propClass || '', " ").concat(classNamePrefix, "-spin ").concat(sizeClass, " ").concat(classNamePrefix, "-spin-spinning ").concat(DU_BOIS_ENABLE_ANIMATION_CLASSNAME).trim();
+  const className = "".concat(classNamePrefix, "-spin-dot ").concat(DU_BOIS_ENABLE_ANIMATION_CLASSNAME).trim();
+  return (
+    // className has to follow {...props}, otherwise is `css` prop is passed down it will overwrite our className
+    jsx("div", {
+      ...props,
+      className: wrapperClass,
+      children: jsx(LoadingIcon, {
+        css: cssSpinner(theme, frameRate, delay),
+        className: className
+      })
+    })
+  );
+};
+
+export { ApplyDesignSystemContextOverrides as A, Button as B, ChevronDownIcon as C, DesignSystemAntDConfigProvider as D, SortUnsortedIcon as E, __INTERNAL_DO_NOT_USE__TextArea as F, __INTERNAL_DO_NOT_USE__Password as G, __INTERNAL_DO_NOT_USE_DEDUPE__Group as H, Icon as I, LoadingIcon as L, NewWindowIcon as N, RestoreAntDDefaultClsPrefix as R, Spinner as S, Typography as T, WithDesignSystemThemeHoc as W, XCircleFillIcon as X, __INTERNAL_DO_NOT_USE__Group as _, useDesignSystemFlags as a, CloseIcon as b, useDesignSystemContext as c, CheckIcon as d, Tooltip as e, getValidationStateColor as f, getAnimationCss as g, Input as h, importantify as i, Checkbox as j, Title as k, DU_BOIS_ENABLE_ANIMATION_CLASSNAME as l, getDefaultStyles as m, getPrimaryStyles as n, getDisabledStyles as o, lightColorList as p, getButtonEmotionStyles as q, getWrapperStyle as r, DesignSystemContext as s, DesignSystemProvider as t, useDesignSystemTheme as u, ApplyDesignSystemFlags as v, useAntDConfigProviderContext as w, SearchIcon as x, SortAscendingIcon as y, SortDescendingIcon as z };
+//# sourceMappingURL=Spinner-140f57ac.js.map