baseui 11.0.3 → 11.1.2

package/esm/banner/banner.js

@@ -0,0 +1,271 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+import { Button, SIZE as BUTTON_SIZE, SHAPE as BUTTON_SHAPE } from '../button/index.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { useStyletron } from '../styles/index.js';
+import { ACTION_POSITION, ARTWORK_TYPE, HIERARCHY, KIND } from './constants.js';
+import { StyledRoot, StyledLeadingContent, StyledMessageContent, StyledTitle, StyledMessage, StyledBelowContent, StyledTrailingContent, StyledTrailingButtonContainer, StyledTrailingIconButton } from './styled-components.js';
+
+function low(theme, kind) {
+  switch (kind) {
+    case KIND.negative:
+      return {
+        actionBackgroundColor: theme.colors.bannerActionLowNegative,
+        backgroundColor: theme.colors.backgroundLightNegative,
+        color: theme.colors.contentPrimary
+      };
+
+    case KIND.positive:
+      return {
+        actionBackgroundColor: theme.colors.bannerActionLowPositive,
+        backgroundColor: theme.colors.backgroundLightPositive,
+        color: theme.colors.contentPrimary
+      };
+
+    case KIND.warning:
+      return {
+        actionBackgroundColor: theme.colors.bannerActionLowWarning,
+        backgroundColor: theme.colors.backgroundLightWarning,
+        color: theme.colors.contentPrimary
+      };
+
+    case KIND.info:
+    default:
+      return {
+        actionBackgroundColor: theme.colors.bannerActionLowInfo,
+        backgroundColor: theme.colors.backgroundLightAccent,
+        color: theme.colors.contentPrimary
+      };
+  }
+}
+
+function high(theme, kind) {
+  switch (kind) {
+    case KIND.negative:
+      return {
+        actionBackgroundColor: theme.colors.bannerActionHighNegative,
+        backgroundColor: theme.colors.backgroundNegative,
+        color: theme.colors.contentOnColor
+      };
+
+    case KIND.positive:
+      return {
+        actionBackgroundColor: theme.colors.bannerActionHighPositive,
+        backgroundColor: theme.colors.backgroundPositive,
+        color: theme.colors.contentOnColor
+      };
+
+    case KIND.warning:
+      return {
+        actionBackgroundColor: theme.colors.bannerActionHighWarning,
+        backgroundColor: theme.colors.backgroundWarning,
+        color: theme.colors.contentPrimary
+      };
+
+    case KIND.info:
+    default:
+      return {
+        actionBackgroundColor: theme.colors.bannerActionHighInfo,
+        backgroundColor: theme.colors.backgroundAccent,
+        color: theme.colors.contentOnColor
+      };
+  }
+}
+
+function Leading(_ref) {
+  var artwork = _ref.artwork;
+
+  var _useStyletron = useStyletron(),
+      _useStyletron2 = _slicedToArray(_useStyletron, 2),
+      theme = _useStyletron2[1];
+
+  if (!artwork) {
+    return null;
+  }
+
+  var size = artwork.type === ARTWORK_TYPE.badge ? theme.sizing.scale1000 : theme.sizing.scale800;
+  return artwork.icon({
+    size: size
+  });
+}
+
+function Below(_ref2) {
+  var action = _ref2.action,
+      backgroundColor = _ref2.backgroundColor,
+      color = _ref2.color;
+
+  if (!action || action.position !== ACTION_POSITION.below) {
+    return null;
+  }
+
+  if (process.env.NODE_ENV !== "production") {
+    if (action.icon) {
+      console.error('Banner ACTION_POSITION.below must not have an icon.');
+      return null;
+    }
+  }
+
+  if (action.label) {
+    return /*#__PURE__*/React.createElement(Button, {
+      colors: {
+        backgroundColor: backgroundColor,
+        color: color
+      },
+      onClick: action.onClick,
+      size: BUTTON_SIZE.compact,
+      shape: BUTTON_SHAPE.pill
+    }, action.label);
+  }
+
+  return null;
+}
+
+function Trailing(_ref3) {
+  var action = _ref3.action,
+      backgroundColor = _ref3.backgroundColor,
+      color = _ref3.color,
+      overrides = _ref3.overrides,
+      nested = _ref3.nested;
+
+  var _useStyletron3 = useStyletron(),
+      _useStyletron4 = _slicedToArray(_useStyletron3, 2),
+      theme = _useStyletron4[1];
+
+  if (!action || action.position && action.position !== ACTION_POSITION.trailing) {
+    return null;
+  }
+
+  var _getOverrides = getOverrides(overrides.TrailingIconButton, StyledTrailingIconButton),
+      _getOverrides2 = _slicedToArray(_getOverrides, 2),
+      TrailingIconButton = _getOverrides2[0],
+      trailingIconButtonProps = _getOverrides2[1];
+
+  if (action.icon) {
+    return /*#__PURE__*/React.createElement(TrailingIconButton, _extends({
+      "aria-label": action.label,
+      onClick: action.onClick,
+      $nested: nested
+    }, trailingIconButtonProps), action.icon({
+      size: theme.sizing.scale650
+    }));
+  }
+
+  var _getOverrides3 = getOverrides(overrides.TrailingButtonContainer, StyledTrailingButtonContainer),
+      _getOverrides4 = _slicedToArray(_getOverrides3, 2),
+      TrailingButtonContainer = _getOverrides4[0],
+      trailingButtonContainerProps = _getOverrides4[1];
+
+  if (action.label) {
+    return /*#__PURE__*/React.createElement(TrailingButtonContainer, trailingButtonContainerProps, /*#__PURE__*/React.createElement(Button, {
+      colors: {
+        backgroundColor: backgroundColor,
+        color: color
+      },
+      onClick: action.onClick,
+      size: BUTTON_SIZE.compact,
+      shape: BUTTON_SHAPE.pill
+    }, action.label));
+  }
+
+  return null;
+}
+
+export function Banner(_ref4) {
+  var action = _ref4.action,
+      artwork = _ref4.artwork,
+      children = _ref4.children,
+      _ref4$hierarchy = _ref4.hierarchy,
+      hierarchy = _ref4$hierarchy === void 0 ? HIERARCHY.low : _ref4$hierarchy,
+      _ref4$kind = _ref4.kind,
+      kind = _ref4$kind === void 0 ? KIND.info : _ref4$kind,
+      _ref4$overrides = _ref4.overrides,
+      overrides = _ref4$overrides === void 0 ? {} : _ref4$overrides,
+      _ref4$nested = _ref4.nested,
+      nested = _ref4$nested === void 0 ? false : _ref4$nested,
+      title = _ref4.title;
+
+  var _useStyletron5 = useStyletron(),
+      _useStyletron6 = _slicedToArray(_useStyletron5, 2),
+      theme = _useStyletron6[1];
+
+  var styles = hierarchy === HIERARCHY.high ? high(theme, kind) : low(theme, kind);
+  var actionPosition = action && action.position ? action.position : ACTION_POSITION.trailing;
+
+  var _getOverrides5 = getOverrides(overrides.Root, StyledRoot),
+      _getOverrides6 = _slicedToArray(_getOverrides5, 2),
+      Root = _getOverrides6[0],
+      rootProps = _getOverrides6[1];
+
+  var _getOverrides7 = getOverrides(overrides.LeadingContent, StyledLeadingContent),
+      _getOverrides8 = _slicedToArray(_getOverrides7, 2),
+      LeadingContent = _getOverrides8[0],
+      leadingContentProps = _getOverrides8[1];
+
+  var _getOverrides9 = getOverrides(overrides.MessageContent, StyledMessageContent),
+      _getOverrides10 = _slicedToArray(_getOverrides9, 2),
+      MessageContent = _getOverrides10[0],
+      messageContentProps = _getOverrides10[1];
+
+  var _getOverrides11 = getOverrides(overrides.TrailingContent, StyledTrailingContent),
+      _getOverrides12 = _slicedToArray(_getOverrides11, 2),
+      TrailingContent = _getOverrides12[0],
+      trailingContentProps = _getOverrides12[1];
+
+  var _getOverrides13 = getOverrides(overrides.BelowContent, StyledBelowContent),
+      _getOverrides14 = _slicedToArray(_getOverrides13, 2),
+      BelowContent = _getOverrides14[0],
+      belowContentProps = _getOverrides14[1];
+
+  var _getOverrides15 = getOverrides(overrides.Title, StyledTitle),
+      _getOverrides16 = _slicedToArray(_getOverrides15, 2),
+      Title = _getOverrides16[0],
+      titleProps = _getOverrides16[1];
+
+  var _getOverrides17 = getOverrides(overrides.Message, StyledMessage),
+      _getOverrides18 = _slicedToArray(_getOverrides17, 2),
+      Message = _getOverrides18[0],
+      messageProps = _getOverrides18[1];
+
+  return /*#__PURE__*/React.createElement(Root, _extends({
+    $backgroundColor: styles.backgroundColor,
+    $color: styles.color,
+    $nested: nested
+  }, rootProps), /*#__PURE__*/React.createElement(LeadingContent, _extends({
+    $includesArtwork: Boolean(artwork)
+  }, leadingContentProps), /*#__PURE__*/React.createElement(Leading, {
+    artwork: artwork
+  })), /*#__PURE__*/React.createElement(MessageContent, _extends({
+    $actionPosition: actionPosition
+  }, messageContentProps), Boolean(title) && /*#__PURE__*/React.createElement(Title, titleProps, title), Boolean(children) && /*#__PURE__*/React.createElement(Message, messageProps, children)), /*#__PURE__*/React.createElement(TrailingContent, trailingContentProps, /*#__PURE__*/React.createElement(Trailing, {
+    action: action,
+    backgroundColor: styles.actionBackgroundColor,
+    color: styles.color,
+    overrides: overrides,
+    nested: nested
+  })), /*#__PURE__*/React.createElement(BelowContent, _extends({
+    $actionPosition: actionPosition
+  }, belowContentProps), /*#__PURE__*/React.createElement(Below, {
+    action: action,
+    backgroundColor: styles.actionBackgroundColor,
+    color: styles.color
+  })));
+}

package/esm/banner/constants.js

@@ -0,0 +1,24 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+export var ACTION_POSITION = Object.freeze({
+  below: 'below',
+  trailing: 'trailing'
+});
+export var ARTWORK_TYPE = Object.freeze({
+  icon: 'icon',
+  badge: 'badge'
+});
+export var HIERARCHY = Object.freeze({
+  low: 'low',
+  high: 'high'
+});
+export var KIND = Object.freeze({
+  info: 'info',
+  negative: 'negative',
+  positive: 'positive',
+  warning: 'warning'
+});

package/esm/banner/index.js

@@ -0,0 +1,9 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+export { Banner } from './banner.js';
+export * from './constants.js';
+export * from './styled-components.js';

package/esm/banner/styled-components.js

@@ -0,0 +1,113 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+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/index.js';
+import { ACTION_POSITION } from './constants.js';
+export var StyledRoot = styled('div', function (_ref) {
+  var $theme = _ref.$theme,
+      $backgroundColor = _ref.$backgroundColor,
+      $color = _ref.$color,
+      $nested = _ref.$nested;
+  var radius = $nested ? $theme.borders.radius300 : $theme.borders.radius400;
+  return {
+    backgroundColor: $backgroundColor,
+    borderStartStartRadius: radius,
+    borderStartEndRadius: radius,
+    borderEndStartRadius: radius,
+    borderEndEndRadius: radius,
+    color: $color,
+    display: 'grid',
+    gridColumnGap: $theme.sizing.scale600,
+    gridTemplateColumns: 'min-content auto min-content',
+    gridTemplateRows: 'auto min-content',
+    margin: $theme.sizing.scale600
+  };
+});
+StyledRoot.displayName = "StyledRoot";
+export var StyledLeadingContent = styled('div', function (_ref2) {
+  var $theme = _ref2.$theme,
+      $includesArtwork = _ref2.$includesArtwork;
+  return {
+    alignItems: 'center',
+    display: 'flex',
+    paddingInlineStart: $includesArtwork ? $theme.sizing.scale600 : null
+  };
+});
+StyledLeadingContent.displayName = "StyledLeadingContent";
+export var StyledMessageContent = styled('div', function (_ref3) {
+  var $theme = _ref3.$theme,
+      $actionPosition = _ref3.$actionPosition;
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    paddingBlockStart: $theme.sizing.scale600,
+    paddingBlockEnd: $actionPosition === ACTION_POSITION.trailing ? $theme.sizing.scale600 : null
+  };
+});
+StyledMessageContent.displayName = "StyledMessageContent";
+export var StyledTrailingContent = styled('div', function (_ref4) {
+  var $theme = _ref4.$theme;
+  return {
+    display: 'flex',
+    gridRowEnd: 'span 2',
+    marginInlineStart: 'auto'
+  };
+});
+StyledTrailingContent.displayName = "StyledTrailingContent";
+export var StyledBelowContent = styled('div', function (_ref5) {
+  var $theme = _ref5.$theme,
+      $actionPosition = _ref5.$actionPosition;
+  return {
+    gridColumnStart: 2,
+    paddingBlockStart: $actionPosition === ACTION_POSITION.below ? $theme.sizing.scale300 : null,
+    paddingBlockEnd: $actionPosition === ACTION_POSITION.below ? $theme.sizing.scale600 : null
+  };
+});
+StyledBelowContent.displayName = "StyledBelowContent";
+export var StyledTitle = styled('div', function (_ref6) {
+  var $theme = _ref6.$theme;
+  return $theme.typography.LabelMedium;
+});
+StyledTitle.displayName = "StyledTitle";
+export var StyledMessage = styled('div', function (_ref7) {
+  var $theme = _ref7.$theme;
+  return $theme.typography.ParagraphMedium;
+});
+StyledMessage.displayName = "StyledMessage";
+export var StyledTrailingButtonContainer = styled('div', function (_ref8) {
+  var $theme = _ref8.$theme;
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    paddingInlineEnd: $theme.sizing.scale600
+  };
+});
+StyledTrailingButtonContainer.displayName = "StyledTrailingButtonContainer";
+export var StyledTrailingIconButton = styled('button', function (_ref9) {
+  var $theme = _ref9.$theme,
+      $nested = _ref9.$nested;
+  var radius = $nested ? $theme.borders.radius300 : $theme.borders.radius400;
+  return {
+    alignItems: 'center',
+    background: 'none',
+    border: 'none',
+    borderStartEndRadius: radius,
+    borderEndEndRadius: radius,
+    color: 'inherit',
+    cursor: 'pointer',
+    display: 'flex',
+    paddingInlineStart: $theme.sizing.scale600,
+    paddingInlineEnd: $theme.sizing.scale600,
+    ':hover': {
+      boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.04)'
+    },
+    ':active': {
+      boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.08)'
+    }
+  };
+});
+StyledTrailingIconButton.displayName = "StyledTrailingIconButton";

package/esm/banner/types.js

@@ -0,0 +1,8 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+import { ACTION_POSITION, ARTWORK_TYPE, HIERARCHY, KIND } from './constants.js';

package/esm/breadcrumbs/breadcrumbs.js

@@ -76,7 +76,11 @@ export function Breadcrumbs(props) {
     }, baseListItemProps), child, (showTrailingSeparator || index !== childrenArray.length - 1) && /*#__PURE__*/React.createElement(Separator, _extends({}, baseSeparatorProps, {
       key: "separator-".concat(index)
     }), /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      return theme.direction === 'rtl' ? /*#__PURE__*/React.createElement(Left, baseIconProps) : /*#__PURE__*/React.createElement(Right, baseIconProps);
+      return theme.direction === 'rtl' ? /*#__PURE__*/React.createElement(Left, _extends({
+        size: 16
+      }, baseIconProps)) : /*#__PURE__*/React.createElement(Right, _extends({
+        size: 16
+      }, baseIconProps));
     }))));
   });
   return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, function (locale) {

package/esm/button/button.js

@@ -131,7 +131,8 @@ var Button = /*#__PURE__*/function (_React$Component) {
           endEnhancer = _this$props2.endEnhancer,
           children = _this$props2.children,
           forwardedRef = _this$props2.forwardedRef,
-          restProps = _objectWithoutProperties(_this$props2, ["overrides", "size", "kind", "shape", "isLoading", "isSelected", "startEnhancer", "endEnhancer", "children", "forwardedRef"]); // Get overrides
+          colors = _this$props2.colors,
+          restProps = _objectWithoutProperties(_this$props2, ["overrides", "size", "kind", "shape", "isLoading", "isSelected", "startEnhancer", "endEnhancer", "children", "forwardedRef", "colors"]); // Get overrides
 
 
       var _getOverrides = getOverrides( // adding both (1) BaseButton and (2) Root

package/esm/datepicker/utils/date-helpers.js

@@ -86,7 +86,7 @@ var DateHelpers = function DateHelpers(_adapter) {
     var UtilsClass = adapter.constructor;
     var className = adapter.constructor.name; // This ensures that if the adapter class isn't
     // supported it just falls back the default formats
-    // NOTE: in e2e tests puppeteer seems to add
+    // NOTE: in e2e tests playwright seems to add
     // a JSHandle wrapping class to all objects
     // so className always resolves to JSHandle:e
     // and if falls back to the default

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/esm/helper/helper-steps.js

@@ -17,7 +17,9 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
-import { ArrowLeft, ArrowRight, Check } from '../icon/index.js';
+import ArrowLeft from '../icon/arrow-left.js';
+import ArrowRight from '../icon/arrow-right.js';
+import Check from '../icon/check.js';
 import { Button, KIND, SHAPE } from '../button/index.js';
 import { useStyletron } from '../styles/index.js';
 export function HelperSteps(_ref) {

package/esm/input/base-input.js

@@ -85,7 +85,7 @@ var BaseInput = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onInputKeyDown", function (e) {
-      if (_this.props.clearOnEscape && e.key === 'Escape' && _this.inputRef.current) {
+      if (_this.props.clearOnEscape && e.key === 'Escape' && _this.inputRef.current && !_this.props.readOnly) {
         _this.clearValue(); // prevent event from closing modal or doing something unexpected
 
 
@@ -100,19 +100,23 @@ var BaseInput = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onFocus", function (e) {
-      _this.setState({
-        isFocused: true
-      });
+      if (!_this.props.readOnly) {
+        _this.setState({
+          isFocused: true
+        });
 
-      _this.props.onFocus(e);
+        _this.props.onFocus(e);
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "onBlur", function (e) {
-      _this.setState({
-        isFocused: false
-      });
+      if (!_this.props.readOnly) {
+        _this.setState({
+          isFocused: false
+        });
 
-      _this.props.onBlur(e);
+        _this.props.onBlur(e);
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleFocusForMaskToggle", function (event) {
@@ -267,10 +271,11 @@ var BaseInput = /*#__PURE__*/function (_React$Component) {
           clearable = _this$props2.clearable,
           value = _this$props2.value,
           disabled = _this$props2.disabled,
+          readOnly = _this$props2.readOnly,
           _this$props2$override = _this$props2.overrides,
           overrides = _this$props2$override === void 0 ? {} : _this$props2$override;
 
-      if (disabled || !clearable || value == null || typeof value === 'string' && value.length === 0) {
+      if (disabled || readOnly || !clearable || value == null || typeof value === 'string' && value.length === 0) {
         return null;
       }
 
@@ -360,6 +365,7 @@ var BaseInput = /*#__PURE__*/function (_React$Component) {
         "aria-required": this.props.required,
         autoComplete: autoComplete,
         disabled: this.props.disabled,
+        readOnly: this.props.readOnly,
         id: this.props.id,
         inputMode: this.props.inputMode,
         maxLength: this.props.maxLength,
@@ -419,7 +425,8 @@ _defineProperty(BaseInput, "defaultProps", {
   required: false,
   role: null,
   size: SIZE.default,
-  type: 'text'
+  type: 'text',
+  readOnly: false
 });
 
 export default BaseInput;

package/esm/input/input.js

@@ -70,23 +70,27 @@ var Input = /*#__PURE__*/function (_React$Component) {
     _this = _super.call.apply(_super, [this].concat(args));
 
     _defineProperty(_assertThisInitialized(_this), "state", {
-      isFocused: _this.props.autoFocus || false
+      isFocused: _this.props.autoFocus && !_this.props.readOnly || false
     });
 
     _defineProperty(_assertThisInitialized(_this), "onFocus", function (e) {
-      _this.setState({
-        isFocused: true
-      });
+      if (!_this.props.readOnly) {
+        _this.setState({
+          isFocused: true
+        });
 
-      _this.props.onFocus(e);
+        _this.props.onFocus(e);
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "onBlur", function (e) {
-      _this.setState({
-        isFocused: false
-      });
+      if (!_this.props.readOnly) {
+        _this.setState({
+          isFocused: false
+        });
 
-      _this.props.onBlur(e);
+        _this.props.onBlur(e);
+      }
     });
 
     return _this;
@@ -163,7 +167,8 @@ _defineProperty(Input, "defaultProps", {
   startEnhancer: null,
   endEnhancer: null,
   clearable: false,
-  type: 'text'
+  type: 'text',
+  readOnly: false
 });
 
 function getAdjoinedProp(startEnhancer, endEnhancer) {