baseui 12.1.3 → 13.0.0

package/dnd-list/styled-components.js

@@ -26,7 +26,8 @@ var Root = (0, _styles.styled)('div', function (_ref) {
 exports.Root = Root;
 Root.displayName = "Root";
 Root.displayName = 'Root';
-Root.displayName = 'StyledRoot';
+Root.displayName = 'StyledRoot'; // @ts-ignore
+
 var List = (0, _styles.styled)('ul', function (_ref2) {
   var $isDragged = _ref2.$isDragged;
   return {
@@ -39,7 +40,8 @@ exports.List = List;
 List.displayName = "List";
 List.displayName = 'List';
 List.displayName = 'StyledList';
-var Item = (0, _styles.styled)('li', function (_ref3) {
+var Item = (0, _styles.styled)('li', // @ts-ignore
+function (_ref3) {
   var $isDragged = _ref3.$isDragged,
       $isSelected = _ref3.$isSelected,
       $theme = _ref3.$theme,

package/dnd-list/types.d.ts

@@ -1,12 +1,12 @@
 import type * as React from 'react';
 import type { Override } from '../helpers/overrides';
 import type { STATE_CHANGE_TYPE } from './constants';
-export declare type State = {
+export type State = {
     items: Array<React.ReactNode>;
 };
-export declare type StateChangeType = typeof STATE_CHANGE_TYPE[keyof typeof STATE_CHANGE_TYPE];
-export declare type StateReducer = (stateChangeType: StateChangeType, nextState: State, currentState: State) => State;
-export declare type ListOverrides = {
+export type StateChangeType = (typeof STATE_CHANGE_TYPE)[keyof typeof STATE_CHANGE_TYPE];
+export type StateReducer = (stateChangeType: StateChangeType, nextState: State, currentState: State) => State;
+export type ListOverrides = {
     Root?: Override;
     List?: Override;
     Item?: Override;
@@ -14,7 +14,7 @@ export declare type ListOverrides = {
     CloseHandle?: Override;
     Label?: Override;
 };
-export declare type ListProps = {
+export type ListProps = {
     /** Set if the list items should be removable */
     removable?: boolean;
     /** Set if the list items should be removable by dragging them far left or right */
@@ -28,7 +28,7 @@ export declare type ListProps = {
     }) => unknown;
     overrides?: ListOverrides;
 };
-export declare type StatefulListProps = {
+export type StatefulListProps = {
     /** Initial state populated into the component */
     initialState?: State;
     /** Reducer function to manipulate internal state updates. */
@@ -46,11 +46,11 @@ export declare type StatefulListProps = {
     }) => unknown;
     overrides?: ListOverrides;
 };
-export declare type StatefulComponentContainerProps = Omit<StatefulListProps, 'children'> & {
+export type StatefulComponentContainerProps = Omit<StatefulListProps, 'children'> & {
     initialState?: State;
     children: (props: Omit<ListProps, 'children'>) => React.ReactNode;
 };
-export declare type SharedStylePropsArg = {
+export type SharedStylePropsArg = {
     $isDragged: boolean;
     $isSelected: boolean;
     $isFocusVisible: boolean;

package/drawer/drawer.d.ts

@@ -3,8 +3,8 @@ import type { DrawerProps, DrawerState, SharedStylePropsArg, CloseSource, Elemen
 import type { SyntheticEvent } from 'react';
 declare class Drawer extends React.Component<DrawerProps, DrawerState> {
     static defaultProps: Partial<DrawerProps>;
-    animateOutTimer: TimeoutID | undefined | null;
-    animateStartTimer: AnimationFrameID | undefined | null;
+    animateOutTimer: ReturnType<typeof setTimeout> | undefined | null;
+    animateStartTimer: ReturnType<typeof requestAnimationFrame> | undefined | null;
     lastFocus: HTMLElement | undefined | null;
     lastMountNodeOverflowStyle: string | undefined | null;
     _refs: {
@@ -32,7 +32,7 @@ declare class Drawer extends React.Component<DrawerProps, DrawerState> {
     triggerClose(source?: CloseSource): void;
     animateOutComplete: () => void;
     getSharedProps(): Omit<SharedStylePropsArg, 'children'>;
-    getChildren(): any;
+    getChildren(): React.ReactNode;
     getRef(component: string): ElementRef;
     renderDrawer(renderedContent: React.ReactNode): JSX.Element;
     render(): JSX.Element;

package/drawer/locale.d.ts

@@ -1,4 +1,4 @@
-export declare type DrawerLocale = {
+export type DrawerLocale = {
     close: string;
 };
 declare const locale: {

package/drawer/styled-components.js

@@ -25,18 +25,20 @@ function getSizeStyles($size, $anchor) {
 
   if ($anchor === _constants.ANCHOR.left || $anchor === _constants.ANCHOR.right) {
     // If the anchor is horizontal, set the width
-    styles.height = _constants.SIZE_DIMENSION.full;
+    styles.height = _constants.SIZE_DIMENSION.full; // @ts-ignore
 
     if (_constants.SIZE[$size]) {
+      // @ts-ignore
       styles.width = _constants.SIZE_DIMENSION[$size];
     } else if (typeof $size === 'string') {
       styles.width = $size;
     }
   } else {
     // If the anchor is vertical, set the height
-    styles.width = _constants.SIZE_DIMENSION.full;
+    styles.width = _constants.SIZE_DIMENSION.full; // @ts-ignore
 
     if (_constants.SIZE[$size]) {
+      // @ts-ignore
       styles.height = _constants.SIZE_DIMENSION[$size];
     } else if (typeof $size === 'string') {
       styles.height = $size;
@@ -60,8 +62,8 @@ function getAnchorStyles(props) {
     case right:
       {
         return _objectSpread({
-          transform: $isVisible ? 'translateX(0)' : "translateX(".concat(sizeStyles.width, ")"),
-          right: $isVisible ? 0 : "-".concat(sizeStyles.width),
+          transform: $isVisible ? 'translateX(0)' : 'translateX(100%)',
+          right: $isVisible ? 0 : '-100%',
           top: 0
         }, sizeStyles);
       }
@@ -69,8 +71,8 @@ function getAnchorStyles(props) {
     case left:
       {
         return _objectSpread({
-          transform: $isVisible ? 'translateX(0)' : "translateX(-".concat(sizeStyles.width, ")"),
-          left: $isVisible ? 0 : "-".concat(sizeStyles.width),
+          transform: $isVisible ? 'translateX(0)' : "translateX(-100%)",
+          left: $isVisible ? 0 : '-100%',
           top: 0
         }, sizeStyles);
       }
@@ -78,18 +80,18 @@ function getAnchorStyles(props) {
     case bottom:
       {
         return _objectSpread({
-          transform: $isVisible ? 'translateY(0)' : "translateY(".concat(sizeStyles.height, ")"),
+          transform: $isVisible ? 'translateY(0)' : 'translateY(100%)',
           left: 0,
-          bottom: $isVisible ? '0' : "-".concat(sizeStyles.height)
+          bottom: $isVisible ? '0' : "-100%"
         }, sizeStyles);
       }
 
     case top:
       {
         return _objectSpread({
-          transform: $isVisible ? 'translateY(0)' : "translateY(-".concat(sizeStyles.height, ")"),
+          transform: $isVisible ? 'translateY(0)' : 'translateY(-100%)',
           left: 0,
-          top: $isVisible ? '0' : "-".concat(sizeStyles.height)
+          top: $isVisible ? '0' : '-100%'
         }, sizeStyles);
       }
 
@@ -140,7 +142,8 @@ var StyledBackdrop = (0, _styles.styled)('div', function (props) {
 });
 exports.StyledBackdrop = StyledBackdrop;
 StyledBackdrop.displayName = "StyledBackdrop";
-StyledBackdrop.displayName = 'StyledBackdrop';
+StyledBackdrop.displayName = 'StyledBackdrop'; // @ts-ignore
+
 var StyledDrawerContainer = (0, _styles.styled)('div', function (props) {
   var $animating = props.$animating,
       $isOpen = props.$isOpen,

package/drawer/types.d.ts

@@ -1,22 +1,22 @@
 import type * as React from 'react';
 import type { Override } from '../helpers/overrides';
 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;
-export declare type AnchorProp = Anchor | string;
-export declare type CloseSource = keyof typeof CLOSE_SOURCE;
-export declare type DrawerOverrides = {
+export type Size = keyof typeof SIZE;
+export type SizeProp = Size | string;
+export type Anchor = keyof typeof ANCHOR;
+export type AnchorProp = Anchor | string;
+export type CloseSource = keyof typeof CLOSE_SOURCE;
+export type DrawerOverrides = {
     Root?: Override;
     Backdrop?: Override;
     DrawerBody?: Override;
     DrawerContainer?: Override;
     Close?: Override;
 };
-export declare type ElementRef = {
+export type ElementRef = {
     current: any | null;
 };
-export declare type DrawerProps = {
+export type DrawerProps = {
     /** Sets whether the Drawer should be displayed by easing in and out */
     animate: boolean;
     isOpen: boolean;
@@ -50,13 +50,13 @@ export declare type DrawerProps = {
     onBackdropClick?: (e: Event) => unknown;
     onEscapeKeyDown?: (e: Event) => unknown;
 };
-export declare type DrawerPropsWithoutChildren = Omit<DrawerProps, 'children'>;
-export declare type DrawerState = {
+export type DrawerPropsWithoutChildren = Omit<DrawerProps, 'children'>;
+export type DrawerState = {
     isVisible: boolean;
     mounted: boolean;
     isFocusVisible: boolean;
 };
-export declare type SharedStylePropsArg = {
+export type SharedStylePropsArg = {
     children?: React.ReactNode;
     $animating: boolean;
     $isVisible: boolean;

package/es/a11y/a11y.js

@@ -76,6 +76,7 @@ function Violation(props) {
     const node = document.querySelector(props.target);
 
     if (node) {
+      // @ts-ignore
       setAnchor(node);
       node.setAttribute('style', `border: solid 1px ${theme.colors.negative300};`);
       node.addEventListener('mouseenter', handleMouseEnter);
@@ -95,7 +96,8 @@ function Violation(props) {
     popperRef: popper,
     onPopperUpdate: update => setOffset(update.popper),
     placement: TETHER_PLACEMENT.bottom
-  }, /*#__PURE__*/React.createElement(ViolationContainer, {
+  }, /*#__PURE__*/React.createElement(ViolationContainer // @ts-ignore
+  , {
     ref: setPopper,
     $top: `${offset.top}px` || '0px',
     $left: `${offset.left}px` || '0px'
@@ -116,8 +118,10 @@ export default function A11y(props) {
       }
 
       const id = requestIdleCallback(() => {
+        // @ts-ignore
         validateNode(child.current).then(setViolations);
-      });
+      }); // @ts-ignore
+
       setIdleID(id);
     }
   }, [props.children]);

package/es/accordion/accordion.js

@@ -142,6 +142,7 @@ export default class Accordion extends React.Component {
         renderAll,
         overrides: child.props.overrides || overrides,
         disabled: child.props.disabled || disabled,
+        // @ts-ignore
         onChange: (...args) => this.onPanelChange(key, child.props.onChange, ...args)
       };
       return /*#__PURE__*/React.cloneElement(child, props);

package/es/accordion/panel.js

@@ -23,7 +23,8 @@ const Panel = ({
   overrides = {},
   title = '',
   renderAll = false
-}, ref) => {
+}, // @ts-ignore
+ref) => {
   const [localState, setLocalState] = React.useState({
     expanded,
     isFocusVisible: false,

package/es/accordion/stateless-accordion.js

@@ -39,6 +39,7 @@ function StatelessAccordion({
       key,
       onChange: // Don't bother constructing the wrapper function if no one is listening
       onChange && typeof onChange === 'function' ? () => {
+        // @ts-ignore
         let next;
 
         if (accordion) {
@@ -53,7 +54,8 @@ function StatelessAccordion({
           } else {
             next = [...expanded, key];
           }
-        }
+        } // @ts-ignore
+
 
         onChange({
           key,

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

@@ -14,7 +14,7 @@ import { KIND, POSITION } from './constants';
 import MobileNav from './mobile-menu';
 import UserMenu from './user-menu';
 import { StyledRoot, StyledSpacing, StyledPrimaryMenuContainer, StyledSecondaryMenuContainer, StyledAppName, StyledMainMenuItem, StyledDesktopMenuContainer, StyledDesktopMenu } from './styled-components';
-import { defaultMapItemToNode, mapItemsActive } from './utils';
+import { defaultMapItemToNode, mapItemsActive } from './utils'; // @ts-ignore
 
 function MainMenuItem(props) {
   const {
@@ -24,13 +24,14 @@ function MainMenuItem(props) {
     onSelect,
     overrides = {}
   } = props;
-  const [focusVisible, setFocusVisible] = React.useState(false);
+  const [focusVisible, setFocusVisible] = React.useState(false); // @ts-ignore
 
   function handleFocus(event) {
     if (isFocusVisible(event)) {
       setFocusVisible(true);
     }
   } // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
 
 
   function handleBlur(event) {
@@ -38,13 +39,15 @@ function MainMenuItem(props) {
       setFocusVisible(false);
     }
   } // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
 
 
   function handleClick(event) {
     if (onSelect) {
       onSelect(item);
     }
-  }
+  } // @ts-ignore
+
 
   function handleKeyDown(event) {
     if (event.key === 'Enter' && onSelect) {
@@ -64,7 +67,8 @@ function MainMenuItem(props) {
     onKeyDown: handleKeyDown,
     tabIndex: 0
   }, mainMenuItemElementProps), mapItemToNode(item));
-}
+} // @ts-ignore
+
 
 function SecondaryMenu(props) {
   const {

package/es/app-nav-bar/mobile-menu.js

@@ -137,7 +137,8 @@ export default function MobileMenu(props) {
     onClose: toggleMenu,
     size: '75%'
   }, drawerProps), /*#__PURE__*/React.createElement(MobileMenu, _extends({
-    items: currentNavItems,
+    items: currentNavItems // @ts-ignore
+    ,
     onItemSelect: ({
       item
     }) => {
@@ -151,7 +152,8 @@ export default function MobileMenu(props) {
           // Set to the initial `navItems` value
           setCurrentNavItems(items);
         } else {
-          const newParentItem = { ...updatedAncestorNavItems[updatedAncestorNavItems.length - 1],
+          const newParentItem = { // @ts-ignore
+            ...updatedAncestorNavItems[updatedAncestorNavItems.length - 1],
             [PARENT_MENU_ITEM]: true
           };
           setCurrentNavItems([newParentItem, ...newParentItem.children]);
@@ -170,7 +172,8 @@ export default function MobileMenu(props) {
       if (item.children && item.children.length) {
         const parentItem = { ...item,
           [PARENT_MENU_ITEM]: true
-        };
+        }; // @ts-ignore
+
         setAncestorNavItems([...ancestorNavItems, item]);
         setCurrentNavItems([parentItem, ...item.children]);
         return;

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

@@ -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.
 */
 import { styled, withStyle } from '../styles';
-import { getMediaQueries } from '../helpers/responsive-helpers';
+import { getMediaQueryPageMargins, getMinimumPageMargins } from '../helpers/responsive-helpers';
 import { StyledListItem } from '../menu';
 import { KIND } from './constants';
 const StyledButton = styled('button', ({
@@ -43,45 +43,15 @@ export const StyledRoot = styled('div', props => {
   const {
     $theme
   } = props;
-  const mediaQueries = getMediaQueries($theme.breakpoints);
-  const breakpoints = Object.values($theme.breakpoints).sort();
-  const margins = [];
-
-  if (Array.isArray($theme.grid.margins)) {
-    for (let i = 0; i < breakpoints.length; i++) {
-      const margin = $theme.grid.margins[i];
-
-      if (margin == null) {
-        margins.push($theme.grid.margins[$theme.grid.margins.length - 1]);
-      } else {
-        margins.push(margin);
-      }
-    }
-  } else {
-    for (let i = 0; i < breakpoints.length; i++) {
-      margins.push($theme.grid.margins);
-    }
-  }
-
-  const style = { ...$theme.typography.font300,
+  return { ...$theme.typography.font300,
+    ...getMinimumPageMargins($theme.grid.margins),
+    ...getMediaQueryPageMargins($theme),
     boxSizing: 'border-box',
     backgroundColor: $theme.colors.backgroundPrimary,
     borderBottomWidth: '1px',
     borderBottomStyle: 'solid',
-    borderBottomColor: `${$theme.colors.borderOpaque}`,
-    paddingInlineStart: margins[0] + 'px',
-    paddingInlineEnd: margins[0] + 'px'
+    borderBottomColor: `${$theme.colors.borderOpaque}`
   };
-
-  for (let i = 1; i < mediaQueries.length; i++) {
-    const margin = Array.isArray($theme.grid.margins) ? $theme.grid.margins[i] : $theme.grid.margins;
-    style[mediaQueries[i]] = {
-      paddingInlineStart: margin + 'px',
-      paddingInlineEnd: margin + 'px'
-    };
-  }
-
-  return style;
 });
 StyledRoot.displayName = "StyledRoot";
 StyledRoot.displayName = 'StyledRoot';

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

@@ -31,7 +31,7 @@ const UserMenuListItem = /*#__PURE__*/React.forwardRef((props, ref) => {
     artwork: item.icon || null,
     artworkSize: ARTWORK_SIZES.LARGE
   }), /*#__PURE__*/React.createElement(ListItemLabel, null, mapItemToNode(item)));
-});
+}); // @ts-ignore
 
 const svgStyleOverride = ({
   $theme
@@ -87,7 +87,8 @@ export default function UserMenuComponent(props) {
     content: ({
       close
     }) => /*#__PURE__*/React.createElement(UserMenu, _extends({
-      items: userItems,
+      items: userItems // @ts-ignore
+      ,
       onItemSelect: ({
         item
       }) => {

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

@@ -14,7 +14,10 @@ export const AspectRatioBoxBody = ({
   bottom,
   width,
   ...restProps
-}) => /*#__PURE__*/React.createElement(Block, _extends({
+}) =>
+/*#__PURE__*/
+// @ts-expect-error todo(ts-migration) TS2322 Type '{ "data-baseweb": string; position: Responsive<Position>; top: string | 0 | Scale[]; bottom: string | 0 | Scale[]; width: string | Scale[]; } & Omit<...>' is not assignable to type 'IntrinsicAtt...
+React.createElement(Block, _extends({
   "data-baseweb": "aspect-ratio-box-body",
   position: position || 'absolute',
   top: top || 0,

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

@@ -10,6 +10,7 @@ import * as React from 'react';
 import { Block } from '../block';
 import { mergeOverrides } from '../helpers/overrides';
 
+// @ts-ignore
 const aspectRatioBoxStyle = ({
   $aspectRatio
 }) => ({

package/es/avatar/avatar.js

@@ -10,8 +10,10 @@ import * as React from 'react';
 import { getOverrides } from '../helpers/overrides';
 import { Avatar as StyledAvatar, Initials as StyledInitials, Root as StyledRoot } from './styled-components';
 
+// @ts-ignore
 function getInitials(name) {
-  const words = name.split(' ');
+  const words = name.split(' '); // @ts-ignore
+
   const initials = words.map(word => word[0]);
   return initials.slice(0, 2).join('').toUpperCase();
 }

package/es/avatar/styled-components.js

@@ -6,6 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 import { styled } from '../styles';
 
+// @ts-ignore
 function getSize(props) {
   const {
     $size,
@@ -40,7 +41,8 @@ export const Initials = styled('div', props => ({ ...props.$theme.typography.fon
   height: '100%'
 }));
 Initials.displayName = "Initials";
-Initials.displayName = 'Initials';
+Initials.displayName = 'Initials'; // @ts-ignore
+
 export const Root = styled('div', props => {
   const {
     $didImageFailToLoad

package/es/badge/styled-components.js

@@ -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.
 */
 import { styled } from '../styles';
-import { COLOR, SHAPE, ROLE, PLACEMENT, HIERARCHY } from './constants';
+import { COLOR, SHAPE, ROLE, PLACEMENT, HIERARCHY } from './constants'; // @ts-ignore
 
 function getColorStyles({
   $theme,
@@ -38,7 +38,7 @@ function getColorStyles({
     [HIERARCHY.secondary]: {
       [COLOR.accent]: {
         color: $theme.colors.contentAccent,
-        backgroundColor: $theme.colors.backgroundLightAccent
+        backgroundColor: $theme.colors.backgroundAccentLight
       },
       [COLOR.primary]: {
         color: $theme.colors.primaryA,
@@ -46,18 +46,19 @@ function getColorStyles({
       },
       [COLOR.positive]: {
         color: $theme.colors.contentPositive,
-        backgroundColor: $theme.colors.backgroundLightPositive
+        backgroundColor: $theme.colors.backgroundPositiveLight
       },
       [COLOR.negative]: {
         color: $theme.colors.contentNegative,
-        backgroundColor: $theme.colors.backgroundLightNegative
+        backgroundColor: $theme.colors.backgroundNegativeLight
       },
       [COLOR.warning]: {
         color: $theme.colors.contentWarning,
-        backgroundColor: $theme.colors.backgroundLightWarning
+        backgroundColor: $theme.colors.backgroundWarningLight
       }
     }
-  };
+  }; // @ts-ignore
+
   return COLOR_STYLES[$hierarchy][$color];
 }
 
@@ -284,6 +285,7 @@ export const StyledHintDot = styled('div', ({
 }) => {
   return {
     visibility: $hidden ? 'hidden' : 'inherit',
+    // @ts-ignore
     backgroundColor: $theme.colors[$color],
     boxSizing: 'content-box',
     height: '8px',

package/es/banner/banner.js

@@ -13,26 +13,27 @@ import { useStyletron } from '../styles/index';
 import { ACTION_POSITION, ARTWORK_TYPE, HIERARCHY, KIND } from './constants';
 import { StyledRoot, StyledLeadingContent, StyledMessageContent, StyledTitle, StyledMessage, StyledBelowContent, StyledTrailingContent, StyledTrailingButtonContainer, StyledTrailingIconButton } from './styled-components';
 
+// @ts-ignore
 function low(theme, kind) {
   switch (kind) {
     case KIND.negative:
       return {
         actionBackgroundColor: theme.colors.bannerActionLowNegative,
-        backgroundColor: theme.colors.backgroundLightNegative,
+        backgroundColor: theme.colors.backgroundNegativeLight,
         color: theme.colors.contentPrimary
       };
 
     case KIND.positive:
       return {
         actionBackgroundColor: theme.colors.bannerActionLowPositive,
-        backgroundColor: theme.colors.backgroundLightPositive,
+        backgroundColor: theme.colors.backgroundPositiveLight,
         color: theme.colors.contentPrimary
       };
 
     case KIND.warning:
       return {
         actionBackgroundColor: theme.colors.bannerActionLowWarning,
-        backgroundColor: theme.colors.backgroundLightWarning,
+        backgroundColor: theme.colors.backgroundWarningLight,
         color: theme.colors.contentPrimary
       };
 
@@ -40,11 +41,12 @@ function low(theme, kind) {
     default:
       return {
         actionBackgroundColor: theme.colors.bannerActionLowInfo,
-        backgroundColor: theme.colors.backgroundLightAccent,
+        backgroundColor: theme.colors.backgroundAccentLight,
         color: theme.colors.contentPrimary
       };
   }
-}
+} // @ts-ignore
+
 
 function high(theme, kind) {
   switch (kind) {
@@ -77,7 +79,8 @@ function high(theme, kind) {
         color: theme.colors.contentOnColor
       };
   }
-}
+} // @ts-ignore
+
 
 function Leading({
   artwork
@@ -92,7 +95,8 @@ function Leading({
   return artwork.icon({
     size
   });
-}
+} // @ts-ignore
+
 
 function Below({
   action,
@@ -123,7 +127,8 @@ function Below({
   }
 
   return null;
-}
+} // @ts-ignore
+
 
 function Trailing({
   action,
@@ -160,7 +165,14 @@ function Trailing({
       },
       onClick: action.onClick,
       size: BUTTON_SIZE.compact,
-      shape: BUTTON_SHAPE.pill
+      shape: BUTTON_SHAPE.pill,
+      overrides: {
+        BaseButton: {
+          style: {
+            whiteSpace: 'nowrap'
+          }
+        }
+      }
     }, action.label));
   }
 
@@ -187,11 +199,15 @@ export function Banner({
   const [BelowContent, belowContentProps] = getOverrides(overrides.BelowContent, StyledBelowContent);
   const [Title, titleProps] = getOverrides(overrides.Title, StyledTitle);
   const [Message, messageProps] = getOverrides(overrides.Message, StyledMessage);
+  const ariaLabel = rootProps.hasOwnProperty('aria-label') ? rootProps['aria-label'] : 'this is an announcement banner';
   return /*#__PURE__*/React.createElement(Root, _extends({
     $backgroundColor: styles.backgroundColor,
     $color: styles.color,
     $nested: nested
-  }, rootProps), /*#__PURE__*/React.createElement(LeadingContent, _extends({
+  }, rootProps, {
+    role: "complementary",
+    "aria-label": ariaLabel
+  }), /*#__PURE__*/React.createElement(LeadingContent, _extends({
     $includesArtwork: Boolean(artwork)
   }, leadingContentProps), /*#__PURE__*/React.createElement(Leading, {
     artwork: artwork