baseui 11.1.0 → 11.2.0

package/accordion/index.d.ts

@@ -123,10 +123,10 @@ export class StatefulPanelContainer extends React.Component<
   ): void;
 }
 
-export declare const StyledRoot: StyletronComponent<any>;
-export declare const StyledPanelContainer: StyletronComponent<any>;
-export declare const StyledHeader: StyletronComponent<any>;
-export declare const StyledContent: StyletronComponent<any>;
-export declare const StyledContentAnimationContainer: StyletronComponent<any>;
-export declare const StyledToggleIcon: StyletronComponent<any>;
-export declare const StyledToggleIconGroup: StyletronComponent<any>;
+export declare const StyledRoot: StyletronComponent<any, any>;
+export declare const StyledPanelContainer: StyletronComponent<any, any>;
+export declare const StyledHeader: StyletronComponent<any, any>;
+export declare const StyledContent: StyletronComponent<any, any>;
+export declare const StyledContentAnimationContainer: StyletronComponent<any, any>;
+export declare const StyledToggleIcon: StyletronComponent<any, any>;
+export declare const StyledToggleIconGroup: StyletronComponent<any, any>;

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

@@ -7,6 +7,8 @@ exports.StyledDesktopMenu = exports.StyledDesktopMenuContainer = exports.StyledU
 
 var _index = require("../styles/index.js");
 
+var _responsiveHelpers = require("../helpers/responsive-helpers.js");
+
 var _index2 = require("../menu/index.js");
 
 var _constants = require("./constants.js");
@@ -50,10 +52,46 @@ var StyledButton = (0, _index.styled)('button', function (_ref) {
 StyledButton.displayName = "StyledButton";
 var StyledRoot = (0, _index.styled)('div', function (props) {
   var $theme = props.$theme;
-  return _objectSpread(_objectSpread({}, $theme.typography.font300), {}, {
+  var mediaQueries = (0, _responsiveHelpers.getMediaQueries)($theme.breakpoints);
+  var breakpoints = Object.values($theme.breakpoints).sort();
+  var margins = [];
+
+  if (Array.isArray($theme.grid.margins)) {
+    for (var i = 0; i < breakpoints.length; i++) {
+      var margin = $theme.grid.margins[i];
+
+      if (margin == null) {
+        margins.push($theme.grid.margins[$theme.grid.margins.length - 1]);
+      } else {
+        margins.push(margin);
+      }
+    }
+  } else {
+    for (var _i = 0; _i < breakpoints.length; _i++) {
+      margins.push($theme.grid.margins);
+    }
+  }
+
+  var style = _objectSpread(_objectSpread({}, $theme.typography.font300), {}, {
     boxSizing: 'border-box',
-    backgroundColor: $theme.colors.backgroundPrimary
+    backgroundColor: $theme.colors.backgroundPrimary,
+    borderBottomWidth: '1px',
+    borderBottomStyle: 'solid',
+    borderBottomColor: "".concat($theme.colors.borderOpaque),
+    paddingInlineStart: margins[0] + 'px',
+    paddingInlineEnd: margins[0] + 'px'
   });
+
+  for (var _i2 = 1; _i2 < mediaQueries.length; _i2++) {
+    var _margin = Array.isArray($theme.grid.margins) ? $theme.grid.margins[_i2] : $theme.grid.margins;
+
+    style[mediaQueries[_i2]] = {
+      paddingInlineStart: _margin + 'px',
+      paddingInlineEnd: _margin + 'px'
+    };
+  }
+
+  return style;
 });
 exports.StyledRoot = StyledRoot;
 StyledRoot.displayName = "StyledRoot";
@@ -167,7 +205,7 @@ var StyledSecondaryMenuContainer = (0, _index.styled)('div', function (_ref6) {
     flexWrap: 'nowrap',
     justifyContent: 'flex-start',
     margin: 'auto',
-    maxWidth: "".concat($theme.breakpoints.large, "px"),
+    maxWidth: "".concat($theme.grid.maxWidth, "px"),
     alignItems: 'stretch',
     overflow: 'auto'
   };
@@ -225,11 +263,7 @@ exports.StyledUserProfileInfoContainer = StyledUserProfileInfoContainer;
 StyledUserProfileInfoContainer.displayName = "StyledUserProfileInfoContainer";
 var StyledDesktopMenuContainer = (0, _index.styled)('div', function (_ref11) {
   var $theme = _ref11.$theme;
-  return {
-    borderBottomWidth: '1px',
-    borderBottomStyle: 'solid',
-    borderBottomColor: "".concat($theme.colors.borderOpaque)
-  };
+  return {};
 });
 exports.StyledDesktopMenuContainer = StyledDesktopMenuContainer;
 StyledDesktopMenuContainer.displayName = "StyledDesktopMenuContainer";
@@ -240,7 +274,7 @@ var StyledDesktopMenu = (0, _index.styled)('div', function (_ref12) {
     display: 'flex',
     justifyContent: 'space-between',
     margin: 'auto',
-    maxWidth: "".concat($theme.breakpoints.large, "px"),
+    maxWidth: "".concat($theme.grid.maxWidth, "px"),
     paddingBlockStart: '18px',
     paddingBlockEnd: '18px'
   };

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

@@ -7,6 +7,7 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import { styled, withStyle } from '../styles/index.js';
+import { getMediaQueries } from '../helpers/responsive-helpers.js';
 import { StyledListItem } from '../menu/index.js';
 import { KIND } from './constants.js';
 
@@ -42,11 +43,47 @@ const StyledButton = styled<{ $isFocusVisible: boolean }>(
 
 export const StyledRoot = styled<{}>('div', (props) => {
   const { $theme } = props;
-  return {
+  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,
     boxSizing: 'border-box',
     backgroundColor: $theme.colors.backgroundPrimary,
+    borderBottomWidth: '1px',
+    borderBottomStyle: 'solid',
+    borderBottomColor: `${$theme.colors.borderOpaque}`,
+    paddingInlineStart: margins[0] + 'px',
+    paddingInlineEnd: margins[0] + 'px',
   };
+
+  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;
 });
 
 export const StyledSubnavContainer = styled('div', {});
@@ -151,7 +188,7 @@ export const StyledSecondaryMenuContainer = styled<{}>('div', ({ $theme }) => {
     flexWrap: 'nowrap',
     justifyContent: 'flex-start',
     margin: 'auto',
-    maxWidth: `${$theme.breakpoints.large}px`,
+    maxWidth: `${$theme.grid.maxWidth}px`,
     alignItems: 'stretch',
     overflow: 'auto',
   };
@@ -197,11 +234,7 @@ export const StyledUserProfileInfoContainer = styled<{}>('div', ({ $theme }) =>
 });
 
 export const StyledDesktopMenuContainer = styled<{}>('div', ({ $theme }) => {
-  return {
-    borderBottomWidth: '1px',
-    borderBottomStyle: 'solid',
-    borderBottomColor: `${$theme.colors.borderOpaque}`,
-  };
+  return {};
 });
 
 export const StyledDesktopMenu = styled<{}>('div', ({ $theme }) => {
@@ -210,7 +243,7 @@ export const StyledDesktopMenu = styled<{}>('div', ({ $theme }) => {
     display: 'flex',
     justifyContent: 'space-between',
     margin: 'auto',
-    maxWidth: `${$theme.breakpoints.large}px`,
+    maxWidth: `${$theme.grid.maxWidth}px`,
     paddingBlockStart: '18px',
     paddingBlockEnd: '18px',
   };

package/avatar/index.d.ts

@@ -22,6 +22,6 @@ export interface AvatarProps {
 
 export declare const Avatar: React.FC<AvatarProps>;
 
-export declare const StyledAvatar: StyletronComponent<any>;
-export declare const StyledInitials: StyletronComponent<any>;
-export declare const StyledRoot: StyletronComponent<any>;
+export declare const StyledAvatar: StyletronComponent<any, any>;
+export declare const StyledInitials: StyletronComponent<any, any>;
+export declare const StyledRoot: StyletronComponent<any, any>;

package/badge/index.d.ts

@@ -2,25 +2,25 @@ import * as React from 'react';
 import { StyletronComponent } from 'styletron-react';
 import { Override } from '../overrides';
 
-export interface HIERARCHY {
+export declare const HIERARCHY: {
   primary: 'primary';
   secondary: 'secondary';
-}
+};
 
-export interface SHAPE {
+export declare const SHAPE: {
   pill: 'pill';
   rectangle: 'rectangle';
-}
+};
 
-export interface COLOR {
+export declare const COLOR: {
   accent: 'accent';
   primary: 'primary';
   positive: 'positive';
   negative: 'negative';
   warning: 'warning';
-}
+};
 
-export interface PLACEMENT {
+export declare const PLACEMENT: {
   topLeft: 'topLeft';
   topRight: 'topRight';
   bottomRight: 'bottomRight';
@@ -35,12 +35,12 @@ export interface PLACEMENT {
   rightTopEdge: 'rightTopEdge';
   rightBottomEdge: 'rightBottomEdge';
   leftBottomEdge: 'leftBottomEdge';
-}
+};
 
-export type HierarchyT = HIERARCHY[keyof HIERARCHY];
-export type ShapeT = SHAPE[keyof SHAPE];
-export type ColorT = COLOR[keyof COLOR];
-export type PlacementT = PLACEMENT[keyof PLACEMENT];
+export type HierarchyT = typeof HIERARCHY[keyof typeof HIERARCHY];
+export type ShapeT = typeof SHAPE[keyof typeof SHAPE];
+export type ColorT = typeof COLOR[keyof typeof COLOR];
+export type PlacementT = typeof PLACEMENT[keyof typeof PLACEMENT];
 
 export type BadgeOverridesT = {
   Root?: Override<any>;
@@ -81,17 +81,12 @@ export type HintDotPropsT = {
   children?: React.ReactNode;
 };
 
-export const StyledRoot: StyletronComponent<any>;
-export const StyledPositioner: StyletronComponent<any>;
-export const StyledBadge: StyletronComponent<any>;
-export const StyledNotificationCircle: StyletronComponent<any>;
-export const StyledHintDot: StyletronComponent<any>;
-
-export const Badge: React.FC<BadgePropsT>;
-export const NotificationCircle: React.FC<NotificationCirclePropsT>;
-export const HintDot: React.FC<HintDotPropsT>;
+export declare const StyledRoot: StyletronComponent<any, any>;
+export declare const StyledPositioner: StyletronComponent<any, any>;
+export declare const StyledBadge: StyletronComponent<any, any>;
+export declare const StyledNotificationCircle: StyletronComponent<any, any>;
+export declare const StyledHintDot: StyletronComponent<any, any>;
 
-export const HIERARCHY: HIERARCHY;
-export const SHAPE: SHAPE;
-export const COLOR: COLOR;
-export const PLACEMENT: PLACEMENT;
+export declare const Badge: React.FC<BadgePropsT>;
+export declare const NotificationCircle: React.FC<NotificationCirclePropsT>;
+export declare const HintDot: React.FC<HintDotPropsT>;

package/banner/index.d.ts

@@ -2,46 +2,46 @@ import * as React from 'react';
 import { StyletronComponent } from 'styletron-react';
 import { Override } from '../overrides';
 
-export interface ACTION_POSITION {
+export declare const ACTION_POSITION: {
   below: 'below';
   trailing: 'trailing';
-}
+};
 
-export interface ARTWORK_TYPE {
+export declare const ARTWORK_TYPE: {
   badge: 'badge';
   icon: 'icon';
-}
+};
 
-export interface HIERARCHY {
+export declare const HIERARCHY: {
   high: 'high';
   low: 'low';
-}
+};
 
-export interface KIND {
+export declare const KIND: {
   info: 'info';
   negative: 'negative';
   positive: 'positive';
   warning: 'warning';
-}
+};
 
 export interface ActionContentT {
   label: string;
   icon?: (iconProps: { size: string }) => React.ReactNode;
   onClick: (event: React.MouseEvent<HTMLButtonElement>) => any;
-  position?: ACTION_POSITION[keyof ACTION_POSITION];
+  position?: typeof ACTION_POSITION[keyof typeof ACTION_POSITION];
 }
 
 export interface ArtworkContentT {
   icon: (iconProps: { size: string }) => React.ReactNode;
-  type?: ARTWORK_TYPE[keyof ARTWORK_TYPE];
+  type?: typeof ARTWORK_TYPE[keyof typeof ARTWORK_TYPE];
 }
 
 export interface PropsT {
   action?: ActionContentT;
   artwork?: ArtworkContentT;
   children: React.ReactNode;
-  hierarchy?: HIERARCHY[keyof HIERARCHY];
-  kind?: KIND[keyof KIND];
+  hierarchy?: typeof HIERARCHY[keyof typeof HIERARCHY];
+  kind?: typeof KIND[keyof typeof KIND];
   overrides?: {
     BelowContent?: Override<any>;
     LeadingContent?: Override<any>;
@@ -57,19 +57,14 @@ export interface PropsT {
   title?: React.ReactNode;
 }
 
-export const StyledBelowContent: StyletronComponent<any>;
-export const StyledLeadingContent: StyletronComponent<any>;
-export const StyledMessage: StyletronComponent<any>;
-export const StyledMessageContent: StyletronComponent<any>;
-export const StyledRoot: StyletronComponent<any>;
-export const StyledTitle: StyletronComponent<any>;
-export const StyledTrailingContent: StyletronComponent<any>;
-export const StyledTrailingButtonContainer: StyletronComponent<any>;
-export const StyledTrailingIconButton: StyletronComponent<any>;
-
-export const ACTION_POSITION: ACTION_POSITION;
-export const ARTWORK_TYPE: ARTWORK_TYPE;
-export const HIERARCHY: HIERARCHY;
-export const KIND: KIND;
+export declare const StyledBelowContent: StyletronComponent<any, any>;
+export declare const StyledLeadingContent: StyletronComponent<any, any>;
+export declare const StyledMessage: StyletronComponent<any, any>;
+export declare const StyledMessageContent: StyletronComponent<any, any>;
+export declare const StyledRoot: StyletronComponent<any, any>;
+export declare const StyledTitle: StyletronComponent<any, any>;
+export declare const StyledTrailingContent: StyletronComponent<any, any>;
+export declare const StyledTrailingButtonContainer: StyletronComponent<any, any>;
+export declare const StyledTrailingIconButton: StyletronComponent<any, any>;
 
-export const Banner: React.FC<PropsT>;
+export declare const Banner: React.FC<PropsT>;

package/breadcrumbs/index.d.ts

@@ -20,5 +20,5 @@ export interface BreadcrumbsProps {
 
 export declare const Breadcrumbs: React.FC<BreadcrumbsProps>;
 
-export declare const StyledRoot: StyletronComponent<any>;
-export declare const StyledSeparator: StyletronComponent<any>;
+export declare const StyledRoot: StyletronComponent<any, any>;
+export declare const StyledSeparator: StyletronComponent<any, any>;

package/button/index.d.ts

@@ -56,10 +56,10 @@ export interface ButtonProps {
   type?: 'submit' | 'reset' | 'button';
 }
 
-export declare const StyledBaseButton: StyletronComponent<any>;
-export declare const StyledStartEnhancer: StyletronComponent<any>;
-export declare const StyledEndEnhancer: StyletronComponent<any>;
-export declare const StyledLoadingSpinner: StyletronComponent<any>;
-export declare const StyledLoadingSpinnerContainer: StyletronComponent<any>;
+export declare const StyledBaseButton: StyletronComponent<any, any>;
+export declare const StyledStartEnhancer: StyletronComponent<any, any>;
+export declare const StyledEndEnhancer: StyletronComponent<any, any>;
+export declare const StyledLoadingSpinner: StyletronComponent<any, any>;
+export declare const StyledLoadingSpinnerContainer: StyletronComponent<any, any>;
 
-export declare const Button: StyletronComponent<ButtonProps>;
+export declare const Button: StyletronComponent<any, ButtonProps>;

package/button-group/index.d.ts

@@ -14,7 +14,7 @@ export declare const STATE_CHANGE_TYPE: {
   change: 'change';
 };
 
-export declare const StyledRoot: StyletronComponent<any>;
+export declare const StyledRoot: StyletronComponent<any, any>;
 
 export interface ButtonGroupOverrides {
   Root?: Override<any>;

package/card/index.d.ts

@@ -25,11 +25,11 @@ export interface CardProps {
 export declare const Card: React.FC<CardProps>;
 export type hasThumbnail = (props: { readonly thumbnail?: string }) => boolean;
 
-export declare const StyledAction: StyletronComponent<any>;
-export declare const StyledBody: StyletronComponent<any>;
-export declare const StyledContents: StyletronComponent<any>;
-export declare const StyledHeaderImage: StyletronComponent<any>;
-export declare const StyledThumbnail: StyletronComponent<any>;
-export declare const StyledTitle: StyletronComponent<any>;
-export declare const StyledRoot: StyletronComponent<any>;
-export declare const StyledWrapper: StyletronComponent<any>;
+export declare const StyledAction: StyletronComponent<any, any>;
+export declare const StyledBody: StyletronComponent<any, any>;
+export declare const StyledContents: StyletronComponent<any, any>;
+export declare const StyledHeaderImage: StyletronComponent<any, any>;
+export declare const StyledThumbnail: StyletronComponent<any, any>;
+export declare const StyledTitle: StyletronComponent<any, any>;
+export declare const StyledRoot: StyletronComponent<any, any>;
+export declare const StyledWrapper: StyletronComponent<any, any>;

package/checkbox/index.d.ts

@@ -23,13 +23,13 @@ type initialState = {
   isIndeterminate?: boolean;
 };
 
-export declare const StyledRoot: StyletronComponent<any>;
-export declare const StyledCheckmark: StyletronComponent<any>;
-export declare const StyledLabel: StyletronComponent<any>;
-export declare const StyledInput: StyletronComponent<any>;
-export declare const StyledToggle: StyletronComponent<any>;
-export declare const StyledToggleInner: StyletronComponent<any>;
-export declare const StyledToggleTrack: StyletronComponent<any>;
+export declare const StyledRoot: StyletronComponent<any, any>;
+export declare const StyledCheckmark: StyletronComponent<any, any>;
+export declare const StyledLabel: StyletronComponent<any, any>;
+export declare const StyledInput: StyletronComponent<any, any>;
+export declare const StyledToggle: StyletronComponent<any, any>;
+export declare const StyledToggleInner: StyletronComponent<any, any>;
+export declare const StyledToggleTrack: StyletronComponent<any, any>;
 
 export type StateReducer = (
   stateType: string,

package/dnd-list/index.d.ts

@@ -69,12 +69,12 @@ export interface ListProps {
 
 export class List extends React.Component<ListProps> {}
 
-export declare const StyledRoot: StyletronComponent<any>;
-export declare const StyledList: StyletronComponent<any>;
-export declare const StyledItem: StyletronComponent<any>;
-export declare const StyledDragHandle: StyletronComponent<any>;
-export declare const StyledCloseHandle: StyletronComponent<any>;
-export declare const StyledLabel: StyletronComponent<any>;
+export declare const StyledRoot: StyletronComponent<any, any>;
+export declare const StyledList: StyletronComponent<any, any>;
+export declare const StyledItem: StyletronComponent<any, any>;
+export declare const StyledDragHandle: StyletronComponent<any, any>;
+export declare const StyledCloseHandle: StyletronComponent<any, any>;
+export declare const StyledLabel: StyletronComponent<any, any>;
 
 export declare const arrayMove: typeof arrayMoveT;
 export declare const arrayRemove: typeof arrayRemoveT;

package/drawer/index.d.ts

@@ -84,8 +84,8 @@ export class Drawer extends React.Component<DrawerProps, DrawerState> {
   renderDrawer(): React.ReactNode;
 }
 
-export declare const StyledRoot: StyletronComponent<any>;
-export declare const StyledBackdrop: StyletronComponent<any>;
-export declare const StyledDrawerContainer: StyletronComponent<any>;
-export declare const StyledDrawerBody: StyletronComponent<any>;
-export declare const StyledClose: StyletronComponent<any>;
+export declare const StyledRoot: StyletronComponent<any, any>;
+export declare const StyledBackdrop: StyletronComponent<any, any>;
+export declare const StyledDrawerContainer: StyletronComponent<any, any>;
+export declare const StyledDrawerBody: StyletronComponent<any, any>;
+export declare const StyledClose: StyletronComponent<any, any>;

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

@@ -5,6 +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/index.js';
+import { getMediaQueries } from '../helpers/responsive-helpers.js';
 import { StyledListItem } from '../menu/index.js';
 import { KIND } from './constants.js';
 const StyledButton = styled('button', ({
@@ -41,10 +42,45 @@ export const StyledRoot = styled('div', props => {
   const {
     $theme
   } = props;
-  return { ...$theme.typography.font300,
+  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,
     boxSizing: 'border-box',
-    backgroundColor: $theme.colors.backgroundPrimary
+    backgroundColor: $theme.colors.backgroundPrimary,
+    borderBottomWidth: '1px',
+    borderBottomStyle: 'solid',
+    borderBottomColor: `${$theme.colors.borderOpaque}`,
+    paddingInlineStart: margins[0] + 'px',
+    paddingInlineEnd: margins[0] + 'px'
   };
+
+  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";
 export const StyledSubnavContainer = styled('div', {});
@@ -161,7 +197,7 @@ export const StyledSecondaryMenuContainer = styled('div', ({
     flexWrap: 'nowrap',
     justifyContent: 'flex-start',
     margin: 'auto',
-    maxWidth: `${$theme.breakpoints.large}px`,
+    maxWidth: `${$theme.grid.maxWidth}px`,
     alignItems: 'stretch',
     overflow: 'auto'
   };
@@ -218,11 +254,7 @@ StyledUserProfileInfoContainer.displayName = "StyledUserProfileInfoContainer";
 export const StyledDesktopMenuContainer = styled('div', ({
   $theme
 }) => {
-  return {
-    borderBottomWidth: '1px',
-    borderBottomStyle: 'solid',
-    borderBottomColor: `${$theme.colors.borderOpaque}`
-  };
+  return {};
 });
 StyledDesktopMenuContainer.displayName = "StyledDesktopMenuContainer";
 export const StyledDesktopMenu = styled('div', ({
@@ -233,7 +265,7 @@ export const StyledDesktopMenu = styled('div', ({
     display: 'flex',
     justifyContent: 'space-between',
     margin: 'auto',
-    maxWidth: `${$theme.breakpoints.large}px`,
+    maxWidth: `${$theme.grid.maxWidth}px`,
     paddingBlockStart: '18px',
     paddingBlockEnd: '18px'
   };

package/es/file-uploader/file-uploader.js

@@ -35,7 +35,10 @@ function FileUploader(props) {
   const [ErrorMessage, errorMessageProps] = getOverrides(overrides.ErrorMessage, StyledErrorMessage);
   const [HiddenInput, hiddenInputProps] = getOverrides(overrides.HiddenInput, StyledHiddenInput);
   const [ButtonComponent, buttonProps] = getOverrides(overrides.ButtonComponent, Button);
+  const [RetryButtonComponent, retryButtonProps] = getOverrides(overrides.RetryButtonComponent, Button);
+  const [CancelButtonComponent, cancelButtonProps] = getOverrides(overrides.CancelButtonComponent, Button);
   const [SpinnerComponent, spinnerProps] = getOverrides(overrides.Spinner, Spinner);
+  const [ProgressBarComponent, progressBarProps] = getOverrides(overrides.ProgressBar, ProgressBar);
   const afterFileDrop = !!(props.progressAmount || props.progressMessage || props.errorMessage);
   return /*#__PURE__*/React.createElement(Dropzone, _extends({}, props, {
     disabled: props.disabled || afterFileDrop
@@ -73,7 +76,7 @@ function FileUploader(props) {
           })
         }
       }
-    }, prefixedStyledProps, buttonProps), locale.fileuploader.browseFiles)), afterFileDrop && /*#__PURE__*/React.createElement(React.Fragment, null, typeof props.progressAmount === 'number' ? /*#__PURE__*/React.createElement(ProgressBar, {
+    }, prefixedStyledProps, buttonProps), locale.fileuploader.browseFiles)), afterFileDrop && /*#__PURE__*/React.createElement(React.Fragment, null, typeof props.progressAmount === 'number' ? /*#__PURE__*/React.createElement(ProgressBarComponent, _extends({
       value: props.progressAmount,
       overrides: {
         BarProgress: {
@@ -84,12 +87,12 @@ function FileUploader(props) {
           })
         }
       }
-    }) : props.errorMessage ? null : /*#__PURE__*/React.createElement(SpinnerComponent, _extends({
+    }, progressBarProps)) : props.errorMessage ? null : /*#__PURE__*/React.createElement(SpinnerComponent, _extends({
       $size: SPINNER_SIZE.medium,
       $style: {
         marginBottom: theme.sizing.scale300
       }
-    }, spinnerProps)), (props.errorMessage || props.progressMessage) && props.errorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, _extends({}, prefixedStyledProps, errorMessageProps), props.errorMessage) : /*#__PURE__*/React.createElement(ContentMessage, _extends({}, prefixedStyledProps, contentMessageProps), props.progressMessage), props.errorMessage ? /*#__PURE__*/React.createElement(ButtonComponent, {
+    }, spinnerProps)), (props.errorMessage || props.progressMessage) && props.errorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, _extends({}, prefixedStyledProps, errorMessageProps), props.errorMessage) : /*#__PURE__*/React.createElement(ContentMessage, _extends({}, prefixedStyledProps, contentMessageProps), props.progressMessage), props.errorMessage ? /*#__PURE__*/React.createElement(RetryButtonComponent, _extends({
       kind: KIND.tertiary,
       onClick: () => {
         props.onRetry && props.onRetry();
@@ -97,7 +100,7 @@ function FileUploader(props) {
       "aria-invalid": Boolean(props.errorMessage),
       "aria-describedby": props['aria-describedby'],
       "aria-errormessage": props.errorMessage
-    }, locale.fileuploader.retry) : /*#__PURE__*/React.createElement(ButtonComponent, {
+    }, retryButtonProps), locale.fileuploader.retry) : /*#__PURE__*/React.createElement(CancelButtonComponent, _extends({
       kind: KIND.tertiary,
       onClick: () => {
         props.onCancel && props.onCancel();
@@ -112,7 +115,7 @@ function FileUploader(props) {
           })
         }
       }
-    }, locale.fileuploader.cancel))), /*#__PURE__*/React.createElement(HiddenInput, _extends({
+    }, cancelButtonProps), locale.fileuploader.cancel))), /*#__PURE__*/React.createElement(HiddenInput, _extends({
       "aria-invalid": Boolean(props.errorMessage) || null,
       "aria-describedby": props['aria-describedby'],
       "aria-errormessage": props.errorMessage || null

package/es/map-marker/index.js

@@ -6,4 +6,4 @@ LICENSE file in the root directory of this source tree.
 */
 export { default as FixedMarker } from './fixed-marker.js';
 export { default as FloatingMarker } from './floating-marker.js';
-export { FLOATING_MARKER_ANCHOR_POSITIONS, FLOATING_MARKER_SIZES, FLOATING_MARKER_ANCHOR_TYPES, NEEDLE_SIZES, PINHEAD_SIZES_SHAPES, BADGE_ENHANCER_SIZES, LABEL_ENHANCER_POSITIONS, KIND } from './constants.js';
+export { FLOATING_MARKER_ANCHOR_POSITIONS, FLOATING_MARKER_SIZES, FLOATING_MARKER_ANCHOR_TYPES, NEEDLE_SIZES, PINHEAD_SIZES_SHAPES, BADGE_ENHANCER_SIZES, LABEL_ENHANCER_POSITIONS, KIND, PINHEAD_DIMENSIONS } from './constants.js';

package/es/select/select-component.js

@@ -224,10 +224,8 @@ class Select extends React.Component {
         if (containsNode(this.anchor.current, event.relatedTarget) || containsNode(this.dropdown.current, event.relatedTarget)) {
           return;
         }
-      } else if (event.type !== 'blur') {
-        if (containsNode(this.anchor.current, event.target)) {
-          return;
-        }
+      } else if (containsNode(this.anchor.current, event.target)) {
+        return;
       }
 
       if (this.props.onBlur) {

package/es/themes/shared/borders.js

@@ -47,7 +47,7 @@ const borders = {
   useRoundedCorners: true,
 
   /** Button, ButtonGroup */
-  buttonBorderRadius: '0px',
+  buttonBorderRadius: '8px',
 
   /** Input, Select, Textarea, Checkbox */
   inputBorderRadius: '0px',