@rocket.chat/fuselage 0.6.3-dev.39 → 0.6.3-dev.393

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Rocket.Chat
+Copyright (c) 2021 Rocket.Chat
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,35 +1,126 @@
-<h1>@rocket.chat/fuselage</h1>
-<p>
-  <img alt="Version" src="https://img.shields.io/npm/v/@rocket.chat/fuselage.svg">
-  <a href="https://github.com/RocketChat/Rocket.Chat.Fuselage#readme" target="_blank"><img alt="Documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" /></a>
-  <a href="https://github.com/RocketChat/Rocket.Chat.Fuselage/graphs/commit-activity" target="_blank"><img alt="Maintenance" src="https://img.shields.io/badge/Maintained%3F-yes-green.svg" /></a>
-  <a href="https://rocketchat.github.io/Rocket.Chat.Fuselage" target="_blank"><img alt="Storybook" src="https://cdn.jsdelivr.net/gh/storybooks/brand@master/badge/badge-storybook.svg" /></a>
-  <a href="https://circleci.com/gh/RocketChat/Rocket.Chat.Fuselage" target="_blank"><img alt="Build Status on CircleCI" src="https://circleci.com/gh/RocketChat/Rocket.Chat.Fuselage/tree/master.svg?style=svg&circle-token=4bf3c8af9bf96e1338430d1ba3ce0084a45d1647" /></a>
-  <a href="https://twitter.com/RocketChat" target="_blank"><img alt="Twitter: RocketChat" src="https://img.shields.io/twitter/follow/RocketChat.svg?style=social" /></a>
+<!--header-->
+
+<p align="center">
+  <a href="https://rocket.chat" title="Rocket.Chat">
+    <img src="https://github.com/RocketChat/Rocket.Chat.Artwork/raw/master/Logos/2020/png/logo-horizontal-red.png" alt="Rocket.Chat" />
+  </a>
 </p>
 
-### 🏠 [Homepage](https://rocket.chat/Rocket.Chat.Fuselage)
+# `@rocket.chat/fuselage`
+
+---
+
+[![npm@latest](https://img.shields.io/npm/v/@rocket.chat/fuselage/latest?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/icons/v/latest) [![npm@next](https://img.shields.io/npm/v/@rocket.chat/fuselage/next?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/icons/v/next) ![react version](https://img.shields.io/npm/dependency-version/@rocket.chat/fuselage/peer/react?style=flat-square) [![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://rocketchat.github.io/Rocket.Chat.Fuselage/fuselage) ![npm downloads](https://img.shields.io/npm/dw/@rocket.chat/fuselage?style=flat-square) ![License: MIT](https://img.shields.io/npm/l/@rocket.chat/fuselage?style=flat-square)
+
+![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Ffuselage&style=flat-square) ![peer deps](https://img.shields.io/david/peer/RocketChat/Rocket.Chat.Fuselage?path=packages%2Ffuselage&style=flat-square) ![dev deps](https://img.shields.io/david/dev/RocketChat/Rocket.Chat.Fuselage?path=packages%2Ffuselage&style=flat-square) ![npm bundle size](https://img.shields.io/bundlephobia/min/@rocket.chat/fuselage?style=flat-square)
+
+<!--/header-->
 
 ## Install
 
+<!--install-->
+
+Firstly, install the peer dependencies (prerequisites):
+
 ```sh
-npm install --save @rocket.chat/fuselage
+npm i @rocket.chat/fuselage-hooks @rocket.chat/fuselage-polyfills @rocket.chat/icons react react-dom react-virtuoso
+
+# or, if you are using yarn:
+
+yarn add @rocket.chat/fuselage-hooks @rocket.chat/fuselage-polyfills @rocket.chat/icons react react-dom react-virtuoso
 ```
 
-## Author
+Add `@rocket.chat/fuselage` as a dependency:
+
+```sh
+npm i @rocket.chat/fuselage
+
+# or, if you are using yarn:
+
+yarn add @rocket.chat/fuselage
+```
 
-👤 **Rocket.Chat**
+<!--/install-->
 
-* Twitter: [@RocketChat](https://twitter.com/RocketChat)
-* Github: [@RocketChat](https://github.com/RocketChat)
+## Contributing
 
-## 🤝 Contributing
+<!--contributing(msg)-->
 
-Contributions, issues and feature requests are welcome!<br />Feel free to check [issues page](https://github.com/RocketChat/Rocket.Chat.Fuselage/issues).
+Contributions, issues, and feature requests are welcome!<br />
+Feel free to check the [issues](https://github.com/RocketChat/Rocket.Chat.Fuselage/issues).
 
-## Show your support
+<!--/contributing(msg)-->
+
+### Building
+
+As this package dependends on others in this monorepo, before anything run the following at the root directory:
+
+<!--yarn(build)-->
+
+```sh
+yarn build
+```
+
+<!--/yarn(build)-->
+
+### Linting
+
+To ensure the source is matching our coding style, we perform [linting](<https://en.wikipedia.org/wiki/Lint_(software)>).
+Before commiting, check if your code fits our style by running:
+
+<!--yarn(lint)-->
+
+```sh
+yarn lint
+```
 
-Give a ⭐️ if this project helped you!
+<!--/yarn(lint)-->
+
+Some linter warnings and errors can be automatically fixed:
+
+<!--yarn(lint-and-fix)-->
+
+```sh
+yarn lint-and-fix
+```
+
+<!--/yarn(lint-and-fix)-->
+
+### Running tests
+
+Whenever possible, add tests to describe exactly what your code do. You can run them by yourself:
+
+<!--yarn(test)-->
+
+```sh
+yarn test
+```
+
+<!--/yarn(test)-->
+
+### Component stories
+
+We develop and describe our visual components in the form of stories, manage by a tool called [Storybook](https://storybook.js.org/).
+To start developing with Storybook, run:
+
+<!--yarn(storybook)-->
+
+```sh
+yarn storybook
+```
+
+<!--/yarn(storybook)-->
+
+### Visually testing stories
+
+We perform visual regression testing in our component stories using [Loki](https://loki.js.org/).
+Everytime you add, modify, or remove components, you should update the set of reference images used to match
+how the components render in a real browser by running the following:
+
+<!--yarn(update-storybook)-->
+
+```sh
+yarn update-storybook
+```
 
-***
-_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_
+<!--/yarn(update-storybook)-->

package/dist/components/Accordion/index.d.ts

@@ -0,0 +1,13 @@
+import { ComponentProps, ForwardRefExoticComponent } from 'react';
+
+import { Box } from '../Box';
+
+type AccordionProps = ComponentProps<typeof Box>;
+type AccordionItemProps = Omit<ComponentProps<typeof Box>, 'title'> & {
+  defaultExpanded?: boolean;
+  title?: string;
+};
+
+export const Accordion: ForwardRefExoticComponent<AccordionProps> & {
+  Item: ForwardRefExoticComponent<AccordionItemProps>;
+};

package/dist/components/AutoComplete/index.d.ts

@@ -0,0 +1,18 @@
+import { ElementType, FC } from 'react';
+
+type AutoCompleteProps = {
+  value: unknown[];
+  filter: string;
+  setFilter?: (filter: string) => void;
+  options?: { label: string; value: unknown }[];
+  renderItem: ElementType;
+  renderSelected?: ElementType;
+  onChange: (value: unknown, action: 'remove' | undefined) => void;
+  getLabel?: (option: { label: string; value: unknown }) => string;
+  getValue?: (option: { label: string; value: unknown }) => unknown;
+  renderEmpty?: ElementType;
+  placeholder?: string;
+  error?: boolean;
+  disabled?: boolean;
+};
+export const AutoComplete: FC<AutoCompleteProps>;

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1,28 @@
+import { ComponentProps, Context, ForwardRefExoticComponent } from 'react';
+
+import { Box } from '../Box';
+
+type AvatarProps = Omit<ComponentProps<typeof Box>, 'title' | 'size'> & {
+  title?: string;
+  size?:
+    | 'x16'
+    | 'x18'
+    | 'x20'
+    | 'x24'
+    | 'x28'
+    | 'x32'
+    | 'x36'
+    | 'x40'
+    | 'x48'
+    | 'x124'
+    | 'x200'
+    | 'x332';
+  rounded?: boolean;
+  objectFit?: boolean;
+  url: string;
+};
+export const Avatar: ForwardRefExoticComponent<AvatarProps> & {
+  Context: Context<{
+    baseUrl: string;
+  }>;
+};

package/dist/components/Badge/index.d.ts

@@ -0,0 +1,11 @@
+import { ElementType, ForwardRefExoticComponent } from 'react';
+
+type BadgeProps = {
+  is?: ElementType;
+  variant?: 'primary' | 'danger' | 'warning';
+  disabled?: boolean;
+  className?: string;
+  children?: any;
+  title?: any;
+};
+export const Badge: ForwardRefExoticComponent<BadgeProps>;

package/dist/components/Banner/Banner.d.ts

@@ -0,0 +1,15 @@
+import { AllHTMLAttributes, FC, ReactNode } from 'react';
+
+type BannerProps = {
+  inline?: boolean;
+  actionable?: boolean;
+  closeable?: boolean;
+  icon?: ReactNode;
+  title?: string;
+  variant?: 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+  onAction?: () => void;
+  onClose?: () => void;
+} & AllHTMLAttributes<HTMLElement>;
+const Banner: FC<BannerProps>;
+
+export = Banner;

package/dist/components/Banner/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Banner';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Banner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/Box/AnimatedVisibility/AnimatedVisibility.d.ts

@@ -0,0 +1,16 @@
+import { ReactElement, ReactNode } from 'react';
+
+type AnimatedVisibilityProps = {
+  children: ReactNode;
+  visibility?: 'hidden' | 'visible' | 'hiding' | 'unhiding';
+};
+
+const AnimatedVisibility: {
+  (props: AnimatedVisibilityProps): ReactElement;
+  HIDDEN: 'hidden';
+  VISIBLE: 'visible';
+  HIDING: 'hiding';
+  UNHIDING: 'unhiding';
+};
+
+export = AnimatedVisibility;

package/dist/components/Box/AnimatedVisibility/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './AnimatedVisibility';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Box/AnimatedVisibility/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/AnimatedVisibility/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/components/Box/BoxTransforms.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const BoxTransforms: import("react").Context<((props: any) => any) | null>;
+export declare const useBoxTransform: () => ((props: any) => any) | null;
+export declare const useComposedBoxTransform: (fn: (props: any) => any) => (props: any) => any;
+//# sourceMappingURL=BoxTransforms.d.ts.map

package/dist/components/Box/BoxTransforms.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoxTransforms.d.ts","sourceRoot":"","sources":["../../../src/components/Box/BoxTransforms.ts"],"names":[],"mappings":";AAEA,eAAO,MAAM,aAAa,mCAAiC,GAAG,KAAK,GAAG,SAAQ,CAAC;AAE/E,eAAO,MAAM,eAAe,iBAF+B,GAAG,KAAK,GAAG,QAER,CAAC;AAE/D,eAAO,MAAM,uBAAuB,eAAgB,GAAG,KAAK,GAAG,aAJJ,GAAG,KAAK,GAkBlE,CAAC"}

package/dist/components/Box/Flex/index.d.ts

@@ -0,0 +1,32 @@
+import { ReactElement, ReactNode } from 'react';
+
+type FlexContainerProps = {
+  children?: ReactNode;
+  inline?: boolean;
+  direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+  wrap?: 'no-wrap' | 'wrap' | 'wrap-reverse';
+  alignItems?: 'stretch' | 'start' | 'center' | 'end' | 'baseline';
+  alignContent?: 'start' | 'center' | 'end' | 'space-between' | 'space-around';
+  justifyContent?:
+    | 'start'
+    | 'center'
+    | 'end'
+    | 'space-between'
+    | 'space-around';
+};
+
+type FlexItemProps = {
+  children?: ReactNode;
+  order?: number;
+  grow?: number;
+  shrink?: number;
+  basis?: number | string | 'auto';
+  align?: 'auto' | 'start' | 'end' | 'center' | 'stretch';
+};
+
+const Flex: {
+  Container: (props: FlexContainerProps) => ReactElement;
+  Item: (props: FlexItemProps) => ReactElement;
+};
+
+export = Flex;

package/dist/components/Box/Position/Position.d.ts

@@ -0,0 +1,14 @@
+import { Placements, PositionOptions } from '@rocket.chat/fuselage-hooks';
+import { ComponentProps, FC, RefObject } from 'react';
+
+import { Box } from '..';
+
+type PositionProps = {
+  anchor?: RefObject<Element>;
+  placement?: Placements;
+  margin?: PositionOptions['margin'];
+} & ComponentProps<typeof Box>;
+
+declare const Position: FC<PositionProps>;
+
+export = Position;

package/dist/components/Box/Position/PositionAnimated.d.ts

@@ -0,0 +1,11 @@
+import { ComponentProps, FC } from 'react';
+
+import Position from '.';
+
+type PositionAnimatedProps = {
+  visible?: 'hidden' | 'visible' | 'hiding' | 'unhiding';
+} & ComponentProps<typeof Position>;
+
+declare const PositionAnimated: FC<PositionAnimatedProps>;
+
+export = PositionAnimated;

package/dist/components/Box/Position/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Position';
+export { default as PositionAnimated } from './PositionAnimated';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Box/Position/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/Position/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/Box/Scrollable/index.d.ts

@@ -0,0 +1,9 @@
+import { ForwardRefExoticComponent, PropsWithChildren } from 'react';
+
+type ScrollableProps = PropsWithChildren<{
+  horizontal?: boolean;
+  vertical?: boolean;
+  onScrollContent?: (touching: { top: boolean }) => void;
+}>;
+const Scrollable: ForwardRefExoticComponent<ScrollableProps>;
+export default Scrollable;

package/dist/components/Box/index.d.ts

@@ -0,0 +1,180 @@
+import type { css } from '@rocket.chat/css-in-js';
+import {
+  AllHTMLAttributes,
+  CSSProperties,
+  ElementType,
+  ForwardRefExoticComponent,
+  PropsWithChildren,
+  RefAttributes,
+  SVGAttributes,
+} from 'react';
+
+type FontScale =
+  | 'hero'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'p1'
+  | 'p1m'
+  | 'p1b'
+  | 'p2'
+  | 'p2m'
+  | 'p2b'
+  | 'c1'
+  | 'c2'
+  | 'micro';
+
+type BoxProps = PropsWithChildren<{
+  is?: ElementType;
+  className?:
+    | string
+    | ReturnType<typeof css>
+    | (string | ReturnType<typeof css>)[];
+  style?: CSSProperties;
+  border?: CSSProperties['border'];
+  borderBlock?: CSSProperties['borderBlock'];
+  borderBlockStart?: CSSProperties['borderBlockStart'];
+  borderBlockEnd?: CSSProperties['borderBlockEnd'];
+  borderInline?: CSSProperties['borderInline'];
+  borderInlineStart?: CSSProperties['borderInlineStart'];
+  borderInlineEnd?: CSSProperties['borderInlineEnd'];
+  borderWidth?: CSSProperties['borderWidth'];
+  borderBlockWidth?: CSSProperties['borderBlockWidth'];
+  borderBlockStartWidth?: CSSProperties['borderBlockStartWidth'];
+  borderBlockEndWidth?: CSSProperties['borderBlockEndWidth'];
+  borderInlineWidth?: CSSProperties['borderInlineWidth'];
+  borderInlineStartWidth?: CSSProperties['borderInlineStartWidth'];
+  borderInlineEndWidth?: CSSProperties['borderInlineEndWidth'];
+  borderStyle?: CSSProperties['borderStyle'];
+  borderBlockStyle?: CSSProperties['borderBlockStyle'];
+  borderBlockStartStyle?: CSSProperties['borderBlockStartStyle'];
+  borderBlockEndStyle?: CSSProperties['borderBlockEndStyle'];
+  borderInlineStyle?: CSSProperties['borderInlineStyle'];
+  borderInlineStartStyle?: CSSProperties['borderInlineStartStyle'];
+  borderInlineEndStyle?: CSSProperties['borderInlineEndStyle'];
+  borderColor?: CSSProperties['borderColor'];
+  borderBlockColor?: CSSProperties['borderBlockColor'];
+  borderBlockStartColor?: CSSProperties['borderBlockStartColor'];
+  borderBlockEndColor?: CSSProperties['borderBlockEndColor'];
+  borderInlineColor?: CSSProperties['borderInlineColor'];
+  borderInlineStartColor?: CSSProperties['borderInlineStartColor'];
+  borderInlineEndColor?: CSSProperties['borderInlineEndColor'];
+  borderRadius?: CSSProperties['borderRadius'];
+  borderStartStartRadius?: CSSProperties['borderStartStartRadius'];
+  borderStartEndRadius?: CSSProperties['borderStartEndRadius'];
+  borderEndStartRadius?: CSSProperties['borderEndStartRadius'];
+  borderEndEndRadius?: CSSProperties['borderEndEndRadius'];
+
+  color?: CSSProperties['color'];
+  backgroundColor?: CSSProperties['backgroundColor'];
+  bg?: CSSProperties['backgroundColor'];
+  opacity?: CSSProperties['opacity'];
+
+  alignItems?: CSSProperties['alignItems'];
+  alignContent?: CSSProperties['alignContent'];
+  justifyItems?: CSSProperties['justifyItems'];
+  justifyContent?: CSSProperties['justifyContent'];
+  flexWrap?: CSSProperties['flexWrap'];
+  flexDirection?: CSSProperties['flexDirection'];
+  flexGrow?: CSSProperties['flexGrow'];
+  flexShrink?: CSSProperties['flexShrink'];
+  flexBasis?: CSSProperties['flexBasis'];
+  justifySelf?: CSSProperties['justifySelf'];
+  alignSelf?: CSSProperties['alignSelf'];
+  order?: CSSProperties['order'];
+
+  w?: CSSProperties['width'];
+  width?: CSSProperties['width'];
+  minWidth?: CSSProperties['minWidth'];
+  maxWidth?: CSSProperties['maxWidth'];
+  h?: CSSProperties['height'];
+  height?: CSSProperties['height'];
+  minHeight?: CSSProperties['minHeight'];
+  maxHeight?: CSSProperties['maxHeight'];
+  display?: CSSProperties['display'];
+  verticalAlign?: CSSProperties['verticalAlign'];
+  overflow?: CSSProperties['overflow'];
+  overflowX?: CSSProperties['overflowX'];
+  overflowY?: CSSProperties['overflowY'];
+
+  position?: CSSProperties['position'];
+  zIndex?: CSSProperties['zIndex'];
+  inset?: CSSProperties['inset'];
+  insetBlock?: CSSProperties['insetBlock'];
+  insetBlockStart?: CSSProperties['insetBlockStart'];
+  insetBlockEnd?: CSSProperties['insetBlockEnd'];
+  insetInline?: CSSProperties['insetInline'];
+  insetInlineStart?: CSSProperties['insetInlineStart'];
+  insetInlineEnd?: CSSProperties['insetInlineEnd'];
+
+  m?: CSSProperties['margin'];
+  margin?: CSSProperties['margin'];
+  mb?: CSSProperties['marginBlock'];
+  marginBlock?: CSSProperties['marginBlock'];
+  mbs?: CSSProperties['marginBlockStart'];
+  marginBlockStart?: CSSProperties['marginBlockStart'];
+  mbe?: CSSProperties['marginBlockEnd'];
+  marginBlockEnd?: CSSProperties['marginBlockEnd'];
+  mi?: CSSProperties['marginInline'];
+  marginInline?: CSSProperties['marginInline'];
+  mis?: CSSProperties['marginInlineStart'];
+  marginInlineStart?: CSSProperties['marginInlineStart'];
+  mie?: CSSProperties['marginInlineEnd'];
+  marginInlineEnd?: CSSProperties['marginInlineEnd'];
+  p?: CSSProperties['padding'];
+  padding?: CSSProperties['padding'];
+  pb?: CSSProperties['paddingBlock'];
+  paddingBlock?: CSSProperties['paddingBlock'];
+  pbs?: CSSProperties['paddingBlockStart'];
+  paddingBlockStart?: CSSProperties['paddingBlockStart'];
+  pbe?: CSSProperties['paddingBlockEnd'];
+  paddingBlockEnd?: CSSProperties['paddingBlockEnd'];
+  pi?: CSSProperties['paddingInline'];
+  paddingInline?: CSSProperties['paddingInline'];
+  pis?: CSSProperties['paddingInlineStart'];
+  paddingInlineStart?: CSSProperties['paddingInlineStart'];
+  pie?: CSSProperties['paddingInlineEnd'];
+  paddingInlineEnd?: CSSProperties['paddingInlineEnd'];
+
+  fontFamily?: CSSProperties['fontFamily'] | FontScale;
+  fontSize?: CSSProperties['fontSize'] | FontScale;
+  fontStyle?: CSSProperties['fontStyle'];
+  fontWeight?: CSSProperties['fontWeight'] | FontScale;
+  letterSpacing?: CSSProperties['letterSpacing'] | FontScale;
+  lineHeight?: CSSProperties['lineHeight'] | FontScale;
+  textAlign?: CSSProperties['textAlign'];
+  textTransform?: CSSProperties['textTransform'];
+  textDecorationLine?: CSSProperties['textDecorationLine'];
+
+  elevation?: '0' | '1' | '2';
+  invisible?: boolean;
+  withRichContent?: boolean | string;
+  withTruncatedText?: boolean;
+  size?: CSSProperties['blockSize'];
+  minSize?: CSSProperties['blockSize'];
+  maxSize?: CSSProperties['blockSize'];
+  fontScale?: FontScale;
+}> &
+  Omit<AllHTMLAttributes<HTMLOrSVGElement>, 'className'> &
+  Omit<SVGAttributes<SVGElement>, keyof AllHTMLAttributes<HTMLOrSVGElement>> &
+  RefAttributes<unknown>;
+
+export const Box: ForwardRefExoticComponent<BoxProps>;
+
+export { default as AnimatedVisibility } from './AnimatedVisibility';
+export { default as Flex } from './Flex';
+export { default as Position, PositionAnimated } from './Position';
+export { default as Scrollable } from './Scrollable';
+
+export const useArrayLikeClassNameProp: <
+  T extends {
+    className?:
+      | string
+      | ReturnType<typeof css>
+      | (string | ReturnType<typeof css>)[];
+  }
+>(
+  props: T
+) => T & { className: string };

package/dist/components/Button/index.d.ts

@@ -0,0 +1,27 @@
+import { ComponentProps, ForwardRefExoticComponent } from 'react';
+
+import { Box } from '../Box';
+
+type ButtonProps = ComponentProps<typeof Box> & {
+  info?: boolean;
+  success?: boolean;
+  warning?: boolean;
+  danger?: boolean;
+  primary?: boolean;
+  ghost?: boolean;
+  nude?: boolean;
+  ghostish?: boolean;
+  small?: boolean;
+  square?: boolean;
+};
+export const Button: ForwardRefExoticComponent<ButtonProps>;
+
+type ActionButtonProps = ButtonProps & {
+  icon: string;
+  mini?: boolean;
+  tiny?: boolean;
+  small?: boolean;
+};
+export const ActionButton: ForwardRefExoticComponent<ActionButtonProps>;
+
+export = Button;

package/dist/components/ButtonGroup/index.d.ts

@@ -0,0 +1,13 @@
+import { ComponentProps, ForwardRefExoticComponent } from 'react';
+
+import { Box } from '../Box';
+
+type ButtonGroupProps = ComponentProps<typeof Box> & {
+  align?: 'start' | 'center' | 'end';
+  stretch?: boolean;
+  wrap?: boolean;
+  vertical?: boolean;
+  small?: boolean;
+  medium?: boolean;
+};
+export const ButtonGroup: ForwardRefExoticComponent<ButtonGroupProps>;

package/dist/components/Callout/index.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps, ForwardRefExoticComponent } from 'react';
+
+import { Box } from '../Box';
+
+type CalloutProps = Omit<ComponentProps<typeof Box>, 'type'> & {
+  type?: 'info' | 'success' | 'warning' | 'danger';
+};
+export const Callout: ForwardRefExoticComponent<CalloutProps>;

package/dist/components/CheckBox/index.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps, ForwardRefExoticComponent } from 'react';
+
+import { Box } from '../Box';
+
+type CheckBoxProps = ComponentProps<typeof Box> & {
+  indeterminate?: boolean;
+};
+export const CheckBox: ForwardRefExoticComponent<CheckBoxProps>;

package/dist/components/Chevron/index.d.ts

@@ -0,0 +1,12 @@
+import { ComponentProps, ForwardRefExoticComponent } from 'react';
+
+import { Box } from '../Box';
+
+type ChevronProps = Omit<ComponentProps<typeof Box>, 'size'> & {
+  size?: ComponentProps<typeof Box>['width'];
+  right?: boolean;
+  left?: boolean;
+  top?: boolean;
+  bottom?: boolean;
+};
+export const Chevron: ForwardRefExoticComponent<ChevronProps>;

package/dist/components/Chip/index.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps, ForwardRefExoticComponent } from 'react';
+
+import { Box } from '../Box';
+
+type ChipProps = ComponentProps<typeof Box>;
+const Chip: ForwardRefExoticComponent<ChipProps>;
+
+export = Chip;

package/dist/components/Divider/index.d.ts

@@ -0,0 +1,6 @@
+import { ComponentProps, FC } from 'react';
+import { Box } from '../Box';
+declare type DividerProps = ComponentProps<typeof Box>;
+declare const Divider: FC<DividerProps>;
+export { Divider };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Divider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAE7B,aAAK,YAAY,GAAG,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC;AAE/C,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAE7B,CAAC;AACF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,8 @@
+import { usePosition } from '@rocket.chat/fuselage-hooks';
+import React, { ReactNode } from 'react';
+export declare const Dropdown: React.ForwardRefExoticComponent<{
+    reference: React.RefObject<HTMLElement>;
+    placement?: Parameters<typeof usePosition>[2]['placement'];
+    children: ReactNode;
+} & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=Dropdown.d.ts.map