@databricks/design-system 1.12.4 → 1.12.6

package/dist/index.js

@@ -3,8 +3,8 @@ import React__default, { createContext, useMemo, useEffect, useContext, useRef,
 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-6e6f5867.js';
-export { W as WithDesignSystemThemeHoc, u as useDesignSystemTheme } from './useDesignSystemTheme-6e6f5867.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';
@@ -26,7 +26,6 @@ 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: {}
@@ -58,7 +57,6 @@ const DesignSystemProvider = _ref => {
   let {
     children,
     isDarkMode = false,
-    theme: themeName,
     enableAnimation = false,
     zIndexBase = 1000,
     getPopupContainer,
@@ -72,21 +70,19 @@ const DesignSystemProvider = _ref => {
   }),
   // 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
@@ -118,7 +114,6 @@ const DesignSystemProvider = _ref => {
 const ApplyDesignSystemContextOverrides = _ref2 => {
   let {
     isDarkMode,
-    theme,
     enableAnimation,
     zIndexBase,
     getPopupContainer,
@@ -132,7 +127,6 @@ 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,
     getPopupContainer: getPopupContainer !== null && getPopupContainer !== void 0 ? getPopupContainer : parentDesignSystemProviderProps.getPopupContainer,
@@ -140,7 +134,7 @@ const ApplyDesignSystemContextOverrides = _ref2 => {
       ...parentDesignSystemProviderProps.flags,
       ...flags
     }
-  }), [parentDesignSystemProviderProps, isDarkMode, theme, enableAnimation, zIndexBase, getPopupContainer, flags]);
+  }), [parentDesignSystemProviderProps, isDarkMode, enableAnimation, zIndexBase, getPopupContainer, flags]);
   return jsx(DesignSystemProvider, {
     ...newProps,
     children: children
@@ -8898,7 +8892,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 +8982,7 @@ const getButtonEmotionStyles = _ref => {
     },
     [`&${clsIconOnly}`]: {
       border: 'none',
-      [`&:enabled:not(${classLink})`]: {
+      [`&:enabled:not(${classLink}), &:enabled:not(${classLink}) > .anticon`]: {
         ...tertiaryColors,
         color: theme.colors.textSecondary
       },
@@ -9008,7 +9002,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 +9718,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 +9877,9 @@ const getCountBadgeStyles = theme => /*#__PURE__*/css(importantify({
   height: 20
 }), process.env.NODE_ENV === "production" ? "" : ";label:getCountBadgeStyles;");
 const DialogComboboxCountBadge = props => {
+  const {
+    countStartAt
+  } = props;
   const {
     theme
   } = useDesignSystemTheme();
@@ -9889,7 +9889,7 @@ const DialogComboboxCountBadge = props => {
   return jsx("div", {
     ...props,
     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
   });
 };
 
@@ -9919,6 +9919,7 @@ const getDialogComboboxOptionItemWrapperStyles = theme => {
     padding: '6px 32px 6px 12px',
     lineHeight: theme.typography.lineHeightBase,
     height: theme.typography.lineHeightBase,
+    boxSizing: 'content-box',
     cursor: 'pointer',
     userSelect: 'none',
     '&:hover': {
@@ -10202,7 +10203,8 @@ 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)) {
+    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;
@@ -10212,6 +10214,8 @@ const DialogComboboxOptionListSearch = /*#__PURE__*/forwardRef((_ref, forwardedR
   var _filteredChildren, _filteredChildren$pro, _filteredChildren2;
   let {
     onChange,
+    onSearch,
+    virtualized,
     children,
     hasWrapper,
     ...restProps
@@ -10227,10 +10231,13 @@ const DialogComboboxOptionListSearch = /*#__PURE__*/forwardRef((_ref, forwardedR
     throw new Error('`DialogComboboxOptionListSearch` must be used within `DialogComboboxOptionList`');
   }
   const handleOnChange = event => {
-    setSearchValue(event.target.value.toLowerCase());
+    if (!virtualized) {
+      setSearchValue(event.target.value.toLowerCase());
+    }
+    onSearch === null || onSearch === void 0 ? void 0 : onSearch(event.target.value);
   };
   let filteredChildren = children;
-  if (searchValue) {
+  if (searchValue && !virtualized) {
     filteredChildren = filterChildren(hasWrapper ? children.props.children : children, searchValue);
     if (hasWrapper) {
       filteredChildren = /*#__PURE__*/React__default.cloneElement(children, {}, filteredChildren);
@@ -10251,7 +10258,7 @@ const DialogComboboxOptionListSearch = /*#__PURE__*/forwardRef((_ref, forwardedR
         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", {
+    }), 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 ? filteredChildren : jsx("div", {
       css: /*#__PURE__*/css({
         color: theme.colors.textSecondary,
         textAlign: 'center',
@@ -10662,6 +10669,12 @@ const getTriggerStyles = (theme, maxWidth, removable) => {
     '&:focus': {
       borderColor: theme.colors.actionDefaultBorderFocus,
       ...removeButtonInteractionStyles
+    },
+    [`&[disabled]`]: {
+      background: theme.colors.actionDisabledBackground,
+      color: theme.colors.actionDisabledText,
+      pointerEvents: 'none',
+      userSelect: 'none'
     }
   }), process.env.NODE_ENV === "production" ? "" : ";label:getTriggerStyles;");
 };
@@ -10671,8 +10684,7 @@ const DialogComboboxTrigger = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
     onRemove,
     children,
     maxWidth = 9999,
-    withCountBadge = true,
-    showBadgeAfterValueCount = 3,
+    showTagAfterValueCount = 3,
     allowClear = true,
     controlled,
     onClear,
@@ -10712,7 +10724,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 {
@@ -10721,11 +10733,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}`;
@@ -10753,10 +10766,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({
@@ -11291,7 +11312,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/
@@ -11447,6 +11468,7 @@ const Item = /*#__PURE__*/forwardRef(function Item(_ref4, ref) {
     children,
     disabledReason,
     danger,
+    onClick,
     ...props
   } = _ref4;
   const itemRef = useRef(null);
@@ -11454,6 +11476,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)
   });
@@ -11684,7 +11713,8 @@ const getChild = (child, isDisabled, disabledReason, tooltip, index, siblingCoun
   const HintColumnType = jsx(HintColumn, {}).type;
   const isHintColumnType = Boolean(child && typeof child !== 'string' && typeof child !== 'number' && typeof child !== 'boolean' && 'type' in child && (child === null || child === void 0 ? void 0 : child.type) === HintColumnType);
   if (isDisabled && disabledReason && child && isHintColumnType) {
-    return jsxs(Fragment, {
+    return jsxs("div", {
+      onClick: e => e.preventDefault(),
       children: [tooltip, child]
     });
   } else if (index === siblingCount - 1 && isDisabled && disabledReason) {
@@ -13399,7 +13429,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]: {
@@ -13419,6 +13450,7 @@ const Pagination = function Pagination(_ref) {
     pageSize = 10,
     numTotal,
     onChange,
+    style,
     dangerouslySetAntdProps
   } = _ref;
   const {
@@ -13436,6 +13468,7 @@ const Pagination = function Pagination(_ref) {
       showSizeChanger: false,
       showQuickJumper: false,
       size: 'small',
+      style: style,
       ...dangerouslySetAntdProps
     })
   });
@@ -13660,6 +13693,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,
@@ -13722,6 +13756,7 @@ const getModalEmotionStyles = args => {
       alignItems: 'center'
     },
     [classNameContent]: {
+      backgroundColor: theme.colors.backgroundPrimary,
       maxHeight: modalMaxHeight,
       height: maxedOutHeight ? modalMaxHeight : '',
       overflow: 'hidden',
@@ -13737,7 +13772,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/
@@ -13921,6 +13956,7 @@ function DangerModal(props) {
       type: "primary",
       danger: true,
       onClick: onOk,
+      loading: props.confirmLoading,
       ...okButtonProps,
       children: okText || 'Delete'
     }, "discard")],
@@ -14607,10 +14643,15 @@ function NavButton(_ref2) {
     theme
   } = useDesignSystemTheme();
   return jsx("div", {
-    css: [active ? {
-      background: theme.colors.actionDefaultBackgroundHover,
-      borderRadius: theme.borders.borderRadiusMd
-    } : undefined, dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:NavButton;"],
+    css: [active ? importantify({
+      borderRadius: theme.borders.borderRadiusMd,
+      background: theme.colors.actionDefaultBackgroundPress,
+      button: {
+        '&:enabled:not(:hover):not(:active) > .anticon': {
+          color: theme.colors.actionTertiaryTextPress
+        }
+      }
+    }) : undefined, dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:NavButton;"],
     children: jsx(Button, {
       icon: icon,
       onClick: onClick,
@@ -14651,10 +14692,14 @@ function Content(_ref3) {
     right: 0
   };
   const [dragging, setDragging] = useState(false);
-  const [animation, setAnimation] = useState(openPanelId == null ? {
+  const isPanelClosed = openPanelId == null;
+  const [animation, setAnimation] = useState(isPanelClosed ? {
     open: `${openAnimation} .2s cubic-bezier(0, 0, 0.2, 1)`,
     show: `${showAnimation} .25s linear`
   } : undefined);
+  const hiddenPanelStyle = /*#__PURE__*/css(isPanelClosed && {
+    display: 'none'
+  }, process.env.NODE_ENV === "production" ? "" : ";label:hiddenPanelStyle;");
   const containerStyle = /*#__PURE__*/css({
     animation: animation === null || animation === void 0 ? void 0 : animation.open,
     direction: sidebarContext.position === 'right' ? 'rtl' : 'ltr',
@@ -14662,12 +14707,13 @@ function Content(_ref3) {
     position: 'relative',
     borderWidth: sidebarContext.position === 'right' ? `0 ${theme.general.borderWidth}px 0 0 ` : `0 0 0 ${theme.general.borderWidth}px`,
     borderStyle: 'inherit',
-    borderColor: 'inherit'
+    borderColor: 'inherit',
+    boxSizing: 'content-box'
   }, process.env.NODE_ENV === "production" ? "" : ";label:containerStyle;");
   const highlightedBorderStyle = sidebarContext.position === 'right' ? /*#__PURE__*/css({
-    borderLeft: `2px solid ${theme.colors.primary}`
+    borderLeft: `2px solid ${theme.colors.actionDefaultBorderHover}`
   }, process.env.NODE_ENV === "production" ? "" : ";label:highlightedBorderStyle;") : /*#__PURE__*/css({
-    borderRight: `2px solid ${theme.colors.primary}`
+    borderRight: `2px solid ${theme.colors.actionDefaultBorderHover}`
   }, process.env.NODE_ENV === "production" ? "" : ";label:highlightedBorderStyle;");
   useEffect(() => {
     onCloseRef.current = onClose;
@@ -14689,11 +14735,12 @@ function Content(_ref3) {
   }), [openPanelId, closable, openAnimation, showAnimation, animation, destroyInactivePanels]);
   return jsx(ContentContext.Provider, {
     value: value,
-    children: openPanelId !== undefined ? disableResize ? jsx("div", {
+    children: disableResize ? jsx("div", {
       css: [/*#__PURE__*/css(containerStyle, {
         width: width || '100%',
         height: '100%'
-      }, process.env.NODE_ENV === "production" ? "" : ";label:Content;"), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Content;"],
+      }, process.env.NODE_ENV === "production" ? "" : ";label:Content;"), dangerouslyAppendEmotionCSS, hiddenPanelStyle, process.env.NODE_ENV === "production" ? "" : ";label:Content;"],
+      "aria-hidden": isPanelClosed,
       children: jsx("div", {
         css: /*#__PURE__*/css({
           opacity: 1,
@@ -14729,7 +14776,8 @@ function Content(_ref3) {
           ...resizeHandleStyle
         }, dragging && highlightedBorderStyle, process.env.NODE_ENV === "production" ? "" : ";label:Content;")
       }),
-      css: containerStyle,
+      css: [containerStyle, hiddenPanelStyle, process.env.NODE_ENV === "production" ? "" : ";label:Content;"],
+      "aria-hidden": isPanelClosed,
       children: jsx("div", {
         css: [{
           opacity: 1,
@@ -14739,13 +14787,14 @@ function Content(_ref3) {
         }, dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Content;"],
         children: children
       })
-    }) : null
+    })
   });
 }
 function Panel(_ref5) {
   let {
     panelId,
     children,
+    forceRender = false,
     dangerouslyAppendEmotionCSS,
     ...delegated
   } = _ref5;
@@ -14753,8 +14802,12 @@ function Panel(_ref5) {
     openPanelId,
     destroyInactivePanels
   } = useContext(ContentContext);
+  const hasOpenedPanelRef = useRef(false);
   const isPanelOpen = openPanelId === panelId;
-  if (destroyInactivePanels && !isPanelOpen) return null;
+  if (isPanelOpen && !hasOpenedPanelRef.current) {
+    hasOpenedPanelRef.current = true;
+  }
+  if ((destroyInactivePanels || !hasOpenedPanelRef.current) && !isPanelOpen && !forceRender) return null;
   return jsx("div", {
     css: ["display:flex;height:100%;flex-direction:column;", dangerouslyAppendEmotionCSS, !isPanelOpen && {
       display: 'none'
@@ -14804,6 +14857,7 @@ function PanelHeader(_ref6) {
       children: jsx(Button, {
         size: "small",
         icon: jsx(CloseIcon, {}),
+        "aria-label": "Close",
         onClick: () => {
           contentContext.setIsClosed();
         }
@@ -14845,8 +14899,17 @@ function PanelBody(_ref10) {
     children,
     dangerouslyAppendEmotionCSS
   } = _ref10;
+  const {
+    theme
+  } = useDesignSystemTheme();
   return jsx("div", {
-    css: ["height:100%;overflow-x:hidden;overflow-y:auto;padding:0 8px;", dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:PanelBody;"],
+    css: [{
+      height: '100%',
+      overflowX: 'hidden',
+      overflowY: 'auto',
+      padding: '0 8px',
+      colorScheme: theme.isDarkMode ? 'dark' : 'light'
+    }, dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:PanelBody;"],
     children: children
   });
 }
@@ -14875,7 +14938,8 @@ const Sidebar = /* #__PURE__ */(() => {
           flexDirection: position === 'right' ? 'row-reverse' : 'row',
           borderStyle: 'solid',
           borderColor: theme.colors.borderDecorative,
-          borderWidth: theme.general.borderWidth
+          borderWidth: theme.general.borderWidth,
+          boxSizing: 'content-box'
         }, dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Sidebar;"],
         children: children
       })
@@ -15363,11 +15427,11 @@ const tableStyles = {
     }
   }, process.env.NODE_ENV === "production" ? "" : ";label:table;"),
   row: process.env.NODE_ENV === "production" ? {
-    name: "1bx3uk1",
-    styles: "display:flex;&.table-isHeader{> *{background-color:var(--table-header-background-color);}.table-isScrollable &{position:sticky;top:0;z-index:1;}}.table-row-select-cell input[type=\"checkbox\"] ~ *{opacity:var(--row-checkbox-opacity, 0);}&:hover{> *:not([role=\"columnheader\"]){background-color:var(--table-row-hover);}.table-row-select-cell input[type=\"checkbox\"] ~ *{opacity:1;}}.table-row-select-cell input[type=\"checkbox\"]:focus ~ *{opacity:1;}> *{padding-top:var(--table-row-vertical-padding);padding-bottom:var(--table-row-vertical-padding);border-bottom:1px solid;border-color:var(--table-separator-color);}"
+    name: "1aw6lkf",
+    styles: "display:flex;&.table-isHeader{> *{background-color:var(--table-header-background-color);}.table-isScrollable &{position:sticky;top:0;z-index:1;}}.table-row-select-cell input[type=\"checkbox\"] ~ *{opacity:var(--row-checkbox-opacity, 0);}&:hover{&:not(.table-isHeader){background-color:var(--table-row-hover);}.table-row-select-cell input[type=\"checkbox\"] ~ *{opacity:1;}}.table-row-select-cell input[type=\"checkbox\"]:focus ~ *{opacity:1;}> *{padding-top:var(--table-row-vertical-padding);padding-bottom:var(--table-row-vertical-padding);border-bottom:1px solid;border-color:var(--table-separator-color);}"
   } : {
-    name: "16lqkbp-row",
-    styles: "display:flex;&.table-isHeader{> *{background-color:var(--table-header-background-color);}.table-isScrollable &{position:sticky;top:0;z-index:1;}}.table-row-select-cell input[type=\"checkbox\"] ~ *{opacity:var(--row-checkbox-opacity, 0);}&:hover{> *:not([role=\"columnheader\"]){background-color:var(--table-row-hover);}.table-row-select-cell input[type=\"checkbox\"] ~ *{opacity:1;}}.table-row-select-cell input[type=\"checkbox\"]:focus ~ *{opacity:1;}> *{padding-top:var(--table-row-vertical-padding);padding-bottom:var(--table-row-vertical-padding);border-bottom:1px solid;border-color:var(--table-separator-color);};label:row;",
+    name: "1vx4n96-row",
+    styles: "display:flex;&.table-isHeader{> *{background-color:var(--table-header-background-color);}.table-isScrollable &{position:sticky;top:0;z-index:1;}}.table-row-select-cell input[type=\"checkbox\"] ~ *{opacity:var(--row-checkbox-opacity, 0);}&:hover{&:not(.table-isHeader){background-color:var(--table-row-hover);}.table-row-select-cell input[type=\"checkbox\"] ~ *{opacity:1;}}.table-row-select-cell input[type=\"checkbox\"]:focus ~ *{opacity:1;}> *{padding-top:var(--table-row-vertical-padding);padding-bottom:var(--table-row-vertical-padding);border-bottom:1px solid;border-color:var(--table-separator-color);};label:row;",
     toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   },
   cell: process.env.NODE_ENV === "production" ? {
@@ -15379,11 +15443,11 @@ const tableStyles = {
     toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   },
   header: process.env.NODE_ENV === "production" ? {
-    name: "753xvu",
-    styles: "font-weight:bold;align-items:flex-end;display:flex;overflow:hidden;&[aria-sort]{cursor:pointer;user-select:none;}.table-header-text{color:var(--table-header-text-color);}.table-header-icon-container{color:var(--table-header-sort-icon-color);display:none;}&:hover{.table-header-icon-container, .table-header-text{color:var(--table-header-focus-color);}}&:active{.table-header-icon-container, .table-header-text{color:var(--table-header-active-color);}}&:hover, &[aria-sort=\"ascending\"], &[aria-sort=\"descending\"]{.table-header-icon-container{display:inline;}}"
+    name: "ik7qgz",
+    styles: "font-weight:bold;align-items:flex-end;display:flex;overflow:hidden;&[aria-sort]{cursor:pointer;user-select:none;}.table-header-text{color:var(--table-header-text-color);}.table-header-icon-container{color:var(--table-header-sort-icon-color);display:none;}&[aria-sort]:hover{.table-header-icon-container, .table-header-text{color:var(--table-header-focus-color);}}&[aria-sort]:active{.table-header-icon-container, .table-header-text{color:var(--table-header-active-color);}}&:hover, &[aria-sort=\"ascending\"], &[aria-sort=\"descending\"]{.table-header-icon-container{display:inline;}}"
   } : {
-    name: "1shmncy-header",
-    styles: "font-weight:bold;align-items:flex-end;display:flex;overflow:hidden;&[aria-sort]{cursor:pointer;user-select:none;}.table-header-text{color:var(--table-header-text-color);}.table-header-icon-container{color:var(--table-header-sort-icon-color);display:none;}&:hover{.table-header-icon-container, .table-header-text{color:var(--table-header-focus-color);}}&:active{.table-header-icon-container, .table-header-text{color:var(--table-header-active-color);}}&:hover, &[aria-sort=\"ascending\"], &[aria-sort=\"descending\"]{.table-header-icon-container{display:inline;}};label:header;",
+    name: "1xg6jn4-header",
+    styles: "font-weight:bold;align-items:flex-end;display:flex;overflow:hidden;&[aria-sort]{cursor:pointer;user-select:none;}.table-header-text{color:var(--table-header-text-color);}.table-header-icon-container{color:var(--table-header-sort-icon-color);display:none;}&[aria-sort]:hover{.table-header-icon-container, .table-header-text{color:var(--table-header-focus-color);}}&[aria-sort]:active{.table-header-icon-container, .table-header-text{color:var(--table-header-active-color);}}&:hover, &[aria-sort=\"ascending\"], &[aria-sort=\"descending\"]{.table-header-icon-container{display:inline;}};label:header;",
     toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   },
   headerButtonTarget: process.env.NODE_ENV === "production" ? {
@@ -15403,11 +15467,11 @@ const tableStyles = {
     toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   },
   checkboxCell: process.env.NODE_ENV === "production" ? {
-    name: "mozdib",
-    styles: "display:flex;align-items:center;flex:0;padding-left:var(--table-spacing-sm);padding-top:0;padding-bottom:0;min-width:var(--table-spacing-md);max-width:var(--table-spacing-md)"
+    name: "4cdr0s",
+    styles: "display:flex;align-items:center;flex:0;padding-left:var(--table-spacing-sm);padding-top:0;padding-bottom:0;min-width:var(--table-spacing-md);max-width:var(--table-spacing-md);box-sizing:content-box"
   } : {
-    name: "101mdic-checkboxCell",
-    styles: "display:flex;align-items:center;flex:0;padding-left:var(--table-spacing-sm);padding-top:0;padding-bottom:0;min-width:var(--table-spacing-md);max-width:var(--table-spacing-md);label:checkboxCell;",
+    name: "17au6u2-checkboxCell",
+    styles: "display:flex;align-items:center;flex:0;padding-left:var(--table-spacing-sm);padding-top:0;padding-bottom:0;min-width:var(--table-spacing-md);max-width:var(--table-spacing-md);box-sizing:content-box;label:checkboxCell;",
     toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   },
   resizeHandleContainer: /*#__PURE__*/css({
@@ -15915,9 +15979,18 @@ const TableFilterInput = /*#__PURE__*/forwardRef(function SearchInput(_ref10, re
     onSubmit,
     showSearchButton,
     className,
+    onChange,
+    onClear,
     ...inputProps
   } = _ref10;
   const DEFAULT_WIDTH = 350;
+  const handleChange = e => {
+    if (!e.target.value && 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,
@@ -15926,7 +15999,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, {
@@ -15941,7 +16015,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, {})
@@ -16329,16 +16404,37 @@ const getStyles = theme => {
       cursor: 'pointer',
       color: theme.colors.actionDefaultTextHover,
       backgroundColor: theme.colors.actionDefaultBackgroundHover,
-      borderColor: theme.colors.actionDefaultBorderHover
+      borderColor: theme.colors.actionDefaultBorderHover,
+      '& > svg': {
+        stroke: theme.colors.actionDefaultBorderHover
+      }
     },
     '&:disabled': {
       cursor: 'default',
       border: 'transparent',
       color: theme.colors.actionDisabledText,
-      backgroundColor: theme.colors.actionDisabledBackground
+      backgroundColor: theme.colors.actionDisabledBackground,
+      '& > svg': {
+        stroke: theme.colors.border
+      }
     }
   }, process.env.NODE_ENV === "production" ? "" : ";label:getStyles;");
 };
+const RectangleSvg = props => jsx("svg", {
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  ...props,
+  children: jsx("rect", {
+    x: "0.5",
+    y: "0.5",
+    width: "15",
+    height: "15",
+    rx: "3.5"
+  })
+});
 const ToggleButton = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
@@ -16367,13 +16463,13 @@ const ToggleButton = /*#__PURE__*/forwardRef((_ref, ref) => {
       css: /*#__PURE__*/css({
         marginRight: theme.spacing.xs
       }, process.env.NODE_ENV === "production" ? "" : ";label:ToggleButton;")
-    }) : jsx(Checkbox, {
-      disabled: props.disabled,
-      style: {
+    }) : jsx(RectangleSvg, {
+      css: /*#__PURE__*/css({
         height: theme.typography.lineHeightBase,
         width: theme.typography.lineHeightSm,
-        marginRight: theme.spacing.xs
-      }
+        marginRight: theme.spacing.xs,
+        stroke: theme.colors.border
+      }, process.env.NODE_ENV === "production" ? "" : ";label:ToggleButton;")
     }), children]
   });
 });