baseui 14.0.0 → 15.0.0

package/file-uploader-basic/file-uploader-basic.js

@@ -0,0 +1,175 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _reactDropzone = _interopRequireDefault(require("react-dropzone"));
+var _locale = require("../locale");
+var _styles = require("../styles");
+var _button = require("../button");
+var _overrides = require("../helpers/overrides");
+var _progressBar = require("../progress-bar");
+var _spinner = require("../spinner");
+var _styledComponents = require("./styled-components");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); } /*
+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.
+*/
+// @ts-ignore
+function prependStyleProps(styleProps) {
+  return Object.keys(styleProps).reduce((nextStyleProps, currentKey) => {
+    // @ts-ignore
+    nextStyleProps[`$${currentKey}`] = styleProps[currentKey];
+    return nextStyleProps;
+  }, {});
+}
+function FileUploaderBasic(props) {
+  const {
+    overrides = {}
+  } = props;
+  const [, theme] = (0, _styles.useStyletron)();
+  const [Root, rootProps] = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.StyledRoot);
+  const [FileDragAndDrop, fileDragAndDropProps] = (0, _overrides.getOverrides)(overrides.FileDragAndDrop, _styledComponents.StyledFileDragAndDrop);
+  const [ContentMessage, contentMessageProps] = (0, _overrides.getOverrides)(overrides.ContentMessage, _styledComponents.StyledContentMessage);
+  const [ContentSeparator, contentSeparatorProps] = (0, _overrides.getOverrides)(overrides.ContentSeparator, _styledComponents.StyledContentSeparator);
+  const [ErrorMessage, errorMessageProps] = (0, _overrides.getOverrides)(overrides.ErrorMessage, _styledComponents.StyledErrorMessage);
+  const [HiddenInput, hiddenInputProps] = (0, _overrides.getOverrides)(overrides.HiddenInput, _styledComponents.StyledHiddenInput);
+  const [ButtonComponent, buttonProps] = (0, _overrides.getOverrides)(overrides.ButtonComponent, _button.Button);
+  const [RetryButtonComponent, retryButtonProps] = (0, _overrides.getOverrides)(overrides.RetryButtonComponent, _button.Button);
+  const [CancelButtonComponent, cancelButtonProps] = (0, _overrides.getOverrides)(overrides.CancelButtonComponent, _button.Button);
+  const [SpinnerComponent, spinnerProps] = (0, _overrides.getOverrides)(overrides.Spinner, _spinner.Spinner);
+  const [ProgressBarComponent, progressBarProps] = (0, _overrides.getOverrides)(overrides.ProgressBar, _progressBar.ProgressBar);
+  const afterFileDrop = !!(props.progressAmount || props.progressMessage || props.errorMessage);
+  let accept;
+  if (Array.isArray(props.accept)) {
+    accept = props.accept.join(',');
+  } else if (typeof props.accept === 'string') {
+    accept = props.accept;
+  }
+  let displayButtonIcon = null;
+  if (props.buttonIcon) {
+    displayButtonIcon = props.buttonIcon();
+  }
+  return /*#__PURE__*/React.createElement(_reactDropzone.default, _extends({}, props, {
+    accept: accept,
+    disabled: props.disabled || afterFileDrop
+  }), renderProps => {
+    const {
+      getRootProps,
+      getInputProps,
+      open,
+      ...styleProps
+    } = renderProps;
+    const prefixedStyledProps = prependStyleProps({
+      ...styleProps,
+      isDisabled: props.disabled,
+      afterFileDrop
+    });
+    const getRootPropsArgs = {
+      ...(props.disableClick ? {
+        onClick: evt => evt.preventDefault()
+      } : {}),
+      tabIndex: -1
+    };
+    return /*#__PURE__*/React.createElement(_locale.LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(Root, _extends({
+      "data-baseweb": "file-uploader-basic"
+    }, prefixedStyledProps, rootProps), /*#__PURE__*/React.createElement(FileDragAndDrop, _extends({}, getRootProps(getRootPropsArgs), prefixedStyledProps, fileDragAndDropProps), !afterFileDrop && /*#__PURE__*/React.createElement(React.Fragment, null, props.swapButtonAndMessage ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ButtonComponent, _extends({
+      disabled: props.disabled,
+      kind: _button.KIND.secondary,
+      shape: _button.SHAPE.pill,
+      size: _button.SIZE.compact,
+      onClick: open,
+      role: "button",
+      overrides: {
+        BaseButton: {
+          // @ts-ignore
+          style: ({
+            $theme
+          }) => ({
+            display: 'flex',
+            flexDirection: 'row',
+            gap: '8px',
+            marginTop: $theme.sizing.scale500
+          })
+        }
+      }
+    }, prefixedStyledProps, buttonProps), displayButtonIcon, props.buttonText ? props.buttonText : locale.fileuploaderbasic.browseFiles), /*#__PURE__*/React.createElement(ContentSeparator, _extends({}, prefixedStyledProps, contentSeparatorProps), locale.fileuploaderbasic.or), /*#__PURE__*/React.createElement(ContentMessage, _extends({}, prefixedStyledProps, contentMessageProps), props.contentMessage ? props.contentMessage : locale.fileuploaderbasic.dropFilesToUpload)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ContentMessage, _extends({}, prefixedStyledProps, contentMessageProps), props.contentMessage ? props.contentMessage : locale.fileuploaderbasic.dropFilesToUpload), /*#__PURE__*/React.createElement(ContentSeparator, _extends({}, prefixedStyledProps, contentSeparatorProps), locale.fileuploaderbasic.or), /*#__PURE__*/React.createElement(ButtonComponent, _extends({
+      disabled: props.disabled,
+      kind: _button.KIND.secondary,
+      shape: _button.SHAPE.pill,
+      size: _button.SIZE.compact,
+      onClick: open,
+      role: "button",
+      overrides: {
+        BaseButton: {
+          // @ts-ignore
+          style: ({
+            $theme
+          }) => ({
+            display: 'flex',
+            flexDirection: 'row',
+            gap: '8px',
+            marginTop: $theme.sizing.scale500
+          })
+        }
+      }
+    }, prefixedStyledProps, buttonProps), displayButtonIcon, props.buttonText ? props.buttonText : locale.fileuploaderbasic.browseFiles))), afterFileDrop && /*#__PURE__*/React.createElement(React.Fragment, null, typeof props.progressAmount === 'number' ? /*#__PURE__*/React.createElement(ProgressBarComponent, _extends({
+      value: props.progressAmount,
+      overrides: {
+        BarProgress: {
+          // @ts-ignore
+          style: ({
+            $theme
+          }) => ({
+            backgroundColor: props.errorMessage ? $theme.colors.negative : $theme.colors.accent
+          })
+        }
+      }
+    }, 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(RetryButtonComponent, _extends({
+      kind: _button.KIND.tertiary,
+      onClick: () => {
+        props.onRetry && props.onRetry();
+      },
+      "aria-invalid": Boolean(props.errorMessage),
+      "aria-describedby": props['aria-describedby'],
+      "aria-errormessage": props.errorMessage
+    }, retryButtonProps), locale.fileuploaderbasic.retry) : /*#__PURE__*/React.createElement(CancelButtonComponent, _extends({
+      kind: _button.KIND.tertiary,
+      onClick: () => {
+        props.onCancel && props.onCancel();
+      },
+      "aria-describedby": props['aria-describedby'],
+      overrides: {
+        BaseButton: {
+          // @ts-ignore
+          style: ({
+            $theme
+          }) => ({
+            color: $theme.colors.contentNegative
+          })
+        }
+      }
+    }, cancelButtonProps), locale.fileuploaderbasic.cancel))), /*#__PURE__*/React.createElement(HiddenInput, _extends({
+      "aria-invalid": Boolean(props.errorMessage) || null,
+      "aria-describedby": props['aria-describedby'],
+      "aria-errormessage": props.errorMessage || null
+    }, getInputProps(), prefixedStyledProps, hiddenInputProps))));
+  });
+}
+FileUploaderBasic.defaultProps = {
+  disableClick: true,
+  overrides: {}
+};
+var _default = exports.default = FileUploaderBasic;

package/file-uploader-basic/index.d.ts

@@ -0,0 +1,4 @@
+export { default as FileUploaderBasic } from './file-uploader-basic';
+export { StyledRoot, StyledFileDragAndDrop, StyledContentMessage, StyledContentSeparator, StyledErrorMessage, StyledHiddenInput, } from './styled-components';
+export * from './types';
+export type { FileUploaderBasicLocale } from './locale';

package/file-uploader-basic/index.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  FileUploaderBasic: true,
+  StyledRoot: true,
+  StyledFileDragAndDrop: true,
+  StyledContentMessage: true,
+  StyledContentSeparator: true,
+  StyledErrorMessage: true,
+  StyledHiddenInput: true
+};
+Object.defineProperty(exports, "FileUploaderBasic", {
+  enumerable: true,
+  get: function () {
+    return _fileUploaderBasic.default;
+  }
+});
+Object.defineProperty(exports, "StyledContentMessage", {
+  enumerable: true,
+  get: function () {
+    return _styledComponents.StyledContentMessage;
+  }
+});
+Object.defineProperty(exports, "StyledContentSeparator", {
+  enumerable: true,
+  get: function () {
+    return _styledComponents.StyledContentSeparator;
+  }
+});
+Object.defineProperty(exports, "StyledErrorMessage", {
+  enumerable: true,
+  get: function () {
+    return _styledComponents.StyledErrorMessage;
+  }
+});
+Object.defineProperty(exports, "StyledFileDragAndDrop", {
+  enumerable: true,
+  get: function () {
+    return _styledComponents.StyledFileDragAndDrop;
+  }
+});
+Object.defineProperty(exports, "StyledHiddenInput", {
+  enumerable: true,
+  get: function () {
+    return _styledComponents.StyledHiddenInput;
+  }
+});
+Object.defineProperty(exports, "StyledRoot", {
+  enumerable: true,
+  get: function () {
+    return _styledComponents.StyledRoot;
+  }
+});
+var _fileUploaderBasic = _interopRequireDefault(require("./file-uploader-basic"));
+var _styledComponents = require("./styled-components");
+var _types = require("./types");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
+});
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/file-uploader-basic/locale.d.ts

@@ -0,0 +1,15 @@
+export type FileUploaderBasicLocale = {
+    dropFilesToUpload: string;
+    or: string;
+    browseFiles: string;
+    retry: string;
+    cancel: string;
+};
+declare const locale: {
+    dropFilesToUpload: string;
+    or: string;
+    browseFiles: string;
+    retry: string;
+    cancel: string;
+};
+export default locale;

package/file-uploader-basic/locale.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+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.
+*/
+
+const locale = {
+  dropFilesToUpload: 'Drop files here to upload...',
+  or: '',
+  browseFiles: 'Browse files',
+  retry: 'Retry Upload',
+  cancel: 'Cancel'
+};
+var _default = exports.default = locale;

package/file-uploader-basic/styled-components.d.ts

@@ -0,0 +1,7 @@
+import type { StyleProps } from './types';
+export declare const StyledFileDragAndDrop: import("styletron-react").StyletronComponent<"div", StyleProps>;
+export declare const StyledContentMessage: import("styletron-react").StyletronComponent<"div", StyleProps>;
+export declare const StyledContentSeparator: import("styletron-react").StyletronComponent<"div", StyleProps>;
+export declare const StyledErrorMessage: import("styletron-react").StyletronComponent<"div", StyleProps>;
+export declare const StyledRoot: import("styletron-react").StyletronComponent<"div", StyleProps>;
+export declare const StyledHiddenInput: import("styletron-react").StyletronComponent<"input", {}>;

package/file-uploader-basic/styled-components.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledRoot = exports.StyledHiddenInput = exports.StyledFileDragAndDrop = exports.StyledErrorMessage = exports.StyledContentSeparator = exports.StyledContentMessage = void 0;
+var _styles = require("../styles");
+/*
+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.
+*/
+
+const StyledFileDragAndDrop = exports.StyledFileDragAndDrop = (0, _styles.styled)('div', props => {
+  const borderColor = props.$isDragActive ? props.$theme.colors.borderAccent : props.$theme.colors.fileUploaderBorderColorDefault;
+  const borderStyle = props.$afterFileDrop ? 'none' : 'dashed';
+  return {
+    alignItems: 'center',
+    backgroundColor: props.$isDragActive ? props.$theme.colors.backgroundAccentLight : props.$theme.colors.fileUploaderBackgroundColor,
+    borderLeftColor: borderColor,
+    borderRightColor: borderColor,
+    borderTopColor: borderColor,
+    borderBottomColor: borderColor,
+    borderLeftStyle: borderStyle,
+    borderRightStyle: borderStyle,
+    borderTopStyle: borderStyle,
+    borderBottomStyle: borderStyle,
+    borderLeftWidth: props.$theme.sizing.scale0,
+    borderRightWidth: props.$theme.sizing.scale0,
+    borderTopWidth: props.$theme.sizing.scale0,
+    borderBottomWidth: props.$theme.sizing.scale0,
+    borderTopLeftRadius: props.$theme.borders.radius400,
+    borderTopRightRadius: props.$theme.borders.radius400,
+    borderBottomLeftRadius: props.$theme.borders.radius400,
+    borderBottomRightRadius: props.$theme.borders.radius400,
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column',
+    outline: 'none',
+    paddingTop: props.$theme.sizing.scale900,
+    paddingRight: props.$theme.sizing.scale800,
+    paddingBottom: props.$afterFileDrop ? props.$theme.sizing.scale300 : props.$theme.sizing.scale900,
+    paddingLeft: props.$theme.sizing.scale800,
+    width: '100%'
+  };
+});
+StyledFileDragAndDrop.displayName = "StyledFileDragAndDrop";
+StyledFileDragAndDrop.displayName = 'StyledFileDragAndDrop';
+const StyledContentMessage = exports.StyledContentMessage = (0, _styles.styled)('div',
+// @ts-ignore
+({
+  $theme,
+  $afterFileDrop,
+  $isDragActive
+}) => ({
+  ...($afterFileDrop ? $theme.typography.LabelMedium : $theme.typography.LabelSmall),
+  color: $afterFileDrop ? $theme.colors.contentPrimary : $isDragActive ? $theme.colors.contentAccent : null,
+  marginTop: $afterFileDrop ? $theme.sizing.scale100 : null,
+  marginBottom: $afterFileDrop ? $theme.sizing.scale100 : null
+}));
+StyledContentMessage.displayName = "StyledContentMessage";
+StyledContentMessage.displayName = 'StyledContentMessage';
+const StyledContentSeparator = exports.StyledContentSeparator = StyledContentMessage;
+
+// @ts-ignore
+const StyledErrorMessage = exports.StyledErrorMessage = (0, _styles.styled)('div', props => ({
+  ...props.$theme.typography.LabelMedium,
+  color: props.$theme.colors.contentNegative,
+  marginTop: props.$afterFileDrop ? props.$theme.sizing.scale100 : null,
+  marginBottom: props.$afterFileDrop ? props.$theme.sizing.scale100 : null
+}));
+StyledErrorMessage.displayName = "StyledErrorMessage";
+StyledErrorMessage.displayName = 'StyledErrorMessage';
+const StyledRoot = exports.StyledRoot = (0, _styles.styled)('div', props => ({
+  ...props.$theme.typography.font300,
+  color: props.$theme.colors.fileUploaderMessageColor
+}));
+StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
+const StyledHiddenInput = exports.StyledHiddenInput = (0, _styles.styled)('input', {});
+StyledHiddenInput.displayName = "StyledHiddenInput";
+StyledHiddenInput.displayName = 'StyledHiddenInput';

package/file-uploader-basic/types.d.ts

@@ -0,0 +1,41 @@
+import type { DropzoneProps } from 'react-dropzone';
+import type { DragEvent } from 'react';
+import type { Override } from '../helpers/overrides';
+export type StyleProps = {
+    $afterFileDrop: boolean;
+    $disabled: boolean;
+    $isDragActive: boolean;
+    $isDragAccept: boolean;
+    $isDragReject: boolean;
+    $isFocused: boolean;
+};
+export type FileUploaderBasicOverrides = {
+    Root?: Override;
+    FileDragAndDrop?: Override;
+    ContentMessage?: Override;
+    ContentSeparator?: Override;
+    HiddenInput?: Override;
+    ProgressMessage?: Override;
+    ErrorMessage?: Override;
+    ButtonComponent?: Override;
+    CancelButtonComponent?: Override;
+    RetryButtonComponent?: Override;
+    Spinner?: Override;
+    ProgressBar?: Override;
+};
+export type FileUploaderBasicProps = Omit<DropzoneProps, 'accept'> & {
+    accept?: string[] | string;
+    buttonIcon?: () => JSX.Element;
+    buttonText?: string;
+    contentMessage?: string;
+    disableClick?: boolean;
+    'aria-describedby'?: string;
+    errorMessage?: string;
+    onCancel?: () => unknown;
+    onRetry?: () => unknown;
+    overrides?: FileUploaderBasicOverrides;
+    progressAmount?: number;
+    progressMessage?: string;
+    swapButtonAndMessage?: boolean;
+};
+export type DropFilesEventHandler = (accepted: File[], rejected: File[], event: DragEvent<HTMLElement>) => unknown;

package/form-control/form-control.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _overrides = require("../helpers/overrides");
 var _reactUid = require("react-uid");
+var _icon = require("../icon");
 var _styledComponents = require("./styled-components");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -19,7 +20,6 @@ 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.
 */
-// @ts-ignore
 function chooseRenderedHint(caption, error, positive, sharedProps) {
   if (!!error && typeof error !== 'boolean') {
     return typeof error === 'function' ? error(sharedProps) : error;
@@ -32,6 +32,34 @@ function chooseRenderedHint(caption, error, positive, sharedProps) {
   }
   return null;
 }
+
+// @ts-ignore
+function chooseRenderedHintIcon(hint, error, positive) {
+  if (!hint) {
+    return null;
+  }
+  if (!!error) {
+    if (typeof error === 'function') {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(_icon.Alert, {
+      size: 12,
+      "aria-hidden": "true",
+      title: ""
+    });
+  }
+  if (!!positive) {
+    if (typeof positive === 'function') {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(_icon.Check, {
+      size: 12,
+      "aria-hidden": "true",
+      title: ""
+    });
+  }
+  return null;
+}
 class FormControl extends React.Component {
   render() {
     const {
@@ -45,6 +73,10 @@ class FormControl extends React.Component {
         // @ts-ignore
         Caption: CaptionOverride,
         // @ts-ignore
+        CaptionMessage: CaptionMessageOverride,
+        // @ts-ignore
+        CaptionIcon: CaptionIconOverride,
+        // @ts-ignore
         ControlContainer: ControlContainerOverride
       },
       label,
@@ -68,8 +100,11 @@ class FormControl extends React.Component {
     const LabelEndEnhancer = (0, _overrides.getOverride)(LabelEndEnhancerOverride) || _styledComponents.LabelEndEnhancer;
     const LabelContainer = (0, _overrides.getOverride)(LabelContainerOverride) || _styledComponents.LabelContainer;
     const Caption = (0, _overrides.getOverride)(CaptionOverride) || _styledComponents.Caption;
+    const CaptionMessage = (0, _overrides.getOverride)(CaptionMessageOverride) || _styledComponents.CaptionMessage;
+    const CaptionIcon = (0, _overrides.getOverride)(CaptionIconOverride) || _styledComponents.CaptionIcon;
     const ControlContainer = (0, _overrides.getOverride)(ControlContainerOverride) || _styledComponents.ControlContainer;
     const hint = chooseRenderedHint(caption, error, positive, sharedProps);
+    const hintIcon = chooseRenderedHintIcon(hint, error, positive);
     if (process.env.NODE_ENV !== "production") {
       if (error && positive) {
         // eslint-disable-next-line no-console
@@ -130,10 +165,10 @@ class FormControl extends React.Component {
         error: typeof onlyChildProps.error !== 'undefined' ? onlyChildProps.error : sharedProps.$error === false ? undefined : sharedProps.$error,
         positive: typeof onlyChildProps.positive !== 'undefined' ? onlyChildProps.positive : sharedProps.$positive === false ? undefined : sharedProps.$positive
       });
-    }), (!!caption || !!error || positive) && /*#__PURE__*/React.createElement(Caption, _extends({
+    }), hint && /*#__PURE__*/React.createElement(Caption, _extends({
       "data-baseweb": "form-control-caption",
       id: captionId
-    }, sharedProps, (0, _overrides.getOverrideProps)(CaptionOverride)), hint))));
+    }, sharedProps, (0, _overrides.getOverrideProps)(CaptionOverride)), hintIcon && /*#__PURE__*/React.createElement(CaptionIcon, null, hintIcon), /*#__PURE__*/React.createElement(CaptionMessage, null, hint)))));
   }
 }
 exports.default = FormControl;

package/form-control/styled-components.d.ts

@@ -3,4 +3,6 @@ export declare const Label: import("styletron-react").StyletronComponent<"label"
 export declare const LabelContainer: import("styletron-react").StyletronComponent<"span", StyleProps>;
 export declare const LabelEndEnhancer: import("styletron-react").StyletronComponent<"span", StyleProps>;
 export declare const Caption: import("styletron-react").StyletronComponent<"div", StyleProps>;
+export declare const CaptionMessage: import("styletron-react").StyletronComponent<"div", StyleProps>;
+export declare const CaptionIcon: import("styletron-react").StyletronComponent<"div", StyleProps>;
 export declare const ControlContainer: import("styletron-react").StyletronComponent<"div", StyleProps>;

package/form-control/styled-components.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LabelEndEnhancer = exports.LabelContainer = exports.Label = exports.ControlContainer = exports.Caption = void 0;
+exports.LabelEndEnhancer = exports.LabelContainer = exports.Label = exports.ControlContainer = exports.CaptionMessage = exports.CaptionIcon = exports.Caption = void 0;
 var _styles = require("../styles");
 /*
 Copyright (c) Uber Technologies, Inc.
@@ -88,11 +88,31 @@ const Caption = exports.Caption = (0, _styles.styled)('div', props => {
     marginTop: sizing.scale300,
     marginRight: 0,
     marginBottom: sizing.scale300,
-    marginLeft: 0
+    marginLeft: 0,
+    display: 'flex'
   };
 });
 Caption.displayName = "Caption";
 Caption.displayName = 'Caption';
+const CaptionMessage = exports.CaptionMessage = (0, _styles.styled)('div', {
+  fontFamily: 'inherit',
+  fontSize: 'inherit',
+  fontWeight: 'inherit',
+  lineHeight: 'inherit',
+  flexGrow: 1
+});
+CaptionMessage.displayName = "CaptionMessage";
+CaptionMessage.displayName = 'CaptionMessage';
+const CaptionIcon = exports.CaptionIcon = (0, _styles.styled)('div', ({
+  $theme
+}) => ({
+  display: 'flex',
+  paddingTop: $theme.sizing.scale100,
+  paddingRight: $theme.sizing.scale100,
+  flexShrink: 0
+}));
+CaptionIcon.displayName = "CaptionIcon";
+CaptionIcon.displayName = 'CaptionIcon';
 const ControlContainer = exports.ControlContainer = (0, _styles.styled)('div', props => {
   const {
     $theme: {

package/form-control/types.d.ts

@@ -12,6 +12,10 @@ export type FormControlOverrides = {
     LabelContainer?: Override;
     /** Customizes the caption element. */
     Caption?: Override;
+    /** Customizes the caption message element. */
+    CaptionMessage?: Override;
+    /** Customizes the caption icon element. */
+    CaptionIcon?: Override;
     /** Customizes the container element. */
     ControlContainer?: Override;
 };

package/icon/circle-check-filled.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.SVGAttributes<SVGElement> & {
+    children?: React.ReactNode;
+    size?: import("./types").Size;
+    color?: string;
+    title?: string;
+    overrides?: import("./types").IconOverrides;
+} & import("./types").StyledComponentArgs & React.RefAttributes<SVGSVGElement>>;
+export default _default;

package/icon/circle-check-filled.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("../styles");
+var _overrides = require("../helpers/overrides");
+var _icon = _interopRequireDefault(require("./icon"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); } /*
+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.
+*/ // BASEUI-GENERATED-REACT-ICON
+// DO NOT EDIT THIS FILE DIRECTLY, SEE README.md
+// @ts-ignore
+function CircleCheckFilled(props, ref) {
+  const [, theme] = (0, _styles.useStyletron)();
+  const {
+    title = 'CircleCheckFilled',
+    size,
+    color,
+    overrides = {},
+    ...restProps
+  } = props;
+  const SvgOverride = (0, _overrides.mergeOverride)(
+  // Icons from the theme target the SVG override in the underlying Icon component
+  {
+    component: theme.icons && theme.icons.CircleCheckFilled ? theme.icons.CircleCheckFilled : null
+  }, overrides && overrides.Svg ? (0, _overrides.toObjectOverride)(overrides.Svg) : {});
+  return /*#__PURE__*/React.createElement(_icon.default, _extends({
+    viewBox: "0 0 24 24",
+    ref: ref,
+    title: title,
+    size: size,
+    color: color,
+    overrides: {
+      Svg: SvgOverride
+    }
+  }, restProps), /*#__PURE__*/React.createElement("path", {
+    d: "M12 1C5.9 1 1 5.9 1 12s4.9 11 11 11 11-4.9 11-11S18.1 1 12 1Zm-1.5 16.1-5.6-5.6L7 9.4l3.4 3.4 6.4-6.4 2.1 2.1-8.4 8.6Z",
+    fill: "currentColor"
+  }));
+}
+var _default = exports.default = /*#__PURE__*/React.forwardRef(CircleCheckFilled);

package/icon/circle-exclamation-point-filled.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.SVGAttributes<SVGElement> & {
+    children?: React.ReactNode;
+    size?: import("./types").Size;
+    color?: string;
+    title?: string;
+    overrides?: import("./types").IconOverrides;
+} & import("./types").StyledComponentArgs & React.RefAttributes<SVGSVGElement>>;
+export default _default;