baseui 0.0.0-next-e90bd38 → 0.0.0-next-4b03f14

package/banner/styled-components.js

@@ -32,7 +32,10 @@ var StyledRoot = (0, _styles.styled)('div', function (_ref) {
     gridColumnGap: $theme.sizing.scale600,
     gridTemplateColumns: 'min-content auto min-content',
     gridTemplateRows: 'auto min-content',
-    margin: $theme.sizing.scale600
+    marginTop: $theme.sizing.scale600,
+    marginRight: $theme.sizing.scale600,
+    marginBottom: $theme.sizing.scale600,
+    marginLeft: $theme.sizing.scale600
   };
 });
 exports.StyledRoot = StyledRoot;

package/banner/types.d.ts

@@ -20,23 +20,24 @@ export declare type ArtworkContent = {
     }) => React.ReactNode;
     type?: ArtworkType;
 };
+export declare type BannerOverrides = {
+    BelowContent?: Override;
+    LeadingContent?: Override;
+    Message?: Override;
+    MessageContent?: Override;
+    Root?: Override;
+    Title?: Override;
+    TrailingContent?: Override;
+    TrailingButtonContainer?: Override;
+    TrailingIconButton?: Override;
+};
 export declare type BannerProps = {
     action?: ActionContent;
     artwork?: ArtworkContent;
     children: React.ReactNode;
     hierarchy?: Hierarchy;
     kind?: Kind;
-    overrides?: {
-        BelowContent?: Override;
-        LeadingContent?: Override;
-        Message?: Override;
-        MessageContent?: Override;
-        Root?: Override;
-        Title?: Override;
-        TrailingContent?: Override;
-        TrailingButtonContainer?: Override;
-        TrailingIconButton?: Override;
-    };
+    overrides?: BannerOverrides;
     nested?: boolean;
     title?: React.ReactNode;
 };

package/banner/types.js.flow

@@ -33,6 +33,18 @@ export type ArtworkContentT = {|
   type?: ArtworkTypeT,
 |};
 
+export type OverridesT = {|
+  BelowContent?: OverrideT,
+  LeadingContent?: OverrideT,
+  Message?: OverrideT,
+  MessageContent?: OverrideT,
+  Root?: OverrideT,
+  Title?: OverrideT,
+  TrailingContent?: OverrideT,
+  TrailingButtonContainer?: OverrideT,
+  TrailingIconButton?: OverrideT,
+|};
+
 export type PropsT = {|
   // Provide a method to "accept", "dismiss", or otherwise interact with the message shown.
   action?: ActionContentT,
@@ -44,17 +56,7 @@ export type PropsT = {|
   hierarchy?: HierarchyT,
   // Determines color scheme and conveys message intent.
   kind?: KindT,
-  overrides?: {|
-    BelowContent?: OverrideT,
-    LeadingContent?: OverrideT,
-    Message?: OverrideT,
-    MessageContent?: OverrideT,
-    Root?: OverrideT,
-    Title?: OverrideT,
-    TrailingContent?: OverrideT,
-    TrailingButtonContainer?: OverrideT,
-    TrailingIconButton?: OverrideT,
-  |},
+  overrides?: OverridesT,
   // Used to make the banner visually distinct from its container element.
   nested?: boolean,
   // Bold text displayed when message content should be separated to two lines.

package/es/banner/styled-components.js

@@ -24,7 +24,10 @@ export const StyledRoot = styled('div', ({
     gridColumnGap: $theme.sizing.scale600,
     gridTemplateColumns: 'min-content auto min-content',
     gridTemplateRows: 'auto min-content',
-    margin: $theme.sizing.scale600
+    marginTop: $theme.sizing.scale600,
+    marginRight: $theme.sizing.scale600,
+    marginBottom: $theme.sizing.scale600,
+    marginLeft: $theme.sizing.scale600
   };
 });
 StyledRoot.displayName = "StyledRoot";

package/es/layer/layer.js

@@ -39,6 +39,24 @@ class LayerComponent extends React.Component {
       }
     });
 
+    _defineProperty(this, "onKeyDown", event => {
+      if (this.props.onKeyDown) {
+        this.props.onKeyDown(event);
+      }
+    });
+
+    _defineProperty(this, "onKeyUp", event => {
+      if (this.props.onKeyUp) {
+        this.props.onKeyUp(event);
+      }
+    });
+
+    _defineProperty(this, "onKeyPress", event => {
+      if (this.props.onKeyPress) {
+        this.props.onKeyPress(event);
+      }
+    });
+
     _defineProperty(this, "onDocumentClick", event => {
       if (this.props.onDocumentClick) {
         this.props.onDocumentClick(event);
@@ -48,6 +66,9 @@ class LayerComponent extends React.Component {
 
   componentDidMount() {
     this.context.addEscapeHandler(this.onEscape);
+    this.context.addKeyDownHandler(this.onKeyDown);
+    this.context.addKeyUpHandler(this.onKeyUp);
+    this.context.addKeyPressHandler(this.onKeyPress);
 
     if (!this.props.isHoverLayer) {
       this.context.addDocClickHandler(this.onDocumentClick);
@@ -106,6 +127,9 @@ class LayerComponent extends React.Component {
 
   componentWillUnmount() {
     this.context.removeEscapeHandler(this.onEscape);
+    this.context.removeKeyDownHandler(this.onKeyDown);
+    this.context.removeKeyUpHandler(this.onKeyUp);
+    this.context.removeKeyPressHandler(this.onKeyPress);
     this.context.removeDocClickHandler(this.onDocumentClick);
 
     if (this.props.onUnmount) {

package/es/layer/layers-manager.js

@@ -26,6 +26,12 @@ function defaultEventHandlerFn() {
 export const LayersContext = /*#__PURE__*/React.createContext({
   addEscapeHandler: defaultEventHandlerFn,
   removeEscapeHandler: defaultEventHandlerFn,
+  addKeyDownHandler: defaultEventHandlerFn,
+  removeKeyDownHandler: defaultEventHandlerFn,
+  addKeyUpHandler: defaultEventHandlerFn,
+  removeKeyUpHandler: defaultEventHandlerFn,
+  addKeyPressHandler: defaultEventHandlerFn,
+  removeKeyPressHandler: defaultEventHandlerFn,
   addDocClickHandler: defaultEventHandlerFn,
   removeDocClickHandler: defaultEventHandlerFn,
   host: undefined,
@@ -50,6 +56,14 @@ export default class LayersManager extends React.Component {
       }
     });
 
+    _defineProperty(this, "onKeyDown", event => {
+      const keyDownHandler = this.state.keyDownHandlers[this.state.keyDownHandlers.length - 1];
+
+      if (keyDownHandler) {
+        keyDownHandler(event);
+      }
+    });
+
     _defineProperty(this, "onKeyUp", event => {
       if (event.key === 'Escape') {
         const escapeKeyHandler = this.state.escapeKeyHandlers[this.state.escapeKeyHandlers.length - 1];
@@ -58,6 +72,20 @@ export default class LayersManager extends React.Component {
           escapeKeyHandler();
         }
       }
+
+      const keyUpHandler = this.state.keyUpHandlers[this.state.keyUpHandlers.length - 1];
+
+      if (keyUpHandler) {
+        keyUpHandler(event);
+      }
+    });
+
+    _defineProperty(this, "onKeyPress", event => {
+      const keyPressHandler = this.state.keyPressHandlers[this.state.keyPressHandlers.length - 1];
+
+      if (keyPressHandler) {
+        keyPressHandler(event);
+      }
     });
 
     _defineProperty(this, "onAddEscapeHandler", escapeKeyHandler => {
@@ -76,6 +104,54 @@ export default class LayersManager extends React.Component {
       });
     });
 
+    _defineProperty(this, "onAddKeyDownHandler", keyDownHandler => {
+      this.setState(prev => {
+        return {
+          keyDownHandlers: [...prev.keyDownHandlers, keyDownHandler]
+        };
+      });
+    });
+
+    _defineProperty(this, "onRemoveKeyDownHandler", keyDownHandler => {
+      this.setState(prev => {
+        return {
+          keyDownHandlers: prev.keyDownHandlers.filter(handler => handler !== keyDownHandler)
+        };
+      });
+    });
+
+    _defineProperty(this, "onAddKeyUpHandler", keyUpHandler => {
+      this.setState(prev => {
+        return {
+          keyUpHandlers: [...prev.keyUpHandlers, keyUpHandler]
+        };
+      });
+    });
+
+    _defineProperty(this, "onRemoveKeyUpHandler", keyUpHandler => {
+      this.setState(prev => {
+        return {
+          keyUpHandlers: prev.keyUpHandlers.filter(handler => handler !== keyUpHandler)
+        };
+      });
+    });
+
+    _defineProperty(this, "onAddKeyPressHandler", keyPressHandler => {
+      this.setState(prev => {
+        return {
+          keyPressHandlers: [...prev.keyPressHandlers, keyPressHandler]
+        };
+      });
+    });
+
+    _defineProperty(this, "onRemoveKeyPressHandler", keyPressHandler => {
+      this.setState(prev => {
+        return {
+          keyPressHandlers: prev.keyPressHandlers.filter(handler => handler !== keyPressHandler)
+        };
+      });
+    });
+
     _defineProperty(this, "onAddDocClickHandler", docClickHandler => {
       this.setState(prev => {
         return {
@@ -94,6 +170,9 @@ export default class LayersManager extends React.Component {
 
     this.state = {
       escapeKeyHandlers: [],
+      keyDownHandlers: [],
+      keyUpHandlers: [],
+      keyPressHandlers: [],
       docClickHandlers: []
     };
   }
@@ -103,7 +182,9 @@ export default class LayersManager extends React.Component {
     initFocusVisible(this.containerRef.current);
 
     if (typeof document !== 'undefined') {
-      document.addEventListener('keyup', this.onKeyUp); // using mousedown event so that callback runs before events on children inside of the layer
+      document.addEventListener('keydown', this.onKeyDown);
+      document.addEventListener('keyup', this.onKeyUp);
+      document.addEventListener('keypress', this.onKeyPress); // using mousedown event so that callback runs before events on children inside of the layer
 
       document.addEventListener('mousedown', this.onDocumentClick);
     }
@@ -111,7 +192,9 @@ export default class LayersManager extends React.Component {
 
   componentWillUnmount() {
     if (typeof document !== 'undefined') {
+      document.removeEventListener('keydown', this.onKeyDown);
       document.removeEventListener('keyup', this.onKeyUp);
+      document.removeEventListener('keypress', this.onKeyPress);
       document.removeEventListener('mousedown', this.onDocumentClick);
     }
   }
@@ -138,6 +221,12 @@ export default class LayersManager extends React.Component {
           zIndex: this.props.zIndex,
           addEscapeHandler: this.onAddEscapeHandler,
           removeEscapeHandler: this.onRemoveEscapeHandler,
+          addKeyDownHandler: this.onAddKeyDownHandler,
+          removeKeyDownHandler: this.onRemoveKeyDownHandler,
+          addKeyUpHandler: this.onAddKeyUpHandler,
+          removeKeyUpHandler: this.onRemoveKeyUpHandler,
+          addKeyPressHandler: this.onAddKeyPressHandler,
+          removeKeyPressHandler: this.onRemoveKeyPressHandler,
           addDocClickHandler: this.onAddDocClickHandler,
           removeDocClickHandler: this.onRemoveDocClickHandler
         }

package/es/menu/styled-components.js

@@ -113,6 +113,7 @@ export const StyledListItemElement = styled('li', props => {
     $size
   } = props;
   return { ...($size === OPTION_LIST_SIZE.compact ? $theme.typography.font100 : $theme.typography.font200),
+    boxSizing: 'border-box',
     position: 'relative',
     display: 'block',
     color: getFontColor(props),

package/es/message-card/constants.js

@@ -0,0 +1,19 @@
+/*
+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 { KIND } from '../button';
+export const BACKGROUND_COLOR_TYPE = Object.freeze({
+  light: 'light',
+  dark: 'dark'
+});
+export const IMAGE_LAYOUT = Object.freeze({
+  top: 'top',
+  trailing: 'trailing'
+});
+export const BUTTON_KIND = Object.freeze({
+  [KIND.secondary]: KIND.secondary,
+  [KIND.tertiary]: KIND.tertiary
+});

package/es/message-card/index.js

@@ -0,0 +1,10 @@
+/*
+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 MessageCard } from './message-card';
+export * from './constants';
+export * from './styled-components';
+export * from './types';

package/es/message-card/message-card.js

@@ -0,0 +1,112 @@
+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.
+*/
+import * as React from 'react';
+import { StyledRoot, StyledImage, StyledContentContainer, StyledHeadingContainer, StyledParagraphContainer } from './styled-components';
+import { Button as DefaultButton, SHAPE, SIZE } from '../button';
+import { useStyletron } from '../styles/index.js';
+import { ThemeProvider, LightTheme } from '../';
+import { getBackgroundColorType } from './utils';
+import { colors } from '../tokens';
+import { getOverrides } from '../helpers/overrides';
+import { IMAGE_LAYOUT, BACKGROUND_COLOR_TYPE, BUTTON_KIND } from './constants';
+
+const ButtonAlwaysLightTheme = ({
+  children,
+  ...restProps
+}) => /*#__PURE__*/React.createElement(ThemeProvider, {
+  theme: LightTheme
+}, /*#__PURE__*/React.createElement(DefaultButton, restProps, children));
+
+const MessageCard = ({
+  backgroundColor = colors.white,
+  backgroundColorType: backgroundColorTypeProp,
+  buttonKind = BUTTON_KIND.secondary,
+  buttonLabel,
+  heading,
+  image,
+  onClick,
+  overrides = {},
+  paragraph
+}) => {
+  const {
+    src,
+    layout = IMAGE_LAYOUT.top,
+    backgroundPosition,
+    ariaLabel
+  } = image || {};
+  const [Root, RootProps] = getOverrides(overrides.Root, StyledRoot);
+  const [ContentContainer, ContentContainerProps] = getOverrides(overrides.ContentContainer, StyledContentContainer);
+  const [HeadingContainer, HeadingContainerProps] = getOverrides(overrides.HeadingContainer, StyledHeadingContainer);
+  const [ParagraphContainer, ParagraphContainerProps] = getOverrides(overrides.ParagraphContainer, StyledParagraphContainer);
+  const [Image, ImageProps] = getOverrides(overrides.Image, StyledImage);
+  const [Button, ButtonProps] = getOverrides(overrides.Button, ButtonAlwaysLightTheme);
+  const [, theme] = useStyletron();
+  let backgroundColorType = backgroundColorTypeProp || getBackgroundColorType(backgroundColor);
+
+  if (!backgroundColorType) {
+    backgroundColorType = BACKGROUND_COLOR_TYPE.dark;
+
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(`The provided value for 'backgroundColor', ${backgroundColor}, is not recognized as a \
+        Base Web primitive color. Please use the 'backgroundColorType' prop to indicate whether\
+         this color is light or dark so the rest of the component can be styled accordingly.`);
+    }
+  }
+
+  let buttonColors;
+
+  if (buttonKind === BUTTON_KIND.tertiary && backgroundColorType === BACKGROUND_COLOR_TYPE.dark) {
+    buttonColors = {
+      color: theme.colors.contentOnColor,
+      backgroundColor: theme.colors.buttonTertiaryFill
+    };
+  }
+
+  if (buttonKind !== BUTTON_KIND.tertiary && backgroundColor !== colors.white) {
+    buttonColors = {
+      color: theme.colors.contentOnColorInverse,
+      backgroundColor: theme.colors.backgroundAlwaysLight
+    };
+  }
+
+  return /*#__PURE__*/React.createElement(Root, _extends({
+    onClick: onClick,
+    $backgroundColor: backgroundColor,
+    $backgroundColorType: backgroundColorType,
+    $imageLayout: layout
+  }, RootProps), image && /*#__PURE__*/React.createElement(Image, _extends({
+    role: "img",
+    ariaLabel: ariaLabel,
+    $src: src,
+    $imageLayout: layout,
+    $backgroundPosition: backgroundPosition
+  }, ImageProps)), /*#__PURE__*/React.createElement(ContentContainer, ContentContainerProps, heading && /*#__PURE__*/React.createElement(HeadingContainer, HeadingContainerProps, heading), paragraph && /*#__PURE__*/React.createElement(ParagraphContainer, ParagraphContainerProps, paragraph), buttonLabel && /*#__PURE__*/React.createElement(Button, _extends({
+    kind: buttonKind,
+    shape: SHAPE.pill,
+    size: SIZE.compact,
+    role: "none",
+    tabIndex: -1,
+    colors: buttonColors,
+    overrides: {
+      BaseButton: {
+        style: {
+          pointerEvents: 'none',
+          ...(buttonKind === BUTTON_KIND.tertiary ? {
+            marginTop: theme.sizing.scale100,
+            transform: theme.direction === 'rtl' ? `translateX(${theme.sizing.scale500})` : `translateX(-${theme.sizing.scale500})`
+          } : {
+            marginTop: theme.sizing.scale500
+          })
+        }
+      }
+    }
+  }, ButtonProps), buttonLabel)));
+};
+
+export default MessageCard;

package/es/message-card/styled-components.js

@@ -0,0 +1,108 @@
+/*
+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';
+import { IMAGE_LAYOUT, BACKGROUND_COLOR_TYPE } from './constants';
+export const StyledRoot = styled('button', ({
+  $theme,
+  $backgroundColor,
+  $backgroundColorType,
+  $imageLayout = IMAGE_LAYOUT.top
+}) => {
+  const lightBackgroundStyle = {
+    color: $theme.colors.contentOnColorInverse,
+    borderStyle: 'solid',
+    borderWidth: $theme.sizing.scale0,
+    borderColor: $theme.colors.borderOpaque
+  };
+  const darkBackgroundStyle = {
+    color: $theme.colors.contentOnColor,
+    border: 'none'
+  };
+  return {
+    alignItems: 'stretch',
+    backgroundColor: $backgroundColor,
+    borderRadius: $theme.borders.radius400,
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: $imageLayout === IMAGE_LAYOUT.top ? 'column' : 'row',
+    overflow: 'hidden',
+    padding: '0',
+    position: 'relative',
+    textAlign: 'start',
+    width: '100%',
+    boxShadow: `inset 999px 999px 0px ${$theme.colors.backgroundOverlayArt}`,
+    ...($backgroundColorType === BACKGROUND_COLOR_TYPE.light ? lightBackgroundStyle : darkBackgroundStyle),
+    ':focus': {
+      outlineWidth: '3px',
+      outlineStyle: 'solid',
+      outlineColor: $theme.colors.borderAccent,
+      outlineOffset: '-3px'
+    },
+    ':hover:after': {
+      content: '""',
+      width: '100%',
+      height: '100%',
+      zIndex: '1',
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      backgroundColor: $backgroundColorType === BACKGROUND_COLOR_TYPE.light ? 'rgba(0, 0, 0, 0.04)' : 'rgba(255, 255, 255, 0.10)'
+    },
+    ':active:after': {
+      content: '""',
+      width: '100%',
+      height: '100%',
+      zIndex: '1',
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      backgroundColor: $backgroundColorType === BACKGROUND_COLOR_TYPE.light ? 'rgba(0, 0, 0, 0.08)' : 'rgba(255, 255, 255, 0.20)'
+    }
+  };
+});
+StyledRoot.displayName = "StyledRoot";
+export const StyledImage = styled('div', ({
+  $imageLayout = IMAGE_LAYOUT.top,
+  $backgroundPosition = 'center',
+  $src
+}) => {
+  return {
+    backgroundImage: `url(${$src})`,
+    backgroundSize: 'cover',
+    backgroundPosition: $backgroundPosition,
+    ...($imageLayout === IMAGE_LAYOUT.top ? {
+      height: '132px',
+      width: '100%'
+    } : {
+      width: '112px',
+      order: '1'
+    })
+  };
+});
+StyledImage.displayName = "StyledImage";
+export const StyledContentContainer = styled('div', ({
+  $theme
+}) => ({
+  width: '100%',
+  boxSizing: 'border-box',
+  paddingTop: $theme.sizing.scale600,
+  paddingRight: $theme.sizing.scale300,
+  paddingBottom: $theme.sizing.scale600,
+  paddingLeft: $theme.sizing.scale600
+}));
+StyledContentContainer.displayName = "StyledContentContainer";
+export const StyledHeadingContainer = styled('div', ({
+  $theme
+}) => ({ ...$theme.typography.HeadingXSmall
+}));
+StyledHeadingContainer.displayName = "StyledHeadingContainer";
+export const StyledParagraphContainer = styled('div', ({
+  $theme
+}) => ({ ...$theme.typography.ParagraphSmall,
+  marginTop: $theme.sizing.scale100
+}));
+StyledParagraphContainer.displayName = "StyledParagraphContainer";

package/es/message-card/types.js

@@ -0,0 +1 @@
+export {};

package/es/message-card/utils.js

@@ -0,0 +1,27 @@
+/*
+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 { colors } from '../tokens';
+import { BACKGROUND_COLOR_TYPE } from './constants';
+const LIGHT_COLORS = new Set([colors.red50, colors.red100, colors.red200, colors.red300, colors.green50, colors.green100, colors.green200, colors.green300, colors.teal50, colors.teal100, colors.teal200, colors.teal300, colors.blue50, colors.blue100, colors.blue200, colors.blue300, colors.cobalt50, colors.cobalt100, colors.cobalt200, colors.purple50, colors.purple100, colors.purple200, colors.purple300, colors.magenta50, colors.magenta100, colors.magenta200, colors.magenta300, colors.brown50, colors.brown100, colors.brown200, colors.brown300, colors.orange50, colors.orange100, colors.orange200, colors.orange300, colors.orange400, colors.lime50, colors.lime100, colors.lime200, colors.lime300, colors.lime400, colors.platinum50, colors.platinum100, colors.platinum200, colors.platinum300, colors.platinum400, colors.yellow50, colors.yellow100, colors.yellow200, colors.yellow300, colors.yellow400, colors.yellow500, colors.white, colors.gray50, colors.gray100, colors.gray200, colors.gray300, colors.gray400]);
+const DARK_COLORS = new Set([colors.red400, colors.red500, colors.red600, colors.red700, colors.green400, colors.green500, colors.green600, colors.green700, colors.teal400, colors.teal500, colors.teal600, colors.teal700, colors.blue400, colors.blue500, colors.blue600, colors.blue700, colors.cobalt300, colors.cobalt400, colors.cobalt500, colors.cobalt600, colors.cobalt700, colors.purple400, colors.purple500, colors.purple600, colors.purple700, colors.magenta400, colors.magenta500, colors.magenta600, colors.magenta700, colors.brown400, colors.brown500, colors.brown600, colors.brown700, colors.orange500, colors.orange600, colors.orange700, colors.lime500, colors.lime600, colors.lime700, colors.platinum500, colors.platinum600, colors.platinum700, colors.platinum800, colors.yellow600, colors.yellow700, colors.gray500, colors.gray600, colors.gray700, colors.gray800, colors.gray900, colors.black]);
+const POOR_CONTRAST_COLORS = new Set([colors.red300, colors.gray500, colors.yellow600]);
+export function getBackgroundColorType(backgroundColor) {
+  if (process.env.NODE_ENV !== "production" && POOR_CONTRAST_COLORS.has(backgroundColor)) {
+    console.warn(`The provided value for backgroundColor, ${backgroundColor}, is not supported because \
+        it does not pass accessibility contrast tests for either white or black text.`);
+  }
+
+  if (LIGHT_COLORS.has(backgroundColor)) {
+    return BACKGROUND_COLOR_TYPE.light;
+  }
+
+  if (DARK_COLORS.has(backgroundColor)) {
+    return BACKGROUND_COLOR_TYPE.dark;
+  }
+
+  return null;
+}

package/es/timezonepicker/timezone-picker.js

@@ -26,7 +26,7 @@ class TimezonePicker extends React.Component {
     });
 
     _defineProperty(this, "buildTimezones", compareDate => {
-      const timezones = [];
+      let timezones = [];
 
       for (const zoneName of zones) {
         try {
@@ -55,6 +55,10 @@ class TimezonePicker extends React.Component {
           // Ignores timezones that are not available within a user's browser/operating system
           console.error(`failed to format zone name ${zoneName}`);
         }
+      }
+
+      if (this.props.additionalTimezones) {
+        timezones = timezones.concat(this.props.additionalTimezones);
       } // Sorts W -> E, prioritizes america. could be more nuanced based on system tz but simple for now
 
 

package/esm/banner/styled-components.js

@@ -23,7 +23,10 @@ export var StyledRoot = styled('div', function (_ref) {
     gridColumnGap: $theme.sizing.scale600,
     gridTemplateColumns: 'min-content auto min-content',
     gridTemplateRows: 'auto min-content',
-    margin: $theme.sizing.scale600
+    marginTop: $theme.sizing.scale600,
+    marginRight: $theme.sizing.scale600,
+    marginBottom: $theme.sizing.scale600,
+    marginLeft: $theme.sizing.scale600
   };
 });
 StyledRoot.displayName = "StyledRoot";

package/esm/layer/layer.js

@@ -74,6 +74,24 @@ var LayerComponent = /*#__PURE__*/function (_React$Component) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "onKeyDown", function (event) {
+      if (_this.props.onKeyDown) {
+        _this.props.onKeyDown(event);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onKeyUp", function (event) {
+      if (_this.props.onKeyUp) {
+        _this.props.onKeyUp(event);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onKeyPress", function (event) {
+      if (_this.props.onKeyPress) {
+        _this.props.onKeyPress(event);
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "onDocumentClick", function (event) {
       if (_this.props.onDocumentClick) {
         _this.props.onDocumentClick(event);
@@ -87,6 +105,9 @@ var LayerComponent = /*#__PURE__*/function (_React$Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       this.context.addEscapeHandler(this.onEscape);
+      this.context.addKeyDownHandler(this.onKeyDown);
+      this.context.addKeyUpHandler(this.onKeyUp);
+      this.context.addKeyPressHandler(this.onKeyPress);
 
       if (!this.props.isHoverLayer) {
         this.context.addDocClickHandler(this.onDocumentClick);
@@ -145,6 +166,9 @@ var LayerComponent = /*#__PURE__*/function (_React$Component) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this.context.removeEscapeHandler(this.onEscape);
+      this.context.removeKeyDownHandler(this.onKeyDown);
+      this.context.removeKeyUpHandler(this.onKeyUp);
+      this.context.removeKeyPressHandler(this.onKeyPress);
       this.context.removeDocClickHandler(this.onDocumentClick);
 
       if (this.props.onUnmount) {