baseui 12.1.3 → 13.0.0

package/bottom-navigation/bottom-navigation.js

@@ -0,0 +1,170 @@
+"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);
+      },
+      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 - 1).map(function (navItem, overflowIdx) {
+    var _navItem$props = navItem.props,
+        Icon = _navItem$props.icon,
+        title = _navItem$props.title;
+    var idx = overflowIdx + MAX_SELECTORS - 1;
+    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 }; }

package/bottom-navigation/index.js.flow

@@ -0,0 +1,72 @@
+/*
+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 type { OverrideT } from '../helpers/overrides.js';
+import { type StyletronComponent } from 'styletron-react';
+
+export type NavItemOverridesT = {
+  Title?: OverrideT,
+  Selector?: OverrideT,
+  Panel?: OverrideT,
+};
+
+export type BottomNavigationOverridesT = {
+  Root?: OverrideT,
+  SelectorList?: OverrideT,
+  OverflowPanel?: OverrideT,
+  OverflowPanelList?: OverrideT,
+  OverflowTitle?: OverrideT,
+  OverflowSelector?: OverrideT,
+};
+
+export type IconT = React.AbstractComponent<{| size: number |}>;
+
+export type NavItemPropsT = {
+  children?: React.Node,
+  title: string,
+  icon?: IconT,
+  overrides?: NavItemOverridesT,
+};
+
+export type OnChangeT = (params: { activeKey: number }) => void;
+
+export type BottomNavigationPropsT = {
+  children?: React.Node,
+  activeKey?: number,
+  onChange?: OnChangeT,
+  overrides?: BottomNavigationOverridesT,
+};
+
+export type SelectorPropsT = {
+  title: string,
+  icon: IconT,
+  isActive: boolean,
+  onChange: OnChangeT,
+  overrides: NavItemOverridesT,
+};
+
+export type PanelPropsT = {
+  isActive: boolean,
+  overrides: NavItemOverridesT,
+  children: React.Node,
+};
+
+declare export var StyledRoot: StyletronComponent<'div', {}>;
+declare export var StyledTitle: StyletronComponent<'div', { $isActive: boolean }>;
+declare export var StyledSelectorList: StyletronComponent<'div', {}>;
+declare export var StyledSelector: StyletronComponent<'button', {}>;
+declare export var StyledPanel: StyletronComponent<'div', {}>;
+declare export var StyledOverflowPanel: StyletronComponent<'div', {}>;
+declare export var StyledOverflowPanelList: StyletronComponent<'div', {}>;
+
+declare export var NavItem: React.ComponentType<NavItemPropsT>;
+declare export var BottomNavigation: React.ComponentType<BottomNavigationPropsT>;
+
+declare var __DEV__: boolean;
+declare var __NODE__: boolean;
+declare var __BROWSER__: boolean;

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

@@ -0,0 +1,3 @@
+import type { NavItemProps } from './types';
+declare function NavItem(props: NavItemProps): any;
+export default NavItem;

package/bottom-navigation/nav-item.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function NavItem(props) {
+  return null;
+}
+
+var _default = NavItem;
+exports.default = _default;

package/bottom-navigation/package.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": false,
+  "module": "../esm/bottom-navigation/index.js"
+}

package/bottom-navigation/panel.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { PanelProps } from './types';
+export declare const Panel: React.ForwardRefExoticComponent<PanelProps & React.RefAttributes<unknown>>;

package/bottom-navigation/panel.js

@@ -0,0 +1,53 @@
+"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.Panel = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = require("./styled-components");
+
+var _overrides = require("../helpers/overrides");
+
+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 Panel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var isActive = _ref.isActive,
+      _ref$overrides = _ref.overrides,
+      overrides = _ref$overrides === void 0 ? {} : _ref$overrides,
+      children = _ref.children;
+
+  var _getOverrides = (0, _overrides.getOverrides)(overrides.Panel, _styledComponents.StyledPanel),
+      _getOverrides2 = _slicedToArray(_getOverrides, 2),
+      Panel = _getOverrides2[0],
+      PanelProps = _getOverrides2[1];
+
+  return /*#__PURE__*/React.createElement(Panel, _extends({
+    ref: ref,
+    tabIndex: isActive ? '0' : '-1',
+    role: "tabpanel",
+    hidden: !isActive
+  }, PanelProps), children);
+});
+exports.Panel = Panel;
+Panel.displayName = 'Panel';

package/bottom-navigation/selector.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { SelectorProps } from './types';
+export declare const Selector: ({ title, icon, isActive, onChange, overrides }: SelectorProps) => JSX.Element;

package/bottom-navigation/selector.js

@@ -0,0 +1,71 @@
+"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.Selector = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = require("./styled-components");
+
+var _index = require("../styles/index");
+
+var _overrides = require("../helpers/overrides");
+
+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 Selector = function Selector(_ref) {
+  var title = _ref.title,
+      icon = _ref.icon,
+      isActive = _ref.isActive,
+      onChange = _ref.onChange,
+      _ref$overrides = _ref.overrides,
+      overrides = _ref$overrides === void 0 ? {} : _ref$overrides;
+
+  var _getOverrides = (0, _overrides.getOverrides)(overrides.Title, _styledComponents.StyledTitle),
+      _getOverrides2 = _slicedToArray(_getOverrides, 2),
+      Title = _getOverrides2[0],
+      TitleProps = _getOverrides2[1];
+
+  var _getOverrides3 = (0, _overrides.getOverrides)(overrides.Selector, _styledComponents.StyledSelector),
+      _getOverrides4 = _slicedToArray(_getOverrides3, 2),
+      Selector = _getOverrides4[0],
+      SelectorProps = _getOverrides4[1];
+
+  var _useStyletron = (0, _index.useStyletron)(),
+      _useStyletron2 = _slicedToArray(_useStyletron, 2),
+      theme = _useStyletron2[1];
+
+  var Icon = icon;
+  return /*#__PURE__*/React.createElement(Selector, _extends({
+    onClick: onChange,
+    role: "tab",
+    "aria-selected": isActive
+  }, SelectorProps), /*#__PURE__*/React.createElement(Icon, {
+    size: 20,
+    color: isActive ? theme.colors.contentPrimary : theme.colors.contentTertiary
+  }), /*#__PURE__*/React.createElement(Title, _extends({
+    $isActive: isActive
+  }, TitleProps), title));
+};
+
+exports.Selector = Selector;

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

@@ -0,0 +1,9 @@
+export declare const StyledRoot: import("styletron-react").StyletronComponent<"div", {}>;
+export declare const StyledSelectorList: import("styletron-react").StyletronComponent<"div", {}>;
+export declare const StyledOverflowPanel: import("styletron-react").StyletronComponent<"div", {}>;
+export declare const StyledOverflowPanelList: import("styletron-react").StyletronComponent<"ul", {}>;
+export declare const StyledTitle: import("styletron-react").StyletronComponent<"div", {
+    $isActive: boolean;
+}>;
+export declare const StyledSelector: import("styletron-react").StyletronComponent<"button", {}>;
+export declare const StyledPanel: import("styletron-react").StyletronComponent<"div", {}>;

package/bottom-navigation/styled-components.js

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledTitle = exports.StyledSelectorList = exports.StyledSelector = exports.StyledRoot = exports.StyledPanel = exports.StyledOverflowPanelList = exports.StyledOverflowPanel = void 0;
+
+var _styles = require("../styles");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var SELECTOR_LIST_HEIGHT = '64px';
+var StyledRoot = (0, _styles.styled)('div', {
+  height: '100%',
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column'
+});
+exports.StyledRoot = StyledRoot;
+StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
+var StyledSelectorList = (0, _styles.styled)('div', function (_ref) {
+  var $theme = _ref.$theme;
+  return {
+    container: 'nav-item-list / inline-size',
+    boxSizing: 'border-box',
+    display: 'grid',
+    gridAutoFlow: 'column',
+    gridAutoColumns: '1fr',
+    gap: $theme.sizing.scale300,
+    width: '100%',
+    height: SELECTOR_LIST_HEIGHT,
+    paddingTop: $theme.sizing.scale500,
+    paddingBottom: $theme.sizing.scale500,
+    paddingLeft: $theme.sizing.scale300,
+    paddingRight: $theme.sizing.scale300,
+    borderTop: "".concat($theme.sizing.scale0, " solid ").concat($theme.colors.borderOpaque),
+    backgroundColor: $theme.colors.backgroundPrimary
+  };
+});
+exports.StyledSelectorList = StyledSelectorList;
+StyledSelectorList.displayName = "StyledSelectorList";
+StyledSelectorList.displayName = 'StyledSelectorList';
+var StyledOverflowPanel = (0, _styles.styled)('div', {
+  height: "calc(100% - ".concat(SELECTOR_LIST_HEIGHT, ")"),
+  overflow: 'auto'
+});
+exports.StyledOverflowPanel = StyledOverflowPanel;
+StyledOverflowPanel.displayName = "StyledOverflowPanel";
+StyledOverflowPanel.displayName = 'StyledOverflowPanel';
+var StyledOverflowPanelList = (0, _styles.styled)('ul', {
+  paddingLeft: 0,
+  paddingRight: 0
+});
+exports.StyledOverflowPanelList = StyledOverflowPanelList;
+StyledOverflowPanelList.displayName = "StyledOverflowPanelList";
+StyledOverflowPanelList.displayName = 'StyledOverflowPanelList';
+var StyledTitle = (0, _styles.styled)('div', function (_ref2) {
+  var $theme = _ref2.$theme,
+      $isActive = _ref2.$isActive;
+  return _objectSpread(_objectSpread({}, $theme.typography.LabelXSmall), {}, {
+    color: $isActive ? $theme.colors.contentPrimary : $theme.colors.contentTertiary
+  });
+});
+exports.StyledTitle = StyledTitle;
+StyledTitle.displayName = "StyledTitle";
+StyledTitle.displayName = 'StyledTitle';
+var StyledSelector = (0, _styles.styled)('button', function (_ref3) {
+  var $theme = _ref3.$theme;
+  return {
+    '@container nav-item-list (min-width: 600px)': {
+      flexDirection: 'row',
+      gap: $theme.sizing.scale500
+    },
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'column',
+    gap: $theme.sizing.scale0,
+    // button style reset
+    borderRadius: 0,
+    textAlign: 'inherit',
+    background: 'none',
+    boxShadow: 'none',
+    padding: 0,
+    cursor: 'pointer',
+    border: 'none',
+    color: 'inherit',
+    font: 'inherit'
+  };
+});
+exports.StyledSelector = StyledSelector;
+StyledSelector.displayName = "StyledSelector";
+StyledSelector.displayName = 'StyledSelector';
+var StyledPanel = (0, _styles.styled)('div', {
+  height: "calc(100% - ".concat(SELECTOR_LIST_HEIGHT, ")"),
+  overflow: 'auto'
+});
+exports.StyledPanel = StyledPanel;
+StyledPanel.displayName = "StyledPanel";
+StyledPanel.displayName = 'StyledPanel';

package/bottom-navigation/types.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+import type { Override } from '../helpers/overrides';
+export type NavItemOverrides = {
+    Title?: Override;
+    Selector?: Override;
+    Panel?: Override;
+};
+export type BottomNavigationOverrides = {
+    Root?: Override;
+    SelectorList?: Override;
+    OverflowPanel?: Override;
+    OverflowPanelList?: Override;
+    OverflowTitle?: Override;
+    OverflowSelector?: Override;
+};
+export type Icon = React.ComponentType<{
+    size: number;
+} & any>;
+export type NavItemProps = {
+    children?: React.ReactNode;
+    title: string;
+    icon?: Icon;
+    overrides?: NavItemOverrides;
+};
+export type SelectorProps = {
+    title: string;
+    icon: Icon;
+    isActive: boolean;
+    onChange: OnChange;
+    overrides: NavItemOverrides;
+};
+export type PanelProps = {
+    isActive: boolean;
+    overrides: NavItemOverrides;
+    children: React.ReactNode;
+};
+export type OnChange = (params: {
+    activeKey: number;
+}) => void;
+export interface BottomNavigationProps {
+    children?: React.ReactNode;
+    activeKey?: number;
+    onChange?: OnChange;
+    overrides?: BottomNavigationOverrides;
+}

package/bottom-navigation/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/breadcrumbs/breadcrumbs.js

@@ -48,7 +48,8 @@ function Breadcrumbs(props) {
       _props$showTrailingSe = props.showTrailingSeparator,
       showTrailingSeparator = _props$showTrailingSe === void 0 ? false : _props$showTrailingSe;
 
-  var childrenArray = _react.Children.toArray(props.children);
+  var childrenArray = _react.Children.toArray(props.children); // @ts-ignore
+
 
   var childrenWithSeparators = [];
 
@@ -89,7 +90,10 @@ function Breadcrumbs(props) {
     }
   }, baseIconProps && baseIconProps.overrides);
   childrenArray.forEach(function (child, index) {
-    childrenWithSeparators.push( /*#__PURE__*/_react.default.createElement(ListItem, _extends({
+    childrenWithSeparators.push(
+    /*#__PURE__*/
+    // @ts-ignore
+    _react.default.createElement(ListItem, _extends({
       key: "breadcrumb-item-".concat(index),
       $itemIndex: index
     }, baseListItemProps), child, (showTrailingSeparator || index !== childrenArray.length - 1) && /*#__PURE__*/_react.default.createElement(Separator, _extends({}, baseSeparatorProps, {