baseui 0.0.0-next-2992a67 → 0.0.0-next-ecc760f

package/badge/types.d.ts

@@ -1,17 +1,17 @@
 import type * as React from 'react';
 import type { HIERARCHY, SHAPE, COLOR, PLACEMENT, ROLE } from './constants';
 import type { Override } from '../helpers/overrides';
-export declare type Hierarchy = typeof HIERARCHY[keyof typeof HIERARCHY];
-export declare type Shape = typeof SHAPE[keyof typeof SHAPE];
-export declare type Color = typeof COLOR[keyof typeof COLOR];
-export declare type Placement = typeof PLACEMENT[keyof typeof PLACEMENT];
-export declare type Role = typeof ROLE[keyof typeof ROLE];
-export declare type BadgeOverrides = {
+export type Hierarchy = (typeof HIERARCHY)[keyof typeof HIERARCHY];
+export type Shape = (typeof SHAPE)[keyof typeof SHAPE];
+export type Color = (typeof COLOR)[keyof typeof COLOR];
+export type Placement = (typeof PLACEMENT)[keyof typeof PLACEMENT];
+export type Role = (typeof ROLE)[keyof typeof ROLE];
+export type BadgeOverrides = {
     Root?: Override;
     Positioner?: Override;
     Badge?: Override;
 };
-export declare type BadgeProps = {
+export type BadgeProps = {
     content: React.ReactNode;
     hierarchy?: Hierarchy;
     shape?: Shape;
@@ -23,7 +23,7 @@ export declare type BadgeProps = {
     overrides?: BadgeOverrides;
     children?: React.ReactNode;
 };
-export declare type NotificationCircleProps = {
+export type NotificationCircleProps = {
     content: React.ReactNode;
     color?: Color;
     placement?: Placement;
@@ -33,7 +33,7 @@ export declare type NotificationCircleProps = {
     overrides?: BadgeOverrides;
     children?: React.ReactNode;
 };
-export declare type HintDotProps = {
+export type HintDotProps = {
     color?: Color;
     hidden?: boolean;
     horizontalOffset?: string;

package/badge/utils.d.ts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare const getAnchorFromChildren: (children?: React.ReactNode | null) => React.ReactChild | React.ReactFragment | React.ReactPortal;
+export declare const getAnchorFromChildren: (children?: React.ReactNode | null) => string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal;

package/banner/banner.js

@@ -37,6 +37,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+// @ts-ignore
 function low(theme, kind) {
   switch (kind) {
     case _constants.KIND.negative:
@@ -68,7 +69,8 @@ function low(theme, kind) {
         color: theme.colors.contentPrimary
       };
   }
-}
+} // @ts-ignore
+
 
 function high(theme, kind) {
   switch (kind) {
@@ -101,7 +103,8 @@ function high(theme, kind) {
         color: theme.colors.contentOnColor
       };
   }
-}
+} // @ts-ignore
+
 
 function Leading(_ref) {
   var artwork = _ref.artwork;
@@ -118,7 +121,8 @@ function Leading(_ref) {
   return artwork.icon({
     size: size
   });
-}
+} // @ts-ignore
+
 
 function Below(_ref2) {
   var action = _ref2.action,
@@ -149,7 +153,8 @@ function Below(_ref2) {
   }
 
   return null;
-}
+} // @ts-ignore
+
 
 function Trailing(_ref3) {
   var action = _ref3.action,
@@ -264,11 +269,15 @@ function Banner(_ref4) {
       Message = _getOverrides18[0],
       messageProps = _getOverrides18[1];
 
+  var ariaLabel = rootProps.hasOwnProperty('aria-label') ? rootProps['aria-label'] : 'this is an announcement banner';
   return /*#__PURE__*/React.createElement(Root, _extends({
     $backgroundColor: styles.backgroundColor,
     $color: styles.color,
     $nested: nested
-  }, rootProps), /*#__PURE__*/React.createElement(LeadingContent, _extends({
+  }, rootProps, {
+    role: "complementary",
+    "aria-label": ariaLabel
+  }), /*#__PURE__*/React.createElement(LeadingContent, _extends({
     $includesArtwork: Boolean(artwork)
   }, leadingContentProps), /*#__PURE__*/React.createElement(Leading, {
     artwork: artwork

package/banner/banner.js.flow

@@ -210,6 +210,9 @@ export function Banner({
   );
   const [Title, titleProps] = getOverrides(overrides.Title, StyledTitle);
   const [Message, messageProps] = getOverrides(overrides.Message, StyledMessage);
+  const ariaLabel = rootProps.hasOwnProperty('aria-label')
+    ? rootProps['aria-label']
+    : 'this is an announcement banner';
 
   return (
     <Root
@@ -217,6 +220,8 @@ export function Banner({
       $color={styles.color}
       $nested={nested}
       {...rootProps}
+      role="complementary"
+      aria-label={ariaLabel}
     >
       <LeadingContent $includesArtwork={Boolean(artwork)} {...leadingContentProps}>
         <Leading artwork={artwork} />

package/banner/index.d.ts

@@ -4,8 +4,8 @@ export * from './constants';
 export * from './styled-components';
 export * from './types';
 /** @deprecated use ActionContent instead. To be removed in future versions.*/
-export declare type ActionContentT = ActionContent;
+export type ActionContentT = ActionContent;
 /** @deprecated use ArtworkContent instead. To be removed in future versions.*/
-export declare type ArtworkContentT = ArtworkContent;
+export type ArtworkContentT = ArtworkContent;
 /** @deprecated use BannerProps instead. To be removed in future versions.*/
-export declare type PropsT = BannerProps;
+export type PropsT = BannerProps;

package/banner/types.d.ts

@@ -1,11 +1,11 @@
 import type * as React from 'react';
 import type { Override } from '../helpers/overrides';
 import type { ACTION_POSITION, ARTWORK_TYPE, HIERARCHY, KIND } from './constants';
-export declare type ActionPosition = typeof ACTION_POSITION[keyof typeof ACTION_POSITION];
-export declare type ArtworkType = typeof ARTWORK_TYPE[keyof typeof ARTWORK_TYPE];
-export declare type Hierarchy = typeof HIERARCHY[keyof typeof HIERARCHY];
-export declare type Kind = typeof KIND[keyof typeof KIND];
-export declare type ActionContent = {
+export type ActionPosition = (typeof ACTION_POSITION)[keyof typeof ACTION_POSITION];
+export type ArtworkType = (typeof ARTWORK_TYPE)[keyof typeof ARTWORK_TYPE];
+export type Hierarchy = (typeof HIERARCHY)[keyof typeof HIERARCHY];
+export type Kind = (typeof KIND)[keyof typeof KIND];
+export type ActionContent = {
     label: string;
     icon?: (a: {
         size: string;
@@ -13,13 +13,14 @@ export declare type ActionContent = {
     onClick: (a: React.SyntheticEvent<HTMLButtonElement>) => unknown;
     position?: ActionPosition;
 };
-export declare type ArtworkContent = {
-    icon: (a: {
-        size: string;
-    }) => React.ReactNode;
+export type ArtworkIcon = (a: {
+    size: string;
+}) => React.ReactNode;
+export type ArtworkContent = {
+    icon: ArtworkIcon;
     type?: ArtworkType;
 };
-export declare type BannerOverrides = {
+export type BannerOverrides = {
     BelowContent?: Override;
     LeadingContent?: Override;
     Message?: Override;
@@ -30,7 +31,7 @@ export declare type BannerOverrides = {
     TrailingButtonContainer?: Override;
     TrailingIconButton?: Override;
 };
-export declare type BannerProps = {
+export type BannerProps = {
     action?: ActionContent;
     artwork?: ArtworkContent;
     children: React.ReactNode;

package/block/styled-components.js

@@ -16,6 +16,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // styletron will throw when value is undefined. if so, replace with null
+// @ts-ignore
 function constrainToNull(value) {
   if (value === undefined) {
     return null;
@@ -28,6 +29,7 @@ function build(breakpoints) {
   var styles = {};
   var mediaQueries = (0, _responsiveHelpers.getMediaQueries)(breakpoints);
   return {
+    // @ts-ignore
     apply: function apply(_ref) {
       var property = _ref.property,
           _ref$transform = _ref.transform,
@@ -44,19 +46,23 @@ function build(breakpoints) {
         value.forEach(function (v, index) {
           // Do not create a media query for the smallest breakpoint.
           if (index === 0) {
+            // @ts-ignore
             styles[property] = constrainToNull(transform(v));
             return;
           }
 
-          var mediaQuery = mediaQueries[index - 1];
+          var mediaQuery = mediaQueries[index - 1]; // @ts-ignore
 
           if (!styles[mediaQuery]) {
+            // @ts-ignore
             styles[mediaQuery] = {};
-          }
+          } // @ts-ignore
+
 
           styles[mediaQuery][property] = constrainToNull(transform(v));
         });
       } else {
+        // @ts-ignore
         styles[property] = constrainToNull(transform(value));
       }
     },
@@ -64,7 +70,8 @@ function build(breakpoints) {
       return styles;
     }
   };
-}
+} // @ts-ignore
+
 
 function getFontValue(obj, key) {
   if (!obj) return;
@@ -80,7 +87,8 @@ var StyledBlock = (0, _styles.styled)('div', function (props) {
 
   var get = function get(obj, key) {
     return obj[key];
-  };
+  }; // @ts-ignore
+
 
   var getScale = function getScale(size) {
     return sizing[size] || size;
@@ -90,6 +98,7 @@ var StyledBlock = (0, _styles.styled)('div', function (props) {
   styles.apply({
     property: 'color',
     value: get(props, '$color'),
+    // @ts-ignore
     transform: function transform(color) {
       return colors[color] || color;
     }
@@ -105,6 +114,7 @@ var StyledBlock = (0, _styles.styled)('div', function (props) {
   styles.apply({
     property: 'backgroundColor',
     value: get(props, '$backgroundColor'),
+    // @ts-ignore
     transform: function transform(backgroundColor) {
       return colors[backgroundColor] || backgroundColor;
     }
@@ -132,6 +142,7 @@ var StyledBlock = (0, _styles.styled)('div', function (props) {
   styles.apply({
     property: 'fontFamily',
     value: get(props, '$font'),
+    // @ts-ignore
     transform: function transform(font) {
       return getFontValue(typography[font], 'fontFamily');
     }
@@ -139,6 +150,7 @@ var StyledBlock = (0, _styles.styled)('div', function (props) {
   styles.apply({
     property: 'fontWeight',
     value: get(props, '$font'),
+    // @ts-ignore
     transform: function transform(font) {
       return getFontValue(typography[font], 'fontWeight');
     }
@@ -146,6 +158,7 @@ var StyledBlock = (0, _styles.styled)('div', function (props) {
   styles.apply({
     property: 'fontSize',
     value: get(props, '$font'),
+    // @ts-ignore
     transform: function transform(font) {
       return getFontValue(typography[font], 'fontSize');
     }
@@ -153,6 +166,7 @@ var StyledBlock = (0, _styles.styled)('div', function (props) {
   styles.apply({
     property: 'lineHeight',
     value: get(props, '$font'),
+    // @ts-ignore
     transform: function transform(font) {
       return getFontValue(typography[font], 'lineHeight');
     }
@@ -305,6 +319,7 @@ var StyledBlock = (0, _styles.styled)('div', function (props) {
   styles.apply({
     property: 'overflowX',
     value: get(props, '$overflow'),
+    // @ts-ignore
     transform: function transform(overflow) {
       if (overflow === 'scrollX') {
         return 'scroll';
@@ -316,6 +331,7 @@ var StyledBlock = (0, _styles.styled)('div', function (props) {
   styles.apply({
     property: 'overflowY',
     value: get(props, '$overflow'),
+    // @ts-ignore
     transform: function transform(overflow) {
       if (overflow === 'scrollY') {
         return 'scroll';
@@ -327,6 +343,7 @@ var StyledBlock = (0, _styles.styled)('div', function (props) {
   styles.apply({
     property: 'overflow',
     value: get(props, '$overflow'),
+    // @ts-ignore
     transform: function transform(overflow) {
       if (overflow !== 'scrollX' && overflow !== 'scrollY') {
         return overflow;

package/block/types.d.ts

@@ -1,25 +1,25 @@
 import type * as React from 'react';
 import type { StyleObject } from 'styletron-standard';
 import type { Override } from '../helpers/overrides';
-export declare type BlockOverrides = {
+export type BlockOverrides = {
     Block?: Override;
 };
-export declare type Responsive<T> = T | Array<T>;
-declare type AlignContent = 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'normal' | 'baseline' | 'first baseline' | 'last baseline' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'safe center' | 'unsafe center' | 'inherit' | 'initial' | 'unset';
-declare type AlignItems = 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center' | 'inherit' | 'initial' | 'unset';
-declare type AlignSelf = 'auto' | 'normal' | 'center' | 'start' | 'end' | 'self-start' | 'self-end' | 'flex-start' | 'flex-end' | 'baseline' | 'first baseline' | 'last baseline' | 'stretch' | 'safe center' | 'unsafe center' | 'inherit' | 'initial' | 'unset';
-declare type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse' | 'inherit' | 'initial' | 'unset';
-declare type Flex = number | string;
-declare type Display = 'block' | 'inline' | 'run-in' | 'flow' | 'flow-root' | 'table' | 'flex' | 'grid' | 'ruby' | 'block flow' | 'inline table' | 'flex run-in' | 'list-item' | 'list-item block' | 'list-item inline' | 'list-item flow' | 'list-item flow-root' | 'list-item block flow' | 'list-item block flow-root' | 'flow list-item block' | 'table-row-group' | 'table-header-group' | 'table-footer-group' | 'table-row' | 'table-cell' | 'table-column-group' | 'table-column' | 'table-caption' | 'ruby-base' | 'ruby-text' | 'ruby-base-container' | 'ruby-text-container' | 'contents' | 'none' | 'inline-block' | 'inline-table' | 'inline-flex' | 'inline-grid' | 'inherit' | 'initial' | 'unset';
-declare type GridAutoFlow = 'row' | 'column' | 'dense' | 'row dense' | 'column dense' | 'inherit' | 'initial' | 'unset';
-declare type JustifyContent = 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'left' | 'right' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'safe center' | 'unsafe center' | 'inherit' | 'initial' | 'unset';
-declare type JustifyItems = 'auto' | 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'left' | 'right' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center' | 'legacy right' | 'legacy left' | 'legacy center' | 'inherit' | 'initial' | 'unset';
-declare type JustifySelf = 'auto' | 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'left' | 'right' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center' | 'inherit' | 'initial' | 'unset';
-declare type Position = 'static' | 'absolute' | 'relative' | 'fixed' | 'sticky';
-declare type Overflow = 'visible' | 'hidden' | 'scroll' | 'scrollX' | 'scrollY' | 'auto' | 'inherit' | 'initial' | 'unset';
-export declare type Scale = 0 | string;
-export declare type WhiteSpace = 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'break-spaces' | 'inherit' | 'initial' | 'unset';
-export declare type BlockProps<T extends React.ElementType = React.ElementType> = {
+export type Responsive<T> = T | Array<T>;
+type AlignContent = 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'normal' | 'baseline' | 'first baseline' | 'last baseline' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'safe center' | 'unsafe center' | 'inherit' | 'initial' | 'unset';
+type AlignItems = 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center' | 'inherit' | 'initial' | 'unset';
+type AlignSelf = 'auto' | 'normal' | 'center' | 'start' | 'end' | 'self-start' | 'self-end' | 'flex-start' | 'flex-end' | 'baseline' | 'first baseline' | 'last baseline' | 'stretch' | 'safe center' | 'unsafe center' | 'inherit' | 'initial' | 'unset';
+type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse' | 'inherit' | 'initial' | 'unset';
+type Flex = number | string;
+type Display = 'block' | 'inline' | 'run-in' | 'flow' | 'flow-root' | 'table' | 'flex' | 'grid' | 'ruby' | 'block flow' | 'inline table' | 'flex run-in' | 'list-item' | 'list-item block' | 'list-item inline' | 'list-item flow' | 'list-item flow-root' | 'list-item block flow' | 'list-item block flow-root' | 'flow list-item block' | 'table-row-group' | 'table-header-group' | 'table-footer-group' | 'table-row' | 'table-cell' | 'table-column-group' | 'table-column' | 'table-caption' | 'ruby-base' | 'ruby-text' | 'ruby-base-container' | 'ruby-text-container' | 'contents' | 'none' | 'inline-block' | 'inline-table' | 'inline-flex' | 'inline-grid' | 'inherit' | 'initial' | 'unset';
+type GridAutoFlow = 'row' | 'column' | 'dense' | 'row dense' | 'column dense' | 'inherit' | 'initial' | 'unset';
+type JustifyContent = 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'left' | 'right' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'safe center' | 'unsafe center' | 'inherit' | 'initial' | 'unset';
+type JustifyItems = 'auto' | 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'left' | 'right' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center' | 'legacy right' | 'legacy left' | 'legacy center' | 'inherit' | 'initial' | 'unset';
+type JustifySelf = 'auto' | 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'left' | 'right' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center' | 'inherit' | 'initial' | 'unset';
+type Position = 'static' | 'absolute' | 'relative' | 'fixed' | 'sticky';
+type Overflow = 'visible' | 'hidden' | 'scroll' | 'scrollX' | 'scrollY' | 'auto' | 'inherit' | 'initial' | 'unset';
+export type Scale = 0 | string;
+export type WhiteSpace = 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'break-spaces' | 'inherit' | 'initial' | 'unset';
+export type BlockProps<T extends React.ElementType = React.ElementType> = {
     children?: React.ReactNode;
     /** Modifies the base element used to render the block. */
     as?: T;
@@ -132,7 +132,7 @@ export declare type BlockProps<T extends React.ElementType = React.ElementType>
     /** available values: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space */
     whiteSpace?: Responsive<WhiteSpace>;
 };
-export declare type StyledBlockProps = {
+export type StyledBlockProps = {
     $color?: Responsive<string>;
     $backgroundAttachment?: Responsive<string>;
     $backgroundClip?: Responsive<string>;
@@ -199,18 +199,18 @@ export declare type StyledBlockProps = {
     $textOverflow?: Responsive<string>;
     $whiteSpace?: Responsive<WhiteSpace>;
 };
-declare type BaseProps<P extends {}> = P & {
+type BaseProps<P extends {}> = P & {
     $style?: StyleObject | ((props: P) => StyleObject);
     className?: string;
 };
-declare type AddStyletronRef<P extends {
+type AddStyletronRef<P extends {
     ref: any;
 }> = P extends {
     ref: infer R;
 } ? P & {
     $ref?: R;
 } : P;
-declare type OverrideProps<D extends React.ElementType, P extends {}> = BaseProps<P> & Omit<AddStyletronRef<React.ComponentProps<D>>, keyof BaseProps<P>>;
+type OverrideProps<D extends React.ElementType, P extends {}> = BaseProps<P> & Omit<AddStyletronRef<React.ComponentProps<D>>, keyof BaseProps<P>>;
 export interface BlockComponentType<D extends React.ElementType> {
     <C extends React.ElementType = D>(props: OverrideProps<C, BlockProps<C>>): JSX.Element;
     displayName?: string;

package/bottom-navigation/bottom-navigation.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { BottomNavigationProps } from './types';
+declare const BottomNavigation: ({ activeKey, onChange, children, overrides, }: BottomNavigationProps) => JSX.Element;
+export default BottomNavigation;

package/bottom-navigation/bottom-navigation.js

@@ -0,0 +1,171 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _selector = require("./selector");
+
+var _panel = require("./panel");
+
+var _styledComponents = require("./styled-components");
+
+var _overrides = require("../helpers/overrides");
+
+var _list = require("../list");
+
+var _mobileHeader = require("../mobile-header");
+
+var _icon = require("../icon");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 ? 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); }
+
+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) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_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; }
+
+var MAX_SELECTORS = 5;
+
+var BottomNavigation = function BottomNavigation(_ref) {
+  var _ref$activeKey = _ref.activeKey,
+      activeKey = _ref$activeKey === void 0 ? '0' : _ref$activeKey,
+      onChange = _ref.onChange,
+      children = _ref.children,
+      _ref$overrides = _ref.overrides,
+      overrides = _ref$overrides === void 0 ? {} : _ref$overrides;
+
+  var _getOverrides = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.StyledRoot),
+      _getOverrides2 = _slicedToArray(_getOverrides, 2),
+      Root = _getOverrides2[0],
+      RootProps = _getOverrides2[1];
+
+  var _getOverrides3 = (0, _overrides.getOverrides)(overrides.SelectorList, _styledComponents.StyledSelectorList),
+      _getOverrides4 = _slicedToArray(_getOverrides3, 2),
+      SelectorList = _getOverrides4[0],
+      SelectorListProps = _getOverrides4[1];
+
+  var _getOverrides5 = (0, _overrides.getOverrides)(overrides.OverflowPanel, _styledComponents.StyledOverflowPanel),
+      _getOverrides6 = _slicedToArray(_getOverrides5, 2),
+      OverflowPanel = _getOverrides6[0],
+      OverflowPanelProps = _getOverrides6[1];
+
+  var _getOverrides7 = (0, _overrides.getOverrides)(overrides.OverflowPanelList, _styledComponents.StyledOverflowPanelList),
+      _getOverrides8 = _slicedToArray(_getOverrides7, 2),
+      OverflowPanelList = _getOverrides8[0],
+      OverflowPanelListProps = _getOverrides8[1];
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      displayOverflow = _React$useState2[0],
+      setDisplayOverflow = _React$useState2[1];
+
+  var NavItemPanelRefs = React.useRef([]);
+
+  function scrollToTop(idx) {
+    NavItemPanelRefs.current[idx].scrollTo({
+      top: 0,
+      left: 0,
+      behavior: 'smooth'
+    });
+  }
+
+  function handleNavItemChange(activeKey) {
+    if (displayOverflow) {
+      setDisplayOverflow(false);
+    }
+
+    onChange({
+      activeKey: activeKey
+    });
+  }
+
+  var renderSelectors = function renderSelectors(navItems) {
+    return navItems.map(function (navItem, idx) {
+      var isActive = activeKey === idx && !displayOverflow;
+      return /*#__PURE__*/React.createElement(_selector.Selector, {
+        title: navItem.props.title,
+        icon: navItem.props.icon,
+        isActive: isActive,
+        onChange: function onChange() {
+          isActive ? scrollToTop(idx) : handleNavItemChange(idx);
+        },
+        overrides: navItem.props.overrides,
+        key: idx
+      });
+    });
+  };
+
+  var OverflowSelector = function OverflowSelector() {
+    return /*#__PURE__*/React.createElement(_selector.Selector, {
+      title: "More",
+      icon: _icon.Overflow,
+      onChange: function onChange() {
+        return setDisplayOverflow(true);
+      } // @ts-expect-error todo(ts-migration) TS2365 Operator '>' cannot be applied to types 'Key' and 'number'.
+      ,
+      isActive: displayOverflow || activeKey > 4,
+      overrides: {
+        Title: overrides.OverflowTitle,
+        Selector: overrides.OverflowSelector
+      },
+      key: 'more'
+    });
+  };
+
+  var navItems = React.Children.toArray(children);
+  return /*#__PURE__*/React.createElement(Root, RootProps, navItems.map(function (navItem, idx) {
+    if (!navItem) return;
+    var isActive = activeKey === idx && !displayOverflow;
+    return /*#__PURE__*/React.createElement(_panel.Panel, {
+      isActive: isActive,
+      ref: function ref(element) {
+        return NavItemPanelRefs.current.push(element);
+      },
+      overrides: navItem.props.overrides,
+      key: idx,
+      "aria-labelledby": "tabs-".concat(navItem.props.title, "-tabpanel-").concat(idx)
+    }, navItem.props.children);
+  }), displayOverflow && /*#__PURE__*/React.createElement(OverflowPanel, OverflowPanelProps, /*#__PURE__*/React.createElement(_mobileHeader.MobileHeader, {
+    title: "More",
+    expanded: true
+  }), /*#__PURE__*/React.createElement(OverflowPanelList, OverflowPanelListProps, navItems.slice(MAX_SELECTORS).map(function (navItem, overflowIdx) {
+    var _navItem$props = navItem.props,
+        Icon = _navItem$props.icon,
+        title = _navItem$props.title;
+    var idx = overflowIdx + MAX_SELECTORS;
+    return /*#__PURE__*/React.createElement(_list.ListItem, {
+      artwork: function artwork(props) {
+        return /*#__PURE__*/React.createElement(Icon, props);
+      },
+      endEnhancer: function endEnhancer() {
+        return /*#__PURE__*/React.createElement(_icon.ChevronRight, null);
+      },
+      onClick: function onClick() {
+        activeKey === idx && !displayOverflow ? scrollToTop(idx) : handleNavItemChange(idx);
+      },
+      key: overflowIdx
+    }, /*#__PURE__*/React.createElement(_list.ListItemLabel, null, title));
+  }))), /*#__PURE__*/React.createElement(SelectorList, _extends({
+    role: "tablist"
+  }, SelectorListProps), navItems.length > 5 ? /*#__PURE__*/React.createElement(React.Fragment, null, renderSelectors(navItems.slice(0, 4)), /*#__PURE__*/React.createElement(OverflowSelector, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, renderSelectors(navItems))));
+};
+
+var _default = BottomNavigation;
+exports.default = _default;

package/bottom-navigation/index.d.ts

@@ -0,0 +1,4 @@
+export { default as BottomNavigation } from './bottom-navigation';
+export { default as NavItem } from './nav-item';
+export * from './styled-components';
+export * from './types';

package/bottom-navigation/index.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  BottomNavigation: true,
+  NavItem: true
+};
+Object.defineProperty(exports, "BottomNavigation", {
+  enumerable: true,
+  get: function get() {
+    return _bottomNavigation.default;
+  }
+});
+Object.defineProperty(exports, "NavItem", {
+  enumerable: true,
+  get: function get() {
+    return _navItem.default;
+  }
+});
+
+var _bottomNavigation = _interopRequireDefault(require("./bottom-navigation"));
+
+var _navItem = _interopRequireDefault(require("./nav-item"));
+
+var _styledComponents = require("./styled-components");
+
+Object.keys(_styledComponents).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _styledComponents[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _styledComponents[key];
+    }
+  });
+});
+
+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 get() {
+      return _types[key];
+    }
+  });
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }