baseui 0.0.0-next-897fdf3 → 0.0.0-next-ac80337

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/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/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/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/badge/styled-components.js

@@ -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,

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/types.d.ts

@@ -1,7 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { Override } from '../helpers/overrides';
-import { ACTION_POSITION, ARTWORK_TYPE, HIERARCHY, KIND } from './constants';
-import type { SyntheticEvent } from 'react';
+import type { ACTION_POSITION, ARTWORK_TYPE, HIERARCHY, KIND } from './constants';
 export declare type ActionPosition = typeof ACTION_POSITION[keyof typeof ACTION_POSITION];
 export declare type ArtworkType = typeof ARTWORK_TYPE[keyof typeof ARTWORK_TYPE];
 export declare type Hierarchy = typeof HIERARCHY[keyof typeof HIERARCHY];
@@ -11,7 +10,7 @@ export declare type ActionContent = {
     icon?: (a: {
         size: string;
     }) => React.ReactNode;
-    onClick: (a: SyntheticEvent<HTMLButtonElement>) => unknown;
+    onClick: (a: React.SyntheticEvent<HTMLButtonElement>) => unknown;
     position?: ActionPosition;
 };
 export declare type ArtworkContent = {

package/block/types.d.ts

@@ -1,7 +1,6 @@
-import type { ElementType, ReactNode } from 'react';
+import type * as React from 'react';
 import type { StyleObject } from 'styletron-standard';
 import type { Override } from '../helpers/overrides';
-import * as React from 'react';
 export declare type BlockOverrides = {
     Block?: Override;
 };
@@ -20,8 +19,8 @@ declare type Position = 'static' | 'absolute' | 'relative' | 'fixed' | 'sticky';
 declare type Overflow = 'visible' | 'hidden' | 'scroll' | 'scrollX' | 'scrollY' | 'auto' | 'inherit' | 'initial' | 'unset';
 export declare type Scale = 0 | string;
 export declare type WhiteSpace = 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'break-spaces' | 'inherit' | 'initial' | 'unset';
-export declare type BlockProps<T extends ElementType = ElementType> = {
-    children?: ReactNode;
+export declare type BlockProps<T extends React.ElementType = React.ElementType> = {
+    children?: React.ReactNode;
     /** Modifies the base element used to render the block. */
     as?: T;
     overrides?: BlockOverrides;

package/button/types.d.ts

@@ -1,7 +1,6 @@
-import * as React from 'react';
-import { KIND, SIZE, SHAPE } from './constants';
+import type * as React from 'react';
+import type { KIND, SIZE, SHAPE } from './constants';
 import type { Override } from '../helpers/overrides';
-import type { ReactNode, SyntheticEvent } from 'react';
 export declare type ButtonOverrides = {
     Root?: Override;
     BaseButton?: Override;
@@ -15,7 +14,7 @@ export declare type CustomColors = {
     color: string;
 };
 export declare type ButtonProps = {
-    children?: ReactNode;
+    children?: React.ReactNode;
     colors?: CustomColors;
     disabled?: boolean;
     /** A helper rendered at the end of the button. */
@@ -26,7 +25,7 @@ export declare type ButtonProps = {
     isSelected?: boolean;
     /** Defines the kind (purpose) of a button */
     kind?: keyof typeof KIND;
-    onClick?: (a: SyntheticEvent<HTMLButtonElement>) => unknown;
+    onClick?: (a: React.SyntheticEvent<HTMLButtonElement>) => unknown;
     overrides?: ButtonOverrides;
     /** Defines the shape of the button */
     shape?: keyof typeof SHAPE;

package/button-group/types.d.ts

@@ -1,8 +1,7 @@
-import * as React from 'react';
-import { SIZE, SHAPE, KIND } from '../button';
+import type * as React from 'react';
+import type { SIZE, SHAPE, KIND } from '../button';
 import type { Override } from '../helpers/overrides';
-import { MODE, STATE_CHANGE_TYPE } from './constants';
-import type { SyntheticEvent } from 'react';
+import type { MODE, STATE_CHANGE_TYPE } from './constants';
 export declare type ButtonGroupProps = {
     /** Accessible label. */
     ariaLabel?: string;
@@ -55,5 +54,5 @@ export declare type State = {
     selected: Array<number>;
 };
 export declare type StateReducer = (stateType: typeof STATE_CHANGE_TYPE[keyof typeof STATE_CHANGE_TYPE], nextState: State, currentState: State) => State;
-declare type ClickHandler = (event: SyntheticEvent<HTMLButtonElement>, index: number) => unknown;
+declare type ClickHandler = (event: React.SyntheticEvent<HTMLButtonElement>, index: number) => unknown;
 export {};

package/checkbox/types.d.ts

@@ -1,7 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { Override } from '../helpers/overrides';
-import { STYLE_TYPE } from './constants';
-import type { ReactNode, ChangeEvent } from 'react';
+import type { STYLE_TYPE } from './constants';
 export declare type LabelPlacement = 'top' | 'right' | 'bottom' | 'left';
 export declare type StyleType = keyof typeof STYLE_TYPE;
 export declare type CheckboxOverrides = {
@@ -15,7 +14,7 @@ export declare type CheckboxOverrides = {
 };
 export declare type DefaultProps = {
     overrides?: any;
-    children?: ReactNode;
+    children?: React.ReactNode;
     checked: boolean;
     disabled: boolean;
     error: boolean;
@@ -24,13 +23,13 @@ export declare type DefaultProps = {
     isIndeterminate: boolean;
     inputRef: React.RefObject<HTMLInputElement>;
     checkmarkType: StyleType;
-    onChange: (e: ChangeEvent<HTMLInputElement>) => unknown;
-    onMouseEnter: (e: ChangeEvent<HTMLInputElement>) => unknown;
-    onMouseLeave: (e: ChangeEvent<HTMLInputElement>) => unknown;
-    onMouseDown: (e: ChangeEvent<HTMLInputElement>) => unknown;
-    onMouseUp: (e: ChangeEvent<HTMLInputElement>) => unknown;
-    onFocus: (e: ChangeEvent<HTMLInputElement>) => unknown;
-    onBlur: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseEnter: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseLeave: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseDown: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseUp: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onFocus: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onBlur: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     containsInteractiveElement?: boolean;
 };
 export declare type CheckboxProps = {
@@ -42,7 +41,7 @@ export declare type CheckboxProps = {
     ariaLabel?: string;
     'aria-label'?: string;
     /** Component or String value for label of checkbox. */
-    children?: ReactNode;
+    children?: React.ReactNode;
     /** Indicates if this checkbox children contain an interactive element (prevents the label from moving focus from the child element to the radio button) */
     containsInteractiveElement?: boolean;
     overrides?: CheckboxOverrides;
@@ -73,19 +72,19 @@ export declare type CheckboxProps = {
     /** Text to display in native OS tooltip on long hover. */
     title?: string | null;
     /** Handler for change events on trigger element. */
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     /** Handler for mouseenter events on trigger element. */
-    onMouseEnter?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseEnter?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     /** Handler for mouseleave events on trigger element. */
-    onMouseLeave?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseLeave?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     /** Handler for mousedown events on trigger element. */
-    onMouseDown?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseDown?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     /** Handler for mouseup events on trigger element. */
-    onMouseUp?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseUp?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     /** handler for focus events on trigger element. */
-    onFocus?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onFocus?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     /** handler for blur events on trigger element. */
-    onBlur?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onBlur?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
 };
 export declare type CheckboxState = {
     isFocused: boolean;
@@ -97,50 +96,50 @@ export declare type CheckboxReducerState = {
     checked?: boolean;
     isIndeterminate?: boolean;
 };
-export declare type StateReducer = (stateType: string, nextState: CheckboxReducerState, currentState: CheckboxReducerState, event: ChangeEvent<HTMLInputElement>) => CheckboxReducerState;
+export declare type StateReducer = (stateType: string, nextState: CheckboxReducerState, currentState: CheckboxReducerState, event: React.ChangeEvent<HTMLInputElement>) => CheckboxReducerState;
 export declare type StatefulContainerChildProps = {
     overrides?: CheckboxOverrides;
     /** Handler for change events on trigger element. */
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     /** Handler for mouseenter events on trigger element. */
-    onMouseEnter?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseEnter?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     /** Handler for mouseleave events on trigger element. */
-    onMouseLeave?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseLeave?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     /** Handler for focus events on trigger element. */
-    onFocus?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onFocus?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     /** Handler for blur events on trigger element. */
-    onBlur?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onBlur?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     /** Focus the checkbox on initial render. */
     autoFocus?: boolean;
 } & CheckboxReducerState;
 export declare type DefaultStatefulProps = {
     initialState: CheckboxReducerState;
-    children?: (a: StatefulContainerChildProps) => ReactNode;
+    children?: (a: StatefulContainerChildProps) => React.ReactNode;
     stateReducer: StateReducer;
-    onChange: (e: ChangeEvent<HTMLInputElement>) => unknown;
-    onMouseEnter: (e: ChangeEvent<HTMLInputElement>) => unknown;
-    onMouseLeave: (e: ChangeEvent<HTMLInputElement>) => unknown;
-    onFocus: (e: ChangeEvent<HTMLInputElement>) => unknown;
-    onBlur: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseEnter: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseLeave: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onFocus: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onBlur: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
 };
 export declare type StatefulContainerProps = {
     overrides?: CheckboxOverrides;
     /** Component or String value for label of checkbox. */
-    children?: (a: StatefulContainerChildProps) => ReactNode;
+    children?: (a: StatefulContainerChildProps) => React.ReactNode;
     /** Defines the components initial state value */
     initialState?: CheckboxReducerState;
     /** A state change handler. Used to override default state transitions. */
     stateReducer: StateReducer;
     /** Handler for change events on trigger element. */
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     /** Handler for mouseenter events on trigger element. */
-    onMouseEnter?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseEnter?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     /** Handler for mouseleave events on trigger element. */
-    onMouseLeave?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onMouseLeave?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     /** Handler for focus events on trigger element. */
-    onFocus?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onFocus?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     /** Handler for blur events on trigger element. */
-    onBlur?: (e: ChangeEvent<HTMLInputElement>) => unknown;
+    onBlur?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     /** Focus the checkbox on initial render. */
     autoFocus?: boolean;
 };

package/combobox/types.d.ts

@@ -1,7 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { Override } from '../helpers/overrides';
-import { SIZE } from '../input';
-import type { ChangeEvent } from 'react';
+import type { SIZE } from '../input';
 export declare type ComboboxOverrides = {
     Root?: Override;
     InputContainer?: Override;
@@ -23,9 +22,9 @@ export declare type ComboboxProps<Option = unknown> = {
     id?: string;
     name?: string;
     inputRef?: React.Ref<HTMLElement>;
-    onBlur?: (a: ChangeEvent<HTMLInputElement>) => unknown;
+    onBlur?: (a: React.ChangeEvent<HTMLInputElement>) => unknown;
     onChange: (b: string, a: Option | null) => unknown;
-    onFocus?: (a: ChangeEvent<HTMLInputElement>) => unknown;
+    onFocus?: (a: React.ChangeEvent<HTMLInputElement>) => unknown;
     onSubmit?: (a: {
         closeListbox: () => void;
         value: string;

package/data-table/types.d.ts

@@ -1,6 +1,5 @@
-import * as React from 'react';
-import { COLUMNS, SORT_DIRECTIONS } from './constants';
-import type { SyntheticEvent } from 'react';
+import type * as React from 'react';
+import type { COLUMNS, SORT_DIRECTIONS } from './constants';
 export declare type SortDirections = typeof SORT_DIRECTIONS[keyof typeof SORT_DIRECTIONS];
 export declare type Columns = typeof COLUMNS[keyof typeof COLUMNS];
 export declare type SharedColumnOptions<Value> = {
@@ -45,7 +44,7 @@ export declare type BatchAction = {
     label: string;
     onClick: (a: {
         clearSelection: () => unknown;
-        event: SyntheticEvent<HTMLButtonElement>;
+        event: React.SyntheticEvent<HTMLButtonElement>;
         selection: Row[];
     }) => unknown;
     renderIcon?: React.ComponentType<{
@@ -55,7 +54,7 @@ export declare type BatchAction = {
 export declare type RowAction = {
     label: string;
     onClick: (a: {
-        event: SyntheticEvent<HTMLButtonElement>;
+        event: React.SyntheticEvent<HTMLButtonElement>;
         row: Row;
     }) => unknown;
     renderIcon: React.ComponentType<{

package/datepicker/types.d.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { Override } from '../helpers/overrides';
 import type { Size } from '../input';
-import { INPUT_ROLE, ORIENTATION, RANGED_CALENDAR_BEHAVIOR, STATE_CHANGE_TYPE, DENSITY } from './constants';
+import type { INPUT_ROLE, ORIENTATION, RANGED_CALENDAR_BEHAVIOR, STATE_CHANGE_TYPE, DENSITY } from './constants';
 import type { DateIOAdapter } from './utils/types';
 declare type Locale = any;
 export declare type Density = keyof typeof DENSITY;

package/divider/types.d.ts

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

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

package/drawer/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 { SIZE, CLOSE_SOURCE, ANCHOR } from './constants';
+import type { 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/badge/styled-components.js

@@ -15,7 +15,7 @@ function getColorStyles({
   const COLOR_STYLES = {
     [HIERARCHY.primary]: {
       [COLOR.accent]: {
-        color: $theme.colors.contentInversePrimary,
+        color: $theme.colors.contentOnColor,
         backgroundColor: $theme.colors.backgroundAccent
       },
       [COLOR.primary]: {
@@ -23,15 +23,15 @@ function getColorStyles({
         backgroundColor: $theme.colors.backgroundInversePrimary
       },
       [COLOR.positive]: {
-        color: $theme.colors.contentInversePrimary,
+        color: $theme.colors.contentOnColor,
         backgroundColor: $theme.colors.backgroundPositive
       },
       [COLOR.negative]: {
-        color: $theme.colors.contentInversePrimary,
+        color: $theme.colors.contentOnColor,
         backgroundColor: $theme.colors.backgroundNegative
       },
       [COLOR.warning]: {
-        color: $theme.colors.primaryA,
+        color: $theme.colors.contentOnColorInverse,
         backgroundColor: $theme.colors.backgroundWarning
       }
     },

package/es/tabs-motion/styled-components.js

@@ -25,6 +25,14 @@ export const StyledRoot = styled('div', ({
 });
 StyledRoot.displayName = "StyledRoot";
 StyledRoot.displayName = 'StyledRoot';
+export const StyledTabBar = styled('div', ({
+  $hasEndEnhancer,
+  $orientation
+}) => $hasEndEnhancer || !isHorizontal($orientation) ? {
+  display: 'flex'
+} : {});
+StyledTabBar.displayName = "StyledTabBar";
+StyledTabBar.displayName = 'StyledTabBar';
 export const StyledTabList = styled('div', ({
   $theme,
   $fill = FILL.intrinsic,
@@ -33,7 +41,8 @@ export const StyledTabList = styled('div', ({
   const style = {
     position: 'relative',
     display: 'flex',
-    flexWrap: 'nowrap'
+    flexWrap: 'nowrap',
+    flexGrow: 1
   };
 
   if (isHorizontal($orientation)) {
@@ -139,6 +148,19 @@ export const StyledTab = styled('button', ({
 });
 StyledTab.displayName = "StyledTab";
 StyledTab.displayName = 'StyledTab';
+export const StyledEndEnhancerContainer = styled('div', ({
+  $theme
+}) => {
+  const marginDirection = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    [marginDirection]: $theme.sizing.scale600
+  };
+});
+StyledEndEnhancerContainer.displayName = "StyledEndEnhancerContainer";
+StyledEndEnhancerContainer.displayName = 'StyledEndEnhancerContainer';
 export const StyledArtworkContainer = styled('div', ({
   $theme,
   $orientation = ORIENTATION.horizontal

package/es/tabs-motion/tabs.js

@@ -9,12 +9,13 @@ LICENSE file in the root directory of this source tree.
 
 /* global window */
 import * as React from 'react';
+import * as ReactIs from 'react-is';
 import { useUID } from 'react-uid';
 import { useStyletron } from '../styles';
 import { getOverrides } from '../helpers/overrides';
 import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible';
 import { ORIENTATION, FILL } from './constants';
-import { StyledRoot, StyledTabList, StyledTab, StyledArtworkContainer, StyledTabHighlight, StyledTabBorder, StyledTabPanel } from './styled-components';
+import { StyledRoot, StyledTabList, StyledTab, StyledArtworkContainer, StyledTabHighlight, StyledTabBorder, StyledTabPanel, StyledEndEnhancerContainer, StyledTabBar } from './styled-components';
 import { getTabId, getTabPanelId, isVertical, isHorizontal, isRTL } from './utils';
 const KEYBOARD_ACTION = {
   next: 'next',
@@ -78,6 +79,20 @@ const scrollParentToCentreTarget = targetNode => {
   targetNode.parentNode.scroll(target.x, target.y);
 };
 
+function RenderEnhancer({
+  Enhancer
+}) {
+  if (typeof Enhancer === 'string') {
+    return Enhancer;
+  }
+
+  if (ReactIs.isValidElementType(Enhancer)) {
+    return /*#__PURE__*/React.createElement(Enhancer, null);
+  }
+
+  return Enhancer;
+}
+
 export function Tabs({
   activeKey = '0',
   disabled = false,
@@ -88,7 +103,8 @@ export function Tabs({
   orientation = ORIENTATION.horizontal,
   overrides = {},
   renderAll = false,
-  uid: customUid = null
+  uid: customUid = null,
+  endEnhancer
 }) {
   // Create unique id prefix for this tabs component
   const generatedUid = useUID();
@@ -103,7 +119,8 @@ export function Tabs({
   const [Root, RootProps] = getOverrides(RootOverrides, StyledRoot);
   const [TabList, TabListProps] = getOverrides(TabListOverrides, StyledTabList);
   const [TabHighlight, TabHighlightProps] = getOverrides(TabHighlightOverrides, StyledTabHighlight);
-  const [TabBorder, TabBorderProps] = getOverrides(TabBorderOverrides, StyledTabBorder); // Count key updates
+  const [TabBorder, TabBorderProps] = getOverrides(TabBorderOverrides, StyledTabBorder);
+  const [EndEnhancerContainer, endEnhancerContainerProps] = getOverrides(overrides.EndEnhancerContainer, StyledEndEnhancerContainer); // Count key updates
   // We disable a few things until after first mount:
   // - the highlight animation, avoiding an initial slide-in
   // - smooth scrolling active tab into view
@@ -196,7 +213,10 @@ export function Tabs({
       }
     }
   }, [orientation, theme.direction]);
-  return /*#__PURE__*/React.createElement(Root, _extends({}, sharedStylingProps, RootProps), /*#__PURE__*/React.createElement(TabList, _extends({
+  return /*#__PURE__*/React.createElement(Root, _extends({}, sharedStylingProps, RootProps), /*#__PURE__*/React.createElement(StyledTabBar, {
+    $hasEndEnhancer: Boolean(endEnhancer),
+    $orientation: orientation
+  }, /*#__PURE__*/React.createElement(TabList, _extends({
     "data-baseweb": "tab-list",
     role: "tablist",
     "aria-orientation": orientation
@@ -224,7 +244,11 @@ export function Tabs({
     $animate: keyUpdated > 1,
     "aria-hidden": "true",
     role: "presentation"
-  }, sharedStylingProps, TabHighlightProps))), /*#__PURE__*/React.createElement(TabBorder, _extends({
+  }, sharedStylingProps, TabHighlightProps))), orientation === ORIENTATION.horizontal && endEnhancer !== null && endEnhancer !== undefined && /*#__PURE__*/React.createElement(EndEnhancerContainer, _extends({}, endEnhancerContainerProps, {
+    $orientation: orientation
+  }), /*#__PURE__*/React.createElement(RenderEnhancer, {
+    Enhancer: endEnhancer
+  }))), /*#__PURE__*/React.createElement(TabBorder, _extends({
     "data-baseweb": "tab-border",
     "aria-hidden": "true",
     role: "presentation"

package/esm/badge/styled-components.js

@@ -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,