baseui 12.0.0 → 12.1.0

package/es/accordion/stateful-panel-container.js

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

package/es/accordion/styled-components.js

@@ -19,6 +19,7 @@ export const Root = styled('ul', {
   width: '100%'
 });
 Root.displayName = "Root";
+Root.displayName = 'Root';
 export const PanelContainer = styled('li', props => {
   const {
     $expanded,
@@ -35,6 +36,7 @@ export const PanelContainer = styled('li', props => {
   };
 });
 PanelContainer.displayName = "PanelContainer";
+PanelContainer.displayName = 'PanelContainer';
 export const Header = styled('div', props => {
   const {
     $disabled,
@@ -68,6 +70,7 @@ export const Header = styled('div', props => {
   };
 });
 Header.displayName = "Header";
+Header.displayName = 'Header';
 export const ToggleIcon = styled('svg', props => {
   const {
     $theme,
@@ -81,6 +84,7 @@ export const ToggleIcon = styled('svg', props => {
   };
 });
 ToggleIcon.displayName = "ToggleIcon";
+ToggleIcon.displayName = 'ToggleIcon';
 export const ToggleIconGroup = styled('g', props => {
   const {
     $theme,
@@ -95,6 +99,7 @@ export const ToggleIconGroup = styled('g', props => {
   };
 });
 ToggleIconGroup.displayName = "ToggleIconGroup";
+ToggleIconGroup.displayName = 'ToggleIconGroup';
 export const Content = styled('div', props => {
   const {
     $theme: {
@@ -127,6 +132,7 @@ export const Content = styled('div', props => {
   };
 });
 Content.displayName = "Content";
+Content.displayName = 'Content';
 export const ContentAnimationContainer = styled('div', props => {
   const {
     $height,
@@ -142,4 +148,5 @@ export const ContentAnimationContainer = styled('div', props => {
     transitionTimingFunction: animation.easeOutQuinticCurve
   };
 });
-ContentAnimationContainer.displayName = "ContentAnimationContainer";
+ContentAnimationContainer.displayName = "ContentAnimationContainer";
+ContentAnimationContainer.displayName = 'ContentAnimationContainer';

package/es/app-nav-bar/app-nav-bar.js

@@ -30,13 +30,15 @@ function MainMenuItem(props) {
     if (isFocusVisible(event)) {
       setFocusVisible(true);
     }
-  }
+  } // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 
   function handleBlur(event) {
     if (focusVisible) {
       setFocusVisible(false);
     }
-  }
+  } // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 
   function handleClick(event) {
     if (onSelect) {
@@ -93,7 +95,9 @@ export default function AppNavBar(props) {
   const {
     title,
     mapItemToNode = defaultMapItemToNode,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onMainItemSelect = item => {},
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onUserItemSelect = item => {},
     overrides = {},
     userItems = [],

package/es/app-nav-bar/mobile-menu.js

@@ -11,7 +11,8 @@ import { Button } from '../button';
 import { Drawer, ANCHOR } from '../drawer';
 import { getOverrides, mergeOverrides } from '../helpers/overrides';
 import ArrowLeft from '../icon/arrow-left';
-import MenuIcon from '../icon/menu';
+import MenuIcon from '../icon/menu'; // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 import { MenuAdapter, ListItemLabel, ARTWORK_SIZES } from '../list';
 import { StatefulMenu } from '../menu';
 import { StyledSideMenuButton, StyledUserMenuProfileListItem } from './styled-components';
@@ -19,7 +20,7 @@ import UserProfileTile from './user-profile-tile';
 import { defaultMapItemToNode } from './utils';
 const USER_TITLE_ITEM = 'USER_TITLE_ITEM';
 const USER_MENU_ITEM = 'USER_MENU_ITEM';
-const PARENT_MENU_ITEM = 'PARENT_MENU_ITEM'; // eslint-disable-next-line react/display-name
+const PARENT_MENU_ITEM = 'PARENT_MENU_ITEM'; // eslint-disable-next-line @typescript-eslint/no-explicit-any,react/display-name
 
 const MobileNavMenuItem = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
@@ -91,6 +92,7 @@ export default function MobileMenu(props) {
   const [MobileDrawer, drawerProps] = getOverrides(overrides.MobileDrawer, Drawer);
   drawerProps.overrides = mergeOverrides({
     DrawerBody: {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       style: ({
         $theme
       }) => {

package/es/app-nav-bar/styled-components.js

@@ -38,6 +38,7 @@ const StyledButton = styled('button', ({
   cursor: 'pointer'
 }));
 StyledButton.displayName = "StyledButton";
+StyledButton.displayName = 'StyledButton';
 export const StyledRoot = styled('div', props => {
   const {
     $theme
@@ -83,8 +84,10 @@ export const StyledRoot = styled('div', props => {
   return style;
 });
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 export const StyledSubnavContainer = styled('div', {});
 StyledSubnavContainer.displayName = "StyledSubnavContainer";
+StyledSubnavContainer.displayName = 'StyledSubnavContainer';
 export const StyledSpacing = styled('div', props => {
   const {
     $theme
@@ -103,6 +106,7 @@ export const StyledSpacing = styled('div', props => {
   };
 });
 StyledSpacing.displayName = "StyledSpacing";
+StyledSpacing.displayName = 'StyledSpacing';
 export const StyledAppName = styled('div', ({
   $theme
 }) => ({ ...$theme.typography.font550,
@@ -112,6 +116,7 @@ export const StyledAppName = styled('div', ({
   }
 }));
 StyledAppName.displayName = "StyledAppName";
+StyledAppName.displayName = 'StyledAppName';
 export const StyledSideMenuButton = withStyle(StyledButton, ({
   $theme
 }) => ({ ...($theme.direction === 'rtl' ? {
@@ -125,6 +130,7 @@ export const StyledSideMenuButton = withStyle(StyledButton, ({
   paddingRight: $theme.sizing.scale100
 }));
 StyledSideMenuButton.displayName = "StyledSideMenuButton";
+StyledSideMenuButton.displayName = 'StyledSideMenuButton';
 export const StyledPrimaryMenuContainer = styled('div', ({
   $theme
 }) => {
@@ -141,6 +147,7 @@ export const StyledPrimaryMenuContainer = styled('div', ({
   };
 });
 StyledPrimaryMenuContainer.displayName = "StyledPrimaryMenuContainer";
+StyledPrimaryMenuContainer.displayName = 'StyledPrimaryMenuContainer';
 export const StyledMainMenuItem = styled('div', props => {
   const {
     $active,
@@ -186,6 +193,7 @@ export const StyledMainMenuItem = styled('div', props => {
   };
 });
 StyledMainMenuItem.displayName = "StyledMainMenuItem";
+StyledMainMenuItem.displayName = 'StyledMainMenuItem';
 export const StyledSecondaryMenuContainer = styled('div', ({
   $theme
 }) => {
@@ -203,7 +211,9 @@ export const StyledSecondaryMenuContainer = styled('div', ({
   };
 });
 StyledSecondaryMenuContainer.displayName = "StyledSecondaryMenuContainer";
+StyledSecondaryMenuContainer.displayName = 'StyledSecondaryMenuContainer';
 export const StyledUserMenuButton = StyledButton;
+StyledUserMenuButton.displayName = 'StyledUserMenuButton';
 export const StyledUserMenuProfileListItem = withStyle(StyledListItem, ({
   $theme
 }) => ({
@@ -216,6 +226,7 @@ export const StyledUserMenuProfileListItem = withStyle(StyledListItem, ({
   })
 }));
 StyledUserMenuProfileListItem.displayName = "StyledUserMenuProfileListItem";
+StyledUserMenuProfileListItem.displayName = 'StyledUserMenuProfileListItem';
 export const StyledUserProfileTileContainer = styled('div', ({
   $theme
 }) => {
@@ -231,6 +242,7 @@ export const StyledUserProfileTileContainer = styled('div', ({
   };
 });
 StyledUserProfileTileContainer.displayName = "StyledUserProfileTileContainer";
+StyledUserProfileTileContainer.displayName = 'StyledUserProfileTileContainer';
 export const StyledUserProfilePictureContainer = styled('div', ({
   $theme
 }) => {
@@ -242,6 +254,8 @@ export const StyledUserProfilePictureContainer = styled('div', ({
   };
 });
 StyledUserProfilePictureContainer.displayName = "StyledUserProfilePictureContainer";
+StyledUserProfilePictureContainer.displayName = 'StyledUserProfilePictureContainer'; // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 export const StyledUserProfileInfoContainer = styled('div', ({
   $theme
 }) => {
@@ -251,12 +265,15 @@ export const StyledUserProfileInfoContainer = styled('div', ({
   };
 });
 StyledUserProfileInfoContainer.displayName = "StyledUserProfileInfoContainer";
+StyledUserProfileInfoContainer.displayName = 'StyledUserProfileInfoContainer'; // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 export const StyledDesktopMenuContainer = styled('div', ({
   $theme
 }) => {
   return {};
 });
 StyledDesktopMenuContainer.displayName = "StyledDesktopMenuContainer";
+StyledDesktopMenuContainer.displayName = 'StyledDesktopMenuContainer';
 export const StyledDesktopMenu = styled('div', ({
   $theme
 }) => {
@@ -270,4 +287,5 @@ export const StyledDesktopMenu = styled('div', ({
     paddingBlockEnd: '18px'
   };
 });
-StyledDesktopMenu.displayName = "StyledDesktopMenu";
+StyledDesktopMenu.displayName = "StyledDesktopMenu";
+StyledDesktopMenu.displayName = 'StyledDesktopMenu';

package/es/app-nav-bar/user-menu.js

@@ -18,7 +18,7 @@ import { StatefulPopover, PLACEMENT, TRIGGER_TYPE } from '../popover';
 import { StyledUserMenuButton, StyledUserMenuProfileListItem } from './styled-components';
 import UserProfileTile from './user-profile-tile';
 import { defaultMapItemToNode } from './utils';
-const MENU_ITEM_WIDTH = '275px'; // eslint-disable-next-line react/display-name
+const MENU_ITEM_WIDTH = '275px'; // eslint-disable-next-line @typescript-eslint/no-explicit-any,react/display-name
 
 const UserMenuListItem = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {

package/es/aspect-ratio-box/aspect-ratio-box.js

@@ -28,7 +28,8 @@ const aspectRatioBoxStyle = ({
     display: 'table',
     clear: 'both'
   }
-});
+}); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
 
 const AspectRatioBox = ({
   forwardedRef,
@@ -44,6 +45,7 @@ const AspectRatioBox = ({
   const blockOverrides = mergeOverrides(aspectRatioBoxOverrides, overrides);
   return /*#__PURE__*/React.createElement(Block // coerced to any because of how react components are typed.
   // cannot guarantee an html element
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   , _extends({
     ref: forwardedRef,
     overrides: blockOverrides,

package/es/avatar/styled-components.js

@@ -31,6 +31,7 @@ export const Avatar = styled('img', props => {
   };
 });
 Avatar.displayName = "Avatar";
+Avatar.displayName = 'Avatar';
 export const Initials = styled('div', props => ({ ...props.$theme.typography.font300,
   color: props.$theme.colors.mono100,
   alignItems: 'center',
@@ -39,6 +40,7 @@ export const Initials = styled('div', props => ({ ...props.$theme.typography.fon
   height: '100%'
 }));
 Initials.displayName = "Initials";
+Initials.displayName = 'Initials';
 export const Root = styled('div', props => {
   const {
     $didImageFailToLoad
@@ -58,4 +60,5 @@ export const Root = styled('div', props => {
     width: $didImageFailToLoad ? themedSize : null
   };
 });
-Root.displayName = "Root";
+Root.displayName = "Root";
+Root.displayName = 'Root';

package/es/badge/styled-components.js

@@ -4,7 +4,7 @@ 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.
 */
-import { styled } from '../styles/index';
+import { styled } from '../styles';
 import { COLOR, SHAPE, ROLE, PLACEMENT, HIERARCHY } from './constants';
 
 function getColorStyles({
@@ -15,7 +15,7 @@ function getColorStyles({
   const COLOR_STYLES = {
     [HIERARCHY.primary]: {
       [COLOR.accent]: {
-        color: $theme.colors.contentInversePrimary,
+        color: $theme.colors.contentOnColor,
         backgroundColor: $theme.colors.backgroundAccent
       },
       [COLOR.primary]: {
@@ -23,15 +23,15 @@ function getColorStyles({
         backgroundColor: $theme.colors.backgroundInversePrimary
       },
       [COLOR.positive]: {
-        color: $theme.colors.contentInversePrimary,
+        color: $theme.colors.contentOnColor,
         backgroundColor: $theme.colors.backgroundPositive
       },
       [COLOR.negative]: {
-        color: $theme.colors.contentInversePrimary,
+        color: $theme.colors.contentOnColor,
         backgroundColor: $theme.colors.backgroundNegative
       },
       [COLOR.warning]: {
-        color: $theme.colors.primaryA,
+        color: $theme.colors.contentOnColorInverse,
         backgroundColor: $theme.colors.backgroundWarning
       }
     },
@@ -179,6 +179,7 @@ export const StyledRoot = styled('div', () => {
   };
 });
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 const TOP_PLACEMENTS = [PLACEMENT.topLeft, PLACEMENT.topRight, PLACEMENT.topLeftEdge, PLACEMENT.topEdge, PLACEMENT.topRightEdge, PLACEMENT.leftTopEdge, PLACEMENT.rightTopEdge];
 const BOTTOM_PLACEMENTS = [PLACEMENT.bottomLeft, PLACEMENT.bottomRight, PLACEMENT.bottomLeftEdge, PLACEMENT.bottomEdge, PLACEMENT.bottomRightEdge, PLACEMENT.leftBottomEdge, PLACEMENT.rightBottomEdge];
 const LEFT_PLACEMENTS = [PLACEMENT.topLeft, PLACEMENT.topLeftEdge, PLACEMENT.topEdge, PLACEMENT.bottomLeft, PLACEMENT.bottomLeftEdge, PLACEMENT.bottomEdge, PLACEMENT.leftTopEdge, PLACEMENT.leftBottomEdge];
@@ -226,6 +227,7 @@ export const StyledPositioner = styled('div', ({
   };
 });
 StyledPositioner.displayName = "StyledPositioner";
+StyledPositioner.displayName = 'StyledPositioner';
 export const StyledBadge = styled('div', ({
   $theme,
   $shape = SHAPE.rectangle,
@@ -251,6 +253,7 @@ export const StyledBadge = styled('div', ({
   };
 });
 StyledBadge.displayName = "StyledBadge";
+StyledBadge.displayName = 'StyledBadge';
 export const StyledNotificationCircle = styled('div', ({
   $theme,
   $color = COLOR.accent,
@@ -273,6 +276,7 @@ export const StyledNotificationCircle = styled('div', ({
   };
 });
 StyledNotificationCircle.displayName = "StyledNotificationCircle";
+StyledNotificationCircle.displayName = 'StyledNotificationCircle';
 export const StyledHintDot = styled('div', ({
   $theme,
   $color = COLOR.accent,
@@ -293,4 +297,5 @@ export const StyledHintDot = styled('div', ({
     })
   };
 });
-StyledHintDot.displayName = "StyledHintDot";
+StyledHintDot.displayName = "StyledHintDot";
+StyledHintDot.displayName = 'StyledHintDot';

package/es/banner/styled-components.js

@@ -4,7 +4,7 @@ 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.
 */
-import { styled } from '../styles/index';
+import { styled } from '../styles';
 import { ACTION_POSITION } from './constants';
 export const StyledRoot = styled('div', ({
   $theme,
@@ -24,10 +24,14 @@ export const StyledRoot = styled('div', ({
     gridColumnGap: $theme.sizing.scale600,
     gridTemplateColumns: 'min-content auto min-content',
     gridTemplateRows: 'auto min-content',
-    margin: $theme.sizing.scale600
+    marginTop: $theme.sizing.scale600,
+    marginRight: $theme.sizing.scale600,
+    marginBottom: $theme.sizing.scale600,
+    marginLeft: $theme.sizing.scale600
   };
 });
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 export const StyledLeadingContent = styled('div', ({
   $theme,
   $includesArtwork
@@ -39,6 +43,7 @@ export const StyledLeadingContent = styled('div', ({
   };
 });
 StyledLeadingContent.displayName = "StyledLeadingContent";
+StyledLeadingContent.displayName = 'StyledLeadingContent';
 export const StyledMessageContent = styled('div', ({
   $theme,
   $actionPosition
@@ -52,6 +57,8 @@ export const StyledMessageContent = styled('div', ({
   };
 });
 StyledMessageContent.displayName = "StyledMessageContent";
+StyledMessageContent.displayName = 'StyledMessageContent'; // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 export const StyledTrailingContent = styled('div', ({
   $theme
 }) => {
@@ -62,6 +69,7 @@ export const StyledTrailingContent = styled('div', ({
   };
 });
 StyledTrailingContent.displayName = "StyledTrailingContent";
+StyledTrailingContent.displayName = 'StyledTrailingContent';
 export const StyledBelowContent = styled('div', ({
   $theme,
   $actionPosition
@@ -73,18 +81,21 @@ export const StyledBelowContent = styled('div', ({
   };
 });
 StyledBelowContent.displayName = "StyledBelowContent";
+StyledBelowContent.displayName = 'StyledBelowContent';
 export const StyledTitle = styled('div', ({
   $theme
 }) => {
   return $theme.typography.LabelMedium;
 });
 StyledTitle.displayName = "StyledTitle";
+StyledTitle.displayName = 'StyledTitle';
 export const StyledMessage = styled('div', ({
   $theme
 }) => {
   return $theme.typography.ParagraphMedium;
 });
 StyledMessage.displayName = "StyledMessage";
+StyledMessage.displayName = 'StyledMessage';
 export const StyledTrailingButtonContainer = styled('div', ({
   $theme
 }) => {
@@ -95,6 +106,7 @@ export const StyledTrailingButtonContainer = styled('div', ({
   };
 });
 StyledTrailingButtonContainer.displayName = "StyledTrailingButtonContainer";
+StyledTrailingButtonContainer.displayName = 'StyledTrailingButtonContainer';
 export const StyledTrailingIconButton = styled('button', ({
   $theme,
   $nested
@@ -119,4 +131,5 @@ export const StyledTrailingIconButton = styled('button', ({
     }
   };
 });
-StyledTrailingIconButton.displayName = "StyledTrailingIconButton";
+StyledTrailingIconButton.displayName = "StyledTrailingIconButton";
+StyledTrailingIconButton.displayName = 'StyledTrailingIconButton';

package/es/block/block.js

@@ -85,6 +85,7 @@ const Block = ({
   const [BaseBlock, baseBlockProps] = getOverrides(overrides.Block, StyledBlock);
   return /*#__PURE__*/React.createElement(BaseBlock // coerced to any because because of how react components are typed.
   // cannot guarantee an html element
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   , _extends({
     ref: forwardedRef,
     $as: as,
@@ -155,7 +156,8 @@ const Block = ({
     $whiteSpace: whiteSpace,
     "data-baseweb": "block"
   }, restProps, baseBlockProps), children);
-};
+}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
 
 const BlockComponent = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Block, _extends({}, props, {
   forwardedRef: ref

package/es/block/styled-components.js

@@ -404,4 +404,5 @@ export const StyledBlock = styled('div', props => {
   });
   return styles.value();
 });
-StyledBlock.displayName = "StyledBlock";
+StyledBlock.displayName = "StyledBlock";
+StyledBlock.displayName = 'StyledBlock';

package/es/breadcrumbs/styled-components.js

@@ -14,6 +14,7 @@ export const StyledRoot = styled('nav', ({
   };
 });
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 export const StyledList = styled('ol', ({
   $theme
 }) => {
@@ -25,6 +26,7 @@ export const StyledList = styled('ol', ({
   };
 });
 StyledList.displayName = "StyledList";
+StyledList.displayName = 'StyledList';
 export const StyledListItem = styled('li', ({
   $theme
 }) => {
@@ -34,6 +36,7 @@ export const StyledListItem = styled('li', ({
   };
 });
 StyledListItem.displayName = "StyledListItem";
+StyledListItem.displayName = 'StyledListItem';
 export const StyledSeparator = styled('div', ({
   $theme
 }) => {
@@ -45,4 +48,5 @@ export const StyledSeparator = styled('div', ({
     verticalAlign: 'middle'
   };
 });
-StyledSeparator.displayName = "StyledSeparator";
+StyledSeparator.displayName = "StyledSeparator";
+StyledSeparator.displayName = 'StyledSeparator';

package/es/button/button.js

@@ -59,16 +59,24 @@ class Button extends React.Component {
   render() {
     const {
       overrides = {},
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       size,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       kind,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       shape,
       isLoading,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       isSelected,
       // Removing from restProps
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       startEnhancer,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       endEnhancer,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       children,
       forwardedRef,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       colors,
       ...restProps
     } = this.props; // Get overrides

package/es/button/styled-components.js

@@ -79,6 +79,7 @@ export const BaseButton = styled('button', ({
   })
 }));
 BaseButton.displayName = "BaseButton";
+BaseButton.displayName = 'BaseButton';
 export const EndEnhancer = styled('div', ({
   $theme
 }) => {
@@ -89,6 +90,7 @@ export const EndEnhancer = styled('div', ({
   };
 });
 EndEnhancer.displayName = "EndEnhancer";
+EndEnhancer.displayName = 'EndEnhancer';
 export const StartEnhancer = styled('div', ({
   $theme
 }) => {
@@ -99,6 +101,7 @@ export const StartEnhancer = styled('div', ({
   };
 });
 StartEnhancer.displayName = "StartEnhancer";
+StartEnhancer.displayName = 'StartEnhancer';
 export const LoadingSpinnerContainer = styled('div', ({
   $theme,
   $size
@@ -122,6 +125,7 @@ export const LoadingSpinnerContainer = styled('div', ({
   };
 });
 LoadingSpinnerContainer.displayName = "LoadingSpinnerContainer";
+LoadingSpinnerContainer.displayName = 'LoadingSpinnerContainer';
 export const LoadingSpinner = styled('span', ({
   $theme,
   $kind,
@@ -181,6 +185,7 @@ export const LoadingSpinner = styled('span', ({
   };
 });
 LoadingSpinner.displayName = "LoadingSpinner";
+LoadingSpinner.displayName = 'LoadingSpinner';
 
 function getLoadingSpinnerColors({
   $theme,
@@ -239,6 +244,8 @@ function getBorderRadiiStyles({
     }
   } else if ($shape === SHAPE.circle || $shape === SHAPE.round) {
     value = '50%';
+  } else if ($size === SIZE.mini) {
+    value = $theme.borders.buttonBorderRadiusMini;
   }
 
   return {

package/es/button-group/stateful-button-group.js

@@ -10,6 +10,7 @@ import * as React from 'react';
 import ButtonGroup from './button-group';
 import StatefulContainer from './stateful-container';
 export default function StatefulButtonGroup(props) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const {
     children,
     initialState,

package/es/button-group/stateful-container.js

@@ -14,7 +14,8 @@ function isSelectedDefined(selected) {
   return Array.isArray(selected) || typeof selected === 'number';
 }
 
-function defaultStateReducer(type, nextState, currentState) {
+function defaultStateReducer(type, nextState, // eslint-disable-next-line @typescript-eslint/no-unused-vars
+currentState) {
   return nextState;
 }
 
@@ -72,6 +73,7 @@ export default class StatefulContainer extends React.Component {
   }
 
   render() {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const {
       initialState,
       stateReducer,

package/es/button-group/styled-components.js

@@ -18,4 +18,5 @@ export const StyledRoot = styled('div', ({
     marginRight: margin
   };
 });
-StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';

package/es/card/index.js

@@ -7,4 +7,5 @@ LICENSE file in the root directory of this source tree.
 export { default as Card, hasThumbnail } from './card';
 export { Action as StyledAction, Body as StyledBody, Contents as StyledContents, HeaderImage as StyledHeaderImage, Thumbnail as StyledThumbnail, Title as StyledTitle, Root as StyledRoot, Root as StyledWrapper } from './styled-components';
 export * from './types';
-/** @deprecated To be removed in future versions */
+/** @deprecated To be removed in future versions */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars