baseui 12.0.0 → 12.1.0

package/accordion/accordion.js

@@ -94,7 +94,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];
       }
@@ -195,7 +196,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/accordion/accordion.js.flow

@@ -5,7 +5,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-/* eslint-disable cup/no-undef */
+
 import * as React from 'react';
 import { getOverrides } from '../helpers/overrides.js';
 import { Root as StyledRoot } from './styled-components.js';

package/accordion/panel.js

@@ -78,7 +78,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
@@ -114,7 +115,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/accordion/stateful-panel-container.js

@@ -97,6 +97,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/accordion/styled-components.js

@@ -28,6 +28,7 @@ var Root = (0, _styles.styled)('ul', {
 });
 exports.Root = Root;
 Root.displayName = "Root";
+Root.displayName = 'Root';
 var PanelContainer = (0, _styles.styled)('li', function (props) {
   var $expanded = props.$expanded,
       colors = props.$theme.colors;
@@ -41,6 +42,7 @@ var PanelContainer = (0, _styles.styled)('li', function (props) {
 });
 exports.PanelContainer = PanelContainer;
 PanelContainer.displayName = "PanelContainer";
+PanelContainer.displayName = 'PanelContainer';
 var Header = (0, _styles.styled)('div', function (props) {
   var $disabled = props.$disabled,
       $isFocusVisible = props.$isFocusVisible,
@@ -72,6 +74,7 @@ var Header = (0, _styles.styled)('div', function (props) {
 });
 exports.Header = Header;
 Header.displayName = "Header";
+Header.displayName = 'Header';
 var ToggleIcon = (0, _styles.styled)('svg', function (props) {
   var $theme = props.$theme,
       $disabled = props.$disabled,
@@ -84,6 +87,7 @@ var ToggleIcon = (0, _styles.styled)('svg', function (props) {
 });
 exports.ToggleIcon = ToggleIcon;
 ToggleIcon.displayName = "ToggleIcon";
+ToggleIcon.displayName = 'ToggleIcon';
 var ToggleIconGroup = (0, _styles.styled)('g', function (props) {
   var $theme = props.$theme,
       $expanded = props.$expanded;
@@ -97,6 +101,7 @@ var ToggleIconGroup = (0, _styles.styled)('g', function (props) {
 });
 exports.ToggleIconGroup = ToggleIconGroup;
 ToggleIconGroup.displayName = "ToggleIconGroup";
+ToggleIconGroup.displayName = 'ToggleIconGroup';
 var Content = (0, _styles.styled)('div', function (props) {
   var _props$$theme2 = props.$theme,
       animation = _props$$theme2.animation,
@@ -127,6 +132,7 @@ var Content = (0, _styles.styled)('div', function (props) {
 });
 exports.Content = Content;
 Content.displayName = "Content";
+Content.displayName = 'Content';
 var ContentAnimationContainer = (0, _styles.styled)('div', function (props) {
   var $height = props.$height,
       animation = props.$theme.animation;
@@ -139,4 +145,5 @@ var ContentAnimationContainer = (0, _styles.styled)('div', function (props) {
   };
 });
 exports.ContentAnimationContainer = ContentAnimationContainer;
-ContentAnimationContainer.displayName = "ContentAnimationContainer";
+ContentAnimationContainer.displayName = "ContentAnimationContainer";
+ContentAnimationContainer.displayName = 'ContentAnimationContainer';

package/accordion/types.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { Override } from '../helpers/overrides';
-import { STATE_CHANGE_TYPE } from './constants';
+import type { STATE_CHANGE_TYPE } from './constants';
 export declare type AccordionState = {
     expanded: Array<React.Key>;
 };

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

@@ -65,13 +65,15 @@ function MainMenuItem(props) {
     if ((0, _focusVisible.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/app-nav-bar/mobile-menu.js

@@ -72,7 +72,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 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,
@@ -169,6 +169,7 @@ function MobileMenu(props) {
 
   drawerProps.overrides = (0, _overrides.mergeOverrides)({
     DrawerBody: {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       style: function style(_ref2) {
         var $theme = _ref2.$theme;
         return {

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

@@ -50,6 +50,7 @@ var StyledButton = (0, _styles.styled)('button', function (_ref) {
   };
 });
 StyledButton.displayName = "StyledButton";
+StyledButton.displayName = 'StyledButton';
 var StyledRoot = (0, _styles.styled)('div', function (props) {
   var $theme = props.$theme;
   var mediaQueries = (0, _responsiveHelpers.getMediaQueries)($theme.breakpoints);
@@ -95,9 +96,11 @@ var StyledRoot = (0, _styles.styled)('div', function (props) {
 });
 exports.StyledRoot = StyledRoot;
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 var StyledSubnavContainer = (0, _styles.styled)('div', {});
 exports.StyledSubnavContainer = StyledSubnavContainer;
 StyledSubnavContainer.displayName = "StyledSubnavContainer";
+StyledSubnavContainer.displayName = 'StyledSubnavContainer';
 var StyledSpacing = (0, _styles.styled)('div', function (props) {
   var $theme = props.$theme;
   return _defineProperty({
@@ -114,6 +117,7 @@ var StyledSpacing = (0, _styles.styled)('div', function (props) {
 });
 exports.StyledSpacing = StyledSpacing;
 StyledSpacing.displayName = "StyledSpacing";
+StyledSpacing.displayName = 'StyledSpacing';
 var StyledAppName = (0, _styles.styled)('div', function (_ref3) {
   var $theme = _ref3.$theme;
   return _objectSpread(_objectSpread({}, $theme.typography.font550), {}, _defineProperty({
@@ -123,6 +127,7 @@ var StyledAppName = (0, _styles.styled)('div', function (_ref3) {
 });
 exports.StyledAppName = StyledAppName;
 StyledAppName.displayName = "StyledAppName";
+StyledAppName.displayName = 'StyledAppName';
 var StyledSideMenuButton = (0, _styles.withStyle)(StyledButton, function (_ref4) {
   var $theme = _ref4.$theme;
   return _objectSpread(_objectSpread({}, $theme.direction === 'rtl' ? {
@@ -138,6 +143,7 @@ var StyledSideMenuButton = (0, _styles.withStyle)(StyledButton, function (_ref4)
 });
 exports.StyledSideMenuButton = StyledSideMenuButton;
 StyledSideMenuButton.displayName = "StyledSideMenuButton";
+StyledSideMenuButton.displayName = 'StyledSideMenuButton';
 var StyledPrimaryMenuContainer = (0, _styles.styled)('div', function (_ref5) {
   var $theme = _ref5.$theme;
   return {
@@ -154,6 +160,7 @@ var StyledPrimaryMenuContainer = (0, _styles.styled)('div', function (_ref5) {
 });
 exports.StyledPrimaryMenuContainer = StyledPrimaryMenuContainer;
 StyledPrimaryMenuContainer.displayName = "StyledPrimaryMenuContainer";
+StyledPrimaryMenuContainer.displayName = 'StyledPrimaryMenuContainer';
 var StyledMainMenuItem = (0, _styles.styled)('div', function (props) {
   var $active = props.$active,
       $isFocusVisible = props.$isFocusVisible,
@@ -195,6 +202,7 @@ var StyledMainMenuItem = (0, _styles.styled)('div', function (props) {
 });
 exports.StyledMainMenuItem = StyledMainMenuItem;
 StyledMainMenuItem.displayName = "StyledMainMenuItem";
+StyledMainMenuItem.displayName = 'StyledMainMenuItem';
 var StyledSecondaryMenuContainer = (0, _styles.styled)('div', function (_ref6) {
   var $theme = _ref6.$theme;
   return {
@@ -212,8 +220,10 @@ var StyledSecondaryMenuContainer = (0, _styles.styled)('div', function (_ref6) {
 });
 exports.StyledSecondaryMenuContainer = StyledSecondaryMenuContainer;
 StyledSecondaryMenuContainer.displayName = "StyledSecondaryMenuContainer";
+StyledSecondaryMenuContainer.displayName = 'StyledSecondaryMenuContainer';
 var StyledUserMenuButton = StyledButton;
 exports.StyledUserMenuButton = StyledUserMenuButton;
+StyledUserMenuButton.displayName = 'StyledUserMenuButton';
 var StyledUserMenuProfileListItem = (0, _styles.withStyle)(_menu.StyledListItem, function (_ref7) {
   var $theme = _ref7.$theme;
   return _objectSpread({
@@ -227,6 +237,7 @@ var StyledUserMenuProfileListItem = (0, _styles.withStyle)(_menu.StyledListItem,
 });
 exports.StyledUserMenuProfileListItem = StyledUserMenuProfileListItem;
 StyledUserMenuProfileListItem.displayName = "StyledUserMenuProfileListItem";
+StyledUserMenuProfileListItem.displayName = 'StyledUserMenuProfileListItem';
 var StyledUserProfileTileContainer = (0, _styles.styled)('div', function (_ref8) {
   var $theme = _ref8.$theme;
   return {
@@ -242,6 +253,7 @@ var StyledUserProfileTileContainer = (0, _styles.styled)('div', function (_ref8)
 });
 exports.StyledUserProfileTileContainer = StyledUserProfileTileContainer;
 StyledUserProfileTileContainer.displayName = "StyledUserProfileTileContainer";
+StyledUserProfileTileContainer.displayName = 'StyledUserProfileTileContainer';
 var StyledUserProfilePictureContainer = (0, _styles.styled)('div', function (_ref9) {
   var $theme = _ref9.$theme;
   return _objectSpread({}, $theme.direction === 'rtl' ? {
@@ -252,6 +264,8 @@ var StyledUserProfilePictureContainer = (0, _styles.styled)('div', function (_re
 });
 exports.StyledUserProfilePictureContainer = StyledUserProfilePictureContainer;
 StyledUserProfilePictureContainer.displayName = "StyledUserProfilePictureContainer";
+StyledUserProfilePictureContainer.displayName = 'StyledUserProfilePictureContainer'; // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 var StyledUserProfileInfoContainer = (0, _styles.styled)('div', function (_ref10) {
   var $theme = _ref10.$theme;
   return {
@@ -261,12 +275,15 @@ var StyledUserProfileInfoContainer = (0, _styles.styled)('div', function (_ref10
 });
 exports.StyledUserProfileInfoContainer = StyledUserProfileInfoContainer;
 StyledUserProfileInfoContainer.displayName = "StyledUserProfileInfoContainer";
+StyledUserProfileInfoContainer.displayName = 'StyledUserProfileInfoContainer'; // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 var StyledDesktopMenuContainer = (0, _styles.styled)('div', function (_ref11) {
   var $theme = _ref11.$theme;
   return {};
 });
 exports.StyledDesktopMenuContainer = StyledDesktopMenuContainer;
 StyledDesktopMenuContainer.displayName = "StyledDesktopMenuContainer";
+StyledDesktopMenuContainer.displayName = 'StyledDesktopMenuContainer';
 var StyledDesktopMenu = (0, _styles.styled)('div', function (_ref12) {
   var $theme = _ref12.$theme;
   return {
@@ -280,4 +297,5 @@ var StyledDesktopMenu = (0, _styles.styled)('div', function (_ref12) {
   };
 });
 exports.StyledDesktopMenu = StyledDesktopMenu;
-StyledDesktopMenu.displayName = "StyledDesktopMenu";
+StyledDesktopMenu.displayName = "StyledDesktopMenu";
+StyledDesktopMenu.displayName = 'StyledDesktopMenu';

package/app-nav-bar/types.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { POSITION } from './constants';
+import type * as React from 'react';
+import type { POSITION } from './constants';
 import type { Override } from '../helpers/overrides';
 export declare type AppNavBarOverrides = {
     Root?: Override;

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

@@ -57,7 +57,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-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/aspect-ratio-box/aspect-ratio-box-body.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StyledBlockProps, BlockProps } from '../block';
+import type { StyledBlockProps, BlockProps } from '../block';
 interface AspectRatioBoxBodyComponentType<D extends React.ElementType> {
     <C extends React.ElementType = D>(props: BlockProps<C> & Omit<StyledBlockProps & React.ComponentProps<C>, keyof BlockProps>): JSX.Element;
     displayName?: string;

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

@@ -44,7 +44,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,
@@ -62,6 +63,7 @@ var AspectRatioBox = function AspectRatioBox(_ref2) {
   var blockOverrides = (0, _overrides.mergeOverrides)(aspectRatioBoxOverrides, overrides);
   return /*#__PURE__*/React.createElement(_block.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/aspect-ratio-box/types.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { BlockProps } from '../block';
 export declare type AspectRatioBoxProps<T extends React.ElementType = React.ElementType> = {
     /** Aspect ratio is width divided by height. */

package/avatar/styled-components.js

@@ -37,6 +37,7 @@ var Avatar = (0, _styles.styled)('img', function (props) {
 });
 exports.Avatar = Avatar;
 Avatar.displayName = "Avatar";
+Avatar.displayName = 'Avatar';
 var Initials = (0, _styles.styled)('div', function (props) {
   return _objectSpread(_objectSpread({}, props.$theme.typography.font300), {}, {
     color: props.$theme.colors.mono100,
@@ -48,6 +49,7 @@ var Initials = (0, _styles.styled)('div', function (props) {
 });
 exports.Initials = Initials;
 Initials.displayName = "Initials";
+Initials.displayName = 'Initials';
 var Root = (0, _styles.styled)('div', function (props) {
   var $didImageFailToLoad = props.$didImageFailToLoad;
   var themedSize = getSize(props);
@@ -66,4 +68,5 @@ var Root = (0, _styles.styled)('div', function (props) {
   };
 });
 exports.Root = Root;
-Root.displayName = "Root";
+Root.displayName = "Root";
+Root.displayName = 'Root';

package/badge/styled-components.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.StyledRoot = exports.StyledPositioner = exports.StyledNotificationCircle = exports.StyledHintDot = exports.StyledBadge = void 0;
 
-var _index = require("../styles/index");
+var _styles = require("../styles");
 
 var _constants = require("./constants");
 
@@ -24,19 +24,19 @@ function getColorStyles(_ref) {
       $hierarchy = _ref.$hierarchy,
       $color = _ref.$color;
   var COLOR_STYLES = (_COLOR_STYLES = {}, _defineProperty(_COLOR_STYLES, _constants.HIERARCHY.primary, (_HIERARCHY$primary = {}, _defineProperty(_HIERARCHY$primary, _constants.COLOR.accent, {
-    color: $theme.colors.contentInversePrimary,
+    color: $theme.colors.contentOnColor,
     backgroundColor: $theme.colors.backgroundAccent
   }), _defineProperty(_HIERARCHY$primary, _constants.COLOR.primary, {
     color: $theme.colors.contentInversePrimary,
     backgroundColor: $theme.colors.backgroundInversePrimary
   }), _defineProperty(_HIERARCHY$primary, _constants.COLOR.positive, {
-    color: $theme.colors.contentInversePrimary,
+    color: $theme.colors.contentOnColor,
     backgroundColor: $theme.colors.backgroundPositive
   }), _defineProperty(_HIERARCHY$primary, _constants.COLOR.negative, {
-    color: $theme.colors.contentInversePrimary,
+    color: $theme.colors.contentOnColor,
     backgroundColor: $theme.colors.backgroundNegative
   }), _defineProperty(_HIERARCHY$primary, _constants.COLOR.warning, {
-    color: $theme.colors.primaryA,
+    color: $theme.colors.contentOnColorInverse,
     backgroundColor: $theme.colors.backgroundWarning
   }), _HIERARCHY$primary)), _defineProperty(_COLOR_STYLES, _constants.HIERARCHY.secondary, (_HIERARCHY$secondary = {}, _defineProperty(_HIERARCHY$secondary, _constants.COLOR.accent, {
     color: $theme.colors.contentAccent,
@@ -116,7 +116,7 @@ var POSITION_STYLES = Object.freeze((_Object$freeze = {}, _defineProperty(_Objec
   top: '-4px',
   left: '-4px'
 }), _defineProperty(_ROLE$hintDot, _constants.PLACEMENT.topRight, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, _constants.PLACEMENT.topEdge, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, _constants.PLACEMENT.bottomEdge, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, _constants.PLACEMENT.bottomRight, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, _constants.PLACEMENT.bottomLeft, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, _constants.PLACEMENT.topLeftEdge, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, _constants.PLACEMENT.topRightEdge, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, _constants.PLACEMENT.bottomRightEdge, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, _constants.PLACEMENT.bottomLeftEdge, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, _constants.PLACEMENT.leftTopEdge, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, _constants.PLACEMENT.rightTopEdge, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, _constants.PLACEMENT.rightBottomEdge, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, _constants.PLACEMENT.leftBottomEdge, DEFAULT_HINT_DOT_PLACEMENT), _ROLE$hintDot)), _Object$freeze));
-var StyledRoot = (0, _index.styled)('div', function () {
+var StyledRoot = (0, _styles.styled)('div', function () {
   return {
     position: 'relative',
     display: 'inline-block',
@@ -125,11 +125,12 @@ var StyledRoot = (0, _index.styled)('div', function () {
 });
 exports.StyledRoot = StyledRoot;
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 var TOP_PLACEMENTS = [_constants.PLACEMENT.topLeft, _constants.PLACEMENT.topRight, _constants.PLACEMENT.topLeftEdge, _constants.PLACEMENT.topEdge, _constants.PLACEMENT.topRightEdge, _constants.PLACEMENT.leftTopEdge, _constants.PLACEMENT.rightTopEdge];
 var BOTTOM_PLACEMENTS = [_constants.PLACEMENT.bottomLeft, _constants.PLACEMENT.bottomRight, _constants.PLACEMENT.bottomLeftEdge, _constants.PLACEMENT.bottomEdge, _constants.PLACEMENT.bottomRightEdge, _constants.PLACEMENT.leftBottomEdge, _constants.PLACEMENT.rightBottomEdge];
 var LEFT_PLACEMENTS = [_constants.PLACEMENT.topLeft, _constants.PLACEMENT.topLeftEdge, _constants.PLACEMENT.topEdge, _constants.PLACEMENT.bottomLeft, _constants.PLACEMENT.bottomLeftEdge, _constants.PLACEMENT.bottomEdge, _constants.PLACEMENT.leftTopEdge, _constants.PLACEMENT.leftBottomEdge];
 var RIGHT_PLACEMENTS = [_constants.PLACEMENT.topRight, _constants.PLACEMENT.topRightEdge, _constants.PLACEMENT.bottomRight, _constants.PLACEMENT.bottomRightEdge, _constants.PLACEMENT.rightTopEdge, _constants.PLACEMENT.rightBottomEdge];
-var StyledPositioner = (0, _index.styled)('div', function (_ref2) {
+var StyledPositioner = (0, _styles.styled)('div', function (_ref2) {
   var $theme = _ref2.$theme,
       $role = _ref2.$role,
       $placement = _ref2.$placement,
@@ -172,7 +173,8 @@ var StyledPositioner = (0, _index.styled)('div', function (_ref2) {
 });
 exports.StyledPositioner = StyledPositioner;
 StyledPositioner.displayName = "StyledPositioner";
-var StyledBadge = (0, _index.styled)('div', function (_ref3) {
+StyledPositioner.displayName = 'StyledPositioner';
+var StyledBadge = (0, _styles.styled)('div', function (_ref3) {
   var $theme = _ref3.$theme,
       _ref3$$shape = _ref3.$shape,
       $shape = _ref3$$shape === void 0 ? _constants.SHAPE.rectangle : _ref3$$shape,
@@ -198,7 +200,8 @@ var StyledBadge = (0, _index.styled)('div', function (_ref3) {
 });
 exports.StyledBadge = StyledBadge;
 StyledBadge.displayName = "StyledBadge";
-var StyledNotificationCircle = (0, _index.styled)('div', function (_ref4) {
+StyledBadge.displayName = 'StyledBadge';
+var StyledNotificationCircle = (0, _styles.styled)('div', function (_ref4) {
   var $theme = _ref4.$theme,
       _ref4$$color = _ref4.$color,
       $color = _ref4$$color === void 0 ? _constants.COLOR.accent : _ref4$$color,
@@ -219,7 +222,8 @@ var StyledNotificationCircle = (0, _index.styled)('div', function (_ref4) {
 });
 exports.StyledNotificationCircle = StyledNotificationCircle;
 StyledNotificationCircle.displayName = "StyledNotificationCircle";
-var StyledHintDot = (0, _index.styled)('div', function (_ref5) {
+StyledNotificationCircle.displayName = 'StyledNotificationCircle';
+var StyledHintDot = (0, _styles.styled)('div', function (_ref5) {
   var $theme = _ref5.$theme,
       _ref5$$color = _ref5.$color,
       $color = _ref5$$color === void 0 ? _constants.COLOR.accent : _ref5$$color,
@@ -239,4 +243,5 @@ var StyledHintDot = (0, _index.styled)('div', function (_ref5) {
   }));
 });
 exports.StyledHintDot = StyledHintDot;
-StyledHintDot.displayName = "StyledHintDot";
+StyledHintDot.displayName = "StyledHintDot";
+StyledHintDot.displayName = 'StyledHintDot';

package/badge/styled-components.js.flow

@@ -16,7 +16,7 @@ function getColorStyles({ $theme, $hierarchy, $color }): {|
   const COLOR_STYLES = {
     [HIERARCHY.primary]: {
       [COLOR.accent]: {
-        color: $theme.colors.contentInversePrimary,
+        color: $theme.colors.contentOnColor,
         backgroundColor: $theme.colors.backgroundAccent,
       },
       [COLOR.primary]: {
@@ -24,15 +24,15 @@ function getColorStyles({ $theme, $hierarchy, $color }): {|
         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,
       },
     },

package/badge/types.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { HIERARCHY, SHAPE, COLOR, PLACEMENT, ROLE } from './constants';
+import type * as React from 'react';
+import type { HIERARCHY, SHAPE, COLOR, PLACEMENT, ROLE } from './constants';
 import type { Override } from '../helpers/overrides';
 export declare type Hierarchy = typeof HIERARCHY[keyof typeof HIERARCHY];
 export declare type Shape = typeof SHAPE[keyof typeof SHAPE];

package/banner/index.d.ts

@@ -1,4 +1,4 @@
-import { ActionContent, ArtworkContent, BannerProps } from './types';
+import type { ActionContent, ArtworkContent, BannerProps } from './types';
 export { Banner } from './banner';
 export * from './constants';
 export * from './styled-components';

package/banner/styled-components.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.StyledTrailingIconButton = exports.StyledTrailingContent = exports.StyledTrailingButtonContainer = exports.StyledTitle = exports.StyledRoot = exports.StyledMessageContent = exports.StyledMessage = exports.StyledLeadingContent = exports.StyledBelowContent = void 0;
 
-var _index = require("../styles/index");
+var _styles = require("../styles");
 
 var _constants = require("./constants");
 
@@ -15,7 +15,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.
 */
-var StyledRoot = (0, _index.styled)('div', function (_ref) {
+var StyledRoot = (0, _styles.styled)('div', function (_ref) {
   var $theme = _ref.$theme,
       $backgroundColor = _ref.$backgroundColor,
       $color = _ref.$color,
@@ -32,12 +32,16 @@ var StyledRoot = (0, _index.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
   };
 });
 exports.StyledRoot = StyledRoot;
 StyledRoot.displayName = "StyledRoot";
-var StyledLeadingContent = (0, _index.styled)('div', function (_ref2) {
+StyledRoot.displayName = 'StyledRoot';
+var StyledLeadingContent = (0, _styles.styled)('div', function (_ref2) {
   var $theme = _ref2.$theme,
       $includesArtwork = _ref2.$includesArtwork;
   return {
@@ -48,7 +52,8 @@ var StyledLeadingContent = (0, _index.styled)('div', function (_ref2) {
 });
 exports.StyledLeadingContent = StyledLeadingContent;
 StyledLeadingContent.displayName = "StyledLeadingContent";
-var StyledMessageContent = (0, _index.styled)('div', function (_ref3) {
+StyledLeadingContent.displayName = 'StyledLeadingContent';
+var StyledMessageContent = (0, _styles.styled)('div', function (_ref3) {
   var $theme = _ref3.$theme,
       $actionPosition = _ref3.$actionPosition;
   return {
@@ -61,7 +66,9 @@ var StyledMessageContent = (0, _index.styled)('div', function (_ref3) {
 });
 exports.StyledMessageContent = StyledMessageContent;
 StyledMessageContent.displayName = "StyledMessageContent";
-var StyledTrailingContent = (0, _index.styled)('div', function (_ref4) {
+StyledMessageContent.displayName = 'StyledMessageContent'; // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+var StyledTrailingContent = (0, _styles.styled)('div', function (_ref4) {
   var $theme = _ref4.$theme;
   return {
     display: 'flex',
@@ -71,7 +78,8 @@ var StyledTrailingContent = (0, _index.styled)('div', function (_ref4) {
 });
 exports.StyledTrailingContent = StyledTrailingContent;
 StyledTrailingContent.displayName = "StyledTrailingContent";
-var StyledBelowContent = (0, _index.styled)('div', function (_ref5) {
+StyledTrailingContent.displayName = 'StyledTrailingContent';
+var StyledBelowContent = (0, _styles.styled)('div', function (_ref5) {
   var $theme = _ref5.$theme,
       $actionPosition = _ref5.$actionPosition;
   return {
@@ -82,19 +90,22 @@ var StyledBelowContent = (0, _index.styled)('div', function (_ref5) {
 });
 exports.StyledBelowContent = StyledBelowContent;
 StyledBelowContent.displayName = "StyledBelowContent";
-var StyledTitle = (0, _index.styled)('div', function (_ref6) {
+StyledBelowContent.displayName = 'StyledBelowContent';
+var StyledTitle = (0, _styles.styled)('div', function (_ref6) {
   var $theme = _ref6.$theme;
   return $theme.typography.LabelMedium;
 });
 exports.StyledTitle = StyledTitle;
 StyledTitle.displayName = "StyledTitle";
-var StyledMessage = (0, _index.styled)('div', function (_ref7) {
+StyledTitle.displayName = 'StyledTitle';
+var StyledMessage = (0, _styles.styled)('div', function (_ref7) {
   var $theme = _ref7.$theme;
   return $theme.typography.ParagraphMedium;
 });
 exports.StyledMessage = StyledMessage;
 StyledMessage.displayName = "StyledMessage";
-var StyledTrailingButtonContainer = (0, _index.styled)('div', function (_ref8) {
+StyledMessage.displayName = 'StyledMessage';
+var StyledTrailingButtonContainer = (0, _styles.styled)('div', function (_ref8) {
   var $theme = _ref8.$theme;
   return {
     display: 'flex',
@@ -104,7 +115,8 @@ var StyledTrailingButtonContainer = (0, _index.styled)('div', function (_ref8) {
 });
 exports.StyledTrailingButtonContainer = StyledTrailingButtonContainer;
 StyledTrailingButtonContainer.displayName = "StyledTrailingButtonContainer";
-var StyledTrailingIconButton = (0, _index.styled)('button', function (_ref9) {
+StyledTrailingButtonContainer.displayName = 'StyledTrailingButtonContainer';
+var StyledTrailingIconButton = (0, _styles.styled)('button', function (_ref9) {
   var $theme = _ref9.$theme,
       $nested = _ref9.$nested;
   var radius = $nested ? $theme.borders.radius300 : $theme.borders.radius400;
@@ -128,4 +140,5 @@ var StyledTrailingIconButton = (0, _index.styled)('button', function (_ref9) {
   };
 });
 exports.StyledTrailingIconButton = StyledTrailingIconButton;
-StyledTrailingIconButton.displayName = "StyledTrailingIconButton";
+StyledTrailingIconButton.displayName = "StyledTrailingIconButton";
+StyledTrailingIconButton.displayName = 'StyledTrailingIconButton';