baseui 11.1.1 → 11.1.2

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/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/esm/app-nav-bar/styled-components.js

@@ -11,6 +11,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';
 var StyledButton = styled('button', function (_ref) {
@@ -46,10 +47,46 @@ var StyledButton = styled('button', function (_ref) {
 StyledButton.displayName = "StyledButton";
 export var StyledRoot = styled('div', function (props) {
   var $theme = props.$theme;
-  return _objectSpread(_objectSpread({}, $theme.typography.font300), {}, {
+  var mediaQueries = 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;
 });
 StyledRoot.displayName = "StyledRoot";
 export var StyledSubnavContainer = styled('div', {});
@@ -156,7 +193,7 @@ export var StyledSecondaryMenuContainer = 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'
   };
@@ -208,11 +245,7 @@ export var StyledUserProfileInfoContainer = styled('div', function (_ref10) {
 StyledUserProfileInfoContainer.displayName = "StyledUserProfileInfoContainer";
 export var StyledDesktopMenuContainer = styled('div', function (_ref11) {
   var $theme = _ref11.$theme;
-  return {
-    borderBottomWidth: '1px',
-    borderBottomStyle: 'solid',
-    borderBottomColor: "".concat($theme.colors.borderOpaque)
-  };
+  return {};
 });
 StyledDesktopMenuContainer.displayName = "StyledDesktopMenuContainer";
 export var StyledDesktopMenu = styled('div', function (_ref12) {
@@ -222,7 +255,7 @@ export var StyledDesktopMenu = 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/esm/file-uploader/file-uploader.js

@@ -88,10 +88,25 @@ function FileUploader(props) {
       ButtonComponent = _getOverrides14[0],
       buttonProps = _getOverrides14[1];
 
-  var _getOverrides15 = getOverrides(overrides.Spinner, Spinner),
+  var _getOverrides15 = getOverrides(overrides.RetryButtonComponent, Button),
       _getOverrides16 = _slicedToArray(_getOverrides15, 2),
-      SpinnerComponent = _getOverrides16[0],
-      spinnerProps = _getOverrides16[1];
+      RetryButtonComponent = _getOverrides16[0],
+      retryButtonProps = _getOverrides16[1];
+
+  var _getOverrides17 = getOverrides(overrides.CancelButtonComponent, Button),
+      _getOverrides18 = _slicedToArray(_getOverrides17, 2),
+      CancelButtonComponent = _getOverrides18[0],
+      cancelButtonProps = _getOverrides18[1];
+
+  var _getOverrides19 = getOverrides(overrides.Spinner, Spinner),
+      _getOverrides20 = _slicedToArray(_getOverrides19, 2),
+      SpinnerComponent = _getOverrides20[0],
+      spinnerProps = _getOverrides20[1];
+
+  var _getOverrides21 = getOverrides(overrides.ProgressBar, ProgressBar),
+      _getOverrides22 = _slicedToArray(_getOverrides21, 2),
+      ProgressBarComponent = _getOverrides22[0],
+      progressBarProps = _getOverrides22[1];
 
   var afterFileDrop = !!(props.progressAmount || props.progressMessage || props.errorMessage);
   return /*#__PURE__*/React.createElement(Dropzone, _extends({}, props, {
@@ -135,7 +150,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: {
@@ -147,12 +162,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: function onClick() {
           props.onRetry && props.onRetry();
@@ -160,7 +175,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: function onClick() {
           props.onCancel && props.onCancel();
@@ -176,7 +191,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/file-uploader/file-uploader.js

@@ -105,10 +105,25 @@ function FileUploader(props) {
       ButtonComponent = _getOverrides14[0],
       buttonProps = _getOverrides14[1];
 
-  var _getOverrides15 = (0, _overrides.getOverrides)(overrides.Spinner, _index5.Spinner),
+  var _getOverrides15 = (0, _overrides.getOverrides)(overrides.RetryButtonComponent, _index3.Button),
       _getOverrides16 = _slicedToArray(_getOverrides15, 2),
-      SpinnerComponent = _getOverrides16[0],
-      spinnerProps = _getOverrides16[1];
+      RetryButtonComponent = _getOverrides16[0],
+      retryButtonProps = _getOverrides16[1];
+
+  var _getOverrides17 = (0, _overrides.getOverrides)(overrides.CancelButtonComponent, _index3.Button),
+      _getOverrides18 = _slicedToArray(_getOverrides17, 2),
+      CancelButtonComponent = _getOverrides18[0],
+      cancelButtonProps = _getOverrides18[1];
+
+  var _getOverrides19 = (0, _overrides.getOverrides)(overrides.Spinner, _index5.Spinner),
+      _getOverrides20 = _slicedToArray(_getOverrides19, 2),
+      SpinnerComponent = _getOverrides20[0],
+      spinnerProps = _getOverrides20[1];
+
+  var _getOverrides21 = (0, _overrides.getOverrides)(overrides.ProgressBar, _index4.ProgressBar),
+      _getOverrides22 = _slicedToArray(_getOverrides21, 2),
+      ProgressBarComponent = _getOverrides22[0],
+      progressBarProps = _getOverrides22[1];
 
   var afterFileDrop = !!(props.progressAmount || props.progressMessage || props.errorMessage);
   return /*#__PURE__*/React.createElement(_reactDropzone.default, _extends({}, props, {
@@ -152,7 +167,7 @@ function FileUploader(props) {
             }
           }
         }
-      }, prefixedStyledProps, buttonProps), locale.fileuploader.browseFiles)), afterFileDrop && /*#__PURE__*/React.createElement(React.Fragment, null, typeof props.progressAmount === 'number' ? /*#__PURE__*/React.createElement(_index4.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: {
@@ -164,12 +179,12 @@ function FileUploader(props) {
             }
           }
         }
-      }) : props.errorMessage ? null : /*#__PURE__*/React.createElement(SpinnerComponent, _extends({
+      }, progressBarProps)) : props.errorMessage ? null : /*#__PURE__*/React.createElement(SpinnerComponent, _extends({
         $size: _index5.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: _index3.KIND.tertiary,
         onClick: function onClick() {
           props.onRetry && props.onRetry();
@@ -177,7 +192,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: _index3.KIND.tertiary,
         onClick: function onClick() {
           props.onCancel && props.onCancel();
@@ -193,7 +208,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/file-uploader/file-uploader.js.flow

@@ -58,7 +58,17 @@ function FileUploader(props: PropsT) {
   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);
 
@@ -130,7 +140,7 @@ function FileUploader(props: PropsT) {
                        * future. We do not want to flash the spinner in this case.
                        */}
                       {typeof props.progressAmount === 'number' ? (
-                        <ProgressBar
+                        <ProgressBarComponent
                           value={props.progressAmount}
                           overrides={{
                             BarProgress: {
@@ -141,6 +151,7 @@ function FileUploader(props: PropsT) {
                               }),
                             },
                           }}
+                          {...progressBarProps}
                         />
                       ) : props.errorMessage ? null : (
                         <SpinnerComponent
@@ -159,7 +170,7 @@ function FileUploader(props: PropsT) {
                         </ContentMessage>
                       )}
                       {props.errorMessage ? (
-                        <ButtonComponent
+                        <RetryButtonComponent
                           kind={KIND.tertiary}
                           onClick={() => {
                             props.onRetry && props.onRetry();
@@ -167,11 +178,12 @@ function FileUploader(props: PropsT) {
                           aria-invalid={Boolean(props.errorMessage)}
                           aria-describedby={props['aria-describedby']}
                           aria-errormessage={props.errorMessage}
+                          {...retryButtonProps}
                         >
                           {locale.fileuploader.retry}
-                        </ButtonComponent>
+                        </RetryButtonComponent>
                       ) : (
-                        <ButtonComponent
+                        <CancelButtonComponent
                           kind={KIND.tertiary}
                           onClick={() => {
                             props.onCancel && props.onCancel();
@@ -184,9 +196,10 @@ function FileUploader(props: PropsT) {
                               }),
                             },
                           }}
+                          {...cancelButtonProps}
                         >
                           {locale.fileuploader.cancel}
-                        </ButtonComponent>
+                        </CancelButtonComponent>
                       )}
                     </React.Fragment>
                   )}

package/file-uploader/types.js.flow

@@ -26,7 +26,10 @@ export type OverridesT = {
   ProgressMessage?: OverrideT,
   ErrorMessage?: OverrideT,
   ButtonComponent?: OverrideT,
+  CancelButtonComponent?: OverrideT,
+  RetryButtonComponent?: OverrideT,
   Spinner?: OverrideT,
+  ProgressBar?: OverrideT,
 };
 
 export type PropsT = {|

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "11.1.1",
+  "version": "11.1.2",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",