@databricks/design-system 1.12.0 → 1.12.1

package/dist/index.js

@@ -5,7 +5,7 @@ import { ThemeProvider, css, keyframes, ClassNames } from '@emotion/react';
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import { g as getTheme, a as getClassNamePrefix, b as getPrefixedClassNameFromTheme, u as useDesignSystemTheme, l as lightColorList } from './useDesignSystemTheme-6e6f5867.js';
 export { W as WithDesignSystemThemeHoc, u as useDesignSystemTheme } from './useDesignSystemTheme-6e6f5867.js';
-import { notification, ConfigProvider, Collapse, Alert as Alert$1, AutoComplete as AutoComplete$1, Breadcrumb as Breadcrumb$1, Button as Button$1, Checkbox as Checkbox$1, DatePicker, Typography as Typography$1, Dropdown as Dropdown$1, Tooltip as Tooltip$1, Form as Form$1, Input as Input$1, Radio as Radio$1, Select as Select$1, Col as Col$1, Row as Row$1, Space as Space$1, Layout as Layout$1, Pagination as Pagination$1, Table as Table$1, Menu as Menu$1, Modal as Modal$1, Popover as Popover$2, Skeleton as Skeleton$1, Switch as Switch$1, Tabs as Tabs$1, Tree as Tree$1 } from 'antd';
+import { notification, ConfigProvider, Collapse, Alert as Alert$1, AutoComplete as AutoComplete$1, Breadcrumb as Breadcrumb$1, Button as Button$1, Checkbox as Checkbox$1, DatePicker, Input as Input$1, Tooltip as Tooltip$1, Typography as Typography$1, Dropdown as Dropdown$1, Form as Form$1, Radio as Radio$1, Select as Select$1, Col as Col$1, Row as Row$1, Space as Space$1, Layout as Layout$1, Pagination as Pagination$1, Table as Table$1, Menu as Menu$1, Modal as Modal$1, Popover as Popover$2, Skeleton as Skeleton$1, Switch as Switch$1, Tabs as Tabs$1, Tree as Tree$1 } from 'antd';
 import classnames from 'classnames';
 import _isNil from 'lodash/isNil';
 import _endsWith from 'lodash/endsWith';
@@ -9708,6 +9708,56 @@ const DialogComboboxButtonContainer = _ref => {
   });
 };
 
+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: `${rotate} 1s steps(${frameRate}, end) infinite`,
+    color: theme.colors.textSecondary,
+    animationDelay: `${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 ? `${classNamePrefix}-spin${sizeSuffix}` : '';
+  const wrapperClass = `${propClass || ''} ${classNamePrefix}-spin ${sizeClass} ${classNamePrefix}-spin-spinning ${DU_BOIS_ENABLE_ANIMATION_CLASSNAME}`.trim();
+  const className = `${classNamePrefix}-spin-dot ${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
+      })
+    })
+  );
+};
+
 const DialogComboboxLoadingSpinner = props => {
   const {
     theme
@@ -9930,6 +9980,223 @@ const DialogComboboxOptionListCheckboxItem = /*#__PURE__*/forwardRef((_ref, ref)
   });
 });
 
+const getInputEmotionStyles = (clsPrefix, theme, _ref, useNewIcons, useTransparent) => {
+  let {
+    validationState
+  } = _ref;
+  const inputClass = `.${clsPrefix}-input`;
+  const affixClass = `.${clsPrefix}-input-affix-wrapper`;
+  const affixClassFocused = `.${clsPrefix}-input-affix-wrapper-focused`;
+  const clearIcon = `.${clsPrefix}-input-clear-icon`;
+  const prefixIcon = `.${clsPrefix}-input-prefix`;
+  const suffixIcon = `.${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
+      }
+    },
+    [`&${inputClass}, ${inputClass}`]: {
+      ...(useTransparent && {
+        backgroundColor: 'transparent'
+      })
+    },
+    [`&${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.${clsPrefix}-input`]: {
+        borderRadius: 0
+      }
+    },
+    [`&${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 = `.${clsPrefix}-input`;
+  const buttonClass = `.${clsPrefix}-btn`;
+  return /*#__PURE__*/css({
+    [`& > ${inputClass}`]: {
+      '&:disabled': {
+        border: 'none'
+      }
+    },
+    [`& > ${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$2 = _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: Group$2
+});
+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$2;
+
 const filterChildren = (children, searchValue) => {
   var _React$Children$map;
   return (_React$Children$map = React__default.Children.map(children, child => {
@@ -10203,23 +10470,16 @@ var _ref2$2 = process.env.NODE_ENV === "production" ? {
 const DialogComboboxOptionList = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
   let {
     children,
-    onChange,
     loading,
     withProgressiveLoading,
     ...restProps
   } = _ref;
   const {
-    isInsideDialogCombobox,
-    value
+    isInsideDialogCombobox
   } = useDialogComboboxContext();
   if (!isInsideDialogCombobox) {
     throw new Error('`DialogComboboxOptionList` must be used within `DialogCombobox`');
   }
-  useEffect(() => {
-    if (onChange) {
-      onChange(value);
-    }
-  }, [value, onChange]);
   return jsx("div", {
     ref: forwardedRef,
     "aria-busy": loading,
@@ -10296,6 +10556,61 @@ const DialogComboboxSeparator = props => {
   });
 };
 
+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 getTriggerWrapperStyles = removable => /*#__PURE__*/css(importantify({
   display: 'inline-flex',
   alignItems: 'center',
@@ -10354,7 +10669,7 @@ const DialogComboboxTrigger = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
     onRemove,
     children,
     maxWidth = 9999,
-    withCountBadge,
+    withCountBadge = true,
     showBadgeAfterValueCount = 3,
     allowClear = true,
     controlled,
@@ -10436,10 +10751,10 @@ const DialogComboboxTrigger = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
           fontWeight: theme.typography.typographyBoldFontWeight
         }, process.env.NODE_ENV === "production" ? "" : ";label:triggerContent;"),
         children: label
-      }), withCountBadge || (value === null || value === void 0 ? void 0 : value.length) > showBadgeAfterValueCount ? jsx(DialogComboboxCountBadge, {
+      }), withCountBadge && (value === null || value === void 0 ? void 0 : value.length) > showBadgeAfterValueCount ? jsx(DialogComboboxCountBadge, {
         role: "status",
         "aria-label": "Dialog combobox options selected count"
-      }) : displayedValues]
+      }) : withCountBadge ? displayedValues : null]
     }), allowClear && value !== null && value !== void 0 && value.length ? jsx(XCircleFillIcon, {
       onClick: handleClear,
       css: /*#__PURE__*/css({
@@ -10476,6 +10791,7 @@ const DialogComboboxTrigger = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
 const Spacer = _ref => {
   let {
     size = 'md',
+    shrinks,
     ...props
   } = _ref;
   const {
@@ -10489,7 +10805,10 @@ const Spacer = _ref => {
   };
   return jsx("div", {
     css: /*#__PURE__*/css({
-      height: spacingValues[size]
+      height: spacingValues[size],
+      ...(shrinks === false ? {
+        flexShrink: 0
+      } : undefined)
     }, process.env.NODE_ENV === "production" ? "" : ";label:Spacer;"),
     ...props
   });
@@ -11048,71 +11367,16 @@ const Dropdown = _ref => {
   } = _ref;
   const {
     theme
-  } = useDesignSystemTheme();
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(Dropdown$1, {
-      mouseLeaveDelay: 0.25,
-      ...props,
-      overlayStyle: {
-        zIndex: theme.options.zIndexBase + 50,
-        ...props.overlayStyle
-      },
-      ...dangerouslySetAntdProps
-    })
-  });
-};
-
-const Tooltip = _ref => {
-  let {
-    children,
-    title,
-    placement = 'top',
-    dataTestId,
-    dangerouslySetAntdProps,
-    ...props
-  } = _ref;
-  const {
-    theme
-  } = useDesignSystemTheme();
-  if (!title) {
-    return jsx(React__default.Fragment, {
-      children: children
-    });
-  }
-  const {
-    overlayInnerStyle,
-    overlayStyle,
-    ...delegatedDangerouslySetAntdProps
-  } = dangerouslySetAntdProps || {};
+  } = useDesignSystemTheme();
   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
-      },
+    children: jsx(Dropdown$1, {
+      mouseLeaveDelay: 0.25,
+      ...props,
       overlayStyle: {
-        zIndex: theme.options.zIndexBase + 70,
-        ...overlayStyle
+        zIndex: theme.options.zIndexBase + 50,
+        ...props.overlayStyle
       },
-      css: /*#__PURE__*/css({
-        ...getAnimationCss(theme.options.enableAnimation)
-      }, process.env.NODE_ENV === "production" ? "" : ";label:Tooltip;"),
-      ...delegatedDangerouslySetAntdProps,
-      ...props,
-      children: children
+      ...dangerouslySetAntdProps
     })
   });
 };
@@ -11349,7 +11613,7 @@ const RadioItem = /*#__PURE__*/forwardRef(function RadioItem(_ref11, ref) {
 });
 
 // UNWRAPPED RADIX-UI-COMPONENTS
-const Group$2 = DropdownMenu$1.Group;
+const Group$1 = DropdownMenu$1.Group;
 const RadioGroup = DropdownMenu$1.RadioGroup;
 const Sub = DropdownMenu$1.Sub;
 
@@ -11552,7 +11816,7 @@ var DropdownMenu = /*#__PURE__*/Object.freeze({
   ItemIndicator: ItemIndicator,
   Arrow: Arrow$1,
   RadioItem: RadioItem,
-  Group: Group$2,
+  Group: Group$1,
   RadioGroup: RadioGroup,
   Sub: Sub,
   HintColumn: HintColumn,
@@ -11764,313 +12028,96 @@ const getMessageStyles = (clsPrefix, theme) => {
 };
 const VALIDATION_STATE_ICONS = {
   error: DangerIcon,
-  success: CheckCircleIcon,
-  warning: WarningIcon
-};
-function FormMessage(_ref) {
-  let {
-    message,
-    type = 'error',
-    className = '',
-    css
-  } = _ref;
-  const {
-    classNamePrefix,
-    theme
-  } = useDesignSystemTheme();
-  const stateClass = `${classNamePrefix}-form-${type}-message`;
-  const StateIcon = VALIDATION_STATE_ICONS[type];
-  const wrapperClass = `${classNamePrefix}-form-message ${className} ${stateClass}`.trim();
-  return jsxs("div", {
-    className: wrapperClass,
-    css: [getMessageStyles(classNamePrefix, theme), css, process.env.NODE_ENV === "production" ? "" : ";label:FormMessage;"],
-    children: [jsx(StateIcon, {}), "\xA0", message]
-  });
-}
-
-const getHintStyles = (classNamePrefix, theme) => {
-  const styles = {
-    display: 'block',
-    color: theme.colors.textSecondary,
-    lineHeight: theme.typography.lineHeightSm,
-    fontSize: theme.typography.fontSizeSm,
-    [`&& + .${classNamePrefix}-input, && + .${classNamePrefix}-select, && + .${classNamePrefix}-checkbox-group, && + .${classNamePrefix}-radio-group`]: {
-      marginTop: theme.spacing.sm
-    }
-  };
-  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getHintStyles;");
-};
-const Hint = props => {
-  const {
-    classNamePrefix,
-    theme
-  } = useDesignSystemTheme();
-  const {
-    className,
-    ...restProps
-  } = props;
-  return jsx("span", {
-    className: classnames(`${classNamePrefix}-hint`, className),
-    css: getHintStyles(classNamePrefix, theme),
-    ...restProps
-  });
-};
-
-const getLabelStyles = (classNamePrefix, theme, _ref) => {
-  let {
-    inline
-  } = _ref;
-  const styles = {
-    '&&': {
-      color: theme.colors.textPrimary,
-      fontWeight: theme.typography.typographyBoldFontWeight,
-      display: inline ? 'inline' : 'block',
-      lineHeight: theme.typography.lineHeightBase
-    },
-    [`&& + .${classNamePrefix}-input, && + .${classNamePrefix}-select, && + .${classNamePrefix}-checkbox-group, && + .${classNamePrefix}-radio-group`]: {
-      marginTop: theme.spacing.sm
-    }
-  };
-  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getLabelStyles;");
-};
-const Label = props => {
-  const {
-    children,
-    className,
-    inline,
-    ...restProps
-  } = props;
-  const {
-    classNamePrefix,
-    theme
-  } = useDesignSystemTheme();
-  return jsx("label", {
-    css: getLabelStyles(classNamePrefix, theme, {
-      inline
-    }),
-    className: classnames(`${classNamePrefix}-label`, className),
-    ...restProps,
-    children: children
-  });
-};
-
-const getInputEmotionStyles = (clsPrefix, theme, _ref, useNewIcons, useTransparent) => {
-  let {
-    validationState
-  } = _ref;
-  const inputClass = `.${clsPrefix}-input`;
-  const affixClass = `.${clsPrefix}-input-affix-wrapper`;
-  const affixClassFocused = `.${clsPrefix}-input-affix-wrapper-focused`;
-  const clearIcon = `.${clsPrefix}-input-clear-icon`;
-  const prefixIcon = `.${clsPrefix}-input-prefix`;
-  const suffixIcon = `.${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
-      }
-    },
-    [`&${inputClass}, ${inputClass}`]: {
-      ...(useTransparent && {
-        backgroundColor: 'transparent'
-      })
-    },
-    [`&${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.${clsPrefix}-input`]: {
-        borderRadius: 0
-      }
-    },
-    [`&${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 = `.${clsPrefix}-input`;
-  const buttonClass = `.${clsPrefix}-btn`;
-  return /*#__PURE__*/css({
-    [`& > ${inputClass}`]: {
-      '&:disabled': {
-        border: 'none'
-      }
-    },
-    [`& > ${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;
+  success: CheckCircleIcon,
+  warning: WarningIcon
+};
+function FormMessage(_ref) {
+  let {
+    message,
+    type = 'error',
+    className = '',
+    css
+  } = _ref;
   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 stateClass = `${classNamePrefix}-form-${type}-message`;
+  const StateIcon = VALIDATION_STATE_ICONS[type];
+  const wrapperClass = `${classNamePrefix}-form-message ${className} ${stateClass}`.trim();
+  return jsxs("div", {
+    className: wrapperClass,
+    css: [getMessageStyles(classNamePrefix, theme), css, process.env.NODE_ENV === "production" ? "" : ";label:FormMessage;"],
+    children: [jsx(StateIcon, {}), "\xA0", message]
   });
-});
-const DuboisInput = /*#__PURE__*/forwardRef(function Input(_ref4, ref) {
-  let {
-    validationState,
-    autoComplete = 'off',
-    dangerouslySetAntdProps,
-    dangerouslyAppendEmotionCSS,
-    ...props
-  } = _ref4;
+}
+
+const getHintStyles = (classNamePrefix, theme) => {
+  const styles = {
+    display: 'block',
+    color: theme.colors.textSecondary,
+    lineHeight: theme.typography.lineHeightSm,
+    fontSize: theme.typography.fontSizeSm,
+    [`&& + .${classNamePrefix}-input, && + .${classNamePrefix}-select, && + .${classNamePrefix}-checkbox-group, && + .${classNamePrefix}-radio-group`]: {
+      marginTop: theme.spacing.sm
+    }
+  };
+  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getHintStyles;");
+};
+const Hint = props => {
   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
-    })
+    className,
+    ...restProps
+  } = props;
+  return jsx("span", {
+    className: classnames(`${classNamePrefix}-hint`, className),
+    css: getHintStyles(classNamePrefix, theme),
+    ...restProps
   });
-});
-const Group$1 = _ref5 => {
+};
+
+const getLabelStyles = (classNamePrefix, theme, _ref) => {
   let {
-    dangerouslySetAntdProps,
-    dangerouslyAppendEmotionCSS,
-    compact = true,
-    ...props
-  } = _ref5;
+    inline
+  } = _ref;
+  const styles = {
+    '&&': {
+      color: theme.colors.textPrimary,
+      fontWeight: theme.typography.typographyBoldFontWeight,
+      display: inline ? 'inline' : 'block',
+      lineHeight: theme.typography.lineHeightBase
+    },
+    [`&& + .${classNamePrefix}-input, && + .${classNamePrefix}-select, && + .${classNamePrefix}-checkbox-group, && + .${classNamePrefix}-radio-group`]: {
+      marginTop: theme.spacing.sm
+    }
+  };
+  return /*#__PURE__*/css(styles, process.env.NODE_ENV === "production" ? "" : ";label:getLabelStyles;");
+};
+const Label = props => {
   const {
-    classNamePrefix
+    children,
+    className,
+    inline,
+    ...restProps
+  } = props;
+  const {
+    classNamePrefix,
+    theme
   } = useDesignSystemTheme();
-  return jsx(DesignSystemAntDConfigProvider, {
-    children: jsx(Input$1.Group, {
-      css: [getInputGroupStyling(classNamePrefix), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Group;"],
-      compact: compact,
-      ...props,
-      ...dangerouslySetAntdProps
-    })
+  return jsx("label", {
+    css: getLabelStyles(classNamePrefix, theme, {
+      inline
+    }),
+    className: classnames(`${classNamePrefix}-label`, className),
+    ...restProps,
+    children: children
   });
 };
 
-// Properly creates the namespace and dot-notation components with correct types.
-const InputNamespace = /* #__PURE__ */Object.assign(DuboisInput, {
-  TextArea,
-  Password,
-  Group: Group$1
-});
-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$1;
-
 const getRadioInputStyles = _ref => {
   let {
     clsPrefix,
@@ -13448,56 +13495,6 @@ const CursorPagination = function CursorPagination(_ref2) {
   });
 };
 
-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: `${rotate} 1s steps(${frameRate}, end) infinite`,
-    color: theme.colors.textSecondary,
-    animationDelay: `${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 ? `${classNamePrefix}-spin${sizeSuffix}` : '';
-  const wrapperClass = `${propClass || ''} ${classNamePrefix}-spin ${sizeClass} ${classNamePrefix}-spin-spinning ${DU_BOIS_ENABLE_ANIMATION_CLASSNAME}`.trim();
-  const className = `${classNamePrefix}-spin-dot ${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
-      })
-    })
-  );
-};
-
 const getTableEmotionStyles = (classNamePrefix, theme, scrollableInFlexibleContainer) => {
   const styles = [/*#__PURE__*/css({
     [`.${classNamePrefix}-table-pagination`]: {
@@ -15306,7 +15303,7 @@ const tableStyles = {
   },
   table: /*#__PURE__*/css({
     '.table-isScrollable &': {
-      overflow: 'scroll',
+      overflow: 'auto',
       // Adapted from: https://css-tricks.com/scroll-shadows-with-javascript/
       background: `
         // Top and bottom shadow masks
@@ -15366,19 +15363,11 @@ const tableStyles = {
     toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   },
   cell: process.env.NODE_ENV === "production" ? {
-    name: "11nbh8q",
-    styles: "display:inline-grid;position:relative;align-items:var(--table-row-vertical-alignment, flex-start);flex:1;line-height:initial;box-sizing:border-box;padding-left:var(--table-spacing-sm);padding-right:var(--table-spacing-sm);word-break:break-word;overflow:hidden"
-  } : {
-    name: "pezdmp-cell",
-    styles: "display:inline-grid;position:relative;align-items:var(--table-row-vertical-alignment, flex-start);flex:1;line-height:initial;box-sizing:border-box;padding-left:var(--table-spacing-sm);padding-right:var(--table-spacing-sm);word-break:break-word;overflow:hidden;label:cell;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  },
-  rowMenuContainer: process.env.NODE_ENV === "production" ? {
-    name: "1o9y8zx",
-    styles: "padding-left:var(--table-spacing-xs);padding-right:var(--table-spacing-xs)"
+    name: "10zsmwj",
+    styles: "display:inline-grid;position:relative;flex:1;line-height:initial;box-sizing:border-box;padding-left:var(--table-spacing-sm);padding-right:var(--table-spacing-sm);word-break:break-word;overflow:hidden"
   } : {
-    name: "1gopnk4-rowMenuContainer",
-    styles: "padding-left:var(--table-spacing-xs);padding-right:var(--table-spacing-xs);label:rowMenuContainer;",
+    name: "1myl3nz-cell",
+    styles: "display:inline-grid;position:relative;flex:1;line-height:initial;box-sizing:border-box;padding-left:var(--table-spacing-sm);padding-right:var(--table-spacing-sm);word-break:break-word;overflow:hidden;label:cell;",
     toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   },
   header: process.env.NODE_ENV === "production" ? {
@@ -15390,11 +15379,11 @@ const tableStyles = {
     toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   },
   headerButtonTarget: process.env.NODE_ENV === "production" ? {
-    name: "dpqgee",
-    styles: "align-items:flex-end;display:flex;overflow:hidden;width:100%;&:focus{.table-header-text{color:var(--table-header-focus-color);}.table-header-icon-container{color:var(--table-header-focus-color);display:inline;}}&:active{.table-header-icon-container, .table-header-text{color:var(--table-header-active-color);}}"
+    name: "sezlox",
+    styles: "align-items:flex-end;display:flex;overflow:hidden;width:100%;justify-content:inherit;&:focus{.table-header-text{color:var(--table-header-focus-color);}.table-header-icon-container{color:var(--table-header-focus-color);display:inline;}}&:active{.table-header-icon-container, .table-header-text{color:var(--table-header-active-color);}}"
   } : {
-    name: "s60l4r-headerButtonTarget",
-    styles: "align-items:flex-end;display:flex;overflow:hidden;width:100%;&:focus{.table-header-text{color:var(--table-header-focus-color);}.table-header-icon-container{color:var(--table-header-focus-color);display:inline;}}&:active{.table-header-icon-container, .table-header-text{color:var(--table-header-active-color);}};label:headerButtonTarget;",
+    name: "1iv4trp-headerButtonTarget",
+    styles: "align-items:flex-end;display:flex;overflow:hidden;width:100%;justify-content:inherit;&:focus{.table-header-text{color:var(--table-header-focus-color);}.table-header-icon-container{color:var(--table-header-focus-color);display:inline;}}&:active{.table-header-icon-container, .table-header-text{color:var(--table-header-active-color);}};label:headerButtonTarget;",
     toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   },
   sortHeaderIcon: process.env.NODE_ENV === "production" ? {
@@ -15475,6 +15464,7 @@ const Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
         ['--table-background-color']: theme.colors.backgroundPrimary,
         ['--table-scroll-shadow-color']: theme.isDarkMode ? 'rgba(255, 255, 255, 0.07)' : 'rgba(31, 39, 45, 0.15)',
         ['--table-header-active-color']: theme.colors.actionDefaultTextPress,
+        ['colorScheme']: theme.isDarkMode ? 'dark' : undefined,
         // This hex is pulled directly from the old table as a temporary style-matching measure.
         ['--table-header-background-color']: flags.USE_UPDATED_TABLE_STYLES || theme.isDarkMode ? theme.colors.backgroundPrimary : '#F2F5F7',
         ['--table-header-focus-color']: theme.colors.actionDefaultTextHover,
@@ -15541,8 +15531,7 @@ const TableRow = /*#__PURE__*/forwardRef(function TableRow(_ref2, ref) {
     children,
     className,
     style,
-    isHeader = false,
-    verticalAlignment = 'top'
+    isHeader = false
   } = _ref2;
   const {
     size
@@ -15571,8 +15560,7 @@ const TableRow = /*#__PURE__*/forwardRef(function TableRow(_ref2, ref) {
       role: "row",
       style: {
         ...style,
-        ['--table-row-vertical-padding']: `${rowPadding}px`,
-        ['--table-row-vertical-alignment']: verticalAlignment === 'top' ? 'flex-start' : 'center'
+        ['--table-row-vertical-padding']: `${rowPadding}px`
       },
       className: className,
       children: children
@@ -15598,7 +15586,7 @@ const TableCell = /*#__PURE__*/forwardRef(function (_ref3, ref) {
     css: [tableStyles.cell, process.env.NODE_ENV === "production" ? "" : ";label:TableCell;"],
     role: "cell",
     style: {
-      justifyContent: alignToFlexValue[align],
+      textAlign: align,
       ...style
     },
     ref: ref,
@@ -15670,7 +15658,8 @@ const TableHeader = /*#__PURE__*/forwardRef(function TableHeader(_ref4, ref) {
     "aria-sort": sortable && ariaSort || undefined,
     className: className,
     style: {
-      justifyContent: alignToFlexValue[align],
+      justifyContent: align,
+      textAlign: align,
       ...style
     },
     children: [sortable ? jsxs("div", {
@@ -15750,47 +15739,36 @@ const TableRowSelectCell = /*#__PURE__*/forwardRef(function TableRowSelectCell(_
     })
   });
 });
-const TableRowMenuContainer = /*#__PURE__*/forwardRef(function TableRowMenuContainer(_ref7, ref) {
-  let {
-    children,
-    style,
-    className
-  } = _ref7;
-  return jsx("div", {
-    ref: ref,
-    css: tableStyles.rowMenuContainer,
-    style: style,
-    className: className,
-    children: children
-  });
-});
 const TableSkeletonStyles = {
   container: process.env.NODE_ENV === "production" ? {
-    name: "uxqssl",
-    styles: "display:flex;flex-direction:column;align-items:flex-start;margin:6px 0;gap:12px"
+    name: "6kz1wu",
+    styles: "display:flex;flex-direction:column;align-items:flex-start"
   } : {
-    name: "1zl9za-container",
-    styles: "display:flex;flex-direction:column;align-items:flex-start;margin:6px 0;gap:12px;label:container;",
+    name: "1we0er9-container",
+    styles: "display:flex;flex-direction:column;align-items:flex-start;label:container;",
     toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   },
   cell: process.env.NODE_ENV === "production" ? {
-    name: "18wj7jq",
-    styles: "width:100%;height:8px;border-radius:4px;background:var(--table-skeleton-color)"
+    name: "1t820zr",
+    styles: "width:100%;height:8px;border-radius:4px;background:var(--table-skeleton-color);margin-top:var(--table-skeleton-row-vertical-margin);margin-bottom:var(--table-skeleton-row-vertical-margin)"
   } : {
-    name: "2md9en-cell",
-    styles: "width:100%;height:8px;border-radius:4px;background:var(--table-skeleton-color);label:cell;",
+    name: "1m8dl5b-cell",
+    styles: "width:100%;height:8px;border-radius:4px;background:var(--table-skeleton-color);margin-top:var(--table-skeleton-row-vertical-margin);margin-bottom:var(--table-skeleton-row-vertical-margin);label:cell;",
     toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   }
 };
-const TableSkeleton = _ref8 => {
+const TableSkeleton = _ref7 => {
   let {
     lines = 1,
     seed = '',
     style
-  } = _ref8;
+  } = _ref7;
   const {
     theme
   } = useDesignSystemTheme();
+  const {
+    size
+  } = useContext(TableContext);
 
   // This is a very simple PRNG that is seeded (so that the output is deterministic).
   // We need this in order to produce a random ragged edge for the table skeleton.
@@ -15824,7 +15802,8 @@ const TableSkeleton = _ref8 => {
     style: {
       ...style,
       // TODO: Pull this from the themes; it's not currently available.
-      ['--table-skeleton-color']: theme.isDarkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(31, 38, 45, 0.1)'
+      ['--table-skeleton-color']: theme.isDarkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(31, 38, 45, 0.1)',
+      ['--table-skeleton-row-vertical-margin']: size === 'small' ? '4px' : '6px'
     },
     children: [...Array(lines)].map((_, idx) => jsx("div", {
       css: [TableSkeletonStyles.cell, {
@@ -15833,11 +15812,87 @@ const TableSkeleton = _ref8 => {
     }, idx))
   });
 };
-const alignToFlexValue = {
-  left: 'start',
-  center: 'center',
-  right: 'end'
+const TableRowActionStyles = {
+  container: process.env.NODE_ENV === "production" ? {
+    name: "137q2cp",
+    styles: "width:32px;padding-top:0;padding-bottom:0;display:flex;align-items:center;justify-content:center"
+  } : {
+    name: "17o2n0c-container",
+    styles: "width:32px;padding-top:0;padding-bottom:0;display:flex;align-items:center;justify-content:center;label:container;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  }
+};
+const TableRowAction = /*#__PURE__*/forwardRef(function TableRowAction(_ref8, ref) {
+  let {
+    children,
+    style,
+    className
+  } = _ref8;
+  return jsx("div", {
+    ref: ref,
+    css: TableRowActionStyles.container,
+    style: style,
+    className: className,
+    children: children
+  });
+});
+
+/** @deprecated Use `TableRowAction` instead */
+const TableRowMenuContainer = TableRowAction;
+const tableFilterLayoutStyles = {
+  layout: process.env.NODE_ENV === "production" ? {
+    name: "1yb0qmd",
+    styles: "display:flex;flex-direction:row;justify-content:space-between;margin-bottom:var(--table-filter-layout-group-margin)"
+  } : {
+    name: "bmua0k-layout",
+    styles: "display:flex;flex-direction:row;justify-content:space-between;margin-bottom:var(--table-filter-layout-group-margin);label:layout;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  },
+  filters: process.env.NODE_ENV === "production" ? {
+    name: "2pdmyz",
+    styles: "display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;gap:var(--table-filter-layout-item-gap);flex:1"
+  } : {
+    name: "i28ows-filters",
+    styles: "display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;gap:var(--table-filter-layout-item-gap);flex:1;label:filters;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  },
+  filterActions: process.env.NODE_ENV === "production" ? {
+    name: "1ol8kzq",
+    styles: "display:flex;gap:var(--table-filter-layout-item-gap);margin-left:var(--table-filter-layout-group-margin)"
+  } : {
+    name: "bcekwq-filterActions",
+    styles: "display:flex;gap:var(--table-filter-layout-item-gap);margin-left:var(--table-filter-layout-group-margin);label:filterActions;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  }
 };
+const TableFilterLayout = /*#__PURE__*/forwardRef(function TableFilterLayout(_ref9, ref) {
+  let {
+    children,
+    style,
+    className,
+    actions
+  } = _ref9;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  return jsxs("div", {
+    ref: ref,
+    style: {
+      ['--table-filter-layout-item-gap']: `${theme.spacing.sm}px`,
+      ['--table-filter-layout-group-margin']: `${theme.spacing.md}px`,
+      ...style
+    },
+    css: tableFilterLayoutStyles.layout,
+    className: className,
+    children: [jsx("div", {
+      css: tableFilterLayoutStyles.filters,
+      children: children
+    }), actions && jsx("div", {
+      css: tableFilterLayoutStyles.filterActions,
+      children: actions
+    })]
+  });
+});
 
 const getTabEmotionStyles = (clsPrefix, theme) => {
   const classTab = `.${clsPrefix}-tabs-tab`;
@@ -16193,6 +16248,7 @@ const getStyles = theme => {
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
+    whiteSpace: 'nowrap',
     border: `1px solid ${theme.colors.actionDefaultBorderDefault}`,
     borderRadius: theme.general.borderRadiusBase,
     backgroundColor: 'transparent',
@@ -16244,10 +16300,17 @@ const ToggleButton = /*#__PURE__*/forwardRef((_ref, ref) => {
       setIsPressed(pressed);
     },
     ref: ref,
-    children: [isPressed && jsx(CheckIcon, {
+    children: [isPressed ? jsx(CheckIcon, {
       css: /*#__PURE__*/css({
         marginRight: theme.spacing.xs
       }, process.env.NODE_ENV === "production" ? "" : ";label:ToggleButton;")
+    }) : jsx(Checkbox, {
+      disabled: props.disabled,
+      style: {
+        height: theme.typography.lineHeightBase,
+        width: theme.typography.lineHeightSm,
+        marginRight: theme.spacing.xs
+      }
     }), children]
   });
 });
@@ -16535,5 +16598,5 @@ const Tree = /*#__PURE__*/forwardRef(function Tree(_ref, ref) {
   });
 });
 
-export { Accordion, AccordionPanel, Alert, AlignCenterIcon, AlignLeftIcon, AlignRightIcon, AppIcon, ApplyDesignSystemContextOverrides, ApplyDesignSystemFlags, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowsUpDownIcon, AutoComplete, BarChartIcon, BeakerIcon, BinaryIcon, BoldIcon, BookIcon, BookmarkFillIcon, BookmarkIcon, BracketsCurlyIcon, BracketsSquareIcon, BracketsXIcon, Breadcrumb, BriefcaseFillIcon, BriefcaseIcon, Button, CalendarEventIcon, CalendarIcon, CaretDownSquareIcon, CaretUpSquareIcon, CatalogIcon, ChartLineIcon, CheckCircleBadgeIcon, CheckCircleFillIcon, CheckCircleIcon, CheckIcon, CheckLineIcon, Checkbox, ChecklistIcon, ChevronDoubleDownIcon, ChevronDoubleLeftIcon, ChevronDoubleRightIcon, ChevronDoubleUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDownloadIcon, CloudIcon, CloudKeyIcon, CloudModelIcon, CloudOffIcon, CloudUploadIcon, CodeIcon, Col, ColorFillIcon, ConnectIcon, Content, CopyIcon, CursorIcon, CursorPagination, DIcon, DU_BOIS_ENABLE_ANIMATION_CLASSNAME, DagIcon, DangerFillIcon, DangerIcon, DangerModal, DashIcon, DashboardIcon, DataIcon, DatabaseIcon, DecimalIcon, DesignSystemAntDConfigProvider, DesignSystemContext, DesignSystemProvider, DialogCombobox, DialogComboboxButtonContainer, DialogComboboxContent, DialogComboboxCountBadge, DialogComboboxLoadingSpinner, DialogComboboxOptionControlledList, DialogComboboxOptionList, DialogComboboxOptionListCheckboxItem, DialogComboboxOptionListSearch, DialogComboboxOptionListSelectItem, DialogComboboxSectionHeader, DialogComboboxSeparator, DialogComboboxTrigger, DotsCircleIcon, DownloadIcon, DragIcon, Drawer, Dropdown, DropdownMenu, DuboisDatePicker, Empty, ExpandLessIcon, ExpandMoreIcon, FileCodeIcon, FileDocumentIcon, FileIcon, FileImageIcon, FileModelIcon, FilterIcon, FolderFillIcon, FolderIcon, FontIcon, ForkIcon, Form, FormDubois, FormUI, FullscreenExitIcon, FullscreenIcon, GearFillIcon, GearIcon, GiftIcon, GridDashIcon, GridIcon, H1Icon, H2Icon, H3Icon, Header$1 as Header, HistoryIcon, HomeIcon, Icon, ImageIcon, IndentDecreaseIcon, IndentIncreaseIcon, InfinityIcon, InfoFillIcon, InfoIcon, Input, ItalicIcon, KeyboardIcon, LayerIcon, Layout, LegacyDatePicker, LegacyTable, LettersIcon, LightningIcon, LinkIcon, LinkOffIcon, ListBorderIcon, ListIcon, LoadingIcon, LockFillIcon, LockIcon, LockUnlockedIcon, MIcon, Menu, MenuIcon, MinusBoxIcon, MinusCircleFillIcon, MinusCircleIcon, Modal, ModelsIcon, Nav, NavButton, NewWindowIcon, NoIcon, NotebookIcon, NotificationIcon, NotificationOffIcon, NotificationV2, NumbersIcon, OfficeIcon, OptGroup, Option, OverflowIcon, PageBottomIcon, PageFirstIcon, PageLastIcon, PageTopIcon, PageWrapper, Pagination, Panel, PanelBody, PanelHeader, PanelHeaderButtons, PanelHeaderTitle, PencilIcon, PinCancelIcon, PinFillIcon, PinIcon, PlayCircleFillIcon, PlayCircleIcon, PlayIcon, PlugIcon, PlusCircleFillIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, Popover, PopoverV2, QueryEditorIcon, QueryIcon, QuestionMarkFillIcon, QuestionMarkIcon, RHFControlledComponents, ROW_GUTTER_SIZE, Radio, ReaderModeIcon, RedoIcon, RefreshIcon, ReposIcon, RestoreAntDDefaultClsPrefix, Row, SaveIcon, SchoolIcon, SearchIcon, SecurityIcon, SegmentedControlButton, SegmentedControlGroup, Select, ShareIcon, Sidebar, SidebarAutoIcon, SidebarCollapseIcon, SidebarExpandIcon, SidebarIcon, Skeleton, SlidersIcon, SortAscendingIcon, SortDescendingIcon, SortUnsortedIcon, Space, Spacer, SpeechBubbleIcon, SpeechBubblePlusIcon, Spinner, SplitButton, StarFillIcon, StarIcon, StopCircleFillIcon, StopCircleIcon, StopIcon, StorefrontIcon, StreamIcon, Switch, SyncIcon, TabPane, Table, TableCell, TableHeader, TableIcon, TableRow, TableRowMenuContainer, TableRowSelectCell, TableSkeleton, Tabs, Tag, ToggleButton, Tooltip, TrashIcon, Tree, TreeIcon, Typography, UnderlineIcon, UndoIcon, UploadIcon, UsbIcon, UserBadgeIcon, UserCircleIcon, UserGroupIcon, UserIcon, VariableIcon, VisibleIcon, VisibleOffIcon, WarningFillIcon, WarningIcon, WorkspacesIcon, XCircleFillIcon, XCircleIcon, ZoomInIcon, ZoomOutIcon, __INTERNAL_DO_NOT_USE_DEDUPE__Group, __INTERNAL_DO_NOT_USE__FormItem, __INTERNAL_DO_NOT_USE__Group, __INTERNAL_DO_NOT_USE__HorizontalGroup, __INTERNAL_DO_NOT_USE__Password, __INTERNAL_DO_NOT_USE__TextArea, __INTERNAL_DO_NOT_USE__VerticalGroup, getAnimationCss, getButtonEmotionStyles, getPaginationEmotionStyles, getRadioStyles, getTabEmotionStyles, getWrapperStyle, useAntDConfigProviderContext, useDesignSystemFlags, useNotification, useThemedStyles, withNotifications };
+export { Accordion, AccordionPanel, Alert, AlignCenterIcon, AlignLeftIcon, AlignRightIcon, AppIcon, ApplyDesignSystemContextOverrides, ApplyDesignSystemFlags, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowsUpDownIcon, AutoComplete, BarChartIcon, BeakerIcon, BinaryIcon, BoldIcon, BookIcon, BookmarkFillIcon, BookmarkIcon, BracketsCurlyIcon, BracketsSquareIcon, BracketsXIcon, Breadcrumb, BriefcaseFillIcon, BriefcaseIcon, Button, CalendarEventIcon, CalendarIcon, CaretDownSquareIcon, CaretUpSquareIcon, CatalogIcon, ChartLineIcon, CheckCircleBadgeIcon, CheckCircleFillIcon, CheckCircleIcon, CheckIcon, CheckLineIcon, Checkbox, ChecklistIcon, ChevronDoubleDownIcon, ChevronDoubleLeftIcon, ChevronDoubleRightIcon, ChevronDoubleUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDownloadIcon, CloudIcon, CloudKeyIcon, CloudModelIcon, CloudOffIcon, CloudUploadIcon, CodeIcon, Col, ColorFillIcon, ConnectIcon, Content, CopyIcon, CursorIcon, CursorPagination, DIcon, DU_BOIS_ENABLE_ANIMATION_CLASSNAME, DagIcon, DangerFillIcon, DangerIcon, DangerModal, DashIcon, DashboardIcon, DataIcon, DatabaseIcon, DecimalIcon, DesignSystemAntDConfigProvider, DesignSystemContext, DesignSystemProvider, DialogCombobox, DialogComboboxButtonContainer, DialogComboboxContent, DialogComboboxCountBadge, DialogComboboxLoadingSpinner, DialogComboboxOptionControlledList, DialogComboboxOptionList, DialogComboboxOptionListCheckboxItem, DialogComboboxOptionListSearch, DialogComboboxOptionListSelectItem, DialogComboboxSectionHeader, DialogComboboxSeparator, DialogComboboxTrigger, DotsCircleIcon, DownloadIcon, DragIcon, Drawer, Dropdown, DropdownMenu, DuboisDatePicker, Empty, ExpandLessIcon, ExpandMoreIcon, FileCodeIcon, FileDocumentIcon, FileIcon, FileImageIcon, FileModelIcon, FilterIcon, FolderFillIcon, FolderIcon, FontIcon, ForkIcon, Form, FormDubois, FormUI, FullscreenExitIcon, FullscreenIcon, GearFillIcon, GearIcon, GiftIcon, GridDashIcon, GridIcon, H1Icon, H2Icon, H3Icon, Header$1 as Header, HistoryIcon, HomeIcon, Icon, ImageIcon, IndentDecreaseIcon, IndentIncreaseIcon, InfinityIcon, InfoFillIcon, InfoIcon, Input, ItalicIcon, KeyboardIcon, LayerIcon, Layout, LegacyDatePicker, LegacyTable, LettersIcon, LightningIcon, LinkIcon, LinkOffIcon, ListBorderIcon, ListIcon, LoadingIcon, LockFillIcon, LockIcon, LockUnlockedIcon, MIcon, Menu, MenuIcon, MinusBoxIcon, MinusCircleFillIcon, MinusCircleIcon, Modal, ModelsIcon, Nav, NavButton, NewWindowIcon, NoIcon, NotebookIcon, NotificationIcon, NotificationOffIcon, NotificationV2, NumbersIcon, OfficeIcon, OptGroup, Option, OverflowIcon, PageBottomIcon, PageFirstIcon, PageLastIcon, PageTopIcon, PageWrapper, Pagination, Panel, PanelBody, PanelHeader, PanelHeaderButtons, PanelHeaderTitle, PencilIcon, PinCancelIcon, PinFillIcon, PinIcon, PlayCircleFillIcon, PlayCircleIcon, PlayIcon, PlugIcon, PlusCircleFillIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, Popover, PopoverV2, QueryEditorIcon, QueryIcon, QuestionMarkFillIcon, QuestionMarkIcon, RHFControlledComponents, ROW_GUTTER_SIZE, Radio, ReaderModeIcon, RedoIcon, RefreshIcon, ReposIcon, RestoreAntDDefaultClsPrefix, Row, SaveIcon, SchoolIcon, SearchIcon, SecurityIcon, SegmentedControlButton, SegmentedControlGroup, Select, ShareIcon, Sidebar, SidebarAutoIcon, SidebarCollapseIcon, SidebarExpandIcon, SidebarIcon, Skeleton, SlidersIcon, SortAscendingIcon, SortDescendingIcon, SortUnsortedIcon, Space, Spacer, SpeechBubbleIcon, SpeechBubblePlusIcon, Spinner, SplitButton, StarFillIcon, StarIcon, StopCircleFillIcon, StopCircleIcon, StopIcon, StorefrontIcon, StreamIcon, Switch, SyncIcon, TabPane, Table, TableCell, TableFilterLayout, TableHeader, TableIcon, TableRow, TableRowAction, TableRowMenuContainer, TableRowSelectCell, TableSkeleton, Tabs, Tag, ToggleButton, Tooltip, TrashIcon, Tree, TreeIcon, Typography, UnderlineIcon, UndoIcon, UploadIcon, UsbIcon, UserBadgeIcon, UserCircleIcon, UserGroupIcon, UserIcon, VariableIcon, VisibleIcon, VisibleOffIcon, WarningFillIcon, WarningIcon, WorkspacesIcon, XCircleFillIcon, XCircleIcon, ZoomInIcon, ZoomOutIcon, __INTERNAL_DO_NOT_USE_DEDUPE__Group, __INTERNAL_DO_NOT_USE__FormItem, __INTERNAL_DO_NOT_USE__Group, __INTERNAL_DO_NOT_USE__HorizontalGroup, __INTERNAL_DO_NOT_USE__Password, __INTERNAL_DO_NOT_USE__TextArea, __INTERNAL_DO_NOT_USE__VerticalGroup, getAnimationCss, getButtonEmotionStyles, getPaginationEmotionStyles, getRadioStyles, getTabEmotionStyles, getWrapperStyle, useAntDConfigProviderContext, useDesignSystemFlags, useNotification, useThemedStyles, withNotifications };
 //# sourceMappingURL=index.js.map