baseui 0.0.0-alpha-8ab2335 → 0.0.0-alpha-e79754d

package/accordion/accordion.js

@@ -94,8 +94,7 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
 
   _createClass(Accordion, [{
     key: "onPanelChange",
-    value: // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    function onPanelChange(key, onChange) {
+    value: 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];
       }
@@ -196,8 +195,7 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
           disabled = _this$props2.disabled,
           children = _this$props2.children,
           renderAll = _this$props2.renderAll,
-          overrides = _this$props2.overrides; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+          overrides = _this$props2.overrides;
       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,8 +78,7 @@ var Panel = function Panel(_ref, ref) {
       }));
     }
   }, [localState]);
-  var handleBlur = React.useCallback( // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  function (event) {
+  var handleBlur = React.useCallback(function (event) {
     if (localState.isFocusVisible) {
       setLocalState(_objectSpread(_objectSpread({}, localState), {}, {
         isFocusVisible: false
@@ -115,7 +114,7 @@ var Panel = function Panel(_ref, ref) {
     }
 
     typeof onKeyDown === 'function' && onKeyDown(e);
-  }, [expanded, disabled, onChange, onKeyDown]); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  }, [expanded, disabled, onChange, onKeyDown]);
 
   var _animateRef = React.useRef(null);
 

package/accordion/stateful-panel-container.js

@@ -97,7 +97,6 @@ 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,7 +28,6 @@ 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;
@@ -42,7 +41,6 @@ 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,
@@ -74,7 +72,6 @@ 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,
@@ -87,7 +84,6 @@ 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;
@@ -101,7 +97,6 @@ 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,
@@ -132,7 +127,6 @@ 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;
@@ -145,5 +139,4 @@ 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 type * as React from 'react';
+import * as React from 'react';
 import type { Override } from '../helpers/overrides';
-import type { STATE_CHANGE_TYPE } from './constants';
+import { STATE_CHANGE_TYPE } from './constants';
 export declare type AccordionState = {
     expanded: Array<React.Key>;
 };

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

@@ -65,15 +65,13 @@ 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 @typescript-eslint/no-explicit-any,react/display-name
+var PARENT_MENU_ITEM = 'PARENT_MENU_ITEM'; // eslint-disable-next-line react/display-name
 
 var MobileNavMenuItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var item = props.item,
@@ -169,7 +169,6 @@ 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,7 +50,6 @@ 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);
@@ -96,11 +95,9 @@ 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({
@@ -117,7 +114,6 @@ 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({
@@ -127,7 +123,6 @@ 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' ? {
@@ -143,7 +138,6 @@ 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 {
@@ -160,7 +154,6 @@ 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,
@@ -202,7 +195,6 @@ 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 {
@@ -220,10 +212,8 @@ 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({
@@ -237,7 +227,6 @@ 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 {
@@ -253,7 +242,6 @@ 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' ? {
@@ -264,8 +252,6 @@ 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 {
@@ -275,15 +261,12 @@ 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 {
@@ -297,5 +280,4 @@ 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 type * as React from 'react';
-import type { POSITION } from './constants';
+import * as React from 'react';
+import { 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 @typescript-eslint/no-explicit-any,react/display-name
+var MENU_ITEM_WIDTH = '275px'; // eslint-disable-next-line 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 type { StyledBlockProps, BlockProps } from '../block';
+import { 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,8 +44,7 @@ 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,
@@ -63,7 +62,6 @@ 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 type * as React from 'react';
+import * 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,7 +37,6 @@ 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,
@@ -49,7 +48,6 @@ 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);
@@ -68,5 +66,4 @@ 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 _styles = require("../styles");
+var _index = require("../styles/index");
 
 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.contentOnColor,
+    color: $theme.colors.contentInversePrimary,
     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.contentOnColor,
+    color: $theme.colors.contentInversePrimary,
     backgroundColor: $theme.colors.backgroundPositive
   }), _defineProperty(_HIERARCHY$primary, _constants.COLOR.negative, {
-    color: $theme.colors.contentOnColor,
+    color: $theme.colors.contentInversePrimary,
     backgroundColor: $theme.colors.backgroundNegative
   }), _defineProperty(_HIERARCHY$primary, _constants.COLOR.warning, {
-    color: $theme.colors.contentOnColorInverse,
+    color: $theme.colors.primaryA,
     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, _styles.styled)('div', function () {
+var StyledRoot = (0, _index.styled)('div', function () {
   return {
     position: 'relative',
     display: 'inline-block',
@@ -125,12 +125,11 @@ var StyledRoot = (0, _styles.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, _styles.styled)('div', function (_ref2) {
+var StyledPositioner = (0, _index.styled)('div', function (_ref2) {
   var $theme = _ref2.$theme,
       $role = _ref2.$role,
       $placement = _ref2.$placement,
@@ -173,8 +172,7 @@ var StyledPositioner = (0, _styles.styled)('div', function (_ref2) {
 });
 exports.StyledPositioner = StyledPositioner;
 StyledPositioner.displayName = "StyledPositioner";
-StyledPositioner.displayName = 'StyledPositioner';
-var StyledBadge = (0, _styles.styled)('div', function (_ref3) {
+var StyledBadge = (0, _index.styled)('div', function (_ref3) {
   var $theme = _ref3.$theme,
       _ref3$$shape = _ref3.$shape,
       $shape = _ref3$$shape === void 0 ? _constants.SHAPE.rectangle : _ref3$$shape,
@@ -200,8 +198,7 @@ var StyledBadge = (0, _styles.styled)('div', function (_ref3) {
 });
 exports.StyledBadge = StyledBadge;
 StyledBadge.displayName = "StyledBadge";
-StyledBadge.displayName = 'StyledBadge';
-var StyledNotificationCircle = (0, _styles.styled)('div', function (_ref4) {
+var StyledNotificationCircle = (0, _index.styled)('div', function (_ref4) {
   var $theme = _ref4.$theme,
       _ref4$$color = _ref4.$color,
       $color = _ref4$$color === void 0 ? _constants.COLOR.accent : _ref4$$color,
@@ -222,8 +219,7 @@ var StyledNotificationCircle = (0, _styles.styled)('div', function (_ref4) {
 });
 exports.StyledNotificationCircle = StyledNotificationCircle;
 StyledNotificationCircle.displayName = "StyledNotificationCircle";
-StyledNotificationCircle.displayName = 'StyledNotificationCircle';
-var StyledHintDot = (0, _styles.styled)('div', function (_ref5) {
+var StyledHintDot = (0, _index.styled)('div', function (_ref5) {
   var $theme = _ref5.$theme,
       _ref5$$color = _ref5.$color,
       $color = _ref5$$color === void 0 ? _constants.COLOR.accent : _ref5$$color,
@@ -243,5 +239,4 @@ var StyledHintDot = (0, _styles.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.contentOnColor,
+        color: $theme.colors.contentInversePrimary,
         backgroundColor: $theme.colors.backgroundAccent,
       },
       [COLOR.primary]: {
@@ -24,15 +24,15 @@ function getColorStyles({ $theme, $hierarchy, $color }): {|
         backgroundColor: $theme.colors.backgroundInversePrimary,
       },
       [COLOR.positive]: {
-        color: $theme.colors.contentOnColor,
+        color: $theme.colors.contentInversePrimary,
         backgroundColor: $theme.colors.backgroundPositive,
       },
       [COLOR.negative]: {
-        color: $theme.colors.contentOnColor,
+        color: $theme.colors.contentInversePrimary,
         backgroundColor: $theme.colors.backgroundNegative,
       },
       [COLOR.warning]: {
-        color: $theme.colors.contentOnColorInverse,
+        color: $theme.colors.primaryA,
         backgroundColor: $theme.colors.backgroundWarning,
       },
     },

package/badge/types.d.ts

@@ -1,5 +1,5 @@
-import type * as React from 'react';
-import type { HIERARCHY, SHAPE, COLOR, PLACEMENT, ROLE } from './constants';
+import * as React from 'react';
+import { 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 type { ActionContent, ArtworkContent, BannerProps } from './types';
+import { 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 _styles = require("../styles");
+var _index = require("../styles/index");
 
 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, _styles.styled)('div', function (_ref) {
+var StyledRoot = (0, _index.styled)('div', function (_ref) {
   var $theme = _ref.$theme,
       $backgroundColor = _ref.$backgroundColor,
       $color = _ref.$color,
@@ -32,16 +32,12 @@ var StyledRoot = (0, _styles.styled)('div', function (_ref) {
     gridColumnGap: $theme.sizing.scale600,
     gridTemplateColumns: 'min-content auto min-content',
     gridTemplateRows: 'auto min-content',
-    marginTop: $theme.sizing.scale600,
-    marginRight: $theme.sizing.scale600,
-    marginBottom: $theme.sizing.scale600,
-    marginLeft: $theme.sizing.scale600
+    margin: $theme.sizing.scale600
   };
 });
 exports.StyledRoot = StyledRoot;
 StyledRoot.displayName = "StyledRoot";
-StyledRoot.displayName = 'StyledRoot';
-var StyledLeadingContent = (0, _styles.styled)('div', function (_ref2) {
+var StyledLeadingContent = (0, _index.styled)('div', function (_ref2) {
   var $theme = _ref2.$theme,
       $includesArtwork = _ref2.$includesArtwork;
   return {
@@ -52,8 +48,7 @@ var StyledLeadingContent = (0, _styles.styled)('div', function (_ref2) {
 });
 exports.StyledLeadingContent = StyledLeadingContent;
 StyledLeadingContent.displayName = "StyledLeadingContent";
-StyledLeadingContent.displayName = 'StyledLeadingContent';
-var StyledMessageContent = (0, _styles.styled)('div', function (_ref3) {
+var StyledMessageContent = (0, _index.styled)('div', function (_ref3) {
   var $theme = _ref3.$theme,
       $actionPosition = _ref3.$actionPosition;
   return {
@@ -66,9 +61,7 @@ var StyledMessageContent = (0, _styles.styled)('div', function (_ref3) {
 });
 exports.StyledMessageContent = StyledMessageContent;
 StyledMessageContent.displayName = "StyledMessageContent";
-StyledMessageContent.displayName = 'StyledMessageContent'; // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
-var StyledTrailingContent = (0, _styles.styled)('div', function (_ref4) {
+var StyledTrailingContent = (0, _index.styled)('div', function (_ref4) {
   var $theme = _ref4.$theme;
   return {
     display: 'flex',
@@ -78,8 +71,7 @@ var StyledTrailingContent = (0, _styles.styled)('div', function (_ref4) {
 });
 exports.StyledTrailingContent = StyledTrailingContent;
 StyledTrailingContent.displayName = "StyledTrailingContent";
-StyledTrailingContent.displayName = 'StyledTrailingContent';
-var StyledBelowContent = (0, _styles.styled)('div', function (_ref5) {
+var StyledBelowContent = (0, _index.styled)('div', function (_ref5) {
   var $theme = _ref5.$theme,
       $actionPosition = _ref5.$actionPosition;
   return {
@@ -90,22 +82,19 @@ var StyledBelowContent = (0, _styles.styled)('div', function (_ref5) {
 });
 exports.StyledBelowContent = StyledBelowContent;
 StyledBelowContent.displayName = "StyledBelowContent";
-StyledBelowContent.displayName = 'StyledBelowContent';
-var StyledTitle = (0, _styles.styled)('div', function (_ref6) {
+var StyledTitle = (0, _index.styled)('div', function (_ref6) {
   var $theme = _ref6.$theme;
   return $theme.typography.LabelMedium;
 });
 exports.StyledTitle = StyledTitle;
 StyledTitle.displayName = "StyledTitle";
-StyledTitle.displayName = 'StyledTitle';
-var StyledMessage = (0, _styles.styled)('div', function (_ref7) {
+var StyledMessage = (0, _index.styled)('div', function (_ref7) {
   var $theme = _ref7.$theme;
   return $theme.typography.ParagraphMedium;
 });
 exports.StyledMessage = StyledMessage;
 StyledMessage.displayName = "StyledMessage";
-StyledMessage.displayName = 'StyledMessage';
-var StyledTrailingButtonContainer = (0, _styles.styled)('div', function (_ref8) {
+var StyledTrailingButtonContainer = (0, _index.styled)('div', function (_ref8) {
   var $theme = _ref8.$theme;
   return {
     display: 'flex',
@@ -115,8 +104,7 @@ var StyledTrailingButtonContainer = (0, _styles.styled)('div', function (_ref8)
 });
 exports.StyledTrailingButtonContainer = StyledTrailingButtonContainer;
 StyledTrailingButtonContainer.displayName = "StyledTrailingButtonContainer";
-StyledTrailingButtonContainer.displayName = 'StyledTrailingButtonContainer';
-var StyledTrailingIconButton = (0, _styles.styled)('button', function (_ref9) {
+var StyledTrailingIconButton = (0, _index.styled)('button', function (_ref9) {
   var $theme = _ref9.$theme,
       $nested = _ref9.$nested;
   var radius = $nested ? $theme.borders.radius300 : $theme.borders.radius400;
@@ -140,5 +128,4 @@ var StyledTrailingIconButton = (0, _styles.styled)('button', function (_ref9) {
   };
 });
 exports.StyledTrailingIconButton = StyledTrailingIconButton;
-StyledTrailingIconButton.displayName = "StyledTrailingIconButton";
-StyledTrailingIconButton.displayName = 'StyledTrailingIconButton';
+StyledTrailingIconButton.displayName = "StyledTrailingIconButton";