baseui 12.0.0 → 12.1.2

package/es/select/styled-components.js

@@ -19,6 +19,21 @@ function getFont(size = SIZE.default, typography) {
   }[size];
 }
 
+function getBorderRadius(size, borders) {
+  let radius = borders.inputBorderRadius;
+
+  if (size === SIZE.mini) {
+    radius = borders.inputBorderRadiusMini;
+  }
+
+  return {
+    borderTopLeftRadius: radius,
+    borderBottomLeftRadius: radius,
+    borderTopRightRadius: radius,
+    borderBottomRightRadius: radius
+  };
+}
+
 function getControlPadding(props) {
   const {
     $theme,
@@ -72,6 +87,7 @@ export const StyledDropdownContainer = styled('div', props => {
   };
 });
 StyledDropdownContainer.displayName = "StyledDropdownContainer";
+StyledDropdownContainer.displayName = 'StyledDropdownContainer';
 export const StyledDropdown = StyledList;
 export const StyledDropdownListItem = StyledListItem;
 export const StyledOptionContent = styled('div', props => {
@@ -88,6 +104,7 @@ export const StyledOptionContent = styled('div', props => {
   };
 });
 StyledOptionContent.displayName = "StyledOptionContent";
+StyledOptionContent.displayName = 'StyledOptionContent';
 export const StyledRoot = styled('div', props => {
   const {
     $theme: {
@@ -102,6 +119,7 @@ export const StyledRoot = styled('div', props => {
   };
 });
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 
 function getControlContainerColors($disabled, $isFocused, $isPseudoFocused, $positive, $error, colors) {
   if ($disabled) {
@@ -167,17 +185,14 @@ export const StyledControlContainer = styled('div', props => {
     $isPseudoFocused,
     $type,
     $searchable,
+    $size,
     $theme: {
       borders,
       colors,
       animation
     }
   } = props;
-  return {
-    borderTopLeftRadius: borders.inputBorderRadius,
-    borderTopRightRadius: borders.inputBorderRadius,
-    borderBottomRightRadius: borders.inputBorderRadius,
-    borderBottomLeftRadius: borders.inputBorderRadius,
+  return { ...getBorderRadius($size, borders),
     boxSizing: 'border-box',
     overflow: 'hidden',
     width: '100%',
@@ -199,6 +214,7 @@ export const StyledControlContainer = styled('div', props => {
   };
 });
 StyledControlContainer.displayName = "StyledControlContainer";
+StyledControlContainer.displayName = 'StyledControlContainer';
 export const StyledValueContainer = styled('div', props => {
   const padding = getControlPadding(props);
   return {
@@ -215,6 +231,7 @@ export const StyledValueContainer = styled('div', props => {
   };
 });
 StyledValueContainer.displayName = "StyledValueContainer";
+StyledValueContainer.displayName = 'StyledValueContainer';
 export const StyledPlaceholder = styled('div', props => {
   const {
     $disabled,
@@ -231,6 +248,7 @@ export const StyledPlaceholder = styled('div', props => {
   };
 });
 StyledPlaceholder.displayName = "StyledPlaceholder";
+StyledPlaceholder.displayName = 'StyledPlaceholder';
 export const StyledSingleValue = styled('div', props => {
   const {
     $searchable,
@@ -252,6 +270,7 @@ export const StyledSingleValue = styled('div', props => {
   };
 });
 StyledSingleValue.displayName = "StyledSingleValue";
+StyledSingleValue.displayName = 'StyledSingleValue';
 export const StyledInputContainer = styled('div', props => {
   const {
     $size,
@@ -288,6 +307,7 @@ export const StyledInputContainer = styled('div', props => {
   };
 });
 StyledInputContainer.displayName = "StyledInputContainer";
+StyledInputContainer.displayName = 'StyledInputContainer';
 export const StyledInput = styled('input', props => {
   const {
     $theme: {
@@ -322,6 +342,7 @@ export const StyledInput = styled('input', props => {
   };
 });
 StyledInput.displayName = "StyledInput";
+StyledInput.displayName = 'StyledInput';
 export const StyledInputSizer = styled('div', ({
   $size,
   $theme,
@@ -341,6 +362,7 @@ export const StyledInputSizer = styled('div', ({
   };
 });
 StyledInputSizer.displayName = "StyledInputSizer";
+StyledInputSizer.displayName = 'StyledInputSizer';
 export const StyledIconsContainer = styled('div', ({
   $theme,
   $theme: {
@@ -359,6 +381,7 @@ export const StyledIconsContainer = styled('div', ({
   };
 });
 StyledIconsContainer.displayName = "StyledIconsContainer";
+StyledIconsContainer.displayName = 'StyledIconsContainer';
 
 function getSvgStyles({
   $theme
@@ -403,6 +426,7 @@ export const StyledSelectArrow = styled('svg', props => {
   };
 });
 StyledSelectArrow.displayName = "StyledSelectArrow";
+StyledSelectArrow.displayName = 'StyledSelectArrow';
 export const StyledClearIcon = styled('svg', props => {
   const {
     $theme,
@@ -433,6 +457,7 @@ export const StyledClearIcon = styled('svg', props => {
   };
 });
 StyledClearIcon.displayName = "StyledClearIcon";
+StyledClearIcon.displayName = 'StyledClearIcon';
 export const StyledLoadingIndicator = withStyle(Spinner, ({
   $theme
 }) => {
@@ -449,6 +474,7 @@ export const StyledLoadingIndicator = withStyle(Spinner, ({
   };
 });
 StyledLoadingIndicator.displayName = "StyledLoadingIndicator";
+StyledLoadingIndicator.displayName = 'StyledLoadingIndicator';
 export const StyledSearchIconContainer = styled('div', props => {
   const {
     $disabled,
@@ -470,4 +496,5 @@ export const StyledSearchIconContainer = styled('div', props => {
     height: '100%'
   };
 });
-StyledSearchIconContainer.displayName = "StyledSearchIconContainer";
+StyledSearchIconContainer.displayName = "StyledSearchIconContainer";
+StyledSearchIconContainer.displayName = 'StyledSearchIconContainer';

package/es/select/value.js

@@ -8,14 +8,13 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import { StyledSingleValue } from './styled-components';
-import { getOverrides } from '../helpers/overrides';
+import { getOverrides } from '../helpers/overrides'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
 export default function Value(props) {
   const {
     overrides = {},
     ...restProps
   } = props;
   const [SingleValue, singleValueProps] = getOverrides(overrides.SingleValue, StyledSingleValue);
-  return /*#__PURE__*/React.createElement(SingleValue, _extends({
-    "aria-selected": "true"
-  }, restProps, singleValueProps), props.children);
+  return /*#__PURE__*/React.createElement(SingleValue, _extends({}, restProps, singleValueProps), props.children);
 }

package/es/side-navigation/index.js

@@ -10,4 +10,5 @@ export { default as NavItem } from './nav-item'; // Styled elements
 export * from './styled-components'; // Types
 
 export * from './types';
-/** @deprecated type is already removed*/
+/** @deprecated type is already removed*/
+// eslint-disable-next-line @typescript-eslint/no-unused-vars

package/es/side-navigation/nav-item.js

@@ -48,6 +48,7 @@ class NavItem extends React.Component {
   }
 
   render() {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const {
       item,
       overrides,

package/es/side-navigation/nav.js

@@ -90,7 +90,7 @@ export default class SideNav extends React.Component {
         overrides: overrides
       }, sharedProps)), item.subNav ? /*#__PURE__*/React.createElement(SubNavContainer, _extends({
         role: "list"
-      }, sharedProps, subNavContainerProps), item.subNav.map((subitem, idx) => {
+      }, sharedProps, subNavContainerProps), item.subNav.map(subitem => {
         return renderNavItem(subitem, level + 1, index);
       })) : null));
     };

package/es/side-navigation/stateful-container.js

@@ -47,6 +47,7 @@ class StatefulContainer extends React.Component {
 
   render() {
     // eslint-disable-next-line no-unused-vars
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const {
       children,
       initialState,

package/es/side-navigation/styled-components.js

@@ -27,8 +27,10 @@ export const StyledRoot = styled('nav', props => {
   };
 });
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 export const StyledNavItemContainer = styled('li', {});
 StyledNavItemContainer.displayName = "StyledNavItemContainer";
+StyledNavItemContainer.displayName = 'StyledNavItemContainer';
 export const StyledNavLink = styled('a', ({
   $theme,
   $isFocusVisible
@@ -48,6 +50,7 @@ export const StyledNavLink = styled('a', ({
   }
 }));
 StyledNavLink.displayName = "StyledNavLink";
+StyledNavLink.displayName = 'StyledNavLink';
 export const StyledNavItemElement = styled('div', props => {
   const {
     $active,
@@ -98,7 +101,9 @@ export const StyledNavItemElement = styled('div', props => {
   };
 });
 StyledNavItemElement.displayName = "StyledNavItemElement";
-export const StyledNavItem = withWrapper(StyledNavItemElement, Styled => function StyledNav({
+StyledNavItemElement.displayName = 'StyledNavItemElement';
+export const StyledNavItem = withWrapper(StyledNavItemElement, Styled => // eslint-disable-next-line @typescript-eslint/no-unused-vars
+function StyledNav({
   item,
   ...restProps
 }) {
@@ -115,4 +120,5 @@ export const StyledSubNavContainer = styled('ul', {
   paddingLeft: 0,
   paddingRight: 0
 });
-StyledSubNavContainer.displayName = "StyledSubNavContainer";
+StyledSubNavContainer.displayName = "StyledSubNavContainer";
+StyledSubNavContainer.displayName = 'StyledSubNavContainer';

package/es/skeleton/styled-components.js

@@ -60,6 +60,7 @@ export const StyledRoot = styled('div', props => {
   };
 });
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 export const StyledRow = styled('div', props => {
   return { ...(props.$animation ? { ...animationStyle,
       backgroundImage: getAnimationColor(props)
@@ -71,4 +72,5 @@ export const StyledRow = styled('div', props => {
     marginBottom: props.$isLastRow ? '0px' : '10px'
   };
 });
-StyledRow.displayName = "StyledRow";
+StyledRow.displayName = "StyledRow";
+StyledRow.displayName = 'StyledRow';

package/es/slider/slider.js

@@ -45,11 +45,13 @@ function Slider({
   const handleFocus = React.useCallback(event => {
     if (focusVisible(event)) {
       setIsFocusVisible(true);
-    }
+    } // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
 
     const index = event.target.parentNode.firstChild === event.target ? 0 : 1;
     setFocusedThumbIndex(index);
-  }, []);
+  }, []); // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
   const handleBlur = React.useCallback(event => {
     if (isFocusVisible !== false) {
       setIsFocusVisible(false);

package/es/slider/stateful-slider-container.js

@@ -48,8 +48,10 @@ class StatefulSliderContainer extends React.Component {
   render() {
     const {
       children,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       initialState,
       // eslint-disable-line no-unused-vars
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       stateReducer,
       // eslint-disable-line no-unused-vars
       ...restProps

package/es/slider/styled-components.js

@@ -11,6 +11,7 @@ export const Root = styled('div', {
   width: '100%'
 });
 Root.displayName = "Root";
+Root.displayName = 'Root';
 Root.displayName = 'StyledRoot';
 export const Track = styled('div', props => {
   const {
@@ -43,6 +44,7 @@ export const Track = styled('div', props => {
   };
 });
 Track.displayName = "Track";
+Track.displayName = 'Track';
 Track.displayName = 'StyledTrack';
 export const InnerTrack = styled('div', props => {
   const {
@@ -77,6 +79,7 @@ export const InnerTrack = styled('div', props => {
   };
 });
 InnerTrack.displayName = "InnerTrack";
+InnerTrack.displayName = 'InnerTrack';
 InnerTrack.displayName = 'StyledInnerTrack';
 export const Mark = styled('div', props => {
   return {
@@ -87,6 +90,7 @@ export const Mark = styled('div', props => {
   };
 });
 Mark.displayName = "Mark";
+Mark.displayName = 'Mark';
 Mark.displayName = 'StyledMark';
 export const Tick = styled('div', props => {
   return { ...props.$theme.typography.font200,
@@ -94,6 +98,7 @@ export const Tick = styled('div', props => {
   };
 });
 Tick.displayName = "Tick";
+Tick.displayName = 'Tick';
 Tick.displayName = 'StyledTick';
 export const TickBar = styled('div', props => {
   const {
@@ -112,6 +117,7 @@ export const TickBar = styled('div', props => {
   };
 });
 TickBar.displayName = "TickBar";
+TickBar.displayName = 'TickBar';
 TickBar.displayName = 'StyledTickBar';
 export const Thumb = styled('div', props => {
   const {
@@ -145,6 +151,7 @@ export const Thumb = styled('div', props => {
   };
 });
 Thumb.displayName = "Thumb";
+Thumb.displayName = 'Thumb';
 Thumb.displayName = 'StyledThumb';
 export const InnerThumb = styled('div', props => {
   const {
@@ -160,6 +167,7 @@ export const InnerThumb = styled('div', props => {
   };
 });
 InnerThumb.displayName = "InnerThumb";
+InnerThumb.displayName = 'InnerThumb';
 InnerThumb.displayName = 'StyledInnerThumb';
 export const ThumbValue = styled('div', props => {
   const {
@@ -184,4 +192,5 @@ export const ThumbValue = styled('div', props => {
   };
 });
 ThumbValue.displayName = "ThumbValue";
+ThumbValue.displayName = 'ThumbValue';
 ThumbValue.displayName = 'StyledThumbValue';

package/es/snackbar/snackbar-element.js

@@ -12,6 +12,7 @@ import { getOverrides } from '../helpers/overrides';
 import { useStyletron } from '../styles';
 import { StyledRoot, StyledContent, StyledStartEnhancerContainer, StyledSpinner, StyledMessage, StyledWrapActionButtonContainer, StyledActionButtonContainer } from './styled-components';
 // todo(flow->ts): types
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const ActionButton = /*#__PURE__*/React.forwardRef(({
   onClick,
   message,

package/es/snackbar/styled-components.js

@@ -24,12 +24,14 @@ export const StyledRoot = styled('div', ({
   };
 });
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 export const StyledContent = styled('div', {
   alignItems: 'center',
   display: 'inline-flex',
   width: '100%'
 });
 StyledContent.displayName = "StyledContent";
+StyledContent.displayName = 'StyledContent';
 export const StyledStartEnhancerContainer = styled('span', ({
   $theme
 }) => {
@@ -41,6 +43,7 @@ export const StyledStartEnhancerContainer = styled('span', ({
   };
 });
 StyledStartEnhancerContainer.displayName = "StyledStartEnhancerContainer";
+StyledStartEnhancerContainer.displayName = 'StyledStartEnhancerContainer';
 export const StyledSpinner = withStyle(Spinner, ({
   $height,
   $width
@@ -52,6 +55,7 @@ export const StyledSpinner = withStyle(Spinner, ({
   };
 });
 StyledSpinner.displayName = "StyledSpinner";
+StyledSpinner.displayName = 'StyledSpinner';
 export const StyledMessage = styled('p', //$FlowExpectedError[incompatible-shape]
 ({
   $theme,
@@ -71,11 +75,13 @@ export const StyledMessage = styled('p', //$FlowExpectedError[incompatible-shape
   };
 });
 StyledMessage.displayName = "StyledMessage";
+StyledMessage.displayName = 'StyledMessage';
 export const StyledWrapActionButtonContainer = styled('div', {
   display: 'flex',
   justifyContent: 'flex-end'
 });
 StyledWrapActionButtonContainer.displayName = "StyledWrapActionButtonContainer";
+StyledWrapActionButtonContainer.displayName = 'StyledWrapActionButtonContainer';
 export const StyledActionButtonContainer = styled('div', ({
   $theme
 }) => {
@@ -85,6 +91,7 @@ export const StyledActionButtonContainer = styled('div', ({
   };
 });
 StyledActionButtonContainer.displayName = "StyledActionButtonContainer";
+StyledActionButtonContainer.displayName = 'StyledActionButtonContainer';
 
 function placementRules(placement) {
   switch (placement) {
@@ -162,4 +169,5 @@ export const StyledPlacementContainer = styled('div', ({
     }
   };
 });
-StyledPlacementContainer.displayName = "StyledPlacementContainer";
+StyledPlacementContainer.displayName = "StyledPlacementContainer";
+StyledPlacementContainer.displayName = 'StyledPlacementContainer';

package/es/spinner/styled-components.js

@@ -73,4 +73,5 @@ export const StyledSpinner = styled('i', ({
     cursor: 'wait'
   };
 });
-StyledSpinner.displayName = "StyledSpinner";
+StyledSpinner.displayName = "StyledSpinner";
+StyledSpinner.displayName = 'StyledSpinner';

package/es/styles/__mocks__/styled.js

@@ -8,8 +8,6 @@ Copyright (c) Uber Technologies, Inc.
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
-
-/* flowlint unclear-type:off */
 import * as React from 'react';
 import { getInitialStyle } from 'styletron-standard';
 import { LightTheme } from '../../themes';
@@ -19,6 +17,7 @@ const MOCK_THEME = createMockTheme(LightTheme);
 const IDENTITY = x => x;
 
 export function useStyletron() {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   function css(styles) {
     return {
       label: 'useStyletron mock describes the applied css properties',
@@ -27,7 +26,8 @@ export function useStyletron() {
   }
 
   return [css, MOCK_THEME];
-}
+} // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
 export function styled(ElementName, objOrFn = {}) {
   class MockStyledComponent extends React.Component {
     constructor(...args) {
@@ -63,6 +63,7 @@ export function styled(ElementName, objOrFn = {}) {
     }
 
     getPassedProps() {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const {
         forwardedRef,
         ...restProps
@@ -99,8 +100,10 @@ export function styled(ElementName, objOrFn = {}) {
   }, props)));
 }
 export const withStyle = styled;
-export function withWrapper(StyledElement, wrapperFn) {
-  // eslint-disable-next-line react/display-name
+export function withWrapper( // eslint-disable-next-line @typescript-eslint/no-explicit-any
+StyledElement, // eslint-disable-next-line @typescript-eslint/no-explicit-any
+wrapperFn) {
+  // eslint-disable-next-line react/display-name,@typescript-eslint/no-explicit-any
   return /*#__PURE__*/React.forwardRef((props, ref) => wrapperFn(StyledElement)({
     ref: ref,
     ...props,

package/es/styles/styled.js

@@ -20,32 +20,33 @@ const wrapper = StyledComponent => {
   }))));
 };
 
-/* eslint-enable flowtype/generic-spacing */
-
-/* flowlint unclear-type:error */
 export function createThemedStyled() {
   return createStyled({
     wrapper,
     getInitialStyle,
-    driver
+    driver // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   });
 }
 export const styled = createThemedStyled();
 export function createThemedWithStyle() {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return styletronWithStyle;
 }
 export const withStyle = createThemedWithStyle();
 export function createThemedUseStyletron() {
   return function () {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const theme = React.useContext(ThemeContext);
     const [css] = styletronUseStyletron();
     return [css, theme];
   };
 }
-export const useStyletron = createThemedUseStyletron();
+export const useStyletron = createThemedUseStyletron(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
 export function withWrapper(StyledElement, wrapperFn) {
   return styletronWithWrapper(StyledElement, Styled => {
-    // eslint-disable-next-line react/display-name
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any,react/display-name
     return /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, theme => // @ts-ignore
     wrapperFn(Styled)({
       ref: ref,

package/es/table/index.js

@@ -13,4 +13,5 @@ export { SORT_DIRECTION } from './constants'; // Styled elements
 export { StyledTable, StyledFilterButton, StyledFilterContent, StyledFilterHeading, StyledFilterFooter, StyledHead, StyledHeadCell, StyledBody, StyledRow, StyledCell, StyledAction, StyledSortableLabel } from './styled-components'; // Flow
 
 export * from './types';
-/** @deprecated use HeadCellOverrides instead. To be removed in future versions.*/
+/** @deprecated use HeadCellOverrides instead. To be removed in future versions.*/
+// eslint-disable-next-line @typescript-eslint/no-unused-vars

package/es/table/styled-components.js

@@ -24,6 +24,7 @@ const StyledTableElement = styled('div', ({
   };
 });
 StyledTableElement.displayName = "StyledTableElement";
+StyledTableElement.displayName = 'StyledTableElement';
 export const StyledTable = withWrapper(StyledTableElement, StyledComponent => function StyledTable(props) {
   return /*#__PURE__*/React.createElement(StyledComponent, _extends({
     "data-baseweb": "table-custom",
@@ -43,6 +44,7 @@ const StyledHeadElement = styled('div', ({
   };
 });
 StyledHeadElement.displayName = "StyledHeadElement";
+StyledHeadElement.displayName = 'StyledHeadElement';
 export const StyledHead = withWrapper(StyledHeadElement, StyledComponent => function StyledHead(props) {
   return /*#__PURE__*/React.createElement(StyledComponent, _extends({
     role: "row"
@@ -73,6 +75,7 @@ const StyledHeadCellElement = styled('div', ({
   };
 });
 StyledHeadCellElement.displayName = "StyledHeadCellElement";
+StyledHeadCellElement.displayName = 'StyledHeadCellElement';
 export const StyledHeadCell = withWrapper(StyledHeadCellElement, StyledComponent => function StyledHeadCell(props) {
   return /*#__PURE__*/React.createElement(StyledComponent, _extends({
     role: "columnheader"
@@ -100,6 +103,7 @@ export const StyledSortableLabel = styled('button', ({
   };
 });
 StyledSortableLabel.displayName = "StyledSortableLabel";
+StyledSortableLabel.displayName = 'StyledSortableLabel';
 const StyledBodyElement = styled('div', ({
   $width
 }) => {
@@ -112,6 +116,7 @@ const StyledBodyElement = styled('div', ({
   };
 });
 StyledBodyElement.displayName = "StyledBodyElement";
+StyledBodyElement.displayName = 'StyledBodyElement';
 export const StyledBody = withWrapper(StyledBodyElement, StyledComponent => function StyledBody(props) {
   return /*#__PURE__*/React.createElement(StyledComponent, _extends({
     role: "rowgroup"
@@ -122,6 +127,7 @@ const StyledRowElement = styled('div', {
   alignItems: 'center'
 });
 StyledRowElement.displayName = "StyledRowElement";
+StyledRowElement.displayName = 'StyledRowElement';
 export const StyledRow = withWrapper(StyledRowElement, StyledComponent => function StyledRow(props) {
   return /*#__PURE__*/React.createElement(StyledComponent, _extends({
     role: "row"
@@ -143,6 +149,7 @@ const StyledCellElement = styled('div', ({
   };
 });
 StyledCellElement.displayName = "StyledCellElement";
+StyledCellElement.displayName = 'StyledCellElement';
 export const StyledCell = withWrapper(StyledCellElement, StyledComponent => function StyledCell(props) {
   return /*#__PURE__*/React.createElement(StyledComponent, _extends({
     role: "gridcell"
@@ -187,6 +194,7 @@ export const StyledFilterButton = styled('button', props => {
   };
 });
 StyledFilterButton.displayName = "StyledFilterButton";
+StyledFilterButton.displayName = 'StyledFilterButton';
 export const StyledFilterContent = styled('div', ({
   $theme
 }) => ({ ...expandBorderStyles($theme.borders.border300),
@@ -199,6 +207,7 @@ export const StyledFilterContent = styled('div', ({
   overflow: 'auto'
 }));
 StyledFilterContent.displayName = "StyledFilterContent";
+StyledFilterContent.displayName = 'StyledFilterContent';
 export const StyledFilterHeading = styled('div', ({
   $theme
 }) => ({ ...$theme.typography.font250,
@@ -209,6 +218,7 @@ export const StyledFilterHeading = styled('div', ({
   paddingLeft: $theme.sizing.scale600
 }));
 StyledFilterHeading.displayName = "StyledFilterHeading";
+StyledFilterHeading.displayName = 'StyledFilterHeading';
 export const StyledFilterFooter = styled('div', ({
   $theme
 }) => ({
@@ -222,6 +232,7 @@ export const StyledFilterFooter = styled('div', ({
   minWidth: '216px'
 }));
 StyledFilterFooter.displayName = "StyledFilterFooter";
+StyledFilterFooter.displayName = 'StyledFilterFooter';
 export const StyledAction = styled('button', ({
   $theme
 }) => {
@@ -243,4 +254,5 @@ export const StyledAction = styled('button', ({
     }
   };
 });
-StyledAction.displayName = "StyledAction";
+StyledAction.displayName = "StyledAction";
+StyledAction.displayName = 'StyledAction';

package/es/table-grid/styled-components.js

@@ -20,6 +20,7 @@ const StyledTableElement = withStyle(FlexStyledTable, props => {
   };
 });
 StyledTableElement.displayName = "StyledTableElement";
+StyledTableElement.displayName = 'StyledTableElement';
 export const StyledTable = withWrapper(StyledTableElement, StyledComponent => function StyledTable(props) {
   return /*#__PURE__*/React.createElement(StyledComponent, _extends({
     "data-baseweb": "table-grid"
@@ -44,6 +45,7 @@ export const StyledHeadCell = withStyle(FlexStyledHeadCell, ({
   };
 });
 StyledHeadCell.displayName = "StyledHeadCell";
+StyledHeadCell.displayName = 'StyledHeadCell';
 export const StyledBodyCell = withStyle(FlexStyledBodyCell, props => {
   return {
     display: 'block',
@@ -56,4 +58,5 @@ export const StyledBodyCell = withStyle(FlexStyledBodyCell, props => {
     }
   };
 });
-StyledBodyCell.displayName = "StyledBodyCell";
+StyledBodyCell.displayName = "StyledBodyCell";
+StyledBodyCell.displayName = 'StyledBodyCell';