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

package/datepicker/utils/date-helpers.js

@@ -93,8 +93,7 @@ var DateHelpers = /*#__PURE__*/_createClass(function DateHelpers(_adapter) {
       };
     };
 
-    var updateOptions = updateOptionsBase || defaultGetOptions; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+    var updateOptions = updateOptionsBase || defaultGetOptions;
     var UtilsClass = adapter.constructor;
     var className = adapter.constructor.name; // This ensures that if the adapter class isn't
     // supported it just falls back the default formats

package/datepicker/utils/index.js

@@ -131,8 +131,7 @@ var subYears = createDirtySetter(defaultDateHelpers.subYears); // ** Date Compar
 exports.subYears = subYears;
 var isBefore = createDirtyCompare(defaultDateHelpers.isBefore);
 exports.isBefore = isBefore;
-var isAfter = createDirtyCompare(defaultDateHelpers.isAfter); // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+var isAfter = createDirtyCompare(defaultDateHelpers.isAfter);
 exports.isAfter = isAfter;
 
 var format = function format(date, _format, locale) {

package/divider/styled-components.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.StyledDivider = 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 StyledDivider = (0, _styles.styled)('hr', function (props) {
+var StyledDivider = (0, _index.styled)('hr', function (props) {
   var $theme = props.$theme,
       _props$$size = props.$size,
       $size = _props$$size === void 0 ? _constants.SIZE.section : _props$$size;
@@ -64,5 +64,4 @@ var StyledDivider = (0, _styles.styled)('hr', function (props) {
   };
 });
 exports.StyledDivider = StyledDivider;
-StyledDivider.displayName = "StyledDivider";
-StyledDivider.displayName = 'StyledDivider';
+StyledDivider.displayName = "StyledDivider";

package/divider/types.d.ts

@@ -1,4 +1,4 @@
-import type { SIZE } from './constants';
+import { SIZE } from './constants';
 export declare type DividerProps = {
     $size?: keyof typeof SIZE;
 };

package/dnd-list/stateful-list-container.js

@@ -103,7 +103,6 @@ var StatefulListContainer = /*#__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/dnd-list/styled-components.js

@@ -16,7 +16,6 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 /**
  * Main component container element
  */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 var Root = (0, _styles.styled)('div', function (_ref) {
   var $theme = _ref.$theme;
   return {
@@ -25,7 +24,6 @@ var Root = (0, _styles.styled)('div', function (_ref) {
 });
 exports.Root = Root;
 Root.displayName = "Root";
-Root.displayName = 'Root';
 Root.displayName = 'StyledRoot';
 var List = (0, _styles.styled)('ul', function (_ref2) {
   var $isDragged = _ref2.$isDragged;
@@ -37,7 +35,6 @@ var List = (0, _styles.styled)('ul', function (_ref2) {
 });
 exports.List = List;
 List.displayName = "List";
-List.displayName = 'List';
 List.displayName = 'StyledList';
 var Item = (0, _styles.styled)('li', function (_ref3) {
   var $isDragged = _ref3.$isDragged,
@@ -91,7 +88,6 @@ var Item = (0, _styles.styled)('li', function (_ref3) {
 });
 exports.Item = Item;
 Item.displayName = "Item";
-Item.displayName = 'Item';
 List.displayName = 'StyledItem';
 var DragHandle = (0, _styles.styled)('div', function (_ref4) {
   var _ref5;
@@ -102,7 +98,6 @@ var DragHandle = (0, _styles.styled)('div', function (_ref4) {
 });
 exports.DragHandle = DragHandle;
 DragHandle.displayName = "DragHandle";
-DragHandle.displayName = 'DragHandle';
 DragHandle.displayName = 'StyledDragHandle';
 var CloseHandle = (0, _styles.styled)('button', function (_ref6) {
   var _ref7;
@@ -128,7 +123,6 @@ var CloseHandle = (0, _styles.styled)('button', function (_ref6) {
 });
 exports.CloseHandle = CloseHandle;
 CloseHandle.displayName = "CloseHandle";
-CloseHandle.displayName = 'CloseHandle';
 CloseHandle.displayName = 'StyledCloseHandle';
 var Label = (0, _styles.styled)('div', function (_ref8) {
   var $theme = _ref8.$theme;
@@ -138,5 +132,4 @@ var Label = (0, _styles.styled)('div', function (_ref8) {
 });
 exports.Label = Label;
 Label.displayName = "Label";
-Label.displayName = 'Label';
 Label.displayName = 'StyledLabel';

package/dnd-list/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 State = {
     items: Array<React.ReactNode>;
 };

package/drawer/constants.js

@@ -11,7 +11,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-next-line @typescript-eslint/no-unused-vars
 var SIZE = {
   default: 'default',
   full: 'full',

package/drawer/drawer.js

@@ -205,7 +205,6 @@ var Drawer = /*#__PURE__*/function (_React$Component) {
       if (mountNode) {
         return mountNode;
       } // Flow thinks body could be null (cast through any)
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 
       return document.body;
@@ -218,6 +217,7 @@ var Drawer = /*#__PURE__*/function (_React$Component) {
       }
 
       if (this.animateStartTimer) {
+        // eslint-disable-next-line cup/no-undef
         cancelAnimationFrame(this.animateStartTimer);
       }
     }
@@ -236,7 +236,8 @@ var Drawer = /*#__PURE__*/function (_React$Component) {
 
 
       this.clearTimers();
-      this.disableMountNodeScroll();
+      this.disableMountNodeScroll(); // eslint-disable-next-line cup/no-undef
+
       this.animateStartTimer = requestAnimationFrame(function () {
         _this2.setState({
           isVisible: true

package/drawer/drawer.js.flow

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 /* global document */
-
+/* eslint-disable cup/no-undef */
 import * as React from 'react';
 import FocusLock from 'react-focus-lock';
 
@@ -151,6 +151,7 @@ class Drawer extends React.Component<DrawerPropsT, DrawerStateT> {
       clearTimeout(this.animateOutTimer);
     }
     if (this.animateStartTimer) {
+      // eslint-disable-next-line cup/no-undef
       cancelAnimationFrame(this.animateStartTimer);
     }
   }
@@ -168,6 +169,7 @@ class Drawer extends React.Component<DrawerPropsT, DrawerStateT> {
 
     this.disableMountNodeScroll();
 
+    // eslint-disable-next-line cup/no-undef
     this.animateStartTimer = requestAnimationFrame(() => {
       this.setState({ isVisible: true });
     });

package/drawer/styled-components.js

@@ -98,8 +98,7 @@ function getAnchorStyles(props) {
         return {};
       }
   }
-} // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
+}
 
 var StyledRoot = (0, _styles.styled)('div', function (props) {
   return {
@@ -113,7 +112,6 @@ var StyledRoot = (0, _styles.styled)('div', function (props) {
 });
 exports.StyledRoot = StyledRoot;
 StyledRoot.displayName = "StyledRoot";
-StyledRoot.displayName = 'StyledRoot';
 var StyledBackdrop = (0, _styles.styled)('div', function (props) {
   var $animating = props.$animating,
       $isOpen = props.$isOpen,
@@ -140,7 +138,6 @@ var StyledBackdrop = (0, _styles.styled)('div', function (props) {
 });
 exports.StyledBackdrop = StyledBackdrop;
 StyledBackdrop.displayName = "StyledBackdrop";
-StyledBackdrop.displayName = 'StyledBackdrop';
 var StyledDrawerContainer = (0, _styles.styled)('div', function (props) {
   var $animating = props.$animating,
       $isOpen = props.$isOpen,
@@ -164,7 +161,6 @@ var StyledDrawerContainer = (0, _styles.styled)('div', function (props) {
 });
 exports.StyledDrawerContainer = StyledDrawerContainer;
 StyledDrawerContainer.displayName = "StyledDrawerContainer";
-StyledDrawerContainer.displayName = 'StyledDrawerContainer';
 var StyledDrawerBody = (0, _styles.styled)('div', function (props) {
   var $theme = props.$theme;
   return _objectSpread(_objectSpread({}, $theme.typography.font200), {}, {
@@ -179,7 +175,6 @@ var StyledDrawerBody = (0, _styles.styled)('div', function (props) {
 });
 exports.StyledDrawerBody = StyledDrawerBody;
 StyledDrawerBody.displayName = "StyledDrawerBody";
-StyledDrawerBody.displayName = 'StyledDrawerBody';
 var StyledClose = (0, _styles.styled)('button', function (props) {
   var _ref;
 
@@ -223,10 +218,8 @@ var StyledClose = (0, _styles.styled)('button', function (props) {
 });
 exports.StyledClose = StyledClose;
 StyledClose.displayName = "StyledClose";
-StyledClose.displayName = 'StyledClose';
 var Hidden = (0, _styles.styled)('div', {
   display: 'none'
 });
 exports.Hidden = Hidden;
-Hidden.displayName = "Hidden";
-Hidden.displayName = 'Hidden';
+Hidden.displayName = "Hidden";

package/drawer/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 { SIZE, CLOSE_SOURCE, ANCHOR } from './constants';
+import { SIZE, CLOSE_SOURCE, ANCHOR } from './constants';
 export declare type Size = keyof typeof SIZE;
 export declare type SizeProp = Size | string;
 export declare type Anchor = keyof typeof ANCHOR;

package/es/accordion/accordion.js

@@ -8,6 +8,8 @@ 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';
@@ -24,7 +26,6 @@ export default class Accordion extends React.Component {
     _defineProperty(this, "itemRefs", []);
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onPanelChange(key, onChange, ...args) {
     let activeKeys = this.state.expanded;
     const {
@@ -118,8 +119,7 @@ export default class Accordion extends React.Component {
       children,
       renderAll,
       overrides
-    } = this.props; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+    } = this.props;
     return React.Children.map(children, (child, index) => {
       if (!child) return;
       const itemRef = /*#__PURE__*/React.createRef();

package/es/accordion/panel.js

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

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

@@ -41,7 +41,6 @@ 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,7 +19,6 @@ export const Root = styled('ul', {
   width: '100%'
 });
 Root.displayName = "Root";
-Root.displayName = 'Root';
 export const PanelContainer = styled('li', props => {
   const {
     $expanded,
@@ -36,7 +35,6 @@ export const PanelContainer = styled('li', props => {
   };
 });
 PanelContainer.displayName = "PanelContainer";
-PanelContainer.displayName = 'PanelContainer';
 export const Header = styled('div', props => {
   const {
     $disabled,
@@ -70,7 +68,6 @@ export const Header = styled('div', props => {
   };
 });
 Header.displayName = "Header";
-Header.displayName = 'Header';
 export const ToggleIcon = styled('svg', props => {
   const {
     $theme,
@@ -84,7 +81,6 @@ export const ToggleIcon = styled('svg', props => {
   };
 });
 ToggleIcon.displayName = "ToggleIcon";
-ToggleIcon.displayName = 'ToggleIcon';
 export const ToggleIconGroup = styled('g', props => {
   const {
     $theme,
@@ -99,7 +95,6 @@ export const ToggleIconGroup = styled('g', props => {
   };
 });
 ToggleIconGroup.displayName = "ToggleIconGroup";
-ToggleIconGroup.displayName = 'ToggleIconGroup';
 export const Content = styled('div', props => {
   const {
     $theme: {
@@ -132,7 +127,6 @@ export const Content = styled('div', props => {
   };
 });
 Content.displayName = "Content";
-Content.displayName = 'Content';
 export const ContentAnimationContainer = styled('div', props => {
   const {
     $height,
@@ -148,5 +142,4 @@ 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,15 +30,13 @@ 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) {
@@ -95,9 +93,7 @@ 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,8 +11,7 @@ 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'; // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
+import MenuIcon from '../icon/menu';
 import { MenuAdapter, ListItemLabel, ARTWORK_SIZES } from '../list';
 import { StatefulMenu } from '../menu';
 import { StyledSideMenuButton, StyledUserMenuProfileListItem } from './styled-components';
@@ -20,7 +19,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 @typescript-eslint/no-explicit-any,react/display-name
+const PARENT_MENU_ITEM = 'PARENT_MENU_ITEM'; // eslint-disable-next-line react/display-name
 
 const MobileNavMenuItem = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
@@ -92,7 +91,6 @@ 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,7 +38,6 @@ const StyledButton = styled('button', ({
   cursor: 'pointer'
 }));
 StyledButton.displayName = "StyledButton";
-StyledButton.displayName = 'StyledButton';
 export const StyledRoot = styled('div', props => {
   const {
     $theme
@@ -84,10 +83,8 @@ 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
@@ -106,7 +103,6 @@ export const StyledSpacing = styled('div', props => {
   };
 });
 StyledSpacing.displayName = "StyledSpacing";
-StyledSpacing.displayName = 'StyledSpacing';
 export const StyledAppName = styled('div', ({
   $theme
 }) => ({ ...$theme.typography.font550,
@@ -116,7 +112,6 @@ export const StyledAppName = styled('div', ({
   }
 }));
 StyledAppName.displayName = "StyledAppName";
-StyledAppName.displayName = 'StyledAppName';
 export const StyledSideMenuButton = withStyle(StyledButton, ({
   $theme
 }) => ({ ...($theme.direction === 'rtl' ? {
@@ -130,7 +125,6 @@ export const StyledSideMenuButton = withStyle(StyledButton, ({
   paddingRight: $theme.sizing.scale100
 }));
 StyledSideMenuButton.displayName = "StyledSideMenuButton";
-StyledSideMenuButton.displayName = 'StyledSideMenuButton';
 export const StyledPrimaryMenuContainer = styled('div', ({
   $theme
 }) => {
@@ -147,7 +141,6 @@ export const StyledPrimaryMenuContainer = styled('div', ({
   };
 });
 StyledPrimaryMenuContainer.displayName = "StyledPrimaryMenuContainer";
-StyledPrimaryMenuContainer.displayName = 'StyledPrimaryMenuContainer';
 export const StyledMainMenuItem = styled('div', props => {
   const {
     $active,
@@ -193,7 +186,6 @@ export const StyledMainMenuItem = styled('div', props => {
   };
 });
 StyledMainMenuItem.displayName = "StyledMainMenuItem";
-StyledMainMenuItem.displayName = 'StyledMainMenuItem';
 export const StyledSecondaryMenuContainer = styled('div', ({
   $theme
 }) => {
@@ -211,9 +203,7 @@ export const StyledSecondaryMenuContainer = styled('div', ({
   };
 });
 StyledSecondaryMenuContainer.displayName = "StyledSecondaryMenuContainer";
-StyledSecondaryMenuContainer.displayName = 'StyledSecondaryMenuContainer';
 export const StyledUserMenuButton = StyledButton;
-StyledUserMenuButton.displayName = 'StyledUserMenuButton';
 export const StyledUserMenuProfileListItem = withStyle(StyledListItem, ({
   $theme
 }) => ({
@@ -226,7 +216,6 @@ export const StyledUserMenuProfileListItem = withStyle(StyledListItem, ({
   })
 }));
 StyledUserMenuProfileListItem.displayName = "StyledUserMenuProfileListItem";
-StyledUserMenuProfileListItem.displayName = 'StyledUserMenuProfileListItem';
 export const StyledUserProfileTileContainer = styled('div', ({
   $theme
 }) => {
@@ -242,7 +231,6 @@ export const StyledUserProfileTileContainer = styled('div', ({
   };
 });
 StyledUserProfileTileContainer.displayName = "StyledUserProfileTileContainer";
-StyledUserProfileTileContainer.displayName = 'StyledUserProfileTileContainer';
 export const StyledUserProfilePictureContainer = styled('div', ({
   $theme
 }) => {
@@ -254,8 +242,6 @@ 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
 }) => {
@@ -265,15 +251,12 @@ 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
 }) => {
@@ -287,5 +270,4 @@ 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 @typescript-eslint/no-explicit-any,react/display-name
+const MENU_ITEM_WIDTH = '275px'; // eslint-disable-next-line react/display-name
 
 const UserMenuListItem = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {

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

@@ -28,8 +28,7 @@ const aspectRatioBoxStyle = ({
     display: 'table',
     clear: 'both'
   }
-}); // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+});
 
 const AspectRatioBox = ({
   forwardedRef,
@@ -45,7 +44,6 @@ 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,7 +31,6 @@ 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',
@@ -40,7 +39,6 @@ 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
@@ -60,5 +58,4 @@ 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';
+import { styled } from '../styles/index';
 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.contentOnColor,
+        color: $theme.colors.contentInversePrimary,
         backgroundColor: $theme.colors.backgroundAccent
       },
       [COLOR.primary]: {
@@ -23,15 +23,15 @@ function getColorStyles({
         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
       }
     },
@@ -179,7 +179,6 @@ 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];
@@ -227,7 +226,6 @@ export const StyledPositioner = styled('div', ({
   };
 });
 StyledPositioner.displayName = "StyledPositioner";
-StyledPositioner.displayName = 'StyledPositioner';
 export const StyledBadge = styled('div', ({
   $theme,
   $shape = SHAPE.rectangle,
@@ -253,7 +251,6 @@ export const StyledBadge = styled('div', ({
   };
 });
 StyledBadge.displayName = "StyledBadge";
-StyledBadge.displayName = 'StyledBadge';
 export const StyledNotificationCircle = styled('div', ({
   $theme,
   $color = COLOR.accent,
@@ -276,7 +273,6 @@ export const StyledNotificationCircle = styled('div', ({
   };
 });
 StyledNotificationCircle.displayName = "StyledNotificationCircle";
-StyledNotificationCircle.displayName = 'StyledNotificationCircle';
 export const StyledHintDot = styled('div', ({
   $theme,
   $color = COLOR.accent,
@@ -297,5 +293,4 @@ export const StyledHintDot = styled('div', ({
     })
   };
 });
-StyledHintDot.displayName = "StyledHintDot";
-StyledHintDot.displayName = 'StyledHintDot';
+StyledHintDot.displayName = "StyledHintDot";