baseui 11.0.1 → 11.1.0

package/es/badge/hint-dot.js

@@ -0,0 +1,55 @@
+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); }
+
+/*
+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 { useStyletron } from '../styles/index.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { StyledHintDot, StyledRoot, StyledPositioner } from './styled-components.js';
+import { PLACEMENT, ROLE } from './constants.js';
+import { getAnchorFromChildren } from './utils.js';
+
+const HintDot = ({
+  children,
+  color,
+  horizontalOffset: horizontalOffsetProp,
+  verticalOffset: verticalOffsetProp,
+  hidden,
+  overrides = {}
+}) => {
+  const [HintDot, hintDotProps] = getOverrides(overrides.Badge, StyledHintDot);
+  const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
+  const [Positioner, positionerProps] = getOverrides(overrides.Positioner, StyledPositioner);
+  const [, theme] = useStyletron();
+  const anchor = getAnchorFromChildren(children); // if the anchor is a string, we supply default offsets
+
+  let horizontalOffset = horizontalOffsetProp;
+  let verticalOffset = verticalOffsetProp;
+
+  if (typeof anchor === 'string') {
+    if (!horizontalOffset) {
+      horizontalOffset = '-14px';
+    }
+
+    if (!verticalOffset) {
+      verticalOffset = '-4px';
+    }
+  }
+
+  return /*#__PURE__*/React.createElement(Root, rootProps, anchor, /*#__PURE__*/React.createElement(Positioner, _extends({
+    $horizontalOffset: horizontalOffset,
+    $verticalOffset: verticalOffset,
+    $placement: theme.direction === 'rtl' ? PLACEMENT.topLeft : PLACEMENT.topRight,
+    $role: ROLE.hintDot
+  }, positionerProps), /*#__PURE__*/React.createElement(HintDot, _extends({}, hintDotProps, {
+    $color: color,
+    $horizontalOffset: horizontalOffset,
+    $hidden: hidden
+  }))));
+};
+
+export default HintDot;

package/es/badge/index.js

@@ -0,0 +1,11 @@
+/*
+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 { default as Badge } from './badge.js';
+export { default as NotificationCircle } from './notification-circle.js';
+export { default as HintDot } from './hint-dot.js';
+export { HIERARCHY, SHAPE, COLOR, PLACEMENT } from './constants.js';
+export * from './styled-components.js';

package/es/badge/notification-circle.js

@@ -0,0 +1,65 @@
+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); }
+
+/*
+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 { getOverrides } from '../helpers/overrides.js';
+import { StyledNotificationCircle, StyledRoot, StyledPositioner } from './styled-components.js';
+import { PLACEMENT, ROLE } from './constants.js';
+import { getAnchorFromChildren } from './utils.js';
+
+const NotificationCircle = ({
+  children,
+  content: contentProp,
+  color,
+  placement = PLACEMENT.topRight,
+  horizontalOffset,
+  verticalOffset,
+  hidden,
+  overrides = {}
+}) => {
+  const [NotificationCircle, NotificationCircleProps] = getOverrides(overrides.Badge, StyledNotificationCircle);
+  const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
+  const [Positioner, positionerProps] = getOverrides(overrides.Positioner, StyledPositioner);
+  const anchor = getAnchorFromChildren(children);
+
+  if (process.env.NODE_ENV !== "production") {
+    if (typeof contentProp === 'string') {
+      console.error(`[baseui] NotificationCircle child must be number or icon, found string`);
+    }
+
+    if (placement && placement !== PLACEMENT.topLeft && placement !== PLACEMENT.topRight) {
+      console.error(`[baseui] NotificationCircle must be placed topLeft or topRight, found ${placement}`);
+    }
+  }
+
+  let content = contentProp;
+
+  if (typeof content === 'number' && content > 9) {
+    content = '9+';
+  } // If there's no anchor, render the badge inline
+
+
+  if (!anchor) {
+    return /*#__PURE__*/React.createElement(NotificationCircle, _extends({
+      $color: color,
+      $hidden: hidden
+    }, NotificationCircleProps), content);
+  }
+
+  return /*#__PURE__*/React.createElement(Root, rootProps, anchor, /*#__PURE__*/React.createElement(Positioner, _extends({
+    $horizontalOffset: horizontalOffset,
+    $verticalOffset: verticalOffset,
+    $placement: placement,
+    $role: ROLE.notificationCircle
+  }, positionerProps), /*#__PURE__*/React.createElement(NotificationCircle, _extends({}, NotificationCircleProps, {
+    $color: color,
+    $hidden: hidden
+  }), content)));
+};
+
+export default NotificationCircle;

package/es/badge/styled-components.js

@@ -0,0 +1,296 @@
+/*
+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 { COLOR, SHAPE, ROLE, PLACEMENT, HIERARCHY } from './constants.js';
+
+function getColorStyles({
+  $theme,
+  $hierarchy,
+  $color
+}) {
+  const COLOR_STYLES = {
+    [HIERARCHY.primary]: {
+      [COLOR.accent]: {
+        color: $theme.colors.contentInversePrimary,
+        backgroundColor: $theme.colors.backgroundAccent
+      },
+      [COLOR.primary]: {
+        color: $theme.colors.contentInversePrimary,
+        backgroundColor: $theme.colors.backgroundInversePrimary
+      },
+      [COLOR.positive]: {
+        color: $theme.colors.contentInversePrimary,
+        backgroundColor: $theme.colors.backgroundPositive
+      },
+      [COLOR.negative]: {
+        color: $theme.colors.contentInversePrimary,
+        backgroundColor: $theme.colors.backgroundNegative
+      },
+      [COLOR.warning]: {
+        color: $theme.colors.primaryA,
+        backgroundColor: $theme.colors.backgroundWarning
+      }
+    },
+    [HIERARCHY.secondary]: {
+      [COLOR.accent]: {
+        color: $theme.colors.contentAccent,
+        backgroundColor: $theme.colors.backgroundLightAccent
+      },
+      [COLOR.primary]: {
+        color: $theme.colors.primaryA,
+        backgroundColor: $theme.colors.backgroundSecondary
+      },
+      [COLOR.positive]: {
+        color: $theme.colors.contentPositive,
+        backgroundColor: $theme.colors.backgroundLightPositive
+      },
+      [COLOR.negative]: {
+        color: $theme.colors.contentNegative,
+        backgroundColor: $theme.colors.backgroundLightNegative
+      },
+      [COLOR.warning]: {
+        color: $theme.colors.contentWarning,
+        backgroundColor: $theme.colors.backgroundLightWarning
+      }
+    }
+  };
+  return COLOR_STYLES[$hierarchy][$color];
+}
+
+const DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT = {
+  top: '-10px',
+  right: '-10px'
+};
+const DEFAULT_HINT_DOT_PLACEMENT = {
+  top: '-4px',
+  right: '-4px'
+};
+const POSITION_STYLES = Object.freeze({
+  [ROLE.badge]: {
+    [PLACEMENT.topEdge]: {
+      top: '-8px',
+      left: '50%',
+      transform: 'translateX(-50%)'
+    },
+    [PLACEMENT.bottomEdge]: {
+      bottom: '-8px',
+      left: '50%',
+      transform: 'translateX(-50%)'
+    },
+    [PLACEMENT.topLeft]: {
+      top: '16px',
+      left: '16px'
+    },
+    [PLACEMENT.topRight]: {
+      top: '16px',
+      right: '16px'
+    },
+    [PLACEMENT.bottomRight]: {
+      bottom: '16px',
+      right: '16px'
+    },
+    [PLACEMENT.bottomLeft]: {
+      bottom: '16px',
+      left: '16px'
+    },
+    [PLACEMENT.topLeftEdge]: {
+      top: '-8px',
+      left: '16px'
+    },
+    [PLACEMENT.topRightEdge]: {
+      top: '-8px',
+      right: '16px'
+    },
+    [PLACEMENT.bottomRightEdge]: {
+      bottom: '-8px',
+      right: '16px'
+    },
+    [PLACEMENT.bottomLeftEdge]: {
+      bottom: '-8px',
+      left: '16px'
+    },
+    [PLACEMENT.leftTopEdge]: {
+      top: '16px',
+      left: '-8px'
+    },
+    [PLACEMENT.rightTopEdge]: {
+      top: '16px',
+      right: '-8px'
+    },
+    [PLACEMENT.rightBottomEdge]: {
+      bottom: '16px',
+      right: '-8px'
+    },
+    [PLACEMENT.leftBottomEdge]: {
+      bottom: '16px',
+      left: '-8px'
+    }
+  },
+  [ROLE.notificationCircle]: {
+    [PLACEMENT.topLeft]: {
+      top: '-10px',
+      left: '-10px'
+    },
+    [PLACEMENT.topRight]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
+    // NotificationCircle can only be placed topLeft or topRight, other values fall back to topRight
+    [PLACEMENT.topEdge]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
+    [PLACEMENT.bottomEdge]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
+    [PLACEMENT.bottomRight]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
+    [PLACEMENT.bottomLeft]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
+    [PLACEMENT.topLeftEdge]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
+    [PLACEMENT.topRightEdge]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
+    [PLACEMENT.bottomRightEdge]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
+    [PLACEMENT.bottomLeftEdge]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
+    [PLACEMENT.leftTopEdge]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
+    [PLACEMENT.rightTopEdge]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
+    [PLACEMENT.rightBottomEdge]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
+    [PLACEMENT.leftBottomEdge]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT
+  },
+  [ROLE.hintDot]: {
+    [PLACEMENT.topLeft]: {
+      top: '-4px',
+      left: '-4px'
+    },
+    [PLACEMENT.topRight]: DEFAULT_HINT_DOT_PLACEMENT,
+    // HintDot can only be placed topLeft or topRight, other values fall back to topRight
+    [PLACEMENT.topEdge]: DEFAULT_HINT_DOT_PLACEMENT,
+    [PLACEMENT.bottomEdge]: DEFAULT_HINT_DOT_PLACEMENT,
+    [PLACEMENT.bottomRight]: DEFAULT_HINT_DOT_PLACEMENT,
+    [PLACEMENT.bottomLeft]: DEFAULT_HINT_DOT_PLACEMENT,
+    [PLACEMENT.topLeftEdge]: DEFAULT_HINT_DOT_PLACEMENT,
+    [PLACEMENT.topRightEdge]: DEFAULT_HINT_DOT_PLACEMENT,
+    [PLACEMENT.bottomRightEdge]: DEFAULT_HINT_DOT_PLACEMENT,
+    [PLACEMENT.bottomLeftEdge]: DEFAULT_HINT_DOT_PLACEMENT,
+    [PLACEMENT.leftTopEdge]: DEFAULT_HINT_DOT_PLACEMENT,
+    [PLACEMENT.rightTopEdge]: DEFAULT_HINT_DOT_PLACEMENT,
+    [PLACEMENT.rightBottomEdge]: DEFAULT_HINT_DOT_PLACEMENT,
+    [PLACEMENT.leftBottomEdge]: DEFAULT_HINT_DOT_PLACEMENT
+  }
+});
+export const StyledRoot = styled('div', () => {
+  return {
+    position: 'relative',
+    display: 'inline-block',
+    lineHeight: 'initial'
+  };
+});
+StyledRoot.displayName = "StyledRoot";
+const TOP_PLACEMENTS = [PLACEMENT.topLeft, PLACEMENT.topRight, PLACEMENT.topLeftEdge, PLACEMENT.topEdge, PLACEMENT.topRightEdge, PLACEMENT.leftTopEdge, PLACEMENT.rightTopEdge];
+const BOTTOM_PLACEMENTS = [PLACEMENT.bottomLeft, PLACEMENT.bottomRight, PLACEMENT.bottomLeftEdge, PLACEMENT.bottomEdge, PLACEMENT.bottomRightEdge, PLACEMENT.leftBottomEdge, PLACEMENT.rightBottomEdge];
+const LEFT_PLACEMENTS = [PLACEMENT.topLeft, PLACEMENT.topLeftEdge, PLACEMENT.topEdge, PLACEMENT.bottomLeft, PLACEMENT.bottomLeftEdge, PLACEMENT.bottomEdge, PLACEMENT.leftTopEdge, PLACEMENT.leftBottomEdge];
+const RIGHT_PLACEMENTS = [PLACEMENT.topRight, PLACEMENT.topRightEdge, PLACEMENT.bottomRight, PLACEMENT.bottomRightEdge, PLACEMENT.rightTopEdge, PLACEMENT.rightBottomEdge];
+export const StyledPositioner = styled('div', ({
+  $theme,
+  $role,
+  $placement,
+  $horizontalOffset,
+  $verticalOffset
+}) => {
+  let positionStyle = POSITION_STYLES[$role][$placement];
+
+  if ($verticalOffset) {
+    if (TOP_PLACEMENTS.includes($placement)) {
+      positionStyle = { ...positionStyle,
+        top: $verticalOffset
+      };
+    }
+
+    if (BOTTOM_PLACEMENTS.includes($placement)) {
+      positionStyle = { ...positionStyle,
+        bottom: $verticalOffset
+      };
+    }
+  }
+
+  if ($horizontalOffset) {
+    if (LEFT_PLACEMENTS.includes($placement)) {
+      positionStyle = { ...positionStyle,
+        left: $horizontalOffset
+      };
+    }
+
+    if (RIGHT_PLACEMENTS.includes($placement)) {
+      positionStyle = { ...positionStyle,
+        right: $horizontalOffset
+      };
+    }
+  }
+
+  return { ...positionStyle,
+    position: 'absolute',
+    lineHeight: 'initial'
+  };
+});
+StyledPositioner.displayName = "StyledPositioner";
+export const StyledBadge = styled('div', ({
+  $theme,
+  $shape = SHAPE.rectangle,
+  $color = COLOR.accent,
+  $hierarchy = HIERARCHY.primary,
+  $hidden
+}) => {
+  return {
+    visibility: $hidden ? 'hidden' : 'inherit',
+    boxSizing: 'border-box',
+    height: $theme.sizing.scale700,
+    borderRadius: $shape === SHAPE.rectangle ? $theme.borders.radius200 : $theme.borders.radius500,
+    paddingRight: $shape === SHAPE.rectangle ? $theme.sizing.scale100 : $theme.sizing.scale300,
+    paddingLeft: $shape === SHAPE.rectangle ? $theme.sizing.scale100 : $theme.sizing.scale300,
+    display: 'inline-flex',
+    alignItems: 'center',
+    ...getColorStyles({
+      $theme,
+      $hierarchy,
+      $color
+    }),
+    ...($hierarchy === HIERARCHY.primary ? $theme.typography.LabelSmall : $theme.typography.ParagraphSmall)
+  };
+});
+StyledBadge.displayName = "StyledBadge";
+export const StyledNotificationCircle = styled('div', ({
+  $theme,
+  $color = COLOR.accent,
+  $hidden
+}) => {
+  return {
+    visibility: $hidden ? 'hidden' : 'inherit',
+    height: $theme.sizing.scale700,
+    width: $theme.sizing.scale700,
+    borderRadius: '20px',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...getColorStyles({
+      $theme,
+      $hierarchy: HIERARCHY.primary,
+      $color
+    }),
+    ...$theme.typography.LabelXSmall
+  };
+});
+StyledNotificationCircle.displayName = "StyledNotificationCircle";
+export const StyledHintDot = styled('div', ({
+  $theme,
+  $color = COLOR.accent,
+  $hidden
+}) => {
+  return {
+    visibility: $hidden ? 'hidden' : 'inherit',
+    backgroundColor: $theme.colors[$color],
+    boxSizing: 'content-box',
+    height: '8px',
+    width: '8px',
+    borderRadius: '50%',
+    border: `4px solid ${$theme.colors.backgroundPrimary}`,
+    ...getColorStyles({
+      $theme,
+      $hierarchy: HIERARCHY.primary,
+      $color
+    })
+  };
+});
+StyledHintDot.displayName = "StyledHintDot";

package/es/badge/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 { HIERARCHY, SHAPE, COLOR, PLACEMENT, ROLE } from './constants.js';

package/es/badge/utils.js

@@ -0,0 +1,17 @@
+/*
+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';
+export const getAnchorFromChildren = children => {
+  const childArray = React.Children.toArray(children);
+
+  if (childArray.length !== 1) {
+    // eslint-disable-next-line no-console
+    console.error(`[baseui] No more than 1 child may be passed to Badge, found ${childArray.length} children`);
+  }
+
+  return childArray[0];
+};

package/es/banner/banner.js

@@ -0,0 +1,213 @@
+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); }
+
+/*
+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({
+  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 (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,
+        color
+      },
+      onClick: action.onClick,
+      size: BUTTON_SIZE.compact,
+      shape: BUTTON_SHAPE.pill
+    }, action.label);
+  }
+
+  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 /*#__PURE__*/React.createElement(TrailingIconButton, _extends({
+      "aria-label": action.label,
+      onClick: action.onClick,
+      $nested: nested
+    }, trailingIconButtonProps), action.icon({
+      size: theme.sizing.scale650
+    }));
+  }
+
+  const [TrailingButtonContainer, trailingButtonContainerProps] = getOverrides(overrides.TrailingButtonContainer, StyledTrailingButtonContainer);
+
+  if (action.label) {
+    return /*#__PURE__*/React.createElement(TrailingButtonContainer, trailingButtonContainerProps, /*#__PURE__*/React.createElement(Button, {
+      colors: {
+        backgroundColor,
+        color
+      },
+      onClick: action.onClick,
+      size: BUTTON_SIZE.compact,
+      shape: BUTTON_SHAPE.pill
+    }, action.label));
+  }
+
+  return null;
+}
+
+export function Banner({
+  action,
+  artwork,
+  children,
+  hierarchy = HIERARCHY.low,
+  kind = KIND.info,
+  overrides = {},
+  nested = false,
+  title
+}) {
+  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 /*#__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/es/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 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'
+});