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

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: React.Key }) => void;
+
+export type BottomNavigationPropsT = {
+  children?: React.Node,
+  activeKey?: React.Key,
+  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,104 @@
+"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%',
+  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: React.Key;
+}) => void;
+export interface BottomNavigationProps {
+    children?: React.ReactNode;
+    activeKey?: React.Key;
+    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, {

package/breadcrumbs/locale.d.ts

@@ -1,4 +1,4 @@
-export declare type BreadcrumbLocale = {
+export type BreadcrumbLocale = {
     ariaLabel: string;
 };
 declare const locale: {

package/breadcrumbs/types.d.ts

@@ -1,13 +1,13 @@
 import type { ReactNode } from 'react';
 import type { Override } from '../helpers/overrides';
-export declare type BreadcrumbsOverrides = {
+export type BreadcrumbsOverrides = {
     Root?: Override;
     Separator?: Override;
     List?: Override;
     ListItem?: Override;
     Icon?: Override;
 };
-export declare type BreadcrumbsProps = {
+export type BreadcrumbsProps = {
     children?: ReactNode;
     overrides?: BreadcrumbsOverrides;
     ariaLabel?: string;

package/button/button-internals.js

@@ -41,6 +41,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+// @ts-ignore
 function RenderEnhancer(props) {
   var Enhancer = props.Enhancer,
       restProps = _objectWithoutProperties(props, _excluded);
@@ -74,6 +75,18 @@ function ButtonInternals(props) {
       endEnhancerProps = _getOverrides4[1];
 
   var sharedProps = (0, _utils.getSharedProps)(props);
+
+  if (props.isLoading) {
+    var hiddenStyle = {
+      opacity: 0,
+      display: 'flex',
+      height: '0px'
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      style: hiddenStyle
+    }, children);
+  }
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, startEnhancer !== null && startEnhancer !== undefined && /*#__PURE__*/React.createElement(StartEnhancer, _extends({}, sharedProps, startEnhancerProps), /*#__PURE__*/React.createElement(RenderEnhancer, {
     Enhancer: startEnhancer
   })), children, endEnhancer !== null && endEnhancer !== undefined && /*#__PURE__*/React.createElement(EndEnhancer, _extends({}, sharedProps, endEnhancerProps), /*#__PURE__*/React.createElement(RenderEnhancer, {

package/button/button.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import type { ButtonProps, SharedStyleProps } from './types';
-interface ButtonComponentType {
+export interface ButtonComponentType {
     <C extends React.ElementType = 'button'>(props: ButtonProps & SharedStyleProps & Omit<React.ComponentProps<C>, keyof ButtonProps | keyof SharedStyleProps> & {
-        $as?: C;
+        $as?: C | React.ComponentType<any> | keyof JSX.IntrinsicElements;
     }): JSX.Element;
     displayName?: string;
 }

package/button/button.js

@@ -173,21 +173,16 @@ var Button = /*#__PURE__*/function (_React$Component) {
         $isFocusVisible: this.state.isFocusVisible
       });
 
+      var ariaLoadingElements = isLoading ? (_ref = {}, _defineProperty(_ref, 'aria-label', typeof this.props.children === 'string' ? "loading ".concat(this.props.children) : 'content is loading'), _defineProperty(_ref, 'aria-busy', 'true'), _defineProperty(_ref, 'aria-live', 'polite'), _ref) : {};
       return /*#__PURE__*/React.createElement(BaseButton, _extends({
         ref: forwardedRef,
         "data-baseweb": "button"
-      }, isLoading ? (_ref = {}, _defineProperty(_ref, 'aria-label', "loading ".concat(typeof this.props.children === 'string' ? this.props.children : '')), _defineProperty(_ref, 'aria-busy', 'true'), _ref) : {}, sharedProps, restProps, baseButtonProps, {
+      }, ariaLoadingElements, sharedProps, restProps, baseButtonProps, {
         // Applies last to override passed in onClick
         onClick: this.internalOnClick,
         onFocus: (0, _focusVisible.forkFocus)(_objectSpread(_objectSpread({}, restProps), baseButtonProps), this.handleFocus),
         onBlur: (0, _focusVisible.forkBlur)(_objectSpread(_objectSpread({}, restProps), baseButtonProps), this.handleBlur)
-      }), isLoading ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-        style: {
-          opacity: 0,
-          display: 'flex',
-          height: '0px'
-        }
-      }, /*#__PURE__*/React.createElement(_buttonInternals.default, this.props)), /*#__PURE__*/React.createElement(LoadingSpinnerContainer, _extends({}, sharedProps, loadingSpinnerContainerProps), /*#__PURE__*/React.createElement(LoadingSpinner, _extends({}, sharedProps, loadingSpinnerProps)))) : /*#__PURE__*/React.createElement(_buttonInternals.default, this.props));
+      }), isLoading ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_buttonInternals.default, this.props), /*#__PURE__*/React.createElement(LoadingSpinnerContainer, _extends({}, sharedProps, loadingSpinnerContainerProps), /*#__PURE__*/React.createElement(LoadingSpinner, _extends({}, sharedProps, loadingSpinnerProps)))) : /*#__PURE__*/React.createElement(_buttonInternals.default, this.props));
     }
   }]);
 

package/button/index.d.ts

@@ -4,4 +4,4 @@ export { KIND, SIZE, SHAPE } from './constants';
 export { BaseButton as StyledBaseButton, StartEnhancer as StyledStartEnhancer, EndEnhancer as StyledEndEnhancer, LoadingSpinner as StyledLoadingSpinner, LoadingSpinnerContainer as StyledLoadingSpinnerContainer, } from './styled-components';
 export * from './types';
 /** @deprecated use CustomColors instead. To be removed in future versions.*/
-export declare type CustomColorsT = CustomColors;
+export type CustomColorsT = CustomColors;

package/button/styled-components.js

@@ -189,7 +189,7 @@ var LoadingSpinner = (0, _styles.styled)('span', function (_ref7) {
 });
 exports.LoadingSpinner = LoadingSpinner;
 LoadingSpinner.displayName = "LoadingSpinner";
-LoadingSpinner.displayName = 'LoadingSpinner';
+LoadingSpinner.displayName = 'LoadingSpinner'; // @ts-ignore
 
 function getLoadingSpinnerColors(_ref8) {
   var $theme = _ref8.$theme,
@@ -229,7 +229,8 @@ function getLoadingSpinnerColors(_ref8) {
         };
       }
   }
-}
+} // @ts-ignore
+
 
 function getBorderRadiiStyles(_ref9) {
   var $theme = _ref9.$theme,
@@ -257,7 +258,8 @@ function getBorderRadiiStyles(_ref9) {
     borderTopLeftRadius: value,
     borderBottomLeftRadius: value
   };
-}
+} // @ts-ignore
+
 
 function getFontStyles(_ref10) {
   var $theme = _ref10.$theme,
@@ -276,7 +278,8 @@ function getFontStyles(_ref10) {
     default:
       return $theme.typography.font350;
   }
-}
+} // @ts-ignore
+
 
 function getDisabledStyles(_ref11) {
   var $theme = _ref11.$theme,
@@ -302,7 +305,8 @@ function getDisabledStyles(_ref11) {
     backgroundColor: $kind === _constants.KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
     color: $theme.colors.buttonDisabledText
   };
-}
+} // @ts-ignore
+
 
 function getPaddingStyles(_ref12) {
   var $theme = _ref12.$theme,
@@ -431,7 +435,8 @@ function getColorStyles(_ref13) {
     default:
       return Object.freeze({});
   }
-}
+} // @ts-ignore
+
 
 function getShapeStyles(_ref14) {
   var $shape = _ref14.$shape,

package/button/types.d.ts

@@ -1,7 +1,7 @@
 import type * as React from 'react';
 import type { KIND, SIZE, SHAPE } from './constants';
 import type { Override } from '../helpers/overrides';
-export declare type ButtonOverrides = {
+export type ButtonOverrides = {
     Root?: Override;
     BaseButton?: Override;
     StartEnhancer?: Override;
@@ -9,11 +9,11 @@ export declare type ButtonOverrides = {
     LoadingSpinnerContainer?: Override;
     LoadingSpinner?: Override;
 };
-export declare type CustomColors = {
+export type CustomColors = {
     backgroundColor: string;
     color: string;
 };
-export declare type ButtonProps = {
+export type ButtonProps = {
     children?: React.ReactNode;
     colors?: CustomColors;
     disabled?: boolean;
@@ -35,7 +35,7 @@ export declare type ButtonProps = {
     startEnhancer?: React.ReactNode | React.ComponentType<any>;
     type?: 'submit' | 'reset' | 'button';
 };
-export declare type SharedStyleProps = {
+export type SharedStyleProps = {
     $colors?: CustomColors;
     $kind?: keyof typeof KIND;
     $isSelected?: boolean;

package/button-dock/button-dock.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { ButtonDockProps } from './types';
+declare const ButtonDock: (props: ButtonDockProps) => JSX.Element;
+export default ButtonDock;