baseui 0.0.0-alpha-3479e57 → 0.0.0-alpha-8ab2335

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

@@ -32,7 +32,10 @@ var StyledRoot = (0, _styles.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;

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

@@ -45,7 +45,8 @@ StyledListItem.displayName = 'StyledListItem';
 var StyledSeparator = (0, _styles.styled)('div', function (_ref4) {
   var $theme = _ref4.$theme;
   return {
-    display: 'inline-block',
+    display: 'inline-flex',
+    alignItems: 'center',
     color: $theme.colors.breadcrumbsSeparatorFill,
     marginLeft: $theme.sizing.scale300,
     marginRight: $theme.sizing.scale300,

package/button/styled-components.js

@@ -247,6 +247,8 @@ function getBorderRadiiStyles(_ref9) {
     }
   } else if ($shape === _constants.SHAPE.circle || $shape === _constants.SHAPE.round) {
     value = '50%';
+  } else if ($size === _constants.SIZE.mini) {
+    value = $theme.borders.buttonBorderRadiusMini;
   }
 
   return {

package/button/styled-components.js.flow

@@ -198,6 +198,8 @@ function getBorderRadiiStyles({ $theme, $size, $shape }) {
     }
   } else if ($shape === SHAPE.circle || $shape === SHAPE.round) {
     value = '50%';
+  } else if ($size === SIZE.mini) {
+    value = $theme.borders.buttonBorderRadiusMini;
   }
 
   return {

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

@@ -155,7 +155,7 @@ var Checkmark = (0, _styles.styled)('span', function (props) {
   var tickColor = $disabled ? $theme.colors.tickMarkFillDisabled : $error ? $theme.colors.tickMarkFillError : $theme.colors.tickMarkFill;
   var indeterminate = encodeURIComponent("\n    <svg width=\"14\" height=\"4\" viewBox=\"0 0 14 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M14 0.5H0V3.5H14V0.5Z\" fill=\"".concat(tickColor, "\"/>\n    </svg>\n  "));
   var check = encodeURIComponent("\n    <svg width=\"17\" height=\"13\" viewBox=\"0 0 17 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M6.50002 12.6L0.400024 6.60002L2.60002 4.40002L6.50002 8.40002L13.9 0.900024L16.1 3.10002L6.50002 12.6Z\" fill=\"".concat(tickColor, "\"/>\n    </svg>\n  "));
-  var borderRadius = $theme.borders.inputBorderRadius;
+  var borderRadius = $theme.borders.checkboxBorderRadius;
   var borderColor = getBorderColor(props);
   return {
     flex: '0 0 auto',

package/checkbox/styled-components.js.flow

@@ -142,7 +142,7 @@ export const Checkmark = styled<SharedStylePropsT>('span', (props) => {
     </svg>
   `);
 
-  const borderRadius = $theme.borders.inputBorderRadius;
+  const borderRadius = $theme.borders.checkboxBorderRadius;
   const borderColor = getBorderColor(props);
 
   return ({

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/measure-column-widths.js

@@ -51,7 +51,7 @@ function MeasureColumn(_ref) {
         onLayout(columnIndex, ref.current.getBoundingClientRect());
       }
     }
-  }, []);
+  }, [onLayout]);
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
     className: css({
@@ -133,7 +133,7 @@ function MeasureColumnWidths(_ref2) {
 
   var widthMap = React.useMemo(function () {
     return new Map();
-  }, []);
+  }, [rows]);
   var sampleSize = rows.length < MAX_SAMPLE_SIZE ? rows.length : MAX_SAMPLE_SIZE;
   var finishedMeasurementCount = (sampleSize + 1) * columns.length;
   var sampleIndexes = React.useMemo(function () {
@@ -152,7 +152,7 @@ function MeasureColumnWidths(_ref2) {
     widthMap.size === Math.floor(columns.length / 4)) {
       onWidthsChange(Array.from(widthMap.values()));
     }
-  }, [columns, finishedMeasurementCount, onWidthsChange]);
+  }, [columns, rows, finishedMeasurementCount, onWidthsChange]);
   var hiddenStyle = css({
     position: 'absolute',
     overflow: 'hidden',

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

@@ -5,7 +5,7 @@ export { default as StatefulCalendar } from './stateful-calendar';
 export { default as Datepicker, default as DatePicker } from './datepicker';
 export { default as StatefulDatepicker, default as StatefulDatePicker, } from './stateful-datepicker';
 export { formatDate } from './utils';
-export { ORIENTATION, STATE_CHANGE_TYPE } from './constants';
+export { DENSITY, ORIENTATION, STATE_CHANGE_TYPE } from './constants';
 export * from './styled-components';
 export * from '../timepicker';
 export * from '../timezonepicker';

package/datepicker/index.js

@@ -12,6 +12,7 @@ var _exportNames = {
   StatefulDatepicker: true,
   StatefulDatePicker: true,
   formatDate: true,
+  DENSITY: true,
   ORIENTATION: true,
   STATE_CHANGE_TYPE: true
 };
@@ -21,6 +22,12 @@ Object.defineProperty(exports, "Calendar", {
     return _calendar.default;
   }
 });
+Object.defineProperty(exports, "DENSITY", {
+  enumerable: true,
+  get: function get() {
+    return _constants.DENSITY;
+  }
+});
 Object.defineProperty(exports, "DatePicker", {
   enumerable: true,
   get: function get() {

package/datepicker/index.js.flow

@@ -18,7 +18,7 @@ export { default as TimezonePicker } from '../timezonepicker/timezone-picker.js'
 // Util functions
 export { formatDate } from './utils/index.js';
 // Constants
-export { ORIENTATION, STATE_CHANGE_TYPE } from './constants.js';
+export { DENSITY, ORIENTATION, STATE_CHANGE_TYPE } from './constants.js';
 // Styled elements
 export * from './styled-components.js';
 // Flow

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

@@ -24,7 +24,10 @@ export const StyledRoot = styled('div', ({
     gridColumnGap: $theme.sizing.scale600,
     gridTemplateColumns: 'min-content auto min-content',
     gridTemplateRows: 'auto min-content',
-    margin: $theme.sizing.scale600
+    marginTop: $theme.sizing.scale600,
+    marginRight: $theme.sizing.scale600,
+    marginBottom: $theme.sizing.scale600,
+    marginLeft: $theme.sizing.scale600
   };
 });
 StyledRoot.displayName = "StyledRoot";

package/es/breadcrumbs/styled-components.js

@@ -41,7 +41,8 @@ export const StyledSeparator = styled('div', ({
   $theme
 }) => {
   return {
-    display: 'inline-block',
+    display: 'inline-flex',
+    alignItems: 'center',
     color: $theme.colors.breadcrumbsSeparatorFill,
     marginLeft: $theme.sizing.scale300,
     marginRight: $theme.sizing.scale300,

package/es/button/styled-components.js

@@ -244,6 +244,8 @@ function getBorderRadiiStyles({
     }
   } else if ($shape === SHAPE.circle || $shape === SHAPE.round) {
     value = '50%';
+  } else if ($size === SIZE.mini) {
+    value = $theme.borders.buttonBorderRadiusMini;
   }
 
   return {

package/es/checkbox/styled-components.js

@@ -180,7 +180,7 @@ export const Checkmark = styled('span', props => {
       <path d="M6.50002 12.6L0.400024 6.60002L2.60002 4.40002L6.50002 8.40002L13.9 0.900024L16.1 3.10002L6.50002 12.6Z" fill="${tickColor}"/>
     </svg>
   `);
-  const borderRadius = $theme.borders.inputBorderRadius;
+  const borderRadius = $theme.borders.checkboxBorderRadius;
   const borderColor = getBorderColor(props);
   return {
     flex: '0 0 auto',