@databricks/design-system 1.12.5 → 1.12.7

package/dist/index.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import React__default, { createContext, useMemo, useEffect, useContext, useRef, forwardRef, useState, useImperativeHandle, Children, useCallback } from 'react';
+import React__default, { createContext, useContext, useMemo, useEffect, useRef, forwardRef, useState, useImperativeHandle, Children, useCallback } from 'react';
 import AntDIcon from '@ant-design/icons';
 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-1e16bcf5.js';
-export { W as WithDesignSystemThemeHoc, u as useDesignSystemTheme } from './useDesignSystemTheme-1e16bcf5.js';
+import { g as getTheme, a as getClassNamePrefix, b as getPrefixedClassNameFromTheme, u as useDesignSystemTheme, l as lightColorList } from './useDesignSystemTheme-3d2c1acb.js';
+export { W as WithDesignSystemThemeHoc, u as useDesignSystemTheme } from './useDesignSystemTheme-3d2c1acb.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, 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';
@@ -25,12 +25,13 @@ import 'chroma-js';
 
 const DuboisContextDefaults = {
   enableAnimation: false,
-  isDarkMode: false,
-  theme: 'default',
   // Prefer to use useDesignSystemTheme.getPrefixedClassName instead
   getPrefixCls: suffix => suffix ? `du-bois-${suffix}` : 'du-bois',
   flags: {}
 };
+const DesignSystemThemeContext = /*#__PURE__*/createContext({
+  isDarkMode: false
+});
 const DesignSystemContext = /*#__PURE__*/createContext(DuboisContextDefaults);
 const DU_BOIS_ENABLE_ANIMATION_CLASSNAME = 'du-bois-enable-animation';
 function getAnimationCss(enableAnimation) {
@@ -54,39 +55,54 @@ function getAnimationCss(enableAnimation) {
 }
 const DesignSystemProviderPropsContext = /*#__PURE__*/React__default.createContext(null);
 const AntDConfigProviderPropsContext = /*#__PURE__*/React__default.createContext(null);
-const DesignSystemProvider = _ref => {
+
+/** Only to be accessed by SupportsDuBoisThemes, except for special exceptions like tests and storybook. Ask in #dubois first if you need to use it. */
+const DesignSystemThemeProvider = _ref => {
   let {
-    children,
     isDarkMode = false,
-    theme: themeName,
+    children
+  } = _ref;
+  return jsx(DesignSystemThemeContext.Provider, {
+    value: {
+      isDarkMode
+    },
+    children: children
+  });
+};
+const DesignSystemProvider = _ref2 => {
+  let {
+    isDarkMode: deprecatedDarkModeProp,
+    children,
     enableAnimation = false,
     zIndexBase = 1000,
     getPopupContainer,
     flags = {
       USE_NEW_ICONS: true
     }
-  } = _ref;
+  } = _ref2;
+  const {
+    isDarkMode: contextDarkModeVal
+  } = useContext(DesignSystemThemeContext);
+  const isDarkMode = deprecatedDarkModeProp !== null && deprecatedDarkModeProp !== void 0 ? deprecatedDarkModeProp : contextDarkModeVal;
   const theme = useMemo(() => getTheme(isDarkMode, {
     enableAnimation,
     zIndexBase
   }),
   // TODO: revisit this
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  [themeName, isDarkMode, zIndexBase]);
+  [isDarkMode, zIndexBase]);
   const providerPropsContext = useMemo(() => ({
     isDarkMode,
-    theme: themeName,
     enableAnimation,
     zIndexBase,
     getPopupContainer,
     flags
-  }), [themeName, isDarkMode, enableAnimation, zIndexBase, getPopupContainer, flags]);
+  }), [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
@@ -115,24 +131,20 @@ const DesignSystemProvider = _ref => {
     })
   });
 };
-const ApplyDesignSystemContextOverrides = _ref2 => {
+const ApplyDesignSystemContextOverrides = _ref3 => {
   let {
-    isDarkMode,
-    theme,
     enableAnimation,
     zIndexBase,
     getPopupContainer,
     flags,
     children
-  } = _ref2;
+  } = _ref3;
   const parentDesignSystemProviderProps = useContext(DesignSystemProviderPropsContext);
   if (parentDesignSystemProviderProps === null) {
     throw new Error(`ApplyDesignSystemContextOverrides cannot be used standalone - DesignSystemProvider must exist in the React context`);
   }
   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,
     getPopupContainer: getPopupContainer !== null && getPopupContainer !== void 0 ? getPopupContainer : parentDesignSystemProviderProps.getPopupContainer,
@@ -140,7 +152,7 @@ const ApplyDesignSystemContextOverrides = _ref2 => {
       ...parentDesignSystemProviderProps.flags,
       ...flags
     }
-  }), [parentDesignSystemProviderProps, isDarkMode, theme, enableAnimation, zIndexBase, getPopupContainer, flags]);
+  }), [parentDesignSystemProviderProps, enableAnimation, zIndexBase, getPopupContainer, flags]);
   return jsx(DesignSystemProvider, {
     ...newProps,
     children: children
@@ -148,11 +160,11 @@ const ApplyDesignSystemContextOverrides = _ref2 => {
 };
 
 // This is a more-specific version of `ApplyDesignSystemContextOverrides` that only allows overriding the flags.
-const ApplyDesignSystemFlags = _ref3 => {
+const ApplyDesignSystemFlags = _ref4 => {
   let {
     flags,
     children
-  } = _ref3;
+  } = _ref4;
   const parentDesignSystemProviderProps = useContext(DesignSystemProviderPropsContext);
   if (parentDesignSystemProviderProps === null) {
     throw new Error(`ApplyDesignSystemFlags cannot be used standalone - DesignSystemProvider must exist in the React context`);
@@ -169,10 +181,10 @@ const ApplyDesignSystemFlags = _ref3 => {
     children: children
   });
 };
-const DesignSystemAntDConfigProvider = _ref4 => {
+const DesignSystemAntDConfigProvider = _ref5 => {
   let {
     children
-  } = _ref4;
+  } = _ref5;
   const antdContext = useAntDConfigProviderContext();
   return jsx(ConfigProvider, {
     ...antdContext,
@@ -193,10 +205,10 @@ const useAntDConfigProviderContext = () => {
  * Since all Design System's components have are wrapped with DesignSystemAntDConfigProvider,
  * this won't affect their own prefixCls, but just allow nested antd components to keep their ant prefix.
  */
-const RestoreAntDDefaultClsPrefix = _ref5 => {
+const RestoreAntDDefaultClsPrefix = _ref6 => {
   let {
     children
-  } = _ref5;
+  } = _ref6;
   return jsx(ConfigProvider, {
     prefixCls: "ant",
     children: children
@@ -8898,7 +8910,7 @@ const getButtonEmotionStyles = _ref => {
       outlineStyle: 'solid',
       outlineWidth: '2px',
       outlineOffset: '1px',
-      outlineColor: theme.themeName === 'dark' ? theme.colors.actionDefaultBorderFocus : theme.colors.primary
+      outlineColor: theme.isDarkMode ? theme.colors.actionDefaultBorderFocus : theme.colors.primary
     },
     ...getDefaultStyles(theme),
     [`&${classPrimary}`]: {
@@ -8988,7 +9000,7 @@ const getButtonEmotionStyles = _ref => {
     },
     [`&${clsIconOnly}`]: {
       border: 'none',
-      [`&:enabled:not(${classLink})`]: {
+      [`&:enabled:not(${classLink}), &:enabled:not(${classLink}) > .anticon`]: {
         ...tertiaryColors,
         color: theme.colors.textSecondary
       },
@@ -9008,7 +9020,7 @@ const getButtonEmotionStyles = _ref => {
         outlineStyle: 'solid',
         outlineWidth: '2px',
         outlineOffset: '1px',
-        outlineColor: theme.themeName === 'dark' ? theme.colors.actionDefaultBorderFocus : theme.colors.primary
+        outlineColor: theme.isDarkMode ? theme.colors.actionDefaultBorderFocus : theme.colors.primary
       }),
       [`${clsLoadingIcon}`]: {
         ...(onlyIcon && {
@@ -9724,7 +9736,10 @@ const cssSpinner = function (theme) {
   const styles = {
     animation: `${rotate} 1s steps(${frameRate}, end) infinite`,
     color: theme.colors.textSecondary,
-    animationDelay: `${delay}s`
+    animationDelay: `${delay}s`,
+    '@media only percy': {
+      animation: 'none'
+    }
   };
   return /*#__PURE__*/css(importantify(styles), process.env.NODE_ENV === "production" ? "" : ";label:cssSpinner;");
 };
@@ -9880,6 +9895,10 @@ const getCountBadgeStyles = theme => /*#__PURE__*/css(importantify({
   height: 20
 }), process.env.NODE_ENV === "production" ? "" : ";label:getCountBadgeStyles;");
 const DialogComboboxCountBadge = props => {
+  const {
+    countStartAt,
+    ...restOfProps
+  } = props;
   const {
     theme
   } = useDesignSystemTheme();
@@ -9887,9 +9906,9 @@ const DialogComboboxCountBadge = props => {
     value
   } = useDialogComboboxContext();
   return jsx("div", {
-    ...props,
+    ...restOfProps,
     css: getCountBadgeStyles(theme),
-    children: Array.isArray(value) ? value.length : value ? 1 : 0
+    children: Array.isArray(value) ? countStartAt ? `+${value.length - countStartAt}` : value.length : value ? 1 : 0
   });
 };
 
@@ -10200,71 +10219,6 @@ 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 => {
-    if (child !== null && child !== void 0 && child.props.value.toLowerCase().includes(searchValue)) {
-      return child;
-    }
-    return null;
-  })) === null || _React$Children$map === void 0 ? void 0 : _React$Children$map.filter(child => child);
-};
-const DialogComboboxOptionListSearch = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
-  var _filteredChildren, _filteredChildren$pro, _filteredChildren2;
-  let {
-    onChange,
-    children,
-    hasWrapper,
-    ...restProps
-  } = _ref;
-  const {
-    theme
-  } = useDesignSystemTheme();
-  const {
-    isInsideDialogComboboxOptionList
-  } = useDialogComboboxOptionListContext();
-  const [searchValue, setSearchValue] = React__default.useState();
-  if (!isInsideDialogComboboxOptionList) {
-    throw new Error('`DialogComboboxOptionListSearch` must be used within `DialogComboboxOptionList`');
-  }
-  const handleOnChange = event => {
-    setSearchValue(event.target.value.toLowerCase());
-  };
-  let filteredChildren = children;
-  if (searchValue) {
-    filteredChildren = filterChildren(hasWrapper ? children.props.children : children, searchValue);
-    if (hasWrapper) {
-      filteredChildren = /*#__PURE__*/React__default.cloneElement(children, {}, filteredChildren);
-    }
-  }
-  return jsxs(Fragment, {
-    children: [jsx("div", {
-      css: /*#__PURE__*/css({
-        padding: `${theme.spacing.sm}px ${theme.spacing.lg / 2}px ${theme.spacing.sm}px`,
-        width: '100%',
-        boxSizing: 'border-box'
-      }, process.env.NODE_ENV === "production" ? "" : ";label:DialogComboboxOptionListSearch;"),
-      children: jsx(Input, {
-        ref: forwardedRef,
-        prefix: jsx(SearchIcon, {}),
-        placeholder: "Search",
-        onChange: handleOnChange,
-        value: searchValue,
-        ...restProps
-      })
-    }), hasWrapper && (_filteredChildren = filteredChildren) !== null && _filteredChildren !== void 0 && (_filteredChildren$pro = _filteredChildren.props.children) !== null && _filteredChildren$pro !== void 0 && _filteredChildren$pro.length || !hasWrapper && (_filteredChildren2 = filteredChildren) !== null && _filteredChildren2 !== void 0 && _filteredChildren2.length ? filteredChildren : jsx("div", {
-      css: /*#__PURE__*/css({
-        color: theme.colors.textSecondary,
-        textAlign: 'center',
-        padding: '6px 32px 6px 12px',
-        width: '100%',
-        boxSizing: 'border-box'
-      }, process.env.NODE_ENV === "production" ? "" : ";label:DialogComboboxOptionListSearch;"),
-      children: "No results found"
-    })]
-  });
-});
-
 function _EMOTION_STRINGIFIED_CSS_ERROR__$a() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 var _ref2$4 = process.env.NODE_ENV === "production" ? {
   name: "1cjitc6",
@@ -10341,6 +10295,86 @@ const DialogComboboxOptionListSelectItem = /*#__PURE__*/forwardRef((_ref, ref) =
   });
 });
 
+const filterChildren = (children, searchValue) => {
+  var _React$Children$map;
+  return (_React$Children$map = React__default.Children.map(children, child => {
+    if (child.type === DialogComboboxOptionListSelectItem || child.type === DialogComboboxOptionListCheckboxItem) {
+      var _child$props, _child$props$value;
+      if (child !== null && child !== void 0 && (_child$props = child.props) !== null && _child$props !== void 0 && (_child$props$value = _child$props.value) !== null && _child$props$value !== void 0 && _child$props$value.toLowerCase().includes(searchValue)) {
+        return child;
+      }
+      return null;
+    }
+    return child;
+  })) === null || _React$Children$map === void 0 ? void 0 : _React$Children$map.filter(child => child);
+};
+const DialogComboboxOptionListSearch = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
+  var _filteredChildren, _filteredChildren$pro, _filteredChildren2;
+  let {
+    onChange,
+    onSearch,
+    virtualized,
+    children,
+    hasWrapper,
+    ...restProps
+  } = _ref;
+  const {
+    theme
+  } = useDesignSystemTheme();
+  const {
+    isInsideDialogComboboxOptionList
+  } = useDialogComboboxOptionListContext();
+  const [searchValue, setSearchValue] = React__default.useState();
+  if (!isInsideDialogComboboxOptionList) {
+    throw new Error('`DialogComboboxOptionListSearch` must be used within `DialogComboboxOptionList`');
+  }
+  const handleOnChange = event => {
+    if (!virtualized) {
+      setSearchValue(event.target.value.toLowerCase());
+    }
+    onSearch === null || onSearch === void 0 ? void 0 : onSearch(event.target.value);
+  };
+  let filteredChildren = children;
+  if (searchValue && !virtualized) {
+    filteredChildren = filterChildren(hasWrapper ? children.props.children : children, searchValue);
+    if (hasWrapper) {
+      filteredChildren = /*#__PURE__*/React__default.cloneElement(children, {}, filteredChildren);
+    }
+  }
+  return jsxs(Fragment, {
+    children: [jsx("div", {
+      css: /*#__PURE__*/css({
+        padding: `${theme.spacing.sm}px ${theme.spacing.lg / 2}px ${theme.spacing.sm}px`,
+        width: '100%',
+        boxSizing: 'border-box'
+      }, process.env.NODE_ENV === "production" ? "" : ";label:DialogComboboxOptionListSearch;"),
+      children: jsx(Input, {
+        type: "search",
+        name: "search",
+        ref: forwardedRef,
+        prefix: jsx(SearchIcon, {}),
+        placeholder: "Search",
+        onChange: handleOnChange,
+        value: searchValue,
+        ...restProps
+      })
+    }), virtualized ? children : hasWrapper && (_filteredChildren = filteredChildren) !== null && _filteredChildren !== void 0 && (_filteredChildren$pro = _filteredChildren.props.children) !== null && _filteredChildren$pro !== void 0 && _filteredChildren$pro.length || !hasWrapper && (_filteredChildren2 = filteredChildren) !== null && _filteredChildren2 !== void 0 && _filteredChildren2.length ? jsx("div", {
+      "aria-live": "polite",
+      children: filteredChildren
+    }) : jsx("div", {
+      "aria-live": "assertive",
+      css: /*#__PURE__*/css({
+        color: theme.colors.textSecondary,
+        textAlign: 'center',
+        padding: '6px 32px 6px 12px',
+        width: '100%',
+        boxSizing: 'border-box'
+      }, process.env.NODE_ENV === "production" ? "" : ";label:DialogComboboxOptionListSearch;"),
+      children: "No results found"
+    })]
+  });
+});
+
 function _EMOTION_STRINGIFIED_CSS_ERROR__$9() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 var _ref2$3 = process.env.NODE_ENV === "production" ? {
   name: "6kz1wu",
@@ -10678,8 +10712,7 @@ const DialogComboboxTrigger = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
     onRemove,
     children,
     maxWidth = 9999,
-    withCountBadge = true,
-    showBadgeAfterValueCount = 3,
+    showTagAfterValueCount = 3,
     allowClear = true,
     controlled,
     onClear,
@@ -10719,7 +10752,7 @@ const DialogComboboxTrigger = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
   const [showTooltip, setShowTooltip] = React__default.useState();
   const triggerContentRef = React__default.useRef(null);
   useEffect(() => {
-    if ((value === null || value === void 0 ? void 0 : value.length) > showBadgeAfterValueCount) {
+    if ((value === null || value === void 0 ? void 0 : value.length) > showTagAfterValueCount) {
       setShowTooltip(true);
     } else if (triggerContentRef.current) {
       const {
@@ -10728,11 +10761,12 @@ const DialogComboboxTrigger = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
       } = triggerContentRef.current;
       setShowTooltip(clientWidth < scrollWidth);
     }
-  }, [showBadgeAfterValueCount, value]);
+  }, [showTagAfterValueCount, value]);
   const concatenatedValues = Array.isArray(value) ? value.join(', ') : value;
   const displayedValues = jsx("span", {
     children: concatenatedValues
   });
+  const valuesBeforeBadge = Array.isArray(value) ? value.slice(0, showTagAfterValueCount).join(', ') : value;
   let ariaLabel = `${label}`;
   if (value !== null && value !== void 0 && value.length) {
     ariaLabel += multiSelect ? `, multiselectable, ${value.length} options selected: ${concatenatedValues}` : `, selected option: ${concatenatedValues}`;
@@ -10760,10 +10794,18 @@ 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, {
-        role: "status",
-        "aria-label": "Dialog combobox options selected count"
-      }) : withCountBadge ? displayedValues : null]
+      }), (value === null || value === void 0 ? void 0 : value.length) > showTagAfterValueCount ? jsxs(Fragment, {
+        children: [jsx("span", {
+          style: {
+            marginRight: theme.spacing.xs
+          },
+          children: valuesBeforeBadge
+        }), jsx(DialogComboboxCountBadge, {
+          countStartAt: showTagAfterValueCount,
+          role: "status",
+          "aria-label": "Selected options count"
+        })]
+      }) : displayedValues]
     }), allowClear && value !== null && value !== void 0 && value.length ? jsx(XCircleFillIcon, {
       onClick: handleClear,
       css: /*#__PURE__*/css({
@@ -11298,7 +11340,7 @@ const Content$4 = _ref => {
             paddingLeft: horizontalContentPadding,
             overflowY: useCustomScrollBehavior ? 'hidden' : 'auto',
             height: expandContentToFullHeight ? '100%' : undefined,
-            ...(theme.themeName === 'default' && !useCustomScrollBehavior ? {
+            ...(theme.isDarkMode === false && !useCustomScrollBehavior ? {
               // Achieves an inner shadow on the content, but only when there is more left to scroll. When the content fits
               // in the container without scrolling, no shadow will be shown.
               // Taken from: https://css-tricks.com/scroll-shadows-with-javascript/
@@ -11454,6 +11496,7 @@ const Item = /*#__PURE__*/forwardRef(function Item(_ref4, ref) {
     children,
     disabledReason,
     danger,
+    onClick,
     ...props
   } = _ref4;
   const itemRef = useRef(null);
@@ -11461,6 +11504,13 @@ const Item = /*#__PURE__*/forwardRef(function Item(_ref4, ref) {
   return jsx(DropdownMenu$1.Item, {
     css: theme => [itemStyles, danger && dangerItemStyles(theme)],
     ref: itemRef,
+    onClick: e => {
+      if (props.disabled) {
+        e.preventDefault();
+      } else {
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+      }
+    },
     ...props,
     children: getNewChildren(children, props, disabledReason, itemRef)
   });
@@ -13197,7 +13247,6 @@ const Header$1 = props => {
   const styles = {
     titleWrapper: _ref5,
     breadcrumbWrapper: /*#__PURE__*/css({
-      marginBottom: 2,
       lineHeight: theme.typography.lineHeightBase
     }, process.env.NODE_ENV === "production" ? "" : ";label:breadcrumbWrapper;"),
     title: _ref4$1,
@@ -13406,7 +13455,8 @@ function getPaginationEmotionStyles(clsPrefix, theme) {
     [`&${classRoot}.mini, ${classRoot}.mini`]: {
       [`${classItem}, ${classNext}, ${classPrev}, ${classJumpNext}, ${classJumpPrev}`]: {
         height: '32px',
-        width: '32px',
+        minWidth: '32px',
+        width: 'auto',
         lineHeight: '32px'
       },
       [classSizeChanger]: {
@@ -13426,6 +13476,7 @@ const Pagination = function Pagination(_ref) {
     pageSize = 10,
     numTotal,
     onChange,
+    style,
     dangerouslySetAntdProps
   } = _ref;
   const {
@@ -13443,6 +13494,7 @@ const Pagination = function Pagination(_ref) {
       showSizeChanger: false,
       showQuickJumper: false,
       size: 'small',
+      style: style,
       ...dangerouslySetAntdProps
     })
   });
@@ -13667,6 +13719,7 @@ const getModalEmotionStyles = args => {
   const bodyMaxHeight = `calc(${modalMaxHeight} - ${headerHeight}px - ${footerHeight}px - ${MODAL_PADDING}px)`;
   return /*#__PURE__*/css({
     [classNameHeader]: {
+      background: 'transparent',
       paddingTop: theme.spacing.md,
       paddingLeft: theme.spacing.lg,
       paddingRight: theme.spacing.md,
@@ -13729,6 +13782,7 @@ const getModalEmotionStyles = args => {
       alignItems: 'center'
     },
     [classNameContent]: {
+      backgroundColor: theme.colors.backgroundPrimary,
       maxHeight: modalMaxHeight,
       height: maxedOutHeight ? modalMaxHeight : '',
       overflow: 'hidden',
@@ -13744,7 +13798,7 @@ const getModalEmotionStyles = args => {
       paddingRight: MODAL_PADDING,
       paddingTop: CONTENT_BUFFER,
       paddingBottom: CONTENT_BUFFER,
-      ...(theme.themeName === 'default' ? {
+      ...(theme.isDarkMode === false ? {
         // Achieves an inner shadow on the content, but only when there is more left to scroll. When the content fits
         // in the container without scrolling, no shadow will be shown.
         // Taken from: https://css-tricks.com/scroll-shadows-with-javascript/
@@ -13928,6 +13982,7 @@ function DangerModal(props) {
       type: "primary",
       danger: true,
       onClick: onOk,
+      loading: props.confirmLoading,
       ...okButtonProps,
       children: okText || 'Delete'
     }, "discard")],
@@ -15406,11 +15461,11 @@ const tableStyles = {
     toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   },
   cell: process.env.NODE_ENV === "production" ? {
-    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: "1n3v1dk",
+    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;& .anticon{vertical-align:text-bottom;}"
   } : {
-    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;",
+    name: "q5g0tm-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;& .anticon{vertical-align:text-bottom;};label:cell;",
     toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   },
   header: process.env.NODE_ENV === "production" ? {
@@ -15950,9 +16005,21 @@ const TableFilterInput = /*#__PURE__*/forwardRef(function SearchInput(_ref10, re
     onSubmit,
     showSearchButton,
     className,
+    onChange,
+    onClear,
     ...inputProps
   } = _ref10;
   const DEFAULT_WIDTH = 350;
+  const handleChange = e => {
+    // If the input is cleared, call the onClear handler, but only
+    // if the event is not an input event -- which is the case when you click the
+    // ant-provided (X) button.
+    if (!e.target.value && e.nativeEvent instanceof InputEvent === false && onClear) {
+      onClear === null || onClear === void 0 ? void 0 : onClear();
+    } else {
+      onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    }
+  };
   let component = jsx(Input, {
     prefix: jsx(SearchIcon, {}),
     allowClear: true,
@@ -15961,7 +16028,8 @@ const TableFilterInput = /*#__PURE__*/forwardRef(function SearchInput(_ref10, re
     ref: ref,
     css: /*#__PURE__*/css({
       width: DEFAULT_WIDTH
-    }, process.env.NODE_ENV === "production" ? "" : ";label:component;")
+    }, process.env.NODE_ENV === "production" ? "" : ";label:component;"),
+    onChange: handleChange
   });
   if (showSearchButton) {
     component = jsxs(Input.Group, {
@@ -15976,7 +16044,8 @@ const TableFilterInput = /*#__PURE__*/forwardRef(function SearchInput(_ref10, re
         allowClear: true,
         ...inputProps,
         ref: ref,
-        css: _ref11
+        css: _ref11,
+        onChange: handleChange
       }), jsx(Button, {
         htmlType: "submit",
         children: jsx(SearchIcon, {})
@@ -16717,5 +16786,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, TableFilterInput, 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 };
+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, DesignSystemThemeContext, DesignSystemThemeProvider, 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, TableFilterInput, 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