baseui 11.0.2 → 11.1.1

package/banner/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Banner: true
+};
+Object.defineProperty(exports, "Banner", {
+  enumerable: true,
+  get: function get() {
+    return _banner.Banner;
+  }
+});
+
+var _banner = require("./banner.js");
+
+var _constants = require("./constants.js");
+
+Object.keys(_constants).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _constants[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _constants[key];
+    }
+  });
+});
+
+var _styledComponents = require("./styled-components.js");
+
+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];
+    }
+  });
+});

package/banner/index.js.flow

@@ -0,0 +1,16 @@
+/*
+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
+
+export { Banner } from './banner.js';
+export * from './constants.js';
+export * from './styled-components.js';
+export type * from './types.js';
+
+declare var __DEV__: boolean;
+declare var __NODE__: boolean;
+declare var __BROWSER__: boolean;

package/banner/package.json

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

package/banner/styled-components.js

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledTrailingIconButton = exports.StyledTrailingButtonContainer = exports.StyledMessage = exports.StyledTitle = exports.StyledBelowContent = exports.StyledTrailingContent = exports.StyledMessageContent = exports.StyledLeadingContent = exports.StyledRoot = void 0;
+
+var _index = require("../styles/index.js");
+
+var _constants = require("./constants.js");
+
+/*
+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.
+*/
+var StyledRoot = (0, _index.styled)('div', function (_ref) {
+  var $theme = _ref.$theme,
+      $backgroundColor = _ref.$backgroundColor,
+      $color = _ref.$color,
+      $nested = _ref.$nested;
+  var radius = $nested ? $theme.borders.radius300 : $theme.borders.radius400;
+  return {
+    backgroundColor: $backgroundColor,
+    borderStartStartRadius: radius,
+    borderStartEndRadius: radius,
+    borderEndStartRadius: radius,
+    borderEndEndRadius: radius,
+    color: $color,
+    display: 'grid',
+    gridColumnGap: $theme.sizing.scale600,
+    gridTemplateColumns: 'min-content auto min-content',
+    gridTemplateRows: 'auto min-content',
+    margin: $theme.sizing.scale600
+  };
+});
+exports.StyledRoot = StyledRoot;
+StyledRoot.displayName = "StyledRoot";
+var StyledLeadingContent = (0, _index.styled)('div', function (_ref2) {
+  var $theme = _ref2.$theme,
+      $includesArtwork = _ref2.$includesArtwork;
+  return {
+    alignItems: 'center',
+    display: 'flex',
+    paddingInlineStart: $includesArtwork ? $theme.sizing.scale600 : null
+  };
+});
+exports.StyledLeadingContent = StyledLeadingContent;
+StyledLeadingContent.displayName = "StyledLeadingContent";
+var StyledMessageContent = (0, _index.styled)('div', function (_ref3) {
+  var $theme = _ref3.$theme,
+      $actionPosition = _ref3.$actionPosition;
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    paddingBlockStart: $theme.sizing.scale600,
+    paddingBlockEnd: $actionPosition === _constants.ACTION_POSITION.trailing ? $theme.sizing.scale600 : null
+  };
+});
+exports.StyledMessageContent = StyledMessageContent;
+StyledMessageContent.displayName = "StyledMessageContent";
+var StyledTrailingContent = (0, _index.styled)('div', function (_ref4) {
+  var $theme = _ref4.$theme;
+  return {
+    display: 'flex',
+    gridRowEnd: 'span 2',
+    marginInlineStart: 'auto'
+  };
+});
+exports.StyledTrailingContent = StyledTrailingContent;
+StyledTrailingContent.displayName = "StyledTrailingContent";
+var StyledBelowContent = (0, _index.styled)('div', function (_ref5) {
+  var $theme = _ref5.$theme,
+      $actionPosition = _ref5.$actionPosition;
+  return {
+    gridColumnStart: 2,
+    paddingBlockStart: $actionPosition === _constants.ACTION_POSITION.below ? $theme.sizing.scale300 : null,
+    paddingBlockEnd: $actionPosition === _constants.ACTION_POSITION.below ? $theme.sizing.scale600 : null
+  };
+});
+exports.StyledBelowContent = StyledBelowContent;
+StyledBelowContent.displayName = "StyledBelowContent";
+var StyledTitle = (0, _index.styled)('div', function (_ref6) {
+  var $theme = _ref6.$theme;
+  return $theme.typography.LabelMedium;
+});
+exports.StyledTitle = StyledTitle;
+StyledTitle.displayName = "StyledTitle";
+var StyledMessage = (0, _index.styled)('div', function (_ref7) {
+  var $theme = _ref7.$theme;
+  return $theme.typography.ParagraphMedium;
+});
+exports.StyledMessage = StyledMessage;
+StyledMessage.displayName = "StyledMessage";
+var StyledTrailingButtonContainer = (0, _index.styled)('div', function (_ref8) {
+  var $theme = _ref8.$theme;
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    paddingInlineEnd: $theme.sizing.scale600
+  };
+});
+exports.StyledTrailingButtonContainer = StyledTrailingButtonContainer;
+StyledTrailingButtonContainer.displayName = "StyledTrailingButtonContainer";
+var StyledTrailingIconButton = (0, _index.styled)('button', function (_ref9) {
+  var $theme = _ref9.$theme,
+      $nested = _ref9.$nested;
+  var radius = $nested ? $theme.borders.radius300 : $theme.borders.radius400;
+  return {
+    alignItems: 'center',
+    background: 'none',
+    border: 'none',
+    borderStartEndRadius: radius,
+    borderEndEndRadius: radius,
+    color: 'inherit',
+    cursor: 'pointer',
+    display: 'flex',
+    paddingInlineStart: $theme.sizing.scale600,
+    paddingInlineEnd: $theme.sizing.scale600,
+    ':hover': {
+      boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.04)'
+    },
+    ':active': {
+      boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.08)'
+    }
+  };
+});
+exports.StyledTrailingIconButton = StyledTrailingIconButton;
+StyledTrailingIconButton.displayName = "StyledTrailingIconButton";

package/banner/styled-components.js.flow

@@ -0,0 +1,119 @@
+/*
+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 { styled } from '../styles/index.js';
+import { ACTION_POSITION } from './constants.js';
+import type { ActionPositionT } from './types.js';
+
+export const StyledRoot = styled<{ $backgroundColor: string, $color: string, $nested: boolean }>(
+  'div',
+  ({ $theme, $backgroundColor, $color, $nested }) => {
+    const radius = $nested ? $theme.borders.radius300 : $theme.borders.radius400;
+    return {
+      backgroundColor: $backgroundColor,
+      borderStartStartRadius: radius,
+      borderStartEndRadius: radius,
+      borderEndStartRadius: radius,
+      borderEndEndRadius: radius,
+      color: $color,
+      display: 'grid',
+      gridColumnGap: $theme.sizing.scale600,
+      gridTemplateColumns: 'min-content auto min-content',
+      gridTemplateRows: 'auto min-content',
+      margin: $theme.sizing.scale600,
+    };
+  }
+);
+
+export const StyledLeadingContent = styled<{ $includesArtwork: boolean }>(
+  'div',
+  ({ $theme, $includesArtwork }) => {
+    return {
+      alignItems: 'center',
+      display: 'flex',
+      paddingInlineStart: $includesArtwork ? $theme.sizing.scale600 : null,
+    };
+  }
+);
+
+export const StyledMessageContent = styled<{ $actionPosition: ActionPositionT }>(
+  'div',
+  ({ $theme, $actionPosition }) => {
+    return {
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      paddingBlockStart: $theme.sizing.scale600,
+      paddingBlockEnd: $actionPosition === ACTION_POSITION.trailing ? $theme.sizing.scale600 : null,
+    };
+  }
+);
+
+export const StyledTrailingContent = styled<{}>('div', ({ $theme }) => {
+  return {
+    display: 'flex',
+    gridRowEnd: 'span 2',
+    marginInlineStart: 'auto',
+  };
+});
+
+export const StyledBelowContent = styled<{ $actionPosition: ActionPositionT }>(
+  'div',
+  ({ $theme, $actionPosition }) => {
+    return {
+      gridColumnStart: 2,
+      paddingBlockStart: $actionPosition === ACTION_POSITION.below ? $theme.sizing.scale300 : null,
+      paddingBlockEnd: $actionPosition === ACTION_POSITION.below ? $theme.sizing.scale600 : null,
+    };
+  }
+);
+
+export const StyledTitle = styled<{}>('div', ({ $theme }) => {
+  return $theme.typography.LabelMedium;
+});
+
+export const StyledMessage = styled<{}>('div', ({ $theme }) => {
+  return $theme.typography.ParagraphMedium;
+});
+
+export const StyledTrailingButtonContainer = styled<{}>('div', ({ $theme }) => {
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    paddingInlineEnd: $theme.sizing.scale600,
+  };
+});
+
+export const StyledTrailingIconButton = styled<{ $nested: boolean }>(
+  'button',
+  ({ $theme, $nested }) => {
+    const radius = $nested ? $theme.borders.radius300 : $theme.borders.radius400;
+    return {
+      alignItems: 'center',
+      background: 'none',
+      border: 'none',
+      borderStartEndRadius: radius,
+      borderEndEndRadius: radius,
+      color: 'inherit',
+      cursor: 'pointer',
+      display: 'flex',
+      paddingInlineStart: $theme.sizing.scale600,
+      paddingInlineEnd: $theme.sizing.scale600,
+      ':hover': {
+        boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.04)',
+      },
+      ':active': {
+        boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.08)',
+      },
+    };
+  }
+);
+
+declare var __DEV__: boolean;
+declare var __NODE__: boolean;
+declare var __BROWSER__: boolean;

package/banner/types.js

@@ -0,0 +1,11 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+var React = _interopRequireWildcard(require("react"));
+
+var _constants = require("./constants.js");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }

package/banner/types.js.flow

@@ -0,0 +1,66 @@
+/*
+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 { ACTION_POSITION, ARTWORK_TYPE, HIERARCHY, KIND } from './constants.js';
+
+export type ActionPositionT = $Values<typeof ACTION_POSITION>;
+export type ArtworkTypeT = $Values<typeof ARTWORK_TYPE>;
+export type HierarchyT = $Values<typeof HIERARCHY>;
+export type KindT = $Values<typeof KIND>;
+
+export type ActionContentT = {|
+  // Text shown within action button or applied to aria label.
+  label: string,
+  // If provided renders this icon instead of the text label.
+  icon?: ({ size: string }) => React.Node,
+  // Called when action button is activated.
+  onClick: (SyntheticEvent<HTMLButtonElement>) => mixed,
+  // Determines if action button is positioned trailing message or below.
+  position?: ActionPositionT,
+|};
+
+export type ArtworkContentT = {|
+  // Element displayed, usually an icon.
+  icon: ({ size: string }) => React.Node,
+  // Determines artwork size. Icon for graphics with a strong silhouette or badge for more nuance.
+  type?: ArtworkTypeT,
+|};
+
+export type PropsT = {|
+  // Provide a method to "accept", "dismiss", or otherwise interact with the message shown.
+  action?: ActionContentT,
+  // Visually convey the message text.
+  artwork?: ArtworkContentT,
+  // Message to display.
+  children: React.Node,
+  // Determines message priority by rendering in pale or saturated colors.
+  hierarchy?: HierarchyT,
+  // Determines color scheme and conveys message intent.
+  kind?: KindT,
+  overrides?: {|
+    BelowContent?: OverrideT,
+    LeadingContent?: OverrideT,
+    Message?: OverrideT,
+    MessageContent?: OverrideT,
+    Root?: OverrideT,
+    Title?: OverrideT,
+    TrailingContent?: OverrideT,
+    TrailingButtonContainer?: OverrideT,
+    TrailingIconButton?: OverrideT,
+  |},
+  // Used to make the banner visually distinct from its container element.
+  nested?: boolean,
+  // Bold text displayed when message content should be separated to two lines.
+  title?: React.Node,
+|};
+
+declare var __DEV__: boolean;
+declare var __NODE__: boolean;
+declare var __BROWSER__: boolean;

package/block/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {Override} from '../overrides';
-import {$StyleProp} from 'styletron-react';
+import { Override } from '../overrides';
+import { StyleObject } from 'styletron-react';
 
 export type Responsive<T> = T | T[];
 
@@ -216,7 +216,7 @@ export interface BlockProps {
   children?: React.ReactNode;
   className?: String;
   as?: React.ElementType;
-  $style?: $StyleProp<BlockProps>;
+  $style?: StyleObject | ((props: BlockProps) => StyleObject);
   overrides?: BlockOverrides;
   color?: Responsive<string>;
   backgroundAttachment?: Responsive<string>;
@@ -319,4 +319,4 @@ export interface BlockProps {
   bottom?: Responsive<Scale>;
 }
 
-export const Block: React.FC<BlockProps>;
+export declare const Block: React.FC<BlockProps>;

package/breadcrumbs/breadcrumbs.js

@@ -95,7 +95,11 @@ function Breadcrumbs(props) {
     }, baseListItemProps), child, (showTrailingSeparator || index !== childrenArray.length - 1) && /*#__PURE__*/_react.default.createElement(Separator, _extends({}, baseSeparatorProps, {
       key: "separator-".concat(index)
     }), /*#__PURE__*/_react.default.createElement(_themeProvider.ThemeContext.Consumer, null, function (theme) {
-      return theme.direction === 'rtl' ? /*#__PURE__*/_react.default.createElement(Left, baseIconProps) : /*#__PURE__*/_react.default.createElement(Right, baseIconProps);
+      return theme.direction === 'rtl' ? /*#__PURE__*/_react.default.createElement(Left, _extends({
+        size: 16
+      }, baseIconProps)) : /*#__PURE__*/_react.default.createElement(Right, _extends({
+        size: 16
+      }, baseIconProps));
     }))));
   });
   return /*#__PURE__*/_react.default.createElement(_index.LocaleContext.Consumer, null, function (locale) {

package/breadcrumbs/breadcrumbs.js.flow

@@ -43,9 +43,9 @@ export function Breadcrumbs(props: BreadcrumbsPropsT) {
             <ThemeContext.Consumer>
               {(theme) =>
                 theme.direction === 'rtl' ? (
-                  <Left {...baseIconProps} />
+                  <Left size={16} {...baseIconProps} />
                 ) : (
-                  <Right {...baseIconProps} />
+                  <Right size={16} {...baseIconProps} />
                 )
               }
             </ThemeContext.Consumer>

package/breadcrumbs/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
-import {Override} from '../overrides';
+import { StyletronComponent } from 'styletron-react';
+import { Override } from '../overrides';
 
 export interface BreadcrumbsOverrides {
   Root?: Override<any>;
@@ -18,7 +18,7 @@ export interface BreadcrumbsProps {
   showTrailingSeparator?: boolean;
 }
 
-export const Breadcrumbs: React.FC<BreadcrumbsProps>;
+export declare const Breadcrumbs: React.FC<BreadcrumbsProps>;
 
-export const StyledRoot: StyletronComponent<any>;
-export const StyledSeparator: StyletronComponent<any>;
+export declare const StyledRoot: StyletronComponent<any>;
+export declare const StyledSeparator: StyletronComponent<any>;

package/button/button.js

@@ -144,7 +144,8 @@ var Button = /*#__PURE__*/function (_React$Component) {
           endEnhancer = _this$props2.endEnhancer,
           children = _this$props2.children,
           forwardedRef = _this$props2.forwardedRef,
-          restProps = _objectWithoutProperties(_this$props2, ["overrides", "size", "kind", "shape", "isLoading", "isSelected", "startEnhancer", "endEnhancer", "children", "forwardedRef"]); // Get overrides
+          colors = _this$props2.colors,
+          restProps = _objectWithoutProperties(_this$props2, ["overrides", "size", "kind", "shape", "isLoading", "isSelected", "startEnhancer", "endEnhancer", "children", "forwardedRef", "colors"]); // Get overrides
 
 
       var _getOverrides = (0, _overrides.getOverrides)( // adding both (1) BaseButton and (2) Root

package/button/button.js.flow

@@ -60,6 +60,7 @@ class Button extends React.Component<
       endEnhancer,
       children,
       forwardedRef,
+      colors,
       ...restProps
     } = this.props;
     // Get overrides

package/button/index.d.ts

@@ -1,31 +1,27 @@
 import * as React from 'react';
-import {
-  StyledFn,
-  StyletronComponent,
-  StyletronComponentInjectedProps,
-} from 'styletron-react';
-import {Override} from '../overrides';
+import { StyletronComponent } from 'styletron-react';
+import { Override } from '../overrides';
 
-export interface KIND {
+export declare const KIND: {
   primary: 'primary';
   secondary: 'secondary';
   tertiary: 'tertiary';
-}
+};
 
-export interface SIZE {
+export declare const SIZE: {
   compact: 'compact';
   default: 'default';
   large: 'large';
   mini: 'mini';
-}
+};
 
-export interface SHAPE {
+export declare const SHAPE: {
   default: 'default';
   pill: 'pill';
   round: 'round';
   circle: 'circle';
   square: 'square';
-}
+};
 
 export interface ButtonOverrides {
   Root?: Override<any>;
@@ -41,8 +37,8 @@ export interface CustomColorsT {
   color: string;
 }
 
-export interface ButtonProps
-  extends StyletronComponentInjectedProps<ButtonProps> {
+export interface ButtonProps {
+  ref?: React.Ref<HTMLButtonElement>;
   colors?: CustomColorsT;
   href?: string;
   target?: string;
@@ -51,25 +47,19 @@ export interface ButtonProps
   endEnhancer?: React.ReactNode;
   isLoading?: boolean;
   isSelected?: boolean;
-  kind?: KIND[keyof KIND];
+  kind?: typeof KIND[keyof typeof KIND];
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => any;
   overrides?: ButtonOverrides;
-  shape?: SHAPE[keyof SHAPE];
-  size?: SIZE[keyof SIZE];
+  shape?: typeof SHAPE[keyof typeof SHAPE];
+  size?: typeof SIZE[keyof typeof SIZE];
   startEnhancer?: React.ReactNode;
   type?: 'submit' | 'reset' | 'button';
 }
 
-export const StyledBaseButton: StyletronComponent<any>;
-export const StyledStartEnhancer: StyletronComponent<any>;
-export const StyledEndEnhancer: StyletronComponent<any>;
-export const StyledLoadingSpinner: StyletronComponent<any>;
-export const StyledLoadingSpinnerContainer: StyletronComponent<any>;
-
-export const Button: React.ForwardRefExoticComponent<
-  React.PropsWithoutRef<ButtonProps> & React.RefAttributes<HTMLButtonElement>
->;
+export declare const StyledBaseButton: StyletronComponent<any>;
+export declare const StyledStartEnhancer: StyletronComponent<any>;
+export declare const StyledEndEnhancer: StyletronComponent<any>;
+export declare const StyledLoadingSpinner: StyletronComponent<any>;
+export declare const StyledLoadingSpinnerContainer: StyletronComponent<any>;
 
-export const KIND: KIND;
-export const SHAPE: SHAPE;
-export const SIZE: SIZE;
+export declare const Button: StyletronComponent<ButtonProps>;

package/button-group/index.d.ts

@@ -1,20 +1,20 @@
 import * as React from 'react';
-import {StyledFn, StyletronComponent} from 'styletron-react';
-import {SHAPE, SIZE, KIND} from '../button';
-import {Override} from '../overrides';
+import { StyletronComponent } from 'styletron-react';
+import { SHAPE, SIZE, KIND } from '../button';
+import { Override } from '../overrides';
 
-export {SHAPE, SIZE};
+export { SHAPE, SIZE };
 
-export interface MODE {
+export declare const MODE: {
   checkbox: 'checkbox';
   radio: 'radio';
-}
+};
 
-export interface STATE_CHANGE_TYPE {
+export declare const STATE_CHANGE_TYPE: {
   change: 'change';
-}
+};
 
-export const StyledRoot: StyletronComponent<any>;
+export declare const StyledRoot: StyletronComponent<any>;
 
 export interface ButtonGroupOverrides {
   Root?: Override<any>;
@@ -25,16 +25,16 @@ export interface ButtonGroupProps {
   'aria-label'?: string;
   children: React.ReactNode;
   disabled?: boolean;
-  mode?: MODE[keyof MODE];
+  mode?: typeof MODE[keyof typeof MODE];
   onClick?: (event: React.MouseEvent<HTMLButtonElement>, index: number) => any;
   overrides?: ButtonGroupOverrides;
   selected?: number | number[];
-  shape?: SHAPE[keyof SHAPE];
-  size?: SIZE[keyof SIZE];
-  kind?: KIND[keyof KIND];
+  shape?: typeof SHAPE[keyof typeof SHAPE];
+  size?: typeof SIZE[keyof typeof SIZE];
+  kind?: typeof KIND[keyof typeof KIND];
 }
 
-export const ButtonGroup: React.FC<ButtonGroupProps>;
+export declare const ButtonGroup: React.FC<ButtonGroupProps>;
 
 export interface InitialState {
   selected: number | number[];
@@ -47,21 +47,15 @@ export interface State {
 export interface StatefulButtonGroupProps extends ButtonGroupProps {
   initialState?: InitialState;
   stateReducer?: (
-    stateType: STATE_CHANGE_TYPE,
+    stateType: typeof STATE_CHANGE_TYPE[keyof typeof STATE_CHANGE_TYPE],
     nextState: State,
-    currentState: State,
+    currentState: State
   ) => State;
 }
 
-export const StatefulButtonGroup: React.FC<StatefulButtonGroupProps>;
+export declare const StatefulButtonGroup: React.FC<StatefulButtonGroupProps>;
 
-export class StatefulContainer extends React.Component<
-  StatefulButtonGroupProps,
-  State
-> {
+export class StatefulContainer extends React.Component<StatefulButtonGroupProps, State> {
   changeState(nextState: State): void;
   onClick(event: React.MouseEvent<HTMLButtonElement>, index: number): void;
 }
-
-export const MODE: MODE;
-export const STATE_CHANGE_TYPE: STATE_CHANGE_TYPE;