baseui 11.0.1 → 11.1.0

package/banner/banner.js

@@ -0,0 +1,283 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Banner = Banner;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _index = require("../button/index.js");
+
+var _overrides = require("../helpers/overrides.js");
+
+var _index2 = require("../styles/index.js");
+
+var _constants = require("./constants.js");
+
+var _styledComponents = require("./styled-components.js");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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; }
+
+function low(theme, kind) {
+  switch (kind) {
+    case _constants.KIND.negative:
+      return {
+        actionBackgroundColor: theme.colors.bannerActionLowNegative,
+        backgroundColor: theme.colors.backgroundLightNegative,
+        color: theme.colors.contentPrimary
+      };
+
+    case _constants.KIND.positive:
+      return {
+        actionBackgroundColor: theme.colors.bannerActionLowPositive,
+        backgroundColor: theme.colors.backgroundLightPositive,
+        color: theme.colors.contentPrimary
+      };
+
+    case _constants.KIND.warning:
+      return {
+        actionBackgroundColor: theme.colors.bannerActionLowWarning,
+        backgroundColor: theme.colors.backgroundLightWarning,
+        color: theme.colors.contentPrimary
+      };
+
+    case _constants.KIND.info:
+    default:
+      return {
+        actionBackgroundColor: theme.colors.bannerActionLowInfo,
+        backgroundColor: theme.colors.backgroundLightAccent,
+        color: theme.colors.contentPrimary
+      };
+  }
+}
+
+function high(theme, kind) {
+  switch (kind) {
+    case _constants.KIND.negative:
+      return {
+        actionBackgroundColor: theme.colors.bannerActionHighNegative,
+        backgroundColor: theme.colors.backgroundNegative,
+        color: theme.colors.contentOnColor
+      };
+
+    case _constants.KIND.positive:
+      return {
+        actionBackgroundColor: theme.colors.bannerActionHighPositive,
+        backgroundColor: theme.colors.backgroundPositive,
+        color: theme.colors.contentOnColor
+      };
+
+    case _constants.KIND.warning:
+      return {
+        actionBackgroundColor: theme.colors.bannerActionHighWarning,
+        backgroundColor: theme.colors.backgroundWarning,
+        color: theme.colors.contentPrimary
+      };
+
+    case _constants.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 = (0, _index2.useStyletron)(),
+      _useStyletron2 = _slicedToArray(_useStyletron, 2),
+      theme = _useStyletron2[1];
+
+  if (!artwork) {
+    return null;
+  }
+
+  var size = artwork.type === _constants.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 !== _constants.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(_index.Button, {
+      colors: {
+        backgroundColor: backgroundColor,
+        color: color
+      },
+      onClick: action.onClick,
+      size: _index.SIZE.compact,
+      shape: _index.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 = (0, _index2.useStyletron)(),
+      _useStyletron4 = _slicedToArray(_useStyletron3, 2),
+      theme = _useStyletron4[1];
+
+  if (!action || action.position && action.position !== _constants.ACTION_POSITION.trailing) {
+    return null;
+  }
+
+  var _getOverrides = (0, _overrides.getOverrides)(overrides.TrailingIconButton, _styledComponents.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 = (0, _overrides.getOverrides)(overrides.TrailingButtonContainer, _styledComponents.StyledTrailingButtonContainer),
+      _getOverrides4 = _slicedToArray(_getOverrides3, 2),
+      TrailingButtonContainer = _getOverrides4[0],
+      trailingButtonContainerProps = _getOverrides4[1];
+
+  if (action.label) {
+    return /*#__PURE__*/React.createElement(TrailingButtonContainer, trailingButtonContainerProps, /*#__PURE__*/React.createElement(_index.Button, {
+      colors: {
+        backgroundColor: backgroundColor,
+        color: color
+      },
+      onClick: action.onClick,
+      size: _index.SIZE.compact,
+      shape: _index.SHAPE.pill
+    }, action.label));
+  }
+
+  return null;
+}
+
+function Banner(_ref4) {
+  var action = _ref4.action,
+      artwork = _ref4.artwork,
+      children = _ref4.children,
+      _ref4$hierarchy = _ref4.hierarchy,
+      hierarchy = _ref4$hierarchy === void 0 ? _constants.HIERARCHY.low : _ref4$hierarchy,
+      _ref4$kind = _ref4.kind,
+      kind = _ref4$kind === void 0 ? _constants.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 = (0, _index2.useStyletron)(),
+      _useStyletron6 = _slicedToArray(_useStyletron5, 2),
+      theme = _useStyletron6[1];
+
+  var styles = hierarchy === _constants.HIERARCHY.high ? high(theme, kind) : low(theme, kind);
+  var actionPosition = action && action.position ? action.position : _constants.ACTION_POSITION.trailing;
+
+  var _getOverrides5 = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.StyledRoot),
+      _getOverrides6 = _slicedToArray(_getOverrides5, 2),
+      Root = _getOverrides6[0],
+      rootProps = _getOverrides6[1];
+
+  var _getOverrides7 = (0, _overrides.getOverrides)(overrides.LeadingContent, _styledComponents.StyledLeadingContent),
+      _getOverrides8 = _slicedToArray(_getOverrides7, 2),
+      LeadingContent = _getOverrides8[0],
+      leadingContentProps = _getOverrides8[1];
+
+  var _getOverrides9 = (0, _overrides.getOverrides)(overrides.MessageContent, _styledComponents.StyledMessageContent),
+      _getOverrides10 = _slicedToArray(_getOverrides9, 2),
+      MessageContent = _getOverrides10[0],
+      messageContentProps = _getOverrides10[1];
+
+  var _getOverrides11 = (0, _overrides.getOverrides)(overrides.TrailingContent, _styledComponents.StyledTrailingContent),
+      _getOverrides12 = _slicedToArray(_getOverrides11, 2),
+      TrailingContent = _getOverrides12[0],
+      trailingContentProps = _getOverrides12[1];
+
+  var _getOverrides13 = (0, _overrides.getOverrides)(overrides.BelowContent, _styledComponents.StyledBelowContent),
+      _getOverrides14 = _slicedToArray(_getOverrides13, 2),
+      BelowContent = _getOverrides14[0],
+      belowContentProps = _getOverrides14[1];
+
+  var _getOverrides15 = (0, _overrides.getOverrides)(overrides.Title, _styledComponents.StyledTitle),
+      _getOverrides16 = _slicedToArray(_getOverrides15, 2),
+      Title = _getOverrides16[0],
+      titleProps = _getOverrides16[1];
+
+  var _getOverrides17 = (0, _overrides.getOverrides)(overrides.Message, _styledComponents.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/banner/banner.js.flow

@@ -0,0 +1,253 @@
+/*
+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.
+*/
+// @flow
+
+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';
+import type { PropsT } from './types.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({ artwork }) {
+  const [, theme] = useStyletron();
+
+  if (!artwork) {
+    return null;
+  }
+
+  const size = artwork.type === ARTWORK_TYPE.badge ? theme.sizing.scale1000 : theme.sizing.scale800;
+  return artwork.icon({ size });
+}
+
+function Below({ action, backgroundColor, color }) {
+  if (!action || action.position !== ACTION_POSITION.below) {
+    return null;
+  }
+
+  if (__DEV__) {
+    if (action.icon) {
+      console.error('Banner ACTION_POSITION.below must not have an icon.');
+      return null;
+    }
+  }
+
+  if (action.label) {
+    return (
+      <Button
+        colors={{ backgroundColor, color }}
+        onClick={action.onClick}
+        size={BUTTON_SIZE.compact}
+        shape={BUTTON_SHAPE.pill}
+      >
+        {action.label}
+      </Button>
+    );
+  }
+
+  return null;
+}
+
+function Trailing({ action, backgroundColor, color, overrides, nested }) {
+  const [, theme] = useStyletron();
+
+  if (!action || (action.position && action.position !== ACTION_POSITION.trailing)) {
+    return null;
+  }
+
+  const [TrailingIconButton, trailingIconButtonProps] = getOverrides(
+    overrides.TrailingIconButton,
+    StyledTrailingIconButton
+  );
+
+  if (action.icon) {
+    return (
+      <TrailingIconButton
+        aria-label={action.label}
+        onClick={action.onClick}
+        $nested={nested}
+        {...trailingIconButtonProps}
+      >
+        {action.icon({ size: theme.sizing.scale650 })}
+      </TrailingIconButton>
+    );
+  }
+
+  const [TrailingButtonContainer, trailingButtonContainerProps] = getOverrides(
+    overrides.TrailingButtonContainer,
+    StyledTrailingButtonContainer
+  );
+
+  if (action.label) {
+    return (
+      <TrailingButtonContainer {...trailingButtonContainerProps}>
+        <Button
+          colors={{ backgroundColor, color }}
+          onClick={action.onClick}
+          size={BUTTON_SIZE.compact}
+          shape={BUTTON_SHAPE.pill}
+        >
+          {action.label}
+        </Button>
+      </TrailingButtonContainer>
+    );
+  }
+
+  return null;
+}
+
+export function Banner({
+  action,
+  artwork,
+  children,
+  hierarchy = HIERARCHY.low,
+  kind = KIND.info,
+  overrides = {},
+  nested = false,
+  title,
+}: PropsT) {
+  const [, theme] = useStyletron();
+  const styles = hierarchy === HIERARCHY.high ? high(theme, kind) : low(theme, kind);
+  const actionPosition = action && action.position ? action.position : ACTION_POSITION.trailing;
+
+  const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
+  const [LeadingContent, leadingContentProps] = getOverrides(
+    overrides.LeadingContent,
+    StyledLeadingContent
+  );
+  const [MessageContent, messageContentProps] = getOverrides(
+    overrides.MessageContent,
+    StyledMessageContent
+  );
+  const [TrailingContent, trailingContentProps] = getOverrides(
+    overrides.TrailingContent,
+    StyledTrailingContent
+  );
+  const [BelowContent, belowContentProps] = getOverrides(
+    overrides.BelowContent,
+    StyledBelowContent
+  );
+  const [Title, titleProps] = getOverrides(overrides.Title, StyledTitle);
+  const [Message, messageProps] = getOverrides(overrides.Message, StyledMessage);
+
+  return (
+    <Root
+      $backgroundColor={styles.backgroundColor}
+      $color={styles.color}
+      $nested={nested}
+      {...rootProps}
+    >
+      <LeadingContent $includesArtwork={Boolean(artwork)} {...leadingContentProps}>
+        <Leading artwork={artwork} />
+      </LeadingContent>
+
+      <MessageContent $actionPosition={actionPosition} {...messageContentProps}>
+        {Boolean(title) && <Title {...titleProps}>{title}</Title>}
+        {Boolean(children) && <Message {...messageProps}>{children}</Message>}
+      </MessageContent>
+
+      <TrailingContent {...trailingContentProps}>
+        <Trailing
+          action={action}
+          backgroundColor={styles.actionBackgroundColor}
+          color={styles.color}
+          overrides={overrides}
+          nested={nested}
+        />
+      </TrailingContent>
+
+      <BelowContent $actionPosition={actionPosition} {...belowContentProps}>
+        <Below
+          action={action}
+          backgroundColor={styles.actionBackgroundColor}
+          color={styles.color}
+        />
+      </BelowContent>
+    </Root>
+  );
+}
+
+declare var __DEV__: boolean;
+declare var __NODE__: boolean;
+declare var __BROWSER__: boolean;

package/banner/constants.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.KIND = exports.HIERARCHY = exports.ARTWORK_TYPE = exports.ACTION_POSITION = 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.
+*/
+var ACTION_POSITION = Object.freeze({
+  below: 'below',
+  trailing: 'trailing'
+});
+exports.ACTION_POSITION = ACTION_POSITION;
+var ARTWORK_TYPE = Object.freeze({
+  icon: 'icon',
+  badge: 'badge'
+});
+exports.ARTWORK_TYPE = ARTWORK_TYPE;
+var HIERARCHY = Object.freeze({
+  low: 'low',
+  high: 'high'
+});
+exports.HIERARCHY = HIERARCHY;
+var KIND = Object.freeze({
+  info: 'info',
+  negative: 'negative',
+  positive: 'positive',
+  warning: 'warning'
+});
+exports.KIND = KIND;

package/banner/constants.js.flow

@@ -0,0 +1,33 @@
+/*
+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.
+*/
+// @flow
+
+export const ACTION_POSITION = Object.freeze({
+  below: 'below',
+  trailing: 'trailing',
+});
+
+export const ARTWORK_TYPE = Object.freeze({
+  icon: 'icon',
+  badge: 'badge',
+});
+
+export const HIERARCHY = Object.freeze({
+  low: 'low',
+  high: 'high',
+});
+
+export const KIND = Object.freeze({
+  info: 'info',
+  negative: 'negative',
+  positive: 'positive',
+  warning: 'warning',
+});
+
+declare var __DEV__: boolean;
+declare var __NODE__: boolean;
+declare var __BROWSER__: boolean;

package/banner/index.d.ts

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { StyletronComponent } from 'styletron-react';
+import { Override } from '../overrides';
+
+export interface ACTION_POSITION {
+  below: 'below';
+  trailing: 'trailing';
+}
+
+export interface ARTWORK_TYPE {
+  badge: 'badge';
+  icon: 'icon';
+}
+
+export interface HIERARCHY {
+  high: 'high';
+  low: 'low';
+}
+
+export interface 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];
+}
+
+export interface ArtworkContentT {
+  icon: (iconProps: { size: string }) => React.ReactNode;
+  type?: ARTWORK_TYPE[keyof ARTWORK_TYPE];
+}
+
+export interface PropsT {
+  action?: ActionContentT;
+  artwork?: ArtworkContentT;
+  children: React.ReactNode;
+  hierarchy?: HIERARCHY[keyof HIERARCHY];
+  kind?: KIND[keyof KIND];
+  overrides?: {
+    BelowContent?: Override<any>;
+    LeadingContent?: Override<any>;
+    Message?: Override<any>;
+    MessageContent?: Override<any>;
+    Root?: Override<any>;
+    Title?: Override<any>;
+    TrailingContent?: Override<any>;
+    TrailingButtonContainer?: Override<any>;
+    TrailingIconButton?: Override<any>;
+  };
+  nested?: boolean;
+  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 const Banner: React.FC<PropsT>;