baseui 12.0.0 → 12.1.0

package/es/tree-view/tree-view.js

@@ -42,6 +42,7 @@ export default function TreeView(props) {
   };
 
   const onKeyDown = (e, node) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const elementId = e.target.getAttribute('data-nodeid'); // this check prevents bubbling
 
     if (elementId !== getId(node) && parseInt(elementId) !== getId(node)) {
@@ -128,7 +129,8 @@ export default function TreeView(props) {
     if (selectedNodeId === null && data.length) {
       setSelectedNodeId(getId(data[0]));
     }
-  };
+  }; // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 
   const onBlur = event => {
     if (focusVisible) {

package/es/types/globals.d.js

@@ -0,0 +1,12 @@
+/*
+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.
+*/
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+let PlaywrightTest;
+
+(function (_PlaywrightTest) {})(PlaywrightTest || (PlaywrightTest = {}));

package/es/utils/deep-merge.js

@@ -4,8 +4,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 */
 export default function deepMerge(target, ...sources) {
   target = target || {};
   const len = sources.length;
@@ -32,9 +30,6 @@ export default function deepMerge(target, ...sources) {
 
   return target;
 }
-/* flowlint unclear-type:error */
-
-/* eslint-disable-next-line flowtype/no-weak-types */
 
 function isCloneable(obj) {
   /* eslint-disable-next-line eqeqeq */

package/es/utils/deprecated-component.js

@@ -8,6 +8,7 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 export default function (Component, displayName) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const DeprecatedComponent = /*#__PURE__*/React.forwardRef((props, ref) => {
     if (process.env.NODE_ENV !== "production") {
       console.warn(`We have stabilized the ${displayName} component, so you can drop the "Unstable_" prefix from your imports. We will remove the "Unstable_" exports soon, so please make these changes as soon as possible!`);

package/es/utils/focusVisible.js

@@ -147,14 +147,16 @@ export function initFocusVisible(node) {
     prepare(node.ownerDocument);
   }
 }
-export const forkFocus = (rootProps, handler) => e => {
+export const forkFocus = // eslint-disable-next-line @typescript-eslint/no-explicit-any
+(rootProps, handler) => e => {
   if (typeof rootProps.onFocus === 'function') {
     rootProps.onFocus(e);
   }
 
   handler(e);
 };
-export const forkBlur = (rootProps, handler) => e => {
+export const forkBlur = // eslint-disable-next-line @typescript-eslint/no-explicit-any
+(rootProps, handler) => e => {
   if (typeof rootProps.onBlur === 'function') {
     rootProps.onBlur(e);
   }

package/esm/accordion/accordion.js

@@ -54,8 +54,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.
 */
-
-/* eslint-disable cup/no-undef */
 import * as React from 'react';
 import { getOverrides } from '../helpers/overrides';
 import { Root as StyledRoot } from './styled-components';
@@ -88,7 +86,8 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
 
   _createClass(Accordion, [{
     key: "onPanelChange",
-    value: function onPanelChange(key, onChange) {
+    value: // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    function onPanelChange(key, onChange) {
       for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
         args[_key2 - 2] = arguments[_key2];
       }
@@ -189,7 +188,8 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
           disabled = _this$props2.disabled,
           children = _this$props2.children,
           renderAll = _this$props2.renderAll,
-          overrides = _this$props2.overrides;
+          overrides = _this$props2.overrides; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
       return React.Children.map(children, function (child, index) {
         if (!child) return;
         var itemRef = /*#__PURE__*/React.createRef();

package/esm/accordion/panel.js

@@ -67,7 +67,8 @@ var Panel = function Panel(_ref, ref) {
       }));
     }
   }, [localState]);
-  var handleBlur = React.useCallback(function (event) {
+  var handleBlur = React.useCallback( // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  function (event) {
     if (localState.isFocusVisible) {
       setLocalState(_objectSpread(_objectSpread({}, localState), {}, {
         isFocusVisible: false
@@ -103,7 +104,7 @@ var Panel = function Panel(_ref, ref) {
     }
 
     typeof onKeyDown === 'function' && onKeyDown(e);
-  }, [expanded, disabled, onChange, onKeyDown]);
+  }, [expanded, disabled, onChange, onKeyDown]); // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
   var _animateRef = React.useRef(null);
 

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

@@ -91,6 +91,7 @@ var StatefulPanelContainer = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       var _this$props = this.props,
           children = _this$props.children,
           initialState = _this$props.initialState,

package/esm/accordion/styled-components.js

@@ -25,6 +25,7 @@ export var Root = styled('ul', {
   width: '100%'
 });
 Root.displayName = "Root";
+Root.displayName = 'Root';
 export var PanelContainer = styled('li', function (props) {
   var $expanded = props.$expanded,
       colors = props.$theme.colors;
@@ -37,6 +38,7 @@ export var PanelContainer = styled('li', function (props) {
   };
 });
 PanelContainer.displayName = "PanelContainer";
+PanelContainer.displayName = 'PanelContainer';
 export var Header = styled('div', function (props) {
   var $disabled = props.$disabled,
       $isFocusVisible = props.$isFocusVisible,
@@ -67,6 +69,7 @@ export var Header = styled('div', function (props) {
   });
 });
 Header.displayName = "Header";
+Header.displayName = 'Header';
 export var ToggleIcon = styled('svg', function (props) {
   var $theme = props.$theme,
       $disabled = props.$disabled,
@@ -78,6 +81,7 @@ export var ToggleIcon = styled('svg', function (props) {
   });
 });
 ToggleIcon.displayName = "ToggleIcon";
+ToggleIcon.displayName = 'ToggleIcon';
 export var ToggleIconGroup = styled('g', function (props) {
   var $theme = props.$theme,
       $expanded = props.$expanded;
@@ -90,6 +94,7 @@ export var ToggleIconGroup = styled('g', function (props) {
   };
 });
 ToggleIconGroup.displayName = "ToggleIconGroup";
+ToggleIconGroup.displayName = 'ToggleIconGroup';
 export var Content = styled('div', function (props) {
   var _props$$theme2 = props.$theme,
       animation = _props$$theme2.animation,
@@ -119,6 +124,7 @@ export var Content = styled('div', function (props) {
   });
 });
 Content.displayName = "Content";
+Content.displayName = 'Content';
 export var ContentAnimationContainer = styled('div', function (props) {
   var $height = props.$height,
       animation = props.$theme.animation;
@@ -130,4 +136,5 @@ export var ContentAnimationContainer = styled('div', function (props) {
     transitionTimingFunction: animation.easeOutQuinticCurve
   };
 });
-ContentAnimationContainer.displayName = "ContentAnimationContainer";
+ContentAnimationContainer.displayName = "ContentAnimationContainer";
+ContentAnimationContainer.displayName = 'ContentAnimationContainer';

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

@@ -48,13 +48,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) {

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

@@ -44,7 +44,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';
@@ -52,7 +53,7 @@ import UserProfileTile from './user-profile-tile';
 import { defaultMapItemToNode } from './utils';
 var USER_TITLE_ITEM = 'USER_TITLE_ITEM';
 var USER_MENU_ITEM = 'USER_MENU_ITEM';
-var PARENT_MENU_ITEM = 'PARENT_MENU_ITEM'; // eslint-disable-next-line react/display-name
+var PARENT_MENU_ITEM = 'PARENT_MENU_ITEM'; // eslint-disable-next-line @typescript-eslint/no-explicit-any,react/display-name
 
 var MobileNavMenuItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var item = props.item,
@@ -148,6 +149,7 @@ export default function MobileMenu(props) {
 
   drawerProps.overrides = mergeOverrides({
     DrawerBody: {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       style: function style(_ref2) {
         var $theme = _ref2.$theme;
         return {

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

@@ -45,6 +45,7 @@ var StyledButton = styled('button', function (_ref) {
   };
 });
 StyledButton.displayName = "StyledButton";
+StyledButton.displayName = 'StyledButton';
 export var StyledRoot = styled('div', function (props) {
   var $theme = props.$theme;
   var mediaQueries = getMediaQueries($theme.breakpoints);
@@ -89,8 +90,10 @@ export var StyledRoot = styled('div', function (props) {
   return style;
 });
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 export var StyledSubnavContainer = styled('div', {});
 StyledSubnavContainer.displayName = "StyledSubnavContainer";
+StyledSubnavContainer.displayName = 'StyledSubnavContainer';
 export var StyledSpacing = styled('div', function (props) {
   var $theme = props.$theme;
   return _defineProperty({
@@ -106,6 +109,7 @@ export var StyledSpacing = styled('div', function (props) {
   });
 });
 StyledSpacing.displayName = "StyledSpacing";
+StyledSpacing.displayName = 'StyledSpacing';
 export var StyledAppName = styled('div', function (_ref3) {
   var $theme = _ref3.$theme;
   return _objectSpread(_objectSpread({}, $theme.typography.font550), {}, _defineProperty({
@@ -114,6 +118,7 @@ export var StyledAppName = styled('div', function (_ref3) {
   }, $theme.mediaQuery.medium, _objectSpread({}, $theme.typography.font650)));
 });
 StyledAppName.displayName = "StyledAppName";
+StyledAppName.displayName = 'StyledAppName';
 export var StyledSideMenuButton = withStyle(StyledButton, function (_ref4) {
   var $theme = _ref4.$theme;
   return _objectSpread(_objectSpread({}, $theme.direction === 'rtl' ? {
@@ -128,6 +133,7 @@ export var StyledSideMenuButton = withStyle(StyledButton, function (_ref4) {
   });
 });
 StyledSideMenuButton.displayName = "StyledSideMenuButton";
+StyledSideMenuButton.displayName = 'StyledSideMenuButton';
 export var StyledPrimaryMenuContainer = styled('div', function (_ref5) {
   var $theme = _ref5.$theme;
   return {
@@ -143,6 +149,7 @@ export var StyledPrimaryMenuContainer = styled('div', function (_ref5) {
   };
 });
 StyledPrimaryMenuContainer.displayName = "StyledPrimaryMenuContainer";
+StyledPrimaryMenuContainer.displayName = 'StyledPrimaryMenuContainer';
 export var StyledMainMenuItem = styled('div', function (props) {
   var $active = props.$active,
       $isFocusVisible = props.$isFocusVisible,
@@ -183,6 +190,7 @@ export var StyledMainMenuItem = styled('div', function (props) {
   };
 });
 StyledMainMenuItem.displayName = "StyledMainMenuItem";
+StyledMainMenuItem.displayName = 'StyledMainMenuItem';
 export var StyledSecondaryMenuContainer = styled('div', function (_ref6) {
   var $theme = _ref6.$theme;
   return {
@@ -199,7 +207,9 @@ export var StyledSecondaryMenuContainer = styled('div', function (_ref6) {
   };
 });
 StyledSecondaryMenuContainer.displayName = "StyledSecondaryMenuContainer";
+StyledSecondaryMenuContainer.displayName = 'StyledSecondaryMenuContainer';
 export var StyledUserMenuButton = StyledButton;
+StyledUserMenuButton.displayName = 'StyledUserMenuButton';
 export var StyledUserMenuProfileListItem = withStyle(StyledListItem, function (_ref7) {
   var $theme = _ref7.$theme;
   return _objectSpread({
@@ -212,6 +222,7 @@ export var StyledUserMenuProfileListItem = withStyle(StyledListItem, function (_
   });
 });
 StyledUserMenuProfileListItem.displayName = "StyledUserMenuProfileListItem";
+StyledUserMenuProfileListItem.displayName = 'StyledUserMenuProfileListItem';
 export var StyledUserProfileTileContainer = styled('div', function (_ref8) {
   var $theme = _ref8.$theme;
   return {
@@ -226,6 +237,7 @@ export var StyledUserProfileTileContainer = styled('div', function (_ref8) {
   };
 });
 StyledUserProfileTileContainer.displayName = "StyledUserProfileTileContainer";
+StyledUserProfileTileContainer.displayName = 'StyledUserProfileTileContainer';
 export var StyledUserProfilePictureContainer = styled('div', function (_ref9) {
   var $theme = _ref9.$theme;
   return _objectSpread({}, $theme.direction === 'rtl' ? {
@@ -235,6 +247,8 @@ export var StyledUserProfilePictureContainer = styled('div', function (_ref9) {
   });
 });
 StyledUserProfilePictureContainer.displayName = "StyledUserProfilePictureContainer";
+StyledUserProfilePictureContainer.displayName = 'StyledUserProfilePictureContainer'; // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 export var StyledUserProfileInfoContainer = styled('div', function (_ref10) {
   var $theme = _ref10.$theme;
   return {
@@ -243,11 +257,14 @@ export var StyledUserProfileInfoContainer = styled('div', function (_ref10) {
   };
 });
 StyledUserProfileInfoContainer.displayName = "StyledUserProfileInfoContainer";
+StyledUserProfileInfoContainer.displayName = 'StyledUserProfileInfoContainer'; // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 export var StyledDesktopMenuContainer = styled('div', function (_ref11) {
   var $theme = _ref11.$theme;
   return {};
 });
 StyledDesktopMenuContainer.displayName = "StyledDesktopMenuContainer";
+StyledDesktopMenuContainer.displayName = 'StyledDesktopMenuContainer';
 export var StyledDesktopMenu = styled('div', function (_ref12) {
   var $theme = _ref12.$theme;
   return {
@@ -260,4 +277,5 @@ export var StyledDesktopMenu = styled('div', function (_ref12) {
     paddingBlockEnd: '18px'
   };
 });
-StyledDesktopMenu.displayName = "StyledDesktopMenu";
+StyledDesktopMenu.displayName = "StyledDesktopMenu";
+StyledDesktopMenu.displayName = 'StyledDesktopMenu';

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

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

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

@@ -35,7 +35,8 @@ var aspectRatioBoxStyle = function aspectRatioBoxStyle(_ref) {
       clear: 'both'
     }
   };
-};
+}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
 
 var AspectRatioBox = function AspectRatioBox(_ref2) {
   var forwardedRef = _ref2.forwardedRef,
@@ -53,6 +54,7 @@ var AspectRatioBox = function AspectRatioBox(_ref2) {
   var 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/esm/avatar/styled-components.js

@@ -35,6 +35,7 @@ export var Avatar = styled('img', function (props) {
   };
 });
 Avatar.displayName = "Avatar";
+Avatar.displayName = 'Avatar';
 export var Initials = styled('div', function (props) {
   return _objectSpread(_objectSpread({}, props.$theme.typography.font300), {}, {
     color: props.$theme.colors.mono100,
@@ -45,6 +46,7 @@ export var Initials = styled('div', function (props) {
   });
 });
 Initials.displayName = "Initials";
+Initials.displayName = 'Initials';
 export var Root = styled('div', function (props) {
   var $didImageFailToLoad = props.$didImageFailToLoad;
   var themedSize = getSize(props);
@@ -62,4 +64,5 @@ export var Root = styled('div', function (props) {
     width: $didImageFailToLoad ? themedSize : null
   };
 });
-Root.displayName = "Root";
+Root.displayName = "Root";
+Root.displayName = 'Root';

package/esm/badge/styled-components.js

@@ -12,7 +12,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(_ref) {
@@ -22,19 +22,19 @@ function getColorStyles(_ref) {
       $hierarchy = _ref.$hierarchy,
       $color = _ref.$color;
   var COLOR_STYLES = (_COLOR_STYLES = {}, _defineProperty(_COLOR_STYLES, HIERARCHY.primary, (_HIERARCHY$primary = {}, _defineProperty(_HIERARCHY$primary, COLOR.accent, {
-    color: $theme.colors.contentInversePrimary,
+    color: $theme.colors.contentOnColor,
     backgroundColor: $theme.colors.backgroundAccent
   }), _defineProperty(_HIERARCHY$primary, COLOR.primary, {
     color: $theme.colors.contentInversePrimary,
     backgroundColor: $theme.colors.backgroundInversePrimary
   }), _defineProperty(_HIERARCHY$primary, COLOR.positive, {
-    color: $theme.colors.contentInversePrimary,
+    color: $theme.colors.contentOnColor,
     backgroundColor: $theme.colors.backgroundPositive
   }), _defineProperty(_HIERARCHY$primary, COLOR.negative, {
-    color: $theme.colors.contentInversePrimary,
+    color: $theme.colors.contentOnColor,
     backgroundColor: $theme.colors.backgroundNegative
   }), _defineProperty(_HIERARCHY$primary, COLOR.warning, {
-    color: $theme.colors.primaryA,
+    color: $theme.colors.contentOnColorInverse,
     backgroundColor: $theme.colors.backgroundWarning
   }), _HIERARCHY$primary)), _defineProperty(_COLOR_STYLES, HIERARCHY.secondary, (_HIERARCHY$secondary = {}, _defineProperty(_HIERARCHY$secondary, COLOR.accent, {
     color: $theme.colors.contentAccent,
@@ -122,6 +122,7 @@ export var StyledRoot = styled('div', function () {
   };
 });
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 var TOP_PLACEMENTS = [PLACEMENT.topLeft, PLACEMENT.topRight, PLACEMENT.topLeftEdge, PLACEMENT.topEdge, PLACEMENT.topRightEdge, PLACEMENT.leftTopEdge, PLACEMENT.rightTopEdge];
 var BOTTOM_PLACEMENTS = [PLACEMENT.bottomLeft, PLACEMENT.bottomRight, PLACEMENT.bottomLeftEdge, PLACEMENT.bottomEdge, PLACEMENT.bottomRightEdge, PLACEMENT.leftBottomEdge, PLACEMENT.rightBottomEdge];
 var LEFT_PLACEMENTS = [PLACEMENT.topLeft, PLACEMENT.topLeftEdge, PLACEMENT.topEdge, PLACEMENT.bottomLeft, PLACEMENT.bottomLeftEdge, PLACEMENT.bottomEdge, PLACEMENT.leftTopEdge, PLACEMENT.leftBottomEdge];
@@ -168,6 +169,7 @@ export var StyledPositioner = styled('div', function (_ref2) {
   });
 });
 StyledPositioner.displayName = "StyledPositioner";
+StyledPositioner.displayName = 'StyledPositioner';
 export var StyledBadge = styled('div', function (_ref3) {
   var $theme = _ref3.$theme,
       _ref3$$shape = _ref3.$shape,
@@ -193,6 +195,7 @@ export var StyledBadge = styled('div', function (_ref3) {
   })), $hierarchy === HIERARCHY.primary ? $theme.typography.LabelSmall : $theme.typography.ParagraphSmall);
 });
 StyledBadge.displayName = "StyledBadge";
+StyledBadge.displayName = 'StyledBadge';
 export var StyledNotificationCircle = styled('div', function (_ref4) {
   var $theme = _ref4.$theme,
       _ref4$$color = _ref4.$color,
@@ -213,6 +216,7 @@ export var StyledNotificationCircle = styled('div', function (_ref4) {
   })), $theme.typography.LabelXSmall);
 });
 StyledNotificationCircle.displayName = "StyledNotificationCircle";
+StyledNotificationCircle.displayName = 'StyledNotificationCircle';
 export var StyledHintDot = styled('div', function (_ref5) {
   var $theme = _ref5.$theme,
       _ref5$$color = _ref5.$color,
@@ -232,4 +236,5 @@ export var StyledHintDot = styled('div', function (_ref5) {
     $color: $color
   }));
 });
-StyledHintDot.displayName = "StyledHintDot";
+StyledHintDot.displayName = "StyledHintDot";
+StyledHintDot.displayName = 'StyledHintDot';

package/esm/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 var StyledRoot = styled('div', function (_ref) {
   var $theme = _ref.$theme,
@@ -23,10 +23,14 @@ export var StyledRoot = styled('div', function (_ref) {
     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 var StyledLeadingContent = styled('div', function (_ref2) {
   var $theme = _ref2.$theme,
       $includesArtwork = _ref2.$includesArtwork;
@@ -37,6 +41,7 @@ export var StyledLeadingContent = styled('div', function (_ref2) {
   };
 });
 StyledLeadingContent.displayName = "StyledLeadingContent";
+StyledLeadingContent.displayName = 'StyledLeadingContent';
 export var StyledMessageContent = styled('div', function (_ref3) {
   var $theme = _ref3.$theme,
       $actionPosition = _ref3.$actionPosition;
@@ -49,6 +54,8 @@ export var StyledMessageContent = styled('div', function (_ref3) {
   };
 });
 StyledMessageContent.displayName = "StyledMessageContent";
+StyledMessageContent.displayName = 'StyledMessageContent'; // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 export var StyledTrailingContent = styled('div', function (_ref4) {
   var $theme = _ref4.$theme;
   return {
@@ -58,6 +65,7 @@ export var StyledTrailingContent = styled('div', function (_ref4) {
   };
 });
 StyledTrailingContent.displayName = "StyledTrailingContent";
+StyledTrailingContent.displayName = 'StyledTrailingContent';
 export var StyledBelowContent = styled('div', function (_ref5) {
   var $theme = _ref5.$theme,
       $actionPosition = _ref5.$actionPosition;
@@ -68,16 +76,19 @@ export var StyledBelowContent = styled('div', function (_ref5) {
   };
 });
 StyledBelowContent.displayName = "StyledBelowContent";
+StyledBelowContent.displayName = 'StyledBelowContent';
 export var StyledTitle = styled('div', function (_ref6) {
   var $theme = _ref6.$theme;
   return $theme.typography.LabelMedium;
 });
 StyledTitle.displayName = "StyledTitle";
+StyledTitle.displayName = 'StyledTitle';
 export var StyledMessage = styled('div', function (_ref7) {
   var $theme = _ref7.$theme;
   return $theme.typography.ParagraphMedium;
 });
 StyledMessage.displayName = "StyledMessage";
+StyledMessage.displayName = 'StyledMessage';
 export var StyledTrailingButtonContainer = styled('div', function (_ref8) {
   var $theme = _ref8.$theme;
   return {
@@ -87,6 +98,7 @@ export var StyledTrailingButtonContainer = styled('div', function (_ref8) {
   };
 });
 StyledTrailingButtonContainer.displayName = "StyledTrailingButtonContainer";
+StyledTrailingButtonContainer.displayName = 'StyledTrailingButtonContainer';
 export var StyledTrailingIconButton = styled('button', function (_ref9) {
   var $theme = _ref9.$theme,
       $nested = _ref9.$nested;
@@ -110,4 +122,5 @@ export var StyledTrailingIconButton = styled('button', function (_ref9) {
     }
   };
 });
-StyledTrailingIconButton.displayName = "StyledTrailingIconButton";
+StyledTrailingIconButton.displayName = "StyledTrailingIconButton";
+StyledTrailingIconButton.displayName = 'StyledTrailingIconButton';

package/esm/block/block.js

@@ -109,6 +109,7 @@ var Block = function Block(_ref) {
 
   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,
@@ -179,7 +180,8 @@ var Block = function Block(_ref) {
     $whiteSpace: whiteSpace,
     "data-baseweb": "block"
   }, restProps, baseBlockProps), children);
-};
+}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
 
 var BlockComponent = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(Block, _extends({}, props, {

package/esm/block/styled-components.js

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

package/esm/breadcrumbs/styled-components.js

@@ -18,6 +18,7 @@ export var StyledRoot = styled('nav', function (_ref) {
   }, $theme.typography.font350);
 });
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 export var StyledList = styled('ol', function (_ref2) {
   var $theme = _ref2.$theme;
   return _objectSpread({
@@ -27,6 +28,7 @@ export var StyledList = styled('ol', function (_ref2) {
   }, $theme.typography.font350);
 });
 StyledList.displayName = "StyledList";
+StyledList.displayName = 'StyledList';
 export var StyledListItem = styled('li', function (_ref3) {
   var $theme = _ref3.$theme;
   return _objectSpread({
@@ -34,6 +36,7 @@ export var StyledListItem = styled('li', function (_ref3) {
   }, $theme.typography.font350);
 });
 StyledListItem.displayName = "StyledListItem";
+StyledListItem.displayName = 'StyledListItem';
 export var StyledSeparator = styled('div', function (_ref4) {
   var $theme = _ref4.$theme;
   return {
@@ -44,4 +47,5 @@ export var StyledSeparator = styled('div', function (_ref4) {
     verticalAlign: 'middle'
   };
 });
-StyledSeparator.displayName = "StyledSeparator";
+StyledSeparator.displayName = "StyledSeparator";
+StyledSeparator.displayName = 'StyledSeparator';

package/esm/button/styled-components.js

@@ -80,6 +80,7 @@ export var BaseButton = styled('button', function (_ref) {
   }));
 });
 BaseButton.displayName = "BaseButton";
+BaseButton.displayName = 'BaseButton';
 export var EndEnhancer = styled('div', function (_ref2) {
   var $theme = _ref2.$theme;
   var marginDirection = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
@@ -88,6 +89,7 @@ export var EndEnhancer = styled('div', function (_ref2) {
   }, marginDirection, $theme.sizing.scale500);
 });
 EndEnhancer.displayName = "EndEnhancer";
+EndEnhancer.displayName = 'EndEnhancer';
 export var StartEnhancer = styled('div', function (_ref4) {
   var $theme = _ref4.$theme;
   var marginDirection = $theme.direction === 'rtl' ? 'marginLeft' : 'marginRight';
@@ -96,6 +98,7 @@ export var StartEnhancer = styled('div', function (_ref4) {
   }, marginDirection, $theme.sizing.scale500);
 });
 StartEnhancer.displayName = "StartEnhancer";
+StartEnhancer.displayName = 'StartEnhancer';
 export var LoadingSpinnerContainer = styled('div', function (_ref6) {
   var $theme = _ref6.$theme,
       $size = _ref6.$size;
@@ -118,6 +121,7 @@ export var LoadingSpinnerContainer = styled('div', function (_ref6) {
   };
 });
 LoadingSpinnerContainer.displayName = "LoadingSpinnerContainer";
+LoadingSpinnerContainer.displayName = 'LoadingSpinnerContainer';
 export var LoadingSpinner = styled('span', function (_ref7) {
   var $theme = _ref7.$theme,
       $kind = _ref7.$kind,
@@ -177,6 +181,7 @@ export var LoadingSpinner = styled('span', function (_ref7) {
   };
 });
 LoadingSpinner.displayName = "LoadingSpinner";
+LoadingSpinner.displayName = 'LoadingSpinner';
 
 function getLoadingSpinnerColors(_ref8) {
   var $theme = _ref8.$theme,
@@ -234,6 +239,8 @@ function getBorderRadiiStyles(_ref9) {
     }
   } else if ($shape === SHAPE.circle || $shape === SHAPE.round) {
     value = '50%';
+  } else if ($size === SIZE.mini) {
+    value = $theme.borders.buttonBorderRadiusMini;
   }
 
   return {